/* ============================================================
   CUSTOM — Lavish Pizza overrides for Template AR
   Loaded last, so it wins over theme.css and style.css.
   Everything here is built from the template's own tokens
   (--gold, --ink, --line, --font-display …) so it re-skins
   automatically with the five variables in theme.css.
   ============================================================ */

/* ---- the logo is a near-square badge, not a wide lockup ----
   It carries a wordmark, so it needs more height than the
   template's default to stay legible in the header. ---- */
.brand img {
  height: 4.5rem;
}
@media (max-width: 900px) {
  .brand img {
    height: 4rem;
  }
}
.foot-brand img {
  height: 7rem;
}

/* The mobile drawer is height-constrained — an oversized logo pushes the
   "Order Online" button below the fold. Keep it close to the template's. */
.nav-overlay__brand img {
  height: 4rem;
}

/* On short viewports, tighten the drawer so the order CTA stays on screen.
   The base template overflows here too; this is a deliberate improvement. */
@media (max-height: 1000px) {
  .nav-overlay__panel {
    gap: 1rem;
    padding-block: 1.25rem;
  }
  .nav-overlay__brand img {
    height: 3rem;
  }
  .nav-overlay__links a {
    font-size: 1.5rem;
    padding-block: 0.15rem;
  }
  .nav-overlay__phone {
    font-size: 1.35rem;
  }
  .nav-overlay__meta {
    gap: 0.4rem;
  }
}

/* ---- two-column variant of the template's areas grid ---- */
.areas-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 60rem;
  margin-inline: auto;
}
.areas-grid--2 .area:nth-child(2) {
  border-radius: 0;
  padding-top: 2rem;
  text-align: left;
}

/* ---- single-column variant (one long list) ---- */
.areas-grid--1 {
  grid-template-columns: 1fr;
  max-width: 48rem;
  margin-inline: auto;
}
.areas-grid--1 .area:nth-child(2) {
  border-radius: 0;
  padding-top: 2rem;
  text-align: left;
}

@media (max-width: 900px) {
  .areas-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* ---- long link lists inside an FAQ answer (service areas) ---- */
.qa-body ul.qa-cols {
  columns: 2;
  column-gap: 1.5rem;
}
@media (max-width: 700px) {
  .qa-body ul.qa-cols {
    columns: 1;
  }
}

/* ---- a price beside a dish name on the dish landing pages ---- */
.dish-price-chip {
  font-family: var(--font-display);
  color: var(--gold);
  white-space: nowrap;
}

/* ============================================================
   HOME HERO — "classic" full-bleed banner
   Recreates the previous Lavish Pizza hero: the pizza dominates
   the frame, a translucent framed panel sits over its middle,
   and basil + tomatoes rest on the pizza's edge.
   ============================================================ */
.hero-classic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  padding-top: var(--header-h, 80px);
}
.hero-classic__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-classic__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-classic__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 48%,
    color-mix(in srgb, var(--ink) 5%, transparent) 0%,
    color-mix(in srgb, var(--ink) 55%, transparent) 100%
  );
}
.hero-classic__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: min(88vh, 52rem);
  padding: clamp(1rem, 2vw, 2rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem);
}
/* the stage is sized by the pizza — the panel floats over its middle */
.hero-classic__stage {
  position: relative;
  width: min(100%, 56rem);
  display: grid;
  place-items: center;
}
/* sized by viewport HEIGHT so the whole pizza stays in frame — sizing by
   width alone made the hero taller than the screen and pushed the accents
   below the fold */
.hero-classic__pizza {
  grid-area: 1 / 1;
  height: min(76vh, 46rem);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 26px 70px rgba(0, 0, 0, 0.6));
}

