/**
 * header-layout.css - Site Header Shell, Layout & Sticky Behavior
 *
 * Owns the structural responsibilities of the site header:
 *   - The 3-column grid that pins the logo flush-left and
 *     centers the nav in the viewport.
 *   - The flex bar that hosts nav + mobile toggle in cols 2-3.
 *   - The branding wrapper and the logo image sizing per
 *     breakpoint.
 *   - Sticky positioning, z-index stacking, and the
 *     scrolled-state shadow affordance toggled by main.js.
 *
 * Header chrome that is not structural lives elsewhere:
 *   - Top-level nav anchors, dropdown triggers, floating
 *     submenus, and the submenu CTA -> header-nav-desktop.css
 *   - Mobile drawer accordion treatment -> header-nav-mobile.css
 *   - Hamburger toggle button + .primary-nav drawer surface
 *     -> nav-toggle.css
 *
 * Loaded after components.css so it can rely on shared design
 * tokens without contending with mobile drawer rules.
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 * @updated 0.1.1 - At >=768px the .site-header__bar collapses
 *                  into just the middle (auto) column with
 *                  justify-self: center so the nav sits at
 *                  the viewport's horizontal midpoint instead
 *                  of centered within the right two-thirds
 *                  (the prior behavior, which read as a
 *                  slight rightward bias against the
 *                  flush-left logo).
 */


/* ==========================================================
   Site header shell

   Sticky to the viewport top so the brand mark and primary
   nav are always one click away. The blueprint background
   pattern is painted via header-blueprint.css on a ::before
   pseudo-element so this file stays focused on layout.

   z-index 100 keeps the bar above hero content. Submenus
   declare z-index 110 so they layer above their own header.
   ========================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Establish a stacking context so the blueprint ::before
       can sit at z-index 0 and content children can sit at
       z-index 1 without leaking outside the header. */
    isolation: isolate;
    /* No background-color here -- the painted blueprint owns
       the surface. The fallback color in header-blueprint.css
       handles the no-pattern degradation case. */
    transition: box-shadow var(--duration) var(--ease);
}

/* main.js toggles .is-scrolled when the page scrolls past
   the threshold. Add a soft drop shadow so the sticky bar
   visually detaches from the page content beneath it. */
.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
}


/* ==========================================================
   Header inner layout (3-column grid)

   col 1: logo (flush left)
   col 2: nav  (auto width, centered in viewport)
   col 3: spacer (mirrors col 1 width via 1fr/1fr)

   1fr / auto / 1fr produces a true viewport-centered nav.
   The mobile toggle lives in column 3 on small screens so it
   sits opposite the logo, with the nav drawer dropping below
   the bar via .primary-nav.is-open absolute positioning
   inherited from nav-toggle.css.

   z-index 1 lifts the inner content above the blueprint
   ::before pseudo (which sits at 0 in header-blueprint.css).
   ========================================================== */
.site-header__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-6);
    padding-block: 0;
    min-height: 0;
}

.site-header__bar {
    /* Bar occupies columns 2 + 3 of the grid: nav centers in
       column 2, mobile toggle aligns to the end of col 3.
       Nested flex keeps the toggle/nav alignment math
       independent of the outer grid. */
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    /* Right-edge gutter matches the site's container padding
       so the toggle/nav respects the same horizontal rhythm
       as page body content below. Left side stays at 0
       because the grid column already provides separation
       from the logo. */
    padding-inline-end: var(--container-pad);
}

/*
 * Desktop nav centering (>=768px).
 *
 * At mobile widths the bar must own columns 2-3 so the
 * hamburger toggle sits opposite the logo (on the right
 * edge of the viewport). At desktop the toggle is hidden
 * (nav-toggle.css forces display:none), so the bar can
 * collapse into the middle auto-sized column and center
 * itself geometrically within it. With the outer grid
 * 1fr / auto / 1fr, that puts the nav exactly at the
 * viewport's horizontal midpoint -- the right-side 1fr
 * column mirrors the left-side 1fr column that holds the
 * flush-left logo, so the nav is balanced against the
 * viewport rather than the bar's own width.
 *
 * Padding-inline-end is zeroed at desktop because the bar
 * no longer needs its own gutter -- the spare column to
 * the right of the nav handles that role.
 */
@media (min-width: 768px) {
    .site-header__bar {
        grid-column: 2;
        justify-self: center;
        padding-inline-end: 0;
    }
}


/* ==========================================================
   Site branding (flush-left logo at intrinsic aspect)

   The retrimmed source SVG renders at its natural aspect,
   so no clipping wrapper is needed. We size the IMAGE
   directly with a fixed height target per breakpoint and
   let width auto-compute from the intrinsic aspect.

   The wrapper is just a positioning anchor with no height
   of its own -- that lets the bar height contract or expand
   naturally with the image, and the grid in
   .site-header__inner stays vertically centered around it.

   Logo height per breakpoint:
     desktop : 120px (matches the ~180x115 design target)
     tablet  : 96px
     phone   : 72px
   ========================================================== */
.site-branding {
    /* No padding-inline-start: the design wants the logo flush
       to the viewport edge on every breakpoint. The right
       column's padding-inline-end provides the rest of the
       page gutter for the nav side. */
    padding-inline-start: 0;
    /* Grid column 1 alignment: pin the logo to the left edge
       of its column so the visual flush-left contract holds
       even if the column ever grows wider than the logo. */
    justify-self: start;
}

.lop-logo--header {
    display: inline-flex;
    align-items: center;
    /* No fixed height here -- the image's height drives the
       wrapper, which drives the bar. line-height:0 prevents
       inline-flex baseline shenanigans from adding phantom
       descender space below the image. */
    line-height: 0;
}

.lop-logo--header .lop-logo__image {
    /* Fixed height; width auto-computes from the SVG's
       intrinsic aspect ratio. max-width is a safety cap for
       extreme zoom levels -- at intrinsic ratio 1.567 a 120px
       height yields ~188px width, well under the 240px cap. */
    height: 120px;
    width: auto;
    max-width: 240px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Tablet: scale down. */
@media (max-width: 768px) {
    .lop-logo--header .lop-logo__image {
        height: 96px;
        max-width: 200px;
    }
}

/* Phone: tighter still. */
@media (max-width: 480px) {
    .lop-logo--header .lop-logo__image {
        height: 72px;
        max-width: 160px;
    }
}