/* Header navigation: equal-width cells between the header rules, plus drop-down menus. */
.site-header .main-nav { position: relative; display: grid; grid-template-columns: repeat(var(--nav-count, 5), minmax(0, 1fr)); align-items: stretch; justify-content: normal; gap: 0; padding: 0; }
.site-header .main-nav .nav-item { position: relative; display: flex; min-width: 0; }
.site-header .main-nav a.nav-link,
.site-header .main-nav button.nav-link { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; width: 100%; min-width: 0; margin: 0; padding: 12px 10px; border: 0; border-radius: 0; background: transparent; color: #fffaf2; font: inherit; font-weight: 700; line-height: 1.25; text-align: center; white-space: nowrap; text-shadow: 0 1px 5px rgb(0 0 0 / 60%); cursor: pointer; transition: background-color .2s ease; }
.site-header .main-nav .nav-link::after { content: none; }
.site-header .main-nav .nav-link[aria-expanded='true'] { background: rgb(0 0 0 / 34%); }
.site-header .main-nav .nav-link[aria-current='page'],
.site-header .main-nav .nav-link.is-current { background: rgb(0 0 0 / 55%); }
.site-header .main-nav .nav-link.is-current[aria-expanded='true'] { background: rgb(0 0 0 / 62%); }
/* Hover only where a pointer can hover, so a tapped cell does not stay shaded on phones. */
@media (hover: hover) {
  .site-header .main-nav .nav-link:hover { background: rgb(0 0 0 / 34%); }
  .site-header .main-nav .nav-link[aria-current='page']:hover,
  .site-header .main-nav .nav-link.is-current:hover { background: rgb(0 0 0 / 62%); }
}
/* The chevron is balanced by an equal spacer so every label sits at its cell's centre. */
.site-header .main-nav .nav-menu-toggle::before { content: ''; flex: none; width: 14px; }
.nav-label-short { display: none; }
/* Keep the open header menus above the search band that follows the hero. */
.site-header:not(.is-sticky) { z-index: 30; }
@media (min-width: 601px) {
  /* The logo cell matches the middle navigation cell, so the rules meet the cell edges. */
  .site-header:not(.is-sticky) .header-top { grid-template-columns: 2fr 1fr 2fr; }
  /* A drop-down in the right half of the bar (Admin → Меню на сайта) opens leftwards, so it stays on the page. */
  .site-header .main-nav .nav-item-end .nav-menu { left: auto; right: 0; }
  /* A label longer than its cell wraps onto a second line instead of running into the next cell. */
  .site-header .main-nav a.nav-link,
  .site-header .main-nav button.nav-link { white-space: normal; text-wrap: balance; }
}
.site-header .main-nav .nav-link:focus-visible { outline: 2px solid var(--ivory); outline-offset: -4px; }
.site-header .main-nav .nav-link .icon { width: 14px; height: 14px; flex: none; stroke-width: 1.6; transition: transform .22s var(--ease); }
.site-header .main-nav .nav-link[aria-expanded='true'] .icon { transform: rotate(180deg); }

/* Room menu: a light panel that reads like the language picker. */
.site-header .nav-menu { position: absolute; top: 100%; left: 0; z-index: 30; width: max(100%, 372px); padding: 8px; background: var(--paper); color: var(--ink); border-radius: 0 0 4px 4px; box-shadow: 0 22px 48px rgb(24 17 12 / 28%), 0 2px 8px rgb(24 17 12 / 12%); text-align: left; text-shadow: none; }
.site-header .nav-menu[hidden] { display: none; }
.site-header .nav-menu-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-header .main-nav .nav-menu .nav-menu-link,
.site-header .main-nav .nav-menu .nav-menu-all { position: relative; display: grid; align-items: center; margin: 0; border-radius: 3px; color: var(--ink); font-weight: 400; line-height: 1.35; white-space: normal; text-shadow: none; transition: background-color .18s ease; }
.site-header .main-nav .nav-menu .nav-menu-link::after,
.site-header .main-nav .nav-menu .nav-menu-all::after { content: none; }
.site-header .main-nav .nav-menu .nav-menu-link { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 8px; }
.site-header .main-nav .nav-menu .nav-menu-link:hover,
.site-header .main-nav .nav-menu .nav-menu-link:focus-visible,
.site-header .main-nav .nav-menu .nav-menu-link[aria-current='page'] { background: var(--canvas); }
.site-header .nav-menu-link img { width: 72px; height: 52px; object-fit: cover; border-radius: 3px; background: var(--canvas); }
.site-header .nav-menu-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-header .nav-menu-name { font-size: 15px; font-weight: 700; color: #3f3931; }
.site-header .nav-menu-price { font-size: 12px; color: var(--muted); }
.site-header .main-nav .nav-menu .nav-menu-all { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 8px; padding: 14px 18px; border: 0; border-radius: 3px; background: var(--button-gold); font-size: 14px; font-weight: 700; color: var(--button-ink); }
.site-header .main-nav .nav-menu .nav-menu-all:hover, .site-header .main-nav .nav-menu .nav-menu-all[aria-current='page'] { background: var(--button-gold-hover); color: var(--button-ink); }
.site-header .nav-menu-all .icon { display: block; width: 30px; height: 20px; color: var(--button-ink); transition: transform .25s var(--ease); }
.site-header .nav-menu-all:hover .icon { transform: translateX(4px); }
.site-header .nav-menu :focus-visible { outline: 2px solid #8b6b51; outline-offset: 0; }

/* Compact sticky bar: the cells fill the bar's full height. */
.site-header.is-sticky .main-nav { align-self: stretch; margin-block: -6px; gap: 0; justify-content: normal; padding: 0; }
.site-header.is-sticky .main-nav a.nav-link,
.site-header.is-sticky .main-nav button.nav-link { padding: 8px 8px; font-size: inherit; }
.site-header.is-sticky .nav-menu { max-height: calc(100dvh - var(--sticky-offset, 84px)); overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 4px 4px; }

@media (min-width: 1800px) {
  .site-header .nav-menu { width: max(100%, 420px); }
  .site-header .nav-menu-name { font-size: 17px; }
  .site-header .nav-menu-price { font-size: 14px; }
}
@media (max-width: 900px) {
  .site-header.is-sticky .main-nav { margin-block: 4px -4px; border-top: 1px solid #f8f4ec24; }
  .site-header.is-sticky .main-nav a.nav-link,
  .site-header.is-sticky .main-nav button.nav-link { padding-block: 10px; }
}
@media (max-width: 600px) {
  .site-header .main-nav .nav-item { position: static; }
  .site-header .main-nav a.nav-link,
  .site-header .main-nav button.nav-link { gap: 3px; padding: 10px 4px; white-space: normal; }
  .site-header .main-nav .nav-link .icon { display: block; width: 11px; height: 11px; }
  .site-header .main-nav .nav-menu-toggle::before { width: 11px; }
  .site-header:not(.is-sticky) .main-nav { padding-inline: 6px; }
  .site-header.is-sticky .main-nav a.nav-link,
  .site-header.is-sticky .main-nav button.nav-link { padding-inline: 2px; }
  .site-header .nav-menu { left: 10px; right: 10px; width: auto; border-radius: 4px; }
  .site-header .main-nav .nav-menu .nav-menu-link { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .site-header .nav-menu-link img { width: 64px; height: 48px; }
  .site-header .nav-menu-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav .nav-link .icon, .site-header .nav-menu-all .icon { transition: none; }
}

/* The language picker shares the drop-down surface. */
.site-header .language-options { padding: 6px; border: 0; border-radius: 4px; box-shadow: 0 22px 48px rgb(24 17 12 / 28%), 0 2px 8px rgb(24 17 12 / 12%); }
.site-header .language-options a { border-radius: 3px; font-size: 14px; transition: background-color .18s ease; }


@media (max-width: 540px), (min-width: 601px) and (max-width: 700px) {
  .nav-label-long { display: none; }
  .nav-label-short { display: inline; }
}
@media (max-width: 360px) {
  .site-header.is-sticky .main-nav { font-size: 11px; margin-inline: -10px; }
}
/* Six menu items on a phone (Admin → Меню на сайта): tighter cells, no spacer beside the drop-down chevron.
   The cell widths and the text size (12px, 11px at 360px and below) are set in mobile.css. */
@media (max-width: 600px) {
  .site-header .main-nav.is-crowded a.nav-link,
  .site-header .main-nav.is-crowded button.nav-link { gap: 2px; padding-inline: 1px; }
  .site-header .main-nav.is-crowded .nav-menu-toggle::before { content: none; }
  .site-header:not(.is-sticky) .main-nav.is-crowded { padding-inline: 0; }
}
@media (max-width: 360px) {
  .site-header .main-nav.is-crowded .nav-link .icon { width: 9px; height: 9px; }
}
@media (min-width: 601px) and (max-width: 680px) {
  .site-header:not(.is-sticky) .header-book { white-space: nowrap; padding-inline: 10px; }
  .site-header:not(.is-sticky) .language-picker summary > span { display: none; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .site-header:not(.is-sticky) .header-contact { padding-inline: 12px 16px; gap: 12px; }
  .site-header:not(.is-sticky) .header-book { min-width: 0; padding-inline: 14px; font-size: 13px; }
}

/* No rules beside the logo; the navigation cells keep their own. */
.site-header:not(.is-sticky) .header-brand { border-inline: 0; }

/* Headers that do not sit on a photograph (the sticky bar, inner pages) get a warm brown gradient with a soft
   gold glow at the top centre, in the colours of the hero's dark veil. The layer matches the header box. */
.site-header.is-sticky,
.inner-masthead .site-header:not(.is-sticky),
.article-masthead .site-header:not(.is-sticky) { isolation: isolate; background-color: var(--footer); }
.site-header.is-sticky::before,
.inner-masthead .site-header:not(.is-sticky)::before,
.article-masthead .site-header:not(.is-sticky)::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 55% 160% at 50% 0%, rgb(203 164 94 / 20%), transparent 72%), linear-gradient(180deg, #2b231d 0%, var(--footer, #463d35) 100%); opacity: 1; filter: none; clip-path: inset(0); pointer-events: none; }
.site-header.is-sticky::after,
.inner-masthead .site-header:not(.is-sticky)::after,
.article-masthead .site-header:not(.is-sticky)::after { content: none; }
.template-article .article-masthead .site-header:not(.is-sticky) { background-color: var(--footer); }

/* Header address and phone (top left, both header copies): a small duotone MapPin / Phone before the text,
   sized to it. The anchors keep their own display rules (hidden on phones, phone hidden up to 1250px);
   the inner item lays out icon and text, so a wrapped address stays clear of the pin. */
.header-location-item { display: inline-flex; align-items: center; gap: .55em; min-width: 0; }
.header-location-item > .icon { flex: none; width: 1.4em; height: 1.4em; }
.header-location-item > span { min-width: 0; }
/* The address keeps the text measure it had before the pin (style.css: 270px, 145px up to 1250px): the cap grows
   by the pin and its gap (1.4em + .55em), so the text wraps where it always did. */
.header-address { max-width: calc(270px + 1.95em); }
@media (max-width: 1250px) { .header-address { max-width: calc(145px + 1.95em); } }