/*
  SKELETON STYLES — identical for every Cupanstudio site. Do not edit per client.
  Brand comes from tokens.css; small decorative extras go in custom.css.
  Mobile first. Breakpoints: 640px, 900px.
*/

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--color-primary);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 7vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose { max-width: 62ch; }

.container { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--color-border); }
.section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.6rem;
}
.lead { font-size: 1.2rem; color: var(--color-muted); max-width: 58ch; }
.muted { color: var(--color-muted); }

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 0.5rem 1rem; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Announcement bar */
.announcement {
  background: var(--color-accent); color: var(--color-on-accent);
  text-align: center; font-size: 0.95rem; padding: 0.55rem 1rem;
}
.announcement a { color: inherit; font-weight: 600; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.25rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-primary); }
.brand img { height: 2.25rem; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; letter-spacing: var(--display-tracking); text-transform: var(--display-transform); }
.brand.has-logo .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary);
}
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem 1.5rem; box-shadow: var(--shadow);
}
.nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-list a {
  display: block; padding: 0.7rem 0.5rem; font-weight: 500; text-decoration: none;
  color: var(--color-primary); border-radius: var(--radius-sm);
}
.nav-list a:hover, .nav-list a[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.nav-list a.nav-cta { background: var(--color-accent); color: var(--color-on-accent); text-align: center; margin-top: 0.5rem; }
.nav-list a.nav-cta:hover { filter: brightness(0.94); }

.socials { display: flex; gap: 0.35rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--color-primary);
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.socials a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.socials svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex; position: static; align-items: center; gap: 1.5rem;
    background: none; border: 0; padding: 0; box-shadow: none;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 0.25rem; }
  .nav-list a { padding: 0.5rem 0.8rem; }
  .nav-list a.nav-cta { margin: 0 0 0 0.5rem; padding-inline: 1.1rem; }
  .socials { margin: 0; }
  .socials a { width: 2.25rem; height: 2.25rem; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem; border-radius: var(--radius); font-weight: 600;
  text-decoration: none; border: 2px solid transparent; transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { filter: brightness(0.94); }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: currentColor; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.hero .btn-ghost { color: #fff; }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Hero */
.hero {
  position: relative; isolation: isolate; color: #fff;
  min-height: min(78vh, 46rem); display: grid; align-items: end;
  background: var(--color-primary);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* A hero with no photograph must not reserve a photograph's height, or the page opens
   on a screenful of flat colour with the words pinned to the bottom of it. Keyed on the
   image itself rather than the slug, so it is right for any build that ends up without a
   hero photo — which is the normal case for a shop whose own photos have not arrived
   yet. A hidden image still leaves its box behind unless told otherwise. */
.hero:has(.hero-media img:not([src])) { min-height: 0; }
.hero-media:has(img:not([src])) { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-overlay); }
.hero-content { padding-block: clamp(3rem, 10vw, 6rem) clamp(2.5rem, 8vw, 5rem); }
.hero h1 { color: #fff; max-width: 14ch; }
.hero .eyebrow { color: rgba(255,255,255,0.82); }
.hero .lead { color: rgba(255,255,255,0.88); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.hero-meta svg { width: 1rem; height: 1rem; vertical-align: -2px; margin-right: 0.3rem; fill: currentColor; }

/* Page header (inner pages) */
.page-hero { background: var(--color-primary); color: var(--color-on-primary); padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.page-hero h1, .page-hero .eyebrow { color: inherit; }
.page-hero .eyebrow { opacity: 0.8; }
.page-hero .lead { color: inherit; opacity: 0.85; }

/* Cards */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 1.25rem; }
.card-body h3 { margin-bottom: 0.35rem; }
.card-body p { color: var(--color-muted); margin: 0; }

/* Two-column feature (image + text) */
.feature { display: grid; gap: 1.5rem; align-items: center; }
.feature img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 3rem; } .feature.flip > :first-child { order: 2; } }

/* Visit block */
.visit-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1.2fr; gap: 3rem; } }
.visit-details address { font-style: normal; white-space: pre-line; }
.visit-details dl { margin: 1.25rem 0 0; display: grid; gap: 0.35rem; }
.visit-details dt { font-weight: 600; color: var(--color-primary); }
.visit-details dd { margin: 0 0 0.5rem; }
.map-embed {
  width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius);
  background: var(--color-border); box-shadow: var(--shadow);
}
/* Shown in place of the embed when Google Maps cannot load (blocked embed,
   offline, or a screenshot run without network). Reads as a panel, not a hole. */
