/* ==========================================================================
   Фрагменти — Контакт-лист
   base.css: Theme tokens (Light & Dark), reset, typography, demo bar, header, footer
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #e3e4e5;
  --ink: #141414;
  --film: #121212;
  --film-line: #2a2a2e;
  --red: #d4291d;
  --red-soft: #f6d6d3;
  --btn-sub: #ff8a7f;
  --mute: #575b61;
  --paper: #fbfbfa;
  --field-bg: #ffffff;
  --kraft: #ddd1b8;
  --edge: #cfc8b8;
  --line: #c4c7cb;
  --soft: #d2d4d7;
  --card-sh: #141414;
  --tape: rgba(212, 41, 29, 0.24);
  --f-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "PT Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-hand: "Caveat", "Segoe Print", cursive;
  --tap: 44px;
  --hdr: 72px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0e;
  --ink: #f2efe9;
  --film: #16161b;
  --film-line: #2e2e36;
  --red: #ff4638;
  --red-soft: rgba(255, 70, 56, 0.18);
  --btn-sub: #c81e14;
  --mute: #a09d96;
  --paper: #151519;
  --field-bg: #1d1d23;
  --kraft: #2b2720;
  --edge: #b8b2a6;
  --line: #2d2e35;
  --soft: #23242b;
  --card-sh: #040406;
  --tape: rgba(255, 70, 56, 0.34);
}

[data-input="touch"] {
  --tap: 56px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-padding-top: 150px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.18s ease, color 0.18s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--bg);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
}

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.03em;
}

.hand {
  font-family: var(--f-hand);
  font-weight: 700;
  color: var(--red);
}

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

.ic {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-input="touch"] .pointer-only {
  display: none !important;
}

[data-input="pointer"] .touch-only {
  display: none !important;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
}

/* ---------- Demo band (preview & mode controls) ---------- */
.demo {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}

.demo .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding-block: 7px;
}

.demo-grp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--ink);
  padding: 2px;
  gap: 2px;
}

.seg label {
  position: relative;
}

.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}

.seg span {
  display: block;
  padding: 3px 10px;
  cursor: pointer;
  color: var(--mute);
  user-select: none;
}

.seg input:checked + span {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

.seg input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.demo small {
  color: var(--mute);
}

/* ---------- Header ---------- */
header.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--bg);
  transition: background-color 0.18s ease;
}

header.top .wrap {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: nowrap;
  min-height: var(--hdr);
  border-bottom: 2px solid var(--ink);
}

.logo {
  font: 700 1.55rem/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.logo i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1.4s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0.15;
  }
}

.sheetno {
  font-size: 0.78rem;
  color: var(--mute);
  white-space: nowrap;
}

nav.main {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

nav.main a {
  position: relative;
  text-decoration: none;
  font: 400 0.88rem var(--f-mono);
  text-transform: uppercase;
  padding: 9px 10px;
  white-space: nowrap;
}

nav.main a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: -1px -3px;
  border: 2.5px solid var(--red);
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}

[data-input="pointer"] nav.main a:hover {
  color: var(--red);
}

nav.main a {
  transition: color 0.15s ease;
}

.nav-book {
  display: none;
}

[data-input="touch"] .nav-home {
  display: none;
}

.hdr-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
}

nav.main + .hdr-actions {
  margin-left: 0;
}

/* Sun/moon theme toggle — borderless */
.theme-btn {
  border: 0;
  background: none;
  padding: 8px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  border-radius: 50%;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

[data-input="pointer"] .theme-btn:hover {
  background: var(--soft);
  transform: rotate(12deg);
}

.theme-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-btn .ic-sun {
  display: none;
}

[data-theme="dark"] .theme-btn .ic-sun {
  display: block;
}

[data-theme="dark"] .theme-btn .ic-moon {
  display: none;
}

.hdr-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font: 600 0.98rem var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 0 var(--red);
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

[data-input="pointer"] .hdr-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--red);
}

.hdr-cta b {
  color: var(--btn-sub);
  font-weight: 600;
}

@media (max-width: 1140px) {
  .sheetno {
    display: none;
  }
}

@media (max-width: 940px) {
  header.top .wrap {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 8px;
  }
  nav.main {
    order: 3;
    flex: 0 0 calc(100% + max(16px, env(safe-area-inset-left, 0px)) + max(16px, env(safe-area-inset-right, 0px)));
    margin: 4px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    overflow-x: auto;
    scrollbar-width: none;
    gap: 20px;
    overscroll-behavior-x: contain;
  }
  nav.main::-webkit-scrollbar {
    display: none;
  }
  nav.main a {
    padding: 8px 0 10px;
    color: var(--mute);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  nav.main a[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
  }
  nav.main a[aria-current="page"]::after {
    inset: auto -2px 8px;
    height: 3.5px;
    border: 0;
    border-radius: 2px;
    background: var(--red);
    transform: rotate(-1.5deg);
  }
  .nav-book {
    display: inline-flex;
  }
  nav.main + .hdr-actions {
    margin-left: auto;
  }
  html {
    scroll-padding-top: 140px;
  }

  /* Section links sit in their own bar under the logo row; on scroll down they slide
     up behind the logo bar exactly as far as the page moves (driven from app.js) */
  header.top {
    --navh: 46px;
    margin-bottom: var(--navh);
  }
  header.top .wrap {
    position: relative;
    z-index: 1;
    border-bottom-color: transparent;
  }
  /* Opaque logo bar (full width) painted above the sliding menu but below the logo/buttons */
  header.top .wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -2px;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 0 0 100vmax var(--bg);
    clip-path: inset(0 -100vmax);
    pointer-events: none;
  }
  nav.main {
    position: absolute;
    z-index: -2;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--navh);
    flex: none;
    margin: 0;
    padding-top: 2px;
    align-items: center;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    transform: translate3d(0, calc(-1 * var(--nav-off, 0px)), 0);
    will-change: transform;
  }
}

