/*
 * Sierra Foothills Insider — supplemental front-end styles.
 *
 * Only styles theme.json cannot express belong here. Keep it lean. Loaded on
 * the front end (functions.php) and into the editor canvas (add_editor_style).
 */

/* --- Headlines: wrap at spaces only ----------------------------------------
 * Playfair set large must never hyphenate or split a word mid-line
 * ("Calenda-/r"). Force wrapping only at whitespace, and balance line lengths
 * on browsers that support it.
 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

/* --- Editorial eyebrow / label utility -------------------------------------
 * Letter-spaced uppercase labels for eyebrows, meta, and nav. Apply by adding
 * the "is-style-eyebrow" class (e.g. on a paragraph) or via the utility class.
 *
 * Default color is wine: on the creme base it clears WCAG AA for small text
 * (~6:1), whereas gold-ink (~2.9:1) does not. On dark panels (footer, hero)
 * set a lighter textColor (gold/base) inline instead.
 */
.sfi-eyebrow,
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--wine);
}

/* --- Story byline --------------------------------------------------------
 * The author line on a single post, rendered by the sfi/byline block. Carries
 * the type treatment the core post-author-name block used to hold inline, so
 * the visual result is unchanged; the block exists so a reader-submitted story
 * can be credited to its contributor rather than to the account that published
 * it.
 */
.sfi-byline {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}

/* --- Single-post hero image ------------------------------------------------
 * A 16:9 photo at the full alignwide 1140px is 641px tall, which — under the
 * eyebrow, headline and byline — pushed most of the image below the fold. Cap
 * its height and let the width follow (never object-fit: cover) so the picture
 * shrinks whole instead of being cropped. At the 480px cap a 16:9 image is
 * still 853px wide, comfortably wider than the 700px text column, so it keeps
 * its presence as a feature image.
 *
 * width: fit-content on the wrapper shrinks the group to the image's actual
 * width, which keeps the photo credit flush with the image's left edge rather
 * than stranded out at the alignwide margin.
 */
.sfi-post-hero {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.sfi-post-hero .wp-block-post-featured-image {
	margin: 0;
}

.sfi-post-hero .wp-block-post-featured-image img {
	display: block;
	/* Fit the remaining viewport: ~26rem is the eyebrow + 2-line headline +
	 * byline + margins above. Falls back to a 240px floor on very short screens
	 * and never grows past 480px on tall ones. */
	max-height: clamp(240px, calc(100vh - 26rem), 480px);
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* --- Featured-image photo credit ------------------------------------------
 * Very small credit line sitting directly under a post's featured image
 * (rendered by the sfi/photo-credit block from the post's _sfi_photo_credit
 * meta). Charcoal rather than gold-ink: at this size gold-ink's ~2.9:1 contrast
 * on the creme base fails WCAG AA (see the eyebrow note above), so the line is
 * kept understated by size and letter-spacing instead of by low contrast.
 */
.sfi-photo-credit {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--charcoal);
}

/* --- Subscribe disclosure (hero / inline) ---------------------------------
 * The Details block gives a no-JS, accessible "expands the form" moment. Make
 * its summary read like an editorial label rather than a raw disclosure.
 */
.wp-block-details > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Editorial pull quote / callout ---------------------------------------- */
.wp-block-pullquote {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gold);
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding: var(--wp--preset--spacing--40) 0;
}

.wp-block-pullquote blockquote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
}

/* --- Footer navigation: editorial-label feel ------------------------------- */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
}

/* --- Quiet hairline rules in the brand wine/gold --------------------------- */
.wp-block-separator:not(.is-style-dots) {
	border-color: var(--wp--preset--color--gold);
	opacity: 0.6;
}

.wp-block-separator.is-style-wide {
	border-bottom-width: 1px;
}

/* --- Brand button hovers ---------------------------------------------------
 * Core color utility classes (.has-*-background-color) carry !important, so
 * hover overrides must too. A symmetric brand swap: gold buttons shift to wine,
 * the wine button shifts to gold. Applied via the sfi-btn--* wrapper class.
 */
.sfi-btn--gold .wp-block-button__link,
.sfi-btn--wine .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sfi-btn--gold .wp-block-button__link:hover,
.sfi-btn--gold .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--wine) !important;
	color: var(--wp--preset--color--base) !important;
}

.sfi-btn--wine .wp-block-button__link:hover,
.sfi-btn--wine .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* --- Pine trees flanking the pillar-doorways heading ----------------------- */
.sfi-pillar-tree {
	flex: 0 0 auto;
	line-height: 0;
	opacity: 0.9;
}

.sfi-pillar-tree svg {
	display: block;
}

/* Mirror the right-side grove so the pair frames the heading symmetrically. */
.sfi-pillar-tree--flip {
	transform: scaleX(-1);
}

/* Soften the layered brown ground ellipses so they read as colored-pencil
 * shading rather than crisp shapes. */
.sfi-tree-ground {
	filter: blur(0.6px);
}

/* Keep the flanked heading at its full width in the flex row — without a basis
 * a flex item shrinks toward its longest word, wrapping the title narrowly.
 * Shrinks on small screens where the trees are hidden. */
.sfi-pillar-heading {
	flex: 0 1 680px;
}

/* The pillar heading links to the all-stories page but keeps its current heading
 * colour (inherit), shifting to wine only on hover. */
.sfi-pillar-heading-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.sfi-pillar-heading-link:hover,
.sfi-pillar-heading-link:focus-visible {
	color: var(--wp--preset--color--wine);
}

/* A single grove shown only on mobile, centered under the heading (the flanking
 * pair is hidden there). */
.sfi-pillar-grove-mobile {
	display: none;
}

.sfi-pillar-grove-mobile svg {
	display: inline-block;
}

/* Hide the flanking trees on small screens; show the single centered grove. */
@media (max-width: 781px) {
	.sfi-pillar-tree {
		display: none;
	}

	.sfi-pillar-grove-mobile {
		display: block;
		text-align: center;
		line-height: 0;
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* --- Pillar doorway cards: editorial "index" treatment --------------------- */
.sfi-doorway {
	position: relative; /* anchor for the stretched title link */
	border-top: 2px solid var(--wp--preset--color--gold);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Make the whole card clickable: the title link's ::before covers the card. */
.sfi-doorway h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sfi-doorway:hover {
	transform: translateY(-3px);
	border-top-color: var(--wp--preset--color--wine);
}

/* A large, quiet Playfair number above each pillar. */
.sfi-doorway__index {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--gold-ink);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.sfi-doorway h3 a {
	text-decoration: none;
}

/* Arrow that eases in on hover (inherits the link colour). */
.sfi-doorway h3 a::after {
	content: "\00a0\2192";
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sfi-doorway:hover h3 a::after {
	opacity: 1;
}

/* --- Generous, readable long-form body (Cormorant is delicate small) ------- */
.wp-block-post-content {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}

/* --- Hero (sfi-hero group with a Background image) -------------------------
 * The client sets a photo via Styles > Background. This adds a soft dark scrim
 * over whatever image (or the ink fallback) so the creme headline stays
 * readable — replacing the role a Cover overlay would play. Content is lifted
 * above the scrim; the hero is given height and vertical centering here so the
 * block markup stays simple and valid.
 */
.sfi-hero {
	/* Scrim strength, overridden inline from the Customizer (Homepage Hero ->
	 * "How much to darken"). 0 switches the scrim off entirely. */
	--sfi-scrim-opacity: 0.6;
	position: relative;
	isolation: isolate;
	min-height: 72vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.sfi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Ink (#2F2A26) as rgb so the alpha can be driven by the variable. The top
	 * stop keeps the original 0.35:0.60 ratio, so the gradient shape is
	 * unchanged at the default and scales with the slider. */
	background: linear-gradient(
		180deg,
		rgba(47, 42, 38, calc(var(--sfi-scrim-opacity) * 0.58)),
		rgba(47, 42, 38, var(--sfi-scrim-opacity))
	);
	pointer-events: none;
}

.sfi-hero > * {
	position: relative;
	z-index: 1;
}

/* Mobile: the hero pattern sets 8rem top/bottom padding plus an xx-large
 * headline and a long subhead, so the content overflows a short screen and the
 * photo gets cut off. Shrink the padding and type so the whole hero fits the
 * first screen with the image prominent. */
@media (max-width: 700px) {
	.sfi-hero {
		min-height: 80vh;
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.sfi-hero h1 {
		font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
		line-height: 1.1 !important;
	}

	.sfi-hero p.has-large-font-size {
		font-size: 1.1rem !important;
		line-height: 1.55 !important;
	}

	.sfi-hero .wp-block-buttons {
		margin-top: var(--wp--preset--spacing--30) !important;
	}
}

/* --- Stories index: featured + alternating recent rows --------------------
 * Used by the all-stories page (page-read.html) and every category archive
 * (archive.html). Each post is an image + text row in the front-page Feature
 * style. In a .sfi-stories--alt list the image side alternates: odd rows image
 * left / text right, even rows image right / text left. Generous vertical
 * rhythm per the brand's "beautiful spacing" benchmark.
 */
.sfi-story-row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.sfi-story-row__media img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* The row is a grid; cancel the flow layout's vertical margin between the
 * image and the text column so they sit on the same baseline. */
.sfi-stories .sfi-story-row > * + * {
	margin-block-start: 0;
}

/* Alternating rows. Default (--alt) starts image-left and flips even rows to
 * image-right; the reverse variant (--alt-reverse) starts image-right and flips
 * odd rows. The all-stories Recent list uses --alt-reverse so it continues the
 * alternation from the image-left Featured above it; archives use --alt so the
 * lead/most-recent post stays image-left like a feature. */
.sfi-stories--alt .wp-block-post:nth-child(even) .sfi-story-row__media,
.sfi-stories--alt-reverse .wp-block-post:nth-child(odd) .sfi-story-row__media {
	order: 2;
}

/* Lead emphasis: enlarge the first row's headline on archives (where there is
 * no separate Featured section), so the most recent post reads as the feature. */
.sfi-stories--lead .wp-block-post:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.14;
}

@media (max-width: 781px) {
	.sfi-story-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	/* On a single column, keep natural source order (image above text). */
	.sfi-stories--alt .wp-block-post:nth-child(even) .sfi-story-row__media,
	.sfi-stories--alt-reverse .wp-block-post:nth-child(odd) .sfi-story-row__media {
		order: 0;
	}
}

/* --- View toggle (sfi/view-toggle) + compact view --------------------------
 * Editorial (default) vs Compact. Compact collapses each story to a small
 * thumbnail + title for fast scanning; driven by the .sfi-view-compact body
 * class (set server-side from ?view=compact), so there is no flash on load.
 */
.sfi-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.sfi-view-toggle__option {
	display: inline-flex;
	align-items: center;
	color: rgba(47, 42, 38, 0.38); /* muted ink for the inactive icon */
	padding-bottom: 0.3rem;
	border-bottom: 2px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.sfi-view-toggle__option:hover,
.sfi-view-toggle__option:focus-visible {
	color: var(--wp--preset--color--wine);
}

.sfi-view-toggle__option.is-active {
	color: var(--wp--preset--color--wine);
	border-bottom-color: var(--wp--preset--color--gold);
}

.sfi-view-toggle__icon {
	display: block;
}

/* Compact: text left, small thumbnail right, a two-line excerpt, hairline rules
 * between posts for fast scanning. */
.sfi-view-compact .sfi-story-row {
	/* 150px, up from 120px. The row height is set by the taller of the two
	 * columns, and the text column runs ~91px (one-line title plus a two-line
	 * clamped excerpt; the date is hidden in compact). At 16:9 a 150px thumbnail
	 * is 84px tall, so it stays under that and the rows do not grow. */
	grid-template-columns: minmax(0, 1fr) 150px;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.sfi-view-compact .sfi-stories .sfi-story-row__media {
	order: 2 !important; /* image to the right, no alternation in compact */
}

.sfi-view-compact .sfi-story-row__body {
	margin: 0;
}

.sfi-view-compact .sfi-story-row__body .wp-block-post-date {
	display: none;
}

.sfi-view-compact .sfi-stories .sfi-story-row__body .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin-top: 0.15rem;
	margin-bottom: 0.4rem;
}

/* Keep the excerpt to a one/two-line sample. */
.sfi-view-compact .sfi-story-row__body .wp-block-post-excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.sfi-view-compact .sfi-story-row__body .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfi-view-compact .wp-block-post-excerpt__more-link {
	display: none;
}

/* Thin, light dividing line between posts. */
.sfi-view-compact .wp-block-post {
	border-bottom: 1px solid rgba(47, 42, 38, 0.12);
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Tighten the space between rows. The editorial blockGap (8rem) is applied as
 * margin between flow-layout items, so override that margin, not `gap` (which
 * does nothing in flow layout). The first row has no preceding sibling, which is
 * why only the 3rd row onward showed the large gap. */
.sfi-view-compact .wp-block-post-template > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Hide the Featured / Recent Posts section labels and the divider between them
 * so compact reads as one continuous scannable list. */
.sfi-view-compact .sfi-stories-heading,
.sfi-view-compact .sfi-stories-divider {
	display: none;
}

@media (max-width: 781px) {
	.sfi-view-compact .sfi-story-row {
		grid-template-columns: minmax(0, 1fr) 110px;
		gap: var(--wp--preset--spacing--30);
	}
}

/* --- Post-category filter (sfi/category-filter dynamic block) ---------------
 * A centered row of pillar links above the featured post and on archives.
 */
.sfi-cat-filter {
	margin: 0 auto;
	text-align: center;
}

.sfi-cat-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.sfi-cat-filter__item {
	margin: 0;
}

.sfi-cat-filter__link {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.sfi-cat-filter__link:hover,
.sfi-cat-filter__link:focus-visible {
	color: var(--wp--preset--color--wine);
}

.sfi-cat-filter__link.is-active {
	color: var(--wp--preset--color--wine);
	border-bottom-color: var(--wp--preset--color--gold);
}

/* --- Primary header navigation (sfi/primary-navigation dynamic block) -------
 * Events · Read · Collaborate · Subscribe. "Read" opens a category dropdown on
 * hover or keyboard focus — CSS only, no front-end JavaScript.
 */
.sfi-primary-nav {
	position: relative;
}

.sfi-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.92rem;
	font-weight: 600;
}

.sfi-nav__item {
	position: relative;
	margin: 0;
}

.sfi-nav__link {
	display: inline-block;
	padding: 0.25rem 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sfi-nav__link:hover,
.sfi-nav__link:focus-visible {
	color: var(--wp--preset--color--wine);
}

/* Dropdown affordance + panel */
.sfi-nav__item--has-dropdown > .sfi-nav__link::after {
	content: "\25BE";
	margin-left: 0.4em;
	/* The glyph is narrower than its advance width and picks up the inherited
	 * letter-spacing, so it trails a few px of slack that made the gap before
	 * "Collaborate" read wider than the equal flex gap elsewhere. Pull it back. */
	margin-right: -0.5em;
	font-size: 0.7em;
	color: var(--wp--preset--color--gold-ink);
}

.sfi-nav__dropdown {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 260px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gold);
	box-shadow: 0 12px 30px rgba(47, 42, 38, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.sfi-nav__item--has-dropdown:hover > .sfi-nav__dropdown,
.sfi-nav__item--has-dropdown:focus-within > .sfi-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sfi-nav__dropdown-item {
	margin: 0;
}

.sfi-nav__dropdown-link {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	white-space: nowrap;
}

.sfi-nav__dropdown-link:hover,
.sfi-nav__dropdown-link:focus-visible {
	color: var(--wp--preset--color--wine);
	background: rgba(198, 167, 104, 0.12);
}

/* "See All" — set apart from the category titles with a gold rule + label feel. */
.sfi-nav__dropdown-item--all {
	margin-top: 0.35rem;
	border-top: 1px solid rgba(198, 167, 104, 0.4); /* faded gold, softer than the panel border */
}

.sfi-nav__dropdown-link--all {
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--wine);
}

/* Subscribe: brand-accent button */
.sfi-nav__button {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	letter-spacing: 0.12em;
}

.sfi-nav__button:hover,
.sfi-nav__button:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

/* Shrink the header wordmark on small phones so the logo + hamburger stay on one
 * row (otherwise the header wraps and the menu opens off-screen). Also tighten
 * the header's lower spacing on mobile. */
@media (max-width: 600px) {
	.wp-block-site-logo img,
	.wp-block-site-logo .custom-logo {
		width: min(170px, 46vw) !important;
		height: auto !important;
	}

	.sfi-site-header {
		padding-bottom: var(--wp--preset--spacing--20) !important;
		margin-bottom: 0 !important;
	}
}

/* Editor placeholder spacing */
.sfi-primary-nav--editor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.92rem;
	font-weight: 600;
}

/* Hamburger hidden until mobile */
.sfi-nav__toggle,
.sfi-nav__hamburger {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 781px) {
	.sfi-nav__hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-left: auto;
		cursor: pointer;
	}

	.sfi-nav__bars,
	.sfi-nav__bars::before,
	.sfi-nav__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--wp--preset--color--ink);
	}

	.sfi-nav__bars {
		position: relative;
	}

	.sfi-nav__bars::before,
	.sfi-nav__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.sfi-nav__bars::before {
		top: -7px;
	}

	.sfi-nav__bars::after {
		top: 7px;
	}

	.sfi-nav {
		display: none;
	}

	.sfi-nav__toggle:checked ~ .sfi-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30);
		position: absolute;
		top: 100%;
		right: 0;
		left: auto;
		/* border-box so the padding is included in the width — otherwise the panel
		 * (width + 2rem padding) is wider than the viewport and spills off-screen.
		 * Width stays viewport-safe so long category names wrap. */
		box-sizing: border-box;
		width: min(280px, calc(100vw - 2.5rem));
		min-width: 0;
		padding: var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--gold);
		box-shadow: 0 12px 30px rgba(47, 42, 38, 0.12);
		z-index: 60;
	}

	/* Widen the tap target for the top-level items (Events / Read / Collaborate)
	 * to the full menu width — hitbox only; text stays left, nothing moves. */
	.sfi-nav__toggle:checked ~ .sfi-nav > .sfi-nav__item > .sfi-nav__link {
		display: block;
	}

	/* On mobile the category list shows inline, indented under Read */
	.sfi-nav__dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0.5rem 0 0 0.9rem;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	/* Let long category names wrap inside the narrow mobile panel. */
	.sfi-nav__dropdown-link {
		white-space: normal;
	}

	.sfi-nav__item--has-dropdown > .sfi-nav__link::after {
		content: "";
		margin-right: 0;
	}
}

/* ===========================================================================
 * Forminator forms (Collaborate submission) — brand styling.
 * editorial.css loads after Forminator's form CSS, so these override the
 * plugin's default design. !important is used because Forminator's default
 * selectors are highly specific.
 * ========================================================================= */
.forminator-ui.forminator-custom-form {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

.forminator-ui.forminator-custom-form .forminator-row {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Labels: quiet editorial eyebrow */
.forminator-ui.forminator-custom-form .forminator-label {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.4rem;
}

.forminator-ui.forminator-custom-form .forminator-required {
	color: var(--wp--preset--color--wine);
}

/* The "Post Content" field is Forminator's Post Data field, which renders
 * WordPress's own wp_editor. WP puts a .wp-editor-tools row between the label
 * and the editor box to hold the right-floated Visual / Code switch, so the
 * label appears to float well above the box with dead space beneath it. Hiding
 * the switch collapses that row to zero height (it is a clearfix whose only
 * child is floated), closing the gap — and a contributor has no reason to
 * hand-edit HTML, so the Visual editor alone is the calmer control.
 */
.forminator-ui.forminator-custom-form .wp-editor-tabs {
	display: none;
}

/* Checkbox option text (the submission-guidelines agreement) — sentence case and
 * body-sized, unlike the uppercase field labels above, because it is a sentence
 * to read rather than a field name to scan. Forminator names this element
 * differently per field type: -label on the Checkbox and GDPR fields, __label on
 * the Consent field, so cover all three.
 */
.forminator-ui.forminator-custom-form .forminator-checkbox-label,
.forminator-ui.forminator-custom-form .forminator-checkbox__label,
.forminator-ui.forminator-custom-form .forminator-consent__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.forminator-ui.forminator-custom-form .forminator-checkbox-label a,
.forminator-ui.forminator-custom-form .forminator-checkbox__label a,
.forminator-ui.forminator-custom-form .forminator-consent__label a {
	color: var(--wp--preset--color--wine);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.forminator-ui.forminator-custom-form .forminator-checkbox-box {
	border-color: var(--wp--preset--color--gold) !important;
	border-radius: 0 !important;
}

/* Text inputs, textarea, select box */
.forminator-ui.forminator-custom-form input.forminator-input,
.forminator-ui.forminator-custom-form textarea.forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-select .select2-selection {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.1rem !important;
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0.7rem 0.9rem !important;
	height: auto !important;
}

.forminator-ui.forminator-custom-form textarea.forminator-textarea {
	min-height: 200px !important;
	line-height: 1.6;
}

.forminator-ui.forminator-custom-form input.forminator-input:focus,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus,
.forminator-ui.forminator-custom-form .forminator-select .select2-selection:focus {
	border-color: var(--wp--preset--color--wine) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--wine) !important;
	outline: none !important;
}

.forminator-ui.forminator-custom-form ::placeholder {
	color: rgba(47, 42, 38, 0.5);
}

/* Submit button — brand wine button (gold on hover, matching the site) */
.forminator-ui.forminator-custom-form button.forminator-button-submit {
	font-family: var(--wp--preset--font-family--body) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	background-color: var(--wp--preset--color--wine) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.9rem 1.8rem !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:hover {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* File-upload buttons — quiet outline style */
.forminator-ui.forminator-custom-form .forminator-button-upload,
.forminator-ui.forminator-custom-form .forminator-button-delete {
	font-family: var(--wp--preset--font-family--body) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.74rem;
	font-weight: 600;
	background-color: transparent !important;
	color: var(--wp--preset--color--wine) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	border-radius: 0 !important;
	padding: 0.55rem 1rem !important;
}

.forminator-ui.forminator-custom-form .forminator-button-upload:hover {
	background-color: var(--wp--preset--color--wine) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Validation / error states in brand wine */
.forminator-ui.forminator-custom-form .forminator-error-message,
.forminator-ui.forminator-custom-form .forminator-label--error {
	color: var(--wp--preset--color--wine) !important;
}

.forminator-ui.forminator-custom-form .forminator-input.forminator-is_invalid,
.forminator-ui.forminator-custom-form .forminator-textarea.forminator-is_invalid {
	border-color: var(--wp--preset--color--wine) !important;
}

/* --- Dropdowns and the date picker ----------------------------------------
 * Field types the Collaborate form never used, so nothing here was exercised
 * until the Request an Event form arrived.
 *
 * Note the class name: Forminator writes `forminator-select--field` with TWO
 * dashes. This file previously carried `select.forminator-select-field` (one
 * dash), which matched nothing in the rendered DOM, so raw selects were never
 * actually branded; that dead selector has been removed. The neighbouring
 * `.forminator-select .select2-selection` is left in place because select2
 * builds its container at runtime, so it cannot be ruled out from the markup.
 */
.forminator-ui.forminator-custom-form select.forminator-select--field {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.1rem !important;
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0.7rem 0.9rem !important;
	height: auto !important;
}

/* select2 replaces that select at runtime with its own markup. The closed
 * control sits inside the form, so it can be scoped; the open dropdown is
 * appended to <body>, so those rules below cannot be.
 */
.forminator-ui.forminator-custom-form .select2-container--default .select2-selection--single,
.forminator-ui.forminator-custom-form .select2-container--default .select2-selection--multiple {
	font-family: var(--wp--preset--font-family--body);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 0;
	box-shadow: none;
	min-height: 3.1rem;
	padding: 0.35rem 0.4rem;
}

.forminator-ui.forminator-custom-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: 1.1rem;
	line-height: 2.3;
	color: var(--wp--preset--color--ink);
	padding-left: 0.5rem;
}

.forminator-ui.forminator-custom-form .select2-container--default .select2-selection__placeholder {
	color: rgba(47, 42, 38, 0.5);
}

.forminator-ui.forminator-custom-form .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--wine);
	box-shadow: 0 0 0 1px var(--wp--preset--color--wine);
}

/* The open panel is a child of <body>, outside the form, so this is deliberately
 * unscoped. Forminator is the only thing using select2 on this site.
 */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	box-shadow: none;
}

.select2-container--default .select2-results__option {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink);
	padding: 0.55rem 0.9rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
	background-color: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
	background-color: rgba(198, 167, 104, 0.25); /* gold, quietly */
	color: var(--wp--preset--color--ink);
}

/* Date field: the calendar glyph sits in a span beside the input. */
.forminator-ui.forminator-custom-form .forminator-icon-calendar {
	color: var(--wp--preset--color--gold-ink);
}

/* Forminator ships its own datepicker styling in its palette; repaint the parts
 * that actually read as colour. Unscoped for the same reason as the dropdown:
 * jQuery UI appends #ui-datepicker-div to <body>.
 */
#ui-datepicker-div.ui-datepicker {
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	box-shadow: none;
}

#ui-datepicker-div .ui-datepicker-header {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

#ui-datepicker-div .ui-datepicker-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

#ui-datepicker-div .ui-datepicker-calendar th {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	border-radius: 0;
	color: var(--wp--preset--color--ink);
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
	background-color: rgba(198, 167, 104, 0.3);
	color: var(--wp--preset--color--ink);
}

#ui-datepicker-div .ui-datepicker-calendar .ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a {
	background-color: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
}

/* --- Native time inputs ---------------------------------------------------
 * The event form's start/end times are text fields that functions.php upgrades
 * to <input type="time">, so the browser validates the value and offers its own
 * picker. Chrome renders a clock button and a slightly different intrinsic
 * height than a text input, so pin the box to match its neighbours.
 */
.forminator-ui.forminator-custom-form input[type="time"].forminator-input {
	min-height: 3.1rem;
	line-height: 1.2;
	appearance: none;
}

.forminator-ui.forminator-custom-form input[type="time"].forminator-input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

/* ===========================================================================
 * Kit (ConvertKit) forms — brand styling.
 * Kit renders its forms client-side and injects a <style> block inside the
 * form, i.e. after this stylesheet, with selectors like
 * .formkit-form[data-uid="…"] .formkit-input. These rules are scoped to the
 * .sfi-kit wrapper (the theme wraps every placed form in it) plus [data-uid] so
 * they out-specify Kit's. !important is only for properties Kit also sets as
 * inline style attributes (input + button colours, radius, weight).
 * ========================================================================= */
