/* ============================================================================
   Rebrand 2026 — "The Counter" public marketing system.
   ALL rules scoped to body.rebrand so admin/portal pages (which share base.html
   + style.css) are untouched. Loaded AFTER style.css. Tokens live in style.css
   :root (+ html[data-season="summer"] overrides).
   Shared vocabulary for page partials: .btn/.btn-primary/.btn-ghost, .eyebrow,
   .mono, .board (+ #board-clock/#board-status/#board-status-text/#board-detail/
   #board-hours), .ticker/.ticker-in, .sun, .pg-hero/.pg-title/.pg-eyebrow/.pg-sub.
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────── */
body.rebrand{
  font-family:var(--display); background-color:var(--page-bg); color:var(--ink);
  line-height:1.6; text-align:left; -webkit-font-smoothing:antialiased;
  letter-spacing:normal;
  background-image:repeating-linear-gradient(90deg, rgba(33,28,21,.014) 0 2px, transparent 2px 26px);
  transition:background-color .4s ease;
}
body.rebrand main{display:block}
/* Kill the legacy dark WebGL shader + its glow on rebrand pages (loaded globally in base.html). */
body.rebrand .shader-canvas{display:none !important}
body.rebrand ::selection{background:var(--accent-solid);color:var(--ink)}
body.rebrand a{color:inherit;text-decoration:none}
body.rebrand :focus-visible{outline:2.5px solid var(--stamp);outline-offset:3px}
body.rebrand .mono{font-family:var(--mono)}
body.rebrand .eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* Summer sun glow (opacity from --sun-op token; 0 on base, 1 in summer) */
body.rebrand .sun{
  position:fixed;top:-120px;right:-80px;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:var(--sun-op);transition:opacity .5s ease;
  background:radial-gradient(circle, rgba(255,181,0,.5), rgba(232,114,47,.22) 45%, transparent 70%);
}

