/* =========================================================
   Rosalia's Brick Oven: demo site styles
   Design tokens
   ========================================================= */
:root {
  --char:      #2A1B14; /* oven-dark background */
  --char-2:    #3A241A; /* lighter charcoal, panels on dark */
  --semolina:  #F0DDBB; /* flour-dusted cream */
  --semolina-2:#E6CEA0; /* deeper semolina for contrast fields */
  --ember:     #E85D2C; /* fire accent */
  --ember-light:#FFCB8E; /* glow highlight */
  --brick:     #8C3A2B; /* deep brick red */
  --basil:     #6B7A4F; /* muted sage, used sparingly */
  --crust:     #3A2418; /* dark ink for text on cream */
  --cream-text:#FBF2E2; /* near-white warm text on dark */

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --wrap: 1120px;

  /* Fluid editorial type scale */
  --fs-hero:   clamp(3rem, 1.35rem + 6.4vw, 6.75rem);
  --fs-h2:     clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --fs-h2-sm:  clamp(1.7rem, 1.35rem + 1.6vw, 2.4rem);
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --fs-lede:   clamp(1.05rem, 0.96rem + 0.4vw, 1.28rem);

  /* Spacing rhythm */
  --space-section: clamp(4.25rem, 2.9rem + 5.8vw, 7.75rem);
  --space-tight:   clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--semolina);
  color: var(--crust);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; }
a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ember);
  color: var(--cream-text);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.eyebrow-dark { color: var(--brick); }
.eyebrow-light { color: var(--ember-light); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 4px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--m-dur-base, 0.3s) var(--m-ease-out, ease), box-shadow var(--m-dur-base, 0.3s) var(--m-ease-out, ease);
}
.btn-ember {
  background: var(--ember);
  color: var(--cream-text);
  box-shadow: 0 6px 0 0 #a8401b;
}
.btn-ember:hover { box-shadow: 0 8px 0 0 #a8401b; }
.btn-ghost {
  border-color: var(--cream-text);
  color: var(--cream-text);
}
.btn-ghost:hover { background: rgba(251, 242, 226, 0.08); }
.btn-cream {
  background: var(--semolina);
  color: var(--crust);
  box-shadow: 0 6px 0 0 #b89a68;
}
.btn-cream:hover { box-shadow: 0 8px 0 0 #b89a68; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  background: var(--char);
  border-bottom: 1px solid rgba(240, 221, 187, 0.12);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--cream-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark span { color: var(--ember); }
.wordmark.small { font-size: 18px; margin: 0 0 6px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.site-nav a {
  color: var(--cream-text);
  text-decoration: none;
  opacity: 0.85;
}
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] {
  opacity: 1;
  background-size: 100% 2px;
}
.nav-cta {
  background: var(--ember);
  color: var(--cream-text) !important;
  padding: 9px 18px;
  border-radius: 4px;
  opacity: 1 !important;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: var(--char);
  color: var(--cream-text);
  overflow: clip;
  padding: var(--space-section) 0 calc(var(--space-section) + 0.5rem);
}
.hero-bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url("img/hero-oven.jpg");
  background-size: cover;
  background-position: center 60%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Photo-led overlay: nearly opaque behind the copy column on the left,
     fading out toward the right so the oven and flames read as the hero's
     dominant visual. Darkest stop (0.93) keeps cream text far above the
     4.5:1 contrast floor even over the photo's brightest flame tones. */
  background:
    linear-gradient(100deg, rgba(26, 16, 11, 0.93) 0%, rgba(26, 16, 11, 0.86) 32%, rgba(26, 16, 11, 0.5) 58%, rgba(26, 16, 11, 0.16) 88%);
}
.hero-glow {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 60%;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 100%, rgba(232, 93, 44, 0.35), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-copy {
  max-width: 640px;
}
.hero-lede {
  font-size: var(--fs-lede);
  max-width: 46ch;
  color: rgba(251, 242, 226, 0.85);
}
.hero h1 {
  font-size: var(--fs-hero);
  max-width: 11ch;
  color: var(--cream-text);
  margin-bottom: 0.42em;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* =========================================================
   Story / About
   ========================================================= */
.story {
  background: var(--semolina);
  padding: var(--space-section) 0;
  overflow: clip;
}
.story-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}
.story-mark {
  position: relative;
  width: 100%;
  max-width: 200px;
}
.story-mark svg:first-child { width: 100%; display: block; }
.story-mark-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
}
.story h2 {
  font-size: var(--fs-h2-sm);
  color: var(--crust);
}
.story-copy p {
  max-width: 62ch;
  color: #4a3222;
}

/* =========================================================
   Menu teaser (homepage) — a short list of signature items,
   the full menu lives on its own page.
   ========================================================= */
.menu-teaser {
  background: var(--char);
  color: var(--cream-text);
  padding: var(--space-section) 0;
  overflow: clip;
}
.menu-teaser-head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}
.menu-title {
  font-size: var(--fs-h2);
  color: var(--cream-text);
  max-width: 16ch;
  margin: 0 0 0.5em;
}
.menu-intro-copy {
  max-width: 44ch;
  color: rgba(251, 242, 226, 0.72);
  font-size: 1.02rem;
  margin: 0;
}
.menu-teaser-list {
  max-width: 620px;
  margin: 0 0 2.5rem;
}
.menu-card-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(251, 242, 226, 0.55);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

