/**
 * Page Header Block — Smith 2.0
 *
 * Figma: "Header / 70 / linen" (node 10359:55388).
 * Centered inner-page header. Type/spacing values lifted directly from Figma:
 *   padding 112px (block) / 64px (inline), container max-width 1280px,
 *   heading 72px lh 1.2 ls -0.01em, subheading 40px lh 1.3, 24px gap.
 */

:root {
    --color-pampas: #f9f8f5;          /* warm off-white / linen */
    --color-blue-zodiac: #0e1b44;     /* navy */
    --color-secondary: #0e1b44;
    --color-surfie-green: #0f7e7c;    /* teal */
    --color-primary: #0f7e7c;
    --color-white: #ffffff;
    --color-selective-yellow: #f0b200; /* accent gold */
    --color-accent-gold: #f0b200;
    /* NOTE: do NOT redefine --font-family-heading/--font-family-base here —
       they must inherit the global tokens (Adobe Garamond Pro / Barlow). */
}

.page-header {
    /* Figma: padding-section-large 112px (block) / padding-global 64px (inline). */
    padding: 112px 64px;
    border-radius: 0; /* square corners */
}

.page-header__inner {
    /* Figma: container-large 1280px, centered. */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.page-header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px; /* Figma gap */
}

/* ---- Alignment variants -------------------------------------------------- */
.page-header--align-left .page-header__inner { align-items: flex-start; }
.page-header--align-left .page-header__content { align-items: flex-start; text-align: left; }
.page-header--align-right .page-header__inner { align-items: flex-end; }
.page-header--align-right .page-header__content { align-items: flex-end; text-align: right; }

/* Figma Header/70: total 639px = 112px paddings + 415px content area. */
.page-header--valign-bottom .page-header__inner { min-height: 415px; }
.page-header__inner { min-height: 415px; justify-content: flex-end; }
.page-header--valign-top .page-header__inner { justify-content: flex-start; }

.page-header__eyebrow {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
}

.page-header__heading {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    /* Figma "Header / 70" H1: 64px, line-height 1.2, tracking -0.64px
       (10774:78821). Was 72px — the heading masks in the diff harness hid
       the size error until the true Bold cut landed. */
    font-size: 4rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: inherit; /* take the variant text colour, not the global navy h1 colour */
}

.page-header__subheading {
    margin: 0;
    /* Figma (DEV Header/70): subheading is SERIF 40px, regular weight,
       line-height 1.3, letter-spacing -0.01em. */
    font-family: var(--font-family-heading);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ---- Background variants -------------------------------------------------- */

/* linen + cream: warm cream background, navy text. */
.page-header--linen,
.page-header--cream {
    background-color: var(--color-pampas);
    color: var(--color-blue-zodiac);
}

/* white: white background, navy text. */
.page-header--white {
    background-color: var(--color-white);
    color: var(--color-blue-zodiac);
}

/* navy: dark forest navy background, white text. */
.page-header--navy {
    background-color: var(--color-blue-zodiac);
    color: var(--color-white);
}

/* teal: teal background, white text (matches the Figma source overlay). */
.page-header--teal {
    background-color: var(--color-surfie-green);
    color: var(--color-white);
}

/* ---- Photo background variant --------------------------------------------- */

/* When a background image is set, the section becomes a full-bleed photo with a
   colour overlay (teal or navy, derived from the background choice) and white
   text. Figma: "Header / 70 / paper" — photo with rgba teal/navy overlay. */
.page-header--has-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    /* The frame's 639px header includes its 80px TRANSPARENT overlay nav —
       the visible below-nav zone is 559px (32px above the content area).
       Our opaque stacked nav sits above the section, so rendering the full
       639 showed 80px more photo above the text than the design on every
       page header (the report's first pair, every run). 32 + 415 + 112 = 559. */
    padding-top: 32px;
    padding-bottom: 112px;
}

.page-header__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Overlay colour follows the background choice; teal is the Figma default. */
.page-header--has-image.page-header--teal .page-header__overlay {
    background-color: rgba(15, 126, 124, 0.7); /* surfie-green */
}

.page-header--has-image.page-header--navy .page-header__overlay {
    background-color: rgba(14, 27, 68, 0.55); /* blue-zodiac */
}

/* linen/cream/white with a photo: fall back to a soft navy scrim for legibility. */
.page-header--has-image.page-header--linen .page-header__overlay,
.page-header--has-image.page-header--cream .page-header__overlay,
.page-header--has-image.page-header--white .page-header__overlay {
    background-color: rgba(14, 27, 68, 0.5);
}

