/* ===========================
   Firecraft BBQ — Global CSS
   =========================== */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; overflow-x: hidden; }
html:focus-within { scroll-behavior: smooth; }

:root{
  --bg:#0f0d0b;
  --bg-2:#151210;
  --ink:#f5f1ed;
  --muted:#c4bbb3;
  --brand:#ff6a28;     /* ember orange */
  --brand-2:#f03a17;   /* chili red */
  --accent:#ffd166;    /* warm highlight */
  --ok:#3bd16f;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:18px;
  --speed:300ms;
  --header-h:64px;     /* фикс. высота хедера (desktop) */
}

/* мобильная высота */
@media (max-width: 860px){
  :root{ --header-h:56px; }
}

/* Локальные шрифты */
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Oswald";
  src:url("../fonts/Oswald-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* Базовые стили страницы */
body{
  background: radial-gradient(1200px 800px at 70% -10%, #1b1510, transparent 60%), var(--bg);
  color:var(--ink);
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top)); /* место под фикс-хедер */
}

.container{ width:min(1120px,92%); margin-inline:auto; }
.sr-only{ position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* =================
   Fixed Header (без бургера)
   ================= */
.fx-header{
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  background: #0f0d0b; isolation:isolate;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fx-header .container{
  display:flex; align-items:center; gap:12px;
  height: var(--header-h);
  padding: 12px 0;
}
.brand{
  flex:0 0 auto;
  font-family:"Oswald",sans-serif;
  font-size:1.25rem; letter-spacing:.5px;
  color:var(--ink); text-decoration:none;
}

/* Всегда видимое меню */
.nav{ flex:1 1 auto; min-width:0; overflow-y:hidden; } /* исключаем вертикальный скролл в полосе */
.nav ul{
  display:flex; align-items:center; justify-content:flex-end;
  gap:22px; list-style:none; margin:0; padding:0;
  white-space:nowrap;
}
.nav a{
  color:var(--muted); text-decoration:none;
  padding:8px 10px; border-radius:12px;
  transition: color var(--speed), background var(--speed), transform var(--speed);
}
.nav a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.nav a.active{ color:var(--accent); }

/* Мобильное поведение: меню прокручивается внутри хедера по оси X */
@media (max-width: 860px){
  .nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav ul{ gap:14px; justify-content:flex-start; }
  .nav::-webkit-scrollbar{ height:6px; }
  .nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }
}

/* =================
   Footer
   ================= */
.site-footer{
  padding:48px 0 80px;
  background:linear-gradient(180deg, transparent, rgba(255,106,40,.06) 30%, transparent);
}
.footer-grid{
  display:grid; gap:28px; grid-template-columns:2fr 1.2fr 1fr;
}
.footer-grid h3, .footer-grid h4{ margin:0 0 6px; }
.footer-nav{ list-style:none; padding:0; margin:0; }
.footer-nav li+li{ margin-top:6px; }
.footer-nav a{ color:var(--muted); text-decoration:none; }
.footer-nav a:hover{ color:var(--ink); }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* Кнопка "вверх" */
.back-to-top{
  position:fixed; right:16px; bottom:16px;
  border:0; border-radius:999px; width:44px; height:44px;
  background:var(--brand); color:#000; font-weight:700;
  box-shadow:var(--shadow); cursor:pointer;
  opacity:0; transform:translateY(10px);
  transition: opacity var(--speed), transform var(--speed);
}
.back-to-top.show{ opacity:1; transform:none; }

/* =================
   Хелперы анимации (reveal)
   ================= */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }

/* =================
   Глобальные правила для изображений
   ================= */
img{ display:block; width:100%; height:auto; max-width:350px; border-radius:14px; }

/* =================
   Защита от горизонтального оверфлоу секций
   ================= */
header, main, footer, section{ contain: paint; }
/* ===== Footer — enhanced ===== */
.site-footer{
  position:relative;
  padding:56px 0 84px;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(255,106,40,.06), transparent 60%),
    var(--bg-2);
  border-top:1px solid rgba(255,255,255,.06);
  overflow-x:clip;
}

/* типографика */
.site-footer h2, .site-footer h3, .site-footer h4{
  margin:0 0 8px;
  font-family:"Oswald",sans-serif;
}
.site-footer p{ margin:.5rem 0 0; color:var(--ink) }

/* универсальные ссылки футера (контактные/текстовые/навигация) */
.site-footer a{
  color:var(--ink);
  text-decoration:none;
  transition:color var(--speed), background var(--speed), border-color var(--speed), transform .15s ease;
}
.site-footer a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

/* сетка футера */
.footer-grid{
  display:grid; gap:28px;
  grid-template-columns:2fr 1.2fr 1fr;
  align-items:start;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* раздел «Навигация» */
.footer-nav{ list-style:none; padding:0; margin:0 }
.footer-nav li+li{ margin-top:6px }
.footer-nav a{
  display:inline-block;
  color:var(--muted);
  text-decoration:none;
  padding:6px 8px;
  border-radius:10px;
}
.footer-nav a:hover{ color:var(--ink); background:rgba(255,255,255,.06) }

/* контактные ссылки в виде «пилюль» */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"]{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; margin:.25rem 0 0;
  color:#0b0806; background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:999px; box-shadow:var(--shadow);
  text-decoration:none;
}
.site-footer a[href^="tel:"]::before,
.site-footer a[href^="mailto:"]::before{
  content:""; width:12px; height:12px; background:#0b0806; border-radius:2px;
}
.site-footer a[href^="tel:"]::before{ clip-path: polygon(0 0,100% 30%,100% 70%,0 100%); }     /* условная трубка */
.site-footer a[href^="mailto:"]::before{ clip-path: polygon(0 20%,50% 60%,100% 20%,100% 80%,0 80%); } /* конверт */

/* малые подписи и «о компании» */
.footer-about{ color:var(--muted) }

/* декоративная линия над копирайтом (если есть блок .footer-legal) */
.footer-legal{
  margin-top:20px; padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.12);
  color:var(--muted); font-size:.92rem;
}

/* безопасное отсечение эффектов внутри футера */
.site-footer, .footer-grid, .footer-nav, .footer-legal{ contain:paint }
/* ===== Buttons (global) ===== */
.btn,
.btn:link,
.btn:visited{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800; letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  color:var(--ink);
  transition:
    transform .15s ease,
    box-shadow var(--speed),
    background var(--speed),
    border-color var(--speed),
    color var(--speed);
  will-change: transform;
  user-select:none;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,209,102,.35), 0 10px 24px rgba(0,0,0,.35);
}

/* Primary — градиент в фирменных цветах */
.btn--primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b0806;                 /* читаемый текст на тёплом градиенте */
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.btn--primary:hover{ filter:brightness(1.05); }

/* Ghost — прозрачная с тонкой рамкой */
.btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.22);
  color:var(--ink);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.35);
}

/* Состояния */
.btn[disabled],
.btn.is-disabled{ opacity:.55; pointer-events:none; }

/* размеры по желанию */
.btn--sm{ padding:8px 10px; border-radius:10px; font-size:.95rem; }
.btn--lg{ padding:12px 16px; border-radius:14px; font-size:1.05rem; }