/* Sites by Leo starter kit: the plumbing, not the look.
   It sets tokens, type basics, buttons, header, hours, form, footer and the phone bar.
   It has NO section layouts (no cards, steps, galleries, review boxes, hero) on purpose: those come from the shop,
   written fresh for each site in its own CSS below these rules. See standards/design.md, "Clean, not generated". */
:root{
  /* Brand: every value comes from BRIEF.md (the sign, logo, shopfront, packaging). Nothing here is a default look. */
  --bg:#FFFFFF;          /* page background */
  --surface:#FFFFFF;     /* the rare panel (form, hours) */
  --ink:#141414;         /* main text */
  --muted:#5C5C5C;       /* secondary text (check 4.5:1 on --bg) */
  --line:#E4E4E4;        /* hairlines */
  --accent:#141414;      /* ONE accent: the main button and little else */
  --on-accent:#FFFFFF;   /* text on accent (check 4.5:1) */
  --display:system-ui,sans-serif;  /* heading font from BRIEF.md */
  --body:system-ui,sans-serif;     /* body font from BRIEF.md */
  --display-weight:600;
  --radius:0px;          /* photos and panels: pick one radius for the whole site */
  --radius-btn:6px;      /* buttons: square-ish unless the brand is round */
  /* Fixed scale: don't change per client */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
@media (min-width:900px){.wrap{padding-inline:40px}}

/* Type: three sizes do almost everything (h1, h2, body). Big contrast between them, few weights. */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,9vw,96px)}
h2{font-size:clamp(30px,5vw,56px)}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:0}
p{margin:0;max-width:34em;text-wrap:pretty}
.small{font-size:14px;color:var(--muted)}
section{padding-block:var(--s8)}
@media (min-width:900px){section{padding-block:var(--s9)}}

/* Buttons: one filled main button per screen. Anything else is a plain text link, not a second pill. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--radius-btn);font:inherit;font-weight:600;font-size:16px;text-decoration:none;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* Header: brand left, two links max. */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg)}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--display);font-weight:var(--display-weight);font-size:22px;text-decoration:none;white-space:nowrap}
.brand img{height:36px;width:auto}
.site-head nav{display:flex;gap:24px;align-items:center;font-size:15px}
.site-head nav a:not(.btn){text-decoration:none}
.site-head nav a:not(.btn):hover{text-decoration:underline}
@media (max-width:720px){.site-head .hide-sm{display:none}}

/* Specials banner (every site, Leo 14 Oct 2026): the owner writes it in my.sitesbyleo.com.au and it shows straight away.
   Hidden until there's a special. One line in the shop's colour; restyle to the site, keep it quiet and above the header. */
.special{background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.4;padding-block:10px}
.special[hidden]{display:none}
.special p{max-width:none}

/* Gallery page (every site): their own photos, big. Restyle the grid to the site; use the owner's and the best customer photos (credited), never stock. */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:var(--s6)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.gallery .wide{grid-column:1/-1}.gallery .wide img{aspect-ratio:3/2}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}

/* Open now: a plain line of text, not a pill or a pulsing dot. */
.open-now{font-size:15px;font-weight:600}
.open-now.closed{color:var(--muted)}

/* Hours */
.hours{width:100%;max-width:420px;border-collapse:collapse;font-size:15px;margin-top:var(--s4)}
.hours td{padding:8px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:700}
address{font-style:normal}

/* Form: no box around it unless the design calls for one. */
.form{display:grid;gap:var(--s4);max-width:560px;margin-top:var(--s5)}
.form label{display:grid;gap:6px;font-size:15px;font-weight:600}
.form label small{font-weight:400;color:var(--muted)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6}
.form-status{margin:0;font-size:15px}
.form-status.err{color:#B3261E}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Language toggle */
.lang{display:inline-flex;gap:2px;font-size:13px;font-weight:600}
.lang button{border:0;background:transparent;padding:6px 8px;cursor:pointer;font:inherit;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* Footer */
.site-foot{padding-block:var(--s7);font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Phone bar: appears once the first screen's main button has scrolled away (kit.js). */
.mbar{display:none}
@media (max-width:720px){
  .mbar:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  body{padding-bottom:76px}
}

/* Motion, every site (Leo, 17 Oct 2026; standards/design.md): the hero photo settles, the hero text rises in,
   and parts below rise in as they scroll into view (kit.js). Point the two hero lines at the site's own hero. */
@media (prefers-reduced-motion:no-preference){
  .hero img{animation:sbl-settle 1.4s cubic-bezier(.2,.7,.2,1) both}
  .hero-text{animation:sbl-rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes sbl-settle{from{transform:scale(1.06)}}
  @keyframes sbl-rise{from{opacity:0;translate:0 24px}}
  .rv-on .rv{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
  .rv-on .rv.in{opacity:1;translate:0 0}
}