/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "header". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The shared logged-out header (the markup biz, school and greasepilot.com's migrate plugin share) for a
 * host that cannot load styles.css. Every selector is scoped to header[data-gp-public-header], so
 * nothing here styles anything outside that element, and every rem is written out in px (16px to the
 * rem) so the host's root font size cannot resize it. Fonts (Quicksand, Oswald) and the matching
 * js/components/public-header.js are the host's to load. Regions: bar, nav, cart, cta-identity. */

/* ── region: bar ── */
/* Header and Navigation */
header[data-gp-public-header] #header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

header[data-gp-public-header] {
    background-color: #2a2a2a;
    color: white;
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header[data-gp-public-header] .navbar {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0 32px;
}
header[data-gp-public-header] .navbar .logo { flex-shrink: 0; }
/* Identity cards: nav first, then Rank, then App on the right end. (brand-lockup = 0.) */
header[data-gp-public-header] .navbar .nav-links { order: 1; }
header[data-gp-public-header] .navbar .header-id-card--rank { order: 2; flex-shrink: 0; }
header[data-gp-public-header] .navbar .header-id-card--app { order: 3; flex-shrink: 0; }
/* Cart in the logged-in biz header: between Account (end of .nav-links, order 1) and the Your Rank
   card (order 2) — order 1 + placed right after .nav-links in the DOM. It's OUTSIDE .nav-links, so it
   needs the header nav-link look set explicitly (the white color is scoped to `.nav-links a`). Hidden
   on mobile where .mobile-cart takes over (matches the 968px header breakpoint). */
header[data-gp-public-header] .navbar .nav-cart-inline {
  order: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3.2px;
  position: relative; color: #fff; text-decoration: none; transition: color 0.2s;
}
header[data-gp-public-header] .navbar .nav-cart-inline svg { width: 26px; height: 26px; flex-shrink: 0; }
header[data-gp-public-header] .navbar .nav-cart-inline:hover { color: #00acff; }
@media (max-width: 968px) { header[data-gp-public-header] .navbar .nav-cart-inline { display: none; } }
header[data-gp-public-header] .navbar .mobile-menu-toggle { order: 11; margin-left: auto; }

header[data-gp-public-header] .logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

header[data-gp-public-header] .logo:hover {
    text-decoration: none;
}

header[data-gp-public-header] .logo img {
    height: 80px;
    width: auto;
}

header[data-gp-public-header] .logo-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}

header[data-gp-public-header] .logo-text h1 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: white;
}

header[data-gp-public-header] .logo-text p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: white;
}

header[data-gp-public-header] .nav-links {
    list-style: none;
    display: flex;
    gap: 28px;
    align-items: center;
}

header[data-gp-public-header] .nav-links li {
    display: flex;
    align-items: center;
}

header[data-gp-public-header] .nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 19.2px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    font-family: 'Quicksand', sans-serif;
    padding: 8px 0;
}

header[data-gp-public-header] .nav-links a:hover {
    color: #00acff;
}

/* ── region: nav ── */
/* Dynamic Header Navigation Styles */
header[data-gp-public-header] .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: transform 0.3s ease, color 0.3s ease;
}

header[data-gp-public-header] .nav-link:hover {
    transform: translateY(-2px);
    color: #0170B9;
}

/* Layout/sizing only — the orange IDENTITY (fill/hover/ring) comes from THE
   global orange CTA block (search "global orange CTA identity"). */
/* Second selector carries the same declarations at higher specificity: school
   nests this CTA inside the nav list, and `.nav-links a` (0,1,1) sets its own
   text-transform/font-size/letter-spacing, which outranked a lone class (0,1,0)
   and left school title-case while biz went UPPERCASE. The component owns its
   own type wherever it's mounted. */
header[data-gp-public-header] .btn-get-started,
header[data-gp-public-header] .nav-links a.btn-get-started {
    color: white !important;
    padding: 9.6px 19.2px !important;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.15s;
    /* ONE header-CTA identity for every app (Michael 2026-09-17): UPPERCASE, no
       underline, Lucide arrow-right on the right. The icon is a CSS mask so the
       markup stays a plain link — no SVG to copy into each app's header and drift. */
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    white-space: nowrap;
}
/* Lucide arrow-right, masked so it inherits the button's text colour. */
header[data-gp-public-header] .btn-get-started::after,
header[data-gp-public-header] .mobile-get-started::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

