/* =========================================================
   ЦеСмак - дизайн кулінарного сайту поверх базових стилів.
   Дерев'яні дошки (згенерована текстура), білі картки, коралові акценти.
   ========================================================= */

:root {
	--c-main: #f57f72;
	--c-main-dark: #e0604f;
	--c-star: #f0465a;
	--c-bg: #e9d6bb;
	--card-radius: 4px;
	--grid-cols: 3;
	--panel-pad: 30px;
	--shadow: 0 1px 2px rgba(60,40,20,.12), 0 6px 18px rgba(60,40,20,.10);
	--media-radius: 0px;
	--title-fw-semi: 700;
	--p-meta-sep: "";
}

body {
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--body-font);
}

/* Дошки: шум feTurbulence дає волокна, градієнти - стики і різний тон дощок. */
body.has-wood {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.27 0 0 0 0 0.12 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='900' height='420' filter='url(%23g)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(180deg, transparent 0 137px, rgba(92,58,26,.18) 137px 138px, rgba(70,44,18,.32) 138px 140px),
		repeating-linear-gradient(180deg, rgba(255,250,240,.10) 0 140px, rgba(120,80,40,.06) 140px 280px, rgba(255,245,230,.04) 280px 420px),
		linear-gradient(90deg, rgba(255,255,255,.06), rgba(0,0,0,.04) 50%, rgba(255,255,255,.05));
	background-size: 900px 420px, auto, auto, auto;
}

h1, h2, h3, h4, h5, h6, .post-title, .archive-heading, .logo-name, .block-head .heading {
	font-family: var(--title-font);
	letter-spacing: 0;
}

/* ---------- Панелі ---------- */

.panel {
	background: #fff;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow);
	padding: var(--panel-pad);
}

.main { margin-top: 26px; margin-bottom: 40px; }

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

.csm-head {
	background: var(--c-head-bg);
	box-shadow: 0 2px 10px rgba(60,40,20,.18);
	position: relative;
	z-index: 50;
}
.csm-head > .inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: var(--head-mid-h);
}
.csm-head .offcanvas-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--c-nav); }
.csm-head .navigation { margin-left: auto; height: 100%; }
.csm-head .menu--primary > li > .menu-link,
.csm-head .menu--primary > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 14px;
	font-family: var(--title-font);
	font-size: var(--nav-text);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--c-nav);
}
.csm-head .menu--primary > li > .menu-link::before { display: none; }
.csm-head .menu--primary > li:hover > .menu-link,
.csm-head .menu--primary > li.current-menu-item > .menu-link,
.csm-head .menu--primary > li.current-menu-ancestor > .menu-link { color: var(--c-main); }
.csm-head .menu--primary .sub-menu {
	min-width: 230px;
	border-top: 3px solid var(--c-main);
	border-radius: 0 0 var(--card-radius) var(--card-radius);
	box-shadow: var(--shadow);
	max-height: 70vh;
	overflow: auto;
}
/* Fallback-меню (без Walker): прості <a> */
.csm-head .menu--primary li { position: relative; }
.csm-head .menu--primary > li > .sub-menu { position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 6px 0; opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 60; }
.csm-head .menu--primary > li:hover > .sub-menu,
.csm-head .menu--primary > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.csm-head .menu--primary .sub-menu a { display: block; padding: 9px 18px; font-size: 14px; color: var(--c-headings); }
.csm-head .menu--primary .sub-menu a:hover { color: var(--c-main); background: #fdf3f1; }

.csm-head .search-icon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 19px;
	background: var(--c-main);
	color: #fff;
	font-family: var(--title-font);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}
.csm-head .search-icon:hover { background: var(--c-main-dark); color: #fff; }
.csm-head .search-panel { background: #fff; border-top: 1px solid var(--c-separator); padding: 16px 0; }
.smart-head.is-sticky { position: sticky; top: 0; }

/* Логотип */
.csm-wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--c-headings); }
.csm-wordmark:hover { color: var(--c-headings); }
.csm-wordmark .logo-badge svg { display: block; }
.csm-wordmark .logo-name {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--c-headings);
}
.csm-wordmark .logo-tail { color: var(--c-main); font-size: .62em; font-weight: 700; margin-left: 1px; }
.csm-wordmark .logo-tagline { margin-top: 4px; font-size: 11.5px; color: var(--c-post-meta); letter-spacing: .04em; text-transform: none; font-family: var(--body-font); }
.custom-logo { max-height: calc(var(--head-mid-h) - 16px); width: auto; }

/* ---------- Хлібні крихти, заголовки ---------- */

