/* ============================================================
   Адвокат Ивайло Тончовски - Design System (прототип)
   Цветове и шрифтове по бизнес план v2.0 / site-decisions-v1
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-400-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-cyrillic-500-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-500-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #1B3A5F;
  --navy-700: #16314f;
  --navy-900: #0f2238;
  --gold: #B89146;        /* декоративно: рамки, лого-акценти, цифри */
  --gold-ink: #7A5E1F;    /* бронз за ТЕКСТ/бутони върху светло - AA: 5,32:1 върху камък, 6,09:1 под бяло */
  --gold-soft: #cfa962;   /* злато върху тъмно (navy) - 7,28:1 върху --navy-900 */
  --gold-btn: #ae8942;        /* основен бутон - работи и на бяло (3,25:1), и на navy (3,55:1) */
  --gold-btn-strong: #b89146; /* hover: 5,49:1 за --navy-900 текст */
  --bg: #FFFFFF;
  --stone: #F4EFE6;       /* топла основа на hero секциите - разграничаване от тъмносиния първи екран */
  --ivory: #F4EFE6;       /* светъл фон на телефонния CTA в header */
  --ivory-2: #eceae4;     /* hover фон на телефонния CTA */
  --surface: #F5F5F2;
  --surface-2: #eceae4;
  --text: #16314F;
  --text-muted: #4C5768;  /* 6,39:1 върху камък */
  --line: #e3e1da;        /* ДЕКОРАТИВНИ рамки на карти и панели - не подлежи на 1.4.11 */
  --line-field: #8f8f8f;  /* ИНТЕРАКТИВНИ граници на полета - WCAG 1.4.11, 3,23:1 върху бяло */
  --white: #FFFFFF;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --maxw: 1140px;
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(27,58,95,.08);
  --shadow: 0 8px 30px rgba(27,58,95,.10);
  --transition: .2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Лепкавият header закрива целта при прескачане с клавиатура или котва.
   Отстоянието го компенсира. WCAG 2.4.11, ново в 2.2. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Единни lining цифри в заглавията и основния текст. Правилото се наследява
     и покрива бъдещото съдържание; за Inter няма видима промяна. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-ink); }
ul { margin: 0; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: .2px;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.45rem; }
/* Номерираните раздели в правните страници са `h2` заради йерархията след `h1`,
   но запазват предишния си размер, за да не се променя одобреният вид. */
.legal-doc h2 { font-size: 1.45rem; }
.legal-doc code {
  background: var(--surface-2); border-radius: 3px; padding: .08em .3em;
  font-size: .92em; overflow-wrap: anywhere;
}
.document-meta {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); color: var(--text-muted); font-size: .9rem;
  margin-bottom: 32px; padding: 16px 18px;
}
p { margin: 0 0 1rem; }
.lead { font-size: 1.2rem; color: var(--text-muted); }
.muted { color: var(--text-muted); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--surface { background: var(--surface); }
.section--navy { background: var(--navy); color: #dce4ee; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-action { margin-top: 36px; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 14px;
}
.section--navy .eyebrow { color: var(--gold-soft); }
.grid { display: grid; gap: 28px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.practice-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.practice-grid > * { grid-column: span 2; }
.practice-grid > :nth-last-child(2) { grid-column: 2 / span 2; }
.practice-grid > :last-child { grid-column: 4 / span 2; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem;
  padding: 14px 28px; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; transition: all var(--transition); text-align: center;
}
/* Едно злато за основния бутон, независимо от фона под него. Тесен, но реален
   прозорец: `--gold-btn` дава 3,25:1 върху бяло и 3,55:1 върху navy, тоест
   минава изискването за контур на управляващ елемент и на двете места, а
   тъмносиният текст върху него е 4,94:1. Затова текстът тук е тъмен, не бял -
   бял върху това злато би паднал до 3,25:1. */
.btn--primary { background: var(--gold-btn); color: var(--navy-900); border-color: var(--gold-btn); }
.btn--primary:hover { background: var(--gold-btn-strong); border-color: var(--gold-btn-strong); color: var(--navy-900); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
/* Основният бутон в тъмната лента е същият като навсякъде другаде - разликата
   между двете златни нюанса се набиваше на очи, когато и двата бутона се
   виждат на един екран. */
.btn--light { background: var(--gold-btn); color: var(--navy-900); border-color: var(--gold-btn); }
.btn--light:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-900); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .58; }
.btn-row--center { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { max-width: 1320px; }
.header-inner { display: flex; align-items: center; justify-content: flex-start; gap: 32px; height: 78px; }
.logo { color: var(--navy); display: flex; align-items: center; flex: 0 0 auto; }
.site-header .logo { width: 220px; }
.logo::before {
  content: "";
  display: block;
  width: 220px;
  height: 65px;
  background: url("/assets/img/logo-tonchovski-final-navy.svg") center / contain no-repeat;
}
.logo-text { display: none; }
.nav { display: flex; align-items: center; gap: clamp(20px, 1.8vw, 30px); margin-left: auto; }
.nav a { font-weight: 500; font-size: .97rem; color: var(--navy); position: relative; white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold); transition: width var(--transition);
}
.nav a:hover::after, .nav a.active::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a.active, .nav a[aria-current="page"] { color: var(--gold-ink); }
.header-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-phone {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 44px; padding: 5px 8px;
  color: var(--navy); font-size: .91rem; font-weight: 600; white-space: nowrap;
  border-left: 2px solid var(--gold); background: var(--ivory);
  transition: color var(--transition), background-color var(--transition);
}
.header-phone:hover { color: var(--gold-ink); background: var(--ivory-2); }
.header-phone-label {
  display: inline; order: -1; color: var(--gold-ink); font-size: .64rem;
  font-weight: 700; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase;
}
.header-phone-number { line-height: 1.2; }
.nav-phone, .nav-booking { display: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--navy); margin: 5px 0; transition: var(--transition); }

