/* Tequila Mama Cantina - homepage styles.
   Generated by build_home.py from the Claude Design export: the page-level <style>
   block, plus one rule per style-hover/-active/-focus attribute, plus the responsive
   switches the export performed in JavaScript. Do not hand-edit; edit the builder. */

/* ---- page style block (verbatim from the export) ---- */
@view-transition { navigation: auto; }
@property --tmt-glow { syntax: "<length>"; inherits: false; initial-value: 0px; }
:root { --tmt-mono: var(--font-rauda-solid-unicase); }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-inria); }
a { color: var(--tmt-teal-ink); text-decoration: none; }
a:hover { color: var(--tmt-red-ink); }
:focus-visible { outline: 3px solid var(--tmt-teal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; }
@keyframes tmt-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tmt-condense { to { padding-block: 7px; box-shadow: 0 4px 0 color-mix(in oklab, var(--tmt-ink) 45%, transparent); } }
@keyframes tmt-drift-near { from { transform: translateY(60px) rotate(-6deg); } to { transform: translateY(-90px) rotate(6deg); } }
@keyframes tmt-drift-far { from { transform: translateY(30px) rotate(4deg); } to { transform: translateY(-40px) rotate(-4deg); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tmt-reveal { animation: tmt-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
    .tmt-stagger > * { animation: tmt-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
    .tmt-stagger > *:nth-child(2) { animation-range: entry 4% entry 52%; }
    .tmt-stagger > *:nth-child(3) { animation-range: entry 0% entry 48%; }
    .tmt-drift-near { animation: tmt-drift-near linear both; animation-timeline: view(); animation-range: cover; }
    .tmt-drift-far { animation: tmt-drift-far linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .tmt-header { animation: tmt-condense linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
  }
}
#tmt-nav { opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 280ms cubic-bezier(0.22,1,0.36,1), transform 280ms cubic-bezier(0.22,1,0.36,1), visibility 280ms linear; }
#tmt-nav.is-open { opacity: 1; visibility: visible; transform: none; }
#tmt-cats a:hover, #tmt-cats a:focus-visible { color: var(--tmt-red); }
#tmt-cats a:hover .cat-sub, #tmt-cats a:focus-visible .cat-sub, #tmt-cats a:hover .cat-arrow, #tmt-cats a:focus-visible .cat-arrow { opacity: 1; transform: none; }
#tmt-nav .nav-big .nav-word { position: relative; display: inline-block; }
#tmt-nav .nav-big .nav-word::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0.1em; height: 0.14em; background: var(--tmt-yellow); transition: right 420ms cubic-bezier(0.22,1,0.36,1); }
#tmt-nav .nav-big:hover .nav-word::after, #tmt-nav .nav-big:focus-visible .nav-word::after { right: 0; }
#tmt-nav .nav-big .nav-arrow { position: absolute; left: 100%; top: 50%; margin-left: 0.14em; opacity: 0; transform: translate(-22px, -50%) rotate(-8deg); transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 380ms cubic-bezier(0.34,1.56,0.64,1); }
#tmt-nav .nav-big:hover .nav-arrow, #tmt-nav .nav-big:focus-visible .nav-arrow { opacity: 1; transform: translate(0, -50%); }
#tmt-nav .nav-big:hover, #tmt-nav .nav-big:focus-visible { color: var(--tmt-red); transform: translateX(6px); }
#specials .sp-card:hover .sp-photo, #specials .sp-card:focus-within .sp-photo { max-height: 150px; opacity: 1; }
#menu .dish-card:hover .dish-cta, #menu .dish-card:focus-within .dish-cta { opacity: 1; transform: none; }
#menu ul::-webkit-scrollbar { display: none; }
@keyframes tmt-casc { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #tmt-nav.is-open .tmt-casc { animation: tmt-casc 440ms cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(var(--i) * 45ms); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---- hover / active / focus states (from style-* attributes) ---- */
.dch1:focus-visible{left: 12px}
.dch2:hover{background: color-mix(in oklab, var(--tmt-ink) 14%, transparent)}
.dch3:hover{background: color-mix(in oklab, var(--tmt-ink) 6%, transparent); border-color: var(--tmt-ink)}
.dch4:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white)}
.dch5:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white)}
.dch6:hover{background: var(--tmt-yellow-deep); color: var(--tmt-ink)}
.dch7:hover{color: var(--tmt-ink)}
.dch8:hover{color: var(--tmt-red-ink)}
.dch9:hover{color: var(--tmt-red-ink)}
.dch10:hover{color: var(--tmt-red-ink)}
.dch11:hover{background: var(--tmt-yellow-deep); color: var(--tmt-ink); transform: translateY(-2px)}
.dch12:hover{background: var(--tmt-red); border-color: var(--tmt-ink); color: var(--tmt-white); transform: translateY(-2px)}
.dch13:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white); transform: translateY(-2px)}
.dch14:hover{background: var(--tmt-teal-ink); border-color: var(--tmt-ink); color: var(--tmt-white); transform: translateY(-2px)}
.dch15:hover{background: var(--tmt-yellow); border-color: var(--tmt-ink); color: var(--tmt-ink); transform: translateY(-2px)}
.dch16:hover{color: var(--tmt-ink)}
.dch17:hover{background: var(--tmt-yellow-deep); --tmt-glow: 30px; transform: translate(-2px, -2px); color: var(--tmt-ink)}
.dch17:active{transform: translate(4px, 4px)}
.dch18:hover{background: color-mix(in oklab, var(--tmt-white) 14%, transparent); border-color: var(--tmt-white); color: var(--tmt-white)}
.dch19:hover{background: var(--tmt-ink); color: var(--tmt-white)}
.dch19:active{transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tmt-ink)}
.dch20:hover{background: var(--tmt-ink); color: var(--tmt-white)}
.dch20:active{transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tmt-ink)}
.dch21:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch22:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch23:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch24:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch25:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch26:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch27:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch28:hover{transform: translateY(-7px); box-shadow: 8px 11px 0 var(--tmt-ink)}
.dch29:hover{background: color-mix(in oklab, var(--tmt-red-deep) 84%, var(--tmt-ink)); transform: translate(-2px, -2px); color: var(--tmt-white)}
.dch29:active{transform: translate(5px, 5px)}
.dch30:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch31:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch32:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch33:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch34:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch35:hover{transform: rotate(0deg) translateY(-8px); filter: drop-shadow(10px 12px 0 var(--tmt-ink))}
.dch36:hover{background: var(--tmt-white); color: var(--tmt-ink)}
.dch37:hover{background: var(--tmt-white); color: var(--tmt-ink)}
.dch38:hover{background: var(--tmt-white); transform: translate(-2px, -2px); color: var(--tmt-ink)}
.dch38:active{transform: translate(5px, 5px)}
.dch39:hover{background: var(--tmt-yellow-deep); transform: translate(-2px, -2px); color: var(--tmt-ink)}
.dch39:active{transform: translate(4px, 4px)}
.dch40:hover{background: color-mix(in oklab, var(--tmt-red-deep) 84%, var(--tmt-ink)); transform: translate(-2px, -2px); color: var(--tmt-white)}
.dch40:active{transform: translate(5px, 5px)}
.dch41:hover{color: var(--tmt-red-ink)}
.dch42:hover{color: var(--tmt-yellow)}
.dch43:hover{color: var(--tmt-yellow)}
.dch44:hover{color: var(--tmt-red-ink)}
.dch45:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white)}
.dch46:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white)}
.dch47:hover{background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-white)}
.dch48:hover{color: var(--tmt-yellow)}
.dch49:hover{color: var(--tmt-red-ink); border-color: var(--tmt-red-ink)}
.dch50:hover{color: var(--tmt-red-ink)}
.dch51:hover{color: var(--tmt-red-ink)}

