/* Hallmark · shape: menu-led page · genre: editorial · theme: custom folk palette (by request: the owner asked for narodske colours over Hedgerow) · redesign: full · draw: 1a8040
 * hero: Stage, the head beside the owner's photograph of the room · nav: edge-aligned wordmark with Pozovi · footer: colophon block · imagery: the owner's photograph of the room, cropped to the set table · signature: the menu as a kafana list under the plate's blue line, with today's hours beside the headline
 * axes: light/high-contrast-serif/chromatic-red · posture: linen · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, one photograph only; the owner's room shot leads, cropped to the table, and the menu carries the rest in type */
/* Hallmark · dropped #rezervacija, name, phone, date, time, guests, where, note · the owner asked to remove table booking; every action on the page is now a phone call */
/* Hallmark · waive 65 · cream linen, Prata and a folk red · the owner asked for narodske colours drawn from the restaurant's red striped chairs, white cloths and blue rimmed plates */
/* Hallmark · dropped the library photographs · they showed other restaurants and misrepresented the Sloga */
/* Hallmark · reworded "#meni" to "#jelovnik", "#kontakt" to "#radno-vreme" · anchors renamed to the Serbian section names the nav uses */
/* Hallmark · dropped #o-nama, #predlog, #copy-phone · placeholder copy with no facts; the copy button became a tel: link so a tap calls the restaurant */
@import url("./tokens.css?v=20261030");
@import url("./base.css?v=20261030");

/* folk ornament: the chair upholstery, red stripes beside a gold damask stripe, dark red pinlines */
.kilim {
  height: 30px;
  background:
    radial-gradient(ellipse 4px 6px at 50% 50%, var(--stripe-gold) 0 65%, transparent 72%) 8px 0 / 42px 15px repeat,
    radial-gradient(circle at 50% 50%, var(--stripe-red) 0 1.5px, transparent 2px) 8px 7.5px / 42px 15px repeat,
    repeating-linear-gradient(90deg, var(--stripe-red) 0, var(--stripe-red) 16px, var(--stripe-line) 16px, var(--stripe-line) 18px, var(--stripe-gold) 18px, var(--stripe-gold) 19px, var(--stripe-damask) 19px, var(--stripe-damask) 39px, var(--stripe-gold) 39px, var(--stripe-gold) 40px, var(--stripe-line) 40px, var(--stripe-line) 42px);
  border-block: 2px solid var(--stripe-line);
}
.blue-line { border: 0; border-top: 3px double var(--color-blue); margin: 0; }

/* chrome */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); text-decoration: none; line-height: 1; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
@media (max-width: 60rem) { .nav__links { display: none; } .nav__end .nav__call { display: none; } .nav__row { min-height: 60px; } }

/* controls, eight states */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-accent); }
.btn--quiet:hover { background: color-mix(in oklab, var(--color-accent) 8%, transparent); border-color: var(--color-accent); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.link:hover { text-decoration-thickness: 2px; }

/* sections share one column gap */
.section { padding-block: var(--section-gap-s); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: start; }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.body { color: var(--color-ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; }

/* hero: the head beside the room */
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); min-height: calc(100dvh - 73px - 34px); }
.hero h1 { font-size: clamp(2.5rem, 4.2vw + 0.75rem, 4.5rem); max-width: 16ch; color: var(--color-ink); line-height: 1.12; }
.hero .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.today { display: grid; gap: var(--space-2xs); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 3px double var(--color-blue); max-width: 30rem; }
.today__state { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; color: var(--color-ink); }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--space-xl); } }

/* photo slots, framed in the kilim until the restaurant's photographs arrive */
.frame { margin: 0; display: grid; gap: var(--space-sm); }
.slot { --kilim-a: color-mix(in oklab, var(--color-accent) 22%, var(--color-paper-2)); --kilim-b: color-mix(in oklab, var(--color-ochre) 30%, var(--color-paper-2));
  aspect-ratio: 4 / 5; max-height: 72vh; border: 10px solid var(--color-paper); outline: 1.5px solid var(--color-blue); outline-offset: -1px;
  background:
    linear-gradient(135deg, var(--kilim-a) 25%, transparent 25%) -24px 0 / 48px 48px,
    linear-gradient(225deg, var(--kilim-a) 25%, transparent 25%) -24px 0 / 48px 48px,
    linear-gradient(315deg, var(--kilim-b) 25%, transparent 25%) 0 0 / 48px 48px,
    linear-gradient(45deg, var(--kilim-b) 25%, transparent 25%) 0 0 / 48px 48px,
    var(--color-paper-2); }