header[data-gp-public-header] .btn-get-started:hover {
    color: white !important;
}

/* User Dropdown Menu */
header[data-gp-public-header] .nav-dropdown {
    position: relative;
}

header[data-gp-public-header] .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

header[data-gp-public-header] .user-avatar {
    font-size: 24px;
}

header[data-gp-public-header] .user-name {
    font-weight: 600;
}

header[data-gp-public-header] .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #333;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 240px;
    list-style: none;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

header[data-gp-public-header] .nav-dropdown:hover .dropdown-menu,
header[data-gp-public-header] .nav-dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

header[data-gp-public-header] .dropdown-arrow {
    font-size: 16px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

header[data-gp-public-header] .nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

header[data-gp-public-header] .dropdown-menu li {
    margin: 0;
}

header[data-gp-public-header] .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9.6px 16px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 15.2px;
}

header[data-gp-public-header] .dropdown-menu a:hover {
    background: #444;
    color: #00acff;
}

/* Mobile Get Started Button - hidden on desktop */
header[data-gp-public-header] .mobile-get-started {
    display: none;
}

/* Mobile cart icon — shown only on mobile (desktop uses the "Cart" nav-link). */
header[data-gp-public-header] .mobile-cart { display: none; }

/* Mobile Menu Toggle Button */
header[data-gp-public-header] .mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

header[data-gp-public-header] .hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: relative;
    transition: background-color 0.3s ease;
}

header[data-gp-public-header] .hamburger::before,
header[data-gp-public-header] .hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: absolute;
    transition: all 0.3s ease;
}

header[data-gp-public-header] .hamburger::before {
    top: -8px;
}

header[data-gp-public-header] .hamburger::after {
    top: 8px;
}

header[data-gp-public-header] .mobile-menu-toggle.active .hamburger {
    background-color: transparent;
}

header[data-gp-public-header] .mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