/* ---- layout switches: the export did these in JS (applyResponsive); here they are real
   media queries so the page is correct before any script runs ---------------- */
[data-footer-grid]{grid-template-columns:1fr}
@media (min-width:560px){[data-footer-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){[data-footer-grid]{grid-template-columns:repeat(4,minmax(0,1fr))}}

[data-nav-cols]{grid-template-columns:1fr}
@media (min-width:620px){[data-nav-cols]{grid-template-columns:repeat(2,minmax(0,290px))}}
@media (min-width:1180px){[data-nav-cols]{grid-template-columns:minmax(0,290px) minmax(0,620px) minmax(0,290px)}}
[data-nav-center]{order:-1;grid-column:1/-1;min-height:0 !important}
@media (min-width:1180px){[data-nav-center]{order:0;grid-column:auto;min-height:100% !important}}

[data-menu-order]{grid-template-columns:1fr}
@media (min-width:900px){[data-menu-order]{grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr)}}

/* the overlay's thumb bar is a mobile affordance; the header carries it on desktop */
[data-nav-bottom]{display:flex}
@media (min-width:900px){[data-nav-bottom]{display:none}}

[data-specials-grid]{grid-template-columns:1fr}
@media (min-width:620px){[data-specials-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){[data-specials-grid]{grid-template-columns:repeat(3,minmax(0,1fr))}}

[data-two-col]{grid-template-columns:1fr}
@media (min-width:900px){[data-two-col]{grid-template-columns:1fr 1fr}}

/* below 720px the header is exactly three things: toggle, logo, short CTA */
@media (max-width:719px){
  header [data-social]{display:none !important}
  [data-order-label]{font-size:0}
  [data-order-label]::after{content:"Order";font-size:14px}
}

/* The first catering package has no label, so its <h3> sat a row above the other
   two once the "Package 01" numbering came out. The spacer reserves that row
   while the cards share one - and gets out of the way when they stack, where
   there is nothing to line up with and it reads as stray padding. */
@media (max-width:639px){[data-pkg-spacer]{display:none}}

/* the floating category preview is a pointer affordance only */
@media (max-width:900px){[data-cat-preview]{display:none}}

/* the export relied on JS to pad the page under the fixed header; keep a sane
   fallback so there is never a flash of content hidden behind the bar */
[data-main]{padding-top:132px}
#tmt-nav{padding-top:132px}

html{scroll-behavior:smooth}
img{max-width:100%;display:block}

/* In-page anchors have to clear the FIXED chrome, otherwise every nav link lands
   with the section's eyebrow and heading tucked behind the bar. Two things make
   the needed reserve bigger than the bar itself: the bar is ~112px on a phone but
   ~136px on a desktop, and clicking a nav link also closes the overlay, which
   unfolds the announcement strip and shifts the whole page down mid-scroll. */
#top,#about,#menu,#thisweek,#specials,#events,#catering,#rewards,#visit{
  scroll-margin-top:172px;
}

