/* =========================================================
   CINCO DE MAYO theme  (loads after the shared styles)
   The build already flipped the shared dark palette to warm
   off-white (see make_cinco.py). This file handles the spots
   that need a human touch: text on color, photos, the hero.
   ========================================================= */
:root{ --marigold:#e39a00; --paper:#fffaf2; --paper2:#f7efe2; }
html, body{ background:var(--paper); }
body{ background-image:radial-gradient(rgba(194,59,59,.035) 1px, transparent 1px); background-size:18px 18px; }
#mouseFog{ display:none !important; }
h1, h2, .story-h, .mh-title, .order-h{ letter-spacing:.01em; }

/* text that sits on a color stays white */
.btn-solid, .nav-cta, .navpill.nav-cta, .c-next, .mp-cta, .ev-badge, .evf-count,
.pay-pill.paid, .wz-chip.on, .tab-btn.active, .decide-btn, .fav-ribbon, .sold-badge, .st-pill{ color:#fff; }
.btn-marigold, .wz-chip.on, .tab-btn.active{ color:#2b1f14; }
.btn-marigold{ background:#f3a712; }
.tab-btn.active{ background:#c23b3b; color:#fff; border-color:#c23b3b; }
.evf-count{ color:#2b1f14; }
.dish-price-txt, .vi-k, .ft-h, .hrs-row.is-today dt, .hrs-row.is-today dd, .menu-cat-note{ color:#b56d00; }
.eyebrow{ color:#0f8a83; }
.section-head h2, .story-h{ color:#2b1f14; }

/* cards: crisp white on paper */
.dish, .vb, .cx-card, .ev-card, .ev-feature, .fin-card, .wz-inline, .info-card, .order-opt, .modal-box, .join-card, .ev-news, .ft-news{ background-color:#fff; }
.dish{ box-shadow:0 10px 26px -18px rgba(80,50,20,.35); }
.dish-fav{ background:linear-gradient(160deg, #fff6df, #fff); }
.modal-box.glass{ background:rgba(255,253,248,.94); }

/* photos keep white captions on a dark fade */
.fg-tile::after, .vb-photo::after{ background:linear-gradient(0deg, rgba(20,12,6,.82) 0%, rgba(20,12,6,.25) 45%, transparent 75%) !important; }
.fg-cap, .fg-cap b, .fg-desc, .vb-photo figcaption, .vb-photo figcaption b, .vb-photo figcaption p{ color:#fff !important; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.vb-label{ background:rgba(255,255,255,.92); color:#2b1f14; border-color:transparent; }
.cater-band .cb-inner h2{ color:#2b1f14; }
footer, .site-footer{ background:#f6ecdc; border-top:6px solid transparent; border-image:linear-gradient(90deg, #d92b1f, #f2b705, #1f8a3d, #2fb3d9, #7b3fa0, #e8568f) 1; }
.lightbox{ background:rgba(255,250,242,.97); }
.zoom-view{ background:rgba(255,250,242,.97); }
.zoom-view figcaption{ color:#2b1f14; }

/* storefront card with the logo */
.ext-ph{ background:radial-gradient(ellipse at 50% 30%, rgba(243,167,18,.16), transparent 65%), #fffdf8; }

/* nav + papel on a light page */
.navpill{ background:rgba(255,255,255,.88); box-shadow:0 4px 14px -8px rgba(80,50,20,.35); }
#banner-wrap{ background:linear-gradient(180deg, rgba(255,250,242,.96) 0%, rgba(255,250,242,.6) 60%, transparent 100%); }
.flag{ filter:drop-shadow(0 5px 6px rgba(80,50,20,.25)); }

/* ---------- home hero: logo + a fan of photos ---------- */
.hero-cinco{ min-height:auto; padding-bottom:4rem; overflow:hidden; background:radial-gradient(ellipse 70% 60% at 50% 20%, rgba(243,167,18,.16), transparent 70%); }
.hero-cinco .hc-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(var(--banner-h) + 4.4rem) 5vw 0; }
.hc-logo{ margin:.6rem 0 .4rem; line-height:0; }
.hc-logo img{ width:min(640px, 88vw); height:auto; filter:drop-shadow(0 18px 26px rgba(80,50,20,.22)); animation:heroIn 1s .1s both; }
.hero-cinco .hf-desc{ color:#4a3a2a; max-width:46ch; }
.hc-fan{ position:relative; height:300px; margin:2.6rem auto 0; width:min(1000px, 100%); }
.hc-card{ position:absolute; top:20px; left:50%; width:220px; aspect-ratio:1; margin:0; border-radius:20px; overflow:hidden; border:6px solid #fff;
  box-shadow:0 22px 40px -18px rgba(80,50,20,.5); animation:fanFloat 7s ease-in-out infinite; }
.hc-card img{ width:100%; height:100%; object-fit:cover; }
.hc-card.c1{ transform:translateX(-215%) rotate(-12deg); top:44px; animation-delay:-1s; }
.hc-card.c2{ transform:translateX(-128%) rotate(-6deg); top:16px; animation-delay:-2s; }
.hc-card.c3{ transform:translateX(-50%) rotate(0deg); top:0; width:250px; z-index:2; animation-delay:-3s; }
.hc-card.c4{ transform:translateX(28%) rotate(6deg); top:16px; animation-delay:-4s; }
.hc-card.c5{ transform:translateX(115%) rotate(12deg); top:44px; animation-delay:-5s; }
@keyframes fanFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.hero-cinco .hf-scroll{ position:relative; margin-top:1rem; }
@media (max-width:760px){
  .hc-fan{ height:210px; } .hc-card{ width:150px; border-width:4px; } .hc-card.c3{ width:170px; }
  .hc-card.c1, .hc-card.c5{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .hc-card{ animation:none; } }

/* ---------- about ---------- */
.about-cinco{ padding-top:0; }
.ac-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ac-photos{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:460px; }
.ac-photos img{ width:100%; height:100%; object-fit:cover; border-radius:20px; border:5px solid #fff; box-shadow:0 18px 36px -20px rgba(80,50,20,.5); }
.ac-photos img:first-child{ grid-row:1 / span 2; }
.ac-text p{ font-size:1.08rem; line-height:1.75; color:#4a3a2a; margin-bottom:1rem; }
@media (max-width:860px){ .ac-grid{ grid-template-columns:1fr; } .ac-photos{ height:340px; } }

/* no reservations at this location (yet) */
.no-res [onclick^="openReservations"], .no-res .oo-reservations{ display:none !important; }
.mil-badge{ display:none !important; }
.hero-food.hero-cinco{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:0; height:auto; text-align:center; }
.hero-cinco .hc-inner{ width:100%; align-items:center; text-align:center; }
.hero-cinco .hf-ctas{ justify-content:center; }
.navpill.nav-cta{ background:#c23b3b; color:#fff; border-color:#c23b3b; }
.navpill.nav-cta:hover{ background:#a92f2f; }

/* ---------- callouts on a light page: pastel tiles, dark readable text ---------- */
body .menu-promo{ animation:none; box-shadow:0 16px 32px -20px rgba(80,50,20,.4); }
body .menu-promo::before{ opacity:.45; }
body .menu-promo .mp-head{ color:#2b1f14; }
body .menu-promo .mp-body{ color:#4a3a2a; }
body .promo-red{ background:linear-gradient(155deg, #ffece8, #ffe0d8); border:1px solid #f1a497; }
body .promo-red .mp-kicker{ color:#b0302b; }   body .promo-red .mp-cta{ background:#c23b3b; border-color:#c23b3b; color:#fff; }
body .promo-green{ background:linear-gradient(155deg, #e8f7ec, #dcf1e3); border:1px solid #94d1a7; }
body .promo-green .mp-kicker{ color:#17733a; } body .promo-green .mp-cta{ background:#1f8a3d; border-color:#1f8a3d; color:#fff; }
body .promo-gold{ background:linear-gradient(155deg, #fff4da, #ffe8c6); border:1px solid #efc26c; }
body .promo-gold .mp-kicker{ color:#9a5800; }  body .promo-gold .mp-cta{ background:#f3a712; border-color:#e39a00; color:#2b1f14; }
body .promo-teal{ background:linear-gradient(155deg, #e6f6fb, #d8f1f3); border:1px solid #8fcfe0; }
body .promo-teal .mp-kicker{ color:#0b6b86; }  body .promo-teal .mp-cta{ background:#12958f; border-color:#12958f; color:#fff; }
body .promo-purple{ background:linear-gradient(155deg, #f4ebfc, #fbe6f0); border:1px solid #caa7e8; }
body .promo-purple .mp-kicker{ color:#6a33a0; } body .promo-purple .mp-cta{ background:#7b3fa0; border-color:#7b3fa0; color:#fff; }
body .promo-rainbow{ border:2px solid transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(120deg, #d92b1f, #f2b705, #1f8a3d, #2fb3d9, #7b3fa0);
  background-origin:border-box; background-clip:padding-box, border-box; }
body .promo-rainbow .mp-kicker{ color:#b0302b; } body .promo-rainbow .mp-cta{ background:#2b1f14; border-color:#2b1f14; color:#fff; }

/* ---------- "Website Powered by Solar Flare" credit on the light footer ---------- */
.sf-credit, .sf-credit span{ color:#4a3a2a !important; }
.sf-credit{ border-color:rgba(43,31,20,.22) !important; background:rgba(43,31,20,.04) !important; }
.sf-credit:hover, .sf-credit:hover span{ color:#c23b3b !important; }
body .promo-rainbow .mp-kicker{ background:none !important; -webkit-text-fill-color:#b0302b; color:#b0302b; }

/* ---------- language hint: keep the Mexican flag (the palette flip turned its white stripe brown) ---------- */
.lang-hint{ background:rgba(255,255,255,.98); color:#2b1f14; border-color:rgba(194,59,59,.35); box-shadow:0 14px 34px rgba(80,50,20,.22), 0 0 0 4px rgba(243,167,18,.1); }
.lh-flag{ background:linear-gradient(90deg, #006847 0 33.4%, #fff 33.4% 66.6%, #ce1126 66.6%); color:#2b1f14; box-shadow:inset 0 0 0 1px rgba(43,31,20,.14); }
.lh-text span{ color:rgba(43,31,20,.72); }
.lh-close{ background:#fff; color:#2b1f14; border-color:rgba(43,31,20,.25); }
.lh-bar i{ background:linear-gradient(90deg, #006847 0 33.4%, #e9e2d6 33.4% 66.6%, #ce1126 66.6%); }

/* ---------- Find Us: info + map only (no Out front / Parking cards) ---------- */
.visit-grid{ grid-template-columns:minmax(330px, 1fr) 1.5fr; grid-template-rows:minmax(400px, auto); grid-template-areas:"info map"; }
@media (max-width:1040px){ .visit-grid{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(380px, auto); grid-template-areas:"info map"; } }
@media (max-width:700px){ .visit-grid{ grid-template-columns:1fr; grid-template-rows:none; grid-template-areas:"info" "map"; } }

/* ---------- placeholder art: small AI badge + one-line note (js/cinco.js) ---------- */
.ai-host{ position:relative; }
.ai-badge{ position:absolute; left:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:.35rem; max-width:calc(100% - 20px);
  padding:.28rem .6rem .28rem .4rem; border-radius:99px; background:rgba(20,12,6,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#fff; font-size:.68rem; font-weight:600; line-height:1.2; letter-spacing:.01em; text-align:left; white-space:nowrap; pointer-events:none; }
.ai-badge[hidden]{ display:none; }
.ai-badge img{ flex:0 0 16px; width:16px; height:16px; display:block; position:static !important; inset:auto !important; transform:none !important; filter:none !important; }
.ai-txt{ overflow:hidden; text-overflow:ellipsis; }
.fg-tile .ai-badge, .story-photo .ai-badge, .lb-stage .ai-badge{ left:auto; right:10px; top:10px; bottom:auto; }   /* captions sit bottom-left */
.hc-card .ai-badge{ left:6px; bottom:6px; font-size:.6rem; padding:.22rem .5rem .22rem .32rem; } .hc-card .ai-badge img{ width:13px; height:13px; flex-basis:13px; }
.lb-stage .ai-badge{ right:14px; top:14px; }
@media (max-width:520px){
  .ai-badge{ font-size:.58rem; gap:.25rem; padding:.2rem .45rem .2rem .28rem; letter-spacing:0; }
  .ai-badge img{ width:12px; height:12px; flex-basis:12px; }
  .fg-tile .ai-badge{ right:7px; top:7px; max-width:calc(100% - 14px); }
}
.lb-ai{ display:block; margin-top:.35rem; font-size:.78rem; opacity:.75; }
.lb-ai[hidden]{ display:none; }
.ai-note{ display:flex; align-items:center; justify-content:center; gap:.5rem; max-width:640px; margin:1.1rem auto 0; padding:0 1rem;
  font-size:.8rem; line-height:1.45; color:rgba(43,31,20,.62); text-align:left; }
.ai-note[hidden]{ display:none; }
.ai-note img{ flex:0 0 26px; width:26px; height:26px; padding:5px; border-radius:50%; background:rgba(20,12,6,.62); }      /* the white icon needs a dark dot on the light page */

/* ---------- "coming soon" dialog (reservations) and the catering note ---------- */
.soon-box{ text-align:center; background:#fff; }
.soon-pill, .soon-card .soon-pill{ display:inline-block; padding:.25rem .7rem; border-radius:99px; background:#fff4da; color:#9a5800; border:1px solid #efc26c;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem; }
.soon-box h3{ margin-bottom:.6rem; }
.soon-body, .soon-card p{ color:#4a3a2a; line-height:1.6; margin-bottom:1.3rem; }
.soon-ctas{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.soon-ctas .btn[hidden]{ display:none; }
.soon-card{ max-width:620px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--line); border-radius:24px; padding:2.2rem 1.8rem;
  box-shadow:0 18px 40px -24px rgba(80,50,20,.4); }
.soon-card h3{ font-size:1.5rem; margin-bottom:.6rem; }

/* ---------- about: three pieces of art ---------- */
.ac-photos .ac-ph{ position:relative; margin:0; min-height:0; }
.ac-photos .ac-ph:first-child{ grid-row:1 / span 2; }
.ac-photos .ac-ph img{ width:100%; height:100%; }

/* the shared map styling darkens Google Maps for El Burrito's dark site; Cinco is light */
.vb-map iframe{ filter:none; }