/* ===== Design tokens =====
   Sampled from the restaurant's own interior photos, not picked from a
   generic "warm pizzeria" palette:
   --crust     = deep oak: the wall-panelling wood's hue (#8F633A), darkened -
                 header/footer/page-hero background and body text
   --cheese    = the oak panelling itself - small details only (stars, tags)
   --cheese-light = light oak for text/UI on --crust (red fails there, 2.2:1)
   --tomato    = the red "OSMICA" neon (#DE2C2B), deepened to pass contrast
   --cream / --parchment = the white walls and cream chairs
   --basil     = muted olive, reserved for the "vegetarijansko" tag only
   --chilli    = burnt orange, reserved for the "pikantno" tag only (4.98:1 with
                 cream text, and clearly apart from the red "Otroška" tag)
*/

/* ===== Fonts (self-hosted, from Google Fonts, SIL Open Font License) =====
   Both families are variable fonts, so one file per subset covers every
   weight used (Domine 600-700, Karla 400-700). latin-ext carries č š ž ć đ.
   The files are cached for a year under a fixed name: if one ever changes,
   give it a new file name (and update the preload in the page heads). */
@font-face {
  font-family: 'Domine';
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/domine-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: 'Domine';
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/domine-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;
}

@font-face {
  font-family: 'Karla';
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla-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: 'Karla';
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla-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 {
  --cream: #f8f4ee;
  --crust: #463220;
  --crust-muted: #6b5b4e;
  --tomato: #be2824;
  --tomato-dark: #8f1d1a;
  --cheese: #8f633a;
  --cheese-light: #d3b79c;
  --basil: #5f6647;
  --chilli: #b5460f;
  --parchment: #efe5d7;
  --line: rgba(70, 50, 32, 0.15);
  --shadow: 0 4px 16px rgba(70, 50, 32, 0.1);

  --font-display: 'Domine', Georgia, serif;
  --font-body: 'Karla', 'Segoe UI', sans-serif;

  --radius: 10px;
  --container: 1120px;
  --gap: clamp(1rem, 2vw, 1.75rem);
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* In-page links (#meni) land below the sticky 72px header, not under it. */
  scroll-padding-top: calc(72px + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--crust);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  max-width: 68ch;
}

ul {
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--tomato);
  outline-offset: 2px;
}

/* The red doesn't clear 3:1 against the deep-oak surfaces below, so those
   containers swap the focus ring to light oak instead. */
.site-header :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible {
  outline-color: var(--cheese-light);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--cream);
  color: var(--crust);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--tomato);
  color: var(--cream);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--tomato-dark);
}

.btn-outline {
  background: transparent;
  color: var(--crust);
  border-color: var(--crust);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--crust);
  color: var(--cream);
}

.btn-outline.on-dark {
  color: var(--cream);
  border-color: var(--cream);
}

.btn-outline.on-dark:hover,
.btn-outline.on-dark:focus-visible {
  background: var(--cream);
  color: var(--crust);
}

/* ===== Closed banner ===== */
.closed-banner {
  display: none;
  background: var(--tomato);
  color: var(--cream);
  text-align: center;
  font-weight: 700;
  padding: 0.65rem 1rem;
}

.closed-banner.is-visible {
  display: block;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--crust);
  color: var(--cream);
  box-shadow: var(--shadow);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.wordmark span {
  color: var(--cheese-light);
}

/* Header only: a light disc so the black ball doesn't sink into the dark bar. */
.wordmark-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 4px;
  border-radius: 50%;
  background: var(--cream);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--cream);
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle svg {
  width: 28px;
  height: 28px;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 1.75rem;
  align-items: center;
}

.main-nav a {
  text-decoration: none;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  border-color: var(--cheese-light);
  color: var(--cheese-light);
}

/* Menu breakpoint 999/1000px: the full nav needs a 980px-wide layout for a
   24px gap to the wordmark (measured in 1px steps; below 956px its links
   wrap), plus room for a Windows scrollbar, which media queries count.
   Tap-to-call in the header only below it: on desktop the nav leaves at most
   164px beside the wordmark, too little for a call button without cramping. */
