/* Sanvilla public page. Fonts are self-hosted (fonts/, with their OFL licenses) and allowed by the
   CSP in _headers: the page makes no third-party requests. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caveat-latin-400-normal.woff2") format("woff2");
}

:root {
  --cream: #fbf9f6;
  --white: #ffffff;
  --ink: #1a1a1a;
  --muted: #555555;
  --red: #fc0e1e; /* logo red: large display text and decoration only (3:1 on cream and white) */
  --red-strong: #d40b1d; /* small text, links and filled buttons (4.5:1 or better) */
  --orange: #fe7e10;
  --green: #4aaf39;
  --blue: #1292c1;
  --line: #dddddd;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-card: 8px;
  --radius-button: 32px;
  --shadow-card: -10px 8px 32px rgba(0, 0, 0, 0.14);
  color-scheme: only light; /* the logo JPGs have a white background; also opts out of forced dark mode */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 1rem/1.6 var(--body);
}

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

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

/* White strip so the logo JPG (white background) blends in on the cream canvas. */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .wrap { padding-top: 0.75rem; padding-bottom: 0.75rem; }
h1 { margin: 0; }
h1 img { display: block; width: min(100%, 20rem); }

h2 {
  margin: 0 0 0.75rem;
  font: 700 clamp(2rem, 8vw, 2.75rem)/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
}
h3 {
  margin: 0 0 0.5rem;
  font: 700 1.375rem/1.1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
p { margin: 0 0 0.75rem; }
a { color: var(--red-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
/* The bottom padding is a strip reserved for the blobs: they only rise 6rem above the hero's bottom
   edge, so no text ever sits on top of one at any width. */
.hero { position: relative; overflow: hidden; padding: 2.5rem 0 6.5rem; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  margin: 0 0 0.5rem;
  font: 600 0.8125rem/1.4 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-title {
  margin: 0;
  font: 700 clamp(2.5rem, 12vw, 4.5rem)/0.95 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
}
.script {
  margin: 0.25rem 0 1.5rem;
  font: 400 clamp(1.75rem, 8vw, 2.5rem)/1.2 var(--script);
  color: var(--red-strong);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-button);
  background: var(--red-strong);
  color: var(--white);
  font: 600 0.875rem/1 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 200ms ease;
}
.btn:hover { filter: brightness(0.92); }
.btn-number { letter-spacing: 0.06em; }

/* Sections and cards */
.section { position: relative; overflow: hidden; padding: 2.5rem 0; }
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.notice { position: relative; z-index: 1; }
.notice p:last-child { margin-bottom: 0; }

/* Full-bleed orange band with wavy edges; ink text keeps 6.8:1 on the orange. */
.band { position: relative; margin: 1rem 0; padding: 3.5rem 0 4rem; background: var(--orange); }
.band h2, .band p { color: var(--ink); }
.menu-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; margin-top: 1.5rem; }
/* Menu cards show 7 items; the whole card is the toggle of a <details> that reveals the rest. */
.menu-group { position: relative; transition: box-shadow 200ms ease, transform 200ms ease; }
.menu-group:hover { transform: translateY(-2px); box-shadow: -12px 12px 36px rgba(0, 0, 0, 0.2); }
.menu-group ul { margin: 0; padding-left: 1.25rem; }
.menu-group summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--red-strong);
  border-radius: var(--radius-button);
  color: var(--red-strong);
  font: 600 0.8125rem/1 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.menu-group summary::-webkit-details-marker { display: none; }
/* Stretched click target: an invisible layer over the card makes the entire card toggle. */
.menu-group summary::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.when-open { display: none; }
.menu-group details[open] .when-open { display: inline; }
.menu-group details[open] .when-closed { display: none; }
.chevron {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 250ms ease;
}
details[open] .chevron { transform: rotate(180deg); }
.menu-group .rest { margin-top: 0.5rem; animation: reveal 300ms ease-out both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}
/* Where supported, the height animates too (progressive: elsewhere the list simply fades in). */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .menu-group details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 300ms ease, content-visibility 300ms ease allow-discrete;
  }
  .menu-group details[open]::details-content { block-size: auto; }
}
.wave { position: absolute; left: 0; display: block; width: 100%; height: 3.5rem; color: var(--orange); }
.wave path { fill: currentColor; }
.wave-top { bottom: calc(100% - 1px); }
.wave-bottom { top: calc(100% - 1px); transform: scaleY(-1); }

/* Decoration: solid organic blobs and hairline line art. Never text. */
.blob { position: absolute; z-index: 0; pointer-events: none; fill: currentColor; }
.blob-green { width: 15rem; left: -5rem; bottom: -9rem; color: var(--green); }
.blob-orange { width: 9rem; right: -3.5rem; bottom: -3rem; color: var(--orange); }
.line-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--blue);
}
.line-art * { vector-effect: non-scaling-stroke; }
.art-cup { width: 5rem; right: 1.25rem; bottom: 7.5rem; transform: rotate(8deg); }
.art-apple { width: 5rem; right: -0.75rem; top: 1.5rem; transform: rotate(-10deg); }
.art-cloche { width: 6rem; right: 0.5rem; bottom: 0.5rem; transform: rotate(-6deg); }

.site-footer { margin-top: 3rem; padding: 2rem 0; background: var(--ink); color: var(--white); }
.site-footer p {
  margin: 0;
  font: 600 0.8125rem/1.4 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Below ~368px the cup would reach the call button; it is only decoration, so it steps aside. */
@media (max-width: 23rem) {
  .art-cup { display: none; }
}

@media (min-width: 40rem) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .blob-green { width: 22rem; left: -8rem; bottom: -16rem; }
  .blob-orange { width: 15rem; bottom: -9rem; }
}

@media (min-width: 64rem) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .menu-group, .chevron { transition: none; }
  .menu-group:hover { transform: none; }
  .menu-group .rest { animation: none; }
  .menu-group details::details-content { transition: none; }
}