/* ============================================================
   LUCHO · ВАРИАНТЫ ОФОРМЛЕНИЯ для сравнения (22.10.2026).
   Включаются параметром ?theme=olive | dark (запоминается в localStorage, снимается ?theme=cream).
   Базовая тема (бежевая) — lucho.css без изменений. Победитель переедет в lucho.css,
   проигравшие варианты и этот файл удаляются.
   ============================================================ */

/* ── Общее для тёмных тем: инверсия ролей ─────────────────── */
html[data-theme="olive"], html[data-theme="dark"] {
  --ink: #F9F4E8;                 /* текст — бежевый */
  --muted: rgba(249, 244, 232, 0.70);
  --line: rgba(249, 244, 232, 0.18);
  --line-strong: rgba(249, 244, 232, 0.36);
  --line-dark: rgba(249, 244, 232, 0.28);
  --cream-50: rgba(249, 244, 232, 0.06);
  --paper: rgba(249, 244, 232, 0.08);
  --on-dark: #F9F4E8;             /* текст на тёмных плашках — всегда бежевый, не «страница» */
  --on-dark-muted: rgba(249, 244, 232, 0.72);
}
html[data-theme="olive"] {
  --cream: #4A5215;               /* страница — чернильная олива */
  --paper-2: #69741F;             /* вторая поверхность — olive-700 */
  --alt: #5A6419;
}
html[data-theme="dark"] {
  --cream: #1E1C17;               /* страница — тёплый тёмный */
  --paper-2: #2A2721;
  --alt: #262319;
}

/* тёмные/бумажные секции в тёмной теме: инверсия — бежевый блок становится акцентом */
html[data-theme] .section--dark { background: var(--paper-2); color: var(--ink); }
html[data-theme] .section--paper { background: var(--paper-2); }
html[data-theme] .section--line { border-top-color: var(--line); }
html[data-theme] .site-header { background: color-mix(in srgb, var(--cream) 92%, transparent); border-bottom-color: var(--line); }
html[data-theme] .mobile-nav { background: var(--cream); border-bottom-color: var(--line); }
html[data-theme] .brand img { filter: brightness(0) invert(1) sepia(0.12) saturate(0.6) brightness(0.98); }
html[data-theme] .menu-toggle, html[data-theme] .header-phone { color: var(--ink); }

