/* Tequila Mama Cantina — menu page styles.
   Generated by build_menu.py from the design export: its page <style> block
   (minus rules the shared chrome already owns) plus the state rules hoisted
   out of style-hover/-active/-focus attributes. */


@view-transition { navigation: auto; }
:root { --tmt-mono: var(--font-rauda-solid-unicase); }
#tmt-pills::-webkit-scrollbar { display: none; }
@keyframes tmt-rise { from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tmt-reveal { animation: tmt-rise linear both; animation-timeline: view(); animation-range: entry 8% entry 50%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---- hover / active / focus states ---- */
.dcm1:hover{background: color-mix(in oklab, var(--tmt-red-deep) 84%, var(--tmt-ink)); transform: translate(-2px, -2px); color: var(--tmt-white)}
.dcm1:active{transform: translate(5px, 5px)}
.dcm2:hover{background: color-mix(in oklab, var(--tmt-ink) 8%, transparent); color: var(--tmt-ink)}

/* ---- category chooser ---------------------------------------------------
   Two controls, one list of categories, swapped at 640px.

   Above 640px: pills, wrapped and centred. `safe center` rather than plain
   `center` — if the row ever overflows instead of wrapping, plain centring
   pushes content off BOTH ends and the left half becomes unreachable, because
   scrollLeft stops at 0. `safe` falls back to start-alignment on overflow.
   Browsers without it drop the declaration and keep the flex-start above:
   left-aligned, still reachable, which is the right way to fail.

   At or below 640px: a native select. Fourteen categories in a 360px bar is
   three pills visible and eleven guessed at; the phone's own picker shows the
   whole list at once, names the current one in full, and costs one row. */
#tmt-pills{list-style:none;margin:0;padding:3px;display:flex;gap:9px;max-width:100%;
  flex-wrap:wrap;justify-content:flex-start}
#tmt-pills{justify-content:safe center}
#tmt-cat-picker{display:none}
@media (max-width:640px){
  #tmt-pills{display:none}
  #tmt-cat-picker{display:grid;gap:5px;width:100%;max-width:420px;margin:0 auto}
  #tmt-cat-picker > label{font-family:var(--tmt-mono);font-size:11px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--tmt-charcoal)}
  /* Styled as the active pill was — red, hard shadow — so it reads as the
     current category rather than as an empty form field. appearance:none to
     drop the platform chrome, with our own chevron; the OPEN list is still the
     native one, which is the whole point of using a select on a phone. */
  #tmt-cat-select{
    -webkit-appearance:none;appearance:none;width:100%;
    font-family:var(--font-inria);font-weight:700;font-size:15px;letter-spacing:0.06em;
    text-transform:uppercase;color:var(--tmt-white);background-color:var(--tmt-red-deep);
    border:3px solid var(--tmt-ink);border-radius:0;box-shadow:4px 4px 0 var(--tmt-ink);
    padding:12px 46px 12px 15px;line-height:1.2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
  }
  /* The dropped-down list is drawn by the OS, which does not inherit the
     button's colours — say what the options should look like explicitly. */
  #tmt-cat-select option{background:var(--tmt-white);color:var(--tmt-ink);
    font-weight:400;text-transform:none;letter-spacing:0}
  #tmt-cat-select:focus-visible{outline:3px solid var(--tmt-teal);outline-offset:3px}
}
/* Shown only while a dietary chip is on, because that is the one state where
   the list ignores the category selector — see design-menu.js. */
.tmt-filter-note{
  margin:2px 0 0;font-family:var(--font-inria);font-size:13.5px;color:var(--tmt-charcoal);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;
}
.tmt-filter-note[hidden]{display:none}
.tmt-filter-note strong{color:var(--tmt-red-ink)}
.tmt-filter-note button{
  font:inherit;cursor:pointer;background:none;border:0;padding:0;
  color:var(--tmt-teal-ink);text-decoration:underline;text-underline-offset:3px;
}
.tmt-filter-note button:hover{color:var(--tmt-red-ink)}
/* ---- hero ---------------------------------------------------------------
   Reserve the fixed chrome on the SECTION so the centred content is centred in
   the band the visitor can actually see, and grow the min-height to match so
   the reserve doesn't squash it. box-sizing is border-box site-wide, so the
   padding comes out of min-height rather than adding to it. */
[data-menu-hero]{
  padding-top:136px;
  min-height:clamp(470px,64dvh,640px);
}
/* The photo was at .55 with the storefront's own red script reading straight
   through the headline. Sit it further back and deepen the scrim so the type is
   the only thing competing for attention. */
[data-menu-hero] > img{opacity:.4}
[data-menu-hero] > div[aria-hidden]{
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--tmt-ink) 78%, transparent) 0%,
    color-mix(in oklab, var(--tmt-red-deep) 42%, transparent) 48%,
    var(--tmt-ink) 100%) !important;
}
/* 140px let the two words run edge to edge; this keeps the impact and the air */
[data-menu-hero] h1{font-size:clamp(44px,8.4vw,108px)}
[data-menu-hero] p:first-of-type{margin-bottom:clamp(18px,2.6vh,28px)}

/* ---- dish thumbnails ----------------------------------------------------
   The design is a text menu; the client wants the plate shown alongside it.
   The photo leads each row, lifts on hover/focus, and opens the lightbox on
   click. Dishes with no photo yet keep an empty box of the same width so
   every name still starts on the same line. */
/* The whole plate, round and borderless, at the size it reads best — big
   enough to see the food, small enough that a 13-dish section is still
   scannable. Tapping it opens the full photo.

   --tm-plate is the diameter and --tm-thumb the width of the column it
   occupies; they are the same now, but both names are kept because the empty
   spacer for dishes with no photo sizes itself off --tm-thumb. */
:root{--tm-plate:clamp(158px,17vw,230px)}
:root{--tm-thumb:var(--tm-plate)}
.tmt-thumb{
  flex:none;width:var(--tm-thumb);height:var(--tm-plate);padding:0;position:relative;
  border:0;border-radius:50%;overflow:hidden;
  background:transparent;cursor:zoom-in;
}
/* max-width:none is load-bearing: design.css sets a site-wide
   img{max-width:100%}, and without this the photo is clamped by any frame
   narrower than the image's own width. */
.tmt-thumb > img{
  width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  border-radius:50%;
  transition:transform 320ms cubic-bezier(0.22,1,0.36,1);
}
/* The old hover scaled the whole frame, which fought the new tap-to-open — so
   the hover pushes INTO the food instead and opening the photo is the click's
   job. The frame keeps its size, so nothing reflows. */
.tmt-thumb:hover > img,.tmt-thumb:focus-visible > img{transform:scale(1.07)}
/* While the lightbox is showing this plate, the frame is empty — the photo the
   visitor is looking at flies back into it on close. */
.tmt-thumb[data-lifted] > img{opacity:0}
.tmt-thumb--empty{border:0;background:transparent;cursor:default}
.tmt-thumb--empty:hover > img{transform:none}
[data-menu-row]{position:relative;align-items:center}
@media (prefers-reduced-motion:reduce){.tmt-thumb > img{transition-duration:1ms}}

/* ---- photo lightbox ---------------------------------------------------- */
/* MUST come with the display rule below. `display:grid` here is an AUTHOR
   declaration and the UA stylesheet's [hidden]{display:none} is not — author
   always wins that cascade — so setting .hidden on the element did nothing,
   and after the first photo was closed a transparent full-viewport z-index
   400 overlay stayed over the page swallowing every click, scroll and tap on
   the nav. Anything given a display value needs its own [hidden] guard. */
.tmt-lightbox[hidden]{display:none}
.tmt-lightbox{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  background:color-mix(in oklab, var(--tmt-ink) 88%, transparent);
  opacity:0;transition:opacity 260ms cubic-bezier(0.22,1,0.36,1);
}
.tmt-lightbox.is-open{opacity:1}
.tmt-lightbox__fig{margin:0;display:grid;gap:14px;justify-items:center;
  max-width:min(92vw,880px)}
/* Zoomed photo carries no frame — just the picture on the backdrop. */
.tmt-lightbox__img{
  display:block;max-width:100%;max-height:76vh;width:auto;height:auto;
  border:0;border-radius:12px;background:transparent;
  transform:scale(.94);transition:transform 320ms cubic-bezier(0.34,1.56,0.64,1);
}
.tmt-lightbox.is-open .tmt-lightbox__img{transform:none}
.tmt-lightbox__cap{
  font-family:var(--font-rauda-solid);font-size:clamp(18px,2.4vw,26px);
  text-transform:uppercase;color:var(--tmt-white);text-align:center;
}
.tmt-lightbox__close{
  position:absolute;top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);
  width:46px;height:46px;font-size:26px;line-height:1;cursor:pointer;
  background:var(--tmt-yellow);color:var(--tmt-ink);
  border:3px solid var(--tmt-ink);border-radius:50%;
}
@media (prefers-reduced-motion:reduce){
  .tmt-thumb,.tmt-lightbox,.tmt-lightbox__img{transition-duration:1ms}
}