/* styles.css — Uma's Takeaway
   Light, warm Indian fine-dining theme.
   Cream paper background · saffron accent · gold metallic detail ·
   deep maroon headings · classic printed-menu typography. */

/* ---------------------------------------------------------------------------
   Self-hosted webfonts — no request to Google, so no third party ever sees a
   visitor's IP address, there is one less connection to open, and the CSP can
   stay tight. Only what the site actually uses is shipped:
     · Outfit — variable, weights 300–600 (one file covers every weight)
     · Cormorant Garamond — 600 only
   The browser downloads a subset only if the page contains its characters,
   so a Finnish visitor typically loads ~54 KB of fonts in total.
   Source: Google Fonts, SIL Open Font License 1.1.
   --------------------------------------------------------------------------- */

/* Outfit — variable weight 300–600 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/outfit-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/outfit-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond — 600 (the only weight the design uses) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paper & surfaces */
  --cream: #faf6ee;
  --cream-2: #f3ebdd;
  --card: #fffdf8;

  /* Ink */
  --ink: #2a2320;
  --ink-soft: #5c534b;
  /* Darkened from #948a7c so small print clears WCAG AA (4.5:1) on all three
     background tones — cream, card and the darker cream-2 section. */
  --muted: #71695e;

  /* Accents — one warm spice family.
     --saffron is the decorative fill only; --saffron-deep is the text-safe
     tone (≥4.6:1 on every background) used for anything readable. */
  --saffron: #e08a2e;
  --saffron-deep: #9b5915;
  --maroon: #7a1e1e;
  --gold: #c8a24a;
  --gold-deep: #a8842f;

  /* Lines & shadows (warm, soft) */
  --border: rgba(42, 35, 32, 0.13);
  --border-soft: rgba(42, 35, 32, 0.08);
  --shadow-sm: 0 2px 6px rgba(122, 30, 30, 0.06);
  --shadow-md: 0 16px 40px -20px rgba(80, 40, 20, 0.28);
  --shadow-lg: 0 30px 60px -28px rgba(80, 40, 20, 0.35);

  --transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
li { list-style: none; }

::selection { background: rgba(224, 138, 46, 0.22); color: var(--ink); }

/* Inline SVG icons (Font Awesome shapes, CC BY 4.0) — self-contained, so the
   site loads no icon font and makes no third-party request for 6 glyphs. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Available to screen readers, invisible on screen (table captions etc.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus — visible for keyboard users, invisible for mouse users */
:focus-visible {
  outline: 2px solid var(--saffron-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link: first tab stop, hidden until focused */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  background: var(--maroon);
  color: #fffdf8;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 0 0 3px 3px;
  transition: transform 0.25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    /* !important is required so this reduced-motion reset beats every
       animation/transition duration declared elsewhere on the page. This is
       the one legitimate use of !important; the rule stays on to catch any
       accidental ones. */
    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion reset must win */
    animation-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion reset must win */
    animation-iteration-count: 1 !important;
    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion reset must win */
    transition-duration: 0.01ms !important;
  }
  .restaurant-logo:hover,
  .btn:hover,
  .menu-nav a:hover { transform: none; }
}

/* Serif display family */
.hero-slogan,
.section-header h2,
.menu-cat-title,
.glass-card h3,
.dish-price,
.phone-highlight {
  font-family: 'Cormorant Garamond', serif;
}

/* Reusable ornament: line — lotus diamond — line */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  margin: 16px auto 0;
}
.ornament::before,
.ornament::after {
  content: '';
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.ornament::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }
.ornament span {
  font-size: 14px;
  line-height: 1;
  color: var(--saffron);
  transform: translateY(-1px);
}

/* Header */
/* Opaque cream — the brand wordmark is multiplied against this background,
   so it must be solid: any transparency leaves a pale box around the logo. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.site-header.scrolled {
  border-bottom-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 11px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

/* Brand wordmark — the "Uma's Takeaway / Indian Cuisine" text cropped
   straight from the logo art, sitting in the top-left corner. */