/* Shared menu-list component: reused on the homepage teaser (dark) and
   the full menu page (light). Dark styling is the default; .full-menu
   overrides item/price/leader colors for the cream background. */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(240, 221, 187, 0.14);
}
.menu-list li:last-child { border-bottom: none; }
.item {
  font-weight: 600;
  font-size: 15.5px;
  flex-shrink: 0;
  max-width: 72%;
}
.item em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: rgba(251, 242, 226, 0.6);
  margin-top: 3px;
  line-height: 1.4;
}
.leader {
  flex: 1;
  border-bottom: 2px dotted rgba(240, 221, 187, 0.25);
  height: 0;
  align-self: center;
  transform: translateY(-2px);
  min-width: 16px;
}
.price {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ember-light);
  white-space: nowrap;
}
.menu-footnote {
  margin-top: 28px;
  font-size: 14px;
  color: rgba(251, 242, 226, 0.55);
}

/* =========================================================
   Menu page (menu.html) — intro hero, category rail, full list
   ========================================================= */
.menu-page-hero {
  position: relative;
  background: var(--char);
  color: var(--cream-text);
  overflow: clip;
  padding: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem) 0 clamp(3rem, 2.3rem + 2.8vw, 4.5rem);
}
.menu-page-hero-bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url("img/menu-hero.jpg");
  background-size: cover;
  background-position: center 42%;
}
.menu-page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(26, 16, 11, 0.93) 0%, rgba(26, 16, 11, 0.86) 30%, rgba(26, 16, 11, 0.55) 55%, rgba(26, 16, 11, 0.22) 88%);
}
.menu-page-hero-inner {
  position: relative;
  z-index: 1;
}
.menu-page-hero h1 {
  font-size: var(--fs-h2);
  max-width: 15ch;
  color: var(--cream-text);
  margin-bottom: 0.42em;
}
.menu-page-lede {
  font-size: var(--fs-lede);
  max-width: 52ch;
  color: rgba(251, 242, 226, 0.85);
  margin: 0;
}

/* Category rail: sticks below the header while the long list scrolls
   underneath it, so a diner can jump straight to a course without
   scrolling back up. Plain position: sticky, no JS required. */