.header-call {
  display: none;
}

@media (min-width: 1000px) {
  .nav-call {
    display: none;
  }
}

@media (max-width: 999px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.7rem;
    margin-left: auto;
    color: var(--cream);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid var(--cheese-light);
    border-radius: var(--radius);
  }

  .header-call svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crust);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    /* Hidden, not just 0px tall, so Tab skips the closed menu's links. */
    visibility: hidden;
    transition: max-height 0.2s ease, visibility 0.2s;
  }

  .main-nav.is-open {
    max-height: 480px;
    visibility: visible;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
  }

  .main-nav a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(248, 244, 238, 0.12);
  }
}

/* Narrow phones: the number doesn't fit beside the wordmark and the menu
   button, so the call button shows the icon only (its accessible name still
   reads "Pokliči 041 954 509") and the wordmark scales down just enough for
   the three to share one row at 320px. From 520px the number fits with a
   12px+ gap, also with a Windows scrollbar (at 480px that gap was 4px). */
@media (max-width: 519px) {
  .header-call {
    padding: 0;
  }

  .header-call-number {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wordmark {
    font-size: clamp(1rem, 4.8vw, 1.4rem);
  }
}

/* ===== Hero / slideshow ===== */
.hero {
  position: relative;
  height: min(78vh, 620px);
  min-height: 400px;
  overflow: hidden;
  color: var(--cream);
}

/* Phones: the height follows the content, so the buttons are never cut off
   (at 320x568 they were), but never less than the old photo band. The
   bottom padding keeps the dots and caption clear of the buttons. */
@media (max-width: 600px) {
  .hero {
    height: auto;
    min-height: max(360px, min(58vh, 520px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  background-color: var(--crust);
  display: flex;
  align-items: flex-end;
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Floor raised to 0.40 (was 0.15) so hero-content text stays readable even
     over a bright patch of photo (e.g. the neon sign on hero-2-bar) instead
     of only working safely on the darkest slide. */
  background: linear-gradient(0deg, rgba(20, 12, 8, 0.78) 0%, rgba(20, 12, 8, 0.4) 55%, rgba(20, 12, 8, 0.45) 100%);
}

.hero-slide-caption {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  font-size: 0.8rem;
  color: rgba(248, 244, 238, 0.75);
  z-index: 2;
  background: rgba(20, 12, 8, 0.4);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 1.25rem 3rem;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.hero-content h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 16ch;
  margin-bottom: 0.4em;
}

.hero-content p {
  font-size: 1.15rem;
  max-width: 42ch;
  color: rgba(248, 244, 238, 0.92);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

/* Filled by reviews.js from the same Google data as the reviews section. */
.hero-content .hero-rating {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: rgba(248, 244, 238, 0.85);
}

@media (max-width: 600px) {
  .hero-content {
    padding-bottom: 4.25rem; /* clears the dots and the caption */
  }
}

.hero-dots {
  position: absolute;
  z-index: 2;
  bottom: 1.1rem;
  left: 1.25rem;
  display: flex;
  gap: 0.5rem;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.hero-dot.is-active {
  background: var(--cheese-light);
  border-color: var(--cheese-light);
}

.hero-skeleton {
  position: absolute;
  inset: 0;
}

/* ===== Skeleton loaders ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.menu-panel-label {
  margin-bottom: 0.75rem;
}

/* ===== Sections ===== */
.section {
  position: relative; /* anchors the 8-ball divider on colour transitions */
  padding: clamp(2rem, 4vw, 3.25rem) 0;
}

.section-alt {
  background: var(--parchment);
}

.section-header {
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* ===== Menu ===== */
.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.menu-tab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--crust-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.menu-tab:hover {
  color: var(--crust);
}

.menu-tab[aria-selected="true"] {
  color: var(--tomato);
  border-bottom-color: var(--tomato);
}

.menu-panel {
  display: none;
}

.menu-panel.is-active {
  display: block;
}

.menu-empty {
  color: var(--crust-muted);
  font-style: italic;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.menu-item:last-child {
  border-bottom: none;
}

/* min-width: 0 lets the name column shrink, so a long name or a row of
   drink sizes wraps instead of pushing the page sideways at 320px. */
.menu-item-main {
  flex: 1;
  min-width: 0;
}

.menu-item-main h3 {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* 15px and a shade darker than --crust-muted (7.5:1 on cream, 6.6:1 on
   parchment) so ingredient lists are easy to read on a phone. */
.menu-item-desc {
  color: #5c4c40;
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 0;
}

/* Two columns from tablet width up so a long category (33 pizzas) doesn't
   force excessive scrolling; single column stays on mobile where two would
   feel cramped. grid-auto-flow's default row-major order already fills
   left-to-right, top-to-bottom, so no markup/JS change is needed. */
@media (min-width: 780px) {
  /* Matches .menu-panel.is-active's specificity (0,2,0) - a plain .menu-panel
     rule here would lose to that "display: block" rule regardless of the
     media query, since specificity outranks source order on a tie. */
  .menu-panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }

  /* :last-child alone only clears the border on a lone final item; with two
     columns the row above it needs the same treatment, since grid doesn't
     reorder DOM children - the final row is always the last 1-2 of them. */
  .menu-item:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  /* Prose asides (e.g. "sladice so v vitrini") read better full-width than
     squeezed into one column. */
  .menu-note {
    grid-column: 1 / -1;
  }
}

.menu-item-price {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--tomato);
  white-space: nowrap;
  align-self: center;
}

.menu-item-price .divider {
  color: var(--crust-muted);
  font-weight: 400;
  margin: 0 0.15rem;
  font-family: var(--font-body);
}

.menu-item-sizes {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
  font-size: 0.85rem;
  max-width: 220px;
  line-height: 1.5;
}

/* One size + its price never splits across lines; the list wraps between sizes. */
.menu-size {
  white-space: nowrap;
}

.menu-item-sizes .size-label {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--crust-muted);
}

.menu-note {
  color: var(--crust-muted);
  font-style: italic;
  font-size: 0.92rem;
  padding: 0.6rem 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

/* One line above a category whose rows show two prices, so "9,00 € / 10,00 €"
   says which size is which without repeating it on all 30 rows. */
.menu-legend {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--crust-muted);
}

.menu-more {
  margin: 1.25rem 0 0;
}
.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  line-height: 1.6;
}

.tag-kids {
  background: var(--tomato);
  color: var(--cream);
}

.tag-novo {
  background: var(--cheese);
  color: var(--cream);
  letter-spacing: 0.04em;
}

.tag-pikantno {
  background: var(--chilli);
  color: var(--cream);
}

.tag-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.25em;
}

.tag-vegetarijansko {
  background: var(--basil);
  color: var(--cream);
}

/* ===== Teaser cards ===== */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

@media (max-width: 780px) {
  .teaser-grid {
    grid-template-columns: 1fr;
  }
}

.teaser-card {
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

/* 240px at every width: at 340px the "Za otroke in dostavo" row still took
   ~87% of an 800px-tall screen. object-fit: cover (on .photo img) keeps the
   crop centred instead of squashing the photo. */
.teaser-card .photo {
  aspect-ratio: 4 / 3;
  max-height: 240px;
}

.teaser-body {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.teaser-body h3 {
  font-size: 1.15rem;
}

.teaser-body p {
  color: var(--crust-muted);
  font-size: 0.95rem;
  flex: 1;
}

.teaser-body .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ===== Google reviews (auto-scrolling marquee) ===== */
.reviews-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The site sets html { scroll-behavior: smooth } globally; without this
     override every scrollLeft write here (including the marquee's own
     wrap-around reset, which must be an instant, invisible jump) would
     animate instead, fighting the JS-driven motion and breaking the loop. */
  scroll-behavior: auto;
  margin: 0 0 1.5rem;
  padding: 0.3rem 0;
  /* Fades the row to transparent at both edges instead of cutting cards off
     abruptly - works against whatever sits behind it, so it never drifts out
     of sync with the section background the way a solid-color overlay would. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
}

.reviews-marquee::-webkit-scrollbar {
  display: none;
}

.reviews-marquee:focus-visible {
  outline: 3px solid var(--tomato);
  outline-offset: -3px;
}

.reviews-track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: max-content;
  padding: 0 var(--gap);
  /* Distance is set by reviews.js as --marquee-distance once the real
     rendered width of one review set is known (card count varies with how
     many 4-5 star reviews Google returns, so this can't be a fixed value).
     A CSS animation (not a JS rAF loop) drives the motion deliberately: it
     runs on the compositor thread and isn't subject to the throttling
     browsers apply to requestAnimationFrame in some circumstances (e.g.
     power-saving modes, background timer throttling) - a plain rAF-driven
     version of this was intermittently just sitting static. */
  animation: reviews-scroll 35s linear infinite;
}

.reviews-marquee:hover .reviews-track,
.reviews-track.is-paused {
  animation-play-state: paused;
}

@keyframes reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none;
  }
}

.reviews-set {
  display: flex;
  gap: var(--gap);
  flex: 0 0 auto;
}

.review-card {
  flex: 0 0 320px;
  width: 320px;
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.review-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-card-meta {
  flex: 1;
  min-width: 0;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tomato);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

/* 5px of padding cancelled by negative margins: same layout, but the
   ellipsis clipping (overflow: hidden) no longer cuts off the 3px + 2px
   focus ring of the profile link inside. */
.review-author {
  font-weight: 700;
  padding: 5px;
  margin: -5px -5px calc(0.2rem - 5px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Author name links to the Google profile but reads as plain text until
   hovered or focused. */
.review-author a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.review-author a:hover,
.review-author a:focus-visible {
  text-decoration: underline;
}

.review-stars {
  display: flex;
  gap: 2px;
}

.star-icon {
  width: 15px;
  height: 15px;
  fill: var(--line);
}

.star-icon.is-filled {
  fill: var(--cheese);
}

.review-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.review-text {
  color: var(--crust-muted);
  font-size: 0.95rem;
  flex: 1;
  margin: 0;
}

.review-time {
  color: var(--crust-muted);
  font-size: 0.8rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-marquee {
    scroll-snap-type: x proximity;
  }

  .review-card {
    scroll-snap-align: start;
  }
}

/* ===== Real photos ===== */
/* Capped so portrait shots (playground, delivery car) crop into a wide band
   instead of rendering up to ~960px tall at their natural proportions. */
.photo {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 200px;
  max-height: 380px;
}

.photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
}

.h-260 {
  min-height: 260px;
}

.h-280 {
  min-height: 280px;
}

.h-320 {
  min-height: 320px;
}

.link-tomato {
  color: var(--tomato);
  font-weight: 700;
  text-decoration: none;
}

.link-tomato:hover {
  text-decoration: underline;
}

/* Big phone numbers on Dostava and Kontakt. */
.phone-link {
  font-size: 1.3rem;
}

/* A phone number never breaks in the middle, wherever it appears. */
a[href^="tel:"] {
  white-space: nowrap;
}

/* The delivery-orders number spans the whole row and is the largest number
   on the Dostava page, so it's the one people call for delivery. */
.info-block-lead {
  grid-column: 1 / -1;
}

.delivery-phone-main {
  font-size: 1.9rem;
}

.section-center {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

/* ===== 8-ball divider on background-colour transitions =====
   Sits centred on the seam wherever a section's background differs from the
   one above it. Selector-driven, so same-colour neighbours (two plain
   .section blocks) never get one and new pages need no extra markup. */
.page-hero + .section::before,
.section:not(.section-alt) + .section-alt::before,
.section-alt + .section:not(.section-alt)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: url('/images/brand/8ball-icon.png') center / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* ===== Two column layout ===== */
.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (max-width: 780px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ===== Contact / info blocks ===== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  margin: 1.5rem 0 2rem;
}

.info-block h3 {
  font-size: 1.05rem;
  color: var(--tomato);
  margin-bottom: 0.5rem;
}

.hours-list {
  list-style: none;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
  max-width: 320px;
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: none;
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* Stands in for the map until the visitor clicks, so Google gets no request
   (and sets no cookies) on a plain visit to Kontakt. Same size as the map. */
.map-placeholder {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--parchment);
}

.map-placeholder p {
  margin: 0;
}

.contact-card {
  background: var(--parchment);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.contact-card a {
  color: var(--tomato);
  font-weight: 700;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-card--compact {
  margin-top: 2.5rem;
  max-width: 480px;
}

.contact-card h3:first-child {
  margin-top: 0;
  color: var(--tomato);
}

.contact-card p {
  margin-bottom: 0.6rem;
}

.contact-card p:last-child {
  margin-bottom: 0;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--crust);
  color: rgba(248, 244, 238, 0.85);
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-grid h3 {
  color: var(--cream);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-brand-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* The restaurant drawing fills the empty space under the address. The hours
   column sets the row's height; margin-top: auto pins the drawing to the
   bottom-left of the first column, below the text. */
.footer-brand-col {
  display: flex;
  flex-direction: column;
}

.footer-art {
  margin-top: auto;
  padding-top: 1.25rem;
  width: min(100%, 290px);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

/* Stacked footer (phones): there's no empty space to fill, and between the
   address and the contact block the drawing would only push text apart. */
@media (max-width: 780px) {
  .footer-art {
    display: none;
  }
}

.footer-grid a {
  color: rgba(248, 244, 238, 0.85);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--cheese-light);
}

.footer-bottom {
  border-top: 1px solid rgba(248, 244, 238, 0.15);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

.footer-bottom ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.footer-bottom a {
  color: rgba(248, 244, 238, 0.75);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--cheese-light);
}

/* Company details (ZEPT) and the developer credit: a full-width second row,
   smaller than the © line so it stays in the background. */
.footer-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(248, 244, 238, 0.75);
}

/* ===== Legal pages ===== */
.legal-content h2 {
  margin-top: 2rem;
  font-size: 1.3rem;
}

.legal-content p,
.legal-content li {
  color: var(--crust-muted);
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1em;
}

/* ===== Page hero (non-slideshow inner pages) ===== */
.page-hero {
  background: var(--crust);
  color: var(--cream);
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  max-width: 22ch;
}

.page-hero p {
  color: rgba(248, 244, 238, 0.9);
  font-size: 1.1rem;
  max-width: 55ch;
}

/* Tomato red is too dark to read on the brown hero; cheese-light is 6:1. */
.page-hero a {
  color: var(--cheese-light);
  font-weight: 700;
}

/* Inner pages: a large line drawing of the restaurant beside the title,
   taller than the text block so it carries the band. Its negative block
   margin reaches into the band's padding, so it runs nearly edge to edge. */
.page-hero--art .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.page-hero-art {
  flex-shrink: 0;
  width: auto;
  height: clamp(200px, 24vw, 300px);
  max-width: 50%;
  object-fit: contain;
  margin-block: calc(-1 * clamp(1.25rem, 3.5vw, 2.25rem));
}

/* Phones: side by side would squeeze the title into a narrow column, so the
   drawing moves under the text at a smaller size. */
@media (max-width: 780px) {
  .page-hero--art .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  /* Smaller than on desktop (owner's call) so the page content starts higher. */
  .page-hero-art {
    width: auto;
    height: clamp(110px, 30vw, 150px);
    max-width: 60%;
    margin-block: 0;
  }
}