/*
 * Audit stage 2 (2026-10-06): WCAG 2.2 AA colour contrast, archive restyle,
 * tap targets and the phone stats bar. Loaded last (includes/audit-styles.php).
 *
 * Why a separate file: gmina-page.css, service-page.css and header-enhancements.css
 * are not touched here. Everything below overrides them from a later position.
 *
 * Colours (contrast computed in tests/test-audit-styles.php):
 *   --eko-green-text  #4e7c17  text on light backgrounds. Same value as the
 *                              customer form (commit 67ed9376a). 4.98:1 on white,
 *                              4.65:1 on #f7f7f7, 4.58:1 on #f1f8e8.
 *   --eko-green-btn   #518118  button background under white text, 4.66:1.
 *                              Same hue (87 deg) and saturation as brand #70B221.
 *   --eko-green-btn-hover #3f6b12  6.32:1 with white text.
 * The bright brand green #70B221 stays on dark navy sections, the stats bar and
 * decorative fills (those are excluded below with :not(<dark> *)).
 *
 * Unavoidable !important: block-editor markup writes colours inline
 * (style="color:#70B221", style="background-color:#70B221"), which only
 * !important can override. Everything else relies on specificity.
 */

:root {
    --eko-green-text: #4e7c17;
    --eko-green-btn: #518118;
    --eko-green-btn-hover: #3f6b12;
}

/* ==========================================================================
   1. Green TEXT on light backgrounds
   ========================================================================== */

/* 1a. Headings that take their green from the Astra global colour (page content).
   Skipped: headings with an explicit colour class, plugin-built sections (they
   set their own ink colour), and anything inside a dark section. */
body .entry-content :is(h1, h2, h3, h4, h5, h6):not(.has-text-color):not(:is(
    .stats-bar, .wp-block-cover, .has-ast-global-color-0-background-color,
    [style*="background-color:#00073F" i], [style*="background:#00073F" i], [style*="gradient" i],
    .eim-service-page, .eim-page, .eko-kontakt, .ekoinstal-money-links,
    .ekoinstal-home-realizacje-cta, .ekoinstal-cta-form, .ekoinstal-energy-cta
) *) {
    color: var(--eko-green-text);
}

/* 1b. Inline green text written by the block editor (kickers, labels, links). */
body .entry-content :is([style^="color:#70B221" i], [style*=";color:#70B221" i], [style*="; color:#70B221" i]):not(:is(
    .stats-bar, .wp-block-cover, .has-ast-global-color-0-background-color,
    [style*="background-color:#00073F" i], [style*="background:#00073F" i], [style*="gradient" i]
) *) {
    color: var(--eko-green-text) !important;
}

/* 1c. Text links inside the homepage / solution cards ("Dowiedz się więcej →",
   "Sprawdź →"). Also gives them a 24px tall target without moving the layout. */
body .entry-content .service-card a:not(.wp-block-button__link) {
    align-items: center;
    color: var(--eko-green-text);
    display: inline-flex;
    min-height: 24px;
}

body .entry-content .service-card a:not(.wp-block-button__link):hover,
body .entry-content .service-card a:not(.wp-block-button__link):focus-visible {
    color: var(--eko-green-btn-hover);
}

body .entry-content .ekoinstal-related-links a {
    align-items: center;
    display: inline-flex;
    min-height: 24px;
}

/* 1d. Service pages (.eim-service-page) and dotacje pages. */
body .eim-service-page .eim-service-kicker:not(:is(.eim-service-hero, .eim-service-cta, .eim-service-card--feature) *),
body .eim-service-page .eim-service-step__num,
body .eim-service-page .eim-service-badge__num,
body .eim-service-page .eim-service-card:not(.eim-service-card--feature) .eim-service-card__label,
body .eim-service-page .eim-service-faq__item summary::after {
    color: var(--eko-green-text);
}

/* 1e. Gmina pages (.eim-page). */
body .eim-page .eim-kicker:not(:is(.eim-hero, .eim-stats, .eim-cta-block, .eim-svc-card--feature) *),
body .eim-page .eim-hero__badge-num,
body .eim-page .eim-svc-card:not(.eim-svc-card--feature) .eim-svc-card__cta,
body .eim-page .eim-svc-card:not(.eim-svc-card--feature) .eim-svc-card__label,
body .eim-page .eim-svc-card:not(.eim-svc-card--feature) .eim-svc-card__icon {
    color: var(--eko-green-text);
}

body .eim-page .eim-svc-card:not(.eim-svc-card--feature) .eim-svc-card__cta {
    min-height: 24px;
}

/* ==========================================================================
   2. Green BUTTONS under white text
   ========================================================================== */

body .entry-content .wp-block-button__link[style*="background-color:#70B221" i] {
    background-color: var(--eko-green-btn) !important;
    color: #fff !important;
}

body .entry-content .wp-block-button__link[style*="background-color:#70B221" i]:hover,
body .entry-content .wp-block-button__link[style*="background-color:#70B221" i]:focus-visible {
    background-color: var(--eko-green-btn-hover) !important;
}

body .ekoinstal-home-realizacje-cta__button,
body .eim-service-btn--primary,
body .eim-page .eim-btn--primary,
body .eim-page .eim-btn--accent,
body .eim-page .eim-hero .eim-btn--primary,
body .eko-sector-buttons .eko-sector-btn--dom {
    background: var(--eko-green-btn);
    color: #fff;
}