/* The export's red monogram tile (fondo_tequilamama_red.png) exceeds what the
   design project will hand over, so this section falls back to the white monogram
   tile. Painted straight onto the element that tile is opaque and buries both the
   red field and the white headline on it, so drop it to an overlay instead: red
   stays the surface, the monogram reads as a faint tone-on-tone watermark. */
/* ---- signature dishes cards ----------------------------------------------
   The card becomes a column so the CTA can sit on its own row at the bottom
   (margin-top:auto) and line up across cards of unequal text length. The blurb
   is clamped to two lines so one wordy dish can't make its card taller than the
   rest — the full text lives on /menu/. */
.dish-card{display:flex;flex-direction:column}
/* Pin the photo frame to its 4/3 aspect-ratio. The wrapper's `aspect-ratio` only
   wins while its content can't force it taller, and the <img> carries
   height:100% with no width/height attributes on the image-slot cards — so a
   SQUARE source photo (most of the uploaded dish shots are) resolved against auto
   and stretched the frame to 232px on five cards while three stayed at 174px.
   Taking the image out of flow makes the frame's ratio authoritative, so every
   dish is cropped to the same window whatever its source aspect. */
.dish-card > div:nth-of-type(1){flex:none;position:relative;overflow:hidden}
.dish-card > div:nth-of-type(1) > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.dish-card > div:nth-of-type(2){flex:1;display:flex;flex-direction:column}
.dish-card .dish-cta{margin-top:auto}
.dish-card > div:nth-of-type(2) > p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- menu list taglines ---------------------------------------------------
   The reveal itself is the export's own rule (#tmt-cats a:hover .cat-sub). The
   resting state has to live here rather than inline on the span: an inline
   opacity:0 outranks a stylesheet rule, so the tagline and the arrow could never
   fade in — they were invisible at every state. */
