/* ============================================================
   Restaurant homepage template v2 (Outback-style layout)
   Palette is theme-driven: each site's themes/<slug>.css sets the
   color variables below. Defaults here = Umi Sake blue.
   ============================================================ */

:root {
  --bg: #060b14;
  --bg-2: #0a1322;
  --bg-3: #0e1a2e;
  --ink: #eef4fb;
  --ink-dim: rgba(238, 244, 251, .64);
  --accent: #4da3ff;
  --accent-2: #7cc4ff;
  --accent-deep: #2f7fe0;
  --accent-soft: rgba(77, 163, 255, .16);
  --accent-line: rgba(77, 163, 255, .38);
  --nav-a: rgba(6, 11, 20, .92);
  --nav-b: rgba(6, 11, 20, .55);
  --nav-solid: rgba(6, 11, 20, .96);
  --shade-a: rgba(6, 11, 20, .35);
  --shade-b: rgba(6, 11, 20, .15);
  --shade-c: rgba(6, 11, 20, .94);
  --chip-bg: rgba(6, 11, 20, .55);
  --cta-a: #0a1322;
  --cta-b: #0e1a2e;
  --cta-c: #0a1322;
  --footer-bg: #05080f;
  --mobile-bg: rgba(5, 8, 15, .95);
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, 92vw); margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #04101f;
  font-weight: 700; font-size: .92rem; letter-spacing: .05em;
  padding: .72rem 1.5rem; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(238,244,251,.45); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(238,244,251,.06); }
.btn-order {
  position: relative;
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent-2) 100%);
  color: #04101f;
  animation: dshGlow 2.4s ease-in-out infinite;
}
.btn-order::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid var(--accent-line);
  animation: dshRing 2.4s ease-in-out infinite;
}
.btn-order:hover { transform: translateY(-2px); }
@keyframes dshGlow {
  0%, 100% { box-shadow: 0 0 14px 2px var(--accent-soft), 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 30px 10px color-mix(in srgb, var(--accent) 80%, transparent), 0 8px 34px color-mix(in srgb, var(--accent) 50%, transparent); }
}
@keyframes dshRing {
  0%, 100% { opacity: .2; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.05); }
}

/* Secondary action. Flat, static, no ring and no glow, on purpose: the pulsing
   .btn-order is the page's one primary CTA, and a second glowing button sitting
   near it splits the eye. Used by the contact form's "Send message". */
.btn-send { background: var(--accent-2); color: #04101f; animation: none; }
.btn-send:hover { background: var(--accent); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 1.45rem 0;
  background: linear-gradient(180deg, var(--nav-a), var(--nav-b) 70%, transparent);
  backdrop-filter: blur(8px);
  transition: background .3s;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 50px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2.1rem; font-size: 1rem; }
.nav-links a:not(.btn) { opacity: .85; transition: opacity .2s, color .2s; }
.nav-links a:not(.btn):hover { opacity: 1; color: var(--accent); }
/* keep the nav Order button in proportion with the larger logo/links */
.nav .btn { font-size: 1rem; padding: .8rem 1.75rem; }

/* ---------- hero ---------- */
/* min-height uses svh (the viewport with mobile browser chrome showing) so the
   hero fits the screen on a phone instead of being a 100vh block that is taller
   than what the visitor can actually see. 100vh stays as the fallback. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-slides, .hero-slides .slide { position: absolute; inset: 0; }
.slide { background-size: cover; background-position: center; opacity: 0; animation: kenburns 30s ease-in-out infinite; }
.s1 { opacity: 1; }
.s2 { animation-delay: 6s; }
.s3 { animation-delay: 12s; }
.s4 { animation-delay: 18s; }
.s5 { animation-delay: 24s; }
/* Five slides 6s apart on a 30s loop, so one interval is 20%.
   The fade-out deliberately BEGINS at 20% and takes the same 4% as a fade-in
   (1.2s each), which makes the outgoing and incoming slides cross exactly: as
   one goes 1 -> 0 the other goes 0 -> 1, so the two opacities always sum to 1.
   Getting this wrong is visible - if the fade-out starts before the next
   fade-in, both slides are half transparent together and the dark page flashes
   through between photos. Measured: the old numbers dipped to 0.35 total. */
@keyframes kenburns {
  0%    { opacity: 0; transform: scale(1.02); }
  4%    { opacity: 1; }
  20%   { opacity: 1; transform: scale(1.08); }
  24%   { opacity: 0; }
  100%  { opacity: 0; }
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--shade-a) 0%, var(--shade-b) 40%, var(--shade-c) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 9rem 0 5.5rem; }
.hero-chip {
  display: inline-block; padding: .42rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--chip-bg);
  color: var(--ink); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-chip.open { border-color: rgba(126,217,130,.5); color: #a5e8a9; }
.hero-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2.9rem, 7vw, 5.4rem);
  line-height: 1.02; letter-spacing: .01em; text-shadow: 0 4px 40px rgba(0,0,0,.55);
}
.hero-title em { font-style: italic; color: var(--accent-2); }
.hero-sub { max-width: 560px; margin: 1.3rem 0 2.1rem; font-size: 1.08rem; line-height: 1.65; color: var(--ink-dim); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(238,244,251,.55);
}

/* ---------- brand band ---------- */
.band { background: var(--bg-2); border-block: 1px solid var(--accent-line); overflow: hidden; padding: .85rem 0; }
.band-track {
  display: flex; gap: 2.2rem; align-items: center; white-space: nowrap;
  font-size: .8rem; letter-spacing: .28em; color: var(--accent);
  animation: marquee 26s linear infinite; width: max-content;
}
.band i { color: var(--accent-line); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: 5.5rem 0; }
.kicker { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.sec-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.12; margin-bottom: 2.6rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.card {
  background: var(--bg-2); border: 1px solid rgba(238,244,251,.07); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card figcaption { padding: 1.1rem 1.2rem 1.3rem; }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; margin-bottom: .35rem; }
.card p { color: var(--ink-dim); font-size: .9rem; line-height: 1.5; }
.sec-cta { text-align: center; margin-top: 2.6rem; }

/* ---------- split (craft) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: 5.5rem 0; background: var(--bg-2); }
.split-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split-img img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.split-body .sec-title { margin-bottom: 1.2rem; }
.split-body p { color: var(--ink-dim); line-height: 1.7; margin-bottom: 1rem; max-width: 520px; }
.stats { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; }
.stats strong { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--accent); }
.stats span { font-size: .82rem; color: var(--ink-dim); letter-spacing: .05em; }

/* ---------- info row ---------- */
.info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.info-box {
  background: var(--bg-2); border: 1px solid rgba(238,244,251,.07); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.8rem;
}
.info-box h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .7rem; color: var(--accent); }
.info-box p { line-height: 1.6; margin-bottom: 1rem; }
.info-box .dim { color: var(--ink-dim); font-size: .88rem; }
.info-box .btn { margin-top: .4rem; }

/* ---------- cta band ---------- */
.cta-band { background: linear-gradient(135deg, var(--cta-a), var(--cta-b) 60%, var(--cta-c)); border-block: 1px solid var(--accent-line); padding: 4.2rem 0; text-align: center; }
.cta-band h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }

/* ---------- footer ---------- */
.footer { padding: 3.4rem 0 7rem; background: var(--footer-bg); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.footer p { color: var(--ink-dim); font-size: .92rem; }
.footer .small { font-size: .8rem; opacity: .7; }
.footer .nav-logo img { height: 60px; }

/* ---------- mobile sticky bar ---------- */
.mobile-bar {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 60;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--mobile-bg); backdrop-filter: blur(10px);
  border-top: 1px solid var(--accent-line);
  gap: .7rem;
}
.mobile-bar .btn { flex: 1; justify-content: center; }

/* ---------- reveal animation ---------- */
/* Gated on .js, which an inline script in <head> sets before first paint.
   Without that gate these rules leave every .reveal element at opacity 0 when
   JS is blocked, broken or stripped - so a human gets a blank page while the
   HTML is perfectly present for a crawler. No JS now means no hiding. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-logo img { height: 38px; }
  .split { grid-template-columns: 1fr; padding: 3.5rem 0; }
  /* 7rem clears the fixed 92px nav; 5rem clears the fixed 77px action bar. */
  .hero-inner { padding-top: 7rem; padding-bottom: 5rem; }
  .mobile-bar { display: flex; }
  .footer { padding-bottom: 8.5rem; }
}
/* Short phones. The hero is a full-screen block with the fixed nav (92px) over
   the top and the fixed action bar (77px) over the bottom, so its content only
   has about (viewport - 192px) to live in. At the desktop type scale that
   spilled past the fold by ~175px on an iPhone SE and ~50px on an iPhone 12 -
   the hero did not fit the screen. Everything here buys that space back by
   tightening the type and the gaps; the padding is left alone because it is
   already the exact clearance the two fixed bars need.
   Gated on max-height as well as width so a tablet, which has the room, keeps
   the larger type. */
