/* ───────────────────────────────────────────────────────────────────────────
   Cafe Raymond Catering — one-pager styles

   Colours are lifted from src/themes/erp/erp-theme.scss, the Hub's single
   source of truth for the brand palette. They are written here as plain hex
   rather than the `rgb(var(--token))` channel triplets that file uses, because
   that indirection exists so Tailwind and SCSS can share one definition and
   there is no Tailwind here. The VALUES must stay in step with that file.

       --background  245 241 234  #f5f1ea   cream
       --foreground   31  26  20  #1f1a14   near-black brown
       --card        239 233 223  #efe9df
       --secondary   235 228 214  #ebe4d6
       --primary      27  54  84  #1b3654   navy
       --border      221 211 191  #ddd3bf
       --muted-fg    107  99  84  #6b6354

   Type is the café's three faces: Playfair Display for headings, Courier Prime
   for body (the house typewriter voice), Special Elite for the eyebrow labels.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #f5f1ea;
  --fg: #1f1a14;
  --card: #efe9df;
  --secondary: #ebe4d6;
  --navy: #1b3654;
  --navy-deep: #142a43;
  --border: #ddd3bf;
  --muted: #6b6354;
  --radius: 0.5rem;

  --serif: "Playfair Display", Georgia, serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --type: "Special Elite", "Courier New", monospace;

  --wrap: 1140px;
  --wrap-narrow: 760px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 🔴 `[hidden]` is a UA style (`display: none`) and loses to ANY class that
   sets display. Three things here set one — `.field` is flex, `.form` is grid,
   `.success` is block — so without this:
     · the delivery address AND the location picker both showed at once, which
       is the one contradiction the two fields exist to prevent;
     · the form would not disappear on success, leaving a filled-in form under
       the thank-you and inviting the duplicate submit this whole flow is
       built to stop.
   One rule, applied before anything sets display, rather than remembering to
   write `.thing[hidden]` next to every one of them. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* The sticky header is 68px; without this every anchor lands under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--navy-deep);
}

/* A visible focus ring everywhere. The navy ring has 7.6:1 against the cream,
   so it is legible without relying on the browser default, which several of
   these dark buttons would have swallowed. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--bg);
  padding: 0.7rem 1.1rem;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

/* ── Type scale ──────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 {
  font-size: clamp(2.3rem, 5.6vw, 4rem);
}

.sec-h {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  text-align: center;
  margin-bottom: 0.9rem;
}

.sec-h.left {
  text-align: left;
}

.eyebrow {
  font-family: var(--type);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.eyebrow.center {
  text-align: center;
}

.lede {
  font-size: 1.1rem;
  color: #3a332a;
  max-width: 34em;
}

.sec-lede {
  text-align: center;
  color: var(--muted);
  max-width: 40em;
  margin: 0 auto 2.6rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn-solid {
  background: var(--navy);
  color: var(--bg);
}

.btn-solid:hover {
  background: var(--navy-deep);
  color: var(--bg);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--card);
}

.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 1rem 2.1rem;
  font-size: 1rem;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 234, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0;
}

.nav-brand-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.nav-brand-sub {
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-links {
  display: flex;
  gap: 1.7rem;
  font-size: 0.9rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--navy);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}

.nav-phone {
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* The nav is the one place that genuinely needs breakpoints: four section
   links, a phone number and a button do not fit a phone. The links go first
   (they duplicate scrolling), then the phone number (it is in the hero and the
   footer too). The CTA never goes. */
@media (max-width: 960px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 480px) {
  .nav-phone {
    display: none;
  }
}

/* At 390px the brand plus the CTA were 2px wider than the screen. Tighter
   gutters and a slightly smaller wordmark, rather than dropping either: the
   CTA is the point of the page and the name is the brand. */
