/* Fast-food template (برجر، شاورما، بروستد، وجبات سريعة), shared by every page. Page structure: clients/century.
   Look: "the sign over the counter". The shop's name is set as large as its sign, on the brand's own colour; under it
   the page is a bright counter (light ground, dark ink) where the only colour comes from the real food photos, the
   prices and the brand fields. Every colour derives from the BRAND block in each page; site.js measures it and sets
   --field (the brand, made readable), --hot (prices and actions on the light ground) and their inks. */
:root{
  --ground:var(--paper);
  --text:var(--ink);
  --field:var(--brand);
  --field-ink:var(--brand-ink);
  --hot:var(--brand);
  --hot-ink:var(--brand-ink);
  --surface:color-mix(in oklab,var(--ground) 93%,var(--field));
  --surface-2:color-mix(in oklab,var(--ground) 86%,var(--field));
  --muted:color-mix(in oklab,var(--text) 74%,var(--ground));
  --plate:#fff;
  --logo-url:url(/img/logo.png);
  --m:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --ok:#2f8f4e;--shut:#c2412d
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ground);color-scheme:light}
@media(pointer:fine){html{overscroll-behavior:none}}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans),"Alexandria",Tahoma,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--hot) 22%,transparent)}
h1,h2,h3{font-family:var(--display),"Lalezar",sans-serif;font-weight:400;line-height:1.3;margin:0;text-wrap:balance;letter-spacing:0}
.preview-bar{background:var(--text);color:var(--ground);font-size:.875rem;text-align:center;padding:.3rem var(--m);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skip{position:absolute;top:1rem;inset-inline-start:1rem;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;background:var(--text);color:var(--ground);padding:.5rem 1rem;z-index:20}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.hero :focus-visible,.order :focus-visible,footer :focus-visible{outline-color:currentColor}
::selection{background:var(--hot);color:var(--hot-ink)}

/* Buttons: one shape (pill), one fill. On the light ground the fill is --hot; on a brand field it is the field's ink. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.5rem;padding:0 1.9rem;border-radius:999px;background:var(--hot);color:var(--hot-ink);text-decoration:none;font-weight:600;font-size:1.125rem;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .2s}
.btn:hover{background:color-mix(in oklab,var(--hot) 84%,var(--text))}.btn:active{transform:scale(.96)}
.btn.line{background:transparent;color:inherit;border:2px solid currentColor}
.btn.line:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.btn.line:active{background:color-mix(in srgb,currentColor 20%,transparent)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.on-field>*>.btn:not(.line),.on-field .ctas .btn:not(.line){background:var(--field-ink);color:var(--field)}
.on-field>*>.btn:not(.line):hover,.on-field .ctas .btn:not(.line):hover{background:color-mix(in oklab,var(--field-ink) 86%,var(--field))}

/* The logo sticker: the real logo, trimmed by site.js, on its own background colour (or a plate that makes it read) */
.plate{display:inline-grid;place-items:center;background:var(--plate);border-radius:1rem;text-decoration:none;line-height:0;padding:.55rem .8rem;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
a.plate:hover{transform:rotate(-2deg) scale(1.03)}
:root[data-plate=none] .plate{background:none;padding:0}
.plate img{height:var(--logo-h,4rem);width:auto;max-width:13rem;object-fit:contain;opacity:0;transition:opacity .3s}
:root[data-logo] .plate img{opacity:1}
:root[data-logo=badge] .plate{padding:0;overflow:hidden}
:root[data-logo=square]{--logo-h:4.5rem}:root[data-logo=tall]{--logo-h:5.25rem}:root[data-logo=wide]{--logo-h:3.5rem}:root[data-logo=badge]{--logo-h:5rem}

/* Contact icons */
.icons{display:flex;gap:.5rem;align-items:center}
.icons a{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;color:inherit;background:color-mix(in srgb,currentColor 12%,transparent);transition:background-color .2s,transform .2s}
.icons a:hover{background:color-mix(in srgb,currentColor 24%,transparent);transform:translateY(-2px)}
.icons svg{width:1.2rem;height:1.2rem;fill:currentColor}

/* Delivery-app buttons. The ORDER_BUTTONS marker becomes <a class="order-app"><img src="/img/apps/<app>.png" alt="<name>"></a>;
   site.js adds the app's name beside its official icon. */
.apps{display:flex;flex-wrap:wrap;gap:.75rem}
.order-app,.app{display:inline-flex;align-items:center;gap:.75rem;min-height:3.75rem;padding:.5rem .55rem .5rem 1.5rem;border-radius:999px;background:var(--ground);color:var(--text);text-decoration:none;font-weight:600;font-size:1.125rem;transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .2s}
.order-app:hover,.app:hover{transform:translateY(-3px);background:color-mix(in oklab,var(--ground) 88%,var(--text))}
.order-app:active,.app:active{transform:scale(.97)}
.order-app img,.app img{width:2.75rem!important;height:2.75rem!important;border-radius:.7rem;flex:none;object-fit:cover}

/* A dish with no real photo: the shop's own logo, faint, on its brand tone (never a fake dish) */
.ph{background:color-mix(in oklab,var(--field) 88%,var(--ground));position:relative;display:block}
.ph::after{content:"";position:absolute;inset:28%;background:var(--field-ink);-webkit-mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;opacity:.3}

/* Entrances: a part below the fold rises in once, just before it arrives. Nothing is ever held hidden: without
   script, before the observer fires, or in a full-page capture every part is already in place. */
@keyframes rv-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv.in{animation:rv-rise .8s cubic-bezier(.2,.7,.2,1) both}
.rv.in.d1{animation-delay:.08s}.rv.in.d2{animation-delay:.16s}.rv.in.d3{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Owner 2026-10-28: the logo is the clean transparent asset from scripts/logo_clean.py and stands on the page itself, sized
   like Levain's header logo: no plate, disc or tile around it. .wm is the shop's name as a wordmark, which site.js puts
   in place of the logo where it is too poor to show (data-wordmark) or would not read on its surface; the footer
   already sets the name large, so a footer logo that turns into a wordmark simply leaves. */
:root[data-plate=none] .plate{background:none;padding:0;border-radius:0}
:root[data-plate=none] .plate img{max-width:12rem}
:root[data-plate=none][data-logo=square]{--logo-h:4.75rem}:root[data-plate=none][data-logo=tall]{--logo-h:5.5rem}
:root[data-plate=none][data-logo=wide]{--logo-h:3.5rem}:root[data-plate=none][data-logo=badge]{--logo-h:4.75rem}
.wm{display:block;font-family:var(--display),sans-serif;font-weight:400;font-size:1.375rem;line-height:1.15;max-width:13ch;text-wrap:balance;color:inherit;letter-spacing:0}
footer a:has(> .wm){display:none}
/* on the home page the hero's own name is the wordmark: the bar doesn't repeat it */
header:has(#name) .plate:has(> .wm){display:none}