/* Bakery template, shared by every page. Every colour derives from the BRAND block in each page. */
:root{
  --step:color-mix(in oklab,var(--paper) 90%,var(--ink));
  --step-2:color-mix(in oklab,var(--paper) 82%,var(--ink));
  --muted:color-mix(in oklab,var(--ink) 74%,var(--paper));
  --line:color-mix(in oklab,var(--ink) 16%,var(--paper));
  --accent-ink:var(--paper);
  --accent-text:var(--accent);
  --plate:#fff;
  --logo-url:url(/img/logo.png);
  --m:clamp(1.25rem,5vw,4rem);
  --ok:#6fae74;--shut:#c97b6c
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans),"Readex Pro",Tahoma,sans-serif;font-weight:300;font-size:1.0625rem;line-height:1.7;-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(--accent) 25%,transparent)}
h1,h2,h3{font-family:var(--display),"El Messiri",serif;font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
.preview-bar{background:var(--accent);color:var(--accent-ink);font-size:.9375rem;text-align:center;padding:.45rem 1rem;font-weight:400}
.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(--ink);color:var(--paper);padding:.5rem 1rem;z-index:9}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Buttons: one shape (pill), one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;text-decoration:none;border-radius:999px;padding:.8rem 1.6rem;font-weight:500;font-size:1rem;background:var(--accent);color:var(--accent-ink);transition:transform .2s,background-color .2s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;border:1.5px solid color-mix(in srgb,currentColor 55%,transparent)}
.btn.ghost:hover{background:color-mix(in srgb,currentColor 18%,transparent)}

/* The logo plate: the real logo on its own background colour (sampled by site.js), arch-topped when the logo is tall */
.plate{display:inline-grid;place-items:center;background:var(--plate);border-radius:.9rem;padding:.5rem .7rem;text-decoration:none;line-height:0}
:root[data-logo=tall] .plate{border-radius:999px 999px .9rem .9rem;padding:.75rem .7rem .5rem}
:root[data-plate=none] .plate:not(.on-photo .plate){background:none;padding:0}
.plate img{height:var(--logo-h,3.5rem);width:auto;max-width:9rem;object-fit:contain;opacity:0;transition:opacity .3s}
:root[data-logo] .plate img{opacity:1}
:root[data-logo=square]{--logo-h:4rem}:root[data-logo=tall]{--logo-h:4.75rem}:root[data-logo=wide]{--logo-h:3rem}

/* Social / 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 10%,transparent);transition:background-color .2s,transform .2s}
.icons a:hover{background:color-mix(in srgb,currentColor 22%,transparent);transform:translateY(-2px)}
.icons svg{width:1.2rem;height:1.2rem;fill:currentColor}

/* Delivery-app buttons (<a class="order-app" href="https://hungerstation.com/sa-ar/restaurant/%D8%A7%D9%84%D8%AF%D9%85%D8%A7%D9%85/%D8%A7%D9%84%D9%81%D9%8A%D8%B5%D9%84%D9%8A%D8%A9/18944" target="_blank" rel="noopener"><img src="/img/apps/hungerstation.png" alt="هنقرستيشن" width="132" height="44" loading="lazy"></a> writes <a class="app" href…><img src="/img/apps/<app>.png" alt="" width="64" height="64">الاسم</a>) */
.apps{display:flex;flex-wrap:wrap;gap:.75rem}
.app{display:inline-flex;align-items:center;gap:.7rem;min-height:3.5rem;padding:.45rem .6rem .45rem 1.3rem;border-radius:999px;background:var(--step-2);color:var(--ink);text-decoration:none;font-weight:400;font-size:1.0625rem;transition:transform .2s,background-color .2s}
.app:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--step-2) 80%,var(--ink))}
.app img{width:2.5rem;height:2.5rem;border-radius:.65rem;flex:none}

/* Dish photo placeholder: the shop's own logo, faint, on a brand tone (never a fake dish) */
.ph{background:color-mix(in oklab,var(--brand) 30%,var(--step));position:relative}
.ph::after{content:"";position:absolute;inset:24%;background:var(--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(24px)}
.rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}