@media (max-width: 860px) and (max-height: 800px) {
  /* 6.5rem leaves ~12px under the fixed nav; 5.5rem leaves ~11px above the
     fixed action bar. The desktop values were 112px and 88px. */
  .hero-inner { padding-top: 6.5rem; padding-bottom: 5.5rem; }
  .hero-title { font-size: clamp(1.85rem, 8.6vw, 3.1rem); }
  .hero-sub { font-size: .9rem; line-height: 1.5; margin: .7rem 0 .95rem; }
  .hero-chip { margin-bottom: .8rem; }
  .hero-actions { gap: .6rem; }
  .hero-actions .btn-lg { padding: .75rem 1.4rem; font-size: .9rem; }
}
/* Landscape phones. Roughly 390px of height has to hold a 92px nav, a 77px
   action bar and the whole hero: forcing min-height:100svh made the block
   ~80px taller than the screen and pushed the two buttons behind the bar,
   where they could not be tapped. So on short viewports the fixed chrome is
   trimmed and the hero is allowed to size to its content instead of insisting
   on filling the screen - nothing ends up hidden, the page just scrolls a
   little. The sub also stops being capped at 560px, which on a wide-but-short
   screen was wrapping it onto four lines for no reason. */
@media (max-height: 520px) {
  .nav { padding: .85rem 0; }
  .nav-logo img { height: 30px; }
  .hero { min-height: auto; }
  .hero-inner { padding-top: 4.75rem; padding-bottom: 5.5rem; }
  .hero-title { font-size: clamp(1.6rem, 5vw, 2.3rem); }
  .hero-sub { max-width: 100%; margin: .6rem 0 .8rem; }
  .hero-chip { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-order, .btn-order::after, .slide, .band-track { animation: none !important; }
  /* Don't fade at all when the visitor has asked for less motion. */
  .js .reveal { opacity: 1; transform: none; transition: none; }
  /* Show only the lead image rather than stacking every slide, which would
     leave the LAST one painting on top. */
  .slide { opacity: 0 !important; }
  .s1 { opacity: 1 !important; }
}

/* ---------- GALLERY + LIGHTBOX ---------- */
/* Six photos, so an explicit 3-up beats the base auto-fit grid: auto-fit lands
   on 4 columns at desktop width and leaves a ragged 4 + 2 last row. */
#gallery .grid { grid-template-columns: repeat(3, 1fr); }
/* Tiles are a uniform 4:3 crop to keep the grid tidy, but the lightbox shows
   the whole photo - the source images are a mix of 1200x600 and 600x1200, so
   the portrait ones would never be seen uncropped otherwise. */
.gallery-item { display: block; cursor: zoom-in; line-height: 0; }
.lightbox {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(8, 6, 3, .95);
  display: none;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox img {
  max-width: 92vw; max-height: 86vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lightbox-close {
  position: fixed; top: .6rem; right: 1rem; z-index: 2;
  background: none; border: 0; color: #fff; font-size: 2.8rem; line-height: 1;
  cursor: pointer; opacity: .8;
}
.lightbox-close:hover, .lightbox-close:focus-visible { opacity: 1; }

/* ---------- AWARDS ---------- */
/* Three awards - two framed Best of the Burg certificates and the Restaurant
   Guru badge - shown as a row beneath the intro text, which is what gives them
   the full page width to be legible in. Each keeps its own aspect ratio
   (height:auto) so none of the wording is ever cropped, and `end` alignment
   stands them on a common bottom edge like a shelf. */
.award-intro { max-width: 780px; }
.award-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
               align-items: end; margin-top: 2.2rem; }
.award { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.award-title { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; margin-bottom: .8rem; }
.award-intro p { color: var(--ink-dim); line-height: 1.7; margin-bottom: 1rem; max-width: 640px; }

@media (max-width: 860px) {
  #gallery .grid { grid-template-columns: repeat(2, 1fr); }
  .award-stack { gap: 1rem; }
}
@media (max-width: 520px) {
  #gallery .grid { grid-template-columns: 1fr; }
  /* Three portrait awards across a phone would make each about 110px wide and
     unreadable, so they drop to two up and wrap. */
  .award-stack { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
}

/* ---------- events calendar ---------- */
/* Populated from events.json by main.js. The admin's "highlight" controls map
   to the ev-* classes below - a fixed vocabulary, not free-form CSS. */
.event-list { display: grid; gap: 1rem; }
.event {
  --ev-accent: var(--accent);
  background: var(--bg-2);
  border: 1px solid rgba(238, 244, 251, .07);
  border-left: 4px solid var(--ev-accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.event.ev-featured { border-color: var(--ev-accent); box-shadow: var(--shadow); }
.ev-badge {
  display: inline-block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ev-accent);
  border: 1px solid var(--ev-accent); border-radius: 999px;
  padding: .12rem .6rem; margin-bottom: .55rem;
}
.ev-title { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: .3rem; }
.ev-when {
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ev-accent); margin-bottom: .5rem;
}
.ev-where { font-size: .9rem; color: var(--ink-dim); margin-bottom: .35rem; }
.ev-desc { color: var(--ink-dim); line-height: 1.65; }
/* the admin's text weight / size choices */
.ev-bold .ev-title { font-weight: 800; }
.ev-large .ev-title { font-size: 1.55rem; }
.ev-bold-large .ev-title { font-weight: 800; font-size: 1.65rem; }

/* The list is a grid, and a class display rule beats the UA's [hidden]{none},
   so toggling .hidden on it would silently do nothing without this. */
[hidden] { display: none !important; }

/* list / month switch */
.cal-tabs { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.cal-tab {
  font: inherit; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem 1.15rem; border-radius: 999px; cursor: pointer;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--accent-line);
}
.cal-tab:hover { color: var(--ink); }
.cal-tab.is-active {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 700;
}

/* month grid */
.cal-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-mtitle { font-family: var(--serif); font-size: 1.3rem; }
.cal-nav {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--accent-line);
  color: var(--ink); font-size: 1.1rem; line-height: 1;
}
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow {
  text-align: center; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); padding-bottom: .35rem;
}
.cal-cell {
  min-height: 96px; padding: .4rem; border-radius: 10px;
  background: var(--bg-2); border: 1px solid rgba(238, 244, 251, .07);
}
.cal-cell.is-empty { background: transparent; border-color: transparent; }
.cal-cell.is-today { border-color: var(--accent-line); }
.cal-day { font-size: .72rem; color: var(--ink-dim); margin-bottom: .3rem; }
.cal-ev {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: .72rem; line-height: 1.25;
  padding: .25rem .35rem; margin-bottom: .25rem; border-radius: 5px;
  color: var(--ink); background: rgba(238, 244, 251, .06);
  border: 0; border-left: 3px solid var(--ev-accent, var(--accent));
}
.cal-ev:hover { background: rgba(238, 244, 251, .14); }
.cal-ev.ev-bold, .cal-ev.ev-bold-large { font-weight: 800; }
.cal-ev.ev-large, .cal-ev.ev-bold-large { font-size: .8rem; }

/* briefly marks the entry a day chip jumped to in the list */
.event.is-flash { animation: ev-flash 1.8s ease-out; }
@keyframes ev-flash {
  0%, 40% { box-shadow: 0 0 0 3px var(--ev-accent, var(--accent)); }
  100% { box-shadow: none; }
}
@media (max-width: 700px) {
  .cal-cell { min-height: 62px; padding: .25rem; }
  .cal-ev { font-size: .62rem; padding: .18rem .25rem; }
  .cal-dow { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .event.is-flash { animation: none; }
}

/* ---------- contact form ---------- */
.contact-form-wrap { margin-top: 2.8rem; max-width: 720px; }
.contact-form-title { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: .4rem; }
.contact-form { margin-top: 1.2rem; display: grid; gap: 1rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label {
  display: block; font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-dim);
}
.contact-form label span { color: var(--accent); }
.contact-form input, .contact-form textarea {
  width: 100%; margin-top: .4rem; padding: .75rem .85rem;
  font: inherit; font-size: .95rem; text-transform: none; letter-spacing: normal;
  color: var(--ink); background: var(--bg-3);
  border: 1px solid rgba(238, 244, 251, .12); border-radius: 10px;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--accent-line); border-color: var(--accent-line);
}
.contact-form textarea { resize: vertical; }
.contact-form .btn { justify-self: start; }
/* honeypot: hidden from people, irresistible to bots */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .cf-row { grid-template-columns: 1fr; } }