[data-input="touch"] .hdr-cta {
  display: none;
}

[data-input="touch"] nav.main + .hdr-actions {
  margin-left: auto;
}

/* ---------- Common page layout & buttons ---------- */
.page {
  display: none;
}

.page.on {
  display: block;
}

.pagehead {
  padding-block: 44px 22px;
}

.kick {
  font: 400 0.8rem var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.h1 {
  font: 700 clamp(2.6rem, 7vw, 5rem) / 0.9 var(--f-display);
  text-transform: uppercase;
  margin-top: 8px;
}

.h2 {
  font: 700 clamp(2rem, 4.6vw, 3.2rem) / 0.92 var(--f-display);
  text-transform: uppercase;
}

.lead {
  color: var(--mute);
  max-width: 60ch;
  margin-top: 14px;
  font-size: 1.05rem;
}

.sec {
  padding-block: 56px;
}

.sechead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sechead a {
  font: 400 0.9rem var(--f-mono);
  text-decoration: none;
  color: var(--mute);
}

[data-input="pointer"] .sechead a:hover {
  color: var(--red);
}

[data-input="touch"] .sec {
  padding-block: 36px;
}

[data-input="touch"] .pagehead {
  padding-block: 24px 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 24px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  text-decoration: none;
  font: 600 1.05rem var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--red);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

[data-input="pointer"] .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--red);
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--red);
}

.btn b {
  color: var(--btn-sub);
  font-weight: 600;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

[data-input="pointer"] .btn.ghost:hover {
  background: var(--soft);
  transform: none;
}

[data-input="touch"] .btn {
  min-height: 56px;
  font-size: 1.1rem;
}

@media (min-width: 700px) {
  [data-input="touch"] .btn {
    min-height: 64px;
  }
}

/* ---------- Footer & touch bar ---------- */
footer.site {
  border-top: 2px solid var(--ink);
}

footer.site .wrap {
  padding-block: 36px 44px;
}

.fcols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
  justify-content: space-between;
  font-size: 0.92rem;
}

.fcols div {
  display: grid;
  gap: 4px;
}

.fcols .mono {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--mute);
}

@media (max-width: 600px) {
  .fcols {
    justify-content: flex-start;
  }
}

.bookbar {
  display: none;
  position: fixed;
  z-index: 25;
  left: max(20px, env(safe-area-inset-left, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin-inline: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bookbar .btn {
  width: 100%;
  min-height: 56px;
  font-size: 1.15rem;
  /* Red + light outline so it stands out on both light pages and dark blocks */
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--paper);
}

.bookbar .btn b {
  color: #fff;
  opacity: 0.9;
}

@media (min-width: 700px) {
  .bookbar .btn {
    min-height: 64px;
  }
}

[data-input="touch"] .bookbar {
  display: block;
}

[data-input="touch"] .bookbar.away {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

[data-input="touch"] footer.site .wrap {
  padding-bottom: 120px;
}

/* Narrow screens: all six section links fit in one row; booking stands out in red */
@media (max-width: 940px) {
  nav.main a.nav-book {
    color: var(--red);
  }
}
@media (max-width: 440px) {
  nav.main {
    gap: 10px;
    justify-content: space-between;
  }
  nav.main a {
    font-size: 0.78rem;
  }
}
@media (max-width: 375px) {
  nav.main {
    gap: 8px;
  }
  nav.main a {
    font-size: 0.7rem;
  }
}

/* Booking link shows in the section menu on wide screens too */
nav.main a.nav-book {
  display: inline-block;
  color: var(--red);
}
@media (max-width: 940px) {
  nav.main a.nav-book {
    display: inline-flex;
  }
}
@media (max-width: 1320px) {
  .sheetno {
    display: none;
  }
}
@media (min-width: 941px) and (max-width: 1120px) {
  nav.main a {
    padding: 9px 6px;
    font-size: 0.82rem;
  }
}
@media (min-width: 941px) and (max-width: 1010px) {
  .nav-home {
    display: none;
  }
}

/* Soft dark fade behind the floating order button: full screen width,
   darkest at the bottom edge and fully gone by the top of the button */
.bookbar::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(28px + 56px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.16) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Phones: a stronger fade */
@media (max-width: 699px) {
  .bookbar::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Tablets and wider: no fade */
@media (min-width: 700px) {
  .bookbar::before {
    display: none;
  }
}

/* Header "Замовити": red like the other order buttons */
.hdr-cta {
  background: var(--red);
  color: #fff;
  box-shadow: none;
}
.hdr-cta b {
  color: #fff;
  opacity: 0.9;
}
[data-input="pointer"] .hdr-cta:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.08);
}

/* "весілля 2026" beside the logo wherever the header has room */
@media (min-width: 400px) and (max-width: 940px) {
  .sheetno {
    display: inline;
  }
}
@media (min-width: 941px) {
  [data-input="touch"] .sheetno {
    display: inline;
  }
}

/* Logo row never wraps: first "весілля 2026" goes, then (very narrow) everything but the logo */
@media (max-width: 940px) {
  header.top .wrap {
    flex-wrap: nowrap;
  }
}
.sheetno,
.hdr-actions {
  flex-shrink: 0;
}
header.top.hide-sheetno .sheetno {
  display: none !important;
}
header.top.only-logo .hdr-actions {
  display: none !important;
}
header.top.short-cta .hdr-cta b {
  display: none;
}