/* =========================================================
   Steak & Take Grill — Colors & Type
   Retro roadside Americana meets open-flame steakhouse.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Yellowtail&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* -------- Brand palette -------- */
  --st-red:        #D2232A;  /* menu red — the flame, the sign */
  --st-red-deep:   #8F1418;  /* seared edge, hover red */
  --st-cream:      #FAF0DC;  /* garlic-bread cream — the page */
  --st-cream-warm: #F0E0C0;  /* toasted cream — warm tint */
  --st-paper:      #FFF8EA;  /* brighter cream for cards on cream */
  --st-char:       #1B1512;  /* charcoal — ink, dark sections */
  --st-smoke:      #2A211B;  /* raised dark surface */
  --st-amber:      #E9A23B;  /* flame amber — secondary accent */
  --st-ink:        #161009;  /* deepest black-brown */

  /* -------- Semantic surfaces -------- */
  --bg:         var(--st-cream);
  --bg-alt:     var(--st-paper);
  --bg-dark:    var(--st-char);
  --bg-hot:     var(--st-red);
  --fg:         var(--st-char);
  --fg-on-dark: var(--st-cream);
  --fg-on-red:  var(--st-cream);
  --accent:     var(--st-red);
  --accent-warm:var(--st-amber);
  --rule:       color-mix(in oklch, var(--st-char) 25%, transparent);

  /* -------- Type stacks -------- */
  --font-display: "Anton", "Impact", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-script:  "Yellowtail", "Brush Script MT", cursive;
  --font-mono:    "DM Mono", ui-monospace, Menlo, monospace;

  /* -------- Type scale -------- */
  --fs-h1:      clamp(36px, 4.5vw, 64px);
  --fs-h2:      clamp(28px, 3.2vw, 44px);
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;

  --lh-heading: 1.02;
  --lh-body:    1.55;

  /* -------- Radii / borders / shadows — poster offset, not soft blur -------- */
  --radius-card: 14px;
  --border-ink:  3px solid var(--st-char);
  --shadow-press:     3px 3px 0 0 var(--st-char);
  --shadow-press-lg:  6px 6px 0 0 var(--st-char);
  --shadow-press-red: 8px 8px 0 0 var(--st-red);

  /* -------- Motion -------- */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* `clip` stops sideways scroll like `hidden` but does NOT make body a
     scroll container — `hidden` here silently disabled every position:sticky
     element on the page (header, menu jump bar). `hidden` kept as fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: var(--lh-heading);
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; }

a { color: var(--st-red); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--st-red-deep); }

::selection { background: var(--st-red); color: var(--st-cream); }

/* ---------- Signature patterns ---------- */
/* Divider — sear marks: crosshatched diagonals over charcoal, like the
   char marks on a steak fresh off the grate. The brand's section divider. */
.divider {
  height: 24px;
  background-color: var(--st-char);
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 9px, rgba(210, 35, 42, 0.85) 9px 12px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(233, 162, 59, 0.35) 9px 12px);
}
.dots-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-color, var(--st-char)) 2px, transparent 2.5px);
  background-size: 22px 22px;
  opacity: 0.08;
  pointer-events: none;
}
.dots-overlay--cream { --dot-color: var(--st-cream); }
.dots-overlay--strong { opacity: 0.15; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  top: -52px;
  left: 0;
  z-index: 1000;
  background: var(--st-char);
  color: var(--st-cream);
  padding: 10px 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  text-decoration: none;
  transition: top 120ms;
}
.skip-link:focus { top: 0; outline: 3px solid var(--st-red); outline-offset: 2px; color: var(--st-cream); }

:focus-visible { outline: 3px solid var(--st-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}