/* =====================================================================
   Springer's website — layout & components.

   Everything here is site structure. Brand tokens/type live in
   brand.css and are not redefined — this file only consumes them, so a
   palette change in the style guide moves the whole site.

   Written mobile-first: base rules are the phone layout, media queries
   add the wider ones. The Claude Design draft was desktop-only (fixed
   3-column grids, a 7-item horizontal nav), so the phone behaviour is
   new work rather than a translation.
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Keyboard focus must stay visible on both grounds — the navy header and
   the cream body. A single outline colour fails on one of them. */
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 2px; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--cream); }
main { flex: 1; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--sp-4); width: 100%; }
.wrap--narrow { max-width: 860px; }
@media (min-width: 700px) { .wrap { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-7); }
@media (min-width: 700px) { .section { padding-block: var(--sp-8); } }
.section--navy  { background: var(--navy); color: var(--white); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); border-top: 1px solid var(--rule); }
.section--green { background: var(--green-100); border-top: 4px solid var(--green); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: var(--navy-100); }

/* The candy-stripe rule under the header and above the footer. */
.stripe {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 36px, var(--white) 36px 72px);
}

/* Skip link — the flavor page is long and keyboard users shouldn't have to
   tab the whole nav on every page. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--navy); font-weight: 700;
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ───────── Header ───────── */
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-md); }
.site-header__bar {
  max-width: 1200px; margin: 0 auto; padding: 12px var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-5);
}
@media (min-width: 700px) { .site-header__bar { padding: 14px var(--sp-6); } }

.site-header__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-header__logo img { height: 32px; display: block; width: auto; }
@media (min-width: 700px) { .site-header__logo img { height: 42px; } }

.nav { display: none; gap: var(--sp-5); margin-left: auto; align-items: center; }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a {
  color: var(--white); text-decoration: none; font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: .04em; white-space: nowrap;
  padding-block: 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--pink); }
/* Scoped off .btn — the CTA is already a pink pill, so recolouring its text
   pink made the label invisible on its own page. It gets a ring instead. */
.nav a:not(.btn)[aria-current="page"] { color: var(--pink); border-bottom-color: var(--pink); }
.nav a.btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--white); }

/* Mobile drawer toggle. A plain checkbox-free JS toggle so the button can
   carry aria-expanded, which a checkbox hack cannot. */
.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  background: transparent; color: var(--white); border: 2px solid var(--cornflower);
  border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -5px; } .nav-toggle__bars::after { top: 5px; }

.mobile-nav { display: none; background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.12); }
.mobile-nav.is-open { display: block; }
@media (min-width: 1000px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav a {
  display: block; color: var(--white); text-decoration: none; font-weight: 700;
  padding: 14px var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav a:not(.btn)[aria-current="page"] { color: var(--pink); }
.mobile-nav a.btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--white); }
.mobile-nav .btn { margin: var(--sp-4); display: block; text-align: center; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-pill); padding: 11px 22px; border: 2px solid transparent;
  line-height: 1.2; transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--lg { font-size: var(--fs-md); padding: 14px 30px; }
.btn--pink { background: var(--pink); color: var(--navy); }
.btn--pink:hover { background: var(--pink-100); color: var(--navy); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-900); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: var(--cornflower); }
.btn--ghost-light:hover { border-color: var(--pink); color: var(--white); }
.btn--ghost-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost-navy:hover { background: var(--navy-100); color: var(--navy); }
.btn--block { display: block; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ───────── Hero ───────── */
.hero { background: var(--navy); color: var(--white); }
.hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center;
  padding-block: var(--sp-7);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.2fr .8fr; gap: var(--sp-7); padding-block: var(--sp-9); }
}
.hero__script { font-family: var(--font-script); font-size: var(--fs-h2); color: var(--pink); line-height: 1; }
.hero h1 {
  font-size: var(--fs-h1); color: var(--white); margin: var(--sp-4) 0 var(--sp-5);
  display: block; border: none; padding: 0;
}
.hero h1 .underline { border-bottom: 3px solid var(--pink); padding-bottom: 6px; }
.hero__lede { color: var(--navy-100); font-size: var(--fs-lg); max-width: 48ch; margin: 0 0 var(--sp-6); }
.hero__art { display: none; justify-content: center; }
@media (min-width: 900px) { .hero__art { display: flex; } }
.hero__art img { max-width: 300px; width: 100%; }
/* The design's pink cone glyph shadow — a flat offset in cornflower. */
.hero .btn--pink { box-shadow: 4px 4px 0 var(--cornflower); }

/* ───────── Cards ───────── */
.card {
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
@media (min-width: 700px) { .card { padding: var(--sp-6); } }
.card--top-green { border-top: 4px solid var(--green); }
.card--top-pink  { border-top: 4px solid var(--pink); }
.card--top-corn  { border-top: 4px solid var(--cornflower); }
.card--navy { background: var(--navy); color: var(--white); box-shadow: var(--shadow-md); }
.card--navy h2, .card--navy h3 { color: var(--white); }
.card__rule { height: 3px; background: var(--pink); width: 56px; margin-bottom: var(--sp-5); }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--gap-lg { gap: var(--sp-5); }

.split { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
@media (min-width: 900px) { .split--wide-first { grid-template-columns: 1.15fr .85fr; } }
.split--center { align-items: center; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.section-head h2 { margin: 0; }

/* ───────── Live-feed badge ───────── */
.feed-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid var(--cornflower);
  border-radius: var(--r-pill); padding: 6px 16px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tr-label); color: var(--green);
}
.feed-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.feed-badge--offline { color: var(--cornflower); }
.feed-badge--offline .feed-badge__dot { background: var(--cornflower); }
/* On cream grounds the translucent white fill disappears. */
.feed-badge--on-cream { background: var(--white); border-color: var(--rule-strong); color: var(--navy); }

/* ───────── Announcements strip (the cards the counter TVs rotate) ─────────
   Sits between the navy hero and the navy board, so it is cream with the
   pink accent the TV announcement card uses for its frame — same two brand
   roles, no new colors. Tightened padding: this is a strip, not a section,
   and on the days it is absent nothing should look like it is missing.
   home.js removes the section entirely when there is nothing on air. */
.announce { background: var(--cream); padding-block: var(--sp-5); }
@media (min-width: 700px) { .announce { padding-block: var(--sp-6); } }
.announce__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.announce__item {
  background: var(--white); border-left: var(--bw-accent) solid var(--pink);
  border-radius: 0 var(--r-md) var(--r-md) 0; box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4);
  /* Long words (a URL someone typed into a notice) wrap instead of forcing
     the page sideways — the site holds no horizontal scroll at 375px. */
  overflow-wrap: anywhere;
}
.announce__title {
  display: block; font-family: var(--font-display); font-style: italic;
  font-weight: 700; color: var(--navy); font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.announce__body {
  display: block; color: var(--fg); font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.announce__title + .announce__body { margin-top: var(--sp-1); }

/* ───────── Menu-board panels (mirrors the boards over the counter) ───────── */
.boards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--sp-5); }
.board {
  box-sizing: border-box; width: min(360px, 100%); background: #F4F1EA;
  border-radius: 22px; padding: 44px 30px 34px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06); position: relative;
}
.board__screw {
  position: absolute; top: 20px; width: 11px; height: 11px; border-radius: 50%;
  background: #C9C4B8; box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.board__screw--l { left: 34px; } .board__screw--r { right: 34px; }
.board__cat {
  color: var(--cream); font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: .14em; text-align: center; padding: 8px 12px; margin-bottom: var(--sp-5);
}
.board__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.board__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.board__name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 23px; color: var(--navy); line-height: 1.1; }
.board__tag { font-size: var(--fs-xs); font-style: italic; color: var(--cornflower); text-align: right; flex-shrink: 0; max-width: 44%; line-height: 1.2; }
.board__caption { font-size: var(--fs-xs); font-style: italic; font-weight: 700; color: var(--navy); margin-top: 14px; }

/* ───────── Flavor board ───────── */
.flavor-group { margin-bottom: var(--sp-7); }
.flavor-group__title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: var(--fs-h3); color: var(--navy); margin: 0 0 var(--sp-5);
  display: inline-block; border-bottom: 3px solid var(--pink); padding-bottom: 6px;
}
.flavor-card {
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 6px;
}
.flavor-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flavor-card__name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-md); color: var(--navy); }
.flavor-card__desc { font-size: var(--fs-sm); color: var(--fg-muted); }
.flavor-card__contains { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.flavor-card__contains-label { font-size: var(--fs-xs); color: var(--fg-muted); font-weight: 700; }

.pill { font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap; }
.pill--green { background: var(--green-100); color: var(--navy); }
.pill--pink  { background: var(--pink-100); color: var(--navy); }
.pill--corn  { background: var(--navy-100); color: var(--navy); }
.pill--plain { background: var(--cream-deep); color: var(--body-text); font-weight: 400; }

/* Allergen chips — real buttons so they are keyboard-operable and can carry
   aria-pressed. The design drew them as coloured <button>s with inline state. */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: var(--white); color: var(--navy); border: 2px solid var(--navy);
  border-radius: var(--r-pill); padding: 8px 18px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.chip[aria-pressed="true"]::before { content: "✓ "; }

.notice {
  background: var(--green-100); border-radius: var(--r-md); padding: 12px 16px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy);
}
.notice--warn { background: var(--pink-100); }
.notice--quiet { background: var(--cream-deep); font-weight: 400; color: var(--body-text); }

