/*
Theme Name:  Аборигенні собаки
Theme URI:   https://adog.pet/
Description: Блокова тема довідника аборигенних порід собак. Вигляд теми; уся функціональність — у плагіні adog-core.
Author:      adog.pet
Version:     0.7.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adog
Tags:        blog, one-column, block-patterns, full-site-editing
*/

/*
Тут лежить тільки те, чого theme.json не вміє. Усе інше — кольори, розміри,
відступи, типографіка — описане там і звідти ж потрапляє в редактор. Правило просте:
якщо щось можна задати в theme.json, у цьому файлі його бути не повинно, інакше
редактор показуватиме людині не те, що побачить відвідувач.

Палітра народилася з макета в oklch; у theme.json вона в hex, бо на hex коректно
працюють зразки кольору в редакторі. Вихідні значення збережені тут, щоб не загубились:

  base        oklch(0.98 0.011 94)    #fbf8f0
  surface     oklch(0.955 0.014 92)   #f3f0e6
  contrast    oklch(0.21 0.04 264)    #0f182b
  ink         oklch(0.23 0.045 264)   #121c32
  on-ink      oklch(0.96 0.008 250)   #eef2f7
  muted       oklch(0.5 0.03 258)     #596475
  border      oklch(0.88 0.02 90)     #dcd7c9
  accent      oklch(0.62 0.16 34)     #d55b40
  accent-deep oklch(0.52 0.13 38)     #a5492b
  amber       oklch(0.78 0.13 76)     #e7ab4d
*/

/* Фокус видно завжди й однаково — і на світлому тлі, і на темній «пігулці» шапки.
   Обведення робимо на :focus-visible, щоб воно не з'являлось від кліку мишею. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--contrast);
}

/* --- Шапка ---------------------------------------------------------------

   Розміри тут не з голови: це значення з макета, переведені один в один.
   theme.json їх не описує — липкість, мінімальна висота, тінь і медіазапити
   лежать поза тим, що він уміє.

   Липкість — на обгортці частини (<header class="wp-block-template-part adog-header">),
   а не на групі всередині. Sticky тримається лише поки видно його контейнер, а
   контейнер тут заввишки рівно з шапку: на вкладеній групі вона відклеювалась би
   одразу, щойно почалося б прокручування.

   Кореневі бічні відступи сторінки шапки не стосуються: ядро вішає їх класом
   .has-global-padding на обмежені контейнери, а обгортка частини такого класу не
   має й лежить прямо в .wp-site-blocks. Тому смуга й так на всю ширину вікна —
   від'ємні поля тут не потрібні, вони б лише витягли її за край із горизонтальним
   прокручуванням. Ширину тримає контейнер усередині. */
.adog-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--base);
	padding: 1rem 0 0.75rem;
}

.adog-header__inner {
	max-width: 77.5rem;
	margin: 0 auto;
	padding: 0 2.5rem;
}

/* На широких екранах шапка розтягується до 80% вікна, а не тримається контейнера
   1240px, як решта сторінки.

   Поріг 1248px, а не менший, навмисно: 80vw на вужчому екрані дало б пігулку
   вужчу за теперішню, тобто зміна погіршила б вигляд саме на ноутбуках.
   Тому ширина ніколи не менша за 1160px (те, що є зараз), обмежена 1888px згори,
   щоб на 4K пігулка не перетворилась на смугу через увесь стіл, і не більша за
   вікно мінус поля — інакше з'явився б горизонтальний прокрут. */
@media (min-width: 78em) {
	.adog-header__inner {
		width: min(max(72.5rem, 80vw), 118rem);
		max-width: calc(100vw - 5rem);
		padding: 0;
	}
}

/* «Пігулка». Тінь потрібна не для краси: без неї при прокручуванні темна смуга
   зливається з тлом сторінки, бо тло в неї того ж відтінку. */
.adog-navbar {
	min-height: 56px;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 28px;
	box-shadow: 0 6px 20px rgb(18 28 50 / 0.18);
}

.adog-brand {
	gap: 12px;
	padding-left: 4px;
	flex: none;
}

/* Знак лапи. Селектор навмисно важчий, ніж здається потрібним: theme.json фарбує
   всі посилання всередині пігулки правилом
   .wp-elements-… a:where(:not(.wp-element-button)) — а це вага (0,2,1), більша за
   просто .adog-mark. Через це лапа виходила світлою на бурштиновому колі замість
   темно-синьої, як у макеті. :hover прописаний з тієї ж причини. */
