/* =====================================================================
   Terrazza Unico Ibiza — Digital Menu
   Layout + component styling. Tokens come from colors_and_type.css.
   Adapted from the design-system prototype: full-screen QR menu
   (no iPhone bezel, no kit caption), mobile-first.
   ===================================================================== */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(120% 90% at 50% 0%, #efe7da 0%, #e3d8c6 55%, #d8cab4 100%);
  min-height:100vh; min-height:100dvh;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

/* App shell — a centred mobile column on desktop, full-bleed on phones.
   position:relative + fixed height anchors the absolutely-positioned
   hero actions and the top-sheet search overlay. */
.app{
  position:relative;
  width:100%; max-width:var(--content-max);
  height:100vh; height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:var(--parchment-300);
  box-shadow:var(--shadow-lg);
}

/* ============ SCREEN SHELL ============ */
.screen{position:relative;height:100%;width:100%;
  background:var(--parchment-300);
  background-image:url(../assets/parchment-texture.png);
  background-size:cover;background-position:center;
  overflow:hidden;color:var(--fg)}

/* ============ HERO ============ */
.hero-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 34px;text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;z-index:2}
.hero-eyebrow{font-family:var(--font-sans);font-size:12px;font-weight:400;
  text-transform:uppercase;letter-spacing:.32em;color:var(--fg-muted)}
.hero-logo{width:230px;height:230px;object-fit:contain;margin:-6px 0}
.hero-tag{font-family:var(--font-display);font-style:italic;font-size:19px;
  color:var(--fg-secondary);letter-spacing:.01em}
.hero-actions{position:absolute;left:0;right:0;bottom:64px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.bougie-sprig{mix-blend-mode:multiply;user-select:none;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-inner{animation:rise var(--dur-slow) var(--ease-out)}
  .hero-actions{animation:rise var(--dur-slow) var(--ease-out);animation-delay:.1s}
}

.btn-primary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;
  background:var(--bougie);color:var(--fg-on-accent);
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  padding:15px 30px;border-radius:999px;box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease-soft),background var(--dur-fast)}
.btn-primary:hover{background:var(--bougie-bright)}
.btn-primary:active{transform:scale(.97);background:var(--bougie-deep)}

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle{display:inline-flex;background:var(--parchment-100);
  border:1px solid var(--surface-line);border-radius:999px;
  padding:4px;gap:2px;box-shadow:var(--shadow-sm)}
.lang-btn{border:none;cursor:pointer;font-family:var(--font-sans);
  font-size:13px;font-weight:500;letter-spacing:.06em;
  color:var(--fg-secondary);background:transparent;
  padding:9px 17px;border-radius:999px;
  transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast)}
.lang-btn.on{color:var(--fg-on-accent);background:var(--bougie)}
.lang-toggle.compact .lang-btn{font-size:12px;padding:7px 13px}

/* ============ MENU SCREEN ============ */
.menu-screen{height:100%;display:flex;flex-direction:column;
  background:var(--parchment-300);
  background-image:url(../assets/parchment-texture.png);background-size:cover}

.m-header{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;gap:10px;
  background:linear-gradient(to bottom, var(--parchment-200) 70%, rgba(246,231,215,0));
  position:relative;z-index:6}
.m-header-logo{height:46px;width:46px;object-fit:contain}
.m-header-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:999px;cursor:pointer;
  background:var(--parchment-100);border:1px solid var(--surface-line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-soft)}
.icon-btn:active{transform:scale(.93)}

.cat-nav{display:flex;gap:9px;overflow-x:auto;padding:6px 18px 12px;
  scrollbar-width:none;position:relative;z-index:5;
  -webkit-overflow-scrolling:touch;
  background:var(--parchment-200);
  box-shadow:0 6px 14px -10px rgba(74,50,30,.35);
  border-bottom:1px solid var(--divider-soft)}
.cat-nav::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;white-space:nowrap;cursor:pointer;
  font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.03em;
  color:var(--fg-secondary);background:var(--parchment-100);
  border:1px solid var(--surface-line);border-radius:999px;padding:9px 15px;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.cat-chip.on{background:var(--ink-900);color:var(--parchment-100);border-color:var(--ink-900)}

.menu-scroll{flex:1;overflow-y:auto;position:relative;padding:0 26px 40px;
  -webkit-overflow-scrolling:touch}
