/* ==========================================================================
   Baliimoti Design — Основи
   Типография, reset, цитати, списъци, таблици, контейнер, секции, мрежа.
   Спецификация: design/DESIGN.md (секции 3, 5, 8).
   Всички стойности идват от tokens.css — тук няма hardcoded цветове.
   ========================================================================== */

/* --- Съвместимост с темата ------------------------------------------------
   Темата g5-beyot чете собствените си променливи (Poppins). Пренасочваме само
   шрифтовете и текстовите цветове към нашия слой, за да няма „два свята“ —
   Cormorant само за едри заглавия, Manrope за всичко останало. */
:root {
	--g5-body-font: var(--bd-font-body);
	--g5-secondary-font: var(--bd-font-body);
	--g5-h1-font: var(--bd-font-display);
	--g5-h2-font: var(--bd-font-display);
	--g5-h3-font: var(--bd-font-body);
	--g5-h4-font: var(--bd-font-body);
	--g5-h5-font: var(--bd-font-body);
	--g5-h6-font: var(--bd-font-body);
	--g5-color-heading: var(--bd-text);
	--g5-color-text-main: var(--bd-text);

	/* Глобалната типография на Elementor сочи към Roboto и Roboto Slab, а те не се
	   зареждат от Google (виж baliimoti-design.php — махаме ги, защото нищо не ги ползва).
	   Пренасочваме ги към нашите шрифтове, за да не пропадне нещо, ако някой ден
	   някой шаблон ги извика. */
	--e-global-typography-primary-font-family: var(--bd-font-display);
	--e-global-typography-secondary-font-family: var(--bd-font-body);
}

/* Тъмна секция / тъмен остров — прилага текстовата роля върху елемента.
   tokens.css дефинира променливите; тук само ги включваме като цвят. */
.bd-on-dark { color: var(--bd-text); }
.bd-on-light { color: var(--bd-text); }

/* --- Лентата със заглавие и breadcrumb -------------------------------------
   Темата подава padding-а inline (опция `page_title_padding`, 120px на
   повечето страници и 72px на блога), затова се налага !important.

   Исканата височина е шрифтът на заглавието + 50%, т.е. по 25% от шрифта
   отгоре и отдолу. Padding-ът е в `em` върху самото заглавие, за да следва
   размерите му на всеки breakpoint (темата: 60/48/36/24px) и да остане
   симетричен — без да повтаряме тези стойности тук.
   Заглавието е с line-height 1, значи текстовата кутия = шрифта. */
.page-title:not(.property-single-page-title):not(.property-single-map) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.page-title .page-title-main-info h1,
.page-title .page-title-main-info h2 {
	margin-bottom: 0;
	padding: .25em 0;
}

/* Позицията на фона на банера.
   Темата го заковава на `top center` (assets/sass/_page-title.scss:55). Лентата
   обаче е висока ~90px, а снимката е 1280×430 — при `cover` това значи, че се
   вижда само ГОРНИЯТ ~20% от кадъра. За банера това е небето и върховете на
   палмите: под 68% затъмняващ слой лентата става плоска сива ивица, а
   оризовите тераси — смисълът на снимката — не се виждат изобщо.
   Центрираме фона: така в лентата попада средната част на кадъра (терасите).
   Специфичността е същата като на темата (0,2,0) и нашият файл е по-късен в
   каскадата, значи този ред печели без !important. */
.page-title .page-title-background {
	background-position: center center;
}

/* --- Основи --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Темата вече има bootstrap reset; тук само коригираме подравняването. */
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--bd-surface);
	color: var(--bd-text);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-body);
	font-weight: 400;
	line-height: var(--bd-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Заглавия (йерархията от DESIGN.md, секция 3) -------------------------
   Твърдо правило: Cormorant Garamond само ≥28px (h1, h2); под това Manrope. */

h1, h2, h3, h4, h5, h6 {
	margin-top: var(--bd-s-6);
	margin-bottom: var(--bd-s-4);
	color: var(--bd-text);
	text-wrap: balance;
}

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}

/* Display Large — само cormorant е на едър размер */
h1, h2 {
	font-family: var(--bd-font-display);
	font-size: var(--bd-fs-display);
	font-weight: 500;
	line-height: var(--bd-lh-display);
	letter-spacing: -.005em;
}

/* Section Heading — гротескът води под 28px */
h3 {
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-section);
	font-weight: 600;
	line-height: var(--bd-lh-heading);
	letter-spacing: .01em;
	text-transform: none;
}

/* Sub-heading */
h4 {
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-subhead);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

h5 {
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-body);
	font-weight: 600;
	line-height: 1.35;
}

/* Малък надпис — UPPERCASE етикет */
h6 {
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-small);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bd-text-secondary);
}

/* --- Текст ---------------------------------------------------------------- */

p {
	margin: 0 0 var(--bd-s-5);
}

p:last-child {
	margin-bottom: 0;
}

/* Водещ абзац (Body Large) */
.bd-lead {
	font-size: var(--bd-fs-lead);
	line-height: var(--bd-lh-body);
	color: var(--bd-text-secondary);
}

strong, b { font-weight: 700; }

em, i { font-style: italic; }

small {
	font-size: var(--bd-fs-small);
	color: var(--bd-text-tertiary);
}