body .ekoinstal-home-realizacje-cta__button:hover,
body .ekoinstal-home-realizacje-cta__button:focus-visible,
body .eim-service-btn--primary:hover,
body .eim-service-btn--primary:focus-visible,
body .eim-page .eim-btn--primary:hover,
body .eim-page .eim-btn--accent:hover,
body .eim-page .eim-hero .eim-btn--primary:hover,
body .eko-sector-buttons .eko-sector-btn--dom:hover {
    background: var(--eko-green-btn-hover);
    color: #fff;
}

/* ==========================================================================
   3. Archives: /realizacje/, /blog/, category and tag archives
   Cause of the dark page: Astra sets .ast-separate-container { background:
   var(--ast-global-color-5) } (#333333, "site background" in the customizer) and
   only singular pages paint their own white box on top of it.
   ========================================================================== */

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) {
    background-color: #f6f8fb;
}

/* Powiat (region) pages and the gmina archive keep their own templates; only the
   dark Astra page background behind them is replaced. */
body:is(.tax-region, .post-type-archive-location_page),
body:is(.tax-region, .post-type-archive-location_page) #primary {
    background-color: #f6f8fb;
}

/* Title: a normal page heading instead of a detached grey box. */
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-archive-description,
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary > header.entry-header {
    background: transparent;
    margin: 0 0 8px;
    max-width: none;
    padding: 36px 0 8px;
    text-align: left;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-archive-description .ast-archive-title,
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary > header.entry-header .entry-title {
    color: #00073F;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

/* Card grid: one radius, one shadow, white card on the light page. */
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .ast-article-inner {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .ast-article-inner:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-title a {
    color: #00073F;
    text-decoration: none;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-title a:hover,
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-title a:focus-visible {
    color: var(--eko-green-text);
    text-decoration: underline;
}

/* Meta: >= 13px, AA contrast. The "/ Przez <author>" part is hidden: the author
   link is removed with display:none, the leftover separator text is collapsed by
   zeroing the font size of the row and restoring it for the date only. */
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-meta {
    font-size: 0;
    line-height: 1.45;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-meta .posted-on,
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-meta .posted-on * {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .entry-meta .posted-by {
    display: none;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .ast-taxonomy-container,
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-article-post .ast-taxonomy-container a {
    color: #00073F;
    font-size: 13px;
    font-weight: 700;
}

/* Pagination: brand colours, 44px targets, visible focus. */
body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-pagination {
    padding-top: 40px;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-pagination .page-numbers {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: var(--eko-green-text);
    display: inline-block;
    float: none;
    font-size: 16px;
    font-weight: 700;
    height: 44px;
    line-height: 42px;
    margin: 0 3px;
    min-width: 44px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: auto;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-pagination a.page-numbers:hover {
    background: #f1f8e8;
    border-color: var(--eko-green-text);
    color: var(--eko-green-btn-hover);
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-pagination .page-numbers.current {
    background: var(--eko-green-text);
    border-color: var(--eko-green-text);
    color: #fff;
}

body:is(.blog, .post-type-archive-realizacja, .category, .tag, .tax-service_type) #primary .ast-pagination a.page-numbers:focus-visible {
    outline: 3px solid #00073F;
    outline-offset: 2px;
}

/* ==========================================================================
   4. Contact page hero: the WebP <picture> wrapper (home hero rule, same image)
   ========================================================================== */

.contact-hero > picture {
    height: 100%;
    inset: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.contact-hero > picture > .wp-block-cover__image-background {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ==========================================================================
   5. Homepage stats bar on phones: 2 x 2 grid instead of four full-width rows
   (block markup writes the paddings and the 48px number inline)
   ========================================================================== */

@media (max-width: 600px) {
    .entry-content .stats-bar {
        padding: 28px 16px !important;
    }

    .entry-content .stats-bar > .wp-block-columns {
        display: grid;
        gap: 4px 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
    }

    .entry-content .stats-bar > .wp-block-columns > .wp-block-column {
        flex-basis: auto !important;
        margin: 0;
        padding: 10px 4px !important;
    }

    .entry-content .stats-bar .stat-number {
        font-size: 32px !important;
        line-height: 1.1;
        margin: 0 0 4px;
    }

    .entry-content .stats-bar .stat-label {
        font-size: 12px !important;
        letter-spacing: 1px !important;
        line-height: 1.3;
        margin: 0;
    }
}

/* ==========================================================================
   Homepage hero on phones: show the house with the solar roof AND the wind
   turbine. The cover photo is very wide (2.5:1), so a tall phone hero can only
   show about a fifth of its width. Here the photo fills the lower 72% of the
   hero (a wider slice), fades into a sky-toned gradient at the top where the
   heading sits, and the buttons end above the house.
   ========================================================================== */
@media (max-width: 600px) {
    body.home .hero-section {
        align-items: flex-start !important;
        background: linear-gradient(180deg, #5d6f86 0%, #93a0ad 38%, #b9bcb4 60%) !important;
        min-height: 680px !important;
    }

    body.home .hero-section img.wp-block-cover__image-background {
        bottom: 0 !important;
        height: 72% !important;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
        mask-image: linear-gradient(180deg, transparent 0, #000 22%);
        object-position: 86% 100% !important;
        top: auto !important;
    }

    /* The small search-intent sentence is unreadable over the photo on phones. */
    body.home .hero-section .wp-block-cover__inner-container > p:nth-of-type(2) {
        display: none !important;
    }

    body.home .hero-section .wp-block-buttons {
        gap: 10px !important;
    }
}