/* Tequila Mama Cantina — catering page styles.
   Generated by build_catering.py from the design export: its page <style>
   block (minus rules the shared chrome owns) plus the state rules hoisted out
   of style-hover/-active/-focus, plus the two responsive grids the export
   drove from JS. */

:root { --tmt-mono: var(--font-rauda-solid-unicase); }
:focus-visible { outline: 3px solid var(--tmt-teal); outline-offset: 3px; border-radius: 4px; }
input, select, textarea { font-family: var(--font-inria); font-size: 16px; color: var(--tmt-ink); background: var(--tmt-white); border: 2.5px solid var(--tmt-ink); border-radius: 12px; padding: 13px 14px; width: 100%; box-sizing: border-box; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--tmt-teal); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--tmt-stone) 80%, transparent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
details.tmt-faq[open] .tmt-faq-mark { transform: rotate(45deg); }
details.tmt-faq summary::-webkit-details-marker { display: none; }

/* ---- hover / active / focus states ---- */
.dcc1:hover{background: var(--tmt-yellow-deep); color: var(--tmt-ink); transform: translate(-2px, -2px)}
.dcc1:active{transform: translate(4px, 4px)}
.dcc2:hover{background: var(--tmt-white); color: var(--tmt-ink)}
.dcc3:hover{background: var(--tmt-yellow-deep)}
.dcc3:active{transform: translate(3px, 3px)}
.dcc4:hover{background: var(--tmt-red-deep); transform: translate(-2px, -2px)}
.dcc4:active{transform: translate(4px, 4px)}
.dcc5:hover{background: var(--tmt-ink); color: var(--tmt-white)}

/* The export switched these two grids from JS at 940px and wrote the value
   inline. Stripped in the builder; expressed here so they work without JS. */
[data-form-grid]{grid-template-columns:1fr}
[data-faq-grid]{grid-template-columns:1fr}
@media (min-width:940px){
  [data-form-grid]{grid-template-columns:.85fr 1.15fr}
  [data-faq-grid]{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
}

/* fondo_tequilamama_red.png never came down from the design project, so the
   packages band uses the same trick as the homepage specials tile: keep the
   red field, lay the monogram over it as a faint watermark. */
#packages{position:relative;background-image:none !important}
#packages::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:url('fondo_tequilamama.webp') repeat;background-size:420px auto;
}
#packages > *{position:relative;z-index:1}

/* ---- FAQ open / close ----------------------------------------------------
   A <details> snaps open: there is no box between the summary and the answer
   to transition. The CSS-only route (::details-content + interpolate-size)
   was tried here and did not hold up — the answer stayed collapsed even with
   both rules live — so design-catering.js animates the element's height with
   the Web Animations API instead, which needs no new CSS primitives. All this
   file owns is the marker, kept on the same curve and duration so the rotate
   and the expansion read as one motion. */
details.tmt-faq{overflow:hidden}
details.tmt-faq .tmt-faq-mark{
  transition:transform 360ms cubic-bezier(0.34,1.56,0.64,1),background 200ms ease;
}
@media (prefers-reduced-motion:reduce){
  details.tmt-faq .tmt-faq-mark{transition-duration:1ms}
}

/* The shared chrome is a 136px fixed bar — taller than the header this design
   was drawn against — so the hero eyebrow sat behind it and every in-page
   anchor landed under it. Both offsets are corrected against that height. */
[data-cater-hero]{padding-top:136px}
#packages,#quote{scroll-margin-top:152px}

/* Two-up form rows stack on a phone; 1fr 1fr at 360px truncates the labels. */
@media (max-width:560px){
  .tm-quote-form [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
}