.sfi-kit .formkit-form[data-uid] {
	max-width: 520px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

/* Kit pads the "clean" template (56px on top) once the form is 700px+ wide. */
.sfi-kit .formkit-form[data-uid] [data-style="clean"] {
	padding: 0;
}

.sfi-kit .formkit-form[data-uid] .formkit-input {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gold) !important;
	border-radius: 0 !important;
	font-weight: 400 !important;
	padding: 0.7rem 0.9rem;
}

.sfi-kit .formkit-form[data-uid] .formkit-input:focus {
	border-color: var(--wp--preset--color--wine) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--wine);
}

.sfi-kit .formkit-form[data-uid] .formkit-input::placeholder {
	color: rgba(47, 42, 38, 0.5);
	opacity: 1;
}

/* Submit: brand wine button, gold on hover — matches the Forminator button. */
.sfi-kit .formkit-form[data-uid] .formkit-submit {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600 !important;
	color: var(--wp--preset--color--base) !important;
	background-color: var(--wp--preset--color--wine) !important;
	border-radius: 0 !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sfi-kit .formkit-form[data-uid] .formkit-submit > span {
	padding: 0.95rem 1.8rem;
}

/* Kit darkens the label span on hover; swap to gold instead. */
.sfi-kit .formkit-form[data-uid] .formkit-submit:hover,
.sfi-kit .formkit-form[data-uid] .formkit-submit:focus-visible {
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--gold) !important;
}

