/* ==========================================================================
   The Hormone Reset Protocol
   Design system, shared shell (announcement, header, footer) and homepage hero
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette (see Brand Guidelines v1.0) */
    --teal:          #0B5063;
    --teal-dark:     #073C4A;
    --teal-soft:     #1A6376;
    --sage:          #70BFA8;   /* graphics, icons, rules, large type on teal */
    --sage-light:    #9FD6C5;   /* small accent text on teal (5.5:1) */
    --sage-deep:     #2B7460;   /* text-safe accent on light surfaces (5.1:1) */
    --ivory:         #F7F4EC;
    --sage-tint:     #E9F1ED;
    --white:         #FFFFFF;

    --ink:           #23343A;   /* body copy */
    --ink-muted:     #55686F;   /* secondary copy */
    --line:          #DCE5E0;

    /* Type */
    --font-head: "Lora", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Shell metrics */
    --announce-h: 42px;
    --header-h:   88px;

    /* Layout */
    --wrap:      1240px;
    --gutter:    24px;
    --radius-sm: 4px;
    --radius:    8px;

    --shadow-card: 0 18px 48px rgba(11, 80, 99, .13);
    --shadow-soft: 0 6px 20px rgba(11, 80, 99, .08);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    overflow-x: hidden;         /* both elements, deliberately */
    max-width: 100%;
}

/* `hidden` on html turns it into a scroll container, which silently breaks
   position: sticky on the header. `clip` prevents the same horizontal overflow
   without that side effect, so it wins wherever it is supported. */
@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--announce-h) + var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--teal);
    margin: 0 0 .6em;
    letter-spacing: -0.005em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

:focus-visible {
    outline: 3px solid var(--sage-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--teal);
    color: var(--white);
    padding: 12px 20px;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sage-deep);
    margin: 0 0 .9rem;
}

.accent { color: var(--sage-deep); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    padding: 1.05rem 1.9rem;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary {
    background: var(--teal);
    color: var(--white);
}

.btn--outline {
    background: transparent;
    color: var(--teal);
    border-color: var(--teal);
}

.btn--light {
    background: var(--white);
    color: var(--teal);
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--teal-dark); }
    .btn--outline:hover { background: var(--teal); color: var(--white); }
    .btn--light:hover   { background: var(--sage-tint); }
}

/* Quiet text link with rule, used as the restrained secondary action.
   Also applied to <button> elements, so the native chrome is reset here. */
.link-quiet {
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 3px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 2px solid var(--sage);
    padding-bottom: 3px;
    transition: border-color .2s ease, color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .link-quiet:hover { color: var(--sage-deep); border-color: var(--sage-deep); }
}

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
    background: var(--teal);
    color: var(--ivory);
    min-height: var(--announce-h);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.announce p {
    margin: 0;
    padding: .4rem var(--gutter);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.announce strong { color: var(--sage-light); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s ease;
}

/* Lifts off the page once scrolling starts, and tightens slightly */
.site-header.is-stuck {
    box-shadow: 0 6px 22px rgba(11, 80, 99, .09);
}

.site-header__inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: min-height .25s ease;
}

.site-header.is-stuck .site-header__inner { min-height: calc(var(--header-h) - 12px); }

.site-logo img { transition: height .25s ease; }
.site-header.is-stuck .site-logo img { height: 46px; }

/* Logo sits hard left and stays large without inflating header height */
.site-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    margin-right: auto;
}

/* Artwork is pre-cropped to its own bounds, so this height is all glyph */
.site-logo img {
    width: auto;
    height: 52px;
}

/* Drawer-only actions; the desktop pair lives in .header-actions */
.site-nav__actions { display: none; }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
}

/* Scoped to list items only: the drawer's .btn actions must keep their own
   colours, otherwise the solid CTA renders teal text on a teal pill. */
.site-nav ul a {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    white-space: nowrap;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s ease;
}

.site-nav ul a.is-current { border-bottom-color: var(--sage); }

@media (hover: hover) and (pointer: fine) {
    .site-nav ul a:hover { border-bottom-color: var(--sage); }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

.header-actions .btn {
    padding: .8rem 1.4rem;
    font-size: .875rem;
}

/* Hamburger */
.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.nav-toggle span {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--teal);
    transition: background-color .2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--teal);
    transition: transform .25s ease, top .2s ease;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--sage-tint);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* <picture> defaults to auto height and would otherwise stretch past the
   container, breaking both the desktop bleed and the mobile aspect ratio. */
.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 26%;
}

.hero__inner {
    position: relative;
    z-index: 1;
    /* Full hero plus a peek of the next section inside the first viewport */
    min-height: clamp(480px, calc(100svh - var(--announce-h) - var(--header-h) - 56px), 690px);
    display: flex;
    align-items: center;
    padding-block: 3rem;
}

.hero__card {
    background: var(--ivory);
    max-width: 600px;
    padding: 2.75rem 3rem 3rem;
    box-shadow: var(--shadow-card);
}

.hero__card h1 {
    font-size: clamp(2.15rem, 1.4rem + 2.1vw, 2.95rem);
    line-height: 1.12;
    margin-bottom: 1rem;
}

/* Two deliberate lines from tablet up; phones may wrap the first naturally */
.hero__card h1 span {
    display: block;
}

@media (min-width: 721px) {
    .hero__card h1 span { white-space: nowrap; }
}