.adog-navbar a.adog-mark,
.adog-navbar a.adog-mark:hover,
.adog-navbar a.adog-mark:focus {
	color: var(--wp--preset--color--ink);
}

.adog-mark {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--amber);
	display: grid;
	place-items: center;
	flex: none;
}

.adog-mark svg {
	display: block;
}

/* Навігація всередині пігулки. Стан наведення не можна віддати в theme.json —
   там немає :hover для окремих пунктів меню. */
.adog-navbar .wp-block-navigation {
	font-size: 0.845rem;
}

.adog-navbar .wp-block-navigation__container {
	gap: 2px;
}

.adog-navbar .wp-block-navigation-item__content {
	padding: 9px 13px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.adog-navbar .wp-block-navigation-item__content:hover,
.adog-navbar .wp-block-navigation-item__content:focus-visible {
	background: #212d47;
}

/* Перемикач мови. Випадний список — на <details>, без жодного рядка JS: браузер
   сам відкриває й закриває його, і воно працює з клавіатури. Ціна — список не
   закривається кліком повз нього; для двох мов це прийнятно. */
.adog-navbar__right {
	gap: 6px;
	min-width: 0;
}

.adog-lang {
	position: relative;
	flex: none;
	margin-left: 6px;
}

.adog-lang__trigger {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid #465369;
	border-radius: 999px;
	padding: 6px 11px 6px 9px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	color: #d8dfe7;
	list-style: none;
	white-space: nowrap;
}

/* Без цього Safari лишає власний трикутник розкриття поруч із нашим. */
.adog-lang__trigger::-webkit-details-marker {
	display: none;
}

.adog-lang__trigger:hover {
	background: #212d47;
}

.adog-lang__globe {
	flex: none;
	color: var(--wp--preset--color--amber);
}

.adog-lang__caret {
	font-size: 0.5rem;
	color: #b0b8c4;
}

.adog-lang__menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 60;
	display: grid;
	gap: 2px;
	min-width: 224px;
	padding: 8px;
	border: 1px solid #e0dbcd;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 16px 38px rgb(18 28 50 / 0.2);
}

.adog-lang__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

/* Підсвітка при наведенні — тільки для рядків, на які справді можна натиснути. */
a.adog-lang__item:hover,
a.adog-lang__item:focus-visible {
	background: var(--wp--preset--color--surface);
}

.adog-lang__item.is-current {
	background: var(--wp--preset--color--surface);
}

.adog-lang__item.is-soon {
	cursor: default;
}

.adog-lang__item-code {
	width: 22px;
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	color: #7f8792;
}

.adog-lang__item.is-current .adog-lang__item-code {
	color: var(--wp--preset--color--accent-deep);
}

.adog-lang__item-name {
	flex: 1;
	font-size: 0.906rem;
	color: #616978;
}

.adog-lang__item.is-current .adog-lang__item-name {
	color: #151f32;
}

/* «Скоро» пишемо з великої в CSS, а не в тексті: у розмітці лишається звичайне
   слово, яке нормально перекладається й нормально читається екранним читачем. */
.adog-lang__soon {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7f8792;
}

.adog-lang__dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Мобільна шапка. Поріг — 600px: саме на ньому ядро згортає меню в накладку,
   і розходження між нашим медіазапитом і його дало б стан, у якому вже видно
   бургер, але ще діють десктопні розміри. */
@media (max-width: 37.4375em) {
	.adog-header {
		padding: 0.625rem 0 0.5rem;
	}

	.adog-header__inner {
		padding: 0 1rem;
	}

	.adog-navbar {
		min-height: 52px;
		border-radius: 999px;
		padding: 0 6px 0 8px;
	}

	.adog-mark {
		width: 36px;
		height: 36px;
	}

	.adog-mark svg {
		width: 20px;
		height: 20px;
	}

	.adog-navbar .wp-block-site-title {
		font-size: 0.594rem;
		letter-spacing: 0.16em;
		line-height: 1.3;
	}

	/* Бургер за макетом: теракотове коло. Ядро малює в ньому три смужки —
	   тим самим знаком, що й у макеті, тож перефарбування достатньо. */
	.adog-navbar .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
	}

	.adog-navbar .wp-block-navigation__responsive-container-open svg {
		fill: #fff7f3;
		width: 20px;
		height: 20px;
	}

	/* На мобільному пігулка мови стає ширшою й вищою: за макетом 62×44 —
	   це мінімальний розмір цілі дотику, менше просто не влучиш пальцем.
	   Стрілку прибираємо, місця на неї немає. */
	.adog-lang {
		margin-left: 0;
	}

	.adog-lang__trigger {
		min-width: 62px;
		min-height: 44px;
		justify-content: center;
		padding: 0 12px;
		letter-spacing: 0.08em;
	}

	.adog-lang__caret {
		display: none;
	}
}