.sfi-kit .formkit-form[data-uid] .formkit-submit:hover > span,
.sfi-kit .formkit-form[data-uid] .formkit-submit:focus > span {
	background-color: transparent;
}

.sfi-kit .formkit-form[data-uid] .formkit-submit:focus-visible {
	outline: 1px solid var(--wp--preset--color--wine);
	outline-offset: 2px;
}

/* Success / error messages: quiet brand tones instead of Kit's green and red. */
.sfi-kit .formkit-form[data-uid] .formkit-alert {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	border-radius: 0;
	margin: 0 auto var(--wp--preset--spacing--30);
}

.sfi-kit .formkit-form[data-uid] .formkit-alert-success {
	background: transparent;
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.sfi-kit .formkit-form[data-uid] .formkit-alert-error {
	background: transparent;
	border-color: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--wine);
}

/* Return-visitor "custom content" (Kit form setting). Kit prints it white with
 * mix-blend-mode: difference, which reads as a glitch on creme. */
.sfi-kit .formkit-form[data-uid] .seva-custom-content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15rem;
	line-height: 1.6;
	text-align: center;
	color: var(--wp--preset--color--charcoal);
	mix-blend-mode: normal;
	padding: 0;
}

/* "Built with Kit" badge: quieted, not hidden. Turning it off is a Kit form
 * setting (plan-dependent), so it is left to Kit rather than hidden in CSS. */
