/* ============================================================
   Site header / navigation
   Figma: desktop 38101:4 :5 :6 :12 :13 :14 · mobile 38101:1497

   Loaded on every page from layouts/layout.blade.php, so the rules are
   unscoped and this block re-declares the tokens it needs. The breakpoint is
   1024px, matching the rest of the redesign; bootstrap's navbar-expand-lg
   (992px) is not used, so both sides are defined here.
   ============================================================ */

.rte-header {
    --hdr-white: #ffffff;
    --hdr-ink: #0b1a30;
    --hdr-ink-strong: #02283c;
    --hdr-wordmark: #062d2a;
    --hdr-teal: #0f766e;
    --hdr-orange: #ea580c;
    --hdr-orange-dark: #c2490a;
    --hdr-rule: #e6edf5;

    padding: 0;
    background-color: var(--hdr-white);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Matches .rte-container so the header lines up with the page below it. */
.rte-header .rte-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(40px, calc(14.4231vw - 107.69px), 100px);
}

.rte-header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0;
}

/* ---------- Logo ---------- */
.rte-header .rte-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.rte-header .rte-header__logo img {
    display: block;
    flex-shrink: 0;
    width: auto;
}

.rte-header .rte-header__wordmark {
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--hdr-wordmark);
    white-space: nowrap;
}

.rte-header .rte-header__wordmark em {
    font-style: normal;
    font-weight: 500;
    color: var(--hdr-teal);
}

/* ---------- Nav ---------- */
.rte-header .navbar-nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css puts 20px either side of every nav li; this design spaces the
   list with gap instead. */
.rte-header .navbar-nav li {
    margin: 0;
    padding: 0;
}

.rte-header .rte-header__nav .nav-link {
    padding: 0;
    text-transform: capitalize;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--hdr-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rte-header .rte-header__nav .nav-link:hover,
.rte-header .rte-header__nav .nav-link:focus-visible,
.rte-header .rte-header__nav .nav-link.active {
    color: var(--hdr-teal);
}

/* ---------- Sign in + CTA ---------- */
.rte-header .rte-header__actions .rte-header__signin {
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--hdr-ink-strong);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rte-header .rte-header__actions .rte-header__signin:hover,
.rte-header .rte-header__actions .rte-header__signin:focus-visible {
    color: var(--hdr-teal);
}

.rte-header .rte-header__actions .rte-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 10px;
    background-color: var(--hdr-orange);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--hdr-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.rte-header .rte-header__actions .rte-header__cta:hover,
.rte-header .rte-header__actions .rte-header__cta:focus-visible {
    background-color: var(--hdr-orange-dark);
    color: var(--hdr-white);
}

/* ---------- Hamburger ---------- */
/* 40px orange square, three 15x1.667 bars 3.333px apart. Qualified through
   .navbar because style.css absolutely positions and borders the toggler
   below 992px at that same specificity. */
.rte-header .navbar > .rte-header__toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--hdr-orange);
}

.rte-header .navbar > .rte-header__toggle:focus {
    box-shadow: none;
}

.rte-header .rte-header__burger,
.rte-header .rte-header__burger::before,
.rte-header .rte-header__burger::after {
    display: block;
    width: 15px;
    height: 1.667px;
    border-radius: 0.833px;
    background-color: var(--hdr-white);
}

.rte-header .rte-header__burger {
    position: relative;
}

.rte-header .rte-header__burger::before,
.rte-header .rte-header__burger::after {
    content: '';
    position: absolute;
    left: 0;
}

.rte-header .rte-header__burger::before { top: -5px; }
.rte-header .rte-header__burger::after { top: 5px; }

/* ============================================================
   Desktop (>= 1024)
   ============================================================ */
@media (min-width: 1024px) {
    /* The bar is 100px and the full-size row measures exactly 1240px at 1440.
       Below that the row has to give back 296px by 1024, so the type, the nav
       gap and the button scale together rather than wrapping. */
    .rte-header .navbar {
        min-height: 100px;
    }

    .rte-header .rte-header__logo img {
        height: clamp(32px, calc(1.5865vw + 15.75px), 38.6px);
    }

    .rte-header .rte-header__wordmark {
        font-size: clamp(21px, calc(1.2019vw + 8.69px), 26px);
    }

    .rte-header .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        margin-left: clamp(24px, calc(11.779vw - 96.62px), 73px);
    }

    .rte-header .btn-close {
        display: none;
    }

    /* bootstrap's .navbar-nav is a column without navbar-expand-* */
    .rte-header .navbar-nav {
        flex-direction: row;
    }

    .rte-header .rte-header__nav {
        gap: clamp(16px, calc(3.3654vw - 18.46px), 30px);
    }

    .rte-header .rte-header__nav .nav-link,
    .rte-header .rte-header__actions .rte-header__signin {
        font-size: clamp(15px, calc(0.7212vw + 7.615px), 18px);
    }

    .rte-header .rte-header__actions {
        gap: 26px;
    }

    .rte-header .rte-header__actions .rte-header__cta {
        padding-inline: clamp(14px, calc(0.7212vw + 6.615px), 17px);
        font-size: clamp(14px, calc(0.4808vw + 9.08px), 16px);
    }
}

/* ============================================================
   Mobile (< 1024)
   style.css puts the off-canvas panel behind max-width:991px, so everything
   it needs is restated here to move the switch to 1024.
   ============================================================ */
@media (max-width: 1023.98px) {
    .rte-header {
        border-bottom: 1px solid var(--hdr-rule);
    }

    .rte-header .navbar {
        min-height: auto;
        padding-block: 18px;
    }

    .rte-header .rte-container {
        padding-inline: 20px;
    }

    .rte-header .rte-header__logo img {
        height: 32px;
    }

    .rte-header .rte-header__wordmark {
        font-size: 21.5px;
    }

    .rte-header .navbar > .rte-header__toggle {
        display: inline-flex;
        position: static;
    }

    /* Off-canvas panel */
    .rte-header .navbar-collapse {
        position: fixed;
        top: 0;
        right: -100%;
        width: calc(100% - 30px);
        height: 100%;
        overflow: auto;
        /* Above the Elfsight promo bar (z-index 99999), which otherwise covers
           the top of the panel including its close button. */
        z-index: 100001;
        display: block;
        padding: 64px 24px 24px;
        background-color: var(--hdr-white);
        transition: right 300ms ease;
    }

    /* .show is bootstrap's own state; .menu-open is the legacy body class. */
    .rte-header .navbar-collapse.show,
    .menu-open .rte-header .navbar-collapse {
        right: 0;
    }

    .rte-header .btn-close {
        display: block;
        position: absolute;
        top: 18px;
        right: 18px;
        width: 22px;
        height: 22px;
        padding: 0;
        opacity: 1;
        background-size: 15px;
    }

    .rte-header .btn-close:focus {
        box-shadow: none;
    }

    /* style.css sets `.header nav .navbar-nav:last-child{flex-direction:inherit}`
       below 992px, so the panel's lists need a longer selector than that. */
    .rte-header .navbar .navbar-collapse .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .rte-header .rte-header__nav .nav-link,
    .rte-header .rte-header__actions .rte-header__signin {
        font-size: 18px;
    }

    .rte-header .navbar .navbar-collapse .rte-header__actions {
        align-items: stretch;
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid var(--hdr-rule);
        text-align: center;
    }

    .rte-header .navbar .navbar-collapse .rte-header__cta {
        width: 100%;
    }

    /* style.css only shows the dimmer below 992, and puts it at z-index 2 */
    .menu-open .mobile-menu-overlay {
        display: block;
        z-index: 100000;
    }
}