/* ==========================================================================
   Gridiron Bar and Grill — styles.css
   Direction: Friday Night Lights (dark, warm red glow, condensed scoreboard
   type, square corners, dense). Tokens below are transcribed 1:1 from the
   design system; see CLAUDE.md before changing any value.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Color */
  --field: #0F1113;      /* page background */
  --panel: #1A1E22;      /* cards, header, footer */
  --hairline: #2A3037;   /* all 1px borders */
  --red-fill: #D2402A;   /* buttons, borders, glow — white text only */
  --red-text: #F1614A;   /* links, prices, small red text */
  --red-hover: #FF7B63;  /* hover red */
  --red-pressed: #7A2318;/* pressed red */
  --cream: #E7E2D8;      /* headings, primary text */
  --body: #B9C0C6;       /* paragraphs, secondary values */
  --muted: #7E878F;      /* labels, captions, ABV */
  --nav-default: #9AA3AB;
  --green-support: #2E5E3A;
  --green-text: #7FB08A;
  --link-pressed: #C24C38;
  --disabled-bg: #2A3037;
  --disabled-text: #6C757C;
  --disabled-border-2: #23282D;
  --disabled-bg-2: #14181B;
  --disabled-text-2: #566065;

  /* Type */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;

  /* Section density */
  --section-pad-y: 18px;
  --section-pad-x: 16px;

  /* Elevation */
  --glow-red: 0 0 14px rgba(210, 64, 42, 0.3);
  --glow-green: 0 0 14px rgba(46, 94, 58, 0.4);
}

@media (min-width: 768px) {
  :root {
    --section-pad-y: 24px;
    --section-pad-x: 32px;
  }
}

/* ---- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--field);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: var(--red-text); text-decoration: none; }
a:hover { color: var(--red-hover); text-decoration: underline; }
button { font: inherit; }
input, textarea { font-family: var(--font-body); }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Type scale ------------------------------------------------------------ */
.display-xl {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) { .display-xl { font-size: 50px; line-height: 0.9; } }

.display-l {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
}
@media (min-width: 640px) { .display-l { font-size: 38px; line-height: 0.95; } }

.section-head {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.body-l { font-size: 16px; line-height: 1.5; color: var(--body); }
.body-m { font-size: 14.5px; line-height: 1.45; color: var(--body); }
.body-m strong { color: var(--cream); font-weight: 600; }
.body-s { font-size: 13px; line-height: 1.45; color: var(--body); }

.micro-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Layout helpers -------------------------------------------------------- */
.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-bottom: 1px solid var(--hairline);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
}
@media (min-width: 860px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col--kitchen-taps { grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--hairline); }
  .two-col--kitchen-taps > * { background: var(--field); padding: var(--section-pad-y) var(--section-pad-x); }
}
.hero-grad {
  background: radial-gradient(120% 100% at 20% 0%, #24282c 0%, #0F1113 70%);
}

/* ---- Header / nav ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 768px) { .site-header { padding: var(--sp-12) var(--sp-32); } }

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.brand img { height: 36px; width: auto; flex-shrink: 0; }
@media (min-width: 640px) { .brand img { height: 46px; } }
.brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (min-width: 640px) { .brand-name { font-size: 19px; } }
.brand-name span { color: var(--red-text); }

.header-right { display: flex; gap: var(--sp-16); align-items: center; flex-shrink: 0; }

@media (max-width: 420px) {
  .header-right { gap: var(--sp-8); }
  .call-btn-header { padding: 10px 10px; font-size: 12px; }
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--cream);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

.main-nav {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.main-nav a {
  color: var(--nav-default);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.main-nav a:hover { color: var(--red-text); text-decoration: none; }
.main-nav a.active {
  color: var(--red-text);
  border-bottom-color: var(--red-fill);
}

.call-btn-header {
  background: var(--red-fill);
  color: #fff;
  padding: var(--sp-12) var(--sp-16);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.call-btn-header:hover { background: var(--red-hover); color: var(--field); text-decoration: none; }

@media (max-width: 767px) {
  .header-right { position: relative; }
  .main-nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--panel);
    border: 1px solid var(--hairline);
    padding: var(--sp-8) var(--sp-16);
    min-width: 180px;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { width: 100%; }
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--red-fill);
  color: #fff;
}
.btn-primary:hover { background: var(--red-hover); color: var(--field); text-decoration: none; }
.btn-primary:active { background: var(--red-pressed); color: #fff; }
.btn-primary:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.btn-primary:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--nav-default);
  color: var(--cream);
}
.btn-secondary:hover { border-color: var(--cream); background: var(--panel); text-decoration: none; }
.btn-secondary:active { border-color: var(--cream); background: var(--hairline); }
.btn-secondary:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.btn-secondary:disabled {
  border-color: var(--hairline);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.text-link {
  color: var(--red-text);
  font-size: 14.5px;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.text-link:hover { color: var(--red-hover); text-decoration: underline; }
.text-link:active { color: var(--link-pressed); }
.text-link:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
.text-link:disabled { color: var(--disabled-text); cursor: not-allowed; text-decoration: none; }

/* ---- Status pill / tags ------------------------------------------------------ */
.status-pill {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--green-support);
  color: var(--green-text);
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: var(--glow-green);
}
.status-pill .dot { width: 7px; height: 7px; background: var(--green-support); border-radius: 50%; }
.status-pill.is-closed {
  border-color: var(--hairline);
  color: var(--muted);
  box-shadow: none;
}
.status-pill.is-closed .dot { background: var(--muted); }

