/* Site header and footer — hand-authored, not ported from the design system's
   component library (Chrome.jsx there is inline-styled JSX spec, not classed
   CSS). Loaded after components.css/woo-bridge.css in the enqueue chain. */

/* ===== header ===== */

.bkc-header{position:sticky;top:0;z-index:30;background:var(--surface-panel);background-image:var(--grime-soot);border-bottom:var(--border-hair) solid var(--line-strong)}

.bkc-ticker{background:var(--soot-900);background-image:var(--grime-scanlines);color:var(--ash-300);padding:6px 0;overflow:hidden;white-space:nowrap}
.bkc-ticker__track{display:inline-block;font:var(--type-stencil);letter-spacing:var(--ls-widest);text-transform:uppercase;animation:bkc-marquee 34s var(--ease-linear) infinite}
@keyframes bkc-marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}

.bkc-header__bar{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page-lg);height:64px;display:flex;align-items:center;gap:var(--space-9)}

/* Wordmark + tagline as one clickable block — real prototype shows both
   lines sitewide in the header (repo/design/Bankrupt & Co Site.dc.html, line
   ~29), not just on the homepage hero. Corrected 2026-08-30 from a header
   that dropped the tagline entirely, following a stale 2026-08-28 decision
   the real prototype's arrival the next day superseded. */
.bkc-wordmark-block{display:flex;flex-direction:column;gap:3px;text-decoration:none;flex:0 0 auto;white-space:nowrap}
.bkc-wordmark{font:var(--fw-bold) 20px/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--text-strong)}
.bkc-wordmark__amp{color:var(--rust-500)}
.bkc-wordmark__tagline{font:var(--fw-semibold) 9px/1 var(--font-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.bkc-wordmark--inverse{display:inline-block;font-size:24px;color:var(--ash-050)}
.bkc-wordmark--inverse .bkc-wordmark__amp{color:var(--rust-400)}

/* Pushed flush right, immediately left of Cart — repo/design/Bankrupt & Co
   Site.dc.html's real header has margin-left:auto on the <nav> itself, not
   on the tools/cart block after it. Was on .bkc-header__tools instead
   (below) until 2026-09-04, which put a fixed gap after the logo and a big
   empty gap before Cart — the reverse of the source. */
.bkc-nav{display:flex;align-items:center;gap:var(--space-8);height:64px;margin-left:auto}

.bkc-nav__link,
.bkc-nav__trigger{display:inline-flex;align-items:center;gap:6px;padding:4px 0;background:none;border:0;cursor:pointer;font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;transition:var(--transition-control)}
.bkc-nav__link:hover,
.bkc-nav__trigger:hover{color:var(--text-strong)}
.bkc-nav__link.is-active,
.bkc-nav__trigger.is-active{color:var(--text-strong);border-bottom-color:var(--rust-500)}
.bkc-nav__caret{font-size:9px;color:var(--rust-500)}

/* Wrapper spans the full header height so the panel hangs off the header's
   bottom edge (top:100%) instead of overlapping it partway down. */
.bkc-nav__collections{position:relative;display:flex;align-items:center;height:100%}

.bkc-nav__panel{position:absolute;top:100%;left:0;min-width:250px;background:var(--surface-panel);border:var(--border-hair) solid var(--line-strong);box-shadow:0 12px 28px rgba(34,30,25,.28);display:flex;flex-direction:column;z-index:40}
.bkc-nav__panel[hidden]{display:none}
.bkc-nav__panel-item{padding:14px 16px;font:var(--type-body-sm);color:var(--text-strong);text-decoration:none;letter-spacing:.02em}
.bkc-nav__panel-item:hover{background:var(--surface-sunken);color:var(--rust-500)}

.bkc-header__tools{display:flex;align-items:center;gap:var(--space-4)}

/* Real prototype's cart control: soot-fill text button, "Cart (N)" — not an
   icon (corrected 2026-08-30, see inc/chrome.php for the markup-side note). */
.bkc-cart-link{display:inline-flex;align-items:center;height:36px;padding:0 var(--space-6);background:var(--soot-900);color:var(--surface-panel);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);text-decoration:none;font:var(--type-label);letter-spacing:var(--ls-wide);text-transform:uppercase}
.bkc-cart-count{margin-left:var(--space-3);color:var(--rust-400)}

@media (max-width: 860px){
	.bkc-header__bar{gap:var(--space-6);padding:0 var(--gutter-page)}
}

/* ===== footer ===== */

.bkc-footer{margin-top:var(--space-13);background:var(--surface-inverse);background-image:var(--grime-scanlines),var(--grime-vignette);color:var(--text-inverse);padding:var(--space-12) 0 var(--space-9)}
.bkc-footer__grid{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page-lg);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-10)}
.bkc-footer__tagline{font:var(--type-body-sm);color:var(--ash-400);margin-top:var(--space-5);max-width:34ch}
.bkc-footer__heading{font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--ash-300);margin-bottom:var(--space-5)}
.bkc-footer__col{display:flex;flex-direction:column}
.bkc-footer__link{color:var(--ash-300);text-decoration:none;font:var(--type-body-sm);margin-bottom:var(--space-3)}
.bkc-footer__link:hover{color:var(--ash-050);text-decoration:underline}
.bkc-footer__bottom{max-width:var(--container-max);margin:var(--space-10) auto 0;padding:var(--space-9) var(--gutter-page-lg) 0;border-top:var(--border-hair) solid var(--line-inverse);display:flex;justify-content:space-between;font:var(--type-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ash-500)}

@media (max-width: 640px){
	.bkc-footer__grid{grid-template-columns:1fr;gap:var(--space-9)}
	.bkc-footer__bottom{flex-direction:column;gap:var(--space-3)}
}

@media (prefers-reduced-motion: reduce){
	.bkc-ticker__track{animation:none}
}