.hero__lede {
    font-size: 1.0625rem;
    color: var(--ink);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
}

.hero__trust {
    margin-top: 1.9rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Sticky quiz tab (desktop only)
   -------------------------------------------------------------------------- */
.quiz-tab {
    position: fixed;
    left: 0;
    top: 58%;
    z-index: 55;
    display: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--teal);
    color: var(--white);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.15rem .6rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

@media (hover: hover) and (pointer: fine) {
    .quiz-tab:hover { background: var(--teal-dark); }
}

@media (min-width: 1200px) {
    .quiz-tab { display: block; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--teal);
    color: var(--ivory);
    padding-block: 4.5rem 2rem;
}

.site-footer a {
    color: var(--ivory);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .site-footer a:not(.footer-logo):hover { color: var(--sage); }
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 3rem 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(247, 244, 236, .18);
}

.footer-brand { min-width: 0; }

.footer-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 1.5rem;
}

.footer-logo img {
    width: auto;
    height: 48px;
}

.footer-brand p {
    font-size: .9375rem;
    color: rgba(247, 244, 236, .82);
    max-width: 34ch;
}

.footer-col { min-width: 0; }

.footer-col h2 {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    color: var(--white);
    margin-bottom: 1.1rem;
}

.footer-col ul { list-style: none; }

/* The support address is one long unbreakable word and the columns get narrow
   on tablets, so it has to be allowed to break rather than push the column out. */
.footer-col li { overflow-wrap: anywhere; }

.footer-col li + li { margin-top: .7rem; }

.footer-col a {
    font-size: .9375rem;
    color: rgba(247, 244, 236, .82);
    overflow-wrap: anywhere;
}

.footer-bottom {
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    font-size: .8125rem;
    color: rgba(247, 244, 236, .72);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    list-style: none;
}

.footer-disclaimer {
    margin-top: 2rem;
    font-size: .8125rem;
    line-height: 1.65;
    color: rgba(247, 244, 236, .66);
    max-width: 90ch;
}

/* --------------------------------------------------------------------------
   10. Mobile sticky buy bar
   -------------------------------------------------------------------------- */
.buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    display: none;
    background: var(--teal);
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(11, 80, 99, .18);
}

.buy-bar .btn { width: 100%; }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

/* Tablet / small desktop -------------------------------------------------- */
/* Six nav items plus both header buttons need about 1370px. Below that the
   outline button is dropped and the nav tightens, and below the next breakpoint
   the whole lot moves into the drawer. */
@media (max-width: 1365px) {
    .site-nav ul { gap: 1.3rem; }
    .site-nav a { font-size: .875rem; }
    .header-actions .btn--outline { display: none; }
    .hero__card { max-width: 545px; padding: 2.5rem 2.5rem 2.75rem; }
}

/* Mobile nav breakpoint --------------------------------------------------- */
@media (max-width: 1120px) {
    :root { --header-h: 76px; }

    .nav-toggle { display: flex; }
    .header-actions { display: none; }

    .site-nav {
        position: fixed;
        inset: calc(var(--announce-h) + var(--header-h)) 0 0 0;
        background: var(--ivory);
        padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-nav ul {
        display: block;
        list-style: none;
    }

    /* Base state is fully visible: never reveal label text on hover only */
    .site-nav ul a {
        display: block;
        padding: 1.05rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--teal);
        opacity: 1;
        visibility: visible;
        white-space: normal;
        border-bottom: 1px solid var(--line);
    }

    .site-nav ul li:last-child a { border-bottom: 0; }

    .site-nav__actions {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        margin-top: 2rem;
    }

    .site-logo img { height: 44px; }

    .site-nav__actions .btn { width: 100%; }

    body.nav-open { overflow: hidden; }
}

/* Phone ------------------------------------------------------------------- */
@media (max-width: 720px) {
    :root { --gutter: 22px; }

    body { padding-bottom: 84px; }   /* clears the sticky buy bar */
    .buy-bar { display: block; }

    /* Hero becomes image-over-card, so no text sits on photography */
    .hero { background: var(--ivory); }

    .hero__media {
        position: relative;
        inset: auto;
        aspect-ratio: 6 / 5;
        max-height: 46vh;
    }

    .hero__media img { object-position: 60% 22%; }

    .hero__inner {
        min-height: 0;
        padding-block: 0 3rem;
        display: block;
    }

    .hero__card {
        max-width: none;
        margin-top: -34px;
        padding: 2.25rem 1.75rem 2.5rem;
        box-shadow: 0 -10px 30px rgba(11, 80, 99, .1);
    }

    .hero__card h1 { font-size: clamp(1.95rem, 1.2rem + 4vw, 2.5rem); }

    .hero__lede { font-size: 1rem; margin-bottom: 1.75rem; }

    .hero__actions { gap: 1.15rem; }
    .hero__actions .btn { width: 100%; }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   12. Motion
   Only applies once motion.js has confirmed support, so no-JS shows everything.
   ========================================================================== */
.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
        transform .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready [data-reveal="in"] {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Images inside linked cards lift very slightly on pointer devices */
@media (hover: hover) and (pointer: fine) {
    .type-card--link,
    .lever,
    .module { transition: transform .25s ease, box-shadow .25s ease; }

    .type-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .motion-ready [data-reveal] { opacity: 1; transform: none; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}