/* ============================================================
   Pizza Restaurant Template — hybrid PHP+MySQL (LOS)
   Refresh / lighter house style · Inter · brand red + gold
   Brand colors live in :root below — change them per client.
   ============================================================ */
:root{
  --ink:#1b1512; --ink-soft:#6a5f54; --cream:#fbf6ef; --cream-2:#f4ece1;
  --white:#ffffff; --red:#3AB54A; --red-d:#1F7A2E; --gold:#f0a500; --gold-d:#cf8a00;
  --nav:#17120f; --nav-2:#0f0b09; --line:#ece3d7; --shadow:0 18px 50px rgba(40,22,10,.10);
  --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(--white);
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
.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-gold{background:var(--gold);color:#241a06}
.btn-gold:hover{background:var(--gold-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:#d8cdbd}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
/* 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:#8b8276;border:1.5px dashed #cbc0b0;cursor:default}
.btn.is-soon:hover{transform:none;background:transparent;color:#8b8276}
.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}
.section.alt{background:var(--cream)}
.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 ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);
  box-shadow:0 2px 18px rgba(0,0,0,.28)}
.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,.08)}
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:.92rem;
  padding:9px 12px;border:1.5px solid rgba(255,255,255,.28);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(--gold);color:var(--gold)}
.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:#a49b90;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:#ffd400;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 ---------- */
.hero{position:relative;background:radial-gradient(120% 130% at 85% 10%,#fff7ea 0%,var(--cream) 45%,#f0e5d4 100%);
  overflow:hidden}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:70px 24px 80px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:3.3rem;letter-spacing:-.03em}
.hero h1 .hl{color:var(--red)}
/* 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. The address is a cell in the same grid, paired
   against the Directions pill (rule 4). Modelled on the Saray Bakery hero. */
.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 row (Saray 2 / Saray Bakery pattern): the address gets MORE width than the
   Directions pill beside it. It is its own flex row rather than a cell in the pill grid, so the
   pills keep identical widths (rule 1L) while the address still has room for TWO lines at 1.3rem.
   Rule 1d: big (1.3rem/700) clickable Google-Maps directions link, underlined, never clipped. */
.hero-addr-row{display:flex;align-items:stretch;gap:14px;max-width:580px;margin-top:14px}
.hero-addr-row .btn{flex:0 0 190px;justify-content:center;text-align:center;min-height:58px;
  padding:14px 18px;white-space:nowrap}
.hero-addr{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-height:58px;margin:0;
  line-height:1.25;font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid currentColor}
.hero-addr:hover{color:var(--red)}
.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)}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.hero-art .disc{position:absolute;width:108%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe9c2 60%,transparent 72%);filter:blur(2px)}
.hero-art img{position:relative;width:100%;max-width:480px;filter:drop-shadow(0 26px 36px rgba(60,30,5,.28))}
.hero-float{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:12px 16px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px}
.hero-float.f1{left:-8px;bottom:38px}
.hero-float .dot{width:9px;height:9px;border-radius:50%;background:#2bb24c;box-shadow:0 0 0 4px rgba(43,178,76,.18)}

/* ---------- SPECIALS ---------- */
.specials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.special-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 8px 26px rgba(40,22,10,.06);transition:.22s;display:flex;flex-direction:column}
.special-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.special-img{height:200px;background:#f3ece1;overflow:hidden}
.special-img img{width:100%;height:100%;object-fit:cover}
.special-img.empty{display:flex;align-items:center;justify-content:center;color:#d8cdbd;font-size:2.6rem}
.special-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.special-price{color:var(--red);font-weight:800;font-size:1.5rem}
.special-title{font-size:1.15rem;font-weight:800;margin:2px 0 8px}
.special-desc{color:var(--ink-soft);font-size:.94rem}
.special-tag{display:inline-block;align-self:flex-start;margin-bottom:12px;background:#fbe9c6;color:#8a5a00;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* ---------- FOOD SLIDESHOW (gallery-driven) ---------- */
.slideshow{position:relative;max-width:980px;margin:0 auto;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);background:#000;aspect-ratio:16/9}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slideshow .slide.on{opacity:1}
.slideshow .slide img{width:100%;height:100%;object-fit:cover}
.slideshow .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 22px;color:#fff;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.7))}
.slide-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.slide-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#d8cdbd;cursor:pointer;transition:.2s}
.slide-dots button.on{background:var(--red);transform:scale(1.25)}

/* ---------- ABOUT / CATERING SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:16px;box-shadow:var(--shadow)}
.split.catering{background:var(--ink);color:#fff;border-radius:22px;padding:48px;align-items:center}
.split.catering .eyebrow{color:var(--gold)}
.split.catering h2{font-size:2rem;margin-bottom:14px}
.split.catering p{color:rgba(255,255,255,.72);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}
.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:linear-gradient(120% 130% at 80% 10%,#fff7ea,var(--cream) 55%,#efe4d3);
  padding:54px 0 48px;text-align:center;border-bottom:1px solid var(--line)}
.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 #d8cdbd;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 #b00;background:repeating-linear-gradient(45deg,#fff3f3,#fff3f3 18px,#ffe3e3 18px,#ffe3e3 36px);
  border-radius:14px;padding:26px 28px;margin-bottom:40px;text-align:center;color:#8a0000}
.tpl-warn-tag{display:inline-block;background:#b00;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:#b00;line-height:1.05}
.tpl-warn p{max-width:60ch;margin:12px auto 0;color:#7a1010;font-size:1rem;font-weight:500}

/* ---------- MENU ---------- */
.menu-note{background:#fff7e6;border:1px solid #f1dca8;color:#7a5a12;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(--gold);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 #e6dccd}
.menu-item:last-child{border-bottom:0}
.menu-item .nm{font-weight:700;font-size:1rem}
.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 #cfc4b4;transform:translateY(-4px);min-width:14px}
.menu-item .pr{font-weight:800;color:var(--red);white-space:nowrap;font-size:1rem}
.size-table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:.92rem}
.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 #efe6d8;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:#fff;border:2px dashed var(--red);border-radius:16px;padding:28px 30px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 26px rgba(40,22,10,.06)}
.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(--ink);color:#fff;font-weight:800;
  letter-spacing:.12em;padding:8px 16px;border-radius:8px;font-size:.95rem}
.coupon .exp{font-size:.78rem;color:#a89a86;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.coupon .star{position:absolute;top:-12px;right:18px;background:var(--gold);color:#241a06;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(40,22,10,.08);aspect-ratio:4/3;background:var(--cream-2)}
/* .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,.72))}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,10,8,.94);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,.6)}
.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)}
.info-row .ic{width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--red);display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.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);color:#cfc6ba}
.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(--gold)}
.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)}
.foot-social{display:flex;gap:12px;margin-top:8px}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;transition:.2s}
.foot-social a:hover{background:var(--red)}
.foot-social svg{width:18px;height:18px;fill:#fff}
.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,.4)}
  .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){
  .specials-grid{grid-template-columns:1fr}
  .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{justify-content:center;text-align:center}
}
@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,.hero-addr,.hero-addr-row .btn{width:min(320px,86vw)}
  .hero-addr-row{flex-direction:column;align-items:center;gap:12px;max-width:none}
  .hero-addr-row .btn{flex:0 0 auto}
  .hero-addr.wide{grid-column:auto}
}

/* ---------- 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}
}

/* ---------- FAQ (contact page) — visible answers backing the FAQPage schema ---------- */
.faq{border-bottom:1px solid var(--line);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}
.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)}

/* ---------- LANGUAGE TOGGLE — house standard segmented pill (reference build: Saray 2) ----------
   Both languages are ALWAYS visible; the active one is filled with the SITE ACCENT (green here,
   gold on Saray) so it matches every other active state on the site. Real flag graphics come from
   flag-icons — emoji flags render as the bare letter pair on Windows, so emoji is not an option.
   Rule 4: the mobile bar is "logo + lang toggle only", so this is NOT hidden at <=760px. */
.lang{display:flex;align-items:stretch;flex-shrink:0;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;font-size:.72rem}
.lang span,.lang a{padding:7px 10px;display:flex;align-items:center;gap:5px;white-space:nowrap;
  line-height:1;transition:.18s}
.lang .fi{font-size:.9rem;border-radius:2px;flex-shrink:0}
.lang .on{background:var(--red);color:#fff;font-weight:800}
.lang .off{color:rgba(243,236,226,.62);font-weight:700;text-decoration:none}
.lang a.off:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:560px){
  .lang{font-size:.66rem}
  .lang span,.lang a{padding:6px 9px;gap:4px}
}

/* ---------- SPANISH LINK-OUT (English-only site → the Spanish sister site) ----------
   House pattern .spanish-prompt / .spanish-link from the two-site template. Ted 8/17: the
   English site gets no toggle, but it DOES get this link in the hero AND the footer, so a
   Spanish-speaking customer knows the other site exists. Flag is a real graphic (flag-icons),
   never the emoji — Windows renders emoji flags as the bare letters "ES". */
.spanish-prompt{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;
  font-size:.95rem;color:var(--ink-soft)}
.spanish-prompt .fi{font-size:1rem;border-radius:2px;flex-shrink:0}
.spanish-link{color:var(--red);font-weight:700;border-bottom:1px solid currentColor;
  transition:.18s}
.spanish-link:hover{color:var(--red-d)}
/* footer variant sits on the dark bar, so it needs light text */
.foot-spanish{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  padding:16px 24px 4px;font-size:.92rem;color:#b9b1a6;text-align:center}
.foot-spanish .fi{font-size:1rem;border-radius:2px;flex-shrink:0}
.foot-spanish .spanish-link{color:#8ee69b}
.foot-spanish .spanish-link:hover{color:#fff}
@media(max-width:560px){
  .spanish-prompt,.foot-spanish{font-size:.86rem;justify-content:center;text-align:center}
}