.slot__note { position: absolute; inset: auto var(--space-md) var(--space-md) var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); }
.frame figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .slot { aspect-ratio: 4 / 3; } }

/* hours and the address */
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 3px double var(--color-blue); }
.hours th { text-align: left; font-weight: 400; color: var(--color-ink-2); }
.hours th, .hours td { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.hours td { text-align: right; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.hours tr.is-closed td { color: var(--color-muted); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--color-accent); }
.hours tr.is-today td { border-bottom-color: var(--color-accent); }
.hours tr.is-today th { border-bottom-color: var(--color-accent); }
.where { display: grid; gap: var(--space-lg); }
.where__big { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; color: var(--color-ink); }
.where__phone { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.where__phone:hover { text-decoration: underline; }
.where__rows { display: grid; gap: var(--space-2xs); justify-items: start; }

/* the menu, a kafana list under the plate's blue line */
.menu { background: var(--color-paper-2); }
.menu__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg [role="tab"] { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg [role="tab"]:hover { color: var(--color-ink); border-color: var(--color-muted); }
.seg [role="tab"]:active { transform: translateY(1px); }
.seg [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[role="tabpanel"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.today-pill { margin-left: var(--space-xs); padding: 0 var(--space-xs); border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.seg [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.dishes { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--color-blue); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); }
.dishes li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.dishes h3 { font-size: var(--text-2xl); max-width: none; color: var(--color-ink); }
.dishes p { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .dishes { grid-template-columns: minmax(0, 1fr); } .dishes h3 { font-size: var(--text-xl); } }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* guests, in their own words: four reviews, one type size */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); row-gap: var(--space-xl); }
.review { margin: 0; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: 3px double var(--color-blue); }
.review__stars { color: var(--color-ochre); font-size: var(--text-lg); letter-spacing: 0.1em; line-height: 1; }
.review__text { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.25; color: var(--color-ink); text-wrap: pretty; max-width: 34ch; }
.review cite { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); }
.words__foot { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
@media (max-width: 60rem) { .reviews { grid-template-columns: minmax(0, 1fr); } .review__text { font-size: var(--text-xl); } }

/* celebrations, the walnut band */
.dark { background: var(--color-ink); color: var(--color-paper); }
.dark h2 { color: var(--color-paper); }
.dark .body { color: color-mix(in oklab, var(--color-paper) 82%, var(--color-ink)); }
.occasions { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--color-accent-deep); }
.occasions li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 22%, var(--color-ink)); font-family: var(--font-display); font-size: var(--text-2xl); }
.dark__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }

/* colophon */
.colophon { padding-block: var(--space-2xl) calc(var(--space-2xl) + 72px); }
.colophon__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); row-gap: var(--space-lg); }
.colophon__name { font-family: var(--font-display); font-size: var(--text-section); line-height: 1; color: var(--color-ink); }
.colophon__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.colophon__cols p + p { margin-top: var(--space-2xs); }
@media (max-width: 60rem) { .colophon__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 60.01rem) { .colophon { padding-bottom: var(--space-2xl); } }

/* phone: a call bar always within thumb reach */
.callbar { display: none; }
@media (max-width: 60rem) {
  .callbar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xs); position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); padding: var(--space-xs) max(var(--space-md), env(safe-area-inset-right, 0px)) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px)) max(var(--space-md), env(safe-area-inset-left, 0px)); background: var(--color-paper); border-top: 3px double var(--color-blue); }
  .callbar .btn { width: 100%; min-height: 52px; font-size: var(--text-md); }
}

