/* ============================================================
   Magic Taco — Da Cocinita | Theme CSS
   Built from the Design System handoff (tokens + components).
   Light theme. Dark used only for the footer.
   ============================================================ */

:root{
  --cream:#FBF8F2; --cream-alt:#F7F3EC; --white:#FFFFFF;
  --ink:#1E1A17; --ink-soft:#4a423c; --ink-muted:#7a706a; --ink-faint:#a79c92;
  --red:#E11E1E; --red-hover:#c81a1a; --red-pressed:#b01717; --red-deep:#A31414;
  --red-tint:#FFF4F0; --red-tint-warn:#FFE9E6;
  --sage:#DDE6D0; --sage-deep:#B9C6A8; --herb:#3E4B32; --herb-ink:#23301b; --herb-ink-soft:#2f3a26;
  --amber:#E8A33D; --amber-pale:#FFE9A8;
  --n100:#F1EAE0; --n200:#EDE7DD; --ph-a:#F1E9DA; --ph-b:#EBE1CF;
  --script-on-dark:#FFB8B8;
  --hair:rgba(30,26,23,.07); --hair-2:rgba(30,26,23,.09); --input-bd:rgba(30,26,23,.12);
  --foot-hair:rgba(251,248,242,.18);
  --sh-card:0 10px 26px rgba(30,26,23,.07);
  --sh-card-2:0 14px 34px rgba(30,26,23,.10);
  --sh-lift:0 22px 44px rgba(30,26,23,.14);
  --sh-red:0 14px 30px rgba(225,30,30,.32);
  --sh-modal:0 40px 80px rgba(30,26,23,.34);
  --sh-drawer:-30px 0 60px rgba(30,26,23,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1328px;
  --font-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-script:"Kaushan Script",cursive;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--herb)}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;line-height:.95;margin:0 0 .3em;letter-spacing:.005em}
p{margin:0 0 1em}
.script{font-family:var(--font-script);color:var(--red);text-transform:none;line-height:1.1;font-weight:400}
.eyebrow,.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link (WCAG) */
.skip-link{position:fixed;left:8px;top:-60px;z-index:100000;background:var(--red);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700;transition:top .18s ease}
.skip-link:focus{top:8px;color:#fff;outline:3px solid var(--herb);outline-offset:2px}

/* Visible focus for keyboard users (WCAG 2.4.7) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* Layout ------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto}
.section{padding:72px 56px}
.section--cream{background:var(--cream)}
.section--cream-alt{background:var(--cream-alt)}
.section--sage{background:var(--sage);color:var(--herb-ink-soft)}
.section--sage h1,.section--sage h2,.section--sage h3{color:var(--herb-ink)}
.grid{display:grid;gap:24px}
.split{display:grid;gap:56px;grid-template-columns:1fr 1fr;align-items:center}

/* Buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:800;font-size:16px;line-height:1;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease}
.btn--lg{padding:19px 38px;font-size:17px}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 8px 18px rgba(225,30,30,.28)}
.btn--primary:hover{background:var(--red-hover);color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(225,30,30,.36)}
.btn--primary:active{background:var(--red-pressed);transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.2)}
.btn--primary.btn--lg:hover{transform:translateY(-3px)}
.btn--secondary{background:var(--sage);color:var(--herb)}
.btn--secondary:hover{background:var(--sage-deep);color:var(--herb);transform:translateY(-2px)}
.btn--outline{background:transparent;border:2px solid var(--ink);color:var(--ink);padding:12px 24px}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--inverse{background:var(--cream);color:var(--red)}
.btn--inverse:hover{background:#fff;color:var(--red);transform:translateY(-3px)}
.btn[disabled],.btn.is-disabled{background:var(--n200);color:rgba(30,26,23,.42);box-shadow:none;cursor:not-allowed;pointer-events:none}
.textlink{font-weight:800;color:var(--red);border-bottom:2px solid var(--red);padding-bottom:2px}
.textlink:hover{color:var(--herb);border-color:var(--herb)}

/* Status ------------------------------------------------------ */
.status{display:inline-flex;align-items:center;gap:9px;background:var(--sage);color:var(--herb);
  font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px}
.status--closed{background:#F3EEE5;color:var(--ink-muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--herb);position:relative;flex:0 0 auto}
.dot--pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--herb);
  animation:pulsering 1.8s ease-out infinite}