.map-embed-fallback {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; color: var(--color-muted); font-size: 0.95rem; white-space: pre-line;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem;
  border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--color-surface);
  border: 1px solid var(--color-border); color: var(--color-muted);
}
.status-pill::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.status-pill.is-open { color: #1f7a3f; }
.status-pill.is-closed { color: #9b3b2a; }

/* Hours table */
.hours-table { width: 100%; border-collapse: collapse; max-width: 34rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--color-border); }
.hours-table th { font-weight: 500; color: var(--color-primary); width: 45%; }
.hours-table td { color: var(--color-muted); }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--color-accent); font-weight: 600; }
.hours-table tr.is-today th::after { content: " · today"; font-size: 0.8em; font-weight: 500; }

/* Menu */
.menu-sections { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .menu-sections { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.menu-section h3 { font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-primary); margin-bottom: 1rem; }
.menu-section ul { list-style: none; margin: 0; padding: 0; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.6rem 0; align-items: baseline; }
.menu-item + .menu-item { border-top: 1px dashed var(--color-border); }
.menu-item-name { font-weight: 600; color: var(--color-primary); }
.menu-item-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.menu-item-desc { grid-column: 1 / -1; color: var(--color-muted); font-size: 0.95rem; margin: 0; }
.menu-note { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-muted); font-size: 0.95rem; white-space: pre-line; }

/* Contact */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
.contact-list svg { width: 1.35rem; height: 1.35rem; fill: currentColor; color: var(--color-accent); margin-top: 0.15rem; }
.contact-list strong { display: block; color: var(--color-primary); }
.contact-list address { font-style: normal; white-space: pre-line; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); width: 100%; }

/* Quote */
.quote { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.35; color: var(--color-primary); max-width: 28ch; margin: 0; }
.quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.95rem; color: var(--color-muted); margin-top: 0.75rem; }

/* Book */
.book-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow); max-width: 40rem; }

/* Footer */
.site-footer { background: var(--color-primary); color: var(--color-on-primary); padding-block: 3rem 2rem; margin-top: auto; }
.site-footer a { color: inherit; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { color: inherit; font-size: 1.35rem; }
.site-footer h3 { color: inherit; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.75rem; }
/* --color-muted is tuned for the page background and is unreadable on the dark
   footer, where the hours note uses it. Inherit the footer's own ink instead. */
.site-footer .muted { color: inherit; opacity: 0.8; }
.site-footer address { font-style: normal; white-space: pre-line; opacity: 0.9; }
.footer-hours { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; opacity: 0.9; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; }
.site-footer .socials { margin-top: 1rem; }
.site-footer .socials a { color: var(--color-on-primary); border-color: rgba(255,255,255,0.25); background: transparent; }
.site-footer .socials a:hover { border-color: currentColor; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; opacity: 0.75; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }

/* Map facade: static panel until the visitor loads the Google map */
.map-facade { position: relative; }
.map-facade-inner {
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-surface); box-shadow: var(--shadow); display: grid; place-items: center;
  text-align: center; padding: 1.5rem;
}
.map-facade-inner svg { width: 2.5rem; height: 2.5rem; fill: var(--color-accent); margin-bottom: 0.5rem; }
.map-facade-inner p { color: var(--color-muted); font-size: 0.95rem; max-width: 30ch; margin: 0.5rem 0 1rem; }
.map-facade iframe[hidden] { display: none; }

/* Preview ribbon (shown while site.preview is true; removed at go-live) */
.preview-ribbon {
  background: #1d1a17; color: #fff; font-size: 0.85rem; text-align: center; padding: 0.45rem 1rem;
}
.preview-ribbon a { color: inherit; }

/* Privacy & legal page */
.legal-page h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.legal-page h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.legal-page .prose { max-width: 70ch; }
.legal-page table { border-collapse: collapse; width: 100%; max-width: 44rem; font-size: 0.95rem; }
.legal-page th, .legal-page td { text-align: left; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.legal-page th { color: var(--color-primary); font-weight: 600; width: 34%; }
.footer-legal { font-size: 0.85rem; opacity: 0.8; margin-top: 1.25rem; white-space: pre-line; }

/* Reveal animation hooks (site.js + Motion). Without JS everything stays visible. */
.js [data-reveal] { opacity: 0; }
.js.reduced-motion [data-reveal] { opacity: 1; }

/* Page layout */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }