/* =============================================================================
   Simply Cooking Recipes — Custom Styles (Blocksy Child)
   -----------------------------------------------------------------------------
   Organization:
     1. Brand tokens (reference Blocksy's palette where possible)
     2. Typography refinements
     3. Buttons / links
     4. Recipe & archive cards
     5. Header / footer tweaks
     6. Utilities

   NOTE: Colors, base fonts, and header/footer layout are set in the Blocksy
   Customizer (Global Colors + Typography). This file holds refinements and
   component styling that Blocksy's UI can't reach cleanly. Prefer Blocksy
   palette variables (--theme-palette-color-1 … -8) over hardcoded hex so the
   Customizer stays the single source of truth.
   ========================================================================== */

/* 1. Brand tokens — Coastal Farmhouse palette.
   Set the same values in Blocksy Customizer > Global Colors so the UI stays the
   source of truth; these vars mirror them for use in the rules below. */
:root {
	--scr-cream: #FAF6F0;        /* background / light sections */
	--scr-terracotta: #C2703D;   /* primary: buttons, links */
	--scr-terracotta-dk: #A85C30;/* primary hover */
	--scr-sage: #7A8B6F;         /* secondary: tags, accents */
	--scr-honey: #D9A441;        /* accent: ratings, highlights */
	--scr-ink: #2E2A25;          /* headings, dark text */
	--scr-body: #5C5348;         /* body copy, muted text */

	--scr-space-section: clamp(3rem, 6vw, 6rem);
	--scr-radius-card: 10px;
}

/* 2. Typography — refinements only; families/sizes set in Customizer. */

/* Intro / lead paragraph that opens a page. */
.scr-lead {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.6;
	color: var(--scr-body);
	max-width: 60ch;
}

/* Small uppercase kicker that sits above a page headline. */
.scr-eyebrow {
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--scr-sage);
	margin-bottom: .5rem;
}

/* Opening headline of a content page (page title is rendered by the theme). */
.scr-page-headline {
	margin-top: 0;
	max-width: 22ch;
}

/* 3. Buttons / links */

/* 4. Recipe & archive cards */

/* 5. Header / footer tweaks */

/* 6. Content components
   ---------------------------------------------------------------------------
   Built with CORE Gutenberg blocks on purpose. The About/Contact/Explore/Digest
   pages were originally built with UAGB (Ultimate Addons) blocks; that plugin
   was later removed, which left unstyled markup and icon SVGs ballooning to
   ~750px. Core blocks + this stylesheet have no plugin dependency, so the
   layout cannot break that way again. */

/* Contact / info cards — a row of core columns. */
.scr-contact-cards {
	gap: 1.25rem;
	margin-block: 2rem;
}

.scr-contact-cards .wp-block-column {
	background: var(--scr-cream);
	border: 1px solid var(--scr-terracotta);
	border-color: color-mix(in srgb, var(--scr-terracotta) 22%, transparent);
	border-radius: var(--scr-radius-card);
	padding: 1.5rem 1.5rem 1.25rem;
	/* sage keyline anchors each card without shouting */
	border-top: 3px solid var(--scr-sage);
}

.scr-contact-cards .wp-block-column h3 {
	margin: 0 0 .5rem;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--scr-sage);
}

.scr-contact-cards .wp-block-column p {
	margin: 0;
	color: var(--scr-body);
	line-height: 1.6;
}

.scr-contact-cards a {
	color: var(--scr-terracotta);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.scr-contact-cards a:hover,
.scr-contact-cards a:focus-visible {
	color: var(--scr-terracotta-dk);
	border-bottom-color: currentColor;
}

/* Feature cards — same shell as the contact cards, honey keyline instead of
   sage so the two card types read as related but distinct. */
.scr-feature-cards {
	gap: 1.25rem;
	margin-block: 1.25rem;
}

.scr-feature-cards .wp-block-column {
	background: var(--scr-cream);
	border: 1px solid color-mix(in srgb, var(--scr-terracotta) 18%, transparent);
	border-top: 3px solid var(--scr-honey);
	border-radius: var(--scr-radius-card);
	padding: 1.5rem;
}

.scr-feature-cards .wp-block-column h3 {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	color: var(--scr-ink);
}

.scr-feature-cards .wp-block-column p {
	margin: 0;
	color: var(--scr-body);
	line-height: 1.65;
}

/* Home hero — split: copy left, one strong photograph right.
   The H1 stays real text (not baked into an image) so it still carries the
   page's main keyword, and only one image sits above the fold to keep LCP
   cheap. */
.scr-hero {
	padding-block: clamp(1.5rem, 5vw, 4rem);
}

.scr-hero-grid {
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* ONE left edge for all four elements.
   WordPress's .is-layout-constrained sets `margin-inline:auto !important` on
   any child carrying a max-width, so the H1 (18ch) and lead (58ch) were each
   centring on their own axis while the eyebrow and buttons ran full width —
   four elements on three different left edges. The hero group is now layout
   "default" rather than "constrained", and these reset the margin explicitly
   so the alignment can't drift back if the layout type is ever changed. */
.scr-hero-title,
.scr-hero .scr-lead {
	margin-inline: 0;
}

.scr-hero-title {
	max-width: 16ch;
	margin-block: .35rem 1rem;
	/* Bigger than the global H1 (40px) — this is the one place a display size
	   earns its keep. Fraunces tightens up nicely at scale. */
	font-size: clamp(2.25rem, 4.4vw, 3.35rem);
	line-height: 1.07;
	letter-spacing: -.015em;
}

.scr-hero .scr-lead {
	max-width: 46ch;
}

.scr-hero-buttons {
	margin-top: 1.75rem;
	gap: .75rem;
}

/* Photograph. Fixed aspect via object-fit so a portrait or square upload
   can be swapped in later without the column height jumping around. */
.scr-hero-figure {
	margin: 0;
}

.scr-hero-figure img {
	display: block;
	width: 100%;
	height: clamp(320px, 40vw, 520px);
	object-fit: cover;
	border-radius: var(--scr-radius-card);
	/* Warm-toned shadow — a neutral grey drop reads cold against the cream. */
	box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--scr-ink) 50%, transparent);
}

/* Tasty Pins lays a "Pin this" bar across the bottom of every image. That
   earns its place on recipe pages, but here it covers the photograph in the
   first thing a visitor sees and reads as an artifact. Hidden on the hero
   only — every other image keeps its pin button.

   Note the container in the middle of the selector: Tasty Pins ships
   `.tasty-pins-banner-container .tasty-pins-banner` (0,2,0) from an inline
   <style> that sits inside the figure, so it lands later in the document than
   this stylesheet. Matching its specificity would lose the tie — this goes one
   class higher instead of resorting to !important. */
.scr-hero-figure .tasty-pins-banner-container .tasty-pins-banner {
	display: none;
}

/* Recipe grid pulled live from the recipes CPT. */
.scr-recipe-grid .scr-recipe-thumb img {
	border-radius: var(--scr-radius-card);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.scr-recipe-grid .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.35;
	margin: .65rem 0 0;
}

.scr-recipe-grid .wp-block-post-title a {
	color: var(--scr-ink);
	text-decoration: none;
}

.scr-recipe-grid .wp-block-post-title a:hover,
.scr-recipe-grid .wp-block-post-title a:focus-visible {
	color: var(--scr-terracotta);
}

/* Taxonomy "pills" — dense, scannable rows of archive links. These carry a lot
   of the homepage's internal linking without turning the page into card soup. */
.scr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: 1.25rem;
}

.scr-pills a {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	padding: .45rem .85rem;
	border: 1px solid color-mix(in srgb, var(--scr-terracotta) 22%, transparent);
	border-radius: 999px;
	background: var(--scr-cream);
	color: var(--scr-ink);
	text-decoration: none;
	font-size: .9375rem;
	line-height: 1.2;
}

.scr-pills a:hover,
.scr-pills a:focus-visible {
	background: var(--scr-terracotta);
	border-color: var(--scr-terracotta);
	color: #fff;
}

.scr-pills a span {
	font-size: .75rem;
	color: var(--scr-sage);
}

.scr-pills a:hover span,
.scr-pills a:focus-visible span {
	color: color-mix(in srgb, #fff 80%, transparent);
}

.scr-pills-tight {
	margin-top: .25rem;
}

/* Guide grid reuses the recipe grid, slightly smaller titles. */
.scr-guide-grid .wp-block-post-title {
	font-size: 1.0625rem;
}

/* Category cards — count first so the number does the selling. */
.scr-cat-cards {
	gap: 1.25rem;
	margin-block: 1.25rem;
}

.scr-cat-cards .wp-block-column {
	background: var(--scr-cream);
	border: 1px solid color-mix(in srgb, var(--scr-terracotta) 18%, transparent);
	border-left: 3px solid var(--scr-sage);
	border-radius: var(--scr-radius-card);
	padding: 1.25rem 1.5rem;
}

.scr-cat-count {
	margin: 0 0 .25rem !important;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scr-sage);
}

.scr-cat-cards h3 {
	margin: 0;
	font-size: 1.25rem;
}