.sfi-kit .formkit-form[data-uid] .formkit-powered-by-convertkit-container {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--20);
	opacity: 0.55;
}

/* ===========================================================================
 * Complianz consent banner — brand styling.
 * Complianz writes its settings as custom properties on :root in a stylesheet
 * that loads after this one, so the brand values are re-declared on the
 * banner's container ID, which outranks :root wherever it is declared. Rules
 * are prefixed the same way to beat Complianz's own .cmplz-cookiebanner rules.
 * ========================================================================= */
#cmplz-cookiebanner-container {
	--cmplz_banner_background_color: var(--wp--preset--color--base);
	--cmplz_banner_border_color: var(--wp--preset--color--gold);
	--cmplz_text_color: var(--wp--preset--color--ink);
	--cmplz_hyperlink_color: var(--wp--preset--color--wine);
	--cmplz_button_accept_background_color: var(--wp--preset--color--wine);
	--cmplz_button_accept_border_color: var(--wp--preset--color--wine);
	--cmplz_button_accept_text_color: var(--wp--preset--color--base);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--wp--preset--color--gold);
	--cmplz_button_settings_text_color: var(--wp--preset--color--ink);
	--cmplz_category_header_always_active_color: var(--wp--preset--color--charcoal);
	--cmplz_slider_active_color: var(--wp--preset--color--wine);
	--cmplz_slider_inactive_color: var(--wp--preset--color--charcoal);
	--cmplz_slider_bullet_color: var(--wp--preset--color--base);
	/* Complianz defaults to 12px body text; Cormorant needs more. */
	--cmplz_title_font_size: 1.35rem;
	--cmplz_text_font_size: 1.05rem;
	--cmplz_text_line_height: 1.6;
	--cmplz_category_header_title_font_size: 1rem;
	--cmplz_category_body_font_size: 0.95rem;
	--cmplz_link_font_size: 0.8rem;
	--cmplz_button_font_size: 0.85rem;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	font-family: var(--wp--preset--font-family--body);
	box-shadow: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