/* Lift the content above the overlay and force white text. */
.page-header--has-image .page-header__inner {
    position: relative;
    z-index: 1;
}

.page-header--has-image .page-header__heading,
.page-header--has-image .page-header__subheading {
    color: var(--color-white);
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 781px) {
    .page-header {
        /* Figma mobile header: 640px total = 80px paddings + content. */
        padding: 80px 20px;
    }
    .page-header__inner { min-height: 480px; }

    .page-header__content {
        gap: 16px;
    }

    /* Figma mobile keeps the desktop display sizes (H1 72 / subheading 40) —
       no downscale (2026-07-24 mobile type pass). */

    .page-header--has-image {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    /* Opt-in: centre the hero on mobile even when it's left/right on desktop
       (Figma centres some heroes on phones, e.g. Our Focus Areas). */
    .page-header--mobile-center .page-header__inner { align-items: center; }
    .page-header--mobile-center .page-header__content { align-items: center; text-align: center; }
}


/* Expertise header (page 14): the frame runs the mirrored orientation of the
   office photo. Flip the section and counter-flip the content. */
.page-id-14 .page-header--has-image {
    transform: scaleX(-1);
}
.page-id-14 .page-header--has-image .page-header__inner {
    transform: scaleX(-1);
}


/* ---- Two-thirds hero heading (--heading-two-thirds) -----------------------
   BugZap #70. The Agentis design export puts this class on the Business Leadership
   hero; we had no base rule for it anywhere, so on staging the class was inert
   and the H1 ran the full 1280 content width.

   Only `smith-theme-Agentis design/assets/css/figma-layer/figma-mobile-v4.css:1894`
   mentioned the class, and only to force it back to 100% on phones - i.e. we
   shipped the override without the thing it overrides.

   Measured on the export (iframe viewport emulation, /business-leadership/,
   .page-header__heading):

       @1974  container x347 w1280 -> head x774 w853.32  ml 426.68  (2/3, 1/3)
       @1400  container x64  w1272 -> head x488 w847.98  ml 424.02  (2/3, 1/3)
       @900   head x64 w772  ml 0   (full width)
       @800   head x64 w672  ml 0   (full width)
       @700   head x20 w660  ml 0   (full width, fs 42)

   So the offset is desktop-only. Scoping the base to >=992 reproduces every
   measured value without needing !important; the 768-991 step below is the
   export's own belt-and-braces copy, kept verbatim so the two cascades agree
   even if a later rule raises specificity on either side. */
@media (min-width: 992px) {
    /* The percentages resolve against .page-header__content, so it has to span
       the 1280 inner. Ours is a shrink-to-fit flex item under
       `align-items: flex-end`, which measured 1188px on staging and put the
       heading at x835 w792 instead of the export's x774 w853. The export's
       .page-header__content measures the full 1280 at 1974. Scoped to the
       variant so no other hero changes. */
    .page-header--heading-two-thirds .page-header__content {
        width: 100%;
    }
    .page-header--heading-two-thirds .page-header__heading {
        width: 66.6667%;
        margin-left: 33.3333%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .page-header--heading-two-thirds .page-header__heading {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ---- D16 / BugZap #106: hero pages float the nav -------------------------- */

/* When `body.has-hero-header` is present the site header is `position: fixed`
   and transparent, so it no longer occupies flow above this section. The
   32/112 asymmetry above exists purely to compensate for an in-flow opaque
   nav (32 + 415 + 112 = 559, which is what we rendered at 991); with the nav
   floating, the export spends the full symmetric padding instead.

   Values read straight off the export's own cascade, which scopes them to the
   identical selector:
       body.has-hero-header .page-header--has-image  150/150
       @media (max-width: 991px)                     132/132
       @media (max-width: 781px)                     116/116
   The unscoped 32/112 above is deliberately left in place as the fallback for
   any page that renders a photo header without the body class. */
body.has-hero-header .page-header--has-image {
    padding-top: 150px;
    padding-bottom: 150px;
}

@media (max-width: 991px) {
    body.has-hero-header .page-header--has-image {
        padding-top: 132px;
        padding-bottom: 132px;
    }
}

@media (max-width: 781px) {
    body.has-hero-header .page-header--has-image {
        padding-top: 116px;
        padding-bottom: 116px;
    }
}