/* Bakery template ("Flour and oven"), shared by every page. Every colour derives from the BRAND block in each page:
   the paper is the flour side, --crust the oven side (the darker of paper and ink, warmed with the brand). */
:root{
  --crust:color-mix(in oklab,var(--ink) 72%,var(--brand));
  --crust-ink:var(--paper);
  --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));
    --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.8;-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.35;letter-spacing:0;margin:0;text-wrap:balance}
.preview-bar{background:var(--accent);color:var(--accent-ink);font-size:.875rem;text-align:center;padding:.3rem var(--m);font-weight:500;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(--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:3.25rem;text-decoration:none;border-radius:999px;padding:.8rem 1.9rem;font-weight:500;font-size:1.0625rem;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)}
/* the second action: a clear outline on whatever it stands on, never a grey (disabled-looking) fill */
.btn.ghost,.btn.line{background:transparent;color:inherit;border:2px solid currentColor}
.btn.ghost:hover,.btn.line:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.btn.ghost:active,.btn.line:active{background:color-mix(in srgb,currentColor 18%,transparent)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* 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 (<!--ORDER_BUTTONS--> 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}
.order-app,.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}
.order-app:hover,.app:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--step-2) 80%,var(--ink))}
.order-app img,.app img{width:2.5rem!important;height:2.5rem!important;object-fit:cover;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: 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 rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv.in{animation: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:700;font-size:1.375rem;line-height:1.4;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}
:root[data-paper=dark]{--crust:color-mix(in oklab,var(--paper) 80%,var(--brand));--crust-ink:var(--ink)}

/* Foundation 2026-10-28 (every new shop, no per-client styling) */
/* hours: today as the one tag pulled from the rack, the week folded under it (native details; #hours rows unchanged) */
.today-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:36rem;margin:0 0 .6rem;padding:1rem 1.25rem;background:var(--crust);color:var(--crust-ink);font-family:var(--display),serif;font-weight:700;font-size:1.375rem;line-height:1.5}
.today-line[hidden]{display:none}.today-line b{font-variant-numeric:tabular-nums}
.week-hours{max-width:36rem}
.week-hours summary{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;cursor:pointer;color:var(--muted);font-weight:500;list-style:none;width:fit-content}
.week-hours summary::-webkit-details-marker{display:none}
.week-hours summary::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:0 0 2px 2px;rotate:-45deg;translate:0 -.15em;transition:rotate .2s}
.week-hours[open] summary::after{rotate:135deg;translate:0 .1em}
.week-hours summary:hover{color:inherit}
/* the close: a hairline, then the small print */
footer small{padding-top:1.25rem;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}