.brand {
  display: block;
  width: 181px;
  height: 38px;
  background-image: url('assets/images/logo-768.webp');
  background-repeat: no-repeat;
  background-size: 228px auto;
  background-position: -22px -158px;
  mix-blend-mode: multiply;
  text-indent: -9999px;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.brand:hover { opacity: 0.75; }

.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; gap: 28px; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--saffron-deep);
  border-radius: 2px;
  color: var(--saffron-deep);
  font-size: 17px;
  padding: 9px 13px;
  cursor: pointer;
  transition: var(--transition);
}
.nav-toggle:hover { border-color: var(--saffron); color: var(--saffron-deep); }

.nav-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--saffron-deep); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--saffron);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Language switcher — real links to the two language URLs, quiet type */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  line-height: 1;
}
/* Ordered from least to most specific so later rules always win by intent
   rather than by accident. */
.lang-opt {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 0;
  color: var(--muted);
  transition: color 0.3s ease;
}
.lang-opt.active { color: var(--ink); }
.lang-switch .lang-opt:not(.active):hover { color: var(--saffron-deep); }
.lang-sep {
  color: var(--border);
  font-weight: 400;
}

/* Shown only when JavaScript is unavailable — the menu needs it to render */
.noscript-note {
  background: var(--maroon);
  color: #fffdf8;
  padding: 16px 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}
.noscript-note strong { font-weight: 600; }

/* Hero */
.hero-section {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 108px 24px 24px;
  background: transparent;
}

/* The hero and the contact strip are two elements but must read as one
   surface. A gradient is always measured against its own element, so the
   same declaration on both siblings restarts and leaves a seam where they
   meet. Putting it on the wrapper paints a single gradient across both. */
.hero-zone {
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(224, 138, 46, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(122, 30, 30, 0.05), transparent 60%),
    var(--cream);
}

/* NOTE: no stacking context here (no z-index/opacity/transform) — that would
   isolate the blend group and stop the logo's white plate from multiplying out. */