/* dropdown */
.has-dropdown {
  position: relative;
  --dropdown-gap: 14px;
  --dropdown-shift: 8px;
  --dropdown-bridge-width: 280px;
}
.dropdown {
  position: absolute; top: calc(100% + var(--dropdown-gap)); left: 50%;
  transform: translateX(-50%) translateY(var(--dropdown-shift));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px; min-width: 240px;
  /* `visibility` must change immediately: while it is transitioning, a quick
     keyboard Tab treats the submenu links as hidden and skips all of them. */
  opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition); z-index: 2;
}
/* Прозрачният мост покрива както отстоянието от 14px, така и началното
   отместване от 8px на анимацията. Един допълнителен пиксел пази от subpixel
   прекъсване. Зоната приема pointer събития само след реален hover. */
.has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: max(100%, var(--dropdown-bridge-width));
  height: calc(var(--dropdown-gap) + var(--dropdown-shift) + 1px);
  transform: translateX(-50%); background: transparent; pointer-events: none; z-index: 1;
}
.has-dropdown:hover::after { pointer-events: auto; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: 9px 14px; border-radius: 4px; font-size: .92rem; }
.dropdown a::after { display: none; }
.dropdown a:hover { background: var(--surface); color: var(--gold-ink); }

/* ---------- Hero ---------- */
.hero {
  background: var(--stone);
  color: var(--text-muted); position: relative; overflow: hidden;
}
/* hero: разделено оформление (текст + изображение) */
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; padding: 84px 24px; position: relative; z-index: 2; }
.hero-text { max-width: 600px; }
.hero-media { position: relative; }
.hero-media::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 140px; height: 140px; background: var(--gold); opacity: .32; border-radius: 10px; z-index: 0; }
.hero-picture { position: relative; z-index: 1; display: block; }
.hero-photo { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; display: block; }
.hero .eyebrow { color: var(--gold-ink); }
.hero h1 { color: var(--navy-700); margin-bottom: 22px; }
.hero p { font-size: 1.22rem; color: var(--text-muted); margin-bottom: 34px; max-width: 620px; }
.hero .btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-trust { margin-top: 44px; display: flex; gap: 30px; flex-wrap: wrap; font-size: .9rem; color: var(--text-muted); }
.hero-trust span { display: flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--gold-ink); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; transition: all var(--transition); height: 100%;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: #d8d4ca; }
.card .icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; margin-bottom: 20px; color: var(--gold);
}
.card .icon svg { width: 26px; height: 26px; }
.card .icon { color: var(--gold-ink); }
/* Заглавието в карта е `h3` там, където има родителски `h2` в секцията, и `h2`
   на „Услуги“, където такъв няма. Нивото зависи от контекста, размерът - не. */