.breadcrumbs {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 14px;
	background: rgba(255,255,255,.88);
	border-radius: var(--card-radius);
	font-size: 13px;
	color: var(--c-post-meta);
}
.breadcrumbs span:last-child { color: var(--c-headings); }

.archive-heading {
	display: inline-block;
	margin: 0 0 20px;
	padding: 10px 20px;
	background: #fff;
	border-left: 5px solid var(--c-main);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow);
	font-size: 24px;
	font-weight: 700;
	color: var(--c-headings);
	text-transform: none;
}
.archive-heading::after { display: none; }
.archive-description { margin: 0 0 22px; font-size: 15px; color: var(--c-excerpts); }
.search-head { margin-bottom: 24px; }
.search-head .archive-heading { box-shadow: none; padding: 0 0 0 14px; margin-bottom: 16px; }
.search-head .found { margin: 12px 0 0; color: var(--c-post-meta); }

.subcats { margin-bottom: 22px; }
.chip { background: #fff; border: 0; border-radius: 16px; padding: 6px 14px; box-shadow: var(--shadow); color: var(--c-headings); font-size: 14px; }
.chip small { color: var(--c-post-meta); margin-left: 4px; }
.chip:hover { background: var(--c-main); color: #fff; }

/* ---------- Плитки рубрик на головній ---------- */

.cat-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}
.cat-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 74px;
	padding: 12px 18px;
	background: #fff;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow);
	border-bottom: 3px solid var(--c-main);
	transition: transform .2s, box-shadow .2s;
}
.cat-tile .name { font-family: var(--title-font); font-size: 18px; font-weight: 700; color: var(--c-headings); }
.cat-tile .count { font-size: 13px; color: var(--c-post-meta); margin-top: 2px; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60,40,20,.18); }
.cat-tile:hover .name { color: var(--c-main); }

/* ---------- Сітка рецептів ---------- */

.recipe-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0,1fr));
	gap: var(--grid-gutter);
}
.recipe-grid.is-related { --grid-cols: 3; gap: 18px; }

.recipe-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
.recipe-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60,40,20,.2); }
.recipe-card .media { display: block; aspect-ratio: 3/2; overflow: hidden; background: #f6efe6; }
.recipe-card .media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card .content { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 14px; }
.recipe-card .post-title {
	margin: 0 0 14px;
	font-size: var(--title-size-n);
	font-weight: var(--title-fw-bold);
	line-height: 1.3;
}
.recipe-card .post-title a { color: var(--c-headings); }
.recipe-card .post-title a:hover { color: var(--c-main); }
.card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--c-separator);
}
.is-related .recipe-card .post-title { font-size: 16px; }
.is-related .recipe-card .content { padding: 12px 14px; }

.l-post .media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 3/2;
	background:
		radial-gradient(circle at 50% 50%, #fff 0 34%, transparent 35%),
		repeating-linear-gradient(45deg, #fbe3de 0 10px, #fdeeea 10px 20px);
	color: var(--c-main);
}
.small-post .media--empty { aspect-ratio: auto; }
.small-post .media--empty svg { width: 32px; height: 32px; }

/* Рубрика з виделкою */
.post-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 13px;
	color: var(--c-post-meta);
}
.post-cat a {
	font-family: var(--body-font);
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-post-meta);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.post-cat a:hover { color: var(--c-main); }
.post-cat .ic-fork { flex: 0 0 auto; color: var(--c-main); }

/* ---------- Зірки ---------- */