/* ── Buttons (shared) ─────────────────────────────────────────────────── */
body.rebrand .btn,
body.rebrand .btn-primary,
body.rebrand .btn-ghost,
body.rebrand .btn-outline{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.85rem 1.3rem;border-radius:4px;border:1.5px solid var(--ink);cursor:pointer;
  transition:transform .12s, box-shadow .12s; text-decoration:none;
}
body.rebrand .btn svg,
body.rebrand .btn-primary svg,
body.rebrand .btn-ghost svg,
body.rebrand .btn-outline svg{width:16px;height:16px}
body.rebrand .btn-primary{background:var(--accent-solid);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
body.rebrand .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
body.rebrand .btn-ghost,
body.rebrand .btn-outline{background:transparent;color:var(--ink);box-shadow:3px 3px 0 transparent}
body.rebrand .btn-ghost:hover,
body.rebrand .btn-outline:hover{background:var(--kraft-2);box-shadow:3px 3px 0 var(--hair)}
html[data-season="summer"] body.rebrand .btn-primary{background:linear-gradient(120deg,#F79A2E,#E85C7B)}

/* ── Navbar (skin the existing .navbar-outer/.navbar-pill markup) ─────── */
body.rebrand .navbar-outer{
  position:sticky;top:0;z-index:200;width:100%;display:block;padding:0;pointer-events:auto;
  background:color-mix(in srgb, var(--page-bg) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
body.rebrand .navbar-pill{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:1120px;margin:0 auto;width:100%;
  background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;padding:.75rem 1.5rem;pointer-events:auto;
}
body.rebrand .navbar-pill.scrolled{box-shadow:0 1px 0 var(--hair)}
body.rebrand .brand{
  font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);
}
body.rebrand .nav-links{display:flex;align-items:center;gap:1.5rem}
body.rebrand .nav-links a{
  font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .18s;
}
body.rebrand .nav-links a:hover{color:var(--ink)}
body.rebrand .nav-right{display:flex;align-items:center;gap:.75rem}
body.rebrand .nav-cta{
  font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;background:var(--accent-solid);color:var(--ink);
  padding:.6rem 1.05rem;border-radius:4px;border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s, box-shadow .12s;
}
body.rebrand .nav-cta:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
/* .hamburger bars visible on kraft — keep base #hamburger/#navOverlay JS behavior */
body.rebrand .hamburger span{background:var(--ink)}
/* Mobile overlay skin */
body.rebrand .nav-overlay{background:var(--page-bg)}
body.rebrand .overlay-link{font-family:var(--display);text-transform:uppercase;color:var(--ink)}
body.rebrand .overlay-cta{background:var(--accent-solid);color:var(--ink);border:1.5px solid var(--ink);border-radius:4px}
body.rebrand .nav-overlay-close{color:var(--ink)}

/* ── Footer (skin the existing .site-footer markup) ───────────────────── */
body.rebrand .site-footer{
  background:var(--brown);color:var(--kraft);border-top:1px solid #000;text-align:left;
  padding:3rem 1.5rem 2rem;
}
body.rebrand .footer-grid{max-width:1120px;margin:0 auto;gap:2rem}
body.rebrand .footer-section h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--board-amber);margin-bottom:1rem;
}
body.rebrand .footer-section a,
body.rebrand .footer-section p,
body.rebrand .footer-section li{color:rgba(237,230,216,.8)}
body.rebrand .footer-section a:hover{color:var(--board-amber)}
body.rebrand .hours-list li{font-family:var(--mono);font-size:.8rem;border-bottom:1px solid rgba(237,230,216,.12)}
body.rebrand .footer-bottom{
  max-width:1120px;margin:2rem auto 0;padding-top:1.3rem;border-top:1px solid rgba(237,230,216,.14);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:rgba(237,230,216,.55);text-align:left;
}

/* ── Live Store Board module (shared; used by landing) ────────────────── */
body.rebrand .board{
  background-color:var(--board-bg);color:var(--board-text);padding:1.5rem;display:flex;
  flex-direction:column;gap:1rem;position:relative;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}
body.rebrand .board-h{
  display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--board-muted);
}
body.rebrand .board-clock{color:var(--board-amber);font-weight:700}
body.rebrand .board-status{
  display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-weight:700;
  font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;
}
body.rebrand .board-status .dot{
  width:11px;height:11px;border-radius:50%;background:var(--board-green);
  box-shadow:0 0 0 4px rgba(67,196,121,.18);animation:rb-blink 1.6s ease-in-out infinite;
}
body.rebrand .board-status.closed{color:var(--board-red)}
body.rebrand .board-status.closed .dot{background:var(--board-red);box-shadow:0 0 0 4px rgba(238,110,75,.18)}
@keyframes rb-blink{50%{opacity:.35}}
body.rebrand .board-detail{font-family:var(--mono);font-size:.78rem;color:var(--board-muted)}
body.rebrand .board-detail b{color:var(--board-text)}
body.rebrand .board-serving{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--board-muted)}
body.rebrand .board-serving b{color:var(--board-amber)}
body.rebrand .board-rows{border-top:1px solid rgba(255,255,255,.1);margin-top:.2rem}
body.rebrand .board-rows div{
  display:flex;justify-content:space-between;font-family:var(--mono);font-size:.78rem;
  padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--board-muted);
}
body.rebrand .board-rows div.today{color:var(--board-amber)}

/* ── Ticker (shared) ──────────────────────────────────────────────────── */
body.rebrand .ticker{
  background:var(--brown);color:var(--kraft);border-top:1px solid #000;border-bottom:1px solid #000;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7rem 0;white-space:nowrap;overflow:hidden;position:relative;z-index:1;
}
body.rebrand .ticker-in{display:inline-flex;gap:2.4rem;padding-left:100%;animation:rb-scroll 26s linear infinite}
body.rebrand .ticker-in span{color:rgba(237,230,216,.72)}
body.rebrand .ticker-in b{color:var(--board-amber)}
@keyframes rb-scroll{to{transform:translateX(-100%)}}

/* ── Shared page hero (used by services/contact/upload) ───────────────── */
body.rebrand .pg-hero{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:3.5rem 1.5rem 1rem;text-align:left;background:none}
body.rebrand .pg-hero-inner{max-width:none;text-align:left}
body.rebrand .pg-eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);
}
body.rebrand .pg-title{
  font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,6vw,4rem);
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:.6rem 0;
}
body.rebrand .pg-sub{font-size:clamp(1rem,1.5vw,1.15rem);max-width:52ch;color:#3B342A}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  body.rebrand .ticker-in{animation:none;padding-left:0;justify-content:center;flex-wrap:wrap}
  body.rebrand .board-status .dot{animation:none}
}

/* ── Shared responsive (nav/footer) ───────────────────────────────────── */
@media(max-width:880px){
  body.rebrand .nav-links{display:none}
}
@media(max-width:768px){
  body.rebrand .footer-grid{grid-template-columns:1fr;gap:1.5rem}
}