/* ---- produce accents, resting on the pizza ---- */
.hero-classic__el {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
}
.hero-classic__el img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.hero-classic__el--basil {
  --rot: -6deg;
  width: clamp(6rem, 13vw, 11rem);
  left: 9%;
  bottom: 6%;
  animation: lav-jump 3.4s var(--ease-soft, ease-in-out) infinite;
}
.hero-classic__el--tomato {
  --rot: 4deg;
  width: clamp(7.5rem, 17vw, 14.5rem);
  right: 4%;
  bottom: 15%;
  animation: lav-jump 4.1s var(--ease-soft, ease-in-out) infinite;
  animation-delay: -1.2s;
}
@keyframes lav-jump {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  28% {
    transform: translateY(-15px) rotate(calc(var(--rot, 0deg) + 3deg));
  }
  52% {
    transform: translateY(-3px) rotate(var(--rot, 0deg));
  }
  74% {
    transform: translateY(-9px) rotate(calc(var(--rot, 0deg) - 2deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-classic__el {
    animation: none !important;
    transform: rotate(var(--rot, 0deg));
  }
}

/* ---- the text panel ---- */
.hero-classic__panel {
  grid-area: 1 / 1;
  z-index: 3;
  width: min(100%, 42rem);
  background: color-mix(in srgb, #ffffff 92%, transparent);
  padding: clamp(0.85rem, 1.8vw, 1.25rem);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.45);
}
.hero-classic__frame {
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  padding: clamp(1.4rem, 3.2vw, 2.3rem) clamp(1.1rem, 2.8vw, 2rem);
  text-align: center;
}
/* .band-dark paints everything cream — put it back to ink inside the panel */
.hero-classic .hero-classic__frame,
.hero-classic .hero-classic__frame h1,
.hero-classic .hero-classic__frame h1 span,
.hero-classic .hero-classic__frame .lede,
.hero-classic .hero-classic__frame .link-arrow,
.hero-classic .hero-classic__frame .link-arrow--light {
  color: var(--ink);
}
.hero-classic .hero-classic__frame .eyebrow {
  color: var(--gold);
  justify-content: center;
  margin-bottom: 0.7rem;
}
.hero-classic .hero-classic__frame h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.022em;
  font-size: clamp(2rem, 5.1vw, 3.25rem);
  margin: 0;
}
.hero-classic .hero-classic__frame h1 strong {
  display: block;
  font-weight: 900;
  color: var(--gold);
}
.hero-classic .hero-classic__frame h1 span {
  display: block;
  font-weight: 800;
  font-size: 0.72em;
  letter-spacing: -0.012em;
}
.hero-classic .hero-classic__frame .lede {
  color: var(--ink-85);
  margin-top: 0.95rem;
  font-size: clamp(1rem, 1.45vw, 1.125rem);
  max-width: 33rem;
  margin-inline: auto;
}
/* CTA group: two buttons on one row, the text link centred beneath */
.hero-classic .hero-classic__frame .hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.hero-classic .hero-classic__frame .hero-cta__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
/* buttons size to their content — script.js wraps each label in a
   rolling-text span, and a fixed width clips it mid-word */
.hero-classic .hero-classic__frame .hero-cta .btn {
  justify-content: center;
  text-align: center;
  padding-inline: 2.2rem 2.4rem;
}
.hero-classic .hero-classic__frame .link-arrow::after {
  background: var(--ink);
}

@media (max-width: 780px) {
  /* stack instead of overlapping — an opaque panel over the pizza hides it
     entirely at this width, so show the pizza above and the panel below */
  .hero-classic__inner {
    min-height: 0;
  }
  .hero-classic__stage {
    grid-template-rows: auto auto;
  }
  .hero-classic__pizza {
    grid-area: 1 / 1;
    /* the base rule drives size from height; reset it here or the forced
       width stretches the pizza into an oval */
    height: auto;
    width: min(88%, 22rem);
  }
  .hero-classic__panel {
    grid-area: 2 / 1;
    width: 100%;
    margin-top: -2.25rem;
  }
  .hero-classic__frame .eyebrow::before,
  .hero-classic__frame .eyebrow::after {
    display: none;
  }
  .hero-classic__frame .eyebrow {
    font-size: 0.68rem;
  }
  .hero-classic__el--basil {
    width: 5.5rem;
    left: 1%;
    bottom: auto;
    top: 26%;
  }
  .hero-classic__el--tomato {
    width: 7rem;
    right: 0;
    bottom: auto;
    top: 20%;
  }
}

/* ============================================================
   MONTHLY SPECIAL — promo band on the home page, in place of
   the old dish marquee. The poster carries the offer artwork;
   the copy beside it repeats the deal in the template's own
   voice (hairline eyebrow, Baskervville head, red italic
   price) so the band reads as part of the site, not an ad
   pasted onto it.
   ============================================================ */
.special__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.special__media {
  position: relative;
}
.special__frame {
  display: block;
}
/* the poster is a landscape banner with its own baked-in headline —
   never crop it, so no arch and no forced aspect ratio here */
.special__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.special__copy h2 {
  max-width: 16ch;
}
.special__copy .lede {
  margin-top: 1.15rem;
}
.special__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.85rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.special__list li {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink);
}
.special__list li::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: 0.65rem;
}
.special__copy .actions {
  margin-top: 2rem;
}
.special__note {
  margin-top: 1.15rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}

@media (max-width: 900px) {
  .special__layout {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 7vw, 3rem);
  }
  .special__copy h2 {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .special__list {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .special__list li::before {
    margin-bottom: 0.4rem;
  }
}

/* ------------------------------------------------------------
   BLEED-RIGHT SPLIT ON MOBILE (home "what we offer", about story)
   .split--bleed-right comes after the .split single-column media
   query in style.css, so its two-column template kept winning below
   900px — the copy was crushed into a ~0.8fr sliver and the trio
   still bled off the right edge. Collapse it here instead.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .split--bleed-right {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 7vw, 3rem);
  }
  .split--bleed-right .split__media {
    margin-right: 0;
  }
  .trio {
    gap: 0.85rem;
  }
  .trio .frame {
    aspect-ratio: 3 / 4;
  }
  .trio .frame:nth-child(2) {
    aspect-ratio: 3 / 4.6;
  }
}

/* ------------------------------------------------------------
   NARROW-SCREEN OVERFLOW — category tiles + long button labels
   Two sources of the few-pixel horizontal scroll on phones:
   1. .cat-grid used `repeat(2, 1fr)`, and a 1fr track is
      minmax(auto, 1fr) — a tile whose padding + longest word +
      arrow exceeds half the wrap pushes the track (and the page)
      wider. minmax(0, 1fr) + wrappable text pins it.
   2. .btn/.btn-line are `white-space: nowrap` with ~7.8rem of
      horizontal padding, so a long label ("Read the reviews on
      Google") is wider than a 320-390px viewport. Scale the
      padding and label with the viewport below 560px.
   ------------------------------------------------------------ */
.cat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cat-tile {
  min-width: 0;
}
.cat-tile span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cat-tile .ico {
  flex: none;
}
@media (max-width: 560px) {
  .cat-grid {
    gap: 0.6rem;
  }
  .cat-tile {
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }
  .btn,
  .btn-line {
    max-width: 100%;
    padding-block: 1.15rem 1rem;
    padding-inline: clamp(1rem, 4.5vw, 1.9rem);
    font-size: clamp(0.68rem, 2.6vw, 0.8rem);
    letter-spacing: 0.08em;
    gap: 0.55em;
  }
}