.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.stars svg { width: 16px; height: 16px; display: inline-block; margin-right: 1px; }
.stars-bg svg { fill: #e6ddd5; }
.stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.stars-fg svg { fill: var(--c-star); }
.csm-stars { flex: 0 0 auto; }
.csm-stars.is-mini .stars svg { width: 12px; height: 12px; }
.csm-stars.is-empty .stars-bg svg { fill: #f3d3d6; }

.csm-rate { display: inline-flex; align-items: center; gap: 10px; }
.csm-rate .rate-stars { position: relative; display: inline-block; }
.csm-rate .stars svg { width: 20px; height: 20px; }
.csm-rate.is-big .stars svg { width: 30px; height: 30px; margin-right: 3px; }
.csm-rate .rate-hit { position: absolute; inset: 0; display: flex; }
.csm-rate .rate-hit button { flex: 1; border: 0; background: transparent; padding: 0; cursor: pointer; }
.csm-rate.is-hover .stars-fg { width: var(--hover) !important; }
.csm-rate.is-done .rate-hit { display: none; }
.csm-rate .rate-val { font-size: 14px; color: var(--c-post-meta); }
.csm-rate .rate-val b { color: var(--c-headings); font-size: 16px; }
.csm-rate .rate-val em { display: block; font-style: normal; color: var(--c-main); font-size: 13px; }

.rate-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 34px 0 10px;
	padding: 20px;
	background: #fdf3f1;
	border: 1px dashed #f3b3aa;
	border-radius: var(--card-radius);
}
.rate-box .rate-ask { font-family: var(--title-font); font-weight: 700; font-size: 18px; color: var(--c-headings); }

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

.pagination-numbers { justify-content: center; gap: 6px; margin-top: 34px; }
.pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	background: #fff;
	border: 0;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow);
	font-family: var(--title-font);
	font-weight: 700;
	font-size: 15px;
	color: var(--c-headings);
}
.pagination-numbers .page-numbers.current,
.pagination-numbers a.page-numbers:hover { background: var(--c-main); color: #fff; }
.pagination-numbers .dots { background: transparent; box-shadow: none; }

/* ---------- Рецепт ---------- */

.the-post { --panel-pad: 34px; }
.the-post-header { margin-bottom: 22px; }
.the-post-header .post-title {
	margin: 0 0 14px;
	font-size: var(--single-title-size);
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}
.post-meta-single {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 12px 0;
	border-top: 1px solid var(--c-separator);
	border-bottom: 1px solid var(--c-separator);
	font-size: 13px;
	color: var(--c-post-meta);
}
.post-meta-single .meta-item::before { display: none; }
.post-meta-single .csm-rate { margin-left: auto; }
.single-featured { margin: 0 calc(var(--panel-pad) * -1) 26px; }
.single-featured img { width: 100%; border-radius: 0; }

.entry-content { font-size: var(--post-content-size); line-height: var(--post-content-lh); color: var(--c-text); }
.entry-content h2 { font-size: 25px; font-weight: 700; }
.entry-content h3 { font-size: 21px; font-weight: 700; }
.entry-content a { color: var(--c-main-dark); }
.entry-content img { border-radius: var(--card-radius); margin-left: auto; margin-right: auto; }

/* Інгредієнти */
.csm-ing-box,
.entry-content ul.csm-ing {
	background: #fffaf3;
	border: 1px solid #f0e2cf;
	border-radius: var(--card-radius);
}
.csm-ing-box { padding: 20px 24px 8px; margin-bottom: var(--post-content-gaps); }
.csm-ing-box .csm-ing-head { margin: 0 0 12px; font-size: 21px; }
.csm-ing-box ul.csm-ing { background: none; border: 0; padding: 0; }
.entry-content .csm-ing-head { color: var(--c-headings); }
.entry-content .csm-ing-head::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 9px;
	vertical-align: -4px;
	background: var(--c-main);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14l-1.2 12.1A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.9L5 7zm4-4h6l1 2H8l1-2zM3 5h18v2H3z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14l-1.2 12.1A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.9L5 7zm4-4h6l1 2H8l1-2zM3 5h18v2H3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.entry-content ul.csm-ing { list-style: none; margin-left: 0; padding: 14px 20px; columns: 2 260px; column-gap: 30px; }
.entry-content ul.csm-ing li {
	position: relative;
	padding: 6px 0 6px 30px;
	margin: 0;
	border-bottom: 1px dashed #eadbc6;
	break-inside: avoid;
	cursor: pointer;
}
.entry-content ul.csm-ing li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-main);
	border-radius: 4px;
	background: #fff;
}
.entry-content ul.csm-ing li.is-checked { color: var(--c-post-meta); text-decoration: line-through; }
.entry-content ul.csm-ing li.is-checked::before {
	background: var(--c-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Кроки */
.entry-content .csm-steps-head { color: var(--c-headings); }
.entry-content ol.csm-steps { list-style: none; margin-left: 0; counter-reset: step; }
.entry-content ol.csm-steps > li {
	position: relative;
	counter-increment: step;
	padding: 2px 0 14px 54px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--c-separator);
}
.entry-content ol.csm-steps > li:last-child { border-bottom: 0; }
.entry-content ol.csm-steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-main);
	color: #fff;
	font-family: var(--title-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 36px;
	text-align: center;
}

