/* AC-Funnel landingspagina styles -- alleen geladen op body.ac-funnel pagina's */

/* ==================================================================
   AC-FUNNEL — huur/koop funnel landingspagina's
   Gebruikt dezelfde hero-structuur als Cool Again, maar met de
   Aqua Chain brand-blue accenten (geen groen).
   Activeert zich alleen via body.ac-funnel (zie aquachain-funnels.php).
   ================================================================== */
body.ac-funnel {
    --acf-accent:       var(--ac-freshblue);
    --acf-accent-2:     var(--ac-freshblue-2);
    --acf-accent-soft:  #e8f2fa;
    --acf-sky:          var(--ac-skyblue);
    --acf-cream:        #f7fafd;
    --acf-shadow:       0 4px 22px rgba(6, 64, 97, 0.12);
}

/* Eyebrow/kicker boven de H1 — blauwe pill op eigen regel */
body.ac-funnel .ca-eyebrow {
    display: inline-block;
    margin: 0 0 1rem 0;
    padding: 0.4rem 0.95rem;
    background: var(--acf-accent-soft);
    color: var(--acf-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(6, 64, 97, 0.22);
    line-height: 1.2;
}

/* Hero H1 in eerste content_blok */
body.ac-funnel .ca-hero-title {
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ac-darkblue);
    margin: 0 0 1.1rem 0;
}

body.ac-funnel .ca-lede {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #3a4655;
    margin: 0 0 2.2rem 0;
    max-width: 62ch;
}

body.ac-funnel .section-content_blok:first-of-type h2 {
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ac-border);
}

/* Subtiele afwisseling tussen content-blokken */
body.ac-funnel .section-content_blok:nth-of-type(even) {
    background: var(--acf-cream);
}

/* Definitie-intro: blauwe linker-accent (i.p.v. de bestaande blauwe default, iets frisser) */
body.ac-funnel .aquachain-definitie,
body.ac-funnel .section-definitie_intro .aquachain-definitie {
    background: var(--acf-accent-soft);
    border-left-color: var(--acf-accent);
}
body.ac-funnel .aquachain-definitie__label,
body.ac-funnel .aquachain-definitie strong:first-child {
    color: var(--acf-accent);
}

/* Kaarten-grid: blauw accent */
body.ac-funnel .ac-card {
    border-top: 4px solid var(--acf-accent-2);
    box-shadow: var(--acf-shadow);
}
body.ac-funnel .ac-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(6, 64, 97, 0.2);
}
body.ac-funnel .ac-card h3 {
    color: var(--acf-accent);
}

/* Stappenplan-nummers */
body.ac-funnel .ac-steps li::before {
    background: var(--acf-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(6, 64, 97, 0.35);
}

/* FAQ open/hover-kleur */
body.ac-funnel .aquachain-faq details[open] > summary,
body.ac-funnel .aquachain-faq summary:hover {
    color: var(--acf-accent);
}
body.ac-funnel .aquachain-faq summary::after {
    color: var(--acf-accent-2);
}

/* Call-out variant (zelfde class .ca-callout als Cool Again, maar blauw) */
body.ac-funnel .ca-callout {
    background: var(--acf-accent-soft);
    border: 1px solid rgba(6, 64, 97, 0.18);
    border-left: 4px solid var(--acf-accent);
}
body.ac-funnel .ca-callout strong {
    color: var(--acf-accent);
}

/* "Onafhankelijke waterleverancier" USP-pill — subtiel vermeldbaar in content */
.ac-independent-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    background: var(--ac-skyblue);
    color: var(--ac-freshblue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid rgba(6, 64, 97, 0.18);
}
.ac-independent-pill::before { content: "●"; color: var(--ac-freshblue); font-size: 0.65rem; }

/* Sector-hero met sfeerbeeld naast de tekst (14 sep 2026, eerst bouw). Kop op vaste regels via span.ca-regel. */
body.ac-funnel .ac-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center;margin:0 0 1rem}
body.ac-funnel .ac-hero-grid .ca-lede{max-width:none;margin-bottom:1.2rem}
body.ac-funnel .ac-hero-beeld{margin:0}
body.ac-funnel .ac-hero-beeld img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:18px;box-shadow:0 18px 40px rgba(6,64,97,.18)}
body.ac-funnel .ca-hero-title--regels{text-wrap:wrap}
body.ac-funnel .ca-hero-title--regels .ca-regel{display:block}
@media (max-width:900px){body.ac-funnel .ac-hero-grid{grid-template-columns:minmax(0,1fr)}body.ac-funnel .ac-hero-beeld{order:-1}}
@media (max-width:600px){body.ac-funnel .ca-hero-title--regels .ca-regel{display:inline}}

/* Bouwhero even breed als de kaartenrij (14 sep 2026): container query units op de sectioninner. */
body.ac-funnel .section-content_blok:has(.ac-hero-grid) > .sectioninner{container-type:inline-size}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ca-eyebrow{margin-left:calc(50% - 50cqw)}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) :is(.ca-hero-title,.ac-hero-grid,.ac-counter-grid){width:100cqw!important;max-width:none;margin-left:calc(50% - 50cqw)!important}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4.5rem)}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid .ca-lede{max-width:68ch}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-beeld img{max-width:620px;margin-left:auto}
@media (max-width:900px){body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid{grid-template-columns:minmax(0,1fr)}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-beeld img{max-width:none}}

/* Bouwhero: label en kop in de tekstkolom naast het beeld (14 sep 2026). Telefoon: kop, beeld, tekst. */
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,4vw,4rem);align-items:center}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-eyebrow{margin-left:0}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-hero-title{width:auto!important;margin-left:0!important}
body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-beeld img{max-width:none}
@media (max-width:900px){body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid{grid-template-columns:minmax(0,1fr);gap:0}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst{display:contents}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-eyebrow{order:1;justify-self:start}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-hero-title{order:2}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-beeld{order:3;margin:0 0 1.5rem}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-lede{order:4}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst > p:has(.ac-independent-pill){order:5}}

/* Bouwhero: breder beeld, twee gelijke kolommen vanaf 901 px; kop schaalt mee met de kolom zodat hij op drie regels blijft (14 sep 2026). */
@media (min-width:901px){body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,2.5vw,3rem)}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-tekst .ca-hero-title{font-size:clamp(2rem,calc((100cqw - clamp(2rem,2.5vw,3rem)) / 2 / 13.9),2.9rem)}body.ac-funnel .section-content_blok:has(.ac-hero-grid) .ac-hero-beeld img{aspect-ratio:3/2;object-position:50% 45%}}