@media (max-width: 420px) {
  .wrap {
    padding-inline: 1rem;
  }

  .nav-brand-name {
    font-size: 1.15rem;
  }

  .nav-brand-sub {
    font-size: 0.65rem;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.9rem 0 1.1rem;
}

.hero-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.hero-art img {
  border-radius: 1rem;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 860px) {
  .hero-in {
    grid-template-columns: 1fr;
  }

  /* Picture above copy reads better on a phone, but the h1 must stay the
     first thing in the DOM. */
  .hero-art {
    order: -1;
  }
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */

.strip {
  background: var(--card);
  border-block: 1px solid var(--border);
  padding: 1.8rem 0;
}

.strip-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.strip-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.strip-item strong {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
}

.strip-item span {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.sec {
  padding: clamp(3.2rem, 7vw, 5.5rem) 0;
}

.sec-alt {
  background: var(--card);
  border-block: 1px solid var(--border);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
}

.sec-alt .card {
  background: var(--secondary);
}

.card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.card p {
  color: var(--muted);
  margin: 0 0 1.2rem;
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}

.ticks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 700;
}

.link-arrow {
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.link-arrow::after {
  content: " \2192";
}

/* ── Steps ───────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  counter-reset: none;
}

.steps li h3 {
  font-size: 1.22rem;
  margin: 0.9rem 0 0.5rem;
}

.steps li p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--bg);
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* ── Menu ────────────────────────────────────────────────────────────────── */

.note {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.6rem;
  max-width: 44em;
  margin: 0 auto 3rem;
  text-align: center;
}

.sec-alt .note {
  background: var(--secondary);
}

.note p {
  margin: 0;
  font-size: 0.95rem;
}

.note-sub {
  color: var(--muted);
  font-size: 0.88rem !important;
  margin-top: 0.6rem !important;
}

.menu-group {
  max-width: 48em;
  margin: 0 auto 3.2rem;
}

.menu-h {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-align: center;
  margin-bottom: 0.25rem;
}

.menu-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.8rem;
}

.menu {
  margin: 0;
}

/* The leader dots are drawn with a repeating gradient on a flexible middle
   element rather than a border-bottom on the whole row, so the dots stop where
   the price starts instead of running under it. */
.menu .row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.2rem;
}

.menu dt {
  font-family: var(--serif);
  font-size: 1.1rem;
  /* 🔴 NOT flex-shrink: 0. With both the name and the price rigid, a long
     dish name plus a per-person price overflowed a 390px phone by 28px and
     took the whole document sideways with it. The price stays rigid (it is
     `white-space: nowrap` below); the name is what wraps. */
  flex-shrink: 1;
  min-width: 0;
}

.menu .row::after {
  content: "";
  /* 🔴 ::after is the LAST child, so without this the dots run after the
     price instead of between the name and it. The dd is pushed to 3. */
  order: 2;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  margin-bottom: 0.28rem;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1.3px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}

.menu dd {
  margin: 0;
}

.menu dd.p {
  font-family: var(--serif);
  font-size: 1.1rem;
  order: 3;
  flex-shrink: 0;
  white-space: nowrap;
}

.menu dd.p span {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

.menu .desc {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 44em;
}

/* Sandwiches share one price, so their rows have no <dd> and the leader dots
   would run to the right edge for no reason. */
.menu-sandwiches .row::after {
  display: none;
}

.menu-sandwiches .desc {
  margin-bottom: 1.2rem;
}

.menu-foot {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 40em;
  margin: 0 auto;
}

/* ── Approach ────────────────────────────────────────────────────────────── */

.approach {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.approach-copy p {
  color: var(--muted);
}

.approach-art img {
  border-radius: 1rem;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.facts {
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.facts div {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}

.facts dt {
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 9.5rem;
}

.facts dd {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .approach {
    grid-template-columns: 1fr;
  }

  .approach-art {
    order: -1;
  }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:first-child {
  border-top: 1px solid var(--border);
}

.faq summary {
  font-family: var(--serif);
  font-size: 1.08rem;
  padding: 1.15rem 2.5rem 1.15rem 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}

/* Safari still paints the disclosure triangle without this. */
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--navy);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq summary:hover {
  color: var(--navy);
}

.faq .ans {
  padding: 0 2.5rem 1.3rem 0;
}

.faq .ans p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.sec-quote {
  background: var(--card);
  border-block: 1px solid var(--border);
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.field.full,
.form-foot,
.form-error {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0;
}

.req {
  color: #a55f00;
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* 16px minimum on the controls: anything smaller and iOS Safari zooms the page
   on focus, which on a form this long throws the layout about. */
.field input,
.field select,
.field textarea {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  width: 100%;
  min-width: 0;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #dc2626;
}

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 0.3rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-weight: 400;
}

.choice:has(input:checked) {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.choice input {
  margin: 0.3rem 0 0;
  width: auto;
  accent-color: var(--navy);
  flex-shrink: 0;
}

.choice-body {
  display: flex;
  flex-direction: column;
}

.choice-label {
  font-weight: 700;
  font-size: 0.92rem;
}

.choice-hint {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* The honeypot. Off-canvas rather than display:none, because some bots skip
   fields that are not rendered at all. aria-hidden + tabindex="-1" in the HTML
   keep it away from people using a keyboard or a screen reader. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.form-legal {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
  max-width: 32em;
}

.form-error {
  background: #fef2f2;
  border: 1px solid #dc2626;
  border-radius: var(--radius);
  color: #991b1b;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin: 0;
}

.success {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem 2rem;
}

.success-tick {
  font-size: 2.6rem;
  color: #157f3d;
  margin: 0 0 0.6rem;
  line-height: 1;
}

.success h3 {
  font-size: 1.6rem;
  margin-bottom: 0.7rem;
}

.success p {
  color: var(--muted);
  margin: 0;
}

.direct {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.direct p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.direct-lines {
  margin-top: 0.4rem !important;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 1rem !important;
}

@media (max-width: 620px) {

  .form,
  .choices {
    grid-template-columns: 1fr;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  background: #000;
  color: #f5f1ea;
  padding: 3.5rem 0 1.5rem;
}

.foot a {
  color: #e7e0d2;
  text-decoration: none;
}

.foot a:hover {
  color: #fff;
  text-decoration: underline;
}

.foot-in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.2rem;
}

.foot-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}

.foot-tag {
  margin: 0;
  font-size: 0.88rem;
  color: #a8a093;
}

.foot-h {
  display: block;
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a093;
  margin-bottom: 0.7rem;
}

.foot-nap {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.9;
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.foot-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2a2a;
  font-size: 0.8rem;
  color: #a8a093;
}

.foot-bar p {
  margin: 0;
}

@media (max-width: 860px) {
  .foot-in {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .foot-in {
    grid-template-columns: 1fr;
  }
}

@media print {

  .nav,
  .hero-actions,
  .sec-quote,
  .skip {
    display: none;
  }

  .faq details {
    /* A printed FAQ with the answers collapsed is a page of questions. */
    display: block;
  }

  .faq .ans {
    display: block !important;
  }
}

/* Hiding this is permitted only because the attribution appears as text in
   .form-legal, with links to Google's Privacy Policy and Terms. If that text
   is ever removed, this rule must go with it. */
.grecaptcha-badge {
  visibility: hidden;
}