/* ==========================================================================
   RentOS — site navigation
   --------------------------------------------------------------------------
   Measured from Figma. Desktop 123:7321, mobile bar 123:8062, menu 123:8082.

   Desktop geometry note: the NAV frame in Figma is only the 825x67 pill at
   left 547. The logo (left -308) and Download CTA (left calc(50%+716.5px))
   are positioned outside it, landing at x=239 and right edge 1680 — i.e. the
   flush edges of the 1440 container. So the nav row is built as a normal
   1440 container with the pill centred between logo and CTA, not as an 825px
   box with overflow.
   ========================================================================== */

/* Fixed rather than sticky: the bar was already absolute and out of flow,
   overlaying the hero, so the hero's padding-top already accounts for it.
   position: sticky would need it back in flow and would push the hero down by
   its own height; fixed keeps the design identical at the top of the page and
   simply stays put on scroll. */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

/* Scrolled state. No backdrop layer and no blur: the white pill and the dark
   CTA carry their own contrast, so the bar reads fine over scrolled content
   without a ground behind the logo (QC 2026-08-17). .is-stuck is still set by
   nav.js and left here as the styling hook. */

.site-nav__desktop,
.site-nav__mobile {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------- Mobile bar */
/* Base (mobile-first) rules must precede the desktop media query — declared
   after it, they carry equal specificity and win at every width, which left
   the mobile bar visible at 1920. */
.site-nav__desktop {
    display: none;
}

.site-nav__mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 55px;                       /* @ 123:8062 */
    margin-top: 29px;
    /* Figma: bar spans -1..389, hamburger at 334.23..379.23 -> 10.77 right gap.
       Logo sits at x=16. @ 123:8073 / 123:8064 */
    padding: 0 10.77px 0 16px;
}

.site-nav__logo-m {
    display: block;
    margin-right: auto;
}

.site-nav__logo-m img {
    width: 92px;
    height: 20.164px;
}

.site-nav__toggle {
    flex: none;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 0;
    cursor: pointer;
}

/* -------------------------------------------------------------- Desktop bar */
@media screen and (min-width: 992px) {
    .site-nav__mobile {
        display: none;
    }

    /* The three items total 1179px at their Figma sizes inside a 1440
       container, leaving 261px of slack. Below ~1260 that slack is gone and
       the pill has to give — so the gap collapses first (down to 24px), then
       the pill itself shrinks. Nothing is pinned to a fixed x. */
    .site-nav__desktop {
        display: flex;
        align-items: center;
        /* space-between pins the logo to the container's left edge and the CTA
           to its right (x=239 / right edge 1680 at 1920, per Figma); gap is
           only the floor that stops them touching once the slack is gone. */
        justify-content: space-between;
        gap: clamp(24px, 4vw, 131px);
        width: min(var(--content-width), calc(100% - 80px));
        margin: 0 auto;
        padding-top: 35px;              /* NAV top @ 123:7321 */
    }

    .site-nav__logo {
        display: block;
        flex: none;
        /* Top-aligned, not centred: align-items:center on the row was centring
           the logo against the 67px pill and pushing it 9px below the 49 the
           design puts it at (nav top 35 + 14). */
        align-self: flex-start;
        margin-top: 14px;
    }

    .site-nav__logo img {
        width: 173px;
        height: 36px;
    }

    .site-nav__pill {
        flex: 1 1 auto;                 /* shrinks below 825 when space runs out */
        min-width: 0;
        max-width: var(--nav-width);    /* 825px @ 123:7322 */
        height: 67px;
        background-color: var(--white);
        border-bottom: 1px solid #e1e1e3;
        border-radius: 90px;
    }

    .site-nav__logo,
    .site-nav__desktop .cta--primary {
        flex: none;                     /* logo and CTA keep their Figma size */
    }

    /* Figma places the five links at x = 47 / 202 / 364 / 552 / 733 inside the
       825 pill — flush 47px inset each side, distributed between. The uneven
       raw gaps are just the differing label widths, so space-between with a
       47px inset reproduces them to within a few px without hardcoding. */
    /* 47px inset is 5.7% of the 825px pill — expressed as a percentage so it
       scales with the pill instead of squeezing the labels when it shrinks. */
    .site-nav__links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 100%;
        margin: 0;
        padding: 0 5.7%;
    }

    .site-nav__links a,
    .site-nav__links button {
        white-space: nowrap;
        font-family: inherit;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .site-nav__links a,
    .site-nav__links button {
        font-size: var(--fs-nav);       /* 17px @ 123:7323 */
        font-weight: var(--fw-semibold);
        color: var(--brand-dark-green);
        text-decoration: none;
        transition: opacity .2s ease;
    }

    .site-nav__links a:hover,
    .site-nav__links button:hover {
        opacity: .65;
    }
}