/* --- Підвал --------------------------------------------------------------

   Розміри з макета. Тло й відступи — на обгортці частини, як і в шапці:
   смуга підвала тягнеться на всю ширину вікна, контейнер усередині — 1240px. */
.adog-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
	margin-top: 2.5rem;
	padding: 3.375rem 0 2.875rem;
}

.adog-footer__inner {
	max-width: 77.5rem;
	margin: 0 auto;
	padding: 0 2.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
}

/* Проміжки тут задає grid. Ядро для потоку розставляє їх полями (margin-block-start
   у сусідніх елементів), і разом із gap вийшов би подвійний відступ. */
.adog-footer__left,
.adog-footer__legal {
	display: grid;
}

.adog-footer__left > *,
.adog-footer__legal > * {
	margin: 0;
}

.adog-footer__left {
	gap: 10px;
}

.adog-footer__sign {
	font-size: 1rem;
	line-height: 1.6;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.adog-footer__paw {
	color: #fabc86;
	flex: none;
	transform: rotate(8deg);
}

.adog-footer__copy {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.719rem;
	letter-spacing: 0.1em;
	color: #fabc86;
}

.adog-footer__mail {
	margin-top: 22px;
	font-size: 0.9375rem;
}

.adog-footer__mail a {
	color: #bbc5d1;
}

.adog-footer__legal {
	gap: 12px;
	font-size: 0.906rem;
	padding-top: 4px;
}

.adog-footer__legal a {
	color: #d1d8e1;
	text-decoration: none;
}

.adog-footer__legal a:hover,
.adog-footer__legal a:focus-visible {
	color: #fabc86;
}

/* На вузькому екрані два стовпці не мають сенсу — правовий блок іде під підписом. */
@media (max-width: 47.99em) {
	.adog-footer__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 0 1rem;
	}
}

/* Службова мітка над заголовком: моно, великими, з розрядкою.
   Використовується в патернах і шаблонах. */
.adog-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Довгий текст статті читається краще, коли рядок не тягнеться на всю ширину.
   text-wrap: pretty прибирає «висячі» короткі слова в кінці абзацу. */
body {
	text-wrap: pretty;
}

/* --- Сторінка породи ------------------------------------------------------

   Значення знову з макета один в один. Асиметричні заокруглення
   (10px 10px 10px 70px у паспорта, 6px 6px 34px 6px у карток розмірів) —
   це не помилка й не прикраса: вони повторюють форму подушечки лапи. */

.adog-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.adog-crumbs a {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: none;
}

.adog-crumbs a:hover {
	text-decoration: underline;
}

/* Нахилена теракотова пігулка з регіоном і країною. Нахил невеликий і навмисний:
   це єдиний елемент на сторінці, що збиває строгу сітку.

   width: fit-content обов'язковий: ядро малює групам із розкладкою flex
   display:flex, і без цього пігулка розтягувалась би на всю колонку смугою.
   Одного inline-flex мало — його ядро перебиває власним правилом. */
.adog-breed__tag {
	display: inline-flex;
	width: fit-content;
	gap: 0;
	white-space: nowrap;
	transform: rotate(-3deg);
	background: var(--wp--preset--color--accent);
	color: #fff7f3;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 9px 16px;
	border-radius: 999px;
	margin-bottom: 26px;
}

.adog-breed__tag a {
	color: inherit;
	text-decoration: none;
}

