/* Base styles shared by every template page.
   Extracted from templates/restaurant/_head.blade.php on 2026-09-22; it was inlined into every
   ordering page, and those pages are never cached. Linked with a content
   hash (App\Support\StaticAsset), so the browser keeps it for a week and
   fetches it again only when a deploy changes it. Nothing here may depend on
   the page: a value that differs per request stays inline in the template. */

/* Base reset and type. Everything below is built on the preset tokens
   emitted above (--canvas, --ink, --ink-muted, --surface, --surface-2,
   --border, --radius, --heading-case, --heading-tracking)
   plus the owner's --c-primary/--c-secondary accent and --font-heading/
   --font-body. Nothing here reads --c-bg or --c-text: those stay for
   backwards compatibility in ThemeCss, but the template itself now paints
   --canvas and --ink. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[x-cloak]{display:none!important}
/* The faint scattered-doodle texture behind every stretch of bare canvas.
   A fixed mid-grey rather than a theme token because a data URI cannot
   read var(); at 3.5% stroke opacity the same grey stays subliminal on
   both the light and the dark presets. Sections that paint their own
   background (--surface-2 bands, cards) simply cover it. */
/* Deliberately the background SHORTHAND, image and colour together, not
   background-color/background-image longhands: the ordering shell's
   .ord-body sets the same shorthand at higher specificity, which keeps
   this rule (and its preset token) a dead letter on ordering pages. Split
   longhands would win their own properties there and trip the cascade
   guard in OrderingChromeTest. */
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23808080' stroke-opacity='.035' stroke-width='1.5'%3E%3Ccircle cx='30' cy='34' r='9'/%3E%3Cpath d='M96 18c6-8 18-8 24 0'/%3E%3Cpath d='M170 52l12 12m0-12l-12 12'/%3E%3Cpath d='M28 130c8 6 8 14 0 20'/%3E%3Ccircle cx='128' cy='118' r='4'/%3E%3Cpath d='M180 150c-8 10-22 10-30 2'/%3E%3Cpath d='M60 196l10-14 10 14'/%3E%3Ccircle cx='196' cy='206' r='7'/%3E%3C/g%3E%3C/svg%3E");line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);line-height:1.15;margin:0 0 1rem;text-transform:var(--heading-case);letter-spacing:var(--heading-tracking)}
p{margin:0 0 1rem}
img{max-width:100%;height:auto}
a{color:inherit}

/* .skip-link's shared box model (positioning, padding, transition) lives
   here, but NOT its colours or radius: those read the theme preset
   tokens (--ink/--canvas/--radius), and this partial is pulled into the
   ordering shell too, where preset tokens must never reach a rendered
   page (see ordering.blade.php's own "Ordering chrome" comment).
   layout.blade.php (marketing) and ordering.blade.php (ordering) each
   add their own .skip-link rule with just the colours and radius, the
   same split layout.blade.php already uses for .nav/.footer/.bottom-bar:
   chrome that must never render on the other surface stays out of this
   shared file entirely. */
.skip-link{position:absolute;left:1rem;top:-3.5rem;z-index:100;padding:.65rem 1.1rem;text-decoration:none;font-weight:600;transition:top .15s ease}
.skip-link:focus{top:1rem}

/* Shared design-system primitives. Every later block/page task builds on
   these and nothing else ad hoc. */
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1.5rem}
.wrap-narrow{max-width:44rem;margin-inline:auto;padding-inline:1.5rem}

/* One organic blob shape shared by every blob-cropped image. */
:root{--blob-radius:58% 42% 55% 45%/45% 52% 48% 55%}

.section{padding-block:clamp(3rem,6vw,6rem)}
/* Alternating section rhythm for the home page's block stack: every other
   top-level <section> under <main> picks up a tint instead of sitting flat
   on the canvas. --surface-2 rather than --surface: on all three presets
   --surface sits too close to --canvas to read as a deliberate rhythm
   (minimal in particular is ~1.04:1, the same "reads as unstyled" gap the
   .card fix addresses) while --surface-2 is a visibly bigger step on every
   preset and still leaves .card's own --surface background one step
   lighter (warm, minimal) or one step darker (dark) than the section
   around it, so cards keep reading as raised/inset rather than blending
   in. :not(.hero) keeps the hero's own background (image, or --c-primary
   band) from ever being overridden by this rule regardless of which
   position it lands in, since an admin can reorder blocks freely. */
main > section:nth-of-type(even):not(.hero){background:var(--surface-2)}

.eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .75rem}

