/* seo.css — server-rendered landing pages.
   Loads after app.css and reuses its tokens, so the pages are unmistakably
   the same product as the app without pulling in the app's shell layout
   (fixed bottom nav, overlays, carousel) that these documents don't have. */

.seo-page {
  background: var(--paper);
  background-image: var(--paper-noise);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  padding: 0 20px 64px;
}

.seo-masthead { max-width: 860px; margin: 0 auto; padding: 20px 0 8px; }
.seo-logo img { height: 62px; width: auto; display: block; }

.seo-main { max-width: 860px; margin: 0 auto; }

/* The headline is the one loud element. Everything below it stays quiet so a
   parent scanning for a restaurant name isn't fighting the page. */
.seo-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 12px 0 14px;
  text-wrap: balance;
}

.seo-intro {
  font-size: 1.05rem;
  line-height: 1.62;
  max-width: 62ch;
  color: var(--ink-soft);
  margin: 0 0 26px;
}
.seo-intro a { color: var(--teal-dark); }

/* Day strip — deliberately the app's .day-chip, pixel for pixel, because it is
   the same control doing the same job and a parent arriving from search should
   recognise it when they later open the app. Seven fixed columns rather than
   wrapped pills: the row cannot reflow onto a second or third line on a phone,
   so the strip is one predictable band on every page and at every width. */
.seo-daystrip-wrap {
  margin: 0 0 26px;
  padding-bottom: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid rgba(73, 48, 24, .22);
}
.seo-daystrip-label {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: .95rem;
}
.seo-daystrip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(5px, 1vw, 12px);
}

.seo-daychip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: clamp(44px, 5.4vw, 60px);
  padding: 7px 4px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background:
    var(--paper-noise),
    linear-gradient(180deg, #FCEBC1, #F0CF8F);
  background-size: 180px 180px, auto;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 216, .62), 0 2px 0 rgba(73, 48, 24, .12);
  font-family: var(--font-script);
  font-size: clamp(13px, 1.7vw, 19px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s, background .15s, color .15s;
}
.seo-daystrip a.seo-daychip { color: var(--ink); text-decoration: none; }
.seo-daystrip a.seo-daychip:hover { transform: translateY(-2px); }

/* Today's page. Lit, and not a link — it points at itself. */
.seo-daychip.is-active {
  color: var(--cream);
  background:
    var(--paper-noise),
    linear-gradient(180deg, #F57B31, var(--orange));
  background-size: 180px 180px, auto;
  box-shadow:
    inset 0 0 0 3px rgba(255, 231, 173, .72),
    inset 0 -4px 0 rgba(139, 43, 13, .22),
    0 4px 0 var(--orange-dark),
    0 7px 0 rgba(73, 48, 24, .22);
  transform: translateY(-2px);
}
.seo-daychip.is-active .ds-count { color: var(--cream); opacity: .85; }

/* Every chip is a live destination — a day with its own page goes there, a day
   without one goes into the app with that day preselected. Nothing in the row
   is dead, so nothing in the row is styled as dead. */

.ds-count {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: .6em;
  color: var(--ink-soft);
}

/* Full day names are the anchor text that matters for search; the three-letter
   form is what fits seven-across on a 360px phone. Only one is ever rendered. */
.ds-abbr { display: none; }
@media (max-width: 760px) {
  .ds-full { display: none; }
  .ds-abbr { display: inline; }
  .seo-daystrip { gap: 4px; }
  .seo-daychip { min-height: 46px; border-width: 1.7px; padding-inline: 2px; }
}

.seo-hub-link { margin: 26px 0 0; font-weight: 600; }

/* Legacy day nav — still used by the "By city" row on the hub page. */
.seo-daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 34px;
  padding: 14px 0;
  border-top: 2px solid var(--paper-deep);
  border-bottom: 2px solid var(--paper-deep);
}
.seo-daynav-label { color: var(--ink-soft); margin-right: 4px; }
.seo-daynav a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.seo-daynav a span { font-weight: 400; color: var(--ink-soft); font-size: .88em; }
.seo-daynav a:hover { background: var(--gold); }
.seo-daynav .is-empty {
  padding: 7px 13px;
  color: var(--ink-soft);
  opacity: .5;
}

