/**
* header.css
*
* Top bar, header inner (logo/search/account/cart), and the mega-menu.
* Ported directly from the approved review mockups — verified identical
* mega-menu CSS across all 7 mockup files via hash comparison during the
* mockup phase, so this is the single, confirmed-consistent design.
*/
/* ---------------- Top bar ---------------- */
.topbar {
background: #111;
color: #fff;
font-size: 12.5px;
}
.topbar .wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 24px;
flex-wrap: wrap;
gap: 6px;
}
.topbar .wrap span:last-child {
text-align: right;
}
.topbar a {
color: #fff;
}
.topbar a:hover {
color: #ccc;
}
/* ---------------- Header ---------------- */
.site-header {
border-bottom: 2px solid var(--ink);
position: sticky;
top: 0;
background: #fff;
z-index: 60;
/* Fixes the whitespace-after-scroll bug: browsers' scroll-anchoring
* feature (Chrome/Firefox) can insert compensating space near a
* `position: sticky` element after the user scrolls down and back
* up, to avoid a perceived content jump. Nothing here actually needs
* that compensation, so opt this element out of it entirely. */
overflow-anchor: none;
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
/* Longhand-equivalent 2-value form kept explicit (2026-09-07 fix) —
* the old `padding: 16px 0` zeroed left/right, silently overriding
* .wrap's `padding: 0 24px` horizontal gutter (base.css) since this
* rule loads after base.css and wins by cascade order. That pushed
* the logo flush to the true left edge and the search/account/cart
* icons flush to the true right edge, instead of matching the 24px
* inset every other row (topbar, nav, page content) uses. */
padding: 16px 24px;
}
.site-title {
margin: 0;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 800;
}
/*
* Desktop size for an uploaded Custom Logo image (2026-09-16 — see
* class-theme-setup.php's add_theme_support('custom-logo') comment for
* why this didn't exist/do anything until now). 40px tall matches the
* header's existing visual scale (.header-search input renders ~36-40px
* tall). width:auto keeps whatever aspect ratio the uploaded image has —
* flex-width/flex-height in add_theme_support means it isn't force-
* cropped to any fixed shape. The ≤600px mobile override already
* existed below at 30px tall.
*/
.custom-logo {
max-height: 40px;
width: auto;
}
.header-search {
flex: 1;
max-width: 368px; /* was 460px — reduced ~20% per 2026-09-06 request */
}
.header-search form {
display: flex;
border: 1px solid #111;
}
.header-search input {
flex: 1;
border: 0;
padding: 10px 12px;
outline: none;
font-size: 14px;
}
.header-search button {
background: #111;
color: #fff;
border: 0;
padding: 0 16px;
}
.header-actions {
display: flex;
gap: 20px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/*
* Root cause of the View Cart/Checkout invisible-text bug (2026-09-03
* fix) — this was a plain DESCENDANT selector, so it matched every
* anywhere inside .header-actions, not just the two icon links it was
* written for (My Account, and the cart icon itself). .cart-dropdown
* lives inside .cart-nav-item purely so its `position: absolute` has
* .cart-nav-item's `position: relative` to anchor to — but that nesting
* also put the View Cart/Checkout buttons 3 levels
* deep inside .header-actions, so this rule's `color: var(--ink)`
* (#111) was silently reaching them too.
*
* Specificity is exactly why it only broke Checkout and not View Cart:
* `.header-actions a` (1 class + 1 element = 0,1,1) outranks the plain
* `.btn` class (0,1,0) at rest, but loses to `.btn:hover`/
* `.btn-outline:hover` (1 class + 1 pseudo-class = 0,2,0) on hover.
* View Cart carries .btn-outline too, whose own resting color (#111)
* happens to match var(--ink) anyway, so it looked fine by coincidence.
* Checkout is plain .btn, whose resting color is white — that's what
* var(--ink) was quietly overriding to #111, producing #111 text on a
* #111 background at rest (fixed the instant you hover, since the
* higher-specificity hover rule takes over — matches exactly what was
* reported: broken at rest, correct on hover, correct on View Cart).
*
* Fix: scope this rule to the two elements it actually means —
* .header-actions's own direct-child (My Account) and
* .cart-nav-item's direct-child (the cart icon) — via child
* combinators, so it can never again reach anything nested inside
* .cart-dropdown, present or future. This is the root-cause fix, not a
* band-aid override: no new rule outranks .btn/.btn-outline's own
* :hover rules, so this can't reintroduce the "color pinned regardless
* of hover" bug that testing-round item 20 already fixed once.
*/
.header-actions > a,
.header-actions > .cart-nav-item > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
position: relative;
color: var(--ink);
}
.header-actions svg {
width: 20px;
height: 20px;
}
.cart-count {
position: absolute;
top: -6px;
right: -12px;
background: #111;
color: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/*
* ---------------- Mobile nav toggle / off-canvas drawer ----------------
* Mobile-audit "Header" pass (2026-09-15). Base rules below just keep
* these elements out of the desktop layout entirely (`display: none`);
* all real sizing/position/animation lives in the 600px media query at
* the bottom of this file, matching this theme's existing 900/600
* breakpoint convention. #mainNav itself (the drawer surface) is
* template-parts/header/mega-menu.php's own