.menu-scroll::-webkit-scrollbar{width:0}

/* ---- section ---- */
.menu-section{padding-top:30px}
.sec-head{text-align:center;margin-bottom:6px}
.sec-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.sec-divider .rule{height:1px;flex:0 1 90px;background:var(--divider)}
.sec-title{font-family:var(--font-display);font-weight:600;font-size:30px;
  letter-spacing:.02em;margin:0;line-height:1.1}
.sec-sub{font-family:var(--font-sans);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;color:var(--fg-muted);margin-top:5px}
.sec-note{font-family:var(--font-display);font-style:italic;font-size:15px;
  color:var(--fg-muted);margin-top:8px}

/* ---- dish ---- */
.dish-list{margin-top:14px}
.dish{display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--divider)}
.dish:last-child{border-bottom:none}
.dish-body{flex:1;min-width:0}
.dish-name{font-family:var(--font-display);font-weight:600;font-size:20px;
  line-height:1.22;letter-spacing:-.005em;margin:0;color:var(--fg)}
.dish-tags{display:flex;gap:7px;margin-top:8px}
.dish-flag{display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bougie);white-space:nowrap;
  border:1px solid var(--bougie);border-radius:999px;padding:4px 9px 3px}
.dish-flag svg{margin-top:-1px}
.dish-origin{font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--bougie);margin-top:5px}
.dish-desc{font-family:var(--font-sans);font-weight:300;font-size:14px;line-height:1.5;
  color:var(--fg-secondary);margin:6px 0 0;max-width:32ch}
.dish-price{font-family:var(--font-display);font-weight:500;font-size:22px;
  color:var(--fg);white-space:nowrap;padding-top:1px;
  font-feature-settings:"lnum" 1}
.dish-unit{font-family:var(--font-sans);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);margin-left:4px}
.hl{background:var(--bougie-tint);color:var(--bougie-deep);border-radius:3px;padding:0 2px}

/* ---- allergen + footer ---- */
.allergen-note{text-align:center;font-family:var(--font-sans);font-size:11.5px;
  font-style:italic;color:var(--fg-muted);line-height:1.5;
  margin:30px auto 0;max-width:30ch}
.m-footer{display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-top:34px;padding-top:10px}
.foot-eyebrow{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--fg-muted)}
.foot-handle{display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--fg);
  text-decoration:none}
.foot-addr{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-family:var(--font-sans);font-size:12px;color:var(--fg-muted);letter-spacing:.02em}
.foot-logo{width:64px;height:64px;object-fit:contain;margin-top:22px;opacity:.85}

/* ============ SEARCH SHEET ============ */
.sheet-wrap{position:absolute;inset:0;z-index:40;pointer-events:none}
.sheet-wrap.open{pointer-events:auto}
.sheet-scrim{position:absolute;inset:0;background:rgba(30,26,23,0);
  backdrop-filter:blur(0px);transition:background var(--dur-med),backdrop-filter var(--dur-med)}
.sheet-wrap.open .sheet-scrim{background:rgba(30,26,23,.34);backdrop-filter:blur(2px)}
.sheet{position:absolute;top:0;left:0;right:0;max-height:84%;
  display:flex;flex-direction:column;
  background:var(--parchment-200);
  background-image:url(../assets/parchment-texture.png);background-size:cover;
  border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-pop);
  transform:translateY(-102%);transition:transform var(--dur-med) var(--ease-out)}
.sheet-wrap.open .sheet{transform:translateY(0)}
.sheet-bar{display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 18px 14px}
.search-field{flex:1;display:flex;align-items:center;gap:9px;
  background:var(--parchment-100);border:1px solid var(--surface-line);
  border-radius:999px;padding:11px 16px;box-shadow:var(--shadow-sm)}
.search-input{flex:1;border:none;outline:none;background:none;
  font-family:var(--font-sans);font-size:15px;color:var(--fg)}
.search-input::placeholder{color:var(--fg-faint)}
.sheet-close{border:none;background:none;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--bougie);
  letter-spacing:.02em}
.sheet-results{overflow-y:auto;padding:0 18px 26px}
.sheet-results .dish{padding:14px 0}
.no-results{text-align:center;font-family:var(--font-display);font-style:italic;
  font-size:18px;color:var(--fg-muted);padding:40px 0}
.no-results em{color:var(--fg)}

/* ============ MOTION ============ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}