.scr-cat-cards h3 a {
	color: var(--scr-ink);
	text-decoration: none;
}

.scr-cat-cards h3 a:hover,
.scr-cat-cards h3 a:focus-visible {
	color: var(--scr-terracotta);
}

/* Call-to-action link that closes a feature card. */
.scr-card-link {
	margin-top: 1rem !important;
	font-weight: 500;
}

.scr-card-link a {
	color: var(--scr-terracotta);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--scr-terracotta) 40%, transparent);
}

.scr-card-link a:hover,
.scr-card-link a:focus-visible {
	color: var(--scr-terracotta-dk);
	border-bottom-color: currentColor;
}

/* Secondary button row sits tight under the primary one. */
.scr-buttons-secondary {
	margin-top: .75rem;
}

/* Stat band — verifiable numbers used as social proof. Deliberately quiet:
   the figure carries the weight, the label just names it. */
.scr-stats {
	gap: 1.25rem;
	margin-block: 1.5rem;
}

.scr-stats .wp-block-column {
	background: var(--scr-cream);
	border: 1px solid color-mix(in srgb, var(--scr-terracotta) 18%, transparent);
	border-radius: var(--scr-radius-card);
	padding: 1.5rem 1.25rem;
	text-align: center;
}

.scr-stat-num {
	margin: 0 !important;
	font-family: var(--theme-font-family, Fraunces), Georgia, serif;
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1;
	font-weight: 700;
	color: var(--scr-terracotta);
}

.scr-stat-label {
	margin: .5rem 0 0 !important;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--scr-body);
}

/* Pull quote — terracotta keyline, no heavy borders. */
.scr-pullquote {
	border: 0;
	border-left: 3px solid var(--scr-terracotta);
	background: var(--scr-cream);
	border-radius: 0 var(--scr-radius-card) var(--scr-radius-card) 0;
	padding: 1.5rem 1.75rem;
	margin-block: 2rem;
}

.scr-pullquote blockquote p {
	font-family: var(--theme-font-family, Fraunces), Georgia, serif;
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	line-height: 1.45;
	color: var(--scr-ink);
	margin: 0;
}

/* Inline figures sit flush with the text column and pick up the card radius. */
.scr-figure img {
	border-radius: var(--scr-radius-card);
	display: block;
	height: auto;
	max-width: 100%;
}

/* Section divider — honey hairline, deliberately understated. */
.scr-rule {
	border: 0;
	height: 2px;
	width: 64px;
	margin: var(--scr-space-section) 0;
	background: var(--scr-honey);
	opacity: 1;
}

/* 7. Tasty Recipes card — Coastal Farmhouse skin
   ---------------------------------------------------------------------------
   COLOURS LIVE IN THE PLUGIN, NOT HERE. Tasty writes its palette as inline
   styles with !important (card background, title colour/capitalization), which
   no stylesheet can override — so the colours are set in WP Tasty → Tasty
   Recipes → Design → Template Colors, the same way the site palette lives in
   Blocksy's Customizer. Card #FFFFFF on the cream page, header #FAF6F0,
   buttons/icons #C2703D, detail labels #7A8B6F, text #2E2A25 / #5C5348,
   stars #D9A441, recipe title capitalization set to "initial" (uppercase
   Fraunces on a long title is heavy and hurts readability).

   What stays below is structure only — borders, radius, spacing and thumb
   targets. This is the part people actually use while cooking, often
   one-handed with a phone on the counter. Do not re-add colour declarations
   here; change them in the plugin so there is one source of truth. */

.tasty-recipes {
	border: 1px solid color-mix(in srgb, var(--scr-terracotta) 22%, transparent);
	border-top: 4px solid var(--scr-terracotta);
	border-radius: var(--scr-radius-card);
	overflow: hidden;
}

.tasty-recipes-title {
	line-height: 1.2;
}

.tasty-recipes-details .tasty-recipes-label,
.tasty-recipes-prep-time strong,
.tasty-recipes-cook-time strong,
.tasty-recipes-total-time strong,
.tasty-recipes-yield strong {
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8125rem;
}

.tasty-recipes-ingredients-header,
.tasty-recipes-instructions-header {
	border-top: 1px solid color-mix(in srgb, var(--scr-terracotta) 14%, transparent);
}

/* Buttons — jump / print / review, in and out of the card */
.tasty-recipes-buttons a,
.tasty-recipes-button-wrap a,
.tasty-recipes-print-button,
.tasty-recipes-jump-link,
.tasty-recipes-rating-link,
a.tasty-recipes-print-link,
.tasty-recipes-quick-links a {
	/* colour comes from the plugin's button_color / button_text_color */
	border-radius: 6px !important;
	/* comfortable thumb target */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .55rem 1.1rem;
	line-height: 1.2;
	text-decoration: none;
}