/* Buttons: the site's uppercase label feel; wine ⇄ gold swap on hover. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus-visible {
	border-color: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--wine);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* --- Footer legal row (sfi/legal-links) ----------------------------------
 * Base (creme) rather than the copyright's gold-ink: gold-ink on ink is ~4.4:1,
 * just under AA for text this small. "Cookie settings" is a <button> (it
 * re-opens the Complianz banner) styled to read as one of the links.
 */
.sfi-legal-links ul {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.4rem;
}

.sfi-legal-links a,
.sfi-legal-links__button {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.sfi-legal-links__button {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sfi-legal-links a:hover,
.sfi-legal-links a:focus-visible,
.sfi-legal-links__button:hover,
.sfi-legal-links__button:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* --- Legal pages (Privacy Policy, Terms) ------------------------------------
 * Long documents built from core blocks inside a .sfi-legal group. The data
 * table (the privacy policy's categories of information) is wider than the
 * 700px measure would like, so it scrolls sideways on its own rather than
 * pushing the page wider on phones.
 */
.sfi-legal h2,
.sfi-legal h3 {
	scroll-margin-top: var(--wp--preset--spacing--50); /* in-page TOC jumps */
}

.sfi-legal h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.sfi-legal .wp-block-table {
	overflow-x: auto;
}

.sfi-legal .wp-block-table table {
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}

.sfi-legal .wp-block-table th,
.sfi-legal .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding: 0.6rem 0.8rem;
	text-align: left;
	vertical-align: top;
}

.sfi-legal .wp-block-table th {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
}

/* --- Complianz policy pages (Opt-out preferences) ---------------------------
 * Complianz's document.css pins its documents at 14px with ID selectors, which
 * is far too small for Cormorant. Bring them to the same scale as the theme's
 * legal pages. The consent switches on that page read the banner's custom
 * properties, so they get the same brand values as the banner.
 */
body #cmplz-document {
	max-width: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}

body #cmplz-document p,
body #cmplz-document li,
body #cmplz-document td {
	font-size: inherit;
	line-height: inherit;
}

