/* ==========================================================================
   UI System — Tokens • Base • Typography • Layout • Utilities
   WMC Base white-label. Swap token values per brand in the :root block.
   ========================================================================== */

/* === Brand color tokens — EDIT THESE PER BRAND === */
:root { --brand:#111111; }          /* Primary accent — replace with brand colour */
:root { --brand-hover:#333333; }    /* Hover/active state of --brand */
:root { --plum:#111111; }           /* Dark secondary — often same as --brand */

/* === Neutral palette === */
:root { --white:#ffffff; }
:root { --black:#0a0a0a; }
:root { --ink:#1a1a1a; }            /* Body text */
:root { --paper:#ffffff; }          /* Page background */
:root { --muted:#f5f5f5; }          /* Light grey sections */
:root { --mid:#6b6b6b; }            /* Secondary text, captions */
:root { --border:#e0e0e0; }         /* Lines, dividers */

/* === Layout === */
:root { --container:1440px; }
:root { --radius-sm:8px; }
:root { --radius-md:16px; }
:root { --radius-lg:24px; }
:root { --shadow-sm:0 2px 8px rgba(0,0,0,.06); }
:root { --shadow-md:0 6px 20px rgba(0,0,0,.10); }

/* === Fluid type scale === */
:root { --step--1:clamp(.95rem,.88rem + .2vw,1.05rem); }
:root { --step-0:clamp(1.05rem,.98rem + .35vw,1.125rem); }
:root { --step-1:clamp(1.25rem,1.05rem + .8vw,1.5rem); }
:root { --step-2:clamp(1.6rem,1.2rem + 1.6vw,2rem); }
:root { --step-3:clamp(2.2rem,1.6rem + 2.4vw,3rem); }
:root { --step-4:clamp(3rem,2rem + 4vw,4rem); }
:root { --step-5:clamp(4rem,2.6rem + 6vw,6rem); }

/* === Spacing scale === */
:root { --space-1:4px; }
:root { --space-2:8px; }
:root { --space-3:12px; }
:root { --space-4:16px; }
:root { --space-5:24px; }
:root { --space-6:32px; }
:root { --space-7:48px; }
:root { --space-8:64px; }

/* === Header colour tokens — override per brand in brand.css === */
:root { --header-bg:var(--paper); }      /* Default: light header */
:root { --header-text:var(--brand); }    /* Default: brand colour nav links */

/* === Font stacks — self-hosted via /assets/css/font.css === */
:root { --ff-heading:"Brown Std",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }  /* weight 700 — brownstd-bold */
:root { --ff-body:"Brown Std",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }     /* weight 300 — brownstd-light */
:root { --ff-display:"Heavitas",Georgia,serif; }                                          /* special/display use only */

/* ==========================================================================
   Base / Resets
   ========================================================================== */
* { box-sizing:border-box; }
html { text-size-adjust:100%; scroll-behavior:smooth; font-size:16px; }
@media (min-width:1400px){ html { font-size:16px; } }
@media (max-width:480px){ html { font-size:16px; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--ff-body); font-weight:300; font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { max-width:100%; height:auto; display:block; }

/* ==========================================================================
   Links / Focus / Selection
   ========================================================================== */
a { color:var(--brand); text-decoration:none; text-underline-offset:.15em; }
a:hover { color:var(--brand-hover); text-decoration:underline; }
::selection { background:var(--brand); color:#fff; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }

/* ==========================================================================
   Utilities — brand link (no decoration)
   ========================================================================== */
.wmc-link { color:var(--brand) !important; text-decoration:none !important; }
.wmc-link:hover { color:var(--brand-hover) !important; text-decoration:none !important; }
.wmc-link:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }

/* ==========================================================================
   Headings / Type
   ========================================================================== */
h1,h2,h3,h4,h5,h6 { margin:0 0 var(--space-4); hyphens:none; overflow-wrap:normal; text-wrap:balance; text-transform:none; }
h1 { font:700 clamp(2rem,1.6rem + 2vw,3rem)/1.1 var(--ff-heading); color:var(--ink); letter-spacing:.01em; }
h2 { font:300 clamp(1.375rem,1.1rem + 1vw,2.125rem)/1.15 var(--ff-body); color:var(--brand); letter-spacing:.01em; margin:0 0 6px 0; }
h3 { font:300 clamp(1.125rem,1rem + .6vw,1.625rem)/1.2 var(--ff-body); color:var(--brand); }
h4 { font:700 clamp(1rem,0.95rem + .2vw,1.125rem)/1.3 var(--ff-body); color:var(--ink); }
h5 { font:400 clamp(0.95rem,0.9rem + .15vw,1.05rem)/1.3 var(--ff-body); color:var(--brand); }
h6 { font:400 clamp(0.9rem,0.85rem + .1vw,1rem)/1.3 var(--ff-body); color:var(--brand); }
.wmc-display { font-family:var(--ff-display); }  /* Apply to any element for display/luxury font */
.lede { font:500 var(--step-1)/1.6 var(--ff-body); color:var(--ink); }
.small { font-size:var(--step--1); color:var(--mid); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   Containers / Copy / Lists / Rules
   ========================================================================== */
.container { width:min(var(--container),92vw); margin-inline:auto; padding-inline:var(--space-4); }
p { margin:0 0 var(--space-4); }
ul,ol { margin:0 0 var(--space-4); padding-left:1.2em; }
li { margin:0 0 .5em; }
hr { border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); margin:var(--space-7) 0; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.center { text-align:center; }
.no-hyphens { -webkit-hyphens:none; hyphens:none; overflow-wrap:normal; word-break:normal; }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mt-1 { margin-top:var(--space-1); }
.mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); }
.mt-4 { margin-top:var(--space-4); }
.mt-5 { margin-top:var(--space-5); }
.pt-0 { padding-top:0; }
.pb-0 { padding-bottom:0; }
.text-muted { color:var(--mid); }
.text-brand { color:var(--brand); }
.bg-muted { background:var(--muted); }
.bg-brand { background:var(--brand); color:#fff; }

/* ==========================================================================
   Buttons — base
   ========================================================================== */
.wmc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:5px; font:700 .95rem/1 var(--ff-body); text-decoration:none; cursor:pointer; transition:transform .15s ease, filter .15s ease; border:none; }
.wmc-btn--primary { background:var(--brand); color:#fff !important; }
.wmc-btn--primary:hover { filter:brightness(1.08); transform:translateY(-1px); color:#fff !important; text-decoration:none !important; }
.wmc-btn--ghost { background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.9); }
.wmc-btn--ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff !important; text-decoration:none !important; }
.wmc-btn--ghost-ink { background:transparent; color:var(--ink) !important; border:1px solid rgba(0,0,0,.22); }
.wmc-btn--ghost-ink:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.35); color:var(--ink) !important; text-decoration:none !important; }
.wmc-btn--dark { background:var(--ink); color:#fff !important; }
.wmc-btn--dark:hover { filter:brightness(1.12); transform:translateY(-1px); color:#fff !important; text-decoration:none !important; }

/* ==========================================================================
   Open/Closed hours badge
   ========================================================================== */
.wmc-hours__badge[data-state="open"] { color:#1a7a3f; font-weight:700; }
.wmc-hours__badge[data-state="closed"] { color:#b91c1c; font-weight:700; }
.wmc-hours__row[data-today] { font-weight:700; }
.wmc-hours__next { font-size:.9rem; color:var(--mid); }

/* ==========================================================================
   Rating widget (Google / Tripadvisor)
   ========================================================================== */
.wmc-rating { display:inline-flex; align-items:center; gap:8px; }
.wmc-rating__stars { position:relative; display:inline-block; font-size:1rem; color:#e0e0e0; }
.wmc-rating__stars::after { content:"★★★★★"; position:absolute; inset:0; color:#f59e0b; overflow:hidden; width:var(--fill,100%); }
.wmc-rating__value { font-weight:700; font-size:1rem; color:var(--ink); }
.wmc-rating__count { font-size:.85rem; color:var(--mid); }

/* ==========================================================================
   Breadcrumbs (Rank Math)
   ========================================================================== */
.rm-breadcrumbs-wrap { padding:10px 0; font-size:.85rem; color:var(--mid); }
.rm-breadcrumbs-wrap a { color:var(--mid); }
.rm-breadcrumbs-wrap a:hover { color:var(--brand); }

/* ==========================================================================
   Home Hero
   ========================================================================== */
.wmc-hero { position:relative; width:100vw; height:100svh; margin-left:calc(50% - 50vw); padding:0; overflow:hidden; background:var(--paper); }
.wmc-hero picture { position:absolute; inset:0; z-index:1; }
.wmc-hero picture img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.wmc-hero__overlay { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.55) 100%); }
.wmc-hero__content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; color:#fff; width:min(92vw,880px); }
.wmc-hero__logo { display:inline-block; width:min(60vw,560px); height:auto; margin:0 0 18px 0; filter:drop-shadow(0 2px 12px rgba(0,0,0,.25)); }
.wmc-hero__kicker { margin:0 0 20px 0; font:700 clamp(18px,2.2vw,24px)/1.25 var(--ff-body); letter-spacing:.2px; color:rgba(255,255,255,.9); }
.wmc-hero__title { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.45); }
.wmc-hero__subtitle { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.60),0 1px 2px rgba(0,0,0,.40); }
.wmc-hero__ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Scroll cue */
.wmc-hero__scrollcue { position:absolute; bottom:clamp(60px,8vh,80px); left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:40px; height:40px; text-decoration:none; }
.wmc-hero__scrollcue-ico { display:block; width:20px; height:20px; border-right:2px solid rgba(255,255,255,.8); border-bottom:2px solid rgba(255,255,255,.8); transform:rotate(45deg); animation:wmc-scrollcue 1.4s ease-in-out infinite; }
@keyframes wmc-scrollcue { 0%,100% { opacity:.3; transform:rotate(45deg) translate(-3px,-3px); } 50% { opacity:1; transform:rotate(45deg) translate(3px,3px); } }

/* Responsive */
@media (max-width:1024px) { .wmc-hero__logo { width:min(70vw,420px); } }
@media (max-width:768px) { .wmc-hero { height:100svh; } .wmc-hero__content { width:min(94vw,640px); } .wmc-hero__logo { width:min(75vw,300px); margin:0 0 12px 0; } .wmc-hero__kicker { margin:0 0 14px 0; } .wmc-hero__ctas { gap:10px; } }