header[data-gp-public-header] .mobile-menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile Navigation */
@media (max-width: 968px) {
    header[data-gp-public-header] {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 4px 0;
    }

    /* Mobile header layout. The desktop gap:2rem + non-shrinking rank badge
       made the row (logo + badge + hamburger) wider than the screen, which
       overflowed and CLIPPED the logo (left) and hamburger (right) off the
       viewport. Fix: constrain the navbar to the viewport, drop the huge gap,
       inset with padding, and let the rank badge shrink so the row always fits. */
    header[data-gp-public-header] .navbar {
        max-width: 100%;
        padding: 0 13.6px;
        gap: 8px;
        box-sizing: border-box;
    }
    header[data-gp-public-header] .navbar .logo { flex-shrink: 0; }

    header[data-gp-public-header] .logo img {
        height: 50px;
    }

    /* Mobile: center the two id cards between the logo and hamburger, shrunk to fit
       the row. REAL shrink (smaller padding/font) so logo + cards + hamburger fit a
       ~360px viewport. Card height stays under the 50px mobile logo. The auto margins
       (left on Rank, right on App) split the free space so the pair sits centered. */
    header[data-gp-public-header] .header-id-card--rank { order: 5 !important; margin-left: auto !important; }
    header[data-gp-public-header] .header-id-card--app { order: 5 !important; margin-right: auto !important; }
    /* NOTE: scope these under .navbar so they out-specify the desktop
       .header-id-card / pill rules (which live LATER in the file, at ~line 8656,
       and would otherwise win the cascade on mobile — equal specificity, later
       source order — leaving the cards at the desktop 72px). */
    header[data-gp-public-header] .navbar .header-id-card {
        height: 42px;              /* middle ground; under the 50px mobile logo */
        padding: 0 8.8px 3.52px; /* small bottom pad so the pill isn't tight against the border */
        gap: 1.92px;
        border-radius: 9px;
    }
    header[data-gp-public-header] .navbar .header-id-label { font-size: 8.96px; letter-spacing: 0.6px; }
    /* Keep BOTH pills identical on mobile too (same combined selector, .navbar-scoped). */
    header[data-gp-public-header] .navbar .header-id-card .app-badge,
header[data-gp-public-header] .navbar .header-id-rank { min-width: 46.4px; height: 21.6px; font-size: 10.88px; padding: 0 8.8px; }
    /* Clear the desktop margin-left:auto so the badge's two auto margins fully
       control centering (equal gap each side). */
    header[data-gp-public-header] .navbar .mobile-menu-toggle { order: 7 !important; flex-shrink: 0; margin-left: 0 !important; }

    /* Mobile cart icon: sits just left of the hamburger. Its margin-left:auto right-aligns the
       cart+hamburger cluster on headers WITHOUT id-cards (public/logged-out). On the site header the
       id-cards' auto-margins already push the cluster right, so drop the extra auto there (sibling rule)
       to avoid a double push. */
    header[data-gp-public-header] .mobile-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 6;
        margin-left: auto;
        margin-right: 2.4px;
        position: relative;
        color: #fff;
        text-decoration: none;
        padding: 4px;
        flex-shrink: 0;
    }
    header[data-gp-public-header] .mobile-cart svg { width: 26px; height: 26px; display: block; }
    /* Site header has the id-cards (which carry the auto-margins that right-push the cluster), and they
       sit AFTER .mobile-cart in the DOM, so `~` can't target it — use :has() on the navbar instead. */
    header[data-gp-public-header] .navbar:has(.header-id-card) .mobile-cart { margin-left: 0; }
    /* Same double-push, other cause: when the header carries the Start Free CTA, that button's
       margin-left:auto already absorbs the free space, so a second auto here split it in two and
       left a ~60px hole between the button and the cart (Michael 2026-09-17). One auto push, and
       the button/cart/hamburger read as one right-hand cluster. */
    header[data-gp-public-header] .navbar:has(.mobile-get-started) .mobile-cart { margin-left: 0; }
    header[data-gp-public-header] .mobile-cart-count {
        position: absolute;
        top: -1px;
        right: -3px;
        min-width: 16.8px;
        height: 16.8px;
        background: var(--color-primary, #0170b9);
        color: #fff;
        border-radius: 999px;
        font-size: 10.88px;
        font-weight: 700;
        line-height: 16.8px;
        text-align: center;
        padding: 0 2.88px;
        box-sizing: border-box;
    }

    /* Mobile Get Started button between logo and hamburger. Layout only —
       orange identity comes from the global orange CTA block. */
    header[data-gp-public-header] .mobile-get-started {
        /* inline-flex + gap carry the shared ::after arrow (see the header-CTA block). */
        display: inline-flex;
        align-items: center;
        gap: 6.4px;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 12.8px;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Oswald', sans-serif;
        /* The ONLY auto margin in the mobile header — it right-pushes this button
           and everything after it (cart, hamburger) as one cluster. */
        margin-left: auto;
        margin-right: 12px;
        white-space: nowrap;
    }

    header[data-gp-public-header] .mobile-get-started:hover {
        color: white;
        text-decoration: none;
    }

    header[data-gp-public-header] .mobile-menu-toggle {
        display: block;
    }

    /* ─── Mobile nav menu container ─── */
    header[data-gp-public-header] .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #2a2a2a;
        flex-direction: column;
        padding: 0;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    header[data-gp-public-header] .nav-links.mobile-active {
        max-height: 100vh;
        padding: 0;
        overflow-y: auto;
        border-left: 3px solid #0170b9;
    }

    header[data-gp-public-header] .nav-links li {
        margin: 0;
        width: 100%;
    }

    header[data-gp-public-header] .nav-links a {
        padding: 0;
    }

    /* ─── Top-level menu items ─── */
    header[data-gp-public-header] .nav-link {
        width: 100%;
        display: flex;
        padding: 16px 24px !important;
        line-height: 1.4;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: color 0.2s;
    }

    header[data-gp-public-header] .nav-links > li:last-child > .nav-link,
header[data-gp-public-header] .nav-links > li:last-child > .nav-dropdown > .nav-link {
        border-bottom: none;
    }

    /* Hide the Get Started button in the dropdown menu on mobile */
    header[data-gp-public-header] .btn-get-started {
        display: none !important;
    }

    /* ─── Dropdown containers ─── */
    header[data-gp-public-header] .nav-dropdown {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    header[data-gp-public-header] .nav-dropdown:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

    header[data-gp-public-header] .dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        margin: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        border-radius: 0;
        min-width: 0;
        width: 100%;
    }

    header[data-gp-public-header] .dropdown-menu a {
        border-radius: 0;
    }

    header[data-gp-public-header] .nav-dropdown.active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: 6.4px 0;
    }

    header[data-gp-public-header] .nav-dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
    }

    header[data-gp-public-header] .dropdown-menu li {
        width: 100%;
    }

    /* ─── Sub-menu items ─── */
    header[data-gp-public-header] .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85);
        padding: 16px 24px 16px 32px;
        font-size: 14.4px;
        line-height: 1.4;
        text-align: left;
        display: flex;
        align-items: center;
        transition: background 0.15s, color 0.15s;
    }

    header[data-gp-public-header] .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #00acff;
    }
}

/* Tablet Navigation */
@media (max-width: 1024px) and (min-width: 969px) {
    header[data-gp-public-header] .nav-links {
        gap: 8px;
    }

    header[data-gp-public-header] .nav-link {
        padding: 8px 9.6px;
        font-size: 14.4px;
    }

    header[data-gp-public-header] .user-name {
        display: none;
    }
}

/* ── region: cart ── */
header[data-gp-public-header] .cart-badge {
  display: inline-block; min-width: 18.4px; padding: 0 4.8px; margin-left: 2.4px;
  background: var(--color-primary, #0170b9); color: #fff; border-radius: 999px;
  font-size: 11.52px; font-weight: 700; line-height: 18.4px; text-align: center;
}
/* Desktop cart — sits just right of Login within the centered nav cluster (hidden on mobile, which
   uses .mobile-cart by the hamburger). No margin-auto, so the whole nav stays centered. */
header[data-gp-public-header] .nav-cart-desktop { display: none; }
@media (min-width: 969px) {
  header[data-gp-public-header] .nav-cart-desktop {
    display: inline-flex; align-items: center; gap: 3.2px; order: 4;
    position: relative; color: #fff; text-decoration: none; flex-shrink: 0;
  }
  header[data-gp-public-header] .nav-cart-desktop svg { width: 26px; height: 26px; flex-shrink: 0; }
}

/* Header "Start Free" CTA placed as a DIRECT navbar child (biz) must sit after the
   cart, which is order:4 — without an order it defaults to 0 and jumps to the far
   left. School's copy lives inside .nav-links, so this selector never touches it. */
@media (min-width: 969px) {
  header[data-gp-public-header] .navbar > .btn-get-started { order: 5; flex-shrink: 0; }
}

/* ── region: cta-identity ── */
/* ── THE global orange CTA identity (SSOT — Michael 2026-09-09: ONE orange
   standard across the platform, .btn-accent's behavior). Solid accent, darken
   on hover, soft ring, NO lift. This block owns fill/hover/ring for EVERY
   orange CTA class — sizing/layout stay contextual on each class, and orange
   button colors must never be defined anywhere else (that is how we ended up
   with four different orange buttons). New code uses .btn-accent; the other
   selectors are legacy aliases already in markup. ── */
header[data-gp-public-header] .btn-accent,
header[data-gp-public-header] .btn-get-started,
header[data-gp-public-header] .mobile-get-started,
header[data-gp-public-header] .btn-secondary-large,
header[data-gp-public-header] .quiz-nav-btn--orange,
header[data-gp-public-header] .gp-attn-cta {
  background: var(--color-accent, #f97316); color: #fff; border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px var(--color-accent-ring, rgba(249,115,22,.18));
}
header[data-gp-public-header] .btn-accent:hover,
header[data-gp-public-header] .btn-accent:focus,
header[data-gp-public-header] .btn-get-started:hover,
header[data-gp-public-header] .mobile-get-started:hover,
header[data-gp-public-header] .btn-secondary-large:hover,
header[data-gp-public-header] .quiz-nav-btn--orange:hover,
header[data-gp-public-header] .gp-attn-cta:hover {
  background: var(--color-accent-dark, #ea580c); color: #fff;
  /* The standard does NOT lift — also neutralizes lifts inherited from
     composite classes (.nav-link's hover on the header CTA). */
  transform: none;
}
header[data-gp-public-header] .btn-accent:disabled { background: var(--color-accent, #f97316); opacity: 0.6; cursor: default; box-shadow: none; }