/* Super Chicken — landing page
   Design language from the Figma "Website redesign" comps + vault Brand Guidelines. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}

a { color: var(--action); }

/* ---------- Andean zigzag trim ---------- */
.trim {
  height: var(--trim-height);
  background:
    repeating-linear-gradient(135deg, var(--sc-charcoal) 0 6px, transparent 6px 12px),
    var(--sc-gold);
  background-size: 12px var(--trim-height), 100% 100%;
}
.trim--rose {
  background:
    repeating-linear-gradient(135deg, var(--sc-rose) 0 6px, transparent 6px 12px),
    var(--sc-cream);
}

/* ---------- Header ----------
   The logo is oversized on purpose: it breaks out of the gold band and
   overhangs the zigzag trim onto the hero image below. Negative margins let
   it overflow without inflating the band; z-index keeps it above the hero. */
.site-header { background: var(--bg-header); position: relative; z-index: 20; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 1.2rem; text-decoration: none; }
/* Cream badge behind the logo. Required, not decorative: the wordmark is a
   single dark colour, so it is illegible both on the gold band and on the dark
   hero photo. The brand guide says the on-light wordmark must never sit over
   busy photography without a solid band behind it — this is that band.
   Only the BOTTOM margin is negative, so the badge overhangs downward onto the
   hero and never clips off the top of the page. */
.logo-badge {
  display: flex;
  background: var(--sc-cream);
  border: 3px solid var(--sc-charcoal);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  margin-bottom: -72px;
  position: relative; z-index: 21;
  box-shadow: 0 12px 26px rgba(42, 30, 20, .38);
}
.logo-badge img { height: 132px; width: auto; display: block; }
.brand .tagline {
  font-family: var(--font-body);
  color: var(--sc-charcoal);
  font-size: 0.95rem; line-height: 1.2; text-transform: none; max-width: 22ch;
}
.header-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--sc-white); }
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  /* No saturation boost — the photo carries its own colour. The muting was
     caused by the old flat-grey overlay, not the image, so the fix lives in
     the scrim below rather than in a filter here. */
}
/* Warm scrim instead of a flat charcoal wash. The old grey overlay was what
   made the whole image look desaturated. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(30,18,10,.82) 0%, rgba(38,22,12,.50) 52%, rgba(60,30,8,.18) 100%),
    linear-gradient(0deg, rgba(227,169,60,.10), rgba(227,169,60,.10));
}
.hero .wrap { padding-block: clamp(3.5rem, 12vw, 8rem); }
.hero h1 { font-size: var(--fs-hero); max-width: 16ch; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero h1 .gold { color: var(--sc-gold); }
.hero p.kicker {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch; margin: 1.1rem 0 1.8rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.sc-btn:hover, .sc-btn:focus-visible { filter: brightness(1.07); }
.sc-btn--ghost {
  background: transparent; color: var(--sc-charcoal);
  border-color: var(--sc-charcoal);
}

/* ---------- Sections ---------- */
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2rem; }
.section-head h2 { font-size: var(--fs-h2); white-space: nowrap; }
.section-head .rule { flex: 1; height: 6px;
  background: repeating-linear-gradient(135deg, var(--sc-rose) 0 5px, transparent 5px 10px);
}

/* ---------- Location tiles ---------- */
.tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.tile {
  background: var(--sc-white);
  border: 2px solid var(--sc-charcoal);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
/* reserve two lines so every tile's address starts at the same y */
.tile h3 { font-size: 1.65rem; color: var(--sc-charcoal); min-height: 3.1rem; }
.tile .addr, .tile .hrs { font-size: 0.92rem; line-height: 1.45; margin: 0; }
.tile .hrs { color: #5c5044; }
.tile a.tel { font-weight: 700; text-decoration: none; font-size: 1.02rem; }
.tile .actions { margin-top: auto; padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tile .actions .sc-btn { text-align: center; font-size: 0.92rem; }
.tile .note {
  font-size: 0.82rem; color: #6b6055; font-style: italic; margin: 0;
}

/* ---------- Catering band ---------- */
.catering { background: var(--sc-gold); }
.catering .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.catering h2 { font-size: var(--fs-h2); color: var(--sc-charcoal); }
.catering p { margin: 0.5rem 0 0; max-width: 52ch; color: var(--sc-charcoal); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-footer); color: var(--text-invert); }
.site-footer .wrap { padding-block: 2.5rem; }
.site-footer img.mark { height: 78px; width: auto; margin-bottom: 1rem; }
.site-footer a { color: var(--sc-gold-tint); }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-grid h4 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 .4rem; font-size: 1rem; }
.footer-grid p { margin: 0; font-size: 0.86rem; line-height: 1.5; }
.legal { margin-top: 2rem; font-size: 0.78rem; opacity: .72; }

/* Mobile header.
   The logo badge overhangs DOWNWARD by design. That only works if the badge and
   the buttons stay on one row — if the header is allowed to wrap, the buttons
   drop onto a second line and the overhang lands on top of them. So below 760px
   wrapping is switched off and everything is scaled to fit instead. */
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 0.6rem; padding-block: 0.7rem; }
  .brand { gap: 0; }
  .brand .tagline { display: none; }
  .logo-badge { margin-bottom: -40px; padding: 0.55rem 0.7rem; border-width: 2px; }
  .logo-badge img { height: 84px; }
  .header-cta { gap: 0.4rem; flex-wrap: nowrap; }
  .header-cta .sc-btn {
    font-size: 0.7rem; padding: 0.7em 0.9em;
    letter-spacing: 0.02em; white-space: nowrap;
  }
  .hero .wrap { padding-top: 4.5rem; }
}
@media (max-width: 430px) {
  .logo-badge { margin-bottom: -30px; padding: 0.4rem 0.5rem; }
  .logo-badge img { height: 62px; }
  .header-cta .sc-btn { font-size: 0.6rem; padding: 0.65em 0.7em; }
  .hero .wrap { padding-top: 3.5rem; }
}