/* ==========================================================================
   LAVAS SEAFOOD — menu styles
   Palette pulled from the brand deck: ultramarine on cream paper.
   ========================================================================== */

:root{
  /* --blue      type colour, near-black ink on the beige stock
     --cyan      accent: the colour every filled block is painted
     --on-accent what is written on top of those blocks            */
  --blue:#141414;
  --cyan:#0B4A3F;
  --on-accent:#F4ECDA;
  --blue-ink:#000000;
  --cream:#EBE0C6;
  --cream-hi:#F4ECDA;
  --white:#fff;
  --rule:rgba(20,20,20,.28);
  --rail-h:52px;

}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--blue);
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:17px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
}

/* aged paper grain — it belongs on the beige stock */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--grain);
  opacity:.22;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:60;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.story :focus-visible,.hero :focus-visible{outline-color:var(--on-accent)}

/* =============================== BANNER ================================== */

.banner{
  position:relative;
  background:var(--cyan);
  line-height:0;
}
.banner img{
  width:100%;
  height:auto;
  display:block;
}

/* crop to a strip — only when you choose it in the admin */
.banner--strip img{
  max-height:52vh;
  object-fit:cover;
  object-position:center;
}

/* ================================ HERO =================================== */

.hero{
  position:relative;
  background:var(--cyan);
  color:var(--on-accent);
  overflow:hidden;
  padding:clamp(48px,14vh,110px) 22px clamp(40px,9vh,72px);
  text-align:center;
}

/* duotone treatment, same as the brand boards */
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.25) brightness(1.05);
  mix-blend-mode:screen;
  opacity:.34;
}

/* when a banner sits above, the blue block underneath stays short */
.hero--slim{padding-top:clamp(22px,5vh,34px);padding-bottom:clamp(26px,6vh,40px)}

/* full-colour photo behind the logo, darkened just enough to read on */
.hero--photo .hero__img{
  filter:none;
  mix-blend-mode:normal;
  opacity:1;
}
.hero--photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(3,41,38,.35),rgba(3,41,38,.68));
}

.hero__inner{position:relative;z-index:2}

.hero__logo{
  width:min(300px,64vw);
  height:auto;
  margin:0 auto;
}
.hero--slim .hero__logo{width:min(200px,44vw)}

.wordmark{line-height:.82}
.wordmark__name{
  display:block;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:clamp(74px,23vw,150px);
  letter-spacing:.01em;
  color:var(--on-accent);
}
.wordmark__sub{
  display:block;
  margin-top:10px;
  font-weight:600;
  font-size:clamp(13px,3.6vw,20px);
  letter-spacing:.62em;
  text-indent:.62em;
  color:var(--on-accent);
}