/* script switch: Cyrillic and Latin, the body face, sentence case */
.nav__end { display: flex; align-items: center; gap: var(--space-md); }
.script-switch { display: inline-flex; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); padding: var(--space-3xs); }
.script-switch button { min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.script-switch button:hover { color: var(--color-ink); }
.script-switch button:active { transform: translateY(1px); }
.script-switch button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.script-switch button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.btn .icon { flex: none; width: 1.15em; height: 1.15em; }
.today-note { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }

/* map: OpenStreetMap through Leaflet, framed like the room photograph */
.map-wrap { margin-top: var(--space-2xl); display: grid; gap: var(--space-sm); }
.map { position: relative; height: clamp(280px, 40vw, 420px); border: 10px solid var(--color-paper); outline: 1.5px solid var(--color-blue); outline-offset: -1px; background: var(--color-paper-2); z-index: 0; display: grid; place-items: center; }
.map:focus-visible, .map .leaflet-container:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.map .leaflet-tile-pane { filter: sepia(0.18) saturate(0.85); }
.map__pin span { display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-accent); border: 3px solid var(--color-paper); box-shadow: 0 0 0 1.5px var(--color-stripe-line); }
.map__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.map__links .link { display: inline-flex; align-items: center; min-height: 44px; }
.hours__tz { margin-top: var(--space-sm); }
.map__fallback { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); }

/* Leaflet controls in the site's own controls: zoom like the round outline buttons, attribution in the body face.
   Selectors are one step stronger than leaflet.css, which loads after this file. */
.map .leaflet-control-zoom.leaflet-bar { border: 0; border-radius: 0; box-shadow: none; background: transparent; display: grid; gap: var(--space-xs); }
.map .leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-in,
.map .leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-out { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-accent); font: 500 22px/1 var(--font-body); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.map .leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-in:hover,
.map .leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-out:hover { background: var(--color-paper-2); }
.map .leaflet-control-zoom.leaflet-bar a:active { transform: translateY(1px); }
.map .leaflet-control-zoom.leaflet-bar a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.map .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { opacity: 0.45; cursor: not-allowed; }
.map .leaflet-control-attribution.leaflet-control { background: color-mix(in oklab, var(--color-paper) 88%, transparent); color: var(--color-ink-2); font: 400 var(--text-xs)/1.4 var(--font-body); padding: var(--space-3xs) var(--space-xs); }
.map .leaflet-control-attribution.leaflet-control a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* cookie consent: a quiet band at the foot of the screen; refusing is as easy as accepting */
.consent { position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); background: var(--color-paper); border-top: 3px double var(--color-blue); padding-bottom: env(safe-area-inset-bottom, 0px); }
.consent__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-2xl); padding-block: var(--space-md); }
.consent__text { display: grid; gap: var(--space-2xs); max-width: 62ch; min-width: 0; }
.consent__title { font-size: var(--text-xl); color: var(--color-ink); max-width: none; }
.consent__text p { font-size: var(--text-sm); color: var(--color-ink-2); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 60rem) {
  .consent { bottom: calc(52px + 2 * var(--space-xs) + 3px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
  .consent__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* footer legal row: privacy policy link and the cookie settings button, set like links */
.colophon__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); }
.colophon__legal .link, .link-button { display: inline-flex; align-items: center; min-height: 44px; }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; cursor: pointer; }
.link-button:hover { text-decoration-thickness: 2px; }
.link-button:active { transform: translateY(1px); }
.link-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.link-button:disabled { opacity: 0.55; cursor: not-allowed; }

/* privacy policy page: one reading column */
.doc { padding-block: var(--section-gap-s); }
.doc__body { display: grid; gap: var(--space-xl); max-width: 68ch; }
.doc__body section { display: grid; gap: var(--space-sm); }
.doc__body h1 { font-size: var(--text-section); max-width: none; }
.doc__body h2 { font-size: var(--text-2xl); max-width: none; }
.doc__body p, .doc__body li { color: var(--color-ink-2); line-height: 1.65; }
.doc__body ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2xs); }
.doc__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border-top: 3px double var(--color-blue); }
.doc__table th, .doc__table td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc__table th { font-weight: 500; color: var(--color-ink); }
.doc__table-wrap { overflow-x: auto; }
.colophon__company { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.doc__back { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.doc__home { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-xs); color: var(--color-muted); text-decoration: none; }
.doc__home:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.doc__home:active { transform: translateY(1px); }
.doc__home:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc__home .icon { width: 1em; height: 1em; }

/* every control: a pointer and no text selection, so a quick double click (e.g. on the script switch) never leaves a selection behind */
button, .btn, [role="tab"], .link-button, .script-switch button, .wordmark, .nav__links a, .doc__home, .map .leaflet-control-zoom a, .map__fallback {
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}