/*
Theme Name:  Терморазрыв.рф
Theme URI:   https://xn--e1afmapc.xn--p1ai/
Description: Кастомная тема для информационного сайта о дверях с терморазрывом. Включает доску объявлений, каталог монтажников, систему отзывов и личный кабинет.
Version:     1.0
Author:      Терморазрыв.рф
Author URI:  https://xn--e1afmapc.xn--p1ai/
Text Domain: termorazryv
License:     GPL v2 or later
*/

/* ─── Design Tokens ─────────────────────────── */
:root {
  --ink:   #0d0d0d;
  --paper: #f5f0e8;
  --warm:  #e8dcc8;
  --steel: #2a3540;
  --rust:  #c44a1a;
  --ice:   #d4eaf5;
  --frost: #6aadcc;
  --gold:  #c9963a;
  --green: #2d8a52;
  --mid:   #6b7a86;
  --gap:   clamp(1.2rem, 4vw, 3rem);
  --r:     12px;
}

/* ─── Reset & Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Golos Text', sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); }
a:hover { color: #a83c14; }

/* ─── Progress Bar ─────────────────────────── */
#pb { position: fixed; top: 0; left: 0; height: 3px; background: var(--rust); z-index: 9999; width: 0; transition: width .1s; pointer-events: none; }

/* ─── Header / Nav ─────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--steel);
  padding: .7rem var(--gap);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-logo {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900; font-size: 1rem;
  color: var(--ice); text-decoration: none; white-space: nowrap;
  letter-spacing: -.02em;
}
.site-logo span { color: var(--rust); }
.site-nav { display: flex; align-items: center; gap: 1.4rem; list-style: none; flex-wrap: wrap; }
.site-nav a { color: #aec1cd; text-decoration: none; font-size: .83rem; font-weight: 500; transition: color .2s; white-space: nowrap; }
.site-nav a:hover { color: var(--ice); }
.nav-cta { background: var(--rust); color: white !important; padding: .32rem .85rem; border-radius: 2rem; font-weight: 700 !important; transition: background .2s !important; }
.nav-cta:hover { background: #a83c14 !important; }
.nav-auth a { color: var(--frost) !important; font-weight: 600 !important; }

/* Mobile menu */
.mob-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .3rem; background: none; border: none; }
.mob-btn span { display: block; width: 22px; height: 2px; background: var(--ice); border-radius: 1px; }
.mob-nav { display: none; position: fixed; inset: 0; background: var(--steel); z-index: 500; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; }
.mob-nav.open { display: flex; }
.mob-nav a { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--ice); text-decoration: none; }
.mob-nav a:hover { color: var(--frost); }
.mob-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: white; cursor: pointer; background: none; border: none; }
@media(max-width: 900px) { .site-nav { display: none; } .mob-btn { display: flex; } }

/* ─── Alert Bar ─────────────────────────── */
.alert-bar {
  background: linear-gradient(135deg, #1a2a35, #2a3540);
  color: white; padding: .6rem var(--gap);
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; font-size: .8rem; flex-wrap: wrap; text-align: center;
}
.alert-bar strong { color: var(--frost); }
.alert-bar a { color: var(--gold); text-decoration: none; font-weight: 600; }

/* ─── Hero ─────────────────────────── */
.site-hero {
  background: var(--steel); color: white;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gap) clamp(2rem, 5vw, 4rem);
  position: relative; overflow: hidden;
}
.site-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(106,173,204,.15) 0%, transparent 70%),
              radial-gradient(ellipse 40% 60% at 10% 80%, rgba(196,74,26,.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-badge { display: inline-block; background: rgba(106,173,204,.15); border: 1px solid rgba(106,173,204,.35); color: var(--frost); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 2rem; margin-bottom: 1.2rem; }
.hero-title { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3.8rem); line-height: 1.05; letter-spacing: -.03em; max-width: 780px; margin-bottom: 1rem; }
.hero-title em { font-style: normal; color: var(--frost); display: block; font-size: .62em; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .35rem; }
.hero-sub { font-size: clamp(.95rem, 1.6vw, 1.15rem); color: #aec1cd; max-width: 560px; line-height: 1.65; margin-bottom: 2rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.btn-p { background: var(--rust); color: white; padding: .7rem 1.4rem; border-radius: 2rem; text-decoration: none; font-weight: 700; font-size: .87rem; transition: background .2s; display: inline-block; }
.btn-p:hover { background: #a83c14; color: white; }
.btn-s { background: rgba(255,255,255,.08); color: white; padding: .7rem 1.4rem; border-radius: 2rem; text-decoration: none; font-weight: 600; font-size: .87rem; border: 1.5px solid rgba(255,255,255,.2); display: inline-block; transition: all .2s; }
.btn-s:hover { background: rgba(255,255,255,.14); color: white; }
.hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.stat-n { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 2.5vw, 2rem); color: white; letter-spacing: -.03em; display: block; }
.stat-n span { color: var(--frost); }
.stat-l { font-size: .75rem; color: #7a9bac; }

/* ─── Sections Navigation Bar ─────────────────────────── */
.sections-bar { background: var(--warm); border-bottom: 2px solid var(--ink); padding: .75rem var(--gap); display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; }
.sections-bar::-webkit-scrollbar { display: none; }
.sections-bar a { white-space: nowrap; font-size: .79rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: .32rem .85rem; border-radius: 2rem; border: 1.5px solid var(--ink); transition: all .18s; flex-shrink: 0; }
.sections-bar a:hover, .sections-bar a.active { background: var(--ink); color: var(--paper); }

/* ─── Content Layout ─────────────────────────── */
.site-main { min-height: 60vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap); }
section, .page-section { padding: clamp(2rem, 5vw, 4.5rem) 0; }

/* ─── Page Headings ─────────────────────────── */
.page-header { margin-bottom: 2rem; }
.page-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); margin-bottom: .7rem; }
.page-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--rust); }
h1, h2, h3 { font-family: 'Unbounded', sans-serif; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; margin-bottom: .75rem; }
h2 { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 800; margin-bottom: .7rem; }
h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.lead { font-size: 1rem; color: #4a5560; line-height: 1.7; max-width: 680px; margin-bottom: 2rem; }

/* ─── Footer ─────────────────────────── */
footer { background: #080e12; color: #7a8f9a; padding: 3rem var(--gap) 2rem; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media(max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 1rem; color: white; margin-bottom: .6rem; }
.footer-brand span { color: var(--rust); }
.footer-desc { font-size: .82rem; line-height: 1.65; }
.footer-col h4 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: white; margin-bottom: .85rem; }
.footer-col a { display: block; color: #7a8f9a; text-decoration: none; font-size: .82rem; margin-bottom: .45rem; transition: color .15s; }
.footer-col a:hover { color: var(--frost); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .78rem; color: #4a5f6a; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

/* ─── WordPress defaults ─────────────────────────── */
.wp-block-image, .aligncenter { text-align: center; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }