/* Venue skin: Mexican folk-art layer (pattern, papel picado, motion).
   Everything here is presentation only; content comes from venue.json via mx-skin.js.
   Colours: logo palette (green / red / marigold / pink / turquoise) over the venue's navy ground. */
:root {
  --mx-green: #17B26A;
  --mx-red: #E0432E;
  --mx-gold: #F4C430;
  --mx-pink: #E8508A;
  --mx-teal: #2BB3B3;
  --mx-cream: #F6F1E4;
  --mx-night: #121734;
  --mx-display: 'Rye', var(--font-heading, serif);
}

/* ---------- display type ---------- */
.mx-skin .hero h1,
.mx-skin .story h2,
.mx-skin .section-intro h2,
.mx-skin .events h2,
.mx-skin .about h2 {
  font-family: var(--mx-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.08;
  text-wrap: balance;
}
.mx-skin .hero h1 { font-size: clamp(2.5rem, 5.8vw, 5.6rem); max-width: 12ch; text-shadow: 0 3px 0 rgba(18, 23, 52, .55); }
.mx-skin[lang="es"] .hero h1,
.mx-skin[lang="ca"] .hero h1 { font-size: clamp(2.3rem, 5vw, 4.9rem); max-width: 14ch; }
.mx-skin .story h2, .mx-skin .section-intro h2, .mx-skin .events h2, .mx-skin .about h2 { font-size: clamp(2rem, 4vw, 4rem); }
.mx-skin .eyebrow, .mx-skin .hub-agents__eyebrow { color: var(--mx-gold); letter-spacing: .2em; }

/* ---------- folk-art pattern fields ---------- */
.mx-pattern {
  background-image: url("mx-pattern.svg");
  background-size: 760px auto;
  background-position: 50% var(--mx-py, 0px);
}
.mx-skin body.mx-hub-body { background-color: var(--bg); }
.mx-skin .reviews, .mx-skin .story, .mx-skin .menu-section, .mx-skin .about { background-color: var(--surface); }
.mx-skin .menu-section { background-color: var(--bg); }
.mx-skin .about { background-color: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.mx-skin footer { background-color: var(--mx-night); }
.mx-skin .dash-main { background-image: url("mx-pattern.svg"); background-size: 900px auto; background-position: 50% var(--mx-py, 0px); background-attachment: local; }

/* ---------- hero motion ---------- */
.mx-skin .hero-media { overflow: hidden; }
.mx-skin .hero-media img { animation: mx-kenburns 28s ease-in-out infinite alternate; transform-origin: 60% 45%; }
.mx-skin .hero-wash { background: linear-gradient(90deg, rgba(18, 23, 52, .82), rgba(18, 23, 52, .35) 58%, rgba(18, 23, 52, .12)); }
@keyframes mx-kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

/* falling cempasuchil petals */
.mx-petals { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.mx-petal {
  position: absolute; top: -8%; width: var(--s, 14px); height: calc(var(--s, 14px) * 1.5);
  background: linear-gradient(160deg, var(--c1, #F4C430), var(--c2, #E8891A));
  border-radius: 100% 0 100% 0; opacity: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  animation: mx-fall var(--d, 14s) linear var(--w, 0s) infinite;
}
@keyframes mx-fall {
  0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .95; }
  50% { transform: translate3d(var(--x, 40px), 55vh, 0) rotate(calc(var(--r, 240deg) * .5)); }
  92% { opacity: .9; }
  100% { transform: translate3d(calc(var(--x, 40px) * -.6), 112vh, 0) rotate(var(--r, 240deg)); opacity: 0; }
}

/* rotating seal */
.mx-seal {
  position: absolute; z-index: 3; right: clamp(16px, 5vw, 84px); top: clamp(104px, 17vh, 170px);
  width: clamp(104px, 11vw, 168px); aspect-ratio: 1; pointer-events: none; color: var(--mx-cream);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}
.mx-seal svg { width: 100%; height: 100%; display: block; transform: rotate(var(--mx-seal-rot, 0deg)); transition: transform .25s linear; }
.mx-seal .mx-seal-ring { animation: mx-spin 30s linear infinite; transform-origin: 50% 50%; }
.mx-seal text { font: 700 7.6px var(--font-body, sans-serif); letter-spacing: .12em; fill: var(--mx-cream); text-transform: uppercase; }
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* ---------- papel picado bunting ---------- */
.mx-bunting { position: absolute; left: 0; right: 0; top: 0; height: clamp(58px, 7vw, 92px); z-index: 4; pointer-events: none; overflow: hidden; }
.mx-bunting svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mx-flag { transform-box: fill-box; transform-origin: 50% 0; animation: mx-sway 4.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes mx-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.mx-skin .reservation-bar { position: relative; padding-top: clamp(86px, 9vw, 116px); }
.mx-skin .reservation-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--brand);
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
          mask: conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
}
.mx-hub-bunting { position: relative; margin: -22px -22px 12px; height: 70px; }

/* ---------- sawtooth + greca dividers ---------- */
.mx-skin .menu-group { border-top: 0; position: relative; padding-top: 34px; }
.mx-skin .menu-group::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: url("mx-greca.svg") repeat-x left center / 24px 16px; opacity: .6;
}
.mx-skin .menu-group h3 { display: flex; align-items: center; gap: 14px; }
.mx-skin .menu-group h3::after {
  content: ""; width: 64px; height: 12px; flex: none; opacity: .95;
  background:
    linear-gradient(135deg, var(--mx-green) 50%, transparent 50%) 0 0 / 16px 12px no-repeat,
    linear-gradient(135deg, #F07A2B 50%, transparent 50%) 16px 0 / 16px 12px no-repeat,
    linear-gradient(135deg, #B9C82F 50%, transparent 50%) 32px 0 / 16px 12px no-repeat,
    linear-gradient(135deg, var(--mx-red) 50%, transparent 50%) 48px 0 / 16px 12px no-repeat;
  clip-path: polygon(0 50%, 8px 0, 16px 50%, 24px 0, 32px 50%, 40px 0, 48px 50%, 56px 0, 64px 50%, 56px 100%, 48px 50%, 40px 100%, 32px 50%, 24px 100%, 16px 50%, 8px 100%);
}
.mx-skin .menu-item { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .menu-item:hover { transform: translateX(6px); }
.mx-skin .menu-item:hover span { color: var(--mx-gold); animation: mx-pop .5s ease; }
@keyframes mx-pop { 30% { transform: scale(1.28) rotate(-4deg); } 100% { transform: scale(1); } }
.mx-skin footer { position: relative; }
.mx-skin footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: url("mx-greca.svg") repeat-x left center / 24px 16px; opacity: .6; }

/* ---------- ribbon marquee ---------- */
.mx-ribbon {
  position: relative; z-index: 2; overflow: hidden; background: var(--mx-gold); color: var(--mx-night);
  transform: rotate(-1.4deg) scale(1.03); margin: -8px 0; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  border-block: 3px solid var(--mx-night); user-select: none;
}
.mx-ribbon-track { display: flex; width: max-content; animation: mx-marquee 38s linear infinite; }
.mx-ribbon span { font: 400 clamp(1.1rem, 2.2vw, 1.7rem) var(--mx-display); letter-spacing: .06em; padding: 12px 0; white-space: nowrap; text-transform: uppercase; }
.mx-ribbon i { display: inline-block; width: 12px; height: 12px; margin: 0 clamp(14px, 2.4vw, 30px); background: var(--mx-red); transform: rotate(45deg); }
.mx-ribbon i:nth-of-type(3n+1) { background: var(--mx-green); }
.mx-ribbon i:nth-of-type(3n+2) { background: var(--mx-pink); }
.mx-ribbon:hover .mx-ribbon-track { animation-play-state: paused; }
@keyframes mx-marquee { to { transform: translateX(-50%); } }

/* ---------- story photo: polaroid ---------- */
.mx-skin .story-image img { border: 10px solid var(--mx-cream); border-bottom-width: 34px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); transform: rotate(-2deg); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .story-image:hover img { transform: rotate(0deg) scale(1.02); }
.mx-skin .story-image figcaption { color: var(--mx-gold); }

/* ---------- reveals ---------- */
.mx-skin .reveal { transform: translateY(34px) scale(.98); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .reveal.visible { transform: none; }
.mx-skin .button { border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .15s ease, background .2s; }
.mx-skin .button:hover { transform: translateY(-2px); }
.mx-skin .button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.mx-skin .button--nav { animation: mx-wiggle 5s ease-in-out 2s infinite; }
@keyframes mx-wiggle { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-4deg) scale(1.06); } 94% { transform: rotate(4deg) scale(1.06); } 97% { transform: rotate(-2deg); } }

/* ---------- hub ---------- */
.mx-skin .hub { position: relative; }
.mx-skin .hub-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s; }
.mx-skin .hub-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 16px 0 -8px var(--mx-gold), 0 22px 36px rgba(0, 0, 0, .4); border-color: var(--mx-gold); }
.mx-skin .hub-logo { animation: mx-bob 6s ease-in-out infinite; }
@keyframes mx-bob { 50% { transform: translateY(-6px) rotate(-1deg); } }

/* ---------- dashboard / POS ---------- */
.mx-skin .dashboard-nav { background: var(--mx-night); border-right: 4px solid var(--mx-green); }
.mx-skin .dash-tab.active { background: var(--mx-green); color: #06190E; }
.mx-skin .dash-tab { transition: padding-left .2s, background .2s; }
.mx-skin .dash-tab:hover { padding-left: 20px; }
.mx-skin .pos-login, .mx-skin .pos-login-screen { background-image: url("mx-pattern.svg"); background-size: 760px auto; }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .mx-petals, .mx-seal .mx-seal-ring { display: none; }
  .mx-skin .hero-media img, .mx-flag, .mx-ribbon-track, .mx-skin .hub-logo, .mx-skin .button--nav { animation: none; }
  .mx-skin .reveal { transform: none; }
}
@media (max-width: 640px) {
  .mx-seal { top: 96px; bottom: auto; right: 12px; width: 84px; }
  .mx-skin .hero h1 { max-width: 11ch; }
  .mx-ribbon { transform: rotate(-1deg) scale(1.04); }
  .mx-pattern { background-size: 520px auto; }
}

/* keep tilted ribbon / bunting from creating a horizontal scrollbar */
html.mx-skin, .mx-skin body { overflow-x: clip; }

/* all section headings on the public site use the display face (template font-fix.css targets bare h2) */
.mx-skin #main h2 { font-family: var(--mx-display); font-weight: 400; letter-spacing: .01em; line-height: 1.1; text-wrap: balance; font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.mx-skin #main .reservation-bar h2 { font-family: var(--font-heading, serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(1.5rem, 2.3vw, 2.3rem); }
.mx-skin #main .events h2, .mx-skin #main .about h2, .mx-skin #main .story h2, .mx-skin #main .section-intro h2 { font-size: clamp(2rem, 4vw, 4rem); }

/* polish */
.mx-ribbon-track { align-items: center; }
.mx-ribbon i { flex: none; }
.mx-skin .reel-line { font-family: var(--mx-display); font-weight: 400; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(18, 23, 52, .6); }

/* ---------- POS: calm light theme ----------
   The template's POS panels read --bg/--surface/--ink as a LIGHT palette (cream ground, white panels,
   dark ink). This venue's public palette is dark, which turned dish buttons and tabs navy under dark
   text. Scoped to the standalone POS page only, so the site, hub and dashboard keep the night palette.
   One accent (a deeper green with white text), navy header, slate instead of gold. */
body[data-pos-standalone="true"] {
  --bg: #F5F3EC;
  --surface: #FFFFFF;
  --ink: #1B2140;
  --muted: #5B617D;
  --brand: #0E7C48;
  --brand-ink: #FFFFFF;
  --accent: #7C86AD;
  --pos-ground: #161A33;
  --pos-ground-2: #11142A;
}
/* the POS derives its own --pos-* tokens on :root, so re-point them here (they would not inherit the overrides above) */
body[data-pos-standalone="true"] {
  --pos-ink: #1B2140;
  --pos-navy: #161A33;
  --pos-blue: #0E7C48;
  --pos-blue-hover: #0A6A3C;
  --pos-blue-wash: color-mix(in srgb, #0E7C48 10%, white 90%);
  --pos-blue-line: color-mix(in srgb, #0E7C48 30%, white 70%);
  --pos-sand: #F5F3EC;
  --pos-paper: #FFFFFF;
  --pos-line: #DDE0EA;
  --pos-mint: color-mix(in srgb, #0E7C48 12%, white 88%);
  --pos-green: #0E7C48;
  --pos-amber: #6F7899;
}
/* POS: no gold/teal accents -- open tabs are navy, the selected table is the one green */
body[data-pos-standalone="true"] .eyebrow { color: #5B617D; letter-spacing: .14em; }
body[data-pos-standalone="true"] .pos-inline-menu-head h2 span { color: #0E7C48; }
body[data-pos-standalone="true"] .pos-table.selected { border-color: #0E7C48; background: #E6F3EB; color: #0A5A33; box-shadow: 0 0 0 4px rgba(14, 124, 72, .14), 0 6px 0 rgba(27, 33, 64, .08); }
body[data-pos-standalone="true"] .pos-table.occupied { border-color: #1B2140; background: #EEF0F7; color: #1B2140; box-shadow: 0 4px 0 rgba(27, 33, 64, .12); }
body[data-pos-standalone="true"] .pos-legend .occupied { background: #1B2140; }
body[data-pos-standalone="true"] .pos-topbar { border-bottom: 1px solid rgba(255, 255, 255, .1); }
body[data-pos-standalone="true"] .pos-send-button { background: #1B2140; }
body[data-pos-standalone="true"] .pos-send-button:hover { background: #2A3158; }
body[data-pos-standalone="true"] .pos-order-item.draft { background: #EEF0F7; box-shadow: inset 3px 0 0 #1B2140; }
body[data-pos-standalone="true"] .pos-order-item.draft small, body[data-pos-standalone="true"] .pos-order-item.draft em { color: #1B2140; }
body[data-pos-standalone="true"] .pos-brand small { color: #B9BDD3; }
body[data-pos-standalone="true"] .pos-toast { background: #1B2140; }
body[data-pos-standalone="true"] .pos-toast.warn { background: #3A4170; }