/* ============================================================
   Wings'N'Pies Groton — hybrid PHP+MySQL (LOS)
   House style · Inter · Red, White & Blue on Black
   Ted, 8/21: by design — the restaurant sits by the Groton Navy
   base entrance, so Old-Glory colors are a deliberate local nod,
   not a generic patriotic skin. Black canvas, white utility
   pills/cards for contrast, red = primary action, blue = secondary
   accent. Distinct from the other WNP locations on purpose — see
   feedback_design_variety (don't re-skin one template everywhere).
   Brand colors live in :root below — change them per location.
   ============================================================ */
:root{
  --black:#0a0a0a; --black-2:#131110; --black-3:#1c1815;
  --white:#ffffff; --red:#C41010; --red-d:#9b0d0d;
  --blue:#1e4d9b; --blue-d:#123467; --blue-lt:#6fa4ff;
  --ink:#f4f0e9; --ink-soft:#a89f92;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.08);
  --nav:#0a0a0a; --nav-2:#000000;
  --shadow:0 20px 50px rgba(0,0,0,.55);
  --maxw:1200px; --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--black);
  line-height:1.65;-webkit-font-smoothing:antialiased}
/* height:auto is NOT optional. Every <img> carries width/height attributes for CLS, and without
   this the browser falls back to the literal height attribute whenever CSS constrains only the
   width - which stretched the hero pizza into an oval, the same bug that hit the locations hub. */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
/* Inline icon SVGs from includes/icons.php (house rule 1q: no emoji icons). Sized off the
   containing element's font-size like an icon font, so one rule covers every button/pill/row
   context on the site instead of a per-spot override. */
svg[aria-hidden]{width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-ghost{background:var(--white);color:#171410;border-color:var(--white)}
.btn-ghost:hover{border-color:var(--red);color:var(--red);background:var(--white)}
/* Online ordering not live yet: a muted, non-clickable pill in place of a dead button.
   Driven by $SITE['order_live'] — set a real order_url in config.php and these never render. */
.btn.is-soon{background:transparent;color:#7c7469;border:1.5px dashed rgba(255,255,255,.22);cursor:default}
.btn.is-soon:hover{transform:none;background:transparent;color:#7c7469}
.soon-note{margin-top:14px;font-size:.88rem;color:var(--ink-soft)}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px}
.section{padding:84px 0;background:var(--black)}
.section.alt{background:var(--black-2)}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px}
.section-head h2{font-size:2.3rem}
.section-head p{color:var(--ink-soft);margin-top:14px}

/* ---------- NAV ---------- */
/* A thin red/white/blue edge on the nav itself (not a new bar above it — house rule 4 stands)
   is the one deliberate patriotic flourish at the very top of the page. */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);
  box-shadow:0 2px 18px rgba(0,0,0,.5);
  border-top:3px solid;border-image:linear-gradient(90deg,var(--red) 0 33%,var(--white) 33% 66%,var(--blue) 66% 100%) 1}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 24px}
