/*
Theme Name: Мой домашний питомец
Template: twentytwentyfive
Description: Дочерняя тема — тёплая, доверительная палитра для блога о здоровье и уходе за питомцами.
Version: 1.0.0
Text Domain: domapitomec-child
*/

@import url('./assets/fonts.css');

/* ---------- локальные CSS-токены, синхронизированы с theme.json ---------- */
:root{
	--dapi-surface: #FFFFFF;
	--dapi-surface-2: #F1E9DC;
	--dapi-line: #E4D9C7;
	--dapi-line-2: #D6C7AE;
	--dapi-accent: #C17B2E;
	--dapi-accent-text: #8F5A1E;
	--dapi-accent-soft: #F5E3C9;
	--dapi-health: #4F6B4A;
	--dapi-health-soft: #E7EEE1;
	--dapi-shadow: 0 1px 2px rgba(42,33,24,.06), 0 12px 28px -18px rgba(42,33,24,.28);
}

/* ---------- шапка ---------- */
.site-header-group,
header.wp-block-template-part{
	background: var(--dapi-surface);
	border-bottom: 1px solid var(--dapi-line);
}
.wp-block-site-title a{
	text-decoration: none;
}

/* ---------- навигация: акцент активного/hover пункта ---------- */
.wp-block-navigation-item > .wp-block-navigation-item__content:hover{
	color: var(--dapi-accent-text);
}
.wp-block-navigation__responsive-container.is-menu-open{
	background: var(--dapi-surface) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
	width: 100%;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
	font-size: 17px !important;
	padding: 14px 20px !important;
	display: block;
}

/* ---------- герой на главной ---------- */
.dapi-hero{
	background: var(--dapi-surface-2);
	border-radius: 14px;
	padding: clamp(28px, 5vw, 48px);
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(20px, 4vw, 36px);
	align-items: center;
}
.dapi-hero .dapi-eyebrow{
	color: var(--dapi-accent-text);
}
.dapi-hero h2{
	margin: 10px 0 0;
	font-size: clamp(22px, 3.4vw, 32px);
	line-height: 1.18;
}
.dapi-hero p{
	margin-top: 12px;
	color: var(--wp--preset--color--accent-4, #5A4B3B);
	max-width: 48ch;
}
.dapi-hero-art{
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	border: 1px solid var(--dapi-line);
	background:
		radial-gradient(circle at 28% 30%, var(--dapi-accent-soft), transparent 60%),
		linear-gradient(135deg, var(--dapi-health-soft), var(--dapi-surface));
	position: relative;
	overflow: hidden;
}
.dapi-hero-art::after{
	content: "🐾";
	position: absolute;
	right: 18px;
	bottom: 6px;
	font-size: clamp(40px, 8vw, 64px);
	opacity: .55;
}
@media (max-width: 700px){
	.dapi-hero{ grid-template-columns: 1fr; }
	.dapi-hero-art{ order: -1; aspect-ratio: 16/9; }
}

/* ---------- eyebrow / служебные метки ---------- */
.dapi-eyebrow{
	font-family: var(--wp--preset--font-family--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #8C7A64);
}

/* ---------- пилюли рубрик ---------- */
ul.dapi-pills{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 28px 0 8px;
	padding: 0;
	list-style: none;
}
.dapi-pills li{
	margin: 0;
}
.dapi-pills a{
	font-size: 12.5px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--dapi-line-2);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background: var(--dapi-surface);
	white-space: nowrap;
}
.dapi-pills a:hover{
	border-color: var(--dapi-accent);
	color: var(--dapi-accent-text);
}
/* ---------- навигация в шапке ---------- */
.wp-block-navigation .wp-block-navigation-item__content{
	font-size: 13px;
	font-weight: 700;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg{
	color: var(--wp--preset--color--contrast);
}

/* ---------- карточки статей (архив/главная) ---------- */
.dapi-card-grid .wp-block-post-template{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 900px){
	.dapi-card-grid .wp-block-post-template{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
	.dapi-card-grid .wp-block-post-template{ grid-template-columns: 1fr; }
}
.dapi-card{
	background: var(--dapi-surface);
	border: 1px solid var(--dapi-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--dapi-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.dapi-card .wp-block-post-featured-image{
	margin: 0;
}
.dapi-card .wp-block-post-featured-image img{
	aspect-ratio: 16/10;
	object-fit: cover;
	display: block;
}
.dapi-card-body{
	padding: 15px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.dapi-card .wp-block-post-terms{
	font-family: var(--wp--preset--font-family--font-body);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--dapi-accent-text);
}
.dapi-card .wp-block-post-terms a{
	color: inherit;
	text-decoration: none;
}
.dapi-card .wp-block-post-title{
	font-size: 15.5px;
	line-height: 1.35;
	margin: 0;
}
.dapi-card .wp-block-post-title a{
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.dapi-card .wp-block-post-date{
	margin-top: auto;
	font-size: 11.5px;
	color: var(--wp--preset--color--accent-4, #8C7A64);
}

/* ---------- статья: шапка ---------- */
.dapi-article-head{
	max-width: 720px;
	margin: 0 auto;
}

/* ---------- статья: картинки в теле текста ---------- */
/* <img> по умолчанию inline — внутри <p> выравнивается как обычный текст
   (по левому краю), а не растягивается на ширину колонки. Делаем блочным
   на всю ширину текста статьи, с той же шириной, что и сам текст. */
.wp-block-post-content img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 32px auto;
}
.wp-block-post-content p:has(> img:only-child){
	margin: 0;
}
.dapi-breadcrumb{
	font-size: 12px;
	color: var(--wp--preset--color--accent-4, #8C7A64);
}
.dapi-breadcrumb a{
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--dapi-line-2);
}
.dapi-byline{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--wp--preset--color--accent-4, #5A4B3B);
}
.dapi-byline-avatar{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--dapi-health-soft);
	border: 1px solid var(--dapi-line);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.dapi-byline b{
	color: var(--wp--preset--color--contrast);
}
.dapi-faq-badge{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	background: var(--dapi-health-soft);
	color: var(--dapi-health);
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 13px;
	border-radius: 999px;
}

/* ---------- контент статьи: перелинковка/читайте также ---------- */
.dapi-read-also{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dapi-read-also li{
	border-left: 2px solid var(--dapi-accent);
	padding-left: 12px;
}
.dapi-read-also a{
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.dapi-read-also a:hover{
	color: var(--dapi-accent-text);
}

/* ---------- таблица содержания (Table of Contents Plus) ---------- */
#toc_container,
.toc_container{
	background: var(--dapi-surface-2) !important;
	border: 1px solid var(--dapi-line) !important;
	border-radius: 10px !important;
}
.toc_title{
	font-family: var(--wp--preset--font-family--font-heading) !important;
}

/* ---------- фокус-стейт для доступности ---------- */
a:focus-visible,
button:focus-visible{
	outline: 2px solid var(--dapi-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}