/* ==========================================================================
   Baliimoti Design — Компоненти
   Бутони, карти, баджове, тагове, пагинация, breadcrumb, акордеон, section-head.
   Спецификация: design/DESIGN.md (секции 4, 6).
   Стойности: само var(--bd-*) от tokens.css. rgba() само върху бяло/черно
   (overlay) или там, където спецификацията го задава изрично.
   ========================================================================== */

/* --- Бутони --------------------------------------------------------------- */

.bd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bd-s-2);
	min-height: 44px; /* touch target */
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: var(--bd-radius); /* 3px — не pill */
	background-color: transparent;
	color: var(--bd-text);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-body-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--bd-t-base) var(--bd-ease),
		color var(--bd-t-base) var(--bd-ease),
		border-color var(--bd-t-base) var(--bd-ease),
		transform var(--bd-t-fast) var(--bd-ease),
		box-shadow var(--bd-t-base) var(--bd-ease);
}

.bd-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
}

/* Primary */
.bd-btn--primary {
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
	box-shadow: var(--bd-shadow-1);
}

.bd-btn--primary:hover {
	background-color: var(--bd-primary-dark);
	color: var(--bd-text-on-dark);
	box-shadow: var(--bd-shadow-2);
	transform: translateY(-1px);
}

.bd-btn--primary:active {
	background-color: var(--bd-primary-darker);
	transform: translateY(1px);
	box-shadow: var(--bd-shadow-1);
}

/* Secondary — контурен */
.bd-btn--secondary {
	padding: 15px 31px; /* −1px заради 1px бордюр — еднаква височина с primary */
	border-color: var(--bd-primary);
	background-color: transparent;
	color: var(--bd-primary);
}

.bd-btn--secondary:hover {
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
}

.bd-btn--secondary:active {
	background-color: var(--bd-primary-dark);
	border-color: var(--bd-primary-dark);
	color: var(--bd-text-on-dark);
}

/* Ghost — върху тъмно/снимка */
.bd-btn--ghost {
	padding: 15px 31px;
	border-color: rgba(255, 255, 255, .45);
	background-color: rgba(255, 255, 255, .08);
	color: var(--bd-text-on-dark);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.bd-btn--ghost:hover {
	border-color: rgba(255, 255, 255, .75);
	background-color: rgba(255, 255, 255, .16);
	color: var(--bd-text-on-dark);
}

/* Малък */
.bd-btn--sm {
	min-height: 44px;
	padding: 12px 24px;
	font-size: var(--bd-fs-small);
}

/* Disabled */
.bd-btn:disabled,
.bd-btn[disabled],
.bd-btn[aria-disabled="true"],
.bd-btn.is-disabled {
	background-color: var(--bd-border);
	color: var(--bd-text-muted);
	border-color: var(--bd-border);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
}

.bd-btn--block { display: flex; width: 100%; }

/* --- Презапис на бутоните на темата / Elementor / ERE ---------------------
   Темата рисува .btn (и <button>) като оранжев блок с нулев радиус
   (shortcode.less: .btn{...background:@accent_color;border-radius:0}). Тук
   повдигаме .btn, .btn-primary и .elementor-button към primary вида.
   Специфичността на темата е .btn (0,1,0) — покриваме с .btn (същата, но
   по-късна в каскадата), без нужда от !important. */
.btn,
.btn-primary,
.elementor-button,
.bt.bt-background,
.bt.bt-primary,
.bt.bt-background.bt-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bd-s-2);
	min-height: 44px;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: var(--bd-radius);
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-body-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: none;
	text-decoration: none;
	box-shadow: var(--bd-shadow-1);
	transition: background-color var(--bd-t-base) var(--bd-ease),
		transform var(--bd-t-fast) var(--bd-ease),
		box-shadow var(--bd-t-base) var(--bd-ease);
}

.btn:hover, .btn:focus,
.btn-primary:hover, .btn-primary:focus,
.elementor-button:hover, .elementor-button:focus,
.bt.bt-background:hover, .bt.bt-background:focus,
.bt.bt-primary:hover, .bt.bt-primary:focus,
.bt.bt-background.bt-primary:hover {
	background-color: var(--bd-primary-dark);
	border-color: transparent;
	color: var(--bd-text-on-dark);
	box-shadow: var(--bd-shadow-2);
	transform: translateY(-1px);
	outline: none;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.elementor-button:focus-visible,
.bt.bt-background:focus-visible,
.bt.bt-primary:focus-visible,
.bt.bt-background.bt-primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
}

/* ERE оставя .btn-block на ширина 100% — запазваме го. */
.btn.btn-block { width: 100%; }

/* ERE auth бутоните (вход / регистрация / нова парола) темата ги заключва
   с (0,3,0): .beyot-class .ere-login-wrap .btn-primary{background:accent}.
   Повтаряме селекторите, за да ги победим по каскада — без !important. */
.beyot-class .ere-login-wrap .btn-primary,
.beyot-class .ere-register-wrap .btn-primary,
.beyot-class .ere-reset-password-wrap .btn-primary {
	background-color: var(--bd-primary);
	border-color: transparent;
	color: var(--bd-text-on-dark);
}

.beyot-class .ere-login-wrap .btn-primary:hover,
.beyot-class .ere-login-wrap .btn-primary:focus,
.beyot-class .ere-register-wrap .btn-primary:hover,
.beyot-class .ere-register-wrap .btn-primary:focus,
.beyot-class .ere-reset-password-wrap .btn-primary:hover,
.beyot-class .ere-reset-password-wrap .btn-primary:focus {
	background-color: var(--bd-primary-dark);
	color: var(--bd-text-on-dark);
}

/* Иконният submit на търсачката на темата остава оранжев от правилото
   button{background:accent}. Пренасочваме само цветовете — размерът/подредбата
   остават на темата. */
.search-form button[type="submit"] {
	background-color: var(--bd-primary);
	border-color: var(--bd-primary);
	border-radius: var(--bd-radius);
	color: var(--bd-text-on-dark);
}

.search-form button[type="submit"]:hover,
.search-form button[type="submit"]:focus {
	background-color: var(--bd-primary-dark);
	border-color: var(--bd-primary-dark);
	color: var(--bd-text-on-dark);
}

/* --- Карта (общ компонент) ------------------------------------------------ */

.bd-card {
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-lg);
	background-color: var(--bd-surface-card);
	box-shadow: var(--bd-shadow-1);
	overflow: hidden;
	transition: transform var(--bd-t-slow) var(--bd-ease),
		box-shadow var(--bd-t-slow) var(--bd-ease);
}

.bd-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bd-shadow-3);
}

/* --- Бадж (статус) -------------------------------------------------------- */

.bd-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--bd-radius-sm);
	background-color: rgba(31, 74, 61, .92); /* primary @ .92 — по спецификация */
	color: var(--bd-text-on-dark);
	font-family: var(--bd-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --- Таг / филтър (правоъгълен, не pill) ---------------------------------- */

.bd-tag {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 16px;
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	background-color: var(--bd-surface-card);
	color: var(--bd-text-secondary);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bd-t-fast) var(--bd-ease),
		color var(--bd-t-fast) var(--bd-ease),
		border-color var(--bd-t-fast) var(--bd-ease);
}

.bd-tag:hover {
	border-color: var(--bd-primary);
	color: var(--bd-primary);
}

.bd-tag.is-active {
	border-color: var(--bd-primary);
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
}

/* --- Пагинация ------------------------------------------------------------- */

.bd-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-s-2);
	margin: var(--bd-s-7) 0 0;
	padding: 0;
	list-style: none;
}

.bd-pagination a,
.bd-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--bd-s-3);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	color: var(--bd-text-secondary);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--bd-t-fast) var(--bd-ease),
		border-color var(--bd-t-fast) var(--bd-ease),
		color var(--bd-t-fast) var(--bd-ease);
}

.bd-pagination a:hover {
	border-color: var(--bd-primary);
	color: var(--bd-primary);
}

.bd-pagination .is-current {
	border-color: var(--bd-primary);
	background-color: var(--bd-primary);
	color: var(--bd-text-on-dark);
}

/* --- Breadcrumb ------------------------------------------------------------ */

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

.bd-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-breadcrumb a { color: var(--bd-text-tertiary); }
.bd-breadcrumb a:hover { color: var(--bd-link-hover); }

.bd-breadcrumb li + li::before {
	margin-right: var(--bd-s-2);
	color: var(--bd-text-muted);
	content: "/";
}

.bd-breadcrumb [aria-current="page"] { color: var(--bd-text); }

/* --- Акордеон (FAQ) — само <details>/<summary>, без JS --------------------- */

.bd-accordion {
	border-top: 1px solid var(--bd-border);
}

.bd-accordion__item {
	border-bottom: 1px solid var(--bd-border);
}

.bd-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bd-s-4);
	min-height: 56px;
	padding: var(--bd-s-4) 0;
	color: var(--bd-text);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-subhead);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bd-accordion__trigger::-webkit-details-marker { display: none; }

.bd-accordion__trigger::after {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--bd-accent-dark);
	border-bottom: 2px solid var(--bd-accent-dark);
	transform: rotate(45deg);
	transition: transform var(--bd-t-base) var(--bd-ease);
	content: "";
}

.bd-accordion__item[open] .bd-accordion__trigger::after {
	transform: rotate(-135deg);
}

.bd-accordion__panel {
	padding: 0 0 var(--bd-s-5);
	color: var(--bd-text-secondary);
}

/* --- Заглавна част на секция ----------------------------------------------- */

.bd-section-head {
	max-width: var(--bd-container-narrow);
	margin: 0 0 var(--bd-s-7);
}

.bd-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.bd-section-head .bd-eyebrow { margin-bottom: var(--bd-s-3); }

.bd-section-head__title {
	margin: 0 0 var(--bd-s-4);
}

.bd-section-head__lead {
	margin: 0;
	color: var(--bd-text-secondary);
	font-size: var(--bd-fs-lead);
	line-height: var(--bd-lh-body);
}

/* --- Общности (Facebook / Viber / WhatsApp / YouTube) ---------------------
   Композицията е асиметричен двуколонен блок — текстът води отляво, линковете
   са вертикален списък отдясно. Нарочно НЕ е картова мрежа: DESIGN.md §7 иска
   всяка секция с различна композиция, а сайтът вече има три-колонни мрежи.

   Секцията е СВЕТЛА (фонът на страницата), а не тъмна: на началната преди нея
   е `--alt` (портфолиото), а след нея — тъмното CTA. Тъмна секция тук би се
   сляла с CTA-то в един дълъг тъмен блок. Така ритъмът светла → тъмна се пази.

   Редовете са бели карти (DESIGN.md §2: `#FFFFFF` само за карти и формуляри),
   а не тъмни панели — така секцията не въвежда нов цвят. */

.bd-communities__grid {
	display: grid;
	gap: var(--bd-s-7);
}

@media (min-width: 992px) {
	.bd-communities__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--bd-s-10);
		align-items: start;
	}
}

.bd-communities__intro { max-width: 44ch; }

/* Месингът върху светлия фон: тъмният вариант минава AA и за дребен текст. */
.bd-communities .bd-eyebrow {
	color: var(--bd-accent-dark);
	margin-bottom: var(--bd-s-3);
}

.bd-communities__title {
	margin: 0 0 var(--bd-s-4);
	font-family: var(--bd-font-display);
	font-size: var(--bd-fs-display);
	font-weight: 500;
	line-height: var(--bd-lh-display);
	letter-spacing: -.005em;
	color: var(--bd-text);
}

.bd-communities__lead {
	margin: 0;
	font-size: var(--bd-fs-lead);
	line-height: var(--bd-lh-body);
	color: var(--bd-text-secondary);
}

/* --- Списъкът с линкове --- */

.bd-communities__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-communities__list > li + li { margin-top: var(--bd-s-3); }

.bd-communities__item {
	display: flex;
	align-items: center;
	gap: var(--bd-s-4);
	padding: var(--bd-s-4) var(--bd-s-5);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-lg);
	background-color: var(--bd-surface-card);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--bd-shadow-1);
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.bd-communities__item > i {
	flex: 0 0 auto;
	width: 24px;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	color: var(--bd-accent-dark);
}

.bd-communities__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bd-communities__label {
	font-size: var(--bd-fs-body);
	font-weight: 600;
	color: var(--bd-text);
}

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

.bd-communities__arrow {
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	color: var(--bd-accent-dark);
	transition: transform 200ms ease;
}

/* Само линковете реагират — „скоро" е информационен ред, не е кликаем. */
a.bd-communities__item:hover {
	border-color: var(--bd-accent);
	box-shadow: var(--bd-shadow-2);
	transform: translateY(-1px);
}

a.bd-communities__item:hover .bd-communities__arrow { transform: translateX(4px); }

a.bd-communities__item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(62, 107, 112, .45);
}

/* „Скоро" — предстоящ канал (YouTube). Приглушен, за да не се конкурира с
   работещите връзки, но видим, за да знае човек, че идва. */
.bd-communities__item--soon {
	border-style: dashed;
	background-color: transparent;
	box-shadow: none;
}

.bd-communities__soon {
	margin-left: auto;
	font-size: var(--bd-fs-caption);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-text-tertiary);
}

/* --- Уважаване на reduced-motion за всички движения ------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bd-btn,
	.bd-card,
	.bd-tag,
	.bd-pagination a,
	.bd-pagination span,
	.bd-accordion__trigger::after,
	.bd-communities__item,
	.bd-communities__arrow {
		transition: none;
	}

	.bd-btn--primary:hover,
	.bd-btn--secondary:hover,
	.btn:hover,
	.elementor-button:hover,
	.bd-card:hover,
	a.bd-communities__item:hover {
		transform: none;
	}

	a.bd-communities__item:hover .bd-communities__arrow { transform: none; }
}