/* Section 2 — Hero (markup: template-parts/sections/hero.php) */

/* Slides up behind the transparent sticky header so its navy fills the area
   around the floating white card at the top. The extra top padding restores
   the visual spacing below the header. */
.hero {
    background: var(--color-navy-mid); /* #1C3153 */
    color: var(--color-off-white);
    text-align: center;
    margin-top: calc(-1 * var(--header-sticky-h));
    padding-top: calc(120px + var(--header-sticky-h));
    padding-bottom: 120px;
}

.hero__inner {
    max-width: 960px;
    margin-inline: auto;
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    letter-spacing: -0.02em;
    color: var(--color-off-white);
    margin: 0 0 24px;
}

.hero__subtitle {
    font-size: var(--fs-body);
    color: var(--color-off-white);
    max-width: 755px;
    margin: 0 auto 40px;
}

@media (max-width: 1024px) {
    .hero { padding-top: calc(90px + var(--header-sticky-h)); padding-bottom: 90px; }
    .hero__title { font-size: 60px; }
}
@media (max-width: 768px) {
    .hero { padding-top: calc(64px + var(--header-sticky-h)); padding-bottom: 64px; }
    .hero__title { font-size: 40px; }
    .hero__subtitle { font-size: 16px; }
}

/* Contact page hero — 48px title per Figma (landing heroes stay 82px). */
.page-template-template-contact .hero__inner {
    max-width: 940px;
}
/* The subtitle copy needs ~1020px to wrap to two lines, so it sits slightly
   wider than the 940px title block (centred). */
.page-template-template-contact .hero__subtitle {
    max-width: 1040px;
    width: 1040px;
    margin-inline: auto;
}
.page-template-template-contact .hero__title {
    font-size: 48px;
    line-height: 1.167; /* Figma: 56px at 48px */
}
@media (max-width: 1024px) {
    .page-template-template-contact .hero__subtitle { width: auto; max-width: 100%; }
}
@media (max-width: 768px) {
    .page-template-template-contact .hero__title { font-size: 32px; }
}

/* FAQs page + blog archive heroes — 48px DM Serif title per Figma (landing
   heroes stay 82px). Blog contexts are scoped by their specific body classes
   so the team/FAQ archives keep their own sizing. */
.post-type-archive-faq .hero__title,
.blog .hero__title,
.category .hero__title,
.tag .hero__title,
.date .hero__title,
.author .hero__title {
    font-size: 48px;
    line-height: 1.167; /* Figma: 56px at 48px */
}
@media (max-width: 768px) {
    .post-type-archive-faq .hero__title,
    .blog .hero__title,
    .category .hero__title,
    .tag .hero__title,
    .date .hero__title,
    .author .hero__title { font-size: 32px; }
}