/* Доска меню: в тёмной теме — БЕЖЕВАЯ карта с чернильным текстом (подпись сайта остаётся контрастной) */
html[data-theme] .board { background: #F9F4E8; color: #333333; }
html[data-theme] .board h3 { color: #333333; }
html[data-theme] .board dt small { color: #6B6A5E; }
html[data-theme] .board .dots { border-bottom-color: rgba(51, 51, 51, 0.3); }
html[data-theme] .board__foot { color: #6B6A5E; }
html[data-theme] .board__foot a { color: #333333; }

/* Карта гостя — красный блок, единственное место для смелости */
html[data-theme] #loyalty.section--dark { background: #8C2D19; color: #F9F4E8; }
html[data-theme] #loyalty .btn--primary { background: #F9F4E8; color: #8C2D19; }
html[data-theme] #loyalty .btn--primary:hover { background: #fff; color: #8C2D19; }
html[data-theme] #loyalty .btn--ghost { color: #F9F4E8; border-color: rgba(249, 244, 232, 0.5); }
html[data-theme] #birthday.section--dark { background: #8C2D19; }
html[data-theme] #birthday .btn--primary { background: #F9F4E8; color: #8C2D19; }

/* Кнопки, карточки, отзывы, FAQ, форма — на тёмном */
html[data-theme] .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
html[data-theme] .btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
html[data-theme] .status::before { background: #E8A08E; }
html[data-theme] .occasion { background: var(--paper-2); border-color: transparent; }
html[data-theme] .occasion .tag { color: #C9D36A; }
html[data-theme] .occasion .cta { color: #F0A58E; }
html[data-theme] .review { border-top-color: var(--ink); }
html[data-theme] .faq summary::after { color: #F0A58E; }
html[data-theme] .lead input, html[data-theme] .lead textarea { background: rgba(249, 244, 232, 0.08); color: var(--ink); border-color: var(--line-strong); }
html[data-theme] .lead input:focus, html[data-theme] .lead textarea:focus { border-color: var(--ink); }
html[data-theme] .lead input::placeholder, html[data-theme] .lead textarea::placeholder { color: rgba(249, 244, 232, 0.5); }
html[data-theme] .lead__err { background: #F5D9D0; color: #8C2D19; }
html[data-theme] .lead__ok { background: #F9F4E8; color: #4A5215; }
html[data-theme] .notice { background: var(--paper-2); }
html[data-theme] .steps li { border-top-color: var(--ink); }
html[data-theme] .links a { border-color: var(--line-strong); }
html[data-theme] .links a:hover { border-color: var(--ink); }
html[data-theme] .map { background: var(--paper-2); }
html[data-theme] .booking-frame { background: transparent; }
/* Restoplace кладёт на свой фон #4A5215 затемнение rgba(23,24,24,.15) → внутри iframe видно #424915;
   секция брони красится в тот же цвет, чтобы граница iframe исчезла (замер по скрину владельца 22.10) */
html[data-theme="olive"] #booking, html[data-theme="olive2"] #booking { background: #424915; }
html[data-theme] .site-footer { border-top-color: var(--line); color: var(--muted); }
html[data-theme] .sticky-cta { background: #8C2D19; color: #F9F4E8; }
html[data-theme] .sticky-cta .status { color: #F9F4E8; }
html[data-theme] .sticky-cta .status::before { background: #F9F4E8; }
html[data-theme] .skip { background: #F9F4E8; color: #333333; }
html[data-theme] .sticky-cta .btn--primary { background: #F9F4E8; color: #8C2D19; }
html[data-theme] .hero__photo, html[data-theme] .strip img, html[data-theme] .dish img, html[data-theme] .gallery img { background: var(--paper-2); }
html[data-theme] .was b { color: var(--ink); }
html[data-theme] a:hover { color: #F0A58E; }
html[data-theme] .section--dark a:hover { color: #fff; }
html[data-theme] .loyalty__qr { background: #F9F4E8; }
html[data-theme] :focus-visible { outline-color: #F0A58E; }

/* Чуть «моднее» типографика в вариантах: крупнее герой, плотнее строки */
html[data-theme] h1 { font-size: clamp(1.85rem, 5vw, 3.75rem); line-height: 0.98; letter-spacing: 0.01em; }
html[data-theme] .hero__kicker { color: var(--muted); }
html[data-theme] .hero__photo { border-radius: 10px; }
html[data-theme] .strip img, html[data-theme] .dish img, html[data-theme] .occasion, html[data-theme] .board { border-radius: 10px; }

/* ── Вариант 4: «олива-2» — те же цвета, что olive, но ГЕРОЙ другой: фото во всю ширину с логотипом
   и подстрочником поверх, заголовок и кнопки — под фото на оливе. ───────────────────────────── */
html[data-theme="olive2"] {
  --ink: #F9F4E8; --muted: rgba(249, 244, 232, 0.70);
  --line: rgba(249, 244, 232, 0.18); --line-strong: rgba(249, 244, 232, 0.36); --line-dark: rgba(249, 244, 232, 0.28);
  --cream-50: rgba(249, 244, 232, 0.06); --paper: rgba(249, 244, 232, 0.08);
  --on-dark: #F9F4E8; --on-dark-muted: rgba(249, 244, 232, 0.72);
  --cream: #4A5215; --paper-2: #69741F;
}
html[data-theme="olive2"] .hero--split { display: none; }
.hero--photo { display: none; padding: 0; }
html[data-theme="olive2"] .hero--photo { display: block; }
.hero--photo .hero__media { position: relative; margin: 0; overflow: hidden; background: #3a4011; }
.hero--photo .hero__media > picture img { width: 100%; height: clamp(420px, 78vh, 640px); object-fit: cover; display: block; }
@media (min-width: 820px) { .hero--photo .hero__media > picture img { height: clamp(460px, 62vh, 620px); object-position: center 50%; } }
.hero--photo .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 33, 8, 0.12) 0%, rgba(30, 33, 8, 0.06) 30%, rgba(30, 33, 8, 0.55) 62%, rgba(30, 33, 8, 0.88) 100%); pointer-events: none; }
.hero--photo .hero__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-bottom: clamp(1.25rem, 4vw, 2.5rem); color: #F9F4E8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.hero--photo .hero__logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.hero--photo .hero__logo { display: block; width: min(100%, 560px); height: auto; margin: 0 0 0.9rem; }
.hero--photo .hero__logo--wide { display: none; }
@media (min-width: 820px) { .hero--photo .hero__logo--stack { display: none; } .hero--photo .hero__logo--wide { display: block; width: min(100%, 820px); } }
.hero--photo .hero__over .status { color: #F9F4E8; }
.hero--photo .hero__facts--over { margin-top: 0.6rem; color: rgba(249, 244, 232, 0.85); }
.hero--photo .hero__facts--over li { font-size: var(--fs-small); }
.hero--photo .hero__over .status::before { background: #F9F4E8; }
.hero--photo .hero__below { padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.hero--photo .hero__below h1 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); text-transform: none; letter-spacing: 0; line-height: 1.2; margin-bottom: 0.35em; }
.hero--photo .hero__below .lead { font-size: var(--fs-body); }
/* логотип в шапке скрыт, пока на экране большой логотип героя (класс ставит JS) */
html[data-theme="olive2"] .site-header .brand { transition: opacity var(--t); }
html[data-theme="olive2"] body.hero-visible .site-header .brand { opacity: 0; pointer-events: none; }
.hero--photo .hero__below .lead { max-width: none; }
.hero--photo .hero__below .hero__actions { margin: 1rem 0 1rem; }