/* ======================================
   GO REWARDS HEADER
====================================== */

.gr-header {
    width: 100%;
    background: #F7F7F8;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.gr-header-container {
    max-width: 1440px;
    margin: auto;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* Logo */

.gr-logo {
    height: 44px;
    width: auto;
}

/* =======================
   CENTER NAVIGATION
======================= */

.gr-desktop-nav {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--item-spacing-6, 6px);
    flex: 1 0 0;
}

.gr-nav-item {
    /* Figma layout */
    /* width: 57px;
    height: 52px;
    padding: 6px 12px;
    gap: 3px;
    border-radius: 8px;
    display: flex;
    flex: 0 0 70px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #5F6368;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease; */

    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    margin-right: 3px;
    color: #5B5F6B;
    font-family: "Inter";
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

    /* Icon */
    .gr-nav-item img,
    .gr-desktop-nav-image {
        width: auto;
        height: 28px;
        object-fit: contain;
        margin: 0;
    }

    /* Hover / Active */
/*    .gr-nav-item:hover,
    .gr-nav-item.active {
        color: #ED1C24;
        background: rgba(237, 28, 36, 0.08);
    }

    .gr-nav-item.active {
        background: rgba(237, 28, 36, 0.12);
    }*/

/* =======================
   RIGHT BUTTONS
======================= */

.gr-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gr-login-btn {
    /* layout */
    display: flex;
    height: 33px;
    padding: 12px 22px;
    justify-content: center;
    align-items: center;

    /* style */
    border-radius: var(--corner-radius-9, 9px);
    border: var(--stroke-weight-1, 1px) solid var(--color-blue-9, #14151A);
    /* Not in the supplied spec, but required: these are <button> elements now,
       so without this they would pick up the browser's default grey background. */
    background: transparent;

    /* typography */
    color: var(--Grays-Black, #000);
    text-align: center;
    font-family: var(--font-family-Font-1, "Inter"), "Open Sans", sans-serif;
    font-size: var(--font-size-12, 12px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: normal;
}

    /* .gr-login-btn:hover {
        background: #000;
        color: #FFF;
    } */

.gr-enroll-btn {
    /* layout */
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;

    /* style */
    border-radius: var(--corner-radius-7, 7px);
    border: var(--stroke-weight-1, 1px) solid var(--color-black-0, rgba(0, 0, 0, 0.00));
    background: var(--color-red-50, #E11D2E);
    box-shadow: 0 6px 16px 0 rgba(225, 29, 46, 0.28);

    /* typography */
    color: var(--White, var(--color-white-solid, #FFF));
    text-align: center;
    font-family: var(--font-family-Font-1, "Inter"), "Open Sans", sans-serif;
    font-size: var(--font-size-12, 12px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: normal;
}

    /* .gr-enroll-btn:hover {
        background: #C91820;
        color: #FFF;
    } */

/* =========================================
   DESKTOP NAV WRAPPER
========================================= */

.gr-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .gr-nav .gr-desktop-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
/* Desktop */
@media (min-width: 768px) {
    .gr-nav {
        display: flex;
    }

    .gr-mobile-menu-btn,
    .gr-mobile-menu {
        display: none;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .gr-nav {
        display: none !important;
    }

    .gr-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gr-mobile-menu-btn {
        display: flex;
        margin-left: 8px;
    }
    .gr-desktop-nav {
        display: none;
    }
}

/* =========================================
   MOBILE MENU
========================================= */

/* Hide hamburger on desktop */
.gr-mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

    .gr-mobile-menu-btn span {
        width: 22px;
        height: 2px;
        background: #1F1F1F;
        border-radius: 2px;
        transition: all .25s ease;
    }

/* Sidebar panel. Hidden outright on desktop; the MOBILE SIDEBAR section at the
   end of this file turns it into an off-canvas panel below 768px. */
.gr-mobile-menu {
    display: none;
    background: #FFFFFF;
    border-top: 1px solid #EAEAEA;
    padding: 12px 20px;
}

    /* The links are a <ul> inside the <nav>, so the browser list styling has to go.
       Flex column because the rows are separated by a 2px gap rather than by a rule
       under each one - gap only applies between items, so there is no stray space
       at the top or bottom to subtract back off. */
    .gr-mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Scoped to the list, not to the whole panel. As .gr-mobile-menu a this also hit
       the brand link in the header row, forcing the logo into a 14px-padded menu row
       with 15px/600 type. Row styling belongs to row anchors. */
    .gr-mobile-menu-list a {
        display: block;
        /* Vertical only, so the rows stay flush with the list's own 20px side padding
           and the divider above Logout still spans the full content width. */
        padding: 2px 0;
        /* 2px of padding alone leaves a ~27px row, below the 44px minimum touch target
           both Apple and Google publish. min-height restores the tappable area without
           changing the 2px spacing: the anchors are flex rows with align-items: center,
           so the icon and label stay centred in the taller box rather than being
           pushed apart. */
        min-height: 44px;
        color: #202124;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

        /* Logout is the one account action in the list, so it carries the single divider
           separating it from the navigation above, and is centred rather than
           left-aligned.

           Keyed off the anchor's own class, not li:last-child. The logged-out panel has
           no Logout - its last row is Fly, an ordinary nav item that must stay
           left-aligned and undivided - and Log In / Register now live in the panel head
           instead of the list. li:last-child would have centred Fly.

           justify-content is what does the centring: the rule further down makes row
           anchors flex rows so each icon lines up with its label, and text-align alone
           would not move a flex line. text-align is set anyway for the icon-less rows,
           where the anchor holds a bare text node. */
        .gr-mobile-menu-list > li > a.logout-link-button {
            border-top: 1px solid #F2F2F2;
            color: #EA3D34;
            justify-content: center;
            text-align: center;
        }

/* Responsive */
@media (max-width: 767px) {

    .gr-header-container {
        height: 72px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hide desktop navigation */
    .gr-desktop-nav {
        display: none;
    }

    /* Keep login/register visible */
    .gr-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .gr-login-btn,
    .gr-enroll-btn {
        min-width: 70px;
        height: 34px;
        font-size: 12px;
        border-radius: 8px;
        padding: 0 12px;
    }

    /* Show hamburger */
    .gr-mobile-menu-btn {
        display: flex;
        margin-left: 8px;
    }

    .gr-logo-img {
        height: 38px;
        width: auto;
    }
}
@media (max-width: 991px) {

    .gr-header-container {
        padding: 0 16px;
        height: 64px;
    }

    .gr-logo {
        height: 38px;
    }
}

/* =========================================
   GO REWARDS FOOTER
========================================= */

.gr-footer {
    width: 100%;
    background: #14151a;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
}

.gr-footer-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 40px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Footer Logo */

.gr-footer-brand {
    display: flex;
    align-items: center;
}

.gr-footer-logo {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 14px;
}

/* Footer Links */

.gr-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .gr-footer-links a {
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        padding: 0 18px;
        border-left: 1px solid rgba(255, 255, 255, 0.5);
    }

        .gr-footer-links a:first-child {
            border-left: none;
        }

        .gr-footer-links a:hover {
            color: #ffffff !important;
            text-decoration: underline;
        }

/* Social */

/*.gr-footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .gr-footer-social a {
        color: #ffffff !important;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }

        .gr-footer-social a:hover {
            color: #ffffff !important;
            text-decoration: underline;
        }*/


/* =========================================
   FOOTER BOTTOM
========================================= */

.gr-footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.gr-footer-bottom-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 40px;
    text-align: center;
}

.gr-footer-bottom p {
    margin: 0;
    color: #ffffff;
    font-size: 12px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .gr-header-container {
        height: 70px;
        padding: 0 25px;
    }

    .gr-desktop-nav {
        gap: 12px;
        margin: 0 20px;
    }

    .gr-nav-item {
        font-size: 13px;
    }

    .gr-logo-img {
        width: 130px;
    }

    .gr-login-btn,
    .gr-enroll-btn {
        min-width: 90px;
        height: 38px;
        padding: 0 15px;
        font-size: 13px;
    }

    .gr-footer-container {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
    }

    .gr-footer-links {
        margin: 10px 0;
    }
}




/* =========================================
   CENTER NAV ICONS
========================================= */

.nav-start {
    display: flex;
    align-items: center;
}

#navbar {
    width: 100%;
}

.navbar-collapse {
    width: 100%;
}

/* Two duplicate .gr-desktop-nav blocks used to sit here, both re-declaring the rule
   with width: 100% and height: 80px, and one pinning it to flex: 0 0 70px. Being later
   in the file they overrode the canonical rule above, which is what forced the nav to a
   rigid 70px box and clipped the item labels against the shorter header. Removed so the
   single declaration above is authoritative. */

.gr-nav-item {
    display: flex;
    padding: 6px 12px;
    flex-direction: column;
    align-items: center;
    gap: var(--item-spacing-3, 3px);
    align-self: stretch;
    /*    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 80px;*/
    /*    flex: 0 0 100px;*/

    /* display: flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center; */
}

.gr-desktop-nav-image {
    display: block;
    height: 42px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 767px) {

    .gr-header-container {
        height: 65px;
        padding: 0 20px;
    }

    /* .gr-header-actions used to be hidden alongside the nav here. Log In / Register
       now stay in the header bar on mobile - see MOBILE HEADER ACTIONS at the end of
       this file, which has to come after the centring section to win on source order. */
    .gr-desktop-nav {
        display: none;
    }

    /* Was display: block, which cancelled the flex column the three bars rely on
       and fused them into one solid rectangle. Restated as the full flex stack so
       the button is correct wherever it appears - the logged-out header puts it in
       .gr-header-container, the logged-in header in .nav-hamburger. */
    .gr-mobile-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .gr-logo-img {
        width: 125px;
    }

    /* A .gr-mobile-menu.active { display: block } rule used to sit here. The open
       state is now a transform, not a display swap - see MOBILE SIDEBAR below. */

    .gr-mobile-actions {
        display: flex;
    }

    /* Footer */

    .gr-footer-container {
        padding: 35px 20px;
    }

    .gr-footer-links {
        display: block;
        width: 100%;
    }

        .gr-footer-links a {
            display: block;
            padding: 10px 0;
            border-left: none;
        }

    /*    .gr-footer-social {
        margin-top: 10px;
    }*/

    /*    .gr-footer-bottom-container {
        padding: 15px 20px;
    }*/
}


@media (max-width: 767px) {
    .gr-desktop-nav {
        justify-content: center;
        align-items: center;
/*        gap: 16px;*/
        height: auto;
    }

    .gr-nav-item {
        display:none
/*        width: 52px;
        height: 48px;
        padding: 6px 8px;*/
    }

    .gr-desktop-nav-image {
        height: 24px;
        width: auto;
    }
}


/* =========================================
   CENTERED DESKTOP NAV (public header)
   -----------------------------------------
   .gr-header-container is a 3-item flex row: logo, nav, action buttons.
   The logo and the buttons have different widths, so space-between alone
   leaves the nav visually off-centre. Giving both side columns the same
   flexible basis makes the nav sit in the true centre of the header.

   These are scoped with the child combinator so they only affect the public
   header, and so they win over the earlier duplicate .gr-desktop-nav rules
   in this file (one of which pins the nav to flex: 0 0 70px). The logged-in
   Bootstrap navbar also uses .gr-desktop-nav and is intentionally untouched.
========================================= */

.gr-header-container > .gr-logo {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* No .gr-desktop-nav override here on purpose. The canonical rule gives it
   flex: 1 0 0, so with the logo and the action buttons both on flex: 1 1 0 the row is
   three equal columns and the nav's own justify-content: center puts its items on the
   header's centre line. Re-declaring flex or gap here would silently discard the spec. */

.gr-header-container > .gr-header-actions {
    flex: 1 1 0;
    justify-content: flex-end;
}

/* NOTE: a .gr-header-container > .gr-mobile-menu-btn override used to sit here to
   undo a display:block further up. That display:block is now stated as the full
   flex stack at its source, so the parent-scoped copy was redundant - and it could
   not reach the logged-in button, whose parent is .nav-hamburger. */


/* =========================================
   LOGGED-IN HEADER ALIGNMENT
   -----------------------------------------
   #navbar exists only in the logged-in header, so these rules are scoped to it.
   The id also lets them outrank the deep class chains in main.css (which loads
   after this file) without an !important tug-of-war.

   Corrects two problems:
   1. main.css sets .top-menu-links.collapse to align-items: flex-end together
      with padding: 40px 0 0, which pushed the icon nav down far enough that its
      labels (Home, EarnPoints, ...) were clipped by the bottom of the header.
   2. The icon nav used to sit inside .nav-private-container (col-sm-4), so it was
      crammed into the right-hand third beside the greeting and points badge. It
      is now a sibling and is laid out as a proper centre column.

   Desktop only: below 768px the same container becomes the slide-out mobile
   menu, which must keep its existing stacked layout.
========================================= */

@media (min-width: 768px) {

    #navbar > .top-menu-links {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: 0;
        padding: 0 !important;
    }

    /* Left column: CMS-driven header links.
       min-width: 0 matters here. Flex items default to min-width: auto, which floors
       them at their content width, so without it the right column (greeting, points
       badge, chevron) refuses to shrink to match this empty one and the nav is pushed
       off centre. */
    #navbar > .top-menu-links > ul.nav-private-list {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: row; /* .navbar-nav is column-oriented in Bootstrap 4 */
        align-items: center;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

    /* Centre column: icon nav. flex and gap are deliberately NOT re-declared here so the
       canonical .gr-desktop-nav spec (flex: 1 0 0, gap: 6px) survives. With the left
       column on flex: 1 1 0 and the right on flex: 1 1 20%, all three grow equally from
       their bases, which puts the nav's midpoint at 40% of .nav-start, i.e. the header's
       true centre. The horizontal margin is symmetric so it does not shift that. */
    #navbar > .top-menu-links > .gr-desktop-nav {
        margin: 0 16px;
    }

    /* Right column: greeting, points badge, chevron.

       The 20% flex-basis is what centres the nav against the FULL header rather than
       just this row. The logo is not inside #navbar: it sits in a col-xs-2 outside
       .slide-menu-right, while this flex row lives in .nav-start (col-xs-10, see
       main.css line 373). Two equal side columns would therefore centre the nav within
       the right 83.33% of the header, putting it at 16.67% + 41.67% = 58.3% instead
       of 50%. Compensating means making this column wider than the left by exactly the
       logo column: 16.667% / 83.333% = 20% of this container. Both columns then grow
       equally from that basis, so the nav's midpoint lands on the header's true centre. */
    #navbar > .top-menu-links > .nav-private-container {
        flex: 1 1 20%;
        min-width: 0;
        width: auto;
        max-width: none;
        justify-content: flex-end;
        align-items: center;
        border-left: 0;
        top: 0;
    }
}


/* =========================================
   BUTTON RESETS FOR CONVERTED NAV CONTROLS
   -----------------------------------------
   The header nav items and Log In / Register controls are <button> elements
   instead of <a href>. A button does not inherit font settings, ships a UA
   background and border, and does not use a pointer cursor, so those have to
   be neutralised for the existing styling to render identically.

   Selectors are element+class (0,1,1) so they outrank the plain class rules
   above without !important, and so they only touch the buttons.
========================================= */

button.gr-nav-item,
button.gr-login-btn,
button.gr-enroll-btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

button.gr-nav-item {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

/* .gr-login-btn and .gr-enroll-btn deliberately get no font, border or padding reset
   here. Both carry a full design-token spec in their own rules, and an element+class
   selector (0,1,1) would outrank those (0,1,0) rules and silently discard the
   font-family, font-size, border and padding. They only need the appearance and
   cursor reset in the shared rule above. */


/* =========================================
   LOGGED-IN MOBILE SLIDE-OUT MENU
   -----------------------------------------
   The account/nav list inside the slide-out panel was invisible on mobile.

   main.css declares min-width: 500px on .top-menu-links twice at top level
   (lines 2400 and 3767). The slide-out panel is only 250px wide
   (.slide-menu-right) and .menu carries overflow: hidden, so a 500px-wide
   child is clipped straight out of view.

   main.css does try to undo it at line 6035, but with two problems: the reset
   selector "header nav .top-menu-links" is (0,1,2) while the rule imposing
   the 500px is ".gr_container header nav .top-menu-links" at (0,2,2), so the
   reset loses; and it is scoped to max-width: 575px, leaving 576-767px with
   no reset at all.

   #navbar only exists in the logged-in header, and the id gives (1,1,0),
   which outranks both without needing !important.
========================================= */

@media (max-width: 767px) {

    #navbar > .top-menu-links {
        min-width: 0;

        /* main.css line 224 sets justify-content: flex-end on this row. In flexbox,
           when a child overflows its container the overflow spills off the START
           edge under flex-end, i.e. to the left, where .menu { overflow: hidden }
           clips it. That is why every label lost its first characters ("ome",
           "arn Points"). Aligning to the start keeps the list against the panel's
           left edge so nothing is cut off. */
        justify-content: flex-start;
    }

    /* main.css line 2161 gives this ul min-width: max-content at top level, which
       floors it at its widest unwrapped content and stops it shrinking into the
       250px slide-out panel. Releasing the floor is what actually lets the list fit;
       width/max-width alone could not override it. */
    #navbar > .top-menu-links > ul.nav-private-list {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}


/* =========================================
   MOBILE MENU ICON ALIGNMENT
   -----------------------------------------
   Row anchors are display: block, so an inline SVG would sit on the text baseline
   with no spacing. Switching the anchor to a flex row lines the icon up with its
   label and gives a consistent gap.

   Scoped to the id and the list (1,1,1) so it outranks the .gr-mobile-menu-list a
   rule (0,1,1) above without needing !important, and so it leaves the brand link in
   the header row alone.
========================================= */

#gr-mobile-menu .gr-mobile-menu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
}

    /* Keep icons at their intrinsic size; only the label should flex. */
    #gr-mobile-menu .gr-mobile-menu-list a svg {
        flex: 0 0 auto;
    }


/* =========================================
   MOBILE SIDEBAR
   -----------------------------------------
   The panel is an off-canvas sidebar anchored to the left edge, not an in-flow
   dropdown. Open/closed is a transform rather than a display swap so the slide
   can animate - display is not an animatable property.

   visibility carries the hidden state alongside the transform because a panel
   translated off screen is still focusable and still exposed to screen readers.
   visibility: hidden removes it from the tab order and the accessibility tree.

   visibility is switched with a 0s transition rather than being interpolated:
   opening applies it immediately (no delay) so a focus() call in the same tick
   lands on a genuinely visible element, and closing delays it by the length of
   the slide so the panel stays on screen while it animates away.

   Scoped to the id (1,0,0) inside the mobile query so it outranks the
   .gr-mobile-menu (0,1,0) base rule that keeps the panel hidden on desktop.
========================================= */

@media (max-width: 767px) {
    #gr-mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        /* main.css:3674 has `header nav { margin: 8px auto 0 !important }` for the
           logged-in Bootstrap navbar. This panel is a <nav> inside <header>, so it
           matches that selector too and was being pushed 8px down the screen.
           !important is unavoidable here: the competing declaration is itself
           !important, and no amount of specificity outranks that on its own. */
        margin: 0 !important;
        /* main.css uses z-index 1000 for .menu and 100 for .mask, so sit above both. */
        z-index: 1100;
        padding: 0 0 24px;
        border-top: none;
        border-right: 1px solid #EAEAEA;
        box-shadow: 2px 0 16px rgba(0, 0, 0, .18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .28s ease, visibility 0s linear .28s;
    }

        #gr-mobile-menu.active {
            visibility: visible;
            transform: translateX(0);
            transition: transform .28s ease, visibility 0s linear 0s;
        }

        /* Panel padding moved to the children so the divider borders can still run
           the full width of the sidebar. */
        #gr-mobile-menu .gr-mobile-menu-list {
            padding: 0 20px;
        }

    /* Brand on the left, close control on the right, one row. */
    .gr-mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 14px 4px 20px;
    }

    .gr-mobile-menu-brand {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
    }

        /* The <img> carried a width="120" attribute with nothing constraining height,
           so it overflowed its wrapper. Sizing it here keeps the aspect ratio. */
        .gr-mobile-menu-brand img {
            display: block;
            width: 120px;
            max-width: 100%;
            height: auto;
        }

    /* A .gr-mobile-menu-actions cluster briefly held Log In / Register in this row.
       They moved to .gr-header-actions in the header bar, so the panel head is back to
       brand plus close and needs no compact button variants. */

    .gr-mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: transparent;
        color: #1F1F1F;
        cursor: pointer;
    }

    /* Backdrop. Created by common.js rather than in the view so there is exactly
       one instance regardless of which header branch rendered. */
    .gr-mobile-menu-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1099;
        opacity: 0;
        visibility: hidden;
        /* Same 0s visibility switch as the panel: immediate on open, delayed on
           close so the dimming has time to fade out before it is taken away. */
        transition: opacity .28s ease, visibility 0s linear .28s;
    }

        .gr-mobile-menu-backdrop.active {
            opacity: 1;
            visibility: visible;
            transition: opacity .28s ease, visibility 0s linear 0s;
        }

    /* Stop the page behind the sidebar from scrolling while it is open. */
    body.gr-menu-open {
        overflow: hidden;
    }
}

/* The sidebar is desktop-irrelevant, so make sure a stale backdrop can never
   cover the desktop layout. */
@media (min-width: 768px) {
    .gr-mobile-menu-backdrop {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gr-mobile-menu,
    .gr-mobile-menu-backdrop {
        transition: none;
    }
}


/* =========================================
   MOBILE HEADER ACTIONS
   -----------------------------------------
   Log In / Register stay in the header bar on mobile instead of being tucked inside
   the slide-out panel, so signing in does not require opening the menu first.

   Header row below 768px, in DOM order: logo, .gr-header-actions, hamburger. The
   .gr-desktop-nav between the first two is display: none here, so the buttons land
   between the logo and the toggle without any reordering.

   This block sits at the end of the file on purpose. The CENTERED DESKTOP NAV section
   above sets .gr-header-container > .gr-header-actions { flex: 1 1 0; justify-content:
   flex-end } at (0,2,0); matching that specificity and coming later is what lets these
   win, rather than escalating to !important.
========================================= */

@media (max-width: 767px) {
    .gr-header-container > .gr-header-actions {
        display: flex;
        align-items: center;
        /* flex-end packs the pair against the column's right edge, which butts up
           against the hamburger. The leftover width all collects to the left of the
           buttons instead of being split either side of them. */
        justify-content: flex-end;
        gap: 6px;
        /* Sits between the two fixed-size items and takes the leftover width.
           min-width: 0 lets it shrink below the buttons' intrinsic width on narrow
           phones rather than pushing the toggle off the edge. */
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
    }

        /* Trimmed from the 70px / 34px header-bar sizing: the logo and the hamburger
           already claim about 160px of a 360px viewport. */
        .gr-header-container > .gr-header-actions > .gr-login-btn,
        .gr-header-container > .gr-header-actions > .gr-enroll-btn {
            min-width: 0;
            height: 30px;
            padding: 0 10px;
            font-size: 11px;
            line-height: 1;
            white-space: nowrap;
        }

    /* The hamburger is the last item and must never be squeezed. */
    .gr-header-container > .gr-mobile-menu-btn {
        flex: 0 0 auto;
    }

    /* Likewise the logo keeps its intrinsic width instead of sharing space equally. */
    .gr-header-container > .gr-logo {
        flex: 0 0 auto;
    }
}