.link-btn {
  background: transparent; border: none; color: var(--navy); font-family: var(--font-body);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}

/* ───────── Forms ───────── */
.field { display: block; margin-bottom: 0; }
.field__label {
  display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tr-label); color: var(--green); margin-bottom: 6px;
}
/* The green label is decorative-weight on white; darken it enough to read.
   #96CE92 on white is ~1.9:1 — well under AA for 12px text. */
.field__label { color: #4E8F55; }
.field__hint { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 11px 12px; border: 2px solid var(--rule-strong);
  border-radius: var(--r-md); font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--body-text); background: var(--white);
}
/* 16px+ on the actual control stops iOS Safari zooming the page on focus. */
.select { color: var(--navy); }
.textarea { resize: vertical; min-height: 90px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: #B23B37; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Size picker — radio group styled as cards, so it stays keyboard/screen-reader
   navigable instead of being a row of divs. */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 480px) { .choice-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Direct child only. A descendant selector here also caught .choice__price
   and drew a bordered card inside every card. */
.choice > span {
  display: block; text-align: center; background: var(--cream); color: var(--navy);
  border: 2px solid var(--navy); border-radius: var(--r-md); padding: 14px 10px;
  cursor: pointer; font-weight: 700; font-size: var(--fs-sm);
}
.choice input:checked + span { background: var(--navy); color: var(--white); }
.choice input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
.choice__price { display: block; font-weight: 400; font-size: var(--fs-xs); opacity: .85; margin-top: 2px; }

.price-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  border-top: 2px solid var(--rule); padding-top: var(--sp-4); margin-top: var(--sp-2);
}
.price-line__total { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-xl); color: var(--navy); }

/* ───────── Counter menu (prices) ───────── */
.menu-cat__label {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tr-label); padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 2px solid currentColor;
}
.menu-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; font-size: var(--fs-sm); }
.menu-row__price { color: var(--brown); font-weight: 700; }

/* ───────── Photo slots ───────── */
/* The design used a drag-and-drop <image-slot>. On the real site these are
   plain figures with a labelled empty state, so an unfilled slot reads as
   "a photo goes here" rather than as a broken image. */
.photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--cream-deep); border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg); color: var(--fg-muted); font-size: var(--fs-sm);
  padding: var(--sp-5); min-height: 220px; overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.photo--tall { min-height: 320px; }
@media (min-width: 900px) { .photo--tall { min-height: 460px; } }

.polaroid { background: var(--white); border: 1px solid var(--rule); padding: 12px 12px 20px; box-shadow: var(--shadow-md); }
.polaroid .photo { border-radius: 0; min-height: 200px; }
.polaroid__cap { font-family: var(--font-script); font-size: 24px; color: var(--navy); text-align: center; margin-top: 8px; }
@media (min-width: 700px) {
  .polaroid--a { transform: rotate(-1.5deg); }
  .polaroid--b { transform: rotate(1deg); }
  .polaroid--c { transform: rotate(-.8deg); }
}

/* ───────── Footer ───────── */
.site-footer { background: var(--navy); color: var(--white); }
.site-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding-block: var(--sp-7) var(--sp-5);
}
@media (min-width: 620px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); } }
.site-footer__head {
  color: var(--pink); font-weight: 700; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tr-label); margin-bottom: var(--sp-3);
}
.site-footer__body { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--white); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--pink); text-decoration: underline; }
.site-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.site-footer__legal {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--cornflower);
}
/* #8897CC on #2C3D83 is ~3.0:1 — fine for the 12px legal line only because it
   is non-essential; the address block above uses white. */

/* ───────── Utilities ───────── */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--fg-muted); font-size: var(--fs-xs); }
.script-flourish { font-family: var(--font-script); color: var(--pink); line-height: 1; font-size: var(--fs-h2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }
.sticky-side { position: static; }
@media (min-width: 900px) { .sticky-side { position: sticky; top: 104px; } }

/* Loading placeholder for feed-driven regions. */
.loading { color: var(--fg-muted); font-size: var(--fs-sm); font-style: italic; padding: var(--sp-5) 0; }
.section--navy .loading { color: var(--cornflower); }

/* ───────── Hours list (Visit) ───────── */
.hours-row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row__value { font-weight: 700; color: var(--navy); text-align: right; }

/* ───────── Gift card faces ───────── */
.giftcard {
  background: var(--navy); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.giftcard img { width: 150px; height: auto; }
.giftcard__amount {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: var(--fs-h2); color: var(--pink);
}

/* ───────── Contact call-to-action ───────── */
.contact-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-5);
}
.contact-cta__phone {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: var(--fs-xl); color: var(--navy); text-decoration: none;
}
.contact-cta__phone:hover { text-decoration: underline; }