/* ---------------------------------------------------------------------------
   Sticky header: compact state once the page is scrolled.

   custom.js already toggles .header__sticky-sticky-menu past 135px of scroll,
   but the theme only uses that to pin the bar. These rules also shrink it, so
   the header takes far less vertical space while reading.

   Header height is driven by the padding on the nav links (38px top/bottom in
   the theme), not by a height on the bar itself, so that is what gets reduced.
   --------------------------------------------------------------------------- */

.header__area,
.header__area-menubar-left-logo a img,
.header__area-menubar-center-menu ul li a {
    transition: padding 0.3s ease-out, max-width 0.3s ease-out;
}

/* --- compact state ------------------------------------------------------- */
.header__sticky.header__sticky-sticky-menu .header__area {
    padding-inline: 16px;
}

    .header__sticky.header__sticky-sticky-menu .header__area-menubar-center-menu ul li a {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .header__sticky.header__sticky-sticky-menu .header__area-menubar-left-logo a img {
        max-width: 125px;
    }

    /* Keep the sign in / sign up buttons in proportion with the smaller bar. */
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-right-box-btn .btn-one,
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-right .btn-one {
        padding-top: 9px;
        padding-bottom: 9px;
    }

/* Narrow the content a touch when pinned so it reads as a tighter bar. */
.header__sticky.header__sticky-sticky-menu .container {
    max-width: 1140px;
}

@media (max-width: 991.98px) {
    /* Theme already reduces the bar at this width; do not shrink it twice. */
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-center-menu ul li a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header__area,
    .header__area-menubar-left-logo a img,
    .header__area-menubar-center-menu ul li a {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Nav link size.

   The theme sets these at 18px (style.css:3288), dropping to 17px below
   1399px. Both are raised here: Cormorant Garamond has a small x-height, so
   18px in it reads smaller than 18px did in the Space Grotesk it replaced --
   the same compensation already applied to body copy and paragraphs.

   Same selector as the theme, so this wins on being the later file rather than
   on specificity. Padding is left alone: it sets the header's height, and the
   compact sticky state above depends on those exact values.

   There is room for this -- the bar holds six short items -- but it is the
   constraint to watch if links are ever added.
   --------------------------------------------------------------------------- */
.header__area-menubar-center-menu ul li a {
    font-size: 22px;
    line-height: 28px;
}

@media (max-width: 1399px) {
    /* Overrides the theme's 17px at this width; it also tightens the
       horizontal padding to 7px there, which is left as it is. */
    .header__area-menubar-center-menu ul li a {
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------------------
   Mobile drawer (meanmenu, active at <=991px -- see asset/js/custom.js).

   meanmenu ships a full-width solid #0c1923 block with uppercase links at
   1em 5% padding. Three changes: the chrome reads as transparent, the panel
   occupies a small area instead of the whole width, and the links are sized
   to be comfortably tappable.

   Every rule here overrides asset/css/meanmenu.min.css, which _Layout links at
   line 55 against header.css at 86 -- later wins, so no !important is needed
   except where meanmenu itself used it (.mean-expand).
   --------------------------------------------------------------------------- */

/* meanmenu forces content-box on the bar and everything in it, which is why
   its own links need width:90% + 5% padding to add up. Border-box lets the
   padding below behave normally. */
.mean-container .mean-bar,
.mean-container .mean-bar * {
    box-sizing: border-box;
}

/* The bar only has to hold the toggle -- the header shows through it. */
.mean-container .mean-bar {
    background: transparent;
    padding: 0;
    min-height: 44px;
}

/* Navy bars rather than meanmenu's white, so they read against the light
   header. Sized generously on purpose: the earlier 26x20 box read as thin and
   small. A 40x24 glyph inside 12px/8px padding gives a 56x48 tap area, well
   over the 44px WCAG floor, and the bar widths below are percentages of this
   width so they scale with it. */
.mean-container a.meanmenu-reveal {
    width: 40px;
    height: 24px;
    padding: 12px 8px;
    color: var(--bp-navy, #1B2A4A);
}

    /* Hot-dog toggle: a long centre bar (the sausage) between two shorter bun
       bars. meanmenu emits exactly three spans (meanMenuOpen,
       asset/js/custom.js:41), so each is sized individually here and the
       theme file stays untouched.

       The stack fills the 24px box exactly and symmetrically:
         3 top + 3 bar + 4 gap + 4 bar + 4 gap + 3 bar + 3 bottom = 24
       auto side margins centre the two shorter bars over the longer one. */
    .mean-container a.meanmenu-reveal span {
        background: var(--bp-navy, #1B2A4A);
        border-radius: 999px;
        margin-left: auto;
        margin-right: auto;
    }

        /* bun, top */
        .mean-container a.meanmenu-reveal span:nth-child(1) {
            width: 66%;
            height: 3px;
            margin-top: 3px;
        }

        /* the sausage: full width and the thickest of the three */
        .mean-container a.meanmenu-reveal span:nth-child(2) {
            width: 100%;
            height: 4px;
            margin-top: 4px;
        }

        /* bun, bottom */
        .mean-container a.meanmenu-reveal span:nth-child(3) {
            width: 66%;
            height: 3px;
            margin-top: 4px;
        }

/* Open state: meanmenu swaps the bars for a Font Awesome times glyph (fa-light,
   which this Pro build does ship) and inline-styles the size to its 18px
   default -- an inline style, so !important is the only way to scale the X to
   match the bars above. */
.mean-container a.meanmenu-reveal.meanclose {
    color: var(--bp-navy, #1B2A4A);
    font-size: 26px !important;
    line-height: 24px !important;
}

/* A compact card under the toggle rather than a full-width slab. Translucent
   with a blur so the page shows through while the copy stays legible -- a
   fully transparent panel would leave the links floating over the artwork
   behind them. */
.mean-container .mean-nav {
    float: none;
    width: auto;
    min-width: 200px;
    max-width: 260px;
    margin: 48px 0 0 auto;
    background: rgba(27, 42, 74, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(27, 42, 74, 0.28);
}

.mean-container .mean-nav ul li a {
    width: 100%;
    float: none;
    padding: 13px 18px;
    font-size: 19px;
    line-height: 1.35;
    /* meanmenu uppercases these; the desktop bar does not. */
    text-transform: none;
    color: #F2F0EA;
    border-top: 1px solid rgba(242, 240, 234, 0.14);
    transition: background-color 0.2s ease;
}

    /* The card edge already separates the first row. */
    .mean-container .mean-nav ul li:first-child > a {
        border-top: 0;
    }

    .mean-container .mean-nav ul li a:hover,
    .mean-container .mean-nav ul li a:focus-visible {
        background: rgba(242, 240, 234, 0.12);
    }

/* Nested items are indented rather than narrowed, so the row stays a
   full-width tap target. meanmenu also dims these to 0.75; at this contrast
   that is too faint. */
.mean-container .mean-nav ul li li a {
    width: 100%;
    padding-left: 32px;
    font-size: 17px;
    opacity: 1;
}

/* Submenu toggle gets its own 44px target at the row's right edge. The
   !important here answers meanmenu's own !important on padding and borders. */
.mean-container .mean-nav ul li a.mean-expand {
    width: 44px;
    height: 44px;
    margin-top: 0;
    padding: 0 !important;
    line-height: 44px;
    text-align: center;
    background: transparent;
    color: #F2F0EA;
    border: 0 !important;
}

    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: rgba(242, 240, 234, 0.12);
    }

@media (prefers-reduced-motion: reduce) {
    .mean-container .mean-nav ul li a {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Small screens: logo, auth buttons and the hamburger on ONE line.

   At 390px the row wanted about 465px -- logo 165 + two 92px buttons + 2x16px
   .me-3 + 40px .ml-40 + a 44px toggle -- against roughly 366px of container.
   So it overflowed, and on the home page it also wrapped (see the note in
   custom.css about the .d-flex override that used to live there).

   Each value below is duplicated onto the .header__sticky-sticky-menu variant,
   because the compact-state rules earlier in this file are more specific
   (0,3,2) than the plain ones and would otherwise win once the bar pins. That
   keeps the pinned bar on one line too.

   Bootstrap's spacing utilities are !important, hence the !important on the
   .me-3 override only.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* flex default is nowrap; stated so nothing can reintroduce wrapping. */
    .header__area-menubar,
    .header__area-menubar-right > div > ul {
        flex-wrap: nowrap;
    }

    .header__area-menubar-left-logo a img,
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-left-logo a img {
        max-width: 140px;
    }

    .header__area-menubar-right .me-3 {
        margin-right: 10px !important;
    }

    /* Sign in / Sign up belong between the logo and the toggle, not jammed
       against it. -right is given the leftover width, and auto margins on the
       auth block centre it in that space while the toggle stays at the edge.
       The desktop nav inside -center is hidden by meanmenu at this width, so
       that column contributes nothing to the row. */
    .header__area-menubar-right {
        flex: 1;
    }

    .header__area-menubar-right > div:first-child {
        margin-inline: auto;
    }

    /* A floor for the separation: the auto margins above can shrink to nothing
       on a narrow screen, and this is what stops the buttons touching the
       toggle when they do. */
    .responsive-menu.ml-40 {
        margin-left: 24px;
    }

    /* The signed-in branch puts a <p> in the header, which the theme sizes at
       24px !important -- enough on its own to break the line. */
    .header__area-menubar-right p {
        font-size: 15px !important;
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .header__area-menubar-left-logo a img,
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-left-logo a img {
        max-width: 110px;
    }

    /* .sign-in-btn/.sign-up-btn ship at 8px 16px and 18px type; this trims
       roughly 20px off each button without dropping below a 36px tap height. */
    .sign-in-btn,
    .sign-up-btn,
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-right .sign-in-btn,
    .header__sticky.header__sticky-sticky-menu .header__area-menubar-right .sign-up-btn {
        padding: 7px 12px;
        font-size: 15px;
        line-height: 1.35;
    }

    .header__area-menubar-right .me-3 {
        margin-right: 6px !important;
    }

    .responsive-menu.ml-40 {
        margin-left: 18px;
    }
}