/* 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.15;margin:0;text-wrap:balance}
.preview-bar{background:var(--text);color:var(--ground);font-size:1rem;text-align:center;padding:.45rem 1rem;line-height:1.5}
.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)}
.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: only below-the-fold parts wait (site.js marks them), each reveals once; without script all is visible */
.rv.wait{opacity:0;transform:translateY(28px)}
.rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}