.hero-container {
  max-width: 820px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo-wrapper {
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}
.restaurant-logo {
  display: block;
  width: clamp(300px, 44vw, 480px);
  height: auto;
  /* The logo file is a square with roughly 15% empty margin baked in, which
     read as an oversized gap above and below. Percentage margins resolve
     against the image's own width, so this trims the padding proportionally
     at every size. */
  margin-top: -6%;
  margin-bottom: -7%;
  /* The logo art sits on a white plate; multiply drops the white into the
     cream page so it reads as part of the page, not a pasted picture. */
  mix-blend-mode: multiply;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.restaurant-logo:hover { transform: scale(1.02); }

.hero-slogan {
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.08;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  color: var(--maroon);
}
.hero-slogan em { font-style: italic; color: var(--saffron-deep); }
.hero-subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 36px;
  font-weight: 300;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* On a desktop the hero buttons mislead: "call to order" is a tel: link that
   does nothing useful on a computer, and "view menu" only scrolls down. They
   appear on touch screens, where tapping to call is the point. The phone
   number stays visible for everyone in the info strip below. */
@media (min-width: 821px) {
  .hero-section .hero-actions { display: none; }
  /* nothing follows the subtitle once the buttons are gone */
  .hero-subtitle { margin-bottom: 0; }
}

/* Buttons */
.btn {
  padding: 15px 32px;
  border-radius: 2px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
}
.btn-primary,
.btn-secondary {
  background: var(--cream);
  border-color: var(--saffron-deep);
  color: var(--saffron-deep);
}
.btn-primary:hover,
.btn-secondary:hover {
  background: var(--saffron);
  border-color: var(--saffron-deep);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 3px;
}

/* Info strip (address · hours · phone) beneath hero */
/* Dissolved into the page: no card background, no rules, no column dividers,
   so it reads as the closing line of the hero rather than a separate module. */
.info-strip {
  background: transparent;
}
.info-strip-inner {
  margin: 0 auto;
  padding: 0 28px 16px;
  /* Flex rather than three equal columns: each fact takes only the width it
     needs and the group centres, so they sit together instead of being
     stretched to the far edges of a 1100px grid. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 52px;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.info-item .icon {
  width: 19px;
  height: 19px;
  color: var(--saffron-deep);
  flex-shrink: 0;
}
.info-item .info-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.info-item .info-value {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.info-item a.info-value:hover { color: var(--saffron-deep); }

@media (max-width: 760px) {
  .info-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 2px 20px 16px;
  }
  .info-item { justify-content: flex-start; }
}

/* Section headers */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 {
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--maroon);
}
.section-intro {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Menu */
.menu-section {
  padding: 100px 24px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Category quick-nav — a slim typographic strip that docks flush under the
   fixed header while you scroll through the menu, then releases at its end.
   Kept deliberately thin (plain type, no boxes) so it reads as one system
   with the header instead of a second stacked bar. */
.menu-nav {
  position: sticky;
  /* --header-h is measured and set by app.js so the strip always docks
     exactly against the header, whatever its height at that breakpoint */
  top: var(--header-h, 61px);
  z-index: 500;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 26px;
  /* Full-bleed: break out of the section's centred max-width.
     --sbw is the scrollbar width, measured by app.js — plain 100vw includes
     the scrollbar and pushed ~8-17px of horizontal overflow onto the page. */
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-bottom: 44px;
  padding: 7px 24px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}
.menu-nav a {
  position: relative;
  padding: 3px 0;
  /* same display face as the category headings */
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s ease;
}
.menu-nav a:hover { color: var(--saffron-deep); }
.menu-nav a.active { color: var(--maroon); }
.menu-nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--saffron);
}

/* On small screens keep it one thin swipeable line instead of wrapping */
@media (max-width: 760px) {
  /* Wrap onto tidy centred rows rather than scrolling sideways — a clipped
     row with categories disappearing off the edge looked broken and gave no
     hint that more existed. */
  .menu-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    padding: 8px 16px;
  }
  .menu-nav a { font-size: 14px; letter-spacing: 1.2px; }
}

@media (max-width: 420px) {
  .menu-nav { gap: 3px 14px; padding: 7px 12px; }
  .menu-nav a { font-size: 12.5px; letter-spacing: 0.8px; }
}

/* Category block */
/* Fallback for native anchor jumps; app.js computes the real offset on click. */
.menu-cat { margin-top: 72px; scroll-margin-top: 156px; }
.menu-cat:first-child { margin-top: 36px; }

/* Emphasised category heading — grand serif over a hairline rule */
.menu-cat-title {
  position: relative;
  text-align: center;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--maroon);
  padding: 0 0 2px;
}
.menu-cat .ornament { margin: 14px auto 38px; }

/* Two-column dish list */
.dish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}
@media (max-width: 760px) { .dish-grid { grid-template-columns: 1fr; } }

.dish {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.dish-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dish-name {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink);
}
.dish-dots {
  flex: 1;
  border-bottom: 1.5px dotted var(--border);
  transform: translateY(-4px);
  min-width: 18px;
}
.dish-price {
  font-size: 21px;
  font-weight: 600;
  color: var(--saffron-deep);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.dish-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.55;
  margin-top: 5px;
  max-width: 46ch;
}
.dish-diet {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Compact dietary key */
.menu-legend {
  margin: 56px auto 0;
  max-width: 940px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
  border-top: 1px solid var(--border-soft);
  padding-top: 26px;
}
.menu-legend b { color: var(--ink-soft); font-weight: 600; }
.menu-cat:last-child .dish:last-child { border-bottom: 0; }


/* Location */
.location-section {
  padding: 100px 24px;
  background: var(--cream-2);
  border-top: 1px solid var(--border-soft);
}
.location-container {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px) {
  .info-cards-row { grid-template-columns: 1fr; }
}

.glass-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 34px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
}
.glass-card h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 22px;
  color: var(--maroon);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--border-soft); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 13px 0; }