.category-rail {
  position: sticky;
  top: var(--header-h, 78px);
  z-index: 40;
  background: var(--brick);
  border-bottom: 1px solid rgba(240, 221, 187, 0.14);
}
.category-rail-inner {
  display: flex;
  gap: clamp(16px, 1.2vw + 8px, 30px);
  overflow-x: auto;
  padding-block: 14px;
  scrollbar-width: thin;
}
.category-rail a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  color: var(--cream-text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  padding-bottom: 0;
}
.category-rail a:hover,
.category-rail a:focus-visible { opacity: 1; }

.full-menu {
  background: var(--semolina);
  padding: var(--space-section) 0;
}
.menu-section {
  padding-bottom: clamp(3rem, 2.3rem + 2.8vw, 4.5rem);
  margin-bottom: clamp(3rem, 2.3rem + 2.8vw, 4.5rem);
  border-bottom: 1px solid rgba(58, 36, 24, 0.12);
  scroll-margin-top: calc(var(--header-h, 78px) + 70px);
}
.menu-section-last { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.menu-section-head { max-width: 640px; margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.menu-section-head h2 {
  font-size: var(--fs-h2-sm);
  color: var(--crust);
  border-bottom: 2px solid rgba(58, 36, 24, 0.16);
  padding-bottom: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.menu-section-copy {
  max-width: 56ch;
  color: #5c4530;
  font-size: 15px;
  margin: 0;
}
.full-menu .menu-card-note { color: #7a5c3a; }
.full-menu .menu-list li { border-bottom-color: rgba(58, 36, 24, 0.14); }
.full-menu .item { color: var(--crust); }
.full-menu .item em { color: #6b5238; }
.full-menu .leader { border-bottom-color: rgba(58, 36, 24, 0.22); }
.full-menu .price { color: var(--brick); }
.full-menu .menu-list { max-width: none; }

@media (max-width: 700px) {
  .menu-section-head h2 { flex-wrap: wrap; }
  .item { max-width: 68%; }
}

/* =========================================================
   Hours & Location
   ========================================================= */
.visit {
  background: var(--semolina-2);
  padding: var(--space-section) 0;
}
.visit-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.hours-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 15px;
  width: 100%;
  max-width: 360px;
}
.hours-table th, .hours-table td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid rgba(58, 36, 24, 0.15);
}
.hours-table th {
  font-weight: 700;
  color: var(--brick);
  padding-right: 24px;
  white-space: nowrap;
}
.visit-block address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.visit-block address a {
  color: var(--brick);
  font-weight: 600;
  text-decoration: none;
}
.visit-note {
  font-size: 14.5px;
  color: #5c4530;
  max-width: 40ch;
}

/* =========================================================
   Order CTA
   ========================================================= */
.order-cta {
  background: var(--ember);
  color: var(--cream-text);
  text-align: center;
  padding: var(--space-tight) 0;
}
.order-cta h2 {
  font-size: var(--fs-h2-sm);
  color: var(--cream-text);
  margin-bottom: 28px;
}
.order-cta-note {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  color: rgba(251, 242, 226, 0.8);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--char);
  color: rgba(251, 242, 226, 0.7);
  padding: 48px 0 36px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-brand address {
  font-style: normal;
  font-size: 14px;
}
.footer-brand address a {
  color: rgba(251, 242, 226, 0.7);
  text-decoration: underline;
}
.footer-disclaimer {
  font-size: 12.5px;
  color: rgba(251, 242, 226, 0.5);
  margin: 0;
  max-width: 40ch;
  text-align: right;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .story-inner { grid-template-columns: 1fr; }
  .story-mark { max-width: 140px; }
  .visit-inner { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-disclaimer { text-align: left; }
}

@media (max-width: 620px) {
  .site-nav { gap: 16px; font-size: 14px; }
  .item { max-width: 60%; }
  body { font-size: 16px; }
}

/* Tap-target minimums (mobile a11y): interactive elements >= 40px tall */
.wordmark,
.site-nav a,
nav a,
address a,
.contact-list a,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.site-nav a { padding-inline: 8px; justify-content: center; min-width: 40px; }