/*--------------------------------------------------------------------
 *  Design system — Figma WOLVERINE_website_WORK1
 *
 *  Text styles and colours from the Figma file, mapped onto the page
 *  markup. Loaded after every other stylesheet (see base.liquid), so
 *  these rules settle type and colour; layout stays in the page files.
 *
 *  Figma text styles. Headings reach these sizes at 1280px and wider and
 *  scale down linearly to their minimum at a 390px phone:
 *    Headline 1   LT Com 53 Extended  96/96
 *    Headline 2   LT Com 53 Extended  60/72
 *    Headline 3   LT Com 53 Extended  48/48
 *    Paragraph 1  Helvetica Neue      16/24
 *  plus a few one-off sizes the comps use (24/36 lead copy, etc.).
 *--------------------------------------------------------------------*/
:root {
    --light-grey: #f2f2f2;            /* section backgrounds in the comps */
    --pale-yellow: var(--eggshell);   /* Figma "Pale Yellow" #fdeeb5 */

    --text-h1: clamp(3rem, 1.6854rem + 5.3933vw, 6rem);
    --text-h2: clamp(2.25rem, 1.5927rem + 2.6966vw, 3.75rem);
    --text-h3: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);
    --text-subhead: clamp(1.5rem, 1.1713rem + 1.3483vw, 2.25rem);  /* 36/42 */
    --text-lead: clamp(1.25rem, 1.1404rem + 0.4494vw, 1.5rem);        /* 24/36 */
    --text-title: 24px;                                    /* 24/36 card titles */
    --text-body: 16px;                                       /* 16/24 */
    --text-button: 14px;   /* 14px: the comp's 16px read too large on the page */
}

body {
    font-family: var(--font-body);
}

/* ---- Text style roles ------------------------------------------- */

/* Scoped under #main: the page files nest their selectors under a section
   id, so a second id is what reliably settles type and colour here. */

#main .ds-h1,
#main #hero .heading,
#main .hero__content .heading,
#main #innovation__section h2,
#main #driven__section h2,
#main #vision__section h2,
#main #timeline .hiring__heading,
#main #awards h1,
#main #our__teams .teams__title,
#main #how__we__work h2,
#main #benefits__section .benefits__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--text-h1);
    line-height: 1;
}

#main .ds-h2,
#main #intro h2,
#main #about__trading h2,
#main #about__quote h1,
#main #stats__wrapper .heading,
#main #pull__quote h1,
#main #explore__careers h3,
#main #who__we__are h2,
#main #how__we__work h3,
#main #authentic__journeys h2,
#main #unlock__your__potential h2,
#main #why__wolverine h2,
#main #who__thrives h2,
#main #testimonials .testimonials__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--text-h2);
    line-height: 1.2;
}

#main .ds-h3,
#main #about__history h2,
#main #company__divisions h2,
#main .market__making h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--text-h3);
    line-height: 1;
}

/* 36/42 sub-headings */
#main #explore__careers h4,
#main #how__we__work h4 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--text-subhead);
    line-height: 1.1667;
}

/* 24/36 card and list titles */
#main #timeline .step-description,
#main #our__teams .team__name,
#main #authentic__journeys .name,
#main #benefits__section h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-size: var(--text-title);
    line-height: 1.5;
}

/* 24/36 lead paragraphs */
#main .market__making p,
#main #who__we__are p,
#main #why__wolverine p,
#main #how__we__work li {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-lead);
    line-height: 1.5;
}

/* Paragraph 1 — 16/24 body copy */
#main #page__container p {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-body);
    line-height: 1.5;
}
/* ...except the lead paragraphs above, which the broader rule would catch */
#main #page__container .market__making p,
#main #page__container #who__we__are p,
#main #page__container #why__wolverine p {
    font-size: var(--text-lead);
}

/* Hero tagline: LT Com 93 Black Extended 18, uppercase */
#main #hero .tagline,
#main .hero__content .tagline {
    font-family: var(--font-heading);
    font-weight: var(--weight-black);
    font-size: 1.125rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--yellow);
}

/* Buttons: 220 x 44 box, label a size down from Paragraph 1 */
#main .button-intro {
    box-sizing: border-box;   /* same 220 x 44 box for <a> and <button> */
    min-width: 220px;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-button);
    line-height: 1.5;
    .button-text {
        transform: none;
    }
}

/* ---- One-off styles --------------------------------------------- */

/* Timeline year chips: LT Com 21 */
#main #timeline p {
    font-family: var(--font-heading);
    font-size: 1.3125rem;
}

/* By the Numbers figures: LT Com 72/96 pale yellow on dark blue */
/* 72px = 4.5rem, the cell height number_scroll.js rolls the digits by */
#main #stats__wrapper .box-text h2 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    color: var(--pale-yellow);
}
#main #stats__wrapper .box-text {
    background-color: var(--dark-blue);
}

/* Values cards: 36/36 name, 20/28 LT Com tagline */
/* the page nests these under two ids (#value__cards #card__container) */
#main #value__cards #card__container h3 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    /* four across (who-we-are.css): 36px at 1920, down to 28px at 1200 */
    @media (min-width: 1200px) {
        font-size: clamp(1.75rem, 1rem + 1.05vw, 2.25rem);
    }
    line-height: 1;
}
#main #page__container #value__cards p {
    font-family: var(--font-heading);
    font-size: clamp(1rem, .75rem + 1vw, 1.25rem);   /* 20px on desktop */
    line-height: 1.4;
    text-transform: capitalize;
}