/* Listings. Ruled rows rather than cards: this is a list to scan top to
   bottom, and boxing each entry would slow that down for no gain. */
.seo-list { list-style: none; margin: 0; padding: 0; }
.seo-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-deep);
}
.seo-item-name {
  font-family: var(--font-display);
  font-size: 1.42rem;
  margin: 0 0 3px;
  line-height: 1.2;
}
.seo-item-name a { color: var(--ink); text-decoration: none; }
.seo-item-name a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.seo-item-addr { margin: 0 0 12px; color: var(--ink-soft); font-size: .93rem; }

.seo-deal { margin: 12px 0 0; padding-left: 14px; border-left: 4px solid var(--orange); }
.seo-deal-lg { padding: 16px 0 16px 18px; }
.seo-deal-title { font-weight: 800; margin: 0 0 3px; }
.seo-deal-desc { margin: 0 0 7px; line-height: 1.55; max-width: 62ch; }

.seo-deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.seo-deal-meta .seo-days { color: var(--teal-dark); font-weight: 700; }

/* Terms as a definition list, because that is what they are, and it gives
   screen readers and Google an explicit label/value pairing. */
.seo-terms {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 18px;
  margin: 10px 0 0;
  font-size: .95rem;
}
.seo-terms dt { font-weight: 700; color: var(--ink-soft); }
.seo-terms dd { margin: 0; }

.seo-faq { margin-top: 40px; }
.seo-faq h2 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  margin: 26px 0 6px;
}
.seo-faq p { margin: 0; line-height: 1.6; max-width: 62ch; color: var(--ink-soft); }
.seo-faq a, .seo-main a { color: var(--teal-dark); }

.seo-note {
  margin: 22px 0;
  padding: 12px 16px;
  background: var(--paper-light);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .93rem;
  max-width: 62ch;
}

.seo-footer {
  max-width: 860px;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 2px solid var(--paper-deep);
  color: var(--ink-soft);
  font-size: .93rem;
}
.seo-footer a { color: var(--teal-dark); }

:where(.seo-page) a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Above the fold on desktop.
   A browser cannot set its own zoom level from a page — that control belongs to
   the user — so instead of shrinking everything to 80%, the header block is put
   on a diet at desktop widths. Masthead, headline and intro give back roughly
   110px between them, which on a 1080p window is the difference between the
   first restaurant starting below the fold and two of them being visible.
   If you would rather have the whole page render smaller anyway — the literal
   equivalent of the reader pressing Ctrl-minus once — uncomment the zoom rule
   at the bottom of this block. `zoom` reflows the layout properly (unlike
   transform: scale, which leaves a shrunken page in a full-size hole) and is
   honoured by Chrome, Edge, Safari and Firefox 126+. */
@media (min-width: 900px) {
  .seo-masthead { padding: 14px 0 2px; }
  .seo-logo img { height: 52px; }
  .seo-h1 { font-size: clamp(2rem, 4.2vw, 2.5rem); margin: 10px 0 10px; }
  .seo-intro { font-size: 1rem; line-height: 1.55; margin-bottom: 20px; }
  .seo-daystrip-wrap { margin-bottom: 20px; }
  .seo-item:first-child { padding-top: 6px; }

  /* .seo-page { zoom: 0.8; } */
}

@media (max-width: 560px) {
  .seo-page { padding: 0 16px 48px; }
  .seo-terms { grid-template-columns: 1fr; gap: 2px 0; }
  .seo-terms dd { margin-bottom: 8px; }
}

/* Chain listings. A chain's terms print once and its locations sit under them:
   four Pasta House rows with one corporate paragraph between them is one place
   to eat, and repeating the paragraph four times reads as filler to a parent
   and as duplicate content to a crawler. */
.seo-count {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: middle;
  margin-left: 6px;
}

.seo-locs {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px dotted var(--paper-deep);
}
.seo-locs li { padding: 3px 0; line-height: 1.4; }
.seo-locs a { color: var(--teal-dark); font-weight: 600; }
.seo-locs span { color: var(--ink-soft); font-size: .88rem; }

.seo-attrib { font-size: .8rem; opacity: .7; margin-top: 8px; }