.adog-breed__title {
	font-size: clamp(2.5rem, 5vw, 4.125rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	max-width: 24ch;

	/* Відступ над заголовком дає пігулка своїм margin-bottom, як у макеті. */
	margin-top: 0;
}

.adog-breed__alt {
	margin-top: 14px;
	font-size: 1.0625rem;
	font-style: italic;
	color: #444d5e;
}

.adog-passport {
	margin-top: 26px;
	padding: 30px 32px 26px;
	border-radius: 10px 10px 10px 70px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
}

.adog-passport__title {
	margin: 0 0 22px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fabc86;
}

.adog-passport__grid {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 14px 24px;
	font-size: 1rem;
	line-height: 1.6;
}

.adog-passport__label {
	padding-top: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: #afb8c4;
}

.adog-passport__value a {
	color: var(--wp--preset--color--amber);
}

/* На вузькому екрані дві колонки по 190px не вміщаються: мітка стає підписом
   над значенням. */
@media (max-width: 47.99em) {
	.adog-passport {
		padding: 24px 22px 22px;
		border-radius: 10px 10px 10px 48px;
	}

	.adog-passport__grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.adog-passport__label {
		padding-top: 12px;
	}
}

/* Картки зросту, ваги й забарвлення всередині секції «Як виглядають».
   Значення в них прив'язані до полів: автор пише текст просто в картці. */
.adog-measures {
	gap: 16px;
	margin-top: 26px;
}

.adog-measure {
	min-width: 200px;
	flex: 1 1 200px;
	padding: 20px 22px;
	border-radius: 6px 6px 34px 6px;
	background: var(--wp--preset--color--surface);
}

.adog-measure--wide {
	flex: 1 1 100%;
}

.adog-measure .adog-label {
	margin: 0 0 10px;
	color: var(--wp--preset--color--accent-deep);
	letter-spacing: 0.16em;
}

.adog-measure p:last-child {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Перелік особливостей породи: маркер — лапа, а не крапка. Псевдоелемент
   абсолютний навмисно: list-style-image масштабується непередбачувано,
   а flex на елементі списку розсипав би текст із <strong> усередині. */
.adog-traits {
	list-style: none;
	padding-left: 0;
}

.adog-traits li {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.adog-traits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.3rem;
	height: 1.3rem;
	background: var(--wp--preset--color--amber);
	border-radius: 50%;
}

.adog-related {
	margin-top: var(--wp--preset--spacing--60);
}

.adog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--40);
}

.adog-chip {
	padding: 11px 20px;
	border: 1px solid #d5af91;
	border-radius: 999px;
	font-size: 0.9375rem;
	color: #1e293d;
	text-decoration: none;
}

a.adog-chip:hover,
a.adog-chip:focus-visible {
	background: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
	color: #1e293d;
}

/* Порода без сторінки — теж у переліку, але не веде нікуди. */
.adog-chip--soon {
	color: var(--wp--preset--color--muted);
	border-style: dashed;
}

/* --- Сторінка породи: розкладка, галерея, зміст -------------------------- */

.adog-breed {
	padding-top: 34px;
}

.adog-breed__head {
	margin-top: 30px;
	gap: 48px;
}

/* Основний текст сторінки: 68ch — це не кругле число, а межа, після якої око
   втрачає початок наступного рядка. */
.adog-breed__body {
	margin-top: 70px;
	gap: 64px;
}

/* Саме .wp-block-post-content, а не .adog-breed__body: у другій колонці лежить
   зміст, і ширше правило фарбувало б і його підпис кольором основного тексту. */
.adog-breed__body .wp-block-post-content p,
.adog-breed__body .wp-block-post-content ul,
.adog-breed__body .wp-block-post-content ol {
	max-width: 68ch;
	color: #2a3342;
	line-height: 1.72;
}

.adog-breed__body h2 {
	font-size: 1.875rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 64px 0 24px;

	/* Шапка липка й перекриває якір: без цього відступу перехід зі змісту
	   ховає заголовок під нею. 148px — висота шапки з полями. */
	scroll-margin-top: 148px;
}

.adog-breed__body > .wp-block-post-content > *:first-child,
.adog-breed__body h2:first-child {
	margin-top: 0;
}

/* Галерея. Арка згори — форма з макета; поворот на 2° той самий, що й нахил
   плашки з регіоном, тільки в інший бік. */
