/* ============================================================
   Shared public-site rules — Pete's Clam Stop.

   Companion to assets/cta-bar.css, loaded by all four public pages
   (index.html, menu.html, events.html, fun-guide.html). Same contract as
   that file: design tokens (--accent-sun, --ink, --cream, --line,
   --font-display) are declared in each page's own :root block and only
   CONSUMED here, so this file cannot drift the palette.

   What lives here
   ---------------
   Rules that must be identical on all four pages and had already drifted
   apart when each page kept its own copy. Today that is the season banner
   and the off-season state that assets/site-info.js switches on.

   Why the season banner is here and not in each page's inline <style>
   -------------------------------------------------------------------
   The banner is published from the staff portal (Site Info -> publish), so
   its appearance now changes at runtime rather than at author time. Four
   inline copies of the styling would mean four places to keep in sync with
   one JS file — exactly the arrangement that left fun-guide.html with a
   .banner-addr rule the other three pages never got.
   ============================================================ */

/* ------------------------------------------------------------
   SEASON BANNER — shared bits only.

   Each page still owns the banner's base geometry in its own <style>
   (position, height, --banner-h, gradient), because those interact with
   that page's own header offsets. This file adds only what has to be
   common: the address that collapses on narrow phones, and the off-season
   repaint.
   ------------------------------------------------------------ */

/* The address is the first thing to go when the banner cannot fit on one
   line. fun-guide.html has done this since launch; the other three pages
   used a text-overflow ellipsis instead, which truncated mid-word. */
@media (max-width: 460px) {
  .season-banner .banner-addr { display: none; }
  .season-banner { letter-spacing: 1px; }
}

/* ------------------------------------------------------------
   OFF-SEASON STATE.

   assets/site-info.js sets data-season="closed" on <html> when the staff
   portal has published the shop as closed for the winter. Everything below
   keys off that single attribute, so the page has exactly one source of
   truth for "are we open" and no element can disagree with another.

   The palette does NOT change: this is the same navy --ink already used by
   the header and the .mcb-call button. Off-season is a calmer version of
   the same site, not a different one.
   ------------------------------------------------------------ */
:root[data-season="closed"] .season-banner {
  background: var(--ink);
  color: var(--cream);
}

/* The pulsing dot reads as "we are open right now". Off-season it becomes a
   steady, dimmer marker — still a visual anchor, no longer a liveness claim. */
:root[data-season="closed"] .season-banner-dot {
  animation: none;
  background: var(--cream);
  opacity: 0.55;
  box-shadow: none;
}

/* Hours are meaningless while the shop is shut. site-info.js empties the
   grid and shows the note instead; this hides the leftover label so the
   block does not render as an empty "Season Hours" heading. */
:root[data-season="closed"] .hours-grid:empty { display: none; }

/* ------------------------------------------------------------
   STICKY BAR, OFF-SEASON.

   The bar's primary orange button sends people into the tap-to-order flow.
   Off-season that is the worst button on the page: it invites an order from
   a window that is boarded up for the winter. So Order is withdrawn and the
   Menu button takes its slot — still useful (people plan next summer's trip
   from that page) and honest.

   .mcb-menu ships hidden in the markup rather than being injected by JS, so
   the swap is one attribute flip with no flash of the wrong button. Call and
   Directions stay: the phone still gets answered, and Directions is what a
   visitor standing on Surf Avenue in October actually wants.

   The grid switches from three fixed columns to auto-flow so it distributes
   whatever is visible — three buttons on index/events/fun-guide, two on
   menu.html, which has no Menu button because a self-link is not a CTA.
   ------------------------------------------------------------ */
.mcb-menu { display: none; }

:root[data-season="closed"] .mobile-cta-bar {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
:root[data-season="closed"] .mcb-order { display: none; }

/* The 900px guard matches the media query in assets/cta-bar.css that makes
   the bar visible at all — without it, .mcb-menu would become a stray inline
   element on desktop, where the whole bar is display:none. */
@media (max-width: 900px) {
  :root[data-season="closed"] .mcb-menu {
    display: inline-flex;
    background: var(--accent-sun);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(255, 90, 0, 0.6);
  }
}

/* ------------------------------------------------------------
   HOURS NOTE — the staff-editable line under the hours grid.
   Hidden via the [hidden] attribute until site-info.js has something to
   put in it, so a page with no note published shows no empty space.
   ------------------------------------------------------------ */
.loc-hours-note {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.85;
}
.loc-hours-note[hidden] { display: none; }

/* NOTE — deliberately NO global `img[width][height] { height: auto }` here.
   The width/height attributes added to the marquee and card images in this
   pass exist to reserve layout space, but a blanket rule for them would have
   a specificity of (0,2,1) and would beat each page's own
   `.vibe-item img { height: 120px; object-fit: cover }` — silently breaking
   the very layouts the attributes were added to stabilise. Pages that need
   `height: auto` already declare it against their own selectors. */