.display{font-size:clamp(2.5rem,1.9rem + 3vw,4.5rem);font-weight:600;line-height:1.05;margin:0 0 1.25rem}
.h2{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);font-weight:600;line-height:1.1;margin:0 0 1.25rem}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);color:var(--ink-muted);max-width:38rem;margin:0 0 1.5rem}

/* Box model only, deliberately. This stylesheet ships on the ordering
   surface too, and --radius is a theme preset token: a merchant on the
   dark preset must not be able to reach the ordering surface through it.
   The radius lives in layout.blade.php, which only marketing pages use.
   Same split as .skip-link, and for the same reason. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.85rem;padding:.85rem 1.65rem;border:2px solid transparent;font-weight:600;text-decoration:none;line-height:1}
.btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-ink)}
/* Not filter:brightness(.94): that always darkened, which only raised
   contrast back when the ink was always white. Now the ink can be black,
   and darkening a light accent LOWERS contrast against black text, so the
   direction has to depend on the ink. --c-primary-hover is computed in
   PHP (ThemeCss::hoverFor) precisely because that branch can't be
   expressed in plain CSS. */
.btn-primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.btn-sm{min-height:2.35rem;padding:.5rem 1rem;font-size:.85rem}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--card-shadow)}

/* Nothing decorative may hand the page a sideways scrollbar: floating
   cutouts hang past the hero on purpose, and a reveal animation is
   off-position for as long as it runs. `clip` rather than `hidden`
   because hidden makes this a scroll container and the sticky header
   would stop sticking; clip only trims what escapes. Inner rails that
   scroll sideways on purpose keep their own overflow and are unaffected. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* Reveal on scroll: fully visible by default (no JS, or reduced motion,
   or no IntersectionObserver support all leave content exactly as it
   is). Only after the inline script below opts in does a reveal element
   start from a hidden state and animate to .is-visible. Four directional
   variants share one observer; --reveal-delay staggers siblings that
   enter together (cards in a grid), set inline per element. */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(24px)}
.js-reveal .reveal-left{opacity:0;transform:translateX(-34px)}
.js-reveal .reveal-right{opacity:0;transform:translateX(34px)}
.js-reveal .reveal-scale{opacity:0;transform:scale(.86)}
.js-reveal :is(.reveal,.reveal-left,.reveal-right,.reveal-scale){transition:opacity .7s ease,transform .7s ease;transition-delay:var(--reveal-delay,0s)}
.js-reveal :is(.reveal,.reveal-left,.reveal-right,.reveal-scale).is-visible{opacity:1;transform:none}
/* A phone column is the full width of the page, so sliding one in from
   34px to the side parks it 34px past the right edge until the observer
   fires. Every not-yet-revealed block downstream did that at once, which
   is what let the page scroll sideways and threw the header and the
   cards out of line with the screen. Under 720px the same reveal comes
   from below, where the page already scrolls. */
@media (max-width:720px){
  .js-reveal :is(.reveal-left,.reveal-right){transform:translateY(24px)}
}

/* Script accent: the playful cursive counterpoint the big headings play
   against. The heading family's own italic rather than a dedicated
   script font, so a Cyrillic site keeps real glyphs (see the Cyrillic
   fallback comments in ThemeCss) and no new font request is added. */
.script{font-family:var(--font-heading);font-style:italic;font-weight:600;text-transform:none;letter-spacing:0}
.eyebrow-script{display:block;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.2;color:var(--secondary-ink);margin:0 0 .5rem}
/* The accent-coloured word inside a two-tone heading. */
.accent-word{color:var(--accent-ink)}

/* Floating decorations: little themed line-art shapes (leaves, rings,
   scribbles) that drift around heroes and section corners. Purely
   decorative, so they are aria-hidden in markup, never intercept the
   pointer, and hide entirely on phones where they would crowd or
   overflow the content. A section hosting them opts in with .has-deco,
   which also clips anything poking past its edge. */
.has-deco{position:relative;overflow:hidden}
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0;line-height:0}
.deco svg{width:100%;height:100%}
@media (max-width:640px){.deco{display:none}}
@keyframes float-a{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(5deg)}}
@keyframes float-b{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(9px,-15px) rotate(-7deg)}}
@keyframes float-c{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(11px) scale(1.05)}}
.float-a{display:block;animation:float-a 7s ease-in-out infinite}
.float-b{display:block;animation:float-b 9s ease-in-out infinite}
.float-c{display:block;animation:float-c 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.float-a,.float-b,.float-c{animation:none}}