.hours-day { font-weight: 500; color: var(--ink); font-size: 15px; }
.hours-time { text-align: right; color: var(--ink-soft); font-size: 15px; letter-spacing: 0.3px; }
.hours-time.closed { color: var(--maroon); font-weight: 600; }

/* Exceptional hours. Set as a quiet postscript to the weekly table, and only
   rendered at all when the restaurant has entered something upcoming — with no
   exceptions the block carries [hidden] and the card is unchanged. */
.hours-exceptions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.hours-exceptions[hidden] { display: none; }
.hours-exceptions h4 {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.hours-exceptions ul { display: flex; flex-direction: column; gap: 7px; list-style: none; }
.hours-exceptions li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.hours-exceptions li span:first-child { color: var(--ink); font-weight: 500; }
.hours-exceptions li span:last-child { text-align: right; color: var(--ink-soft); }
.hours-exceptions li span.closed { color: var(--maroon); font-weight: 600; }

.address-details { display: flex; flex-direction: column; gap: 22px; }
.detail-item { display: flex; gap: 16px; align-items: flex-start; }
.detail-icon {
  color: var(--saffron-deep);
  font-size: 16px;
  margin-top: 3px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.detail-content h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.detail-content p, .detail-content a { font-size: 16px; color: var(--ink-soft); }
.phone-highlight {
  font-size: 24px;
  font-weight: 600;
  color: var(--saffron-deep);
  letter-spacing: 0.3px;
}
.detail-note { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.55; }
/* A long address must be able to break, otherwise it runs off a 320px screen
   and overflow-x:hidden silently swallows the end of it. */
.email-link {
  color: var(--saffron-deep);
  transition: color 0.3s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.email-link:hover { color: var(--maroon); }

.menu-sync-status {
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* WCAG 2.2 target size: contact links need at least a 24px tap target */
.detail-content a,
.footer-col a,
.info-item a.info-value {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}

/* Map */
.maps-container { display: flex; flex-direction: column; }
.map-wrapper {
  width: 100%;
  height: 380px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
.map-wrapper iframe { width: 100%; height: 100%; border: none; }
.map-consent-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  background: var(--card);
}
.map-consent-placeholder[hidden] { display: none; }
.map-consent-placeholder p {
  max-width: 42ch;
  color: var(--ink-soft);
  line-height: 1.6;
}
@media (max-width: 600px) { .map-wrapper { height: 300px; } }

/* 404 page */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 90px;
  max-width: 640px;
  margin: 0 auto;
}
.error-page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: var(--maroon);
}
.error-code {
  margin-bottom: 14px;
  color: var(--saffron-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
}
.error-lead {
  margin: 22px 0 34px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
}
.error-lead span { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Footer */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 52px 24px 0;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
  align-items: start;
  gap: clamp(36px, 4.5vw, 56px);
  padding-bottom: 38px;
}
.footer-brand {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 12px;
  align-items: start;
}
.footer-logo {
  grid-row: 1 / span 2;
  width: 88px;
  height: 88px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.footer-tagline {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.65;
  max-width: 280px;
}
.footer-col h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--saffron-deep);
  font-weight: 600;
  margin-bottom: 18px;
}
.footer-col p { font-size: 14px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.55; }
.footer-col a { transition: color 0.3s ease; }
.footer-col a:hover { color: var(--saffron-deep); }
.footer-col { min-width: 0; }
.footer-col .email-link { max-width: 100%; }
.footer-hours { display: flex; flex-direction: column; gap: 9px; }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-hours li span:last-child { color: var(--muted); }
.footer-hours .closed { color: var(--maroon); font-weight: 600; }

/* Statutory trader details, set quietly under the logo */
.footer-business {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Privacy disclosure — collapsed by default in the closing footer row */
.privacy { margin: 0; }
.privacy summary {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s ease;
}
.privacy summary:hover { color: var(--saffron-deep); }
.privacy-body {
  max-width: 760px;
  margin: 10px auto 0;
  text-align: left;
}
.privacy-body p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 10px;
}
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.privacy-body a:hover { color: var(--saffron-deep); }
.privacy-settings {
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.privacy-settings:hover { color: var(--saffron-deep); }

/* One-purpose consent notice. Google Maps is the site's only optional
   third-party service, so a category manager would add needless complexity. */
.consent-banner {
  position: fixed;
  z-index: 1000;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cream);
  box-shadow: var(--shadow-md);
}
.consent-banner[hidden] { display: none; }
.consent-copy { max-width: 560px; }
.consent-copy h2 {
  margin-bottom: 5px;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.consent-copy p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.consent-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}
.consent-choice {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--saffron-deep);
  border-radius: 3px;
  background: var(--cream);
  color: var(--saffron-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.consent-choice:hover {
  background: var(--saffron);
  color: var(--ink);
}
.consent-choice:focus-visible,
.privacy-settings:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 3px;
}

/* On a phone this bar is the first thing over the hero, so it has to stay
   slim. Stacked buttons and full padding made it over 240px tall, which
   covered the "Soita ja tilaa" button — the one thing the page exists for.
   The two choices stay side by side at every width. */
@media (max-width: 720px) {
  .consent-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 12px 14px;
  }
  .consent-copy h2 { margin-bottom: 3px; }
  .consent-copy p { font-size: 12px; line-height: 1.45; }
  .consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .consent-choice {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* Allergen / statutory food information — set as the fine print at the foot of
   a printed menu, not as a boxed notice. Continues straight on from the
   dietary key above it, so the two read as one block of small print. */
.food-info {
  margin: 32px auto 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.8fr);
  gap: clamp(36px, 6vw, 70px);
  text-align: left;
}
.food-info h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.food-info p {
  font-size: 12.5px;
  color: var(--saffron-deep);
  line-height: 1.75;
  margin-bottom: 9px;
}
.food-info p:last-child { margin-bottom: 0; }
.food-info strong { color: var(--ink-soft); font-weight: 600; }
.food-info-facts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.food-info-facts p { margin: 0; }

@media (max-width: 720px) {
  .food-info {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .food-info-facts {
    padding: 0;
    gap: 8px;
  }
}

.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
  text-align: left;
}
.footer-copy {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.2px;
}

@media (max-width: 760px) {
  .site-footer { padding-top: 42px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }
  .footer-brand { grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; }
  .footer-logo { width: 76px; height: 76px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-copy { margin-left: 0; }
}

/* Responsive — collapsing header */
@media (max-width: 820px) {
  .nav-container { flex-wrap: wrap; padding: 14px 20px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-right {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* visibility:hidden takes the collapsed links out of the tab order and
       the accessibility tree — without it they stay keyboard-focusable and
       screen-reader readable while the menu looks closed. Delayed so it only
       applies once the collapse animation has finished. */
    visibility: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease,
      visibility 0s linear 0.4s;
  }
  .site-header.nav-open .nav-right {
    max-height: 360px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease,
      visibility 0s linear 0s;
    padding-top: 12px;
  }
  .nav-links { flex-direction: column; gap: 0; width: 100%; }
  .nav-link {
    padding: 14px 2px;
    border-top: 1px solid var(--border-soft);
    letter-spacing: 1.2px;
  }
  .nav-link::after { display: none; }
}

@media (max-width: 600px) {
  .hero-section { padding-top: 120px; min-height: auto; }
  .menu-section, .location-section { padding: 72px 20px; }
  /* Sizing of the strip itself is handled by the 760px/420px rules above */
  .menu-nav { margin-bottom: 34px; }
  .menu-cat { scroll-margin-top: 140px; }
  .glass-card { padding: 26px 22px; }
}