/* Flipped value card: name 24/32 over a Paragraph 1 description */
#main #value__cards #card__container .card__back h3 {
    font-size: 1.5rem;
    line-height: 1.3333;
}
#main #page__container #value__cards .card__back .card__description {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
    text-transform: none;
    /* four across below ~1500px the cards are too narrow for the longest
       description at 16/24 */
    @media (min-width: 1200px) and (max-width: 1499px) {
        font-size: .875rem;
    }
}

/* How We Work closing line: LT Com 53 Extended Oblique 24/42 */
#main #page__container #how__we__work p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-lead);
    line-height: 1.75;
    color: var(--light-blue);
}

/* ---- Colour ----------------------------------------------------- */

#main #who__thrives h2,
#main #testimonials .testimonials__title {
    color: var(--pale-yellow);
}
/* testimonial quote: LT Com 53 Extended 24/36, white */
#main #page__container #testimonials .testimonials__quote p {
    font-family: var(--font-heading);
    font-size: var(--text-lead);
    line-height: 1.5;
    color: white;
}
#main #who__thrives p {
    color: white;
}

#main #explore__careers h3,
#main #benefits__section h3 {
    color: var(--yellow);
}

/* Dark-blue text on light sections (the code mixed #000, #002d62, #1f2636) */
#main #intro h2,
#main #intro p,
#main #innovation__section h2,
#main #innovation__section p,
#main #driven__section h2,
#main #driven__section p,
#main #about__history h2,
#main #about__history p,
#main #timeline .hiring__heading,
#main #timeline .step-description,
#main #company__divisions h2,
#main #company__divisions p,
#main .market__making h3,
#main .market__making p,
#main #our__teams .teams__title,
#main #our__teams .team__name,
#main #our__teams .team__desc,
#main #stats__wrapper .heading,
#main #stats__wrapper .subtext,
#main #pull__quote h1,
#main #who__we__are h2,
#main #who__we__are p,
#main #value__cards h3,
#main #page__container #value__cards p,
#main #unlock__your__potential h2,
#main #unlock__your__potential p,
#main #why__wolverine h2,
#main #why__wolverine p {
    color: var(--dark-blue);
}

/* Section backgrounds */
#main #intro,
#main #stats__wrapper,
#main #why__wolverine {
    background-color: var(--light-blue);
}
#main #driven__section,
#main #about__history {
    background-color: var(--light-grey);
}
#main #about__trading,
#main #how__we__work {
    background-color: var(--dark-blue);
}
#main #vision__section,
#main #explore__careers {
    background-color: var(--medium-blue);
}
/* Timeline year chips */
#main #timeline .square.slate {
    background-color: var(--dark-blue);
}

/* ---- Page heroes ------------------------------------------------ */

/* Each inner page has its own photo. The comps layer the photo over a
   blue fill with blur and colour adjustments; ::before carries the
   photo and its filter, the element's own background is the fill. */
.banner__backdrop.hero {
    position: relative;
    background-image: none;
    background-color: var(--hero-fill, var(--dark-blue));
    &::before {
        content: "";
        position: absolute;
        inset: -40px;                 /* keeps blurred edges off-screen */
        background: var(--hero-image) center / cover no-repeat;
        filter: var(--hero-filter, none);
        opacity: var(--hero-opacity, .5);
    }
    &.what-we-do {
        --hero-image: url('/assets/images/heros/what-we-do.png');
        --hero-fill: var(--medium-blue);
        --hero-filter: blur(20px);
        --hero-opacity: .55;
    }
    &.wolverine {
        --hero-image: url('/assets/images/heros/wolverine.png');
        --hero-fill: var(--medium-blue);
        --hero-filter: grayscale(1) brightness(.75) contrast(.8) blur(7px);
        --hero-opacity: .6;
    }
    &.who-we-are {
        --hero-image: url('/assets/images/heros/who-we-are.png');
        --hero-filter: blur(1px);
        --hero-opacity: .55;
        /* Figma crop (2638:288): the photo 104.8% of the hero's width and
           shown from 17.9% down, which keeps every face in frame. Never
           narrower than 1110px, or it would stop filling the 600px hero.
           No bleed needed for a 1px blur, so the box is the hero itself. */
        &::before {
            inset: 0;
            background-size: max(104.8vw, 1110px) auto;
            /* x: the comp sits it 29px left of centre at 1920 (-75px, not -46px) */
            background-position: calc(50% - 1.51vw) calc(-0.179 * 0.667 * max(104.8vw, 1110px));
        }
    }
    &.career-resources {
        --hero-image: url('/assets/images/heros/careers.png');
        --hero-filter: blur(1px);
        --hero-opacity: .55;
    }
}

/* Hero content spans the comps' content frame (x 250-1670 at 1920);
   Headline 1 sits in a 1078px box so titles break onto two lines. */
.hero__content {
    margin-inline: 13.02vw;
    .tagline {
        margin: 0 0 36px;
    }
    .heading {
        max-width: 1078px;
        margin: 0 auto;
    }
    /* What We Do's three-sentence title: the comp's 1420px box, scaled
       down below ~1480px so each sentence stays on one line */
    .heading--wide {
        max-width: 1420px;
    }
}
#main .hero__content .heading--wide {
    font-size: clamp(3rem, 6.5vw, var(--text-h1));
}

/* The hero content keeps 20vw side margins from root.css, which leaves
   Headline 1 about 230px to wrap in on a phone. */
@media (max-width: 600px) {
    .hero__content {
        margin-inline: 1rem;
    }
}