/**
 * Articles — front CSS (singular article TOC sidebar + saved articles).
 *
 * @package Astra_Child
 */

body.llp-article-toc-enabled .sidebar_art {
	background: #f5f3f1;
	border-radius: 18px;
	padding: 20px;
	box-sizing: border-box;
	position: sticky;
	top: 15px;
	max-height: 100%;
	overflow: auto;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text {
	margin: 0;
}

body.llp-article-toc-enabled .sidebar_art .fl-col-content {
	padding: 0;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text p {
	margin: 0 0 25px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	color: #111;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol {
	margin: 0;
	padding-left: 28px;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li {
	margin: 0;
	padding: 10px 0;
	font-size: 16px;
	line-height: 1.5;
	color: #111;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li a {
	color: #171717;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li a:hover {
	color: #9a6b4f;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li::marker {
	color: #9a6b4f;
	font-weight: 700;
}

body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li:not(:last-child) {
	border-bottom: 1px solid #ddd8d3;
}

/* My Articles — save button + saved list */

.save-article-wrapper {
	margin-bottom: 30px;
	text-align: center;
}

.save-article-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 15px;
	background: var(--llp-btn-bg, #e5ded6);
	border: 1px solid var(--llp-btn-bg, #e5ded6);
	border-radius: 50px;
	color: var(--llp-btn-text, #000000);
	font-family: var(--llp-btn-font, Helvetica, Verdana, Arial, sans-serif);
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.save-article-btn:hover {
	background: var(--llp-btn-hover-bg, #000000);
	border-color: var(--llp-btn-hover-bg, #000000);
	color: var(--llp-btn-hover-text, #ffffff);
}

.save-article-btn.saved {
	background: var(--llp-btn-hover-bg, #000000);
	border-color: var(--llp-btn-hover-bg, #000000);
	color: var(--llp-btn-hover-text, #ffffff);
}

.save-article-btn.saved:hover {
	background: var(--llp-btn-bg, #e5ded6);
	border-color: var(--llp-btn-bg, #e5ded6);
	color: var(--llp-btn-text, #000000);
}

.save-article-btn .heart-icon {
	transition: all 0.3s;
}

.save-article-btn.saved .heart-icon {
	fill: currentColor;
}

.save-article-btn:disabled,
.save-article-btn.is-loading {
	opacity: 0.75;
	cursor: wait;
	pointer-events: none;
}

.save-article-loader {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: llp-save-article-spin 0.6s linear infinite;
	flex-shrink: 0;
}

.save-article-btn.is-loading .save-article-loader {
	display: inline-block;
}

.save-article-btn.is-loading .heart-icon {
	display: none;
}

@keyframes llp-save-article-spin {
	to {
		transform: rotate(360deg);
	}
}

.save-article-message {
	display: none;
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}

.save-article-message.is-success {
	background: var(--llp-color-leaf, #48583a);
	color: var(--llp-color-paper, #fff);
}

.save-article-message.is-error {
	background: var(--llp-color-black, #070808);
	color: var(--llp-color-paper, #fff);
}

.saved-articles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.saved-article-card {
	background: var(--llp-color-paper, #fff);
	border: 1px solid var(--llp-color-line, rgba(54, 54, 54, 0.12));
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--llp-color-shadow, 0 24px 60px -38px rgba(54, 54, 54, 0.48));
	transition: transform 0.3s, box-shadow 0.3s, background 0.2s ease;
}

.saved-article-card:hover {
	background: var(--llp-color-surface, #e5ded6);
	transform: translateY(-4px);
}

.saved-article-image {
	display: block;
}

.saved-article-image img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.saved-article-content {
	padding: 20px;
	background: var(--llp-color-surface, #e5ded6);
}

.saved-article-content h3 {
	margin: 0 0 15px;
	font-size: 1.1rem;
}

.saved-article-content h3 a {
	color: var(--llp-color-black, #070808);
	text-decoration: none;
}

.saved-article-content h3 a:hover {
	color: var(--llp-color-black, #070808);
	text-decoration: underline;
}

.remove-saved-article {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	background: var(--llp-btn-bg, #e5ded6);
	border: 1px solid var(--llp-btn-bg, #e5ded6);
	color: var(--llp-btn-text, #000000);
	border-radius: 4px;
	font-family: var(--llp-btn-font, Helvetica, Verdana, Arial, sans-serif);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.remove-saved-article:hover {
	background: var(--llp-btn-hover-bg, #000000);
	border-color: var(--llp-btn-hover-bg, #000000);
	color: var(--llp-btn-hover-text, #ffffff);
}

.no-saved-articles {
	text-align: center;
	padding: 60px 20px;
	color: var(--llp-color-muted, rgba(54, 54, 54, 0.68));
}

/* WooCommerce My Account — Saved Articles table */
.saved-articles-table-wrap {
	margin-top: 10px;
}

.saved-articles-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--llp-color-line, rgba(54, 54, 54, 0.12));
	border-radius: 14px;
	overflow: hidden;
	background: var(--llp-color-paper, #fff);
}

.saved-articles-table th,
.saved-articles-table td {
	padding: 12px 10px;
	vertical-align: middle;
	border-bottom: 1px solid var(--llp-color-line, rgba(54, 54, 54, 0.12));
	text-align: left;
	color: var(--llp-color-ink, #363636);
}

.saved-articles-table thead th {
	background: var(--llp-color-surface, #e5ded6);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--llp-color-black, #070808);
}

.saved-articles-table tbody tr:last-child td {
	border-bottom: 0;
}

.saved-article-col-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.saved-article-col-title a {
	font-weight: 600;
	color: var(--llp-color-black, #070808);
	text-decoration: none;
}

.saved-article-col-title a:hover {
	color: var(--llp-color-black, #070808);
	text-decoration: underline;
}

.saved-article-col-date {
	color: var(--llp-color-muted, rgba(54, 54, 54, 0.68));
}

.saved-article-col-actions {
	white-space: nowrap;
}

.saved-article-col-actions .button {
	margin: 0 4px 4px 0;
}

.saved-articles-table .view-saved-article.button,
body.llp-wc-account .saved-articles-table .view-saved-article.button,
.saved-articles-table .remove-saved-article,
body.llp-wc-account .saved-articles-table .remove-saved-article.button {
	display: inline-flex;
	align-items: center;
	background: var(--llp-btn-bg, #e5ded6);
	border-color: var(--llp-btn-bg, #e5ded6);
	color: var(--llp-btn-text, #000000);
	font-family: var(--llp-btn-font, Helvetica, Verdana, Arial, sans-serif);
}

.saved-articles-table .view-saved-article.button:hover,
body.llp-wc-account .saved-articles-table .view-saved-article.button:hover,
.saved-articles-table .remove-saved-article:hover,
body.llp-wc-account .saved-articles-table .remove-saved-article.button:hover {
	background: var(--llp-btn-hover-bg, #000000);
	border-color: var(--llp-btn-hover-bg, #000000);
	color: var(--llp-btn-hover-text, #ffffff);
}

@media (max-width: 768px) {
	.saved-articles-table thead {
		display: none;
	}

	.saved-articles-table,
	.saved-articles-table tbody,
	.saved-articles-table tr,
	.saved-articles-table td {
		display: block;
		width: 100%;
	}

	.saved-articles-table tr {
		margin-bottom: 20px;
		border: 1px solid var(--llp-color-line, rgba(54, 54, 54, 0.12));
		border-radius: 6px;
		padding: 10px;
		background: var(--llp-color-paper, #fff);
	}

	.saved-articles-table td {
		border: none;
		padding: 8px 4px;
		text-align: right;
	}

	.saved-articles-table td::before {
		content: attr(data-title);
		float: left;
		font-weight: 600;
		color: var(--llp-color-muted, rgba(54, 54, 54, 0.68));
	}

	.saved-article-col-thumb {
		text-align: left;
	}

	.saved-article-col-thumb::before {
		display: none;
	}
}

/* TOC usable as navigation (PM 6 Oct): on desktop the sticky box is capped at the viewport height and scrolls on its own
   (max-height:100% referred to the article column, so a long TOC only scrolled at the very end of the article) */
body.llp-article-toc-enabled .sidebar_art {
	max-height: calc(100vh - 30px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
body.admin-bar.llp-article-toc-enabled .sidebar_art {
	top: 47px;
	max-height: calc(100vh - 62px);
}
/* phones/tablets: the TOC comes first (right under the title) instead of after the whole article */
@media (max-width: 991px) {
	body.llp-article-toc-enabled .fl-col-group:has(> .sidebar_art) {
		display: flex;
		flex-direction: column;
	}
	body.llp-article-toc-enabled .fl-col-group:has(> .sidebar_art) > .fl-col {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.llp-article-toc-enabled .fl-col-group > .sidebar_art {
		order: -1;
		position: static;
		max-height: none;
		margin-bottom: 28px;
	}
}

/* ---- Single article polish (Louise, 8 Oct – applies to all articles) ---------------------------------------------- */
/* Body text a bit larger and less condensed */
body.single-article #primary .fl-module-content p,
body.single-article #primary .fl-module-content li { font-size: 17px; line-height: 1.7; letter-spacing: .005em; }
body.single-article #primary .fl-module-content li { margin-bottom: 12px; }
body.single-article #primary .fl-module-content li:last-child { margin-bottom: 0; }
/* Grey list boxes: more air between the points */
body.single-article #primary .wp-block-list.has-background { padding-top: 22px !important; padding-bottom: 22px !important; }
body.single-article #primary .wp-block-list.has-background li { margin-bottom: 14px; }
/* A heading or lead-in line sits closer to the list / box that follows it */
body.single-article #primary .fl-module-content p:has(+ .wp-block-list),
body.single-article #primary .fl-module-content p:has(+ .llp-art-callout),
body.single-article #primary .fl-module-content :is(h2, h3):has(+ .wp-block-list) { margin-bottom: 10px !important; }
body.single-article #primary .fl-module-content p + .wp-block-list { margin-top: 0 !important; }
/* Tip boxes ("Did you know?", "Top Tip", "So, how do you…"): soft colour, lead as headline */
body.single-article #primary p.llp-art-callout { background: #f3ebe4; border-color: #e6d8cc !important; }
body.single-article #primary .llp-art-callout__title { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; font-style: normal; color: #070808; }
/* Free / Members label on top of the article */
body.single-article #primary .llp-art-access { display: inline-block; margin: 0 0 22px !important; padding: 6px 14px; border-radius: 999px; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; background: #e5ded6; color: #070808; }
body.single-article #primary .llp-art-access--members { background: #070808; color: #fff; }
/* Same ending everywhere: script sign-off */
body.single-article #primary .llp-art-signoff { margin: 48px 0 8px !important; font-family: "Juniper and Sage Regular", Georgia, serif !important; font-size: 34px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #070808; }
/* Recipe lists shown as recipe cards */
body.single-article #primary .llp-art-recipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 28px; }
body.single-article #primary .llp-art-recipes__card { display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .08); text-decoration: none !important; color: #070808; }
body.single-article #primary .llp-art-recipes__card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
body.single-article #primary .llp-art-recipes__name { display: block; padding: 12px 14px 14px; font-size: 16px; line-height: 1.35; }
@media (max-width: 768px) { body.single-article #primary .llp-art-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Free articles: Recipe Membership card at the end, like the landing pages */
body.single-article #primary .llp-art-join { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin: 40px 0 10px; border-radius: 10px; overflow: hidden; background: #f4f2f0; }
body.single-article #primary .llp-art-join__media img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
body.single-article #primary .llp-art-join__body { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
body.single-article #primary .llp-art-join__script { margin: 0 0 6px !important; font-family: "Juniper and Sage Regular", Georgia, serif !important; font-size: 28px !important; line-height: 1.2 !important; }
body.single-article #primary .llp-art-join__title { margin: 0 0 14px !important; font-size: 32px; line-height: 1.2; font-weight: 400; }
body.single-article #primary .llp-art-join__text { margin: 0 0 22px !important; font-size: 16px !important; }
body.single-article #primary .llp-art-join__button { display: inline-block; padding: 16px 28px; border-radius: 99px; background: #e5ded6; color: #000 !important; text-decoration: none !important; font-size: 16px; }
body.single-article #primary .llp-art-join__button:hover { background: #070808; color: #fff !important; }
@media (max-width: 768px) { body.single-article #primary .llp-art-join { grid-template-columns: 1fr; } body.single-article #primary .llp-art-join__body { padding: 28px 22px; } }
/* Table of contents: the section in view / clicked is black */
body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li.is-active a { color: #000; font-weight: 600; }
body.llp-article-toc-enabled .sidebar_art .fl-module-rich-text ol li.is-active::marker { color: #000; }

/* ---- Article spots (Louise, 8 Oct doc) -------------------------------------------------------------------------- */
/* Sub-headings (h3) inside a section: less space above them, so short sub-sections ("Soft / Medium / Stiff peaks")
   don't look further apart than the other sections */
body.single-article #primary .fl-module-content h3.wp-block-heading { margin-top: 26px !important; margin-bottom: 10px !important; }
body.single-article #primary .fl-module-content .wp-block-spacer + h3.wp-block-heading { margin-top: 12px !important; }
/* Picture + text blocks: text column aligned to the top of the picture, no empty first paragraph */
body.single-article #primary .wp-block-media-text { align-items: start !important; }
body.single-article #primary .wp-block-media-text__content { padding-top: 0 !important; }
body.single-article #primary .wp-block-media-text__content > p:empty { display: none; }
body.single-article #primary .wp-block-media-text__content > p:first-child { margin-top: 0 !important; }
/* Recipe steps ("1. Whip the egg whites."): more space between steps; each tip box sits right under its step */
body.single-article #primary .fl-module-content p:has(> strong:first-child + strong + br),
body.single-article #primary .fl-module-content p:has(> strong:first-child > br:last-child) { margin-top: 30px !important; margin-bottom: 8px !important; }
body.single-article #primary .fl-module-content p:has(> strong:first-child + strong + br) + p.llp-art-callout,
body.single-article #primary .fl-module-content p:has(> strong:first-child > br:last-child) + p.llp-art-callout { margin-top: 0 !important; margin-left: 22px; }
/* "New Here? Welcome to My Cake Universe!" box: picture smaller, box the full width */
body.single-article #primary .wp-block-group.has-background:has(> h2 + figure) { padding: 28px 30px !important; }
body.single-article #primary .wp-block-group.has-background:has(> h2 + figure) > figure img { max-height: 360px; width: 100%; object-fit: cover; object-position: center 25%; }
body.single-article #primary .wp-block-group.has-background:has(> h2 + figure) > * { max-width: none !important; }
/* Articles ending with a course block: same elegant layout as the membership card */
body.single-article #primary .wp-block-buttons { margin-top: 18px; margin-bottom: 18px; }
/* Italian Meringue: troubleshooting intro picture full width above the text (Louise: "better having the pic large here") */
body.single-article #primary h2#italian-meringue-troubleshooting-guide-common-problems-how-to-fix-them + .wp-block-media-text { display: block !important; }
body.single-article #primary h2#italian-meringue-troubleshooting-guide-common-problems-how-to-fix-them + .wp-block-media-text .wp-block-media-text__media img { width: 100%; height: auto; border-radius: 10px; }
body.single-article #primary h2#italian-meringue-troubleshooting-guide-common-problems-how-to-fix-them + .wp-block-media-text .wp-block-media-text__content { padding: 18px 0 0 !important; }
/* Picture + text blocks (8 Oct round 2): the text column was still centred vertically by Gutenberg – top-aligned now */
body.single-article #primary .wp-block-media-text > .wp-block-media-text__content { align-self: start !important; }
/* Tempering article: the short "handy temperature chart below" line sits above the chart, full width, instead of floating
   next to it */
body.single-article #primary .wp-block-media-text:has(img[src*="Chocolate15"]) { display: flex !important; flex-direction: column; gap: 14px; }
body.single-article #primary .wp-block-media-text:has(img[src*="Chocolate15"]) .wp-block-media-text__content { order: -1; padding: 0 !important; }
body.single-article #primary .wp-block-media-text:has(img[src*="Chocolate15"]) .wp-block-media-text__media img { max-width: 560px; }

/* ---- Articles, Louise 8 Oct round 2 -------------------------------------------------------------------------------- */
/* Boxes (tip boxes and the bordered "By the way, hi – I'm Louise" box): a bit narrower, more space above and below, a
   deeper shade of the site beige instead of the light pink, no border line */
body.single-article #primary .fl-module-content p.has-border-color {
	max-width: 88%; margin: 34px 0 !important; padding: 22px 26px !important;
	background: #ece5dd !important; border: 0 !important; border-radius: 10px; font-size: 16px; line-height: 1.65;
}
body.single-article #primary .fl-module-content p:has(+ p.has-border-color) { margin-bottom: 0 !important; }
/* Top tips: one italic line, "Top Tip:" in front */
body.single-article #primary p.llp-art-callout--tip { font-style: italic; }
body.single-article #primary .llp-art-callout__lead { font-weight: 700; font-style: italic; margin-right: 2px; }
body.single-article #primary p.llp-art-callout--tip em { font-style: italic; }
/* Lists: the bold lead and the rest of the point clearly apart */
body.single-article #primary .fl-module-content li > strong:first-child { font-weight: 700; }
/* Sub-sections (h3) inside a section: a thin line between them, so the different ones are easy to tell apart */
body.single-article #primary .fl-module-content :is(p, ul, ol, figure, .wp-block-media-text) + h3.wp-block-heading,
body.single-article #primary .fl-module-content :is(p, ul, ol, figure, .wp-block-media-text) + .wp-block-spacer + h3.wp-block-heading { border-top: 1px solid #e3dbd2; padding-top: 24px; margin-top: 30px !important; }
/* Sign-off: script font, lower case, no heart */
body.single-article #primary .llp-art-signoff { text-transform: none; margin: 52px 0 26px !important; }
/* Recipe lists with the site's recipe cards */
body.single-article #primary .llp-art-recipes--site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 18px 0 30px; }
body.single-article #primary .llp-art-recipes--site .post-filter { width: auto !important; margin: 0 !important; }
@media (max-width: 768px) { body.single-article #primary .llp-art-recipes--site { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* The old "New Here?" box is replaced by the standard ending below */
body.single-article #primary .wp-block-group.has-background:has(> h2 + figure) { display: none !important; }
/* Standard ending on every article (like Home "Welcome to My Cake Universe") */
body.single-article #primary .llp-art-welcome { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); margin: 30px 0 10px; border-radius: 10px; overflow: hidden; background: #f4f2f0; }
body.single-article #primary .llp-art-welcome__body { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
body.single-article #primary .llp-art-welcome__script { margin: 0 0 4px !important; font-family: "Juniper and Sage Regular", Georgia, serif !important; font-size: 28px !important; line-height: 1.2 !important; }
body.single-article #primary .llp-art-welcome__title { margin: 0 0 14px !important; font-size: 32px; line-height: 1.2; font-weight: 400; }
body.single-article #primary .llp-art-welcome__text { margin: 0 0 18px !important; font-size: 16px !important; }
body.single-article #primary .llp-art-welcome__links { list-style: none; margin: 0 0 20px !important; padding: 0 !important; }
body.single-article #primary .llp-art-welcome__links li { margin: 0 !important; padding: 12px 0; border-top: 1px solid #e3dbd2; font-size: 15px !important; line-height: 1.45 !important; }
body.single-article #primary .llp-art-welcome__links li:last-child { border-bottom: 1px solid #e3dbd2; }
body.single-article #primary .llp-art-welcome__links a { display: block; font-weight: 600; color: #070808 !important; text-decoration: none !important; }
body.single-article #primary .llp-art-welcome__links a::after { content: " →"; }
body.single-article #primary .llp-art-welcome__links span { color: #6f6862; font-size: 14px; }
body.single-article #primary .llp-art-welcome__social { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 !important; }
body.single-article #primary .llp-art-welcome__social a { padding: 8px 16px; border-radius: 6px; background: #fff; color: #070808 !important; text-decoration: none !important; font-size: 14px; }
body.single-article #primary .llp-art-welcome__media img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center 20%; }
@media (max-width: 768px) { body.single-article #primary .llp-art-welcome { grid-template-columns: 1fr; } body.single-article #primary .llp-art-welcome__media { order: -1; } body.single-article #primary .llp-art-welcome__media img { min-height: 0; aspect-ratio: 4 / 3; } body.single-article #primary .llp-art-welcome__body { padding: 28px 22px; } }