/* --- Линкове -------------------------------------------------------------- */

a {
	color: var(--bd-link);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--bd-t-fast) var(--bd-ease);
}

a:hover {
	color: var(--bd-link-hover);
	text-decoration: underline;
}

/* Пръстен при фокус — задължителен за всеки интерактивен елемент */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
	border-radius: var(--bd-radius-sm);
}

/* --- Списъци в съдържание -------------------------------------------------
   Ограничаваме до текстовите контейнери, за да не пипаме <ul> на менютата. */

.entry-content ul,
.entry-content ol,
.bd-content ul,
.bd-content ol {
	padding-left: 1.4em;
	margin: 0 0 var(--bd-s-5);
}

.entry-content ul, .bd-content ul { list-style: disc; }
.entry-content ol, .bd-content ol { list-style: decimal; }

.entry-content li,
.bd-content li {
	margin-bottom: var(--bd-s-2);
}

.entry-content li:last-child,
.bd-content li:last-child {
	margin-bottom: 0;
}

/* --- Цитат — редакторски, не theme-овият оранжев блок ---------------------- */

blockquote,
blockquote:not(.is-large):not(.is-style-large) {
	position: static;
	margin: 0 0 var(--bd-s-6);
	padding: var(--bd-s-1) 0 var(--bd-s-1) var(--bd-s-5);
	border: 0;
	border-left: 3px solid var(--bd-accent);
	background: none;
	color: var(--bd-ink-800);
	font-family: var(--bd-font-display);
	font-size: clamp(1.75rem, 3vw, 2.25rem); /* ≥28px — cormorant е допустим */
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
}

blockquote p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: var(--bd-s-3);
	font-family: var(--bd-font-body);
	font-style: normal;
	font-size: var(--bd-fs-small);
	color: var(--bd-text-tertiary);
}

/* --- Разделител, таблица, изображения ------------------------------------- */

hr {
	margin: var(--bd-s-7) 0;
	border: 0;
	border-top: 1px solid var(--bd-border);
	clear: both;
}

table {
	width: 100%;
	margin: 0 0 var(--bd-s-5);
	border-collapse: collapse;
	border: 0;
}

th, td {
	padding: var(--bd-s-3) var(--bd-s-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bd-border-subtle);
}

thead th {
	font-weight: 700;
	color: var(--bd-text);
	border-bottom: 1px solid var(--bd-border);
}

tbody tr:nth-child(even) { background-color: var(--bd-surface-alt); }

img {
	max-width: 100%;
	height: auto;
}

figure { margin: 0 0 var(--bd-s-5); }

/* Снимка в съдържание на публикация или страница.
   Добавя се от `bd-insert-figure.php` — стои след първия абзац, за да не избутва
   въведението. Радиус 4px по DESIGN.md §4, без сянка: elevation 0 е нормалното
   състояние (§7 — „не слагай сянка върху всичко"). */
.bd-content-figure {
	margin: var(--bd-s-6) 0 var(--bd-s-7);
}

.bd-content-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bd-radius-lg);
}

figcaption {
	margin-top: var(--bd-s-2);
	font-size: var(--bd-fs-small);
	color: var(--bd-text-tertiary);
}

/* --- Контейнер ------------------------------------------------------------ */

.bd-container {
	width: 100%;
	max-width: var(--bd-container);
	margin-inline: auto;
	padding-inline: var(--bd-gutter);
}

.bd-container--narrow { max-width: var(--bd-container-narrow); }

@media (min-width: 576px) { .bd-container { padding-inline: 20px; } }
@media (min-width: 768px) { .bd-container { padding-inline: 32px; } }
@media (min-width: 1024px) { .bd-container { padding-inline: 40px; } }
@media (min-width: 1280px) { .bd-container { padding-inline: 48px; } }

/*
 * Контейнерът на темата (bootstrap-подобен `.container`) е 1140px при ≥1200px,
 * докато DESIGN.md §5 иска 1240px. При 1140 навигацията с девет български
 * етикета не се побира на един ред при 15px. Разширяваме само на големи
 * екрани, за да не се променя поведението на по-малките.
 */
@media (min-width: 1200px) {
	#primary-content > .container {
		max-width: var(--bd-container);
	}
}

/* --- Секции ---------------------------------------------------------------- */

.bd-section {
	padding-block: var(--bd-section-y);
}

.bd-section--sm {
	padding-block: var(--bd-section-y-sm);
}

.bd-section--alt {
	background-color: var(--bd-surface-alt);
}

.bd-section--dark {
	background-color: var(--bd-surface-dark);
	color: var(--bd-text-on-dark);
}

/* --- Мрежа (мобилно първо) ------------------------------------------------- */

.bd-grid {
	display: grid;
	gap: var(--bd-s-6); /* 32px */
}

.bd-grid--2,
.bd-grid--3,
.bd-grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.bd-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.bd-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.bd-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.bd-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.bd-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.bd-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Eyebrow --------------------------------------------------------------- */

.bd-eyebrow {
	display: inline-block;
	margin: 0 0 var(--bd-s-3);
	color: var(--bd-accent-dark);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-eyebrow);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bd-on-dark .bd-eyebrow { color: var(--bd-accent-light); }