/*
 * 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;
}

.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;
	}
}