/* TT-SHOP-REDO-08: styles for the shared slim header (partials/_site_header.html).
   Extracted so the standalone shop templates can load ONLY the header's CSS
   without pulling in base-theme.css's base-family layout rules (.body-wrap,
   .mainContentContainer, .site-content ...) which their own stylesheets own.
   Loaded by base.html AND the three shop templates.

   Two groups live here:
     1. .base-header* -- the band + its three slots (moved from base-theme.css).
     2. the action controls (cart / messages / account / auth buttons) -- moved
        from base.html's inline <style>. The header markup that carries them now
        renders on shop pages too, so their styling can't stay page-local. */

/* ── The band ──────────────────────────────────────────────────────────── */

/* TT-001-E: slim sticky header, one markup block at every viewport.
   Replaces the old fixed mobile header and the sidebar's header. Sits in
   normal flow before .body-wrap, so content starts below it naturally.
   The nav trigger is NOT a child -- it's a body-level fixed overlay
   (custom.css .site-nav-header-left, top:18px); the row's min-height is
   sized so that trigger (label ~16px + 2px gap + 34px button ~= 52px)
   sits vertically centered: 18px*2 + 52px = 88px. */
.base-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.base-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 24px;
}

/* TT-BLOG-REDO-01: logo is the new first child of .base-header-inner, before
   the trigger/breadcrumbs spacer. Was 2-child `justify-content: space-between`
   (spacer flush left, actions flush right) -- replaced with `margin-left: auto`
   on .base-header-actions below so a 3rd leading child (the logo) doesn't
   break the "actions pinned to the right edge" contract. No other base-family
   page had a 3rd child, so this is a safe generalization, not a behavior
   change for existing consumers. */
.base-header-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* The visible "underline" under the logo isn't text-decoration at all
       (that red herring was my first fix attempt) -- it's `blog.css`'s
       bare `a { border-bottom: dotted 1px; }`, which base.html loads
       SITEWIDE on every base-family page, not just blog pages. Found by
       walking document.styleSheets in a live page and matching rules
       against the element, after text-decoration:none alone visibly
       didn't fix it. Overridden here on this one component rather than
       touching the sitewide rule, which is out of scope and likely
       intentional elsewhere (e.g. inline prose links). */
    border-bottom: none;
    text-decoration: none;
}

.base-header-logo img {
    height: 56px;
    width: auto;
    display: block;
}

.base-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

/* ── The action controls (moved from base.html inline <style>) ──────────── */

/* Reusable subtle button style (similar to cart-button) */
.subtle-button {
    background: transparent;
    color: var(--shop-text-dark, #333);
    border: 1px solid var(--shop-border, #e0e0e0);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    /* TT-SHOP-REDO-08: pin the font to a SYSTEM stack. Unlike .button
       (Login/Sign Up), this bare-anchor "Logout" set no font-family and
       inherited the page body font -- Open Sans on blog, serif Spectral on
       shop -- so the SAME header rendered Logout in two different typefaces,
       failing this ticket's "identical banner" goal. A webfont pin can't be
       byte-identical here: the base-family webfonts (IBM Plex Sans / Open
       Sans / Heebo) are NOT loaded on shop pages, and step 6 forbids adding
       them to the shop fonts partial or the shop template heads. A system
       stack is present on both families, so both render the SAME glyphs with
       no webfont dependency -- the only CSS-only way to guarantee parity.
       (This is also why .button's Login/Sign Up boxes only *appear* to match
       across families: their 120px min-width masks the same fallback gap;
       Logout, with no min-width, exposed it.) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.subtle-button:hover {
    border-color: var(--shop-primary, var(--primary-color));
    color: var(--shop-primary, var(--primary-color));
    background: var(--shop-primary-light, rgba(12, 46, 126, 0.1));
    text-decoration: none;
}

/* Account icon button style */
.account-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--shop-border, #e0e0e0);
    background: transparent;
    color: var(--shop-text-gray, #666);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
}

.account-icon-button:hover {
    color: var(--shop-primary, var(--primary-color));
    border-color: var(--shop-primary, var(--primary-color));
    background: var(--shop-primary-light, rgba(12, 46, 126, 0.1));
    text-decoration: none;
}

.account-icon-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* TT-SHOP-REDO-08: blog.css's sitewide `a { border-bottom: dotted 1px }`
   (loaded on base-family pages, NOT on shop pages) leaks a stray dotted
   underline onto these two bare icon links -- the same artifact the
   .base-header-logo above already neutralizes. Killing it here keeps the
   shared header byte-identical on blog pages (blog.css present) and shop
   pages (blog.css absent), which is the point of this ticket. Scoped to the
   bare links only -- .account-icon-button / .subtle-button / .button carry
   their own full borders and must keep them. */
.cart-link,
.messages-link {
    border-bottom: none;
}

/* Cart link styling */
.cart-link {
    position: relative;
    padding: 0.5rem;
    color: var(--shop-text-dark, #333);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-link:hover {
    color: var(--shop-primary, var(--primary-color));
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #dc2626;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Messages icon styling — intentionally separate from cart */
.messages-link {
    position: relative;
    padding: 0.5rem;
    color: var(--shop-text-dark, #333);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-link:hover {
    color: var(--shop-primary, var(--primary-color));
}

.messages-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anonymous-user Login/Sign Up buttons in the slim base header.
   custom.css's generic mobile .button rule (max-width:640px) drops
   min-width to fit stacked full-width buttons elsewhere on the
   page, which here leaves "Sign Up" too little room at the default
   16px/0.75rem 1rem padding -- it wraps and overflows the header
   row. Smaller font + tighter padding here (signed-in users see
   icon buttons instead, so they're unaffected) keeps it to one
   line. */
@media (max-width: 768px) {
    .base-header-actions .button {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.65rem !important;
        white-space: nowrap !important;
    }
}