/*
Theme Name: Pizza Expresso NDG
Theme URI: https://pizzaexpressondg.com
Author: Star Hawk Studio
Author URI: https://starhawkstudio.com
Description: Custom zero-plugin theme for Pizza Expresso, a 2-for-1 pizzeria on Upper Lachine Road in Notre-Dame-de-Grâce, Montréal. Menu, offers, delivery zone, SEO and Restaurant schema are all built into the theme.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pex
*/

/* ------------------------------------------------------------------
   Palette
   Taken off the logo rather than off a template: the green and red are
   the sign above the door, the cream is pizza-box paper, and the gold
   is the mascot. One warm neutral family throughout — the greys are
   biased towards the red so nothing reads as cold office grey.
   Committed single light theme; a takeaway menu has no business
   flipping to dark.
   ------------------------------------------------------------------ */
:root {
  --tomato: #d3202a;
  --tomato-dark: #a8151d;
  --basil: #12793e;
  --basil-deep: #0a5327;
  --gold: #f5b911;

  --char: #1b1512;
  --ink: #2f2620;
  --muted: #6f635b;
  --line: #e6d9c6;

  --cream: #fdf7ee;
  --cream-2: #f6ead7;
  --white: #ffffff;

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r: 14px;
  --shadow: 0 18px 40px -24px rgba(27, 21, 18, .45);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--basil-deep); }
a:hover { color: var(--tomato); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  color: var(--char);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--char); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

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

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 760px); }

.section { padding: 68px 0; }
.section--cream { background: var(--cream-2); }

.note {
  font-size: .88rem; color: var(--muted); margin-top: 14px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 10px;
}

.sec-head { margin-bottom: 34px; max-width: 720px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--muted); margin-bottom: 0; }
.sec-foot { margin-top: 34px; text-align: center; }

.crumbs {
  font-size: .85rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--tomato); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--tomato); color: #fff; }
.btn--primary:hover { background: var(--tomato-dark); color: #fff; }

.btn--ghost { border-color: currentColor; color: var(--char); background: transparent; }
.btn--ghost:hover { background: var(--char); color: #fff; border-color: var(--char); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.cta-row--end { justify-content: center; }

/* ------------------------------------------------------------------
   Top bar + header
   ------------------------------------------------------------------ */
/* The order bar and the header stick as one unit. Sticking only the header
   would scroll the phone numbers away, which on a takeaway site is the one
   thing that must never leave the screen. */
.site-top { position: sticky; top: 0; z-index: 50; }

.topbar {
  background: var(--basil-deep);
  color: #fff;
  font-size: .86rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 56px; padding: 7px 0;
}
.topbar__deal { font-weight: 600; letter-spacing: .02em; }

.topbar__phones { display: flex; align-items: center; gap: 10px; }
.topbar__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* Deliberately oversized: 44px is the accessibility floor for a tap target and
   this is the most important control on the site, so it sits above it. */
.phone-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  background: var(--tomato); color: #fff;
  border-radius: 999px;
  font-family: var(--display); font-weight: 800;
  font-size: 1.06rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .12s;
}
.phone-btn:hover { background: #fff; color: var(--tomato); }
.phone-btn:active { transform: translateY(1px); }
.phone-btn__ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

.site-head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 0;
}
.brand img { width: 190px; height: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav ul {
  list-style: none; display: flex; align-items: center;
  gap: 24px; margin: 0; padding: 0;
}
.nav a {
  color: var(--char); text-decoration: none;
  font-weight: 600; font-size: .96rem;
}
.nav a:hover { color: var(--tomato); }
.nav .current-menu-item > a { color: var(--tomato); }
.nav__cta { min-height: 44px; padding: 0 20px; font-size: .94rem; }
.nav a.nav__cta { color: #fff; }               /* .nav a would otherwise paint the button text dark */
.nav a.nav__cta:hover { color: #fff; background: var(--tomato-dark); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent; border: 2px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--char); margin-inline: auto; position: relative;
}
.nav-toggle__bars::before { content: ""; position: absolute; top: -6px; }
.nav-toggle__bars::after { content: ""; position: absolute; top: 6px; }

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(245,185,17,.16), transparent 60%),
    linear-gradient(160deg, var(--basil-deep), var(--basil));
  color: #fff;
  padding: 56px 0 60px;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px; align-items: center;
}
.hero h1 { color: #fff; }
.hero .hl {
  color: var(--gold);
  /* A hand-drawn underline would be twee; a solid block behind the word
     matches the logo's red bar under "Pizza". */
  background: var(--tomato);
  padding: 0 .12em;
  border-radius: 4px;
  color: #fff;
}
.hero__sub {
  font-size: 1.1rem; color: #e9f3ec; max-width: 52ch; margin-bottom: 0;
}
.hero .eyebrow { color: var(--gold); }
.hero .crumbs, .hero .crumbs a { color: rgba(255,255,255,.75); }
.hero__meta {
  margin: 20px 0 0; font-size: .9rem; color: rgba(255,255,255,.8);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hero__media {
  margin: 0; border-radius: 20px; overflow: hidden;
  aspect-ratio: 3 / 2; box-shadow: 0 34px 60px -28px rgba(0,0,0,.6);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.hero .btn--ghost:hover { background: #fff; color: var(--basil-deep); border-color: #fff; }

/* ------------------------------------------------------------------
   Offer strip
   ------------------------------------------------------------------ */
.strip { background: var(--char); }
.strip__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.12);
}
.strip__item {
  background: var(--char); color: #fff; text-decoration: none;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
  transition: background .15s;
}
.strip__item:hover { background: var(--tomato); color: #fff; }
.strip__item strong { font-family: var(--display); font-size: 1rem; }
.strip__item span { font-size: .84rem; color: rgba(255,255,255,.7); }
.strip__item:hover span { color: rgba(255,255,255,.9); }

/* ------------------------------------------------------------------
   Food cards
   ------------------------------------------------------------------ */
.food-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.food-card {
  margin: 0; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
}
.food-card img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.food-card figcaption { padding: 14px 16px 16px; display: block; }
.food-card strong {
  display: block; font-family: var(--display); font-size: 1.05rem;
  color: var(--char);
}
.food-card span { display: block; font-size: .88rem; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------------
   Pizza grid
   ------------------------------------------------------------------ */
.pizza-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pizza {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.pizza__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.pizza__body { padding: 18px 20px 22px; }
.pizza__body h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pizza__en {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 8px;
}
.pizza__body p { font-size: .93rem; color: var(--muted); margin-bottom: 0; }
.pizza__price {
  font-family: var(--display); font-weight: 800;
  color: var(--tomato); font-size: 1.15rem; margin-top: 10px !important;
}
.tag {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.tag--veg { background: #e4f3e8; color: var(--basil-deep); }

/* ------------------------------------------------------------------
   Priced menu sections — dotted leaders, the way a menu board reads
   ------------------------------------------------------------------ */
.menu-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.menu-sec {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 26px 20px;
  box-shadow: var(--shadow);
}
.menu-sec__head h3 {
  font-size: 1.4rem; margin-bottom: 0; color: var(--basil-deep);
}
.menu-sec__en {
  display: block; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.menu-sec__head p { font-size: .92rem; color: var(--muted); }

.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; border-top: 1px dashed var(--line);
}
.price-list li:first-child { border-top: 0; }
.price-list__text { flex: 1 1 auto; min-width: 0; }
.price-list__name {
  display: block; font-weight: 700; color: var(--char);
}
.price-list__desc { display: block; font-size: .87rem; color: var(--muted); }
.price-list__price {
  flex: none;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  color: var(--tomato);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Offers
   ------------------------------------------------------------------ */
.offers--stack { display: flex; flex-direction: column; gap: 26px; }

.offer {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow);
}
.offer--wide {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: stretch;
}
.offer__media { margin: 0; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.offer__body { padding: 30px 34px; }
.offer__flag {
  display: inline-block; background: var(--gold); color: var(--char);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  margin-bottom: 12px;
}
.offer__body h3 { font-size: 1.6rem; margin-bottom: 4px; }
.offer__sub {
  font-family: var(--display); color: var(--basil);
  font-weight: 700; margin-bottom: 12px;
}
.offer__body-text { color: var(--ink); margin-bottom: 12px; }
.offer__code {
  display: inline-block; border: 2px dashed var(--tomato);
  color: var(--tomato); border-radius: 10px;
  padding: 8px 14px; font-size: .95rem; margin-bottom: 12px;
}
.offer__code strong { font-family: var(--display); letter-spacing: .06em; }
.offer__terms { font-size: .84rem; color: var(--muted); margin-bottom: 0; }

/* ------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------ */
.steps {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.step {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px;
}
/* Numbered because ordering an offer genuinely is a sequence — first you
   call, then you say the code, then you choose pickup or delivery. */
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--basil); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  margin-bottom: 12px;
}
.step p { font-size: .95rem; color: var(--muted); margin-bottom: 0; }

/* ------------------------------------------------------------------
   Delivery
   ------------------------------------------------------------------ */
.deliver {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
.deliver__media { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.deliver__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Neighbourhood names only. The list is ordered nearest-first, but the
   distances stay in the data — "Westmount" is what a customer recognises,
   whereas "3.5 km" is a number they then have to interpret. */
.areas {
  list-style: none; margin: 18px 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.areas li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .93rem; font-weight: 600; color: var(--char);
}
.areas li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--basil);
}
/* The shop's own neighbourhood leads and is marked, so the list reads as
   "here, and then outward" rather than as an undifferentiated blob. */
.areas li.is-home {
  background: var(--basil-deep); border-color: var(--basil-deep); color: #fff;
}
.areas li.is-home::before { background: var(--gold); }
.areas__here {
  font-weight: 400; font-size: .82rem; color: rgba(255,255,255,.75);
}

.deliver__facts { display: grid; gap: 14px; }
.fact {
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--tomato);
  border-radius: 12px; padding: 16px 18px;
}
.fact__k {
  display: block; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.fact__v {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.25rem; color: var(--char);
}
.fact__n { display: block; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */
.faqs { display: grid; gap: 10px; }
.faq {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 0;
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  color: var(--char);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--tomato); border-bottom: 2px solid var(--tomato);
  transform: rotate(45deg); margin-top: -4px; transition: transform .18s;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq__a { padding: 0 20px 18px; }
.faq__a p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------------------
   Hours + contact
   ------------------------------------------------------------------ */
.hours { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hours th, .hours td { text-align: left; padding: 7px 0; border-bottom: 1px dashed var(--line); font-weight: 400; }
/* nowrap: the footer column is narrow enough that "11:00 AM – 10:00 PM"
   otherwise breaks across two lines and the table stops scanning as a table. */
.hours td { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.site-foot .hours { font-size: .88rem; }
.hours .is-today th, .hours .is-today td { color: var(--tomato); font-weight: 700; }

.contact { display: grid; gap: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact address { font-style: normal; color: var(--muted); line-height: 1.8; }
.contact__phone { margin: 0 0 12px; }
.contact__phone a {
  font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; color: var(--tomato); text-decoration: none;
}

.map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); line-height: 0; }
.map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ------------------------------------------------------------------
   End CTA + footer
   ------------------------------------------------------------------ */
.endcta { background: var(--tomato); color: #fff; padding: 58px 0; text-align: center; }
.endcta h2 { color: #fff; }
.endcta p { color: rgba(255,255,255,.92); max-width: 56ch; margin-inline: auto; }
.endcta .btn--primary { background: #fff; color: var(--tomato); }
.endcta .btn--primary:hover { background: var(--char); color: #fff; }
.endcta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.8); }
.endcta .btn--ghost:hover { background: #fff; color: var(--tomato); border-color: #fff; }

.site-foot { background: var(--char); color: #cbbfb6; padding: 54px 0 26px; font-size: .93rem; }
.site-foot h3 {
  color: #fff; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; font-family: var(--body); font-weight: 700;
  margin-bottom: 14px;
}
.site-foot__grid {
  display: grid; gap: 34px;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
}
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--gold); }
.site-foot address { font-style: normal; line-height: 1.85; }
.foot-logo { width: 190px; }
.foot-tag { margin-top: 12px; color: #cbbfb6; }
.foot-social { display: flex; gap: 16px; }
/* Both lines stack so each stays a full-width tap target in the footer too. */
.foot-phone { display: flex; flex-direction: column; gap: 4px; }
.foot-phone a { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.foot-areas { line-height: 1.9; }
.site-foot .hours th { color: #e8ded6; }
.site-foot .hours th, .site-foot .hours td { border-bottom-color: rgba(255,255,255,.14); }
.site-foot .hours td { color: #cbbfb6; }
.site-foot .hours .is-today th, .site-foot .hours .is-today td { color: var(--gold); }

.site-foot__legal {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: #9a8d84;
}
.site-foot__legal p { margin: 0; }

/* ------------------------------------------------------------------
   Universal footer bands: reviews, then map + details
   ------------------------------------------------------------------ */
.reviews-band { background: var(--cream-2); padding: 56px 0 48px; }
.reviews-band .sec-head { margin-bottom: 26px; }
/* Trustindex injects its own markup and its own widths; this just gives it
   the full column and stops a wide carousel pushing the page sideways. */
.reviews-band__widget { width: 100%; overflow-x: auto; }

.mapband { background: var(--white); border-top: 1px solid var(--line); }
.mapband__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 0;
  align-items: stretch;
}
/* The map is the left half and runs edge to edge vertically — a map with
   padding around it reads as a picture of a map rather than a thing you use. */
.mapband__map { line-height: 0; min-height: 420px; }
.mapband__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

.mapband__info { padding: 44px 0 44px 48px; align-self: center; }
.mapband__info h2 { font-size: 1.7rem; margin-bottom: 14px; }
.mapband__addr {
  font-style: normal; color: var(--muted); line-height: 1.8; margin-bottom: 18px;
}
.mapband__k {
  display: block;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.mapband__phones { margin-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.mapband__phones a {
  font-family: var(--display); font-weight: 800; font-size: 1.2rem;
  color: var(--tomato); text-decoration: none;
}
.mapband__phones a:hover { color: var(--tomato-dark); }
.mapband__hours { margin-bottom: 22px; max-width: 340px; }
.mapband__btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
  .mapband__grid { grid-template-columns: 1fr; }
  /* Details first on a phone — the address and phone number are what someone
     actually needs; the map is confirmation. */
  .mapband__info { order: -1; padding: 34px 0 30px; }
  .mapband__map, .mapband__map iframe { min-height: 320px; }
  .mapband__hours { max-width: none; }
  .reviews-band { padding: 44px 0 38px; }
}

/* ------------------------------------------------------------------
   Language switcher
   Both languages always shown, the active one marked rather than
   removed — hiding the current language leaves people unsure which
   one they are reading.
   ------------------------------------------------------------------ */
.langsw { display: inline-flex; align-items: center; gap: 2px; }
.langsw__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 34px; padding: 0 8px;
  border-radius: 8px;
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.langsw--top .langsw__item { color: rgba(255,255,255,.72); }
.langsw--top .langsw__item:hover { color: #fff; background: rgba(255,255,255,.14); }
.langsw--top .langsw__item.is-active { color: var(--char); background: var(--gold); }

.langsw--nav { display: none; } /* desktop uses the one in the order bar */
.langsw--foot { margin-top: 12px; }
.langsw--foot .langsw__item { color: #cbbfb6; border: 1px solid rgba(255,255,255,.2); }
.langsw--foot .langsw__item.is-active { color: var(--char); background: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------------
   Fixed ordering bar
   Online orders go through DoorDash, so the one action that matters
   is pinned to the bottom of the viewport on every page. body gets
   matching bottom padding so it never covers the real footer.
   ------------------------------------------------------------------ */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--char);
  border-top: 3px solid var(--tomato);
  box-shadow: 0 -10px 30px -18px rgba(0,0,0,.7);
  padding: 10px 0;
}
.orderbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.orderbar__blurb { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.orderbar__blurb strong {
  font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.02rem;
}
.orderbar__blurb span { color: #a89c93; font-size: .82rem; }
.orderbar__btns { display: flex; align-items: center; gap: 10px; flex: none; }
.orderbar .btn { min-height: 46px; }
.orderbar .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.orderbar .btn--ghost:hover { background: #fff; color: var(--char); border-color: #fff; }
.orderbar__call .phone-btn__ico { width: 17px; height: 17px; fill: currentColor; }

/* Clearance for the fixed bar. Slightly generous so the last line of the
   footer is never flush against it. */
body { padding-bottom: 84px; }

/* ------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------ */
.entry h2 { margin-top: 2rem; }
.lost { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.lost a {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; text-decoration: none;
  font-weight: 600;
}
.lost a:hover { border-color: var(--tomato); }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pizza-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero { padding: 34px 0 40px; }
  .hero__grid { grid-template-columns: 1fr; gap: 26px; }
  /* Photo above the copy on a phone — you should see the pizza before
     you read about it. */
  .hero__media { order: -1; aspect-ratio: 16 / 10; border-radius: 14px; }

  .deliver { grid-template-columns: 1fr; gap: 28px; }
  .menu-grid, .menu-grid--two { grid-template-columns: 1fr; }
  .offer--wide { grid-template-columns: 1fr; }
  .offer__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .strip__inner { grid-template-columns: 1fr; }

  /* Nav collapses to a disclosure. Hidden by default, opened by the
     button in assets/js/main.js. */
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 20px 18px;
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav ul li { border-bottom: 1px dashed var(--line); }
  .nav ul a { display: block; padding: 14px 2px; }
  .nav__cta { margin-top: 14px; }
  .site-head__inner { position: relative; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 48px 0; }
  .food-grid { grid-template-columns: 1fr; }
  .pizza-grid { grid-template-columns: 1fr; }
  .site-foot__grid { grid-template-columns: 1fr; }
  .areas { grid-template-columns: 1fr; }
  .offer__body { padding: 22px 22px; }
  .cta-row .btn { width: 100%; }

  /* Phone-first: the tagline and the "Call to order" label give up their space
     so the two numbers can be full-width buttons side by side. */
  .topbar__deal, .topbar__label { display: none; }
  .topbar__inner { justify-content: center; min-height: 0; padding: 8px 0; }
  .topbar__phones { width: 100%; gap: 8px; }

  /* The language switcher moves out of the cramped top bar and into the
     drop-down nav, where it has room to be a real target. */
  .langsw--top { display: none; }
  .langsw--nav { display: flex; justify-content: center; margin-top: 12px; gap: 8px; }
  .langsw--nav .langsw__item {
    flex: 1 1 0; min-height: 46px; font-size: .95rem;
    border: 2px solid var(--line); color: var(--char);
  }
  .langsw--nav .langsw__item.is-active { background: var(--basil-deep); border-color: var(--basil-deep); color: #fff; }

  /* The bar loses its explanatory text and becomes two buttons. */
  .orderbar__blurb { display: none; }
  .orderbar__inner { gap: 8px; }
  .orderbar__btns { width: 100%; gap: 8px; }
  .orderbar__order { flex: 1 1 auto; }
  .orderbar__call { flex: 0 0 auto; padding: 0 16px; }
  .orderbar__calltext { display: none; }
  body { padding-bottom: 76px; }
  .phone-btn {
    flex: 1 1 0; justify-content: center;
    min-height: 46px; padding: 0 10px;
    font-size: 1rem;
  }
  .site-head__inner { padding: 8px 0; }
  .brand img { width: 150px; }
}

/* Below ~380px the two numbers plus their icons no longer fit on one row;
   drop the icons rather than shrinking the text people have to read. */
@media (max-width: 380px) {
  .phone-btn__ico { display: none; }
  .phone-btn { font-size: .95rem; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Search landing pages (v1.4.0) */
.landing-copy p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; }
.food-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .food-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.landing-links { line-height: 2; }
.landing-links a { font-weight: 600; }
.landing-links--center { text-align: center; margin-top: 22px; }
.landing-links--inline { display: inline; }
.landing-more { margin-top: 26px; font-size: .95rem; color: var(--muted); }
.foot-areas--links { margin-top: 8px; }
.foot-areas--links a { color: #fff; }
/* Free delivery badge (v1.4.0) */
.topbar__free { display: inline-block; margin-left: 12px; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--char); font-weight: 700; font-size: .85em; }
@media (max-width: 560px) { .topbar__free { display: block; margin: 4px 0 0; } }