/*
 * NADIR SEO -- front-end styles for generated recipes.
 * Loaded only on posts whose content uses these classes (see
 * ACS_Kadence_Renderer::enqueue_front()). Colours come from the Kadence
 * global palette, so they follow the theme.
 */

/* Section headings: a tinted band with an accent bar on the left, so each
   section stands apart from the text. Only the page-level H2s (and the
   experience section's) -- the headings inside the ingredients and tips
   boxes keep the boxes' own look. */
.single-content > h2.wp-block-kadence-advancedheading,
.acs-experience h2.wp-block-kadence-advancedheading {
	padding: 0.4em 0.75em 0.4em 0.9em;
	background: var(--global-palette7, #edf2f7);
	border-left: 6px solid var(--global-palette2, #2b6cb0);
	font-size: 34px;
	line-height: 1.25;
}

/* The band replaces the thin line that used to sit under each heading, and
   the space that line needed shrinks to a normal gap. */
.single-content > h2.wp-block-kadence-advancedheading + .wp-block-kadence-spacer .kt-divider,
.acs-experience h2.wp-block-kadence-advancedheading + .wp-block-kadence-spacer .kt-divider {
	display: none;
}

.single-content > h2.wp-block-kadence-advancedheading + .wp-block-kadence-spacer .kt-block-spacer,
.acs-experience h2.wp-block-kadence-advancedheading + .wp-block-kadence-spacer .kt-block-spacer {
	height: 18px;
}

@media (max-width: 767px) {
	.single-content > h2.wp-block-kadence-advancedheading,
	.acs-experience h2.wp-block-kadence-advancedheading {
		padding: 0.35em 0.6em 0.35em 0.75em;
		border-left-width: 5px;
		font-size: 26px;
	}
}

/* Numbered steps: the steps block draws each number 38 px to the left of
   its step (30 px circle + 8 px gap) and the theme gives the list no indent,
   so the numbers stuck out past the headings -- and off the screen on
   phones. Indenting the list by the same 38 px puts the numbers exactly on
   the headings' left edge. Works for posts already published: the rule is
   here, not in each post. */
.single-content ol.hm-ol {
	margin-left: 0;
	padding-left: 38px;
}

/* 9:16 photos (ingredients above the key-ingredients box, plated dish in the
   serving section). One value sets their width on every post. */
.wp-block-image.acs-portrait {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Every generated photo sits in the middle of the column. A figure is as
   wide as the text, and a narrower photo inside it would otherwise hug the
   left edge (themes that skip WordPress's block styles do not centre
   .aligncenter). */
.wp-block-image.acs-portrait,
.acs-recipe-image {
	display: block;
	text-align: center;
}

.wp-block-image.acs-portrait img,
.acs-recipe-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.acs-recipe-image {
	max-width: 600px;
	margin: 1.75em auto;
}

.wp-block-image.acs-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tables from the article sections (substitutions and the like). */
.acs-table {
	margin: 1.5em 0 2em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.acs-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.5;
	background: var(--global-palette9, #ffffff);
}

.wp-block-table.acs-table thead,
.wp-block-table.acs-table tfoot {
	border: 0;
}

.acs-table th,
.acs-table td,
.wp-block-table.acs-table th,
.wp-block-table.acs-table td {
	padding: 0.75em 1em;
	border: 1px solid var(--global-palette7, #edf2f7);
	text-align: left;
	vertical-align: top;
}

.acs-table thead th,
.wp-block-table.acs-table thead th,
.acs-table table > tbody:first-child > tr:first-child > th {
	background: var(--global-palette4, #2d3748);
	border-color: var(--global-palette4, #2d3748);
	color: var(--global-palette9, #ffffff);
	font-weight: 700;
}

.acs-table tbody tr:nth-child(even) > *,
.wp-block-table.acs-table tbody tr:nth-child(even) > * {
	background: var(--global-palette8, #f7fafc);
}

.acs-table tbody td:first-child,
.wp-block-table.acs-table tbody td:first-child {
	font-weight: 600;
	color: var(--global-palette3, #1a202c);
}

@media (max-width: 767px) {
	.acs-table table {
		min-width: 520px;
		font-size: 0.875em;
	}
}

/* Related searches below the recipe card: the recipe's keywords as chips,
   the focus keyword first and filled. Part of the post content, so SEO
   plugins count it. Colours follow the theme's palette when it has one;
   --acs-accent lets a theme set the highlight colour directly. */
.acs-recipe-keywords {
	--acs-kw-accent: var(--acs-accent, var(--global-palette1, #c8643c));
	margin: 2.5em 0 1.5em;
	padding: 22px 24px 24px;
	background: var(--global-palette8, #faf7f3);
	border: 1px solid var(--global-palette7, #ece4dc);
	border-radius: 16px;
}

.acs-recipe-keywords .acs-kw-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 14px;
	color: var(--global-palette3, #2d2a26);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.acs-recipe-keywords .acs-kw-title::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: var(--acs-kw-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%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' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.acs-recipe-keywords .acs-kw-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.acs-recipe-keywords .acs-kw {
	margin: 0;
	padding: 0;
}

.acs-recipe-keywords .acs-kw::before {
	content: none;
}

.acs-recipe-keywords .acs-kw > a,
.acs-recipe-keywords .acs-kw > span {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.45em 1em;
	background: #fff;
	border: 1px solid var(--global-palette6, #e3d8cd);
	border-radius: 999px;
	color: var(--global-palette4, #4a443e);
	font-size: 0.9em;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.acs-recipe-keywords .acs-kw > a::before,
.acs-recipe-keywords .acs-kw > span::before {
	content: "#";
	opacity: 0.45;
	font-weight: 700;
}

.acs-recipe-keywords .acs-kw > a:hover,
.acs-recipe-keywords .acs-kw > a:focus {
	border-color: var(--acs-kw-accent);
	color: var(--acs-kw-accent);
}

.acs-recipe-keywords .acs-kw--main > a,
.acs-recipe-keywords .acs-kw--main > span {
	background: var(--acs-kw-accent);
	border-color: var(--acs-kw-accent);
	color: #fff;
	font-weight: 600;
}

.acs-recipe-keywords .acs-kw--main > a:hover,
.acs-recipe-keywords .acs-kw--main > a:focus {
	color: #fff;
	filter: brightness(0.92);
}

@media (max-width: 600px) {
	.acs-recipe-keywords {
		padding: 18px 16px 20px;
		border-radius: 14px;
	}
	.acs-recipe-keywords .acs-kw > a,
	.acs-recipe-keywords .acs-kw > span {
		font-size: 0.85em;
	}
}