/* --------------------------------------------------------------------- CTAs */
.cta {
    display: inline-flex;
    font-family: inherit;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-dark-green);
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.cta:hover {
    background-color: var(--brand-black);
}

.cta:active {
    transform: translateY(1px);
}

/* Desktop CTA — 60px tall, 40px sides, radius 65 @ 123:7328 */
.cta--primary {
    height: 60px;
    padding: 13px 40px;
    border-radius: 65px;
    font-size: var(--fs-cta);           /* 20px */
    font-weight: var(--fw-bold);
}

/* Mobile nav CTA — 34.5px tall, radius 34.5, gap 8.05 @ 123:8067 */
.cta--sm {
    flex: none;
    gap: 8.05px;
    height: 34.5px;
    padding: 0 11.5px;
    border-radius: 34.5px;
    font-size: 13.8px;
    line-height: 19.55px;
    font-weight: var(--fw-semibold);
}

.cta--sm img {
    width: 12.176px;
    height: 17.25px;
}

/* ------------------------------------------------------------- Mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: #f9faf6;          /* @ 123:8082 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu__bar {
    position: relative;
    flex: none;
    height: 55px;
    margin-top: 30px;                   /* @ 123:8085 */
}

/* Figma puts this at left 335.23 in a 390 frame, i.e. a 10.77px right inset —
   the same inset as the hamburger it replaces, so the X lands exactly where
   the user just tapped. Anchored right, not left, so it tracks the edge on
   wider phones instead of drifting into the middle. */
.mobile-menu__close {
    position: absolute;
    top: 5.08px;                        /* @ 123:8087, inside the 30px-offset bar */
    right: 10.77px;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.mobile-menu__close img {
    position: absolute;
    inset: 0;
    width: 45px;
    height: 45px;
}

/* Close glyph 19.678 x 17.678 at 12.77 / 13.92 inside the circle @ 123:8089 */
.mobile-menu__close .mobile-menu__close-x {
    inset: 13.92px auto auto 12.77px;
    width: 19.678px;
    height: 17.678px;
}

.mobile-menu__nav {
    flex: 1 0 auto;
    padding: 29px 0 0 var(--gutter-mobile);   /* links start at top 84 @ 123:8105 */
}

.mobile-menu__nav a,
.mobile-menu__nav button {
    display: inline-block;
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 20px;                    /* @ 123:8105 */
    line-height: 36px;
    color: var(--brand-dark-green);
    text-decoration: none;
}

.mobile-menu__nav li + li {
    margin-top: 20px;                   /* mb-[20px] between items */
}

.mobile-menu__footer {
    flex: none;
    text-align: center;
    padding-bottom: 40px;
}

.mobile-menu__logo {
    width: 189.409px;
    height: 38.813px;
    margin: 0 auto;
}

.mobile-menu__tagline {
    margin-top: 9.5px;                  /* logo bottom 702.8 -> tagline 712.9 */
    font-family: var(--font-screen-title);
    font-weight: var(--fw-medium);
    font-size: 13.197px;                /* @ 123:8101 */
    color: var(--brand-dark-green);
}

.mobile-menu__stores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.2%;                          /* 148.41 - 132.739 @ 123:8104 */
    width: min(299px, 100%);
    margin: 33.6px auto 0;              /* tagline bottom 725.3 -> stores 759.16 */
}

/* One asset per badge — see the note in footer.css. */
.mobile-menu__store {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.mobile-menu__store img {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-menu__store--ios     { width: 44.4%; }
.mobile-menu__store--android { width: 50.4%; }

@media screen and (min-width: 992px) {
    .mobile-menu {
        display: none !important;
    }
}