.card h3, .card h2 { margin-bottom: 10px; font-size: 1.45rem; }
.card p { color: var(--text-muted); font-size: .98rem; margin-bottom: 16px; }
.card .arrow { font-weight: 600; color: var(--gold-ink); font-size: .92rem; }

/* ---------- How we work (steps) ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 0; }
.step .num {
  font-family: var(--font-serif); font-size: 2.6rem; color: var(--gold-ink);
  line-height: 1; display: block; margin-bottom: 14px; font-weight: 600;
}
.step h3 { font-size: 1.25rem; }
.step p { color: var(--text-muted); font-size: .96rem; }

/* ---------- Feature / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.profile-registry { margin: -4px 0 24px; }
.registry-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-sans); font-size: .88rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
  border-bottom: 1px solid rgba(139,104,40,.38);
}
.registry-link:hover { color: var(--navy); border-bottom-color: currentColor; }
/* Заглавието на всяка точка е в serif като останалите заглавия на страницата.
   Докато беше в същия sans като описанието, между двете нямаше типографска
   разлика и списъкът изглеждаше незавършен до съседния панел. */
.feature-list { list-style: none; margin-top: 26px; }
.feature-list li { display: flex; gap: 16px; margin-bottom: 26px; }
.feature-list li:last-child { margin-bottom: 0; }
.feature-list svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--gold); margin-top: 6px; }
.feature-list strong {
  display: block; margin-bottom: 4px;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.16rem;
  letter-spacing: .2px; color: var(--navy);
}
.feature-list span { display: block; color: var(--text-muted); font-size: .95rem; line-height: 1.7; }

/* Върху тъмен фон тъмните стойности по-горе са нечетими: `strong` съвпадаше
   точно с фона, а `span` оставаше под 2:1. Списъкът се ползва и на светъл фон
   в подстраниците с услуги, затова корекцията е обхватна, а не в основата. */