.adog-gallery__pick {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.adog-gallery__stage {
	height: 380px;
	border-radius: 150px 150px 10px 10px;
	overflow: hidden;
	border: 1px solid #e0dbcd;
	background: var(--wp--preset--color--surface);
	transform: rotate(2deg);
}

.adog-gallery__shot {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Показуємо той знімок, чия радіокнопка позначена. Правило працює тільки
   вперед по сусідах — тому кнопки й стоять у розмітці перед сценою. */
.adog-gallery__pick:nth-of-type(1):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(1),
.adog-gallery__pick:nth-of-type(2):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(2),
.adog-gallery__pick:nth-of-type(3):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(3),
.adog-gallery__pick:nth-of-type(4):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(4),
.adog-gallery__pick:nth-of-type(5):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(5),
.adog-gallery__pick:nth-of-type(6):checked ~ .adog-gallery__stage .adog-gallery__shot:nth-of-type(6) {
	display: block;
}

.adog-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.adog-gallery__thumb {
	width: 54px;
	height: 54px;
	border-radius: 27px 27px 4px 4px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	display: block;
}

.adog-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.adog-gallery__pick:nth-of-type(1):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(1),
.adog-gallery__pick:nth-of-type(2):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(2),
.adog-gallery__pick:nth-of-type(3):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(3),
.adog-gallery__pick:nth-of-type(4):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(4),
.adog-gallery__pick:nth-of-type(5):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(5),
.adog-gallery__pick:nth-of-type(6):checked ~ .adog-gallery__thumbs .adog-gallery__thumb:nth-of-type(6) {
	border-color: var(--wp--preset--color--accent);
}

/* Обведення фокуса малюємо на мініатюрі, бо сама радіокнопка невидима. */
.adog-gallery__pick:focus-visible + .adog-gallery__pick ~ .adog-gallery__thumbs .adog-gallery__thumb,
.adog-gallery__pick:focus-visible ~ .adog-gallery__thumbs .adog-gallery__thumb {
	outline-offset: 2px;
}

.adog-toc {
	position: sticky;
	top: 150px;
	display: grid;
	gap: 10px;
}

.adog-toc__title {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.656rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.adog-toc__item {
	font-size: 0.906rem;
	line-height: 1.5;
	border-left: 2px solid var(--wp--preset--color--border);
	padding-left: 12px;
}

.adog-toc__item.is-first {
	border-left-color: var(--wp--preset--color--accent);
}

.adog-toc__item a {
	display: block;
	color: #444d5e;
	text-decoration: none;
}

.adog-toc__item a:hover,
.adog-toc__item.is-first a {
	color: var(--wp--preset--color--accent-deep);
}

/* Вставка-акцент усередині тексту: «що в них аборигенного?», «і ціна слави». */
.adog-aside {
	background: var(--wp--preset--color--accent);
	color: #fff7f3;
	padding: 34px 32px;
	border-radius: 10px 10px 10px 70px;
	margin-top: 34px;
	max-width: 760px;
}

.adog-aside p {
	color: inherit;
	max-width: none;
}

.adog-aside p:last-child {
	margin-bottom: 0;
}

.adog-aside__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #f7cfc0;
	margin-bottom: 18px;
}

/* Картки прикладів у розділі про культуру. Смугаста заглушка — теж із макета:
   поки ілюстрації немає, місце під неї видно, і сторінка не «зʼїжджає». */
.adog-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	margin-top: 26px;
}

.adog-card__frame {
	height: 168px;
	border-radius: 6px;
	border: 1px solid #e0dbcd;
	background: repeating-linear-gradient(135deg, #eeeade 0 7px, #e6e1d2 7px 14px);
	display: grid;
	place-items: center;
	padding: 10px;
	margin-bottom: 14px;
}

.adog-card__frame,
.adog-card__frame span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.594rem;
	letter-spacing: 0.1em;
	color: #7a6a52;
	text-align: center;
	line-height: 1.7;
}

.adog-card h3 {
	font-size: 1.1875rem;
	font-weight: 500;
	margin: 0 0 10px;
}

.adog-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Умови використання під матеріалом. */
.adog-license {
	margin-top: 90px;
	padding-top: 20px;
	border-top: 1px solid #e6e0d0;
	max-width: 76ch;
	display: grid;
	gap: 10px;
}

.adog-license__mark {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.719rem;
	letter-spacing: 0.14em;
	color: #444d5e;
}

.adog-license__terms,
.adog-license__source {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.adog-license__back {
	margin: 24px 0 0;
	font-size: 0.875rem;
}

/* На вузькому екрані зміст із бічної колонки перетворюється на звичайний
   перелік над текстом: липка колонка збоку там просто нікуди не поміщається. */
@media (max-width: 61.99em) {
	.adog-breed__body {
		margin-top: 40px;
		gap: 32px;
	}

	.adog-toc {
		position: static;
	}

	.adog-gallery__stage {
		height: 300px;
		border-radius: 120px 120px 10px 10px;
	}
}