/* ==================================================
   REUSABLE COUNTY HEADER
   Paired with the _Header.cshtml partial. Combines:
     - sub-header teal nav tabs (formerly nav.css)
     - #headerSection branding layout (formerly Main.css)
     - responsive hamburger + offcanvas side nav (new)
   Shared brand color tokens (.bg-dark-blue, .bg-teal, ...) stay in site.css.
   ================================================== */

/* ===== Sub-header navigation tabs (teal band) =====
   Four links, light text on teal, fill on hover only. No dropdowns / no active
   state (they link out to richlandcountysc.gov, so none is ever "current"). */
.tax-navbar {
    max-width: 1100px; /* narrower bar, centered below */
    margin: 0 auto;
}

.tax-navtab {
    flex: 1 1 0; /* fill the (narrower) bar edge-to-edge */
    text-align: center;
    padding: 1rem 2rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

    .tax-navtab:hover,
    .tax-navtab:focus-visible {
        background-color: #D1EEFC;
        color: #193D6A;
    }

/* ===== Branding row: logo + name ===== */
/* Desktop - preserve original Richland County layout */
#headerSection.container {
    width: 40%;
    max-width: 41%;
    margin-left: calc((100% - 1122px) / 2 - 2rem);
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    font-family: "Hanken Grotesk", sans-serif;
}

#headerSection h2 {
    font-size: 2.3rem;
    font-weight: 790;
}

/* Logo */
#headerSection .county-logo {
    max-height: 99px;
    width: auto;
}

/* ===== Hamburger toggle (mobile only) ===== */
.nav-hamburger {
    display: none; /* shown < lg via media query below */
    background: transparent;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: .5rem;
    color: #fff;
    padding: .4rem .6rem;
    line-height: 1;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
}

    .nav-hamburger i {
        font-size: 1.5rem;
        line-height: 1;
    }

/* ===== Offcanvas side nav (mobile) ===== */
.county-offcanvas .offcanvas-header {
    background: #193D6A; /* navy to match header */
    color: #fff;
}

.county-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* white close on navy */
}

.county-offcanvas .offcanvas-body {
    padding: 0;
}

.offcanvas-navlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    color: #193D6A;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
    min-height: 48px; /* WCAG 2.5.8 touch target */
}

    .offcanvas-navlink:hover,
    .offcanvas-navlink:focus-visible {
        background-color: #277DA3; /* #D1EEFC;*/
        color: white; /*#193D6A;*/
    }

    .offcanvas-navlink .bi-chevron-right {
        font-size: .9rem;
        opacity: .6;
    }

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

/* ===== Touch-tablet / smart-display support =====
   The mobile header tier is keyed to (max-width: 991.98px), which already
   covers the iPad mini (768px wide). Three additional target devices sit
   above that cutoff but should get the same treatment:
       iPad Pro       1024 x 1366
       Nest Hub Max   1024 x  600
       Nest Hub Pro   1280 x  800
   Width alone can't distinguish these from a 1024/1280-wide laptop, so the
   mobile tier is extended with a second, comma-separated (OR) condition:
       (max-width: 1280px) and (pointer: coarse)
   `pointer: coarse` matches touch-primary devices, so the three displays
   above opt in while mouse-driven laptops of the same width keep the desktop
   layout. Correspondingly, the 992–1199.98px tablet block is narrowed with
   `(pointer: fine)` so it no longer competes on those touch devices — it sits
   after the mobile block in source order and would otherwise win the
   #headerSection.container width/margin at 1024px and above.
   Note: 1280px is the cap, so a 1366px-wide touch device is NOT included.
   ================================================== */

/* Desktop (>= lg): teal tab bar visible, hamburger hidden.
   These are the defaults; explicit for clarity. */
@media (min-width: 992px) {
    .nav-hamburger {
        display: none;
    }

    .teal-navbar {
        display: block;
    }
}

/* Mobile / small (< lg): hide the teal tab bar, show the hamburger.
   Links collapse into the offcanvas. Branding row mirrors the county
   mobile reference: [logo + name] .... [hamburger] on line 1, then the
   cart pill wraps to its own full-width row beneath (where search sits
   in the reference). Achieved with flex-wrap + order so no DOM move is
   needed — the cart keeps its markup position. */
@media (max-width: 991.98px), (max-width: 1280px) and (pointer: coarse) {
    .teal-navbar {
        display: none !important;
    }

    .nav-hamburger {
        display: inline-flex;
    }

    .branding-row {
        flex-wrap: wrap;
    }

    /* Line 1 order: logo/name (grow) then hamburger */
    #headerSection.container {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        flex: 1 1 auto;
        order: 1;
    }

    .nav-hamburger {
        order: 2;
    }

    /* Line 2: cart pill spans full width beneath */
    .cart-wrapper {
        order: 3;
        flex: 1 1 100%;
        margin-top: .75rem;
    }
}

/* ===== Existing #headerSection responsive type/logo scaling =====
   NOTE: scoped with min-width so it only affects the tablet/small-desktop
   band (992px–1199.98px). Previously this had no min-width, so it also
   matched phone widths and — since it appears after the mobile reset
   block above with equal selector specificity — re-applied width:55%/
   margin-left:12% on phones, undoing the flush-left mobile layout.
   Also gated on (pointer: fine) so touch tablets / smart displays in this
   width band fall through to the mobile tier instead. */
@media (min-width: 992px) and (max-width: 1199.98px) and (pointer: fine) {
    #headerSection.container {
        width: 55%;
        max-width: 55%;
        margin-left: 12%;
    }

    #headerSection .county-logo {
        max-height: 90px;
    }

    #headerSection h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 991.98px), (max-width: 1280px) and (pointer: coarse) {
    /* width/offset already reset above for the flex row; keep type/logo scaling */
    #headerSection .county-logo {
        max-height: 80px;
    }

    /* Branding type, ported from the county reference (rc-header__t).
       !important is required because the markup carries Bootstrap utility
       classes (.fw-bold on the h2, .fs-5 .fw-semibold on the span) and
       Bootstrap emits those utilities with !important — so plain ID-selector
       rules lose to them regardless of specificity. Sizes are fixed across
       all mobile widths (the reference does the same); only the logo scales
       down at the narrower breakpoints below. */
    #headerSection h2 {
        font-size: 1.5rem;
        font-weight: 800 !important;
        letter-spacing: -0.01em;
        margin-bottom: 0;
    }

    #headerSection .fs-5 {
        font-size: .875rem !important;
        font-weight: 400 !important;
        color: #c8d8ec; /* soft blue-gray: lets the subtitle recede */
        display: block;
        margin-top: 2px;
    }
}

@media (max-width: 767.98px) {
    #headerSection .d-flex {
        gap: .75rem !important;
    }

    #headerSection .county-logo {
        max-height: 65px;
    }
}

@media (max-width: 480px) {
    #headerSection .county-logo {
        max-height: 55px;
    }
}

/* Respect reduced-motion for tab hover transitions. */
@media (prefers-reduced-motion: reduce) {
    .tax-navtab {
        transition: none;
    }
}