.tag {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tag--neutral { border: 1px solid var(--hairline); background: var(--panel); color: var(--body); }
.tag--new { background: var(--red-fill); color: #fff; }
.tag--gf { border: 1px solid var(--green-support); color: var(--green-text); }
.tag--spicy { border: 1px solid var(--red-fill); color: var(--red-text); }

/* ---- Form fields -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--cream);
  padding: 12px;
  font-size: 14px;
  min-height: 44px;
  outline: none;
  border-radius: 0;
  width: 100%;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus {
  border: 2px solid var(--red-fill);
  padding: 11px;
  box-shadow: var(--glow-red);
}
.field.has-error input,
.field.has-error textarea { border: 2px solid var(--red-hover); padding: 11px; }
.field-error { font-size: 12.5px; color: var(--red-hover); }
.field input:disabled,
.field textarea:disabled {
  border-color: var(--disabled-border-2);
  background: var(--disabled-bg-2);
  color: var(--disabled-text-2);
  cursor: not-allowed;
}

/* ---- Content components --------------------------------------------------- */
.fact-panel {
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: 10px 12px;
}
.fact-panel .micro-label { margin-bottom: 2px; }
.fact-panel .value { font-size: 14.5px; font-weight: 600; color: var(--cream); }

.hours-list { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.hours-list .row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: 5px;
  color: var(--cream);
}
.hours-list .row span:last-child { color: var(--body); }

.menu-item { display: flex; flex-direction: column; gap: 2px; }
.menu-item .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cream);
}
.menu-item .row .price { color: var(--red-text); white-space: nowrap; }
.menu-item .desc { font-size: 13px; line-height: 1.45; color: var(--muted); }

.tap-row, .bar-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--cream);
}
.tap-row span:last-child { color: var(--muted); }
.bar-row span:last-child { color: var(--red-text); }

.reach-card {
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: 12px 14px;
}
.reach-card .micro-label { margin-bottom: 2px; }
.reach-card a { font-size: 18px; font-weight: 600; }

/* ---- Photo carousel --------------------------------------------------------- */
.carousel { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 860px) {
  /* Full-width felt oversized on desktop; cap it at ~60% of the section. */
  .carousel { max-width: 60%; margin: 0 auto; }
}
.carousel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  border: 1px solid var(--hairline);
  overflow: hidden;
  cursor: zoom-in;
}
.carousel-frame img { width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 19, 0.8);
  color: var(--red-text);
  font-family: var(--font-display);
  font-size: 22px;
  border: none;
  cursor: pointer;
}
.carousel-arrow.prev { left: 0; border-right: 1px solid var(--hairline); }
.carousel-arrow.next { right: 0; border-left: 1px solid var(--hairline); }
.carousel-counter {
  position: absolute;
  right: 56px;
  bottom: 10px;
  border: 1px solid var(--hairline);
  background: var(--field);
  color: var(--body);
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.carousel-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.carousel-thumbs button {
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.6;
}
.carousel-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.carousel-thumbs button.active { border: 2px solid var(--red-fill); opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 17, 19, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 1000px; width: 100%; }
.lightbox-inner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--hairline); }
.lightbox-caption {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}

/* ---- Hero photo slot ---------------------------------------------------------- */
/* Frame matches the real signage photo's landscape proportions (2048x1621).
   object-fit: contain guarantees the whole sign stays visible at any screen
   size instead of cropping the way object-fit: cover would. */
.hero-photo {
  border: 1px solid var(--hairline);
  overflow: hidden;
  flex: 0 0 auto;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 2048 / 1621;
  background: var(--panel);
}
.hero-photo img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Map block --------------------------------------------------------------- */
.map-block {
  background: var(--panel);
  border: 1px solid var(--hairline);
  height: 190px;
  overflow: hidden;
  line-height: 0;
}
.map-block iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google's embed only renders in light mode; invert + hue-rotate fakes a
     dark map so it doesn't glare against the dark field around it. */
  filter: invert(90%) hue-rotate(180deg);
}

/* ---- Hero sections ------------------------------------------------------------ */
.hero {
  padding: var(--sp-32) var(--section-pad-x);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
@media (min-width: 860px) {
  .hero.hero--home { flex-direction: row; align-items: center; gap: var(--sp-32); }
}
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1.15; min-width: 0; }
.hero-facts { display: flex; flex-direction: column; gap: var(--sp-12); }
@media (min-width: 480px) { .hero-facts { flex-direction: row; } }
.hero-facts .fact-panel { flex: 1; }
.hero-cta { display: flex; gap: var(--sp-12); flex-wrap: wrap; }

.page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
@media (min-width: 860px) {
  .page-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--sp-24); }
}
.page-hero .lede { max-width: 560px; }

/* ---- Menu section list --------------------------------------------------------- */
.menu-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.menu-section-head .rule { flex: 1; height: 1px; background: var(--hairline); }
.menu-section-head .note { font-size: 13px; color: var(--muted); white-space: nowrap; }
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}
@media (min-width: 640px) {
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 10px 32px; }
}

/* ---- Sister locations -------------------------------------------------------- */
.sister-locations-logos {
  display: flex;
  gap: var(--sp-24);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.sister-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: var(--sp-16) var(--sp-24);
  min-height: 44px;
}
.sister-logo-link:hover { border-color: var(--cream); }
.sister-logo-link:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.sister-logo-link img { height: 56px; width: auto; display: block; }
@media (min-width: 640px) {
  .sister-logo-link img { height: 72px; }
}

/* ---- Footer ---------------------------------------------------------------- */
.site-footer {
  padding: var(--sp-20) var(--section-pad-x);
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-20);
  font-size: 13px;
  color: var(--body);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid .col { display: flex; flex-direction: column; gap: 4px; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cream);
}
.footer-brand span { color: var(--red-text); }
.footer-social { display: flex; gap: var(--sp-12); }
.footer-legal {
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-8);
  font-size: 12px;
  color: var(--muted);
}

/* ---- Utility ---------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}