.status--closed .dot{background:var(--ink-faint)}
@keyframes pulsering{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.badge{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.badge--red{background:var(--red);color:#fff}
.badge--amber{background:var(--amber);color:var(--ink)}
.badge--sage{background:var(--sage);color:var(--herb)}

/* Announcement bar ------------------------------------------- */
.announce{background:var(--red);color:var(--cream);text-align:center;
  font-weight:600;font-size:14px;padding:11px 24px}
.announce a{color:var(--cream);font-weight:700;border-bottom:1.5px solid rgba(251,248,242,.6)}
.announce a:hover{color:#fff}
.announce--closed{background:var(--herb)}

/* Nav / header ----------------------------------------------- */
.site-header{position:sticky;top:0;z-index:900}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--cream);padding:18px 56px;border-bottom:1px solid var(--hair)}
.nav__brand{font-family:var(--font-display);font-size:26px;text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.nav__brand:hover{color:var(--ink)}
.nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav__links a{color:var(--ink);font-weight:600;font-size:15px}
.nav__links a:hover,.nav__links .current-menu-item>a{color:var(--red)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__ig{width:28px;height:28px;border:2px solid var(--ink);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.nav__ig:hover{color:var(--red);border-color:var(--red)}
.nav__order{background:var(--red);color:#fff;font-weight:800;font-size:15px;padding:13px 24px;border-radius:999px}
.nav__order:hover{background:var(--red-hover);color:#fff}
.nav__burger{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.2s}

/* Off-canvas mobile menu (slides from the RIGHT) -------------- */
.offcanvas{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:var(--cream);
  z-index:1200;transform:translateX(100%);transition:transform .32s var(--ease);
  box-shadow:var(--sh-drawer);display:flex;flex-direction:column;padding:22px;overflow-y:auto}
.offcanvas.is-open{transform:translateX(0)}
.offcanvas__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.offcanvas__close{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:6px}
.offcanvas__links{list-style:none;margin:16px 0;padding:0}
.offcanvas__links a{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-size:26px;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--hair)}
.offcanvas__links a:hover,.offcanvas__links .current-menu-item>a{color:var(--red)}
.offcanvas__cta{margin-top:16px}
.scrim{position:fixed;inset:0;background:rgba(30,26,23,.30);z-index:1100;opacity:0;visibility:hidden;transition:opacity .3s ease}
.scrim.is-open{opacity:1;visibility:visible}
body.oc-open{overflow:hidden}

/* Hero -------------------------------------------------------- */
.hero{position:relative;min-height:820px;display:flex;align-items:flex-end;overflow:hidden}
.hero__media,.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media video{animation:heroDrift 22s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero__scrim{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(251,248,242,.18), rgba(251,248,242,.55) 55%, rgba(251,248,242,.90)),
    linear-gradient(180deg, rgba(251,248,242,.72), rgba(251,248,242,.12) 45%, rgba(251,248,242,.86))}
.hero__inner{position:relative;z-index:2;padding:56px;max-width:var(--wrap);margin:0 auto;width:100%}
.hero__eyebrow{font-family:var(--font-script);color:var(--red);font-size:40px;line-height:1}
.hero h1{font-size:clamp(46px,8vw,116px);margin:.1em 0 .3em;color:var(--ink)}
.hero__sub{font-size:19px;font-weight:500;max-width:44ch;color:var(--ink-soft);margin-bottom:1.4em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.ph{background-image:repeating-linear-gradient(45deg,var(--ph-a),var(--ph-a) 14px,var(--ph-b) 14px,var(--ph-b) 28px);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-family:var(--font-mono);
  font-size:12px;text-align:center;padding:20px}

/* Location strip --------------------------------------------- */
.locstrip{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.locstrip__in{max-width:var(--wrap);margin:0 auto;padding:18px 56px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.locstrip strong{color:var(--herb)}
.locstrip .mono{color:var(--ink-muted)}
.locstrip .spacer{flex:1}

/* Social proof ------------------------------------------------ */
.marquee{overflow:hidden}
.marquee__track{display:flex;gap:48px;width:max-content;animation:marq 24s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--font-display);text-transform:uppercase;font-size:30px;color:var(--herb)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.stat{font-family:var(--font-display);color:var(--red);font-size:84px;line-height:.9}
.review-card{background:var(--white);border-radius:20px;padding:28px;box-shadow:var(--sh-card)}
.stars{color:var(--amber);font-size:20px;letter-spacing:2px}

/* Cards / menu ------------------------------------------------ */
.card{background:var(--white);border-radius:18px;box-shadow:var(--sh-card);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:22px}
.card__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card__name{font-family:var(--font-display);text-transform:uppercase;font-size:28px;margin:0}
.card__price{font-family:var(--font-display);color:var(--red);font-size:28px}
.card__desc{color:var(--ink-soft);font-size:15px;margin:.5em 0 1em}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Banners ----------------------------------------------------- */
.banner{background:var(--red);color:#fff;text-align:center;padding:26px 56px}
.banner h2,.banner h3{color:#fff;margin:0}
.banner .up{color:var(--amber-pale)}
.banner--warn strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:34px}

/* How to order ------------------------------------------------ */
.order-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:stretch}
.order-pickup{background:var(--red);color:#fff;border-radius:20px;padding:40px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.order-pickup h3{color:#fff;font-size:56px}
.order-alt{display:grid;gap:24px}
.order-alt .card{padding:24px}

/* Forms ------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--ink-muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:16px;
  padding:14px 16px;border:1px solid var(--input-bd);border-radius:12px;background:var(--white);color:var(--ink)}
.field textarea{min-height:118px;resize:vertical}
.field .err{color:var(--red);font-size:13px;margin-top:6px}
.field.has-error input,.field.has-error textarea{border-color:var(--red)}
.form-note{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted)}
.form-success{background:var(--sage);color:var(--herb);border-radius:16px;padding:20px 24px;font-weight:700}

/* Footer ------------------------------------------------------ */
.site-footer{background:var(--herb);color:var(--cream)}
.site-footer a{color:var(--cream)}
.site-footer a:hover{color:#fff}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:72px 56px 32px;box-sizing:border-box}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px}
.foot__script{font-family:var(--font-script);color:var(--script-on-dark);font-size:32px}
.foot__email{font-family:var(--font-display);text-transform:none;font-size:clamp(34px,6vw,76px);color:var(--cream);
  border-bottom:4px solid rgba(251,248,242,.35);display:inline-block;line-height:1.05}
.foot__email:hover{border-color:var(--cream);color:var(--cream)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px}
.foot__cols h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--sage-deep);text-transform:uppercase}
.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols li{font-size:15px;line-height:1.7}
.foot__cols .muted{color:var(--sage-deep)}
.signup{background:rgba(251,248,242,.08);border-radius:22px;padding:32px 34px}
.signup h3{color:var(--cream);text-transform:none;font-size:34px}
.signup__row{display:flex;gap:10px;margin-top:14px}
.signup input{flex:1;background:rgba(251,248,242,.16);border:0;color:var(--cream);border-radius:999px;padding:14px 18px}
.signup input::placeholder{color:rgba(251,248,242,.7)}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:56px;padding-top:20px;border-top:1px solid var(--foot-hair);
  font-family:var(--font-mono);font-size:12px;color:var(--sage-deep)}
.foot__bottom a{color:var(--sage-deep)}

/* Sticky mobile order button --------------------------------- */
.mobile-order{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:800}
.mobile-order .btn{width:100%;box-shadow:0 14px 30px rgba(225,30,30,.42)}

/* Reveal on scroll ------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* Squiggle ---------------------------------------------------- */
.squiggle{position:absolute;top:30px;left:0;width:100%;height:80px;pointer-events:none;opacity:.55}
.squiggle path{stroke:var(--red);stroke-width:7;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw 4.5s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}

/* WooCommerce brand touch-ups -------------------------------- */
.woocommerce-page{background:var(--cream)}
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,
.woocommerce .button.alt,.wc-block-components-button{background:var(--red)!important;color:#fff!important;
  border-radius:999px!important;font-weight:800!important}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--red-hover)!important}
.woocommerce span.onsale{background:var(--amber)!important;color:var(--ink)!important}
.woocommerce .price,.woocommerce ul.products li.product .price{color:var(--red)!important;font-family:var(--font-display)}

/* Responsive -------------------------------------------------- */
@media (max-width:1024px){
  .section{padding:40px 20px}
  .nav{padding:16px 20px}
  .nav__links,.nav__ig{display:none}
  .nav__burger{display:block}
  .hero{min-height:660px}
  .hero__inner{padding:24px 20px}
  .split,.order-grid,.foot__grid,.foot__cols,.menu-grid{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__in{padding:34px 20px 26px}
  .locstrip__in{padding:16px 20px}
  .mobile-order{display:block}
  body{padding-bottom:84px}
}
@media (max-width:520px){
  .menu-grid{grid-template-columns:1fr}
}

/* Reduced motion (WCAG 2.3.3 / user comfort) ----------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__media video{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Cart: header button + right-side drawer
   ============================================================ */
.nav__cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;color:var(--ink)}
.nav__cart:hover{color:var(--red);border-color:var(--red)}
.nav__cart .mt-cart-count{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;
  background:var(--red);color:#fff;border-radius:999px;font-family:var(--font-body);font-weight:800;
  font-size:11px;line-height:20px;text-align:center;padding:0 5px}
.nav__cart[data-empty="1"] .mt-cart-count{display:none}

/* Drawer reuses the off-canvas mechanics but is cart-flavored */
.cart-drawer{position:fixed;inset:0 0 0 auto;width:min(92vw,480px);background:var(--cream);
  z-index:1200;transform:translateX(100%);transition:transform .32s var(--ease);
  box-shadow:var(--sh-drawer);display:flex;flex-direction:column}
.cart-drawer.is-open{transform:translateX(0)}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 12px;border-bottom:1px solid var(--hair)}
.cart-drawer__head h2{font-size:32px;margin:0}
.cart-drawer__body{flex:1;overflow-y:auto;padding:8px 24px 24px}
.cart-drawer__deal{display:inline-block;background:var(--sage);color:var(--herb-ink-soft);
  border-radius:999px;padding:9px 15px;font-weight:800;font-size:13.5px;margin:14px 0 6px}
.cart-drawer__foot{background:var(--white);border-top:1px solid var(--hair);padding:18px 24px 22px}

/* Style WooCommerce's mini-cart inside the drawer */
.cart-drawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.cart-drawer .woocommerce-mini-cart__empty-message{color:var(--ink-soft);padding:24px 0}
.cart-drawer li.woocommerce-mini-cart-item{display:grid;grid-template-columns:56px 1fr auto;
  gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--hair);position:relative}
.cart-drawer li.woocommerce-mini-cart-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;margin:0}
.cart-drawer li.woocommerce-mini-cart-item a:not(.remove){color:var(--ink);font-family:var(--font-display);
  text-transform:uppercase;font-size:18px;line-height:1.05}
.cart-drawer .woocommerce-mini-cart-item .quantity{display:block;color:var(--ink-muted);font-family:var(--font-mono);font-size:13px;margin-top:2px}
.cart-drawer a.remove{position:absolute;top:14px;right:0;color:var(--ink-muted)!important;
  font-size:18px;line-height:1;width:24px;height:24px;text-align:center;border-radius:50%}
.cart-drawer a.remove:hover{color:var(--red)!important;background:var(--red-tint)}
.cart-drawer .woocommerce-mini-cart__total{display:flex;align-items:baseline;justify-content:space-between;
  padding:6px 0 14px;border-top:2px solid var(--ink);margin-top:6px}
.cart-drawer .woocommerce-mini-cart__total strong{font-weight:800;font-size:17px}
.cart-drawer .woocommerce-mini-cart__total .amount{font-family:var(--font-display);color:var(--red);font-size:30px}
.cart-drawer .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:10px;margin:0}
.cart-drawer .woocommerce-mini-cart__buttons a{width:100%;text-align:center;background:var(--red)!important;color:#fff!important;
  border-radius:999px!important;font-weight:800!important;padding:14px 20px!important}
.cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout){background:transparent!important;
  color:var(--ink)!important;border:2px solid var(--ink)!important}
.cart-drawer__note{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);margin-top:10px;text-align:center}

/* Kill the default inline "View cart" link that WooCommerce injects after Add to order */
.woocommerce a.added_to_cart{display:none!important}

/* Mobile sticky cart pill */
.mobile-order .mt-cart-line{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800}
.mobile-order .mt-cart-line .sep{opacity:.6}