body #cmplz-document h2,
body #cmplz-document h3,
body #cmplz-document h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	text-transform: none;
	border-bottom: 0;
}

body #cmplz-document h2 {
	font-size: 1.6rem;
	margin-top: var(--wp--preset--spacing--50);
}

body #cmplz-document h3 {
	font-size: 1.3rem;
}

body #cmplz-document h4 {
	font-size: 1.1rem;
}

body #cmplz-document a {
	color: var(--wp--preset--color--wine);
}

/* The do-not-sell request form on that page. */
body #cmplz-document input[type="text"],
body #cmplz-document input[type="email"],
body #cmplz-document input[type="search"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 0;
	padding: 0.6rem 0.8rem;
}

body #cmplz-document input[type="submit"],
body #cmplz-document button[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--wine);
	border: 0;
	border-radius: 0;
	padding: 0.85rem 1.6rem;
	cursor: pointer;
}

body #cmplz-document input[type="submit"]:hover,
body #cmplz-document button[type="submit"]:hover {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--gold);
}

#cmplz-manage-consent-container {
	--cmplz_text_color: var(--wp--preset--color--ink);
	--cmplz_hyperlink_color: var(--wp--preset--color--wine);
	--cmplz_category_header_always_active_color: var(--wp--preset--color--charcoal);
	--cmplz_slider_active_color: var(--wp--preset--color--wine);
	--cmplz_slider_inactive_color: var(--wp--preset--color--charcoal);
	--cmplz_slider_bullet_color: var(--wp--preset--color--base);
	--cmplz_category_header_title_font_size: 1.1rem;
	--cmplz_category_header_active_font_size: 0.95rem;
	--cmplz_category_body_font_size: 1.05rem;
}