#tmt-cats .cat-sub{opacity:0;transform:translateX(-6px)}
#tmt-cats .cat-arrow{opacity:0;transform:translateX(-10px)}
@media (prefers-reduced-motion:reduce){
  #tmt-cats .cat-sub,#tmt-cats .cat-arrow{transition-duration:1ms}
}

/* A touch screen has no hover, so a hover-only tagline is a tagline nobody on a
   phone ever reads. Show it there permanently, on its own line under the title —
   it is too long to sit beside one at that width.

   Keyed to width rather than (hover:none) deliberately: the pointer media
   features are not reliably reportable in every engine (headless Chrome, for one,
   always answers hover:none), so a hover-keyed rule cannot be verified and could
   silently switch desktop to always-on. Width is unambiguous. The trade-off is
   that a touch tablet WIDER than 900px keeps the hover behaviour. */
@media (max-width:899px){
  #tmt-cats a{flex-wrap:wrap}
  #tmt-cats .cat-sub{
    opacity:1;transform:none;white-space:normal;
    width:100%;order:3;margin-top:4px;
  }
  #tmt-cats .cat-arrow{opacity:1;transform:none}
}

/* ---- overlay nav on a phone ----------------------------------------------
   The two promo tiles live in the overlay's side columns. Below the 3-column
   breakpoint they stack under the word list as two big images, which pushes the
   actual navigation off-screen — so hide them there and let the word list (which
   now carries Specials AND Events) do the job. */
@media (max-width:1179px){
  [data-nav-cols] > *:not([data-nav-center]){display:none}
}

/* ---- opening the overlay -------------------------------------------------
   Two motions run together when the hamburger opens: the wordmark grows into
   the panel, and the yellow announcement bar folds away so the panel starts at
   the top of the screen. Closing reverses both.

   The logo's inline transition is stripped in the builder so this one wins;
   transform gets a longer, slightly springy curve than the width/margin pair
   because it is the motion the eye actually follows. */
[data-logo]{
  transform-origin:50% 50%;
  will-change:transform;
  transition:width 320ms cubic-bezier(0.22,1,0.36,1),
             margin-block 320ms cubic-bezier(0.22,1,0.36,1),
             transform 520ms cubic-bezier(0.34,1.56,0.64,1);
}

/* The bar's height depends on whether its text wraps (34px on a desktop, 50px on
   a phone), so design.js measures it into --tm-ann-h instead of this file
   guessing — a wrong max-height would either clip the text or stall the fold. */
[data-ann]{
  overflow:hidden;
  max-height:var(--tm-ann-h,60px);
  transition:max-height 380ms cubic-bezier(0.22,1,0.36,1),
             opacity 200ms ease,
             padding-block 380ms cubic-bezier(0.22,1,0.36,1);
}
/* !important: the export sets `padding` inline, which outranks a longhand here */
[data-ann][data-ann-hidden]{
  max-height:0;
  opacity:0;
  padding-block:0 !important;
  pointer-events:none;
}

/* This export has no reduced-motion block of its own, and the motions above are
   ones we added, so opt them out explicitly. */
@media (prefers-reduced-motion:reduce){
  [data-logo],[data-ann]{transition-duration:1ms}
}

#specials{position:relative;background-image:none !important}
#specials::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:url('fondo_tequilamama.webp') repeat;background-size:420px auto;
}
#specials > *{position:relative;z-index:1}