.hero__tagline{
  margin:26px auto 0;
  max-width:26ch;
  font-size:clamp(17px,4.6vw,23px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.hero__hours{
  margin:16px 0 0;
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.8;
}

/* torn paper edge between hero and menu */
.hero__wave{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:26px;
  background:var(--cream);
  z-index:2;
  -webkit-mask-image:radial-gradient(14px 20px at 14px 0, transparent 98%, #000 100%);
  mask-image:radial-gradient(14px 20px at 14px 0, transparent 98%, #000 100%);
  -webkit-mask-size:28px 26px;
  mask-size:28px 26px;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
}

/* ============================ STICKY RAIL ================================ */

.rail{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:stretch;
  height:var(--rail-h);
  background:var(--cream);
  border-bottom:1.5px solid var(--blue);
}

.rail__scroll{
  flex:1;
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 12px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.rail__scroll::-webkit-scrollbar{display:none}

.rail__chip{
  flex:0 0 auto;
  padding:6px 13px 5px;
  border:1.5px solid var(--blue);
  border-radius:100px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.rail__chip.is-active{background:var(--cyan);color:var(--on-accent)}

.rail__tools{
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 10px 0 6px;
  border-left:1.5px solid var(--rule);
  background:var(--cream);
}

.iconbtn,.langbtn{
  width:36px;height:36px;
  display:grid;place-items:center;
  background:none;border:0;
  color:var(--blue);
  cursor:pointer;
  border-radius:50%;
  font-family:inherit;
}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.langbtn span{font-size:19px;font-weight:700;line-height:1}
.iconbtn.is-on,.langbtn.is-on{background:var(--cyan);color:var(--on-accent)}

.searchbar{
  position:sticky;
  top:var(--rail-h);
  z-index:39;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--cream);
  border-bottom:1.5px solid var(--rule);
}
.searchbar input{
  flex:1;
  padding:9px 12px;
  border:1.5px solid var(--blue);
  border-radius:100px;
  background:transparent;
  color:var(--blue);
  font-family:inherit;
  font-size:17px;
}
.searchbar input::placeholder{color:rgba(27,21,224,.5)}
.searchbar__clear{
  background:none;border:0;color:var(--blue);
  font-size:18px;cursor:pointer;padding:6px;
}

/* ================================ MENU =================================== */

.menu{
  max-width:760px;
  margin:0 auto;
  padding:34px 20px 10px;
}

.cat{margin-bottom:44px;scroll-margin-top:calc(var(--rail-h) + 14px)}

.cat__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:6px;
  border-bottom:2px solid var(--blue);
}

.cat__name{
  margin:0;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:clamp(34px,9vw,50px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.005em;
}

.cat__alt{
  font-size:clamp(16px,4vw,20px);
  font-weight:500;
  opacity:.72;
  white-space:nowrap;
}

.cat__desc{
  margin:10px 0 0;
  font-size:16px;
  font-style:italic;
  opacity:.78;
  max-width:44ch;
}

/* set price for a whole section — the Formule block */
.setprice{
  display:flex;
  margin:20px 0 4px;
  padding:16px 18px 14px;
  background:var(--cyan);
  color:var(--on-accent);
}
.setprice__opt{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 6px;
  border:0;
  background:transparent;
  color:inherit;
  font-family:inherit;
  transition:background .18s ease,color .18s ease,opacity .18s ease;
}
button.setprice__opt{cursor:pointer;opacity:.55}
button.setprice__opt.is-on{
  opacity:1;
  background:var(--on-accent);
  color:var(--cyan);
}

.setprice__hint{
  margin:8px 0 0;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  opacity:.6;
}
/* two prices sit side by side, split by a hairline */
.setprice--two .setprice__opt + .setprice__opt{
  border-left:1.5px solid currentColor;
  border-left-color:color-mix(in srgb, currentColor 35%, transparent);
}
.setprice--two .setprice__opt.is-on + .setprice__opt,
.setprice--two .setprice__opt.is-on{border-left-color:transparent}

/* dishes that only come with the bigger price */
.item--tierhidden{display:none}
.setprice--two .setprice__num{font-size:clamp(38px,11vw,58px)}
.setprice__num{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:clamp(46px,15vw,72px);
  line-height:.9;
  letter-spacing:.01em;
}
.setprice__note{
  font-size:14px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.85;
}

.items{list-style:none;margin:18px 0 0;padding:0}

.item{padding:13px 0;border-bottom:1px solid var(--rule)}
.item:last-child{border-bottom:0}

.item__line{display:flex;align-items:baseline;gap:6px}

.item__name{
  font-size:20px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.item__leader{
  flex:1;
  min-width:14px;
  border-bottom:1.5px dotted var(--rule);
  transform:translateY(-4px);
}

.item__price{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:.02em;
  white-space:nowrap;
}

.item__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:3px;
}

.item__desc{
  font-size:15.5px;
  opacity:.72;
  max-width:46ch;
}

.tag{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:2px 8px 1px;
  border:1px solid var(--rule);
  border-radius:100px;
}

/* the house dishes carry a solid marker, everything else stays quiet */
.item--featured{
  position:relative;
  padding-left:14px;
}
.item--featured::before{
  content:"";
  position:absolute;
  left:0;top:15px;
  width:5px;height:5px;
  background:var(--blue);
  border-radius:50%;
}

/* dishes inside a set-price section carry no individual price */
.item--noprice .item__line{gap:0}
.item--noprice .item__name{font-size:19px}

.noresults,.empty{
  padding:26px 0;
  font-size:18px;
  font-style:italic;
  opacity:.75;
  text-align:center;
}

/* =============================== STORY =================================== */

.story{
  position:relative;
  margin-top:26px;
  padding:52px 24px 56px;
  background:var(--cyan);
  color:var(--on-accent);
  text-align:center;
}

.story__title{
  margin:0 0 18px;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:clamp(32px,9vw,46px);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.story__body{
  max-width:52ch;
  margin:0 auto;
  font-size:17px;
  line-height:1.5;
}

.story__sign{
  margin:26px 0 0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}

/* =============================== FOOTER ================================== */

.foot{
  padding:34px 20px 46px;
  text-align:center;
}

.foot__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}

.btn{
  padding:11px 20px 9px;
  border:1.5px solid var(--blue);
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .18s ease,color .18s ease;
}
.btn:active{background:var(--cyan);color:var(--on-accent)}

.foot__note{
  max-width:44ch;
  margin:0 auto;
  font-size:14px;
  opacity:.7;
}

.foot__mark{
  margin:26px 0 0;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:.3em;
  text-indent:.3em;
  opacity:.35;
  text-transform:uppercase;
}

/* ============================== TO TOP =================================== */

.totop{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:45;
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:var(--cyan);
  color:var(--on-accent);
  font-size:19px;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}

/* ============================== ARABIC =================================== */

html[data-lang="ar"] body{
  font-family:'Barlow Condensed','Noto Kufi Arabic',system-ui,sans-serif;
}
html[data-lang="ar"] .menu,
html[data-lang="ar"] .cat__head,
html[data-lang="ar"] .item__line,
html[data-lang="ar"] .item__meta,
html[data-lang="ar"] .story,
html[data-lang="ar"] .foot{direction:rtl}
html[data-lang="ar"] .item__name,
html[data-lang="ar"] .cat__name,
html[data-lang="ar"] .rail__chip,
html[data-lang="ar"] .hero__tagline{text-transform:none;letter-spacing:0}
html[data-lang="ar"] .rail__scroll{direction:rtl}

/* ============================== DESKTOP ================================== */

@media (min-width:820px){
  body{font-size:18px}
  .menu{padding:56px 24px 20px}
  .cat{margin-bottom:64px}
  .item__name{font-size:22px}
  .item__price{font-size:24px}
  .hero__tagline{letter-spacing:.1em}
  .rail__scroll{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rail__scroll{scroll-behavior:auto}
}