/* components/header.css
   Ticker bar and the sticky header.
   Rewind Club - loaded in order by functions.php. */

.rc-ticker{
  background:var(--mulberry); color:var(--mulberry-ink);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; overflow:hidden; white-space:nowrap;
}

.rc-ticker__track{display:inline-block; padding:9px 0; animation:rc-slide 34s linear infinite; will-change:transform}
/* Before JS folds them into the marquee (and if JS never runs), the editable
   paragraphs still read as one tidy strip rather than a stack. */
.rc-ticker > .rc-ticker__item{display:inline-block; margin:0; padding:9px 26px 9px 0; font-size:inherit; letter-spacing:inherit}

.rc-ticker > .rc-ticker__item:first-child{padding-left:26px}

.rc-ticker span{padding:0 26px}

@keyframes rc-slide{from{transform:translateX(0)}

to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){.rc-ticker__track{animation:none; padding-left:24px}}

/* The ticker and the bar move as one unit, so they hide and return together.
   Sticky rather than fixed: it stays in the flow, so nothing underneath needs
   a compensating offset that would drift out of sync when the ticker collapses. */
.rc-top{
  position:sticky; top:0; z-index:900;
  transition:transform .35s ease;
}

/* Scrolling down gets out of the way… */
.rc-top.is-hidden{transform:translateY(calc(-100% - 4px))}

/* …scrolling up brings back a trimmed-down version: no ticker, less padding.
   Reaching the top animates it back to full size. */
.rc-top.is-compact .rc-ticker{
  max-height:0; opacity:0; padding:0;
  transition:max-height .3s ease, opacity .2s ease;
}

.rc-top.is-compact .rc-bar{padding-block:7px}

.rc-top.is-compact .rc-header{box-shadow:0 6px 18px -14px var(--shadow)}

.rc-ticker{
  max-height:60px; opacity:1;
  transition:max-height .35s ease, opacity .25s ease .05s;
}

.rc-header{
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(9px);
  border-bottom:1.5px solid var(--line-soft);
}

/* The header always sticks to the very top, admin bar or not. The admin bar
   itself hides until hovered (see functions/acf-hover.php). */
.admin-bar .rc-top{top:0}

.rc-bar{display:flex; align-items:center; gap:26px; padding:14px 0; transition:padding .35s ease}

.wordmark{display:flex; align-items:center; gap:10px; font-size:23px; font-weight:800; letter-spacing:-.03em; text-decoration:none; color:var(--ink); flex:0 0 auto}

.wordmark:hover{color:var(--ink)}

.wordmark .tape{width:38px; height:25px; flex:0 0 auto}

.wordmark--logo{display:flex; align-items:center}

.rc-bar .custom-logo-link{display:block; line-height:0; flex:0 0 auto}
/* Capped by height, not width, so any aspect ratio behaves. The :where()
   keeps specificity at zero so a Site Logo width set in the editor still wins
   if you'd rather size it there. */
.rc-bar .custom-logo,
.wordmark img{
  max-height:var(--logo-height); width:auto; height:auto; max-width:280px; object-fit:contain;
}

.rc-nav{margin-left:auto}

.rc-nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap}

.rc-nav a{font-size:15px; font-weight:500; text-decoration:none; padding:8px 13px; border-radius:999px; color:var(--ink-2); display:block}

.rc-nav a:hover{background:var(--paper-2); color:var(--ink)}

.rc-nav li.current-menu-item>a,
.rc-nav li.current_page_item>a,
.rc-nav li.current-menu-ancestor>a{background:var(--ink); color:var(--paper)}

.rc-cart{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font:700 14px/1 var(--font-body); padding:11px 15px; border-radius:999px; text-decoration:none;
}

.rc-cart:hover{background:var(--butter); border-color:var(--butter); color:#33291F}

.rc-cart .n{font-family:var(--font-mono); font-size:12px}

.rc-burger{display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; color:var(--ink); line-height:0}

/* Breakpoints for the header live in utilities/responsive.css. */



/* Close button inside the mobile drawer. Hidden on desktop, where the nav is
   just a row of links. */
.rc-nav__close{
  display:none; position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink);
  font-size:26px; line-height:1; cursor:pointer;
}

.rc-nav__close:hover{background:var(--paper-2)}

/* Backdrop behind the drawer. Created by site.js so the markup stays clean. */
.rc-nav-overlay{
  position:fixed; inset:0; z-index:940;
  background:rgba(51,41,31,.42);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}

.rc-nav-overlay.is-visible{opacity:1; pointer-events:auto}

/* Stop the page scrolling behind an open drawer. */
body.rc-menu-open{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .rc-top,.rc-bar,.rc-ticker,.rc-nav,.rc-nav-overlay{transition:none}
}