.section--navy .feature-list strong { color: #fff; }
.section--navy .feature-list span { color: #dce4ee; }
.section--navy .feature-list svg { color: var(--gold-soft); }
.panel {
  background: var(--surface); border-radius: 10px; padding: 40px; border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
}
.plain-list { margin: 0; padding-left: 1.2rem; color: var(--text-muted); }
.plain-list li { margin-bottom: 8px; }
.fee-overview-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.fee-card { border-radius: var(--radius); padding: 40px; }
.fee-card--price {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 245px;
  background: var(--navy); color: #dce4ee; border-left: 4px solid var(--gold);
  box-shadow: 0 18px 42px rgba(20, 48, 78, .14);
}
/* Надзаглавието е закачено в горния ъгъл, за да не измества цената надолу.
   Ако участваше в потока, цената щеше да се центрира само в остатъка под него
   и да остава под истинския център на картата. */
.fee-card--price { position: relative; justify-content: center; }
.fee-card--price .eyebrow {
  position: absolute; top: 40px; left: 40px; right: 40px;
  margin: 0; color: var(--gold-soft);
}
.fee-price { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Формата разчита на JavaScript за CSRF защитата, затова бутонът ѝ стои
   изключен, докато той не се зареди. Без обяснение това изглежда като счупен
   сайт; блокът дава причината и работеща алтернатива. */
.form-noscript {
  margin: 0 0 22px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--surface); border-left: 4px solid var(--gold-ink);
}
.form-noscript p { margin: 0 0 8px; font-size: .94rem; }
.form-noscript p:last-child { margin-bottom: 0; }
.form-noscript a { color: var(--gold-ink); text-decoration: underline; }
.fee-price-main {
  color: #fff; font-family: var(--font-serif); font-size: clamp(3.5rem, 6vw, 5.25rem);
  font-weight: 600; line-height: .95; letter-spacing: -.035em;
}
.fee-card--work { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.fee-card--work h2 { margin: 10px 0 16px; }
.fee-card--work p { margin-bottom: 0; font-size: 1.08rem; line-height: 1.8; }
.fee-regulation {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start;
  margin-top: 28px; padding: 32px 36px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fee-regulation h3 { margin: 8px 0 0; }
.fee-regulation p:last-child { margin-bottom: 0; }
.fee-regulation a { color: var(--navy); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.fee-summary { display: grid; grid-template-columns: .75fr 1.25fr; gap: 36px; align-items: start; margin-top: 36px; }
.fee-summary h3 { margin-bottom: 0; }
.resource-grid { align-items: stretch; }
.resource-card { display: flex; flex-direction: column; }
.resource-card h3 { margin-top: 8px; }
.resource-card p { flex-grow: 1; }
.resource-card .arrow { margin-top: auto; }
.resource-source { color: var(--gold-ink); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.resource-note { margin: 32px 0 0; }
.resource-feature {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding: 42px 48px; background: var(--navy); border: 1px solid var(--navy);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 18px 42px rgba(20, 48, 78, .14); color: #fff;
}
.resource-feature:hover { color: #fff; border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 22px 46px rgba(20, 48, 78, .18); }
.resource-feature-copy { display: flex; flex-direction: column; max-width: 720px; }
.resource-feature .resource-source { color: var(--gold-soft); margin-bottom: 10px; }
.resource-feature-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.resource-feature-text { margin-top: 10px; color: #c7d3e1; }
.resource-feature-link { flex: 0 0 auto; color: #fff; font-size: .95rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); }
.principles-grid { align-items: stretch; }
.principle-card {
  display: flex; flex-direction: column; min-height: 270px; padding: 32px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.principle-name { color: var(--gold-ink); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.principle-card blockquote {
  margin: 24px 0 28px; color: var(--navy); font-family: var(--font-serif);
  font-size: 1.42rem; font-weight: 600; line-height: 1.35;
}
.principle-card a { margin-top: auto; color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.principle-card a:hover { color: var(--gold-ink); }
.footer-address { color: #93a6bd; }
.section--navy .panel { background: var(--navy-700); border-color: rgba(255,255,255,.12); border-left-color: var(--gold); color:#dce4ee;}

/* ---------- Портрет / „За мен" тийзър ---------- */
.portrait-wrap { position: relative; max-width: 380px; }
.portrait-wrap::before {
  content: ""; position: absolute; left: -18px; top: -18px; width: 130px; height: 130px;
  background: var(--gold); opacity: .18; border-radius: 8px; z-index: 0;
}
.portrait-picture, .profile-picture { display: block; }
.portrait, .portrait-ph {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5;
  border-radius: 8px; box-shadow: var(--shadow); display: block;
}
.portrait { height: auto; object-fit: cover; border: 1px solid var(--line); }
.portrait-ph {
  background: var(--surface-2); border: 1px dashed #c8c4b8;
  display: grid; place-items: center; text-align: center; color: var(--text-muted); padding: 22px;
}
.profile-photo {
  width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: center;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: block;
}
/* Универсална рамка за снимки в съдържанието */
.framed { border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: default; text-align: left;
  font-family: var(--font-serif); font-size: 1.2rem; color: var(--navy); font-weight: 600;
  padding: 22px 40px 22px 0; position: relative; display: flex; justify-content: space-between; gap: 16px;
}
.faq-q::after { font-family: var(--font-sans); color: var(--gold-ink); font-size: 1.6rem; line-height: 1; transition: var(--transition); }
.faq-a { visibility: visible; }
.faq-a-inner { min-height: 0; padding: 0 0 22px; color: var(--text-muted); }
/* Без JavaScript отговорите остават видими. Само `html.js` активира accordion
   състоянието; grid редът анимира естествената височина без фиксиран лимит. */
html.js .faq-q { cursor: pointer; }
html.js .faq-q::after { content: "+"; }
html.js .faq-item.open .faq-q::after { content: "-"; }
html.js .faq-a {
  display: grid; grid-template-rows: 0fr; overflow: hidden; visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
html.js .faq-a-inner { overflow: hidden; padding-bottom: 0; transition: padding-bottom .3s ease; }
html.js .faq-item.open .faq-a {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .3s ease, visibility 0s;
}
html.js .faq-item.open .faq-a-inner { padding-bottom: 22px; }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--stone); color: var(--text-muted); padding: 64px 0; }
.page-hero h1 { color: var(--navy-700); margin-bottom: 12px; }
.page-hero p { color: var(--text-muted); max-width: 640px; margin: 0; }
.breadcrumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--gold-ink); }

/* Светлите hero секции обръщат бутона за втори избор: белият вариант е невидим
   върху камък. Тъмните `.section--navy` и `.cta-band` запазват оригинала. */
.hero .btn--ghost-light,
.page-hero .btn--ghost-light { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.hero .btn--ghost-light:hover,
.page-hero .btn--ghost-light:hover { background: var(--navy-700); color: #fff; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-field); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 1rem; color: var(--text); background: #fff; transition: border var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy-700); }
.field textarea { min-height: 140px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--text-muted); }
.consent input { width: auto; margin-top: 4px; }
.form-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-fieldset:disabled { opacity: .72; }
.form-guidance {
  background: var(--surface); border: 1px solid var(--line); color: var(--text-muted);
  padding: 14px 18px; border-radius: var(--radius); font-size: .9rem;
}
.form-trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.form-status {
  background: var(--surface); border: 1px solid var(--line); color: var(--text-muted);
  padding: 14px 18px; border-radius: var(--radius); font-size: .9rem;
}
.form-status:empty { display: none; }
.form-status--success { background: #edf7ef; border-color: #b9ddc0; color: #245c30; }
.form-status--error { background: #fff0ef; border-color: #efc0bb; color: #842d25; }

/* ---------- Contact info ---------- */
.contact-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-item > div { min-width: 0; }
.contact-item svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--gold); margin-top: 3px; }
.contact-item strong { display: block; color: var(--navy); }
.contact-item a, .contact-item span { color: var(--text-muted); overflow-wrap: anywhere; }
.map-placeholder {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 24px; text-align: center;
}

/* Премахнати на 06.08.2026 г.: `.tag-todo`, `.price-table`, `.hero-ph` и блокът
   `.post*` от изоставения статичен списък със статии.
   `.post` не беше просто неизползван - WordPress темата извежда `post_class()`
   статичен списък със статии.
   `.post` не беше просто неизползван - WordPress темата извежда `post_class()`
   върху всяка статия и страница, поради което тези правила се прилагаха върху
   живия блог. Темата се защитаваше от тях с изричен workaround в собствения си
   `style.css`. Източникът на конфликта е отстранен тук; защитата в темата се
   запазва, за да няма промяна в поведението при разминаване на версиите. */

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); color:#fff; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#c3d0e0; max-width: 560px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #aebfd2; padding: 64px 0 0; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.site-footer .logo { width: 240px; color: #fff; margin-bottom: 18px; }
.site-footer .logo::before {
  width: 240px;
  height: 71px;
  background-image: url("/assets/img/logo-tonchovski-final-white.svg");
}
/* Заглавията във футъра са `h2`, а не `h4`: като `h4` след `h2` в основното
   съдържание те създаваха прескачане на ниво на всяка страница. Визуалният
   вид е непроменен - размерът се задава тук, не от нивото на тага. */
.site-footer h2 { color: #fff; font-family: var(--font-sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: #aebfd2; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-about p { color: #93a6bd; font-size: .9rem; }
.footer-about .footer-registry { margin-top: 2px; color: #aebfd2; border-bottom-color: rgba(174,191,210,.38); }
.footer-about .footer-registry:hover { color: var(--gold-soft); }
.footer-about .footer-linkedin { margin-top: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .84rem; color: #7f93ac; }
.footer-bottom a { color: #7f93ac; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: 120px 0; }
.error-page .code { font-family: var(--font-serif); font-size: 7rem; color: var(--gold-ink); line-height: 1; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Достъпност (a11y) ---------- */
/* Видим фокус за навигация с клавиатура */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Върху действително тъмни фонове - по-светъл фокус пръстен */
.section--navy :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible {
  outline-color: var(--gold-soft);
}
/* Падащото меню да се отваря и при фокус с клавиатура */
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Escape връща фокуса към родителската връзка, без `:focus-within` да отвори
   подменюто повторно. Класът се премахва при следваща навигация или hover. */
.has-dropdown.dropdown-dismissed .dropdown {
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(var(--dropdown-shift));
}
/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* `<main>` получава `tabindex="-1"`, за да може да приеме фокуса при
   прескачане - иначе връзката само превърта, а следващият Tab продължава от
   нея, вместо от съдържанието.
   Контурът е задължителен: на началната страница вече сме най-горе, няма
   превъртане и без него прескачането изглежда като че не се е случило нищо.
   `:focus-visible` го показва само при клавиатура - при щракване с мишка върху
   съдържанието фокусът също попада тук, но там пръстен не е желан. */
main[tabindex="-1"] { scroll-margin-top: 96px; }
main[tabindex="-1"]:focus { outline: none; }
/* Контур върху самия `main` е слаб сигнал - елементът е няколко екрана висок и
   се виждат само две тънки линии в краищата. Вместо това се откроява първото
   заглавие, тоест мястото, където посетителят реално е отишъл. */
main[tabindex="-1"]:focus-visible h1 {
  outline: 3px solid var(--gold-ink);
  outline-offset: 8px;
  border-radius: 2px;
}

/* Зачитане на предпочитанието за намалено движение */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* При системни high-contrast цветове растеризираният вид на SVG логото може да
   бъде потиснат. Текстовият еквивалент остава видим и разпознаваем. */
@media (forced-colors: active) {
  .logo { width: auto !important; }
  .logo::before { display: none; }
  .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .logo-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; }
  .logo-sub { margin-top: 3px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
  .error-page .code { color: CanvasText; }
}

/* Чист печатен изглед за статичните страници и споделения WordPress header. */
@media print {
  html { scroll-padding-top: 0; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .site-header { position: static; background: #fff; border-bottom: 1px solid #777; backdrop-filter: none; }
  .header-inner { height: auto; min-height: 0; padding: 10px 0; }
  .site-header .logo { width: auto; }
  .logo::before { display: none; }
  .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .logo-name { font-family: var(--font-serif); font-size: 16pt; font-weight: 700; }
  .logo-sub { font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; }
  .nav, .header-cta, .skip-link, .cta-band { display: none !important; }
  .page-hero, .section { padding: 24px 0; background: #fff; color: #000; }
  .page-hero h1, .page-hero p, .breadcrumbs, .breadcrumbs a { color: #000; }
  .site-footer { padding-top: 18px; background: #fff; color: #000; border-top: 1px solid #777; }
  .footer-grid { display: none; }
  .footer-bottom { padding: 12px 0 0; color: #000; border-top: 0; }
  .footer-bottom a { color: #000; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .header-inner { gap: 32px; }
  .header-cta .btn { display: none; }
  .nav { gap: clamp(16px, 2vw, 24px); }
}
@media (max-width: 1000px) {
  .header-cta { margin-left: auto; gap: 10px; }
  .header-phone {
    flex-direction: row; align-items: center; min-height: 40px; padding: 8px 12px; font-size: .82rem;
    border: 1px solid rgba(184,145,70,.55); border-radius: 5px;
    background: transparent;
  }
  .header-phone:hover { border-color: var(--gold); }
  .header-phone-number { display: none; }
  .header-phone-label { display: inline; order: initial; font-size: inherit; letter-spacing: normal; text-transform: none; }
  html.js .nav-toggle { display: block; }
  /* Затвореното меню се изнасяше само с `transform`, тоест връзките оставаха в
     реда на табулация и предхождаха бутона „Меню“ в DOM. Клавиатурен посетител
     попадаше в невидими връзки. `visibility` ги изважда, но се сменя
     незабавно, за да може клавиатурният фокус да влезе в току-що отвореното меню.
     WCAG 2.4.3 и 2.4.7. */
  html.js .nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 16px 24px 24px; gap: 4px;
    margin-left: 0; transform: translateY(-130%); box-shadow: var(--shadow);
    visibility: hidden; transition: transform .3s ease;
    max-height: calc(100vh - 78px); overflow-y: auto; overscroll-behavior: contain;
    /* Менюто е scroll контейнер и реже всичко извън scrollport-а. Фокусният
       пръстен се рисува извън border box-а (3px контур + 3px отстояние), а
       автоматичното превъртане при Tab отчита само самата връзка. Затова
       връзка, която е точно на ръба, изглежда видима, но долната част на
       пръстена ѝ се отрязва. `scroll-padding` включва пръстена в областта,
       която превъртането държи видима: 6px за самия пръстен плюс малък запас
       срещу subpixel закръгляне. WCAG 2.4.7. */
    scroll-padding-block: 8px;
  }
  html.js .nav.open { transform: translateY(0); visibility: visible; }
  html:not(.js) .header-inner {
    height: auto; min-height: 78px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
  }
  html:not(.js) .nav {
    order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 4px; margin-left: 0; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--surface); }
  .nav .nav-phone,
  .nav .nav-booking {
    display: flex; justify-content: center; padding: 12px 16px;
    font-weight: 600; border: 1px solid var(--gold); border-radius: 5px;
  }
  .nav .nav-phone { margin-top: 12px; color: var(--navy); }
  .nav .nav-booking {
    margin-top: 4px; color: var(--navy-900); background: var(--gold-btn); border-color: var(--gold-btn);
  }
  .nav .nav-phone::after,
  .nav .nav-booking::after { display: none; }
  .has-dropdown::after { content: none; }
  /* `:focus-within` е по-специфично от `.has-dropdown .dropdown` и без него
     връщаше desktop центрирането `translateX(-50%)`. При клавиатурен обход на
     мобилното подменю то се изместваше наляво извън екрана заедно с фокусния
     контур. Затова състоянието при фокус се неутрализира изрично тук, както
     вече е направено за hover. WCAG 2.4.7. */
  .has-dropdown .dropdown, .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; padding: 0 0 8px 14px; min-width: 0;
  }
}
@media (max-width: 940px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-grid > *,
  .practice-grid > :nth-last-child(2) { grid-column: auto; }
  .practice-grid > :last-child { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fee-overview-grid, .fee-regulation { grid-template-columns: 1fr; }
  /* В едноколонния изглед картата няма свободно място, в което цената да се
     центрира, затова закаченото надзаглавие само ляга върху нея: първият
     елемент от потока започва точно на `padding-top`, тоест на същата
     координата. Тук надзаглавието се връща в потока и заема собствен ред.
     На две колони поведението остава непроменено. */
  .fee-card--price .eyebrow { position: static; margin-bottom: 14px; }
  .fee-regulation { gap: 18px; }
  .fee-summary { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 52px 24px 60px; }
  .hero-media { max-width: 300px; margin: 0 auto; }
  .hero-media::before { width: 96px; height: 96px; right: -12px; bottom: -12px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-grid > *,
  .practice-grid > :nth-last-child(2),
  .practice-grid > :last-child { grid-column: auto; width: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .resource-feature { align-items: flex-start; flex-direction: column; gap: 26px; padding: 34px 30px; }
  .principle-card { min-height: 0; }
}
@media (max-width: 520px) {
  .site-header .container { padding-right: 16px; padding-left: 16px; }
  .header-inner { height: 70px; gap: 12px; }
  .site-header .logo { width: 168px; }
  .logo::before { width: 168px; height: 50px; }
  .site-footer .logo { width: 220px; }
  .site-footer .logo::before { width: 220px; height: 65px; }
  .logo-name { font-size: 1.18rem; letter-spacing: .2px; }
  .logo-sub { font-size: .54rem; }
  .header-cta { gap: 6px; }
  .header-phone { min-height: 38px; padding: 7px 9px; font-size: .76rem; }
  .nav-toggle { padding: 6px; }
  .nav { inset: 70px 0 auto 0; }
  .fee-card { padding: 28px 24px; }
  .fee-card--price { min-height: 210px; }
  .fee-card--price .eyebrow { top: 28px; left: 24px; right: 24px; }
  .fee-regulation { padding: 26px 24px; }
}
@media (max-width: 360px) {
  /* Пълният контакт остава достъпен като `.nav-phone` в мобилното меню. */
  .header-phone { display: none; }
}