/* flex-shrink:0 on the anchor as well as the image: without it the anchor collapses and the
   global img{max-width:100%} drags the logo down with it (it hit 0px wide before this). */
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{height:54px;width:auto;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{color:#f3ece2;font-weight:600;font-size:.87rem;padding:9px 10px;border-radius:8px;transition:.18s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:var(--black);font-weight:700;font-size:.92rem;
  padding:9px 12px;background:var(--white);border:1.5px solid var(--white);border-radius:999px;transition:.18s;
  white-space:nowrap;flex-shrink:0}   /* nowrap: it stacked to 4 lines once the toggle widened the bar */
.nav-phone:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.nav-order{background:var(--red);color:#fff;font-weight:700;padding:10px 14px;border-radius:999px;font-size:.88rem;transition:.18s;white-space:nowrap;flex-shrink:0}
.nav-order.is-soon{background:transparent;color:#8a8378;border:1.5px dashed rgba(255,255,255,.22);
  font-weight:600;cursor:default;white-space:nowrap}
.nav-order:hover{background:var(--red-d)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;margin-left:auto;padding:6px}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;margin:5px 0;transition:.2s}

/* ---------- ANNOUNCEMENT STRIP (below nav, site-wide) ---------- */
.announce{background:linear-gradient(90deg,var(--red),var(--red-d));padding:11px 0}
.announce span{color:#fff;font-weight:800;font-size:1.18rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block}
@media(max-width:760px){.announce{padding:9px 0}.announce span{font-size:.95rem;letter-spacing:.08em}}

/* ---------- HERO ---------- */
/* Black canvas with a low red/blue glow behind the art, not the pale cream radial the site used
   to have — that was the Pizza Mediterranean look Ted rejected on sight (8/20). */
.hero{position:relative;background:
    radial-gradient(70% 90% at 88% 15%,rgba(30,77,155,.20) 0%,transparent 60%),
    radial-gradient(60% 70% at 15% 85%,rgba(196,16,16,.16) 0%,transparent 60%),
    var(--black);
  overflow:hidden}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:64px 24px 72px;display:grid;
  grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero h1{font-size:3.3rem;letter-spacing:-.03em}
.hero h1 .hl{color:var(--red)}
.hero h1 .hl-white{color:var(--white)}
/* Fills the column (rule 1g #4) by spanning it, NOT by justifying: this lede is only two
   lines, and justify stretched it into visible word rivers. */
.hero-sub{font-size:1.12rem;color:var(--ink-soft);margin:20px 0 30px;max-width:580px}
/* Hero CTAs (house rule 1L): a 2-column grid, so every pill is exactly the same WIDTH and the
   same HEIGHT — never ragged text-sized pills. Directions is a 4th cell in this same grid (Ted
   8/23), filling what used to be an empty slot next to View Menu — red, identical size to the
   other three. */
.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;max-width:580px}
.hero-cta .btn{width:100%;justify-content:center;text-align:center;min-height:58px;
  padding:14px 18px;white-space:normal}
/* Address (Ted 8/23): plain white text, NOT a pill — no background/shadow. Stretched to the same
   max-width as the pill grid above it so the edges line up (rule 1g #4, fill the column). */
.hero-addr{display:flex;align-items:center;gap:8px;max-width:580px;margin-top:14px;
  line-height:1.3;font-weight:700;font-size:1.15rem;color:var(--white);text-decoration:none}
.hero-addr:hover{color:var(--red)}
.addr-mobile-break{display:none}
.hero-badges{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero-badges .chip{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.hero-badges .chip b{color:var(--ink)}
/* Food art is SMALLER now (Ted 8/21: "food pictures can be smaller to fit in less area") —
   capped well under the column width instead of filling it edge to edge. */
.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.hero-art .disc{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(30,77,155,.10) 55%,transparent 72%);filter:blur(2px)}
.hero-art img{position:relative;width:100%;max-width:408px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.6))}
.hero-float{position:absolute;background:var(--white);border-radius:14px;box-shadow:var(--shadow);
  padding:12px 16px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px;color:#171410}
.hero-float.f1{left:-8px;bottom:22px}
.hero-float .dot{width:9px;height:9px;border-radius:50%;background:#2bb24c;box-shadow:0 0 0 4px rgba(43,178,76,.18)}

/* ---------- DAILY SPECIALS (Pop's pattern: per-day accordion, Mon-Fri) ---------- */
.spec-days{max-width:760px;margin:0 auto}
.spec-day{background:var(--black-3);border:1px solid var(--line-soft);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden}
.spec-day summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:20px 24px;font-weight:800;font-size:1.15rem;color:var(--ink);transition:.18s}
.spec-day summary::-webkit-details-marker{display:none}
.spec-day summary:hover{color:var(--red)}
/* the open/close chevron, drawn with a pseudo-element instead of an emoji glyph (rule 1q) */
.spec-day summary::after{content:'';width:10px;height:10px;border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.spec-day[open] summary::after{transform:rotate(-135deg)}
.spec-day .serving-now{background:var(--red);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-left:auto;margin-right:14px;flex-shrink:0}
.spec-body{padding:0 24px 22px}
.spec-items{list-style:none}
.spec-items li{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
.spec-items li:first-child{border-top:1px solid var(--line-soft)}
.si-thumb{flex:0 0 76px;width:76px;height:76px;border-radius:10px;overflow:hidden;background:#0e0c0a}
.si-thumb img{width:100%;height:100%;object-fit:cover}
.si-text{flex:1;min-width:0}
.si-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.si-top .it{font-weight:700;color:var(--ink)}
.si-top .pr{font-weight:800;color:var(--red);white-space:nowrap}
.si-text .ds{color:var(--ink-soft);font-size:.88rem;margin-top:3px}
@media(max-width:560px){
  .spec-day summary{padding:16px 18px;font-size:1.05rem}
  .spec-body{padding:0 18px 18px}
  .si-thumb{flex-basis:60px;width:60px;height:60px}
}

/* ---------- MENU TEASER: photo + category pills (replaces the old slideshow) ---------- */
/* Ted 8/22: the previous slider boxed a small transparent food cutout inside a big fixed
   aspect-ratio panel, leaving a lot of visible empty space around it. No more box at all here -
   the cutout's own transparent edges ARE the edges (same treatment as .hero-art / .split img),
   photo on the left, a block of menu-category pills on the right. */
.menu-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mt-photo{display:flex;justify-content:center}
.mt-photo img{width:100%;max-width:420px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.mt-cats h3{font-size:1.3rem;margin-bottom:18px}
.cat-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.cat-pill{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:.88rem;
  background:var(--black-3);transition:.18s}
.cat-pill:hover{border-color:var(--red);color:#fff;background:var(--red)}
@media(max-width:920px){
  .menu-teaser-grid{grid-template-columns:1fr;text-align:center}
  .cat-pills{justify-content:center}
}

/* ---------- ABOUT / CATERING SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Food art capped smaller here too (Ted 8/21). .home-catering is the ONE specific block Ted
   approved as-is on the home page ("keep this block" - the delivery car) - every other .split,
   INCLUDING the separate catering-page panel below, still gets the general size-down. */
.split:not(.home-catering) img{border-radius:16px;max-width:340px;margin:0 auto}
/* Ted 8/22: 40% bigger than the general .split cap (340px * 1.4 = 476px). min(), not a flat
   override - a bare px value here would defeat the responsive fallback below that width and
   overflow a narrow mobile column, the same bug caught earlier on the home-page pizza photo. */
.about-dough-photo{max-width:min(476px,100%) !important}
/* Ted 8/22: turned out Ted had the real transparent cutout (no white background) all along -
   .photo-card (rounded corners + shadow, for a flat white rectangle) is retired; this floats
   bare like the rest of the site's food art, sized 50% bigger than the general .split cap
   (340px * 1.5 = 510px) per Ted's ask, with its own drop-shadow instead of a boxed card. */
/* min(), not a flat !important px value - a bare 510px override defeats the responsive
   img{max-width:100%} fallback below that width and overflows a narrow mobile column. */
.story-pizza-photo{max-width:min(510px,100%) !important;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
/* Ted 8/21: "keep this block" — approved as-is. Do not resize/reflow the delivery-car catering
   panel without asking; every other food image on the site got smaller, this one didn't. */
.split.catering{background:var(--black-3);color:#fff;border-radius:22px;padding:48px;align-items:center;
  border:1px solid var(--line-soft)}
.split.catering .eyebrow{color:var(--blue-lt)}
.split.catering h2{font-size:2rem;margin-bottom:14px}
.split.catering p{color:rgba(255,255,255,.68);margin-bottom:24px}
.split.catering img{background:transparent;box-shadow:none}
.feature-list{list-style:none;margin:22px 0}
.feature-list li{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;color:var(--ink-soft);font-weight:500}
.feature-list li::before{content:"✓";color:#fff;background:var(--red);width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none;margin-top:2px}

/* ---------- MAP ---------- */
.map-full{width:100%;height:520px;line-height:0;filter:grayscale(.25) contrast(1.05) brightness(.92)}
.map-full iframe{width:100%;height:520px;border:0;display:block}
@media(max-width:760px){.map-full,.map-full iframe{height:380px}}

/* ---------- PAGE BANNER (inner pages) ---------- */
.page-banner{background:
    radial-gradient(70% 100% at 85% 0%,rgba(30,77,155,.18) 0%,transparent 60%),
    radial-gradient(60% 80% at 10% 100%,rgba(196,16,16,.14) 0%,transparent 60%),
    var(--black-2);
  padding:54px 0 48px;text-align:center;border-bottom:1px solid var(--line-soft)}
.page-banner h1{font-size:2.6rem}
.page-banner p{color:var(--ink-soft);margin-top:12px;max-width:36em;margin-left:auto;margin-right:auto}
.page-banner .addr{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:600;
  font-size:.92rem;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;margin-top:16px}
.page-banner .addr:hover{color:var(--red);border-color:var(--red)}

/* ---------- TEMPLATE "DO NOT PUBLISH" WARNING (delete once the menu is real) ---------- */
.tpl-warn{border:4px dashed #d33;background:repeating-linear-gradient(45deg,#1a0e0e,#1a0e0e 18px,#210f0f 18px,#210f0f 36px);
  border-radius:14px;padding:26px 28px;margin-bottom:40px;text-align:center;color:#ff9d9d}
.tpl-warn-tag{display:inline-block;background:#d33;color:#fff;font-weight:900;letter-spacing:.14em;
  font-size:.9rem;padding:8px 18px;border-radius:999px;margin-bottom:14px}
.tpl-warn-big{font-size:2.2rem;font-weight:900;letter-spacing:.04em;color:#ff5c5c;line-height:1.05}
.tpl-warn p{max-width:60ch;margin:12px auto 0;color:#e8a8a8;font-size:1rem;font-weight:500}

/* ---------- MENU ---------- */
.menu-note{background:var(--black-3);border:1px solid var(--line-soft);color:var(--ink-soft);border-radius:12px;
  padding:14px 20px;font-size:.92rem;font-weight:500;margin-bottom:38px;text-align:center}
.menu-cols{column-count:2;column-gap:48px}
@media(max-width:820px){.menu-cols{column-count:1}}
.menu-cat{break-inside:avoid;margin-bottom:36px;display:inline-block;width:100%}
.menu-cat h2{font-size:1.55rem;color:var(--ink);padding-bottom:10px;margin-bottom:6px;
  border-bottom:3px solid var(--blue);display:flex;align-items:center;gap:10px}
.menu-cat h2 .ic{color:var(--red)}
.menu-cat .cat-note{color:var(--ink-soft);font-size:.86rem;margin:8px 0 6px}
.menu-item{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.menu-item:last-child{border-bottom:0}
.menu-item .nm{font-weight:700;font-size:1rem;color:var(--ink)}
.menu-item .ds{color:var(--ink-soft);font-size:.84rem;font-weight:400;display:block;margin-top:2px}
.menu-item .leader{flex:1;border-bottom:1px dotted rgba(255,255,255,.2);transform:translateY(-4px);min-width:14px}
.menu-item .pr{font-weight:800;color:var(--red);white-space:nowrap;font-size:1rem}
/* Own scroll container (never the page) for a wide price table - 4 pizza sizes + a name column
   don't fit at 390px; this keeps every column's price legible instead of crushing them. */
.size-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 4px}
.size-table{width:100%;min-width:460px;border-collapse:collapse;font-size:.92rem}
@media(max-width:560px){.size-table{min-width:400px}}
.size-table th{text-align:right;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:4px 8px}
.size-table th:first-child{text-align:left}
.size-table td{padding:6px 8px;border-top:1px solid rgba(255,255,255,.1);text-align:right;font-weight:700;color:var(--red)}
.size-table td:first-child{text-align:left;color:var(--ink);font-weight:700}
.size-table td .ds{display:block;color:var(--ink-soft);font-weight:400;font-size:.8rem}
.menu-cta{text-align:center;margin-top:30px}

/* ---------- COUPONS ---------- */
.coupons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:920px;margin:0 auto}
@media(max-width:680px){.coupons-grid{grid-template-columns:1fr}}
.coupon{position:relative;background:var(--black-3);border:2px dashed var(--red);border-radius:16px;padding:28px 30px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.coupon .offer{font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1.15}
.coupon .details{color:var(--ink-soft);font-size:.95rem}
.coupon .code{margin-top:10px;align-self:flex-start;background:var(--white);color:#171410;font-weight:800;
  letter-spacing:.12em;padding:8px 16px;border-radius:8px;font-size:.95rem}
.coupon .exp{font-size:.78rem;color:#726b60;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.coupon .star{position:absolute;top:-12px;right:18px;background:var(--blue);color:#fff;font-weight:800;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}

/* ---------- GALLERY PAGE (admin-driven, shares the slideshow photo set) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{position:relative;margin:0;border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.35);aspect-ratio:4/3;background:var(--black-3);border:1px solid var(--line-soft)}
/* .static = same tiles reused outside the gallery page, where there is no lightbox to open */
.gallery-grid.static .gallery-item{cursor:default}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;color:#fff;
  font-weight:600;font-size:.88rem;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.96);display:none;
  align-items:center;justify-content:center}
.lightbox.on{display:flex}
.lightbox img{max-width:88vw;max-height:82vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#e6e2d5;font-weight:600;font-size:.95rem;padding:0 60px}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:.2s}
.lightbox button:hover{background:var(--red)}
.lb-close{top:22px;right:22px;font-size:1.7rem}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.lb-prev{left:8px}.lb-next{right:8px}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.info-row .ic{width:42px;height:42px;border-radius:50%;background:var(--black-3);color:var(--red);display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;flex:none;border:1px solid var(--line-soft)}
.info-row h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.info-row a,.info-row p{font-weight:600;color:var(--ink)}

/* ---------- FOOTER ---------- */
.foot{background:var(--nav-2);color:#cfc6ba;border-top:1px solid var(--line-soft)}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:62px 24px 40px;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.foot-brand img{height:74px;margin-bottom:18px}
.foot p,.foot a{color:#bcb2a5;font-size:.94rem}
.foot a:hover{color:var(--blue-lt)}
.foot-contact div{margin-bottom:9px}
.hours-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}
.hours-row span:first-child{color:#fff;font-weight:600}
.hours-row.closed span:last-child{color:var(--red)}
/* Real brand-color icon graphics (Ted 8/21: "use social media icons as color"), not a
   monochrome SVG in a circle — the actual Instagram/Facebook/YouTube app-icon art. */
.foot-social{display:flex;gap:12px;margin-top:8px}
.foot-social a{width:42px;height:42px;border-radius:12px;overflow:hidden;display:block;transition:transform .2s,box-shadow .2s}
.foot-social a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.foot-social img{width:100%;height:100%;object-fit:cover;display:block}
.foot-bar{border-top:1px solid rgba(255,255,255,.09);text-align:center;padding:18px;font-size:.82rem;color:#8b8276}
/* LOS signature — house standard (identical everywhere) */
.footer-powered{text-align:center;padding:12px 24px 22px;display:flex;align-items:center;justify-content:center;gap:8px}
.footer-powered span{font-family:'Inter',sans-serif;font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;color:#999}
.footer-powered img{height:28px;opacity:.42;filter:brightness(1.5);transition:opacity .25s}
.footer-powered img:hover{opacity:.85}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1}
  .hero h1{font-size:2.6rem}
  .hero-cta,.hero-badges{justify-content:center}
  .split,.split.catering{grid-template-columns:1fr;gap:28px}
  .foot-top{grid-template-columns:1fr 1fr}
}
/* Nav collapses to the hamburger at 1200px, not 760px.
   MEASURED, not guessed: the full bar (logo + 7 links + language toggle + phone + order pill)
   needs ~1185px of content, and .nav-inner is capped by --maxw:1200px — so it only fits from a
   1200px viewport up. Below that it MUST collapse, otherwise the page scrolls sideways (it was
   overflowing by 73px at 1090 before this) and flexbox squashes the logo image to 0 width.
   The Spanish labels (Banquetes/Galería/Nosotros) are longer than the English ones, so the
   bilingual site is what sets this limit — re-measure if the nav gains another item. */
@media(max-width:1200px){
  .nav-links,.nav-order{display:none}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--nav-2);padding:14px;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.6)}
  .nav-links.open a{padding:12px 14px}
  .nav-toggle{display:block}
  .nav-phone{margin-left:auto}
}
/* Phone widths: the logo, phone pill and hamburger have to share one bar, so tighten all three. */
@media(max-width:560px){
  .nav-inner{gap:10px;padding:10px 14px}
  .nav-logo img{height:42px}
  .nav-phone{padding:7px 12px;font-size:.82rem}
}
@media(max-width:760px){
  .section{padding:60px 0}
  .section-head h2{font-size:1.8rem}
  .foot-top{grid-template-columns:1fr}
}

/* ---------- HERO CTA RESPONSIVE (rule 12: mobile overrides live at the END of the file,
     because same-specificity base rules later in the file silently defeat earlier queries) ---------- */
@media(max-width:920px){
  /* hero column is centered at this width, so center the CTA grid with it */
  .hero-cta{margin-left:auto;margin-right:auto}
  .hero-addr{margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
  /* stacked = one uniform pill width, centered (rule 1L) */
  .hero-cta{grid-template-columns:1fr;justify-items:center;max-width:none;gap:12px}
  .hero-cta .btn{width:min(320px,100%)}
  .hero-addr{justify-content:center;text-align:center;max-width:min(320px,100%)}
  .addr-mobile-break{display:block}
}

/* ---------- MOBILE NAV (house rule 4) ----------
   At <=760px the bar is LOGO + HAMBURGER only — no phone pill, no order pill. The home hero
   carries Order (first CTA) and the phone; the inner pages have no hero, so both also appear
   inside the hamburger dropdown. Above 760px the dropdown copies stay hidden and the bar pills
   do the job. Kept at the end of the file per rule 12. */
.nav-drop-only{display:none}
@media(max-width:760px){
  .nav-phone{display:none}
  .nav-links.open .nav-drop-only{display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:6px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.10);
    color:#f3ece2;font-weight:700}
  /* one divider above the contact block, not one per item */
  .nav-links.open .nav-drop-only + .nav-drop-only{border-top:0;margin-top:0;padding-top:2px}
  .nav-links.open .nav-drop-only.is-soon{color:#8b8276;font-weight:600;cursor:default}
}

/* ---------- CONTACT FORM (delivered to the admin dashboard, Ted 8/22) ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.mf-grid label{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.mf-grid label.wide{grid-column:1 / -1}
.mf-grid .req{color:var(--red)}
.mf-grid input,.mf-grid textarea{font-family:'Inter',sans-serif;background:var(--black-3);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px 14px;
  font-size:.95rem;font-weight:400;text-transform:none;letter-spacing:normal;outline:none;
  transition:border-color .18s}
.mf-grid input:focus,.mf-grid textarea:focus{border-color:var(--blue)}
.mf-grid textarea{resize:vertical;min-height:110px}
.mf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.mf-alt{color:var(--ink-soft);font-size:.9rem}
.mf-alt a{color:var(--blue-lt);font-weight:700}
.mf-privacy{color:#726b60;font-size:.78rem;margin-top:14px}
.form-flash{border-radius:12px;padding:18px 20px;margin-bottom:24px;font-size:.92rem}
.form-flash.ok{background:rgba(43,178,76,.12);border:1px solid rgba(43,178,76,.35);color:#bfe8c9}
.form-flash.ok strong{color:#fff;display:block;margin-bottom:4px}
.form-flash.ok a{color:#bfe8c9;font-weight:700;text-decoration:underline}
.form-flash.err{background:rgba(196,16,16,.12);border:1px solid rgba(196,16,16,.4);color:#f3c7c7}
.form-flash.err strong{color:#fff;display:block;margin-bottom:6px}
.form-flash.err ul{margin:0;padding-left:20px}
@media(max-width:560px){.mf-grid{grid-template-columns:1fr}}

/* ---------- FAQ (contact page) — visible answers backing the FAQPage schema ---------- */
.faq{border-bottom:1px solid var(--line-soft);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 2px;font-weight:700;
  font-size:1.02rem;position:relative;transition:color .18s;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:700;color:var(--red);line-height:1}
.faq[open] summary::after{content:'\2013'}
.faq p{color:var(--ink-soft);padding:0 34px 18px 2px;margin:0}

/* Owner Login pill in the footer copyright line (house rule 8) — deliberately subtle */
.owner-login{display:inline-block;margin-left:12px;padding:4px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);color:#8b8276;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;transition:.18s;vertical-align:middle}
.owner-login:hover{color:#f3ece2;border-color:var(--red)}