/* Palette sampled from logo.jpeg. Contrast ratios (WCAG AA needs 4.5:1 body, 3:1 large text):
   tomato on cream 4.6, tomato on white 5.0, tomato on foam 3.7 (large headings only),
   white on tomato 5.0, deep on cream 10.9, deep on sea 5.6, navy on white 6.6. */
:root {
  --sea: #8bbbc9;
  --foam: #c6e3e7;
  --sky: #7ec4de;
  --navy: #385f8a;
  --deep: #1f3a56;
  --tomato: #be4940;
  --cream: #fdf6ec;
  /* Hairline dividers between sections, in the spirit of pizzeriabeddia.com. Decorative only. */
  --rule: rgba(31, 58, 86, .28);
  /* Poppins, the face lylespizzeria.com uses, is self-hosted (assets/fonts, SIL OFL), so there are still no third-party requests.
     The system stack is the fallback while it loads and for glyphs outside the latin subset. */
  --font: "Poppins", ui-rounded, "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* Poppins is not a variable font: one file per weight. Only the three weights we use are shipped (light body,
   medium headings and nav, bold emphasis), matching Lyle's. font-display: swap avoids invisible text on slow connections. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/poppins-300-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--deep);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; }

/* Big, sentence-case headings carry the hierarchy (the Beddia move). Poppins is wide, so sizes run a notch smaller. */
h1, h2, h3 { font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 8.5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0; }
h3 { font-size: 1.5rem; letter-spacing: 0; }

.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; }
.skip { position: absolute; left: -999px; top: 0; background: var(--deep); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem;
  padding: .6rem 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--deep);
}
.brand { display: flex; align-items: center; gap: .7rem; color: var(--deep); text-decoration: none; font-weight: 700; letter-spacing: -.01em; font-size: 1.15rem; }
.brand img { border-radius: 50%; }
.nav-toggle { font: inherit; font-weight: 500; background: none; color: var(--deep); border: 1px solid var(--deep); border-radius: 999px; padding: .4rem 1.1rem; cursor: pointer; }
.site-nav { display: none; flex-basis: 100%; flex-direction: column; padding: .5rem 0 .75rem; }
.site-nav.open { display: flex; }
.site-nav a { color: var(--deep); font-weight: 500; text-decoration: none; padding: .7rem 0; border-top: 1px solid var(--rule); }
.site-nav a:hover { color: var(--tomato); }

@media (min-width: 860px) {
  .site-header { padding: .6rem max(16px, calc((100% - 68rem) / 2)); }
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open { display: flex; flex-basis: auto; flex-direction: row; gap: 1.75rem; padding: 0; }
  .site-nav a { padding: .4rem 0; border: 0; font-size: .95rem; }
}

/* Hero: the logo is the only image on the page, so it gets the whole band. */
.hero {
  text-align: center;
  padding: 3.5rem 16px 4rem;
  background: var(--sea);
  border-bottom: 1px solid var(--deep);
}
.hero-logo { width: min(70vw, 340px); border-radius: 50%; margin-bottom: 1.75rem; }
/* h1 sits on the sea-blue hero, where tomato is only 2.4:1, so it stays deep navy (5.6:1). */
.hero h1 { color: var(--deep); margin-bottom: .3em; }
/* The italic face is not shipped (the browser would fake a slant), so keep the <em> upright and lean on weight instead. */
.tagline { font-size: clamp(1.1rem, 3.5vw, 1.4rem); font-weight: 500; margin: 0 auto 2rem; max-width: 42ch; color: var(--deep); }
.tagline em { font-style: normal; }
.tagline, h1, h2 { text-wrap: balance; } /* avoids one-word last lines on narrow screens */

.btn {
  display: inline-block; padding: .85rem 1.8rem; border-radius: 999px;
  background: var(--deep); color: #fff; font-weight: 500; text-decoration: none;
  transition: background-color .15s;
}
.btn:hover { background: var(--tomato); }

/* Sections: heading on the left, content on the right at desktop, separated by hairlines.
   Content column: 68rem max, centered, with a 16px minimum gutter. */
.section {
  padding: clamp(2.5rem, 7vw, 4.5rem) max(16px, calc((100% - 68rem) / 2));
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start;
}
.hero + .section { border-top: 0; } /* the hero already ends in a rule */
.section p { max-width: 38rem; margin: 0; }
.section .btn { justify-self: start; }
@media (min-width: 860px) {
  .section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .section > h2 { grid-column: 1; grid-row: 1 / span 3; }
  .section > :not(h2) { grid-column: 2; }
}

/* One foam band near the bottom echoes the sea-blue hero. Deep on foam is well above 4.5:1. */
#visit { background: var(--foam); }

/* Menu: one centered column, name over a light one-line description (the Please Louise move). */
.section-menu { grid-template-columns: minmax(0, 40rem); justify-content: center; text-align: center; gap: 2rem; }
.section-menu > h2, .section-menu > :not(h2) { grid-column: auto; grid-row: auto; }
.section-menu p { margin-inline: auto; }
.menu-grid { display: grid; gap: 2.5rem; }
.menu-grid article + article { padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.menu-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.menu-list strong { display: block; font-weight: 700; }

/* Timeline: year column plus text, one hairline per row. */
.timeline { list-style: none; padding: 0; margin: 0; max-width: 38rem; }
.timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline li strong { font-weight: 700; color: var(--tomato); white-space: nowrap; }

/* Testimonials: type only, no boxes. */
.quotes { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.quotes figure { margin: 0; }
.quotes blockquote { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 500; line-height: 1.45; }
.quotes figcaption { font-size: 1rem; color: var(--navy); }
@media (min-width: 860px) {
  .section-quotes { grid-template-columns: minmax(0, 1fr); }
  .section-quotes > h2, .section-quotes > :not(h2) { grid-column: auto; grid-row: auto; }
  .quotes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* Footer */
.site-footer { background: var(--deep); color: #fff; text-align: center; padding: 2.5rem 16px; }
.site-footer img { border-radius: 50%; }
.site-footer p { margin: .5rem 0 0; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}