.tasty-recipes-buttons a:hover,
.tasty-recipes-button-wrap a:hover,
.tasty-recipes-print-button:hover,
.tasty-recipes-jump-link:hover,
.tasty-recipes-rating-link:hover,
a.tasty-recipes-print-link:hover,
.tasty-recipes-quick-links a:hover {
	background: var(--scr-terracotta-dk) !important;
	border-color: var(--scr-terracotta-dk) !important;
}

/* Notes / nutrition / keywords — quieter supporting blocks.
   Star colour is the plugin's star_color (#D9A441). */
.tasty-recipes-notes,
.tasty-recipes-nutrition,
.tasty-recipes-keywords,
.tasty-recipes-entry-footer {
	background: var(--scr-cream);
}

.tasty-recipes-keywords,
.tasty-recipes-category,
.tasty-recipes-cuisine {
	font-size: .875rem;
}

/* Unit converter + cook-mode toggle */
.tasty-recipes-convert-button {
	border-color: var(--scr-sage) !important;
	color: var(--scr-sage) !important;
	border-radius: 999px !important;
}

.tasty-recipes-convert-button-active,
.tasty-recipes-convert-button:hover {
	background: var(--scr-sage) !important;
	color: #fff !important;
}

.tasty-recipes-cook-mode__switch-slider {
	background-color: color-mix(in srgb, var(--scr-body) 35%, transparent);
}

.tasty-recipes-cook-mode__switch input:checked + .tasty-recipes-cook-mode__switch-slider {
	background-color: var(--scr-terracotta);
}

/* Ingredient checkboxes pick up the accent colour */
.tasty-recipes-ingredients input[type="checkbox"],
.tasty-recipes-ingredients-body input[type="checkbox"] {
	accent-color: var(--scr-terracotta);
	width: 1.05rem;
	height: 1.05rem;
}

/* 8. Mobile / touch refinements
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Nothing in the card may cause a sideways scroll */
	.tasty-recipes,
	.tasty-recipes * {
		max-width: 100%;
	}

	.tasty-recipes img {
		height: auto;
	}

	/* Stack the action buttons full-width so they're easy to hit */
	.tasty-recipes-buttons,
	.tasty-recipes-quick-links {
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

	.tasty-recipes-buttons a,
	.tasty-recipes-quick-links a {
		width: 100%;
	}

	/* Roomier lists — these get read mid-cook */
	.tasty-recipes-ingredients-body li,
	.tasty-recipes-instructions-body li {
		line-height: 1.65;
		margin-bottom: .6rem;
	}

	.tasty-recipes-title {
		font-size: 1.5rem;
	}

	/* Site-wide: keep card grids and pills comfortable on small screens */
	.scr-contact-cards .wp-block-column,
	.scr-feature-cards .wp-block-column,
	.scr-cat-cards .wp-block-column,
	.scr-stats .wp-block-column {
		padding: 1.25rem;
	}

	.scr-pills a {
		min-height: 40px;
	}

	.scr-hero-buttons .wp-block-button,
	.scr-hero-buttons .wp-block-button__link {
		width: 100%;
	}

	/* Hero stacks to one column. Copy is first in source order deliberately,
	   so the H1 stays above the fold and the LCP element is text, not the
	   photograph. The image sits underneath at a shallower crop. */
	.scr-hero-grid {
		gap: 1.75rem;
	}

	.scr-hero-figure img {
		height: clamp(220px, 56vw, 320px);
	}

	/* Hamburger. Blocksy renders this as an 18x18 flex box with no padding —
	   under half the 44px minimum, and it is the ONLY way to reach navigation
	   on a phone. The icon keeps its size; only the hit area grows. Negative
	   margin absorbs the extra width so the header bar doesn't reflow. */
	.ct-header-trigger {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		margin-inline: -13px;
	}

	/* Archive card metadata (category + author links, ~15px tall and packed
	   16-to-a-screen). padding-block on an inline element expands the touch
	   target without growing the line box, so nothing shifts visually. */
	.entry-meta a,
	.ct-meta-categories a,
	.ct-meta-author a {
		padding-block: .45rem;
	}
}

/* Affiliate + editorial disclosure, rendered site-wide from functions.php.
   Quiet but legible — FTC wants it noticeable, not buried, so it keeps normal
   body contrast rather than being greyed out into invisibility. */
.scr-disclosure {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--scr-terracotta) 18%, transparent);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--scr-body);
}

/* 9. Utilities */