.the-post-tags a { background: #fdf3f1; color: var(--c-main-dark); border-radius: 14px; padding: 4px 12px; font-size: 13px; }
.the-post-tags a:hover { background: var(--c-main); color: #fff; }
.the-post .post-share { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-separator); }
.related-posts { margin: 36px 0 10px; }

/* Зміст */
.csm-toc { background: #fffaf3; border: 1px solid #f0e2cf; border-radius: var(--card-radius); }
.csm-toc a { color: var(--c-headings); text-decoration: none; }
.csm-toc a:hover { color: var(--c-main); }

/* ---------- Сайдбар ---------- */

.main-sidebar .block-wrap { --panel-pad: 22px; margin-bottom: 22px; }
.block-head { border-bottom: 2px solid var(--c-separator); margin-bottom: 16px; padding-bottom: 10px; }
.block-head::after { background: var(--c-main); height: 2px; bottom: -2px; }
.block-head .heading { font-size: 19px; font-weight: 700; text-transform: none; color: var(--c-headings); }
.small-post { gap: 14px; }
.small-post .media { flex: 0 0 92px; width: 92px; height: 69px; border-radius: var(--card-radius); overflow: hidden; }
.small-post .media img { width: 100%; height: 100%; object-fit: cover; }
.small-post .post-title { font-size: var(--title-size-s); font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.loop-small .small-post { padding: 12px 0; }

/* ---------- Сторінки, автор, 404 ---------- */

.page-content .main-heading { font-size: 32px; }
.author-box.panel { margin: 0 0 24px; border: 0; }
.author-info .name { font-family: var(--title-font); font-size: 24px; margin: 0 0 6px; }
.page-404 { margin-bottom: 30px; }
.page-404 .text-404 { color: var(--c-main); }
.empty.panel { text-align: center; color: var(--c-excerpts); }

/* Пошук */
.search-form .search-field { border-radius: 20px; border: 2px solid var(--c-separator); padding: 0 18px; height: 42px; }
.search-form .search-submit { border-radius: 20px; background: var(--c-main); color: #fff; border: 0; padding: 0 22px; height: 42px; font-weight: 700; text-transform: uppercase; font-family: var(--title-font); }
.search-form .search-submit:hover { background: var(--c-main-dark); }

/* Коментарі */
.comment-respond { background: #fffaf3; border-radius: var(--card-radius); }
.comment-form .submit { background: var(--c-main); border-radius: 20px; }

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

.main-footer { margin-top: 50px; background: var(--c-footer-bg); color: var(--c-footer-text); }
.footer-lower { background: transparent; }
.footer-lower .inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 46px 0 30px;
	text-align: left;
	align-items: start;
}
.footer-brand .csm-wordmark .logo-name { color: #fff; font-size: 26px; }
.footer-about { margin: 14px 0 0; font-size: 14px; line-height: 1.6; }
.footer-title { margin-bottom: 12px; font-family: var(--title-font); font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.footer-cats ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
.footer-cats li { margin-bottom: 6px; font-size: 14px; }
.main-footer a { color: var(--c-footer-text); }
.main-footer a:hover { color: var(--c-main); }
.menu--footer { display: block; }
.menu--footer li { margin-bottom: 6px; }
.menu--footer a { font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.footer-info p { font-size: 14px; }
.footer-copy { padding: 16px var(--wrap-padding); border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; text-align: center; }

.to-top { background: var(--c-main); color: #fff; border-radius: 50%; }

/* Off-canvas */
.off-canvas-panel { background: #2f2a26; }
.off-canvas-head .csm-wordmark { justify-content: center; }
.off-canvas-head .logo-name { color: #fff; }
.off-canvas .search-form { margin-bottom: 18px; }
.off-canvas .menu--mobile a { display: block; padding: 12px 0; color: #fff; }

/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
	.recipe-grid { --grid-cols: 3; gap: 18px; }
}
@media (max-width: 940px) {
	.csm-head .offcanvas-toggle { display: block; }
	.csm-head .navigation { display: none; }
	.csm-head .search-icon { margin-left: auto; }
	.csm-head .search-label { display: none; }
	.csm-head .search-icon { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
	.recipe-grid { --grid-cols: 2; }
	.recipe-grid.is-related { --grid-cols: 2; }
	.cat-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.cat-tile { min-height: 64px; }
	.footer-lower .inner { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
	.main-sidebar { margin-top: 24px; }
}
@media (max-width: 600px) {
	:root { --panel-pad: 18px; }
	.the-post { --panel-pad: 18px; }
	.recipe-grid { --grid-cols: 1; }
	.recipe-grid.is-related { --grid-cols: 2; gap: 12px; }
	.is-related .recipe-card .card-foot { flex-direction: column; align-items: flex-start; }
	.csm-wordmark .logo-name { font-size: 23px; }
	.csm-wordmark .logo-badge svg { width: 32px; height: 32px; }
	.csm-wordmark .logo-tagline { display: none; }
	.the-post-header .post-title { font-size: 26px; }
	.post-meta-single .csm-rate { margin-left: 0; }
	.archive-heading { font-size: 20px; }
	.footer-lower .inner { grid-template-columns: 1fr; }
	.entry-content ul.csm-ing { columns: 1; }
}