/* Dark sections use spacing and subtle surface changes to establish rhythm.
   The legacy band-paper class now resolves to the charcoal foundation. */

.band {
    padding-block: var(--space-3xl);
}

.band-tight { padding-block: var(--space-2xl); }
.band-flush-top { padding-top: 0; }

.band-ink {
    background-color: var(--ink);
    color: var(--on-ink);
}

.band-ink h1,
.band-ink h2,
.band-ink h3 { color: var(--on-ink); }

.band-ink p { color: var(--on-ink-body); }

.band-paper {
    background-color: var(--paper);
    color: var(--text);
}

/* Page header band — interior pages */
.page-header {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-2xl);
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header__inner {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.page-header p {
    font-size: var(--font-size-lg);
    line-height: 1.65;
    max-width: 620px;
}

/* Eyebrow label */
.eyebrow {
    font-size: var(--font-size-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--green-deep);
}

.band-ink .eyebrow,
.eyebrow-on-ink { color: var(--green-pale); }

/* Section head — eyebrow + heading left, blurb right */
.section-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-xl);
}

.section-head__main {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.section-head__blurb {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--text-body);
    max-width: 360px;
}

/* Emergency banner — sticky for the whole page. `top` clears the sticky header
   (header.css) and z-index sits under it so the two stack rather than fight.
   Only sticks correctly as a direct child of <main>; see EmergencyBanner in
   internal/web/components/sections.templ. */
.emergency-banner {
    position: sticky;
    top: var(--header-offset);
    z-index: 15;
    background-color: var(--red);
    color: #fff;
    transition: box-shadow 0.2s ease;
}

.emergency-banner__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-md);
    transition: padding-block 0.2s ease;
}

.emergency-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.emergency-banner__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    opacity: 0.85;
}

.emergency-banner__headline {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    transition: font-size 0.2s ease;
}

.emergency-banner__area {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Second line of the label, phones only — see the phone block below. */
.emergency-banner__label-phone {
    display: none;
}

.emergency-banner__call:focus-visible {
    outline-color: #fff;
}

/* Compact state, once the full-size banner has scrolled away. Applied by the
   banner IIFE in main.js — without JS the banner stays full height and still
   sticks, so this is polish, not function. */
.emergency-banner.is-pinned {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.emergency-banner.is-pinned .emergency-banner__inner {
    padding-block: 10px;
}

.emergency-banner.is-pinned .emergency-banner__headline {
    font-size: var(--font-size-base);
}

.emergency-banner.is-pinned .emergency-banner__label,
.emergency-banner.is-pinned .emergency-banner__area {
    display: none;
}

.emergency-banner.is-pinned .emergency-banner__call {
    min-height: 40px;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
}

/* Zero-height scroll trigger for the compact state; carries no content. */
.emergency-sentinel {
    height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .emergency-banner,
    .emergency-banner__inner,
    .emergency-banner__headline {
        transition: none;
    }
}

/* Phones get the compact one-row banner from the start, not only once pinned.
   Full size it ran to 166px under an 81px header and took a quarter of the
   first screen before the hero began. One row also matches --emergency-height,
   which is what anchor scroll-padding clears; left to wrap it reached ~114px
   and in-page links landed behind it. The headline sentence therefore shows
   only from tablet up; here the short label and the call button carry it.

   Every rule below also names the .is-pinned form so the pinned state changes
   nothing but the shadow on phones. The banner is already compact here, which
   puts the observer's trigger line on its own bottom edge, so any change of
   height on pin (the label vanishing, or the padding easing 8px to 10px
   while the button snapped smaller) moved the sentinel back across the line
   and the class flickered on and off in the first pixels of scroll. */
@media (max-width: 600px) {
    .emergency-banner__inner,
    .emergency-banner.is-pinned .emergency-banner__inner {
        flex-wrap: nowrap;
        gap: var(--space-xs);
        padding-block: 8px;
    }

    .emergency-banner__headline,
    .emergency-banner__area {
        display: none;
    }

    .emergency-banner__label,
    .emergency-banner.is-pinned .emergency-banner__label {
        display: block;
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: 0;
        opacity: 1;
        white-space: nowrap;
    }

    .emergency-banner__label-phone {
        display: block;
    }

    .emergency-banner__call,
    .emergency-banner.is-pinned .emergency-banner__call {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 8px 10px;
        font-size: var(--font-size-sm);
    }
}

/* Emergency band — the in-flow block used on interior pages */
.emergency {
    background-color: var(--red);
    color: #fff;
    padding: var(--space-md) var(--space-lg);
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
}

.emergency__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    opacity: 0.85;
}

.emergency__headline {
    font-size: var(--font-size-card);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    display: block;
}

/* Trust bar — hairline strip at the foot of an ink band */
.trust-bar {
    border-top: 1px solid var(--ink-line);
}

.trust-bar__inner {
    padding-block: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
}

.trust-bar__legal {
    font-size: var(--font-size-sm);
    color: var(--on-ink-muted);
}

/* Closing call-to-action strip */
.cta-strip {
    background-color: var(--card);
    border: 1px solid var(--line);
    padding: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    justify-content: space-between;
    align-items: center;
}

.cta-strip__main {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cta-strip__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.35;
}

.cta-strip p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-muted);
}