/*
 * Glow Studio DIY — brand token layer
 * ---------------------------------------------------------------------------
 * Loaded last. This file does ONE job: it re-points the local colour palettes
 * that the inherited template defined per-component (--mb-*, --tlcl-*, --ri-*,
 * --sr-*, --nf-*, --ap-*, --rp-*, --ss-*, --ger-*, --gerc-*) at the Glow Studio
 * palette, so there is a single source of truth instead of patch-on-patch rules.
 *
 * Foundation : Warm Ivory #F5EFE4 · Champagne Gold #C6A15B · Charcoal #343434
 * Accents    : Electric Violet #7A2EFF · Electric Cyan #00D9F5
 *              Hot Magenta #E72ABF · Bright Coral #FF5570 · Crystal Aqua #23D7D0
 *
 * Accents are accents. Structure stays ivory / white / charcoal.
 */

:root {
	--gs-ivory: #f5efe4;
	--gs-ivory-soft: #fbf8f3;
	--gs-gold: #c6a15b;
	--gs-gold-deep: #7e5f28;
	--gs-charcoal: #343434;
	--gs-charcoal-deep: #242424;
	--gs-violet: #7a2eff;
	--gs-violet-deep: #5a17d6;
	--gs-violet-wash: #f1ecfa;
	--gs-cyan: #00d9f5;
	--gs-aqua: #23d7d0;
	--gs-aqua-deep: #0f8f8a;
	--gs-magenta: #e72abf;
	--gs-magenta-deep: #b01490;
	--gs-coral: #ff5570;
	--gs-text: #3a3a3a;
	--gs-muted: #6b665e;
	--gs-border: #e4ddd1;
	--gs-white: #fff;

	/* One typeface for the whole site: the platform UI stack. No web fonts. */
	--gs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   1. Inherited local palettes → Glow Studio
   ========================================================================== */

/* Header / global template palette */
:root,
body {
	--mb-header-navy: var(--gs-charcoal);
	--mb-header-coral: var(--gs-violet);
	--mb-header-mint: var(--gs-violet-wash);
	--mb-header-green: var(--gs-aqua);
	--mb-header-yellow: var(--gs-gold);

	--tlcl-navy: var(--gs-charcoal);
	--tlcl-navy-deep: var(--gs-charcoal-deep);
	--tlcl-coral: var(--gs-violet);
	--tlcl-coral-soft: var(--gs-violet);
	--tlcl-green: var(--gs-aqua);
	--tlcl-green-btn: var(--gs-aqua-deep);
	--tlcl-mint: var(--gs-violet-wash);
	--tlcl-mint-soft: var(--gs-ivory-soft);
	--tlcl-yellow: var(--gs-gold);
	--tlcl-gold: var(--gs-gold);
	--tlcl-text: var(--gs-text);
	--tlcl-muted: var(--gs-muted);
	--tlcl-fog: var(--gs-ivory-soft);
	--tlcl-border: var(--gs-border);
	--tlcl-white: var(--gs-white);
	--tlcl-ink: var(--gs-charcoal);
}

/* Homepage reference wrapper */
.mb-html-home {
	--mb-navy: var(--gs-charcoal);
	--mb-coral: var(--gs-violet);
	--mb-green: var(--gs-aqua);
	--mb-mint: var(--gs-violet-wash);
	--mb-mint-soft: var(--gs-ivory-soft);
	--mb-fog: var(--gs-ivory-soft);
	--mb-yellow: var(--gs-gold);
	--mb-white: var(--gs-white);
	--mb-black: var(--gs-charcoal);
}

/* Interactive project index */
.mb-recipe-index-page {
	--ri-navy: var(--gs-charcoal);
	--ri-navy-2: var(--gs-charcoal-deep);
	--ri-ink: var(--gs-charcoal);
	--ri-muted: var(--gs-muted);
	--ri-coral: var(--gs-violet);
	--ri-mint: var(--gs-violet-wash);
	--ri-green: var(--gs-aqua);
	--ri-cream: var(--gs-ivory);
	--ri-yellow: var(--gs-gold);
	--ri-border: var(--gs-border);
}

/* Projects hub */
.mb-recipes-hub,
[class*="mb-recipes-hub"] {
	--rp-navy: var(--gs-charcoal);
	--rp-navy-2: var(--gs-charcoal-deep);
	--rp-coral: var(--gs-violet);
	--rp-green: var(--gs-aqua);
	--rp-mint: var(--gs-violet-wash);
	--rp-mint-soft: var(--gs-ivory-soft);
	--rp-yellow: var(--gs-gold);
	--rp-cream: var(--gs-ivory);
	--rp-ink: var(--gs-charcoal);
	--rp-muted: var(--gs-muted);
}

/* Search results */
.mb-search-page {
	--sr-navy: var(--gs-charcoal);
	--sr-deep: var(--gs-charcoal-deep);
	--sr-coral: var(--gs-violet);
	--sr-green: var(--gs-aqua);
	--sr-mint: var(--gs-violet-wash);
	--sr-yellow: var(--gs-gold);
	--sr-cream: var(--gs-ivory);
	--sr-ink: var(--gs-charcoal);
	--sr-muted: var(--gs-muted);
	--sr-border: var(--gs-border);
}

/* 404 */
.mb-404-page {
	--nf-navy: var(--gs-charcoal);
	--nf-deep: var(--gs-charcoal-deep);
	--nf-coral: var(--gs-violet);
	--nf-green: var(--gs-aqua);
	--nf-yellow: var(--gs-gold);
	--nf-mint: var(--gs-violet-wash);
	--nf-cream: var(--gs-ivory);
	--nf-ink: var(--gs-charcoal);
	--nf-muted: var(--gs-muted);
	--nf-border: var(--gs-border);
}

/* Author profiles */
.mb-author-page {
	--ap-navy: var(--gs-charcoal);
	--ap-ink: var(--gs-charcoal);
	--ap-muted: var(--gs-muted);
	--ap-mint: var(--gs-violet-wash);
	--ap-green: var(--gs-aqua);
	--ap-coral: var(--gs-violet);
	--ap-yellow: var(--gs-gold);
	--ap-cream: var(--gs-ivory);
	--ap-border: var(--gs-border);
}

/* Smart surprise (disabled in the controller, tokens kept for safety) */
.mb-smart-surprise-section {
	--ss-navy: var(--gs-charcoal);
	--ss-ink: var(--gs-charcoal);
	--ss-mint: var(--gs-violet-wash);
	--ss-green: var(--gs-aqua);
	--ss-coral: var(--gs-violet);
	--ss-yellow: var(--gs-gold);
	--ss-cream: var(--gs-ivory);
}

/* Inherited editorial About / Contact page shells */
.ger-about-page {
	--ger-ink: var(--gs-charcoal);
	--ger-deep: var(--gs-charcoal-deep);
	--ger-sage: var(--gs-muted);
	--ger-sage-soft: var(--gs-violet-wash);
	--ger-cream: var(--gs-ivory-soft);
	--ger-warm: var(--gs-ivory);
	--ger-gold: var(--gs-gold);
	--ger-rust: var(--gs-violet);
	--ger-white: var(--gs-white);
	--ger-muted: var(--gs-muted);
}

.ger-contact-page {
	--gerc-ink: var(--gs-charcoal);
	--gerc-deep: var(--gs-charcoal-deep);
	--gerc-sage: var(--gs-muted);
	--gerc-sage-soft: var(--gs-violet-wash);
	--gerc-cream: var(--gs-ivory-soft);
	--gerc-warm: var(--gs-ivory);
	--gerc-gold: var(--gs-gold);
	--gerc-rust: var(--gs-violet);
	--gerc-white: var(--gs-white);
	--gerc-muted: var(--gs-muted);
}

/* ==========================================================================
   2. The few inherited rules that hard-coded a hex instead of a token
   ========================================================================== */

/* Content links: swap the inherited green underline for Champagne Gold. */
.entry-content a:not([class]):not(.wp-block-group a),
.post-content a:not([class]):not(.wp-block-group a) {
	border-bottom-color: var(--gs-gold);
	box-shadow: inset 0 -1px 0 var(--gs-gold);
	color: var(--gs-charcoal);
}

.entry-content a:not([class]):not(.wp-block-group a):hover,
.post-content a:not([class]):not(.wp-block-group a):hover {
	box-shadow: inset 0 -24px 0 var(--gs-violet-wash);
	color: var(--gs-violet-deep);
}

body {
	--comment-rating-star-color: var(--gs-gold);
}

/* ==========================================================================
   3. Dark mode
   ========================================================================== */

html[data-mb-theme="dark"] {
	--gs-ivory: #232220;
	--gs-ivory-soft: #1e1d1b;
	--gs-charcoal: #f7f3ec;
	--gs-charcoal-deep: #ffffff;
	--gs-violet: #b18cff;
	--gs-violet-deep: #cbb2ff;
	--gs-violet-wash: #2a2340;
	--gs-gold: #d9b978;
	--gs-aqua: #23d7d0;
	--gs-text: #e8e3da;
	--gs-muted: #b3ada3;
	--gs-border: #3a3835;
	--gs-white: #232220;
}

html[data-mb-theme="dark"] .mb-theme-icon-moon,
html[data-mb-theme="dark"] .mb-theme-icon-sun {
	color: var(--gs-gold);
}

/* ==========================================================================
   4. Accessibility — visible keyboard focus everywhere
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gs-violet);
	outline-offset: 2px;
	border-radius: 4px;
}

html[data-mb-theme="dark"] a:focus-visible,
html[data-mb-theme="dark"] button:focus-visible {
	outline-color: #b18cff;
}

/* ==========================================================================
   6. Header category browse bar
   Seven full category names have to stay readable, so the browse bar is
   allowed to run wider than the 1180px reading column, the labels sit at
   12px, and the separator dot moves to the trailing edge so a wrapped row
   never starts with one.
   ========================================================================== */

.mb-desktop-subbar {
	height: auto;
	min-height: 49px;
}

.mb-header-sub-inner {
	width: min(1400px, calc(100% - 40px));
	grid-template-columns: minmax(0, 1fr) 205px;
	height: auto;
	min-height: 48px;
	align-items: center;
}

.mb-desktop-subbar.mb-nav-stuck {
	height: auto;
	min-height: 49px;
}

.mb-desktop-subbar.mb-nav-stuck .mb-header-sub-inner {
	width: min(1400px, calc(100% - 40px));
}

.mb-secondary-menu {
	flex-wrap: wrap;
	height: auto;
	row-gap: 0;
}

.mb-secondary-menu > li > a {
	padding: 12px 16px 12px 0;
	font-size: 12px;
	letter-spacing: .01em;
}

.mb-secondary-menu > li > a:after {
	right: 16px;
	left: 0;
	bottom: 6px;
}

.mb-secondary-menu > li + li:before {
	display: none;
}

.mb-secondary-menu > li:not(:last-child):after {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gs-gold);
	content: "";
	transform: translateY(-50%);
}

@media (max-width: 1024px) {
	.mb-header-sub-inner {
		width: calc(100% - 24px);
	}
}

/* ==========================================================================
   7. Footer — brand line, category columns and real tap targets
   ========================================================================== */

.gs-footer-explore {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	margin-top: 26px;
}

.gs-footer-brand-name {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
}

.gs-footer-brand-tagline {
	margin: 0;
	max-width: 28rem;
	font-size: .95rem;
	line-height: 1.6;
	color: #ded7cc;
}

.gs-footer-col-title {
	margin: 0 0 .7rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gs-gold);
}

.gs-footer-categories ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-footer-categories li {
	margin: 0;
}

.gs-footer-categories a {
	display: inline-block;
	padding-block: 8px;
	font-size: .95rem;
	line-height: 1.35;
	color: #fff;
	text-decoration: none;
	box-shadow: none;
	border: 0;
}

.gs-footer-categories a:hover,
.gs-footer-categories a:focus-visible {
	color: var(--gs-gold);
}

.mb-footer-link-column a,
.mb-footer-copyright a {
	display: inline-block;
	padding-block: 9px;
}

@media (max-width: 782px) {
	.gs-footer-explore {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.mb-footer-link-column a,
	.mb-footer-copyright a {
		padding-block: 11px;
	}
}

@media (max-width: 460px) {
	.gs-footer-categories ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   8. Contrast corrections found during the accessibility pass
   ========================================================================== */

/* Small gold numerals were 2.4:1 on white — use the deeper gold. */
.ger-about-trust-item span,
.ger-contact-reasons span,
.ger-about-step,
.ger-contact-card-number {
	color: var(--gs-gold-deep);
}

/* Kickers that sit on the dark panels need the light gold, not body ink. */
.ger-about-principles-card .ger-about-kicker,
.ger-about-cta .ger-about-kicker,
.ger-about-kicker-light,
.ger-contact-trust .ger-contact-kicker,
.ger-contact-kicker-light {
	color: var(--gs-gold);
}

/* ==========================================================================
   9. Inherited dark panels — recolour the hard-coded green gradients
   ========================================================================== */

.ger-about-cta {
	background:
		linear-gradient(rgba(36, 36, 36, .96), rgba(36, 36, 36, .96)),
		linear-gradient(135deg, #242424, #3d3a35);
}

.ger-about-cta-title {
	color: #fff;
}

.ger-about-cta-text {
	color: rgba(255, 255, 255, .80);
}

.ger-contact-trust-copy {
	color: rgba(255, 255, 255, .80);
}

.ger-contact-trust-links a,
.ger-contact-trust-links a strong,
.ger-contact-trust-links a span {
	color: #fff;
}

.ger-about-principles-card,
.ger-about-principles-card p,
.ger-about-principles-card strong {
	color: #fff;
}

/* Footer wordmark accent was 2.2:1 on charcoal. */
body.ada-controller-colors .mb-footer-heading span,
.mb-footer-heading span {
	color: #b18cff !important;
}

/* ==========================================================================
   10. Remaining small-text contrast and minimum sizes
   ========================================================================== */

.ger-contact-form-eyebrow,
.ger-about-eyebrow,
.ger-about-kicker,
.ger-contact-kicker,
.ger-about-team-role {
	color: var(--gs-gold-deep);
}

/* Kickers that sit on the dark panels keep the light gold. */
.ger-about-principles-card .ger-about-kicker,
.ger-about-cta .ger-about-kicker,
.ger-about-kicker-light,
.ger-contact-trust .ger-contact-kicker,
.ger-contact-kicker-light {
	color: var(--gs-gold);
}

.mb-author-eyebrow,
.mb-ri-card-category,
.mb-search-card-category {
	color: var(--gs-gold-deep);
	font-size: 11px;
}

.ger-contact-form-eyebrow {
	font-size: 11px;
}

/* 404 page — kicker contrast and minimum size. */
.mb-404-kicker {
	color: var(--gs-gold-deep);
	font-size: 11px;
}

.mb-404-page .mb-404-note,
.mb-404-page p {
	color: var(--gs-text);
}

/* Archive headings: sentence case reads better with the new type stack. */
.mb-all-title,
.mb-feature-title {
	text-transform: none;
}

/* Mobile panel: 44px minimum tap target on the category list. */
.mb-mobile-panel .mb-mobile-secondary-menu > li > a,
.mb-mobile-panel .mb-mobile-primary-menu > li > a {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 14px;
	padding-right: 0;
}

.mb-mobile-panel .mb-mobile-secondary-menu > li:not(:last-child):after {
	display: none;
}

/* ==========================================================================
   11. Mobile navigation panel — the inherited overlay was navy
   ========================================================================== */

@media (max-width: 1024px) {
	.mb-mobile-panel {
		background: rgba(36, 36, 36, .98);
	}

	.mb-mobile-primary-menu > li:first-child > a {
		border-color: var(--gs-gold);
	}

	.mb-mobile-secondary-menu > li > a {
		font-size: 14px;
		letter-spacing: .06em;
	}

	.mb-mobile-primary-menu > li > a {
		font-size: 18px;
	}
}

html[data-mb-theme="dark"] .mb-mobile-panel {
	background: rgba(23, 22, 21, .98);
}

/* ==========================================================================
   12. Author profile pages — the inherited sheet hard-codes a sage/green
   accent that the token layer cannot reach.
   ========================================================================== */

.mb-author-role {
	color: var(--gs-gold-deep);
}

.mb-author-hero {
	background:
		radial-gradient(circle at 86% 10%, rgba(122, 46, 255, .12), transparent 30%),
		linear-gradient(135deg, var(--gs-ivory) 0%, var(--gs-ivory-soft) 100%);
}

.mb-author-page {
	--ap-mint: #f1ecfa;
	--ap-green: var(--gs-violet);
}

html[data-mb-theme="dark"] .mb-author-role {
	color: #d9b978;
}

html[data-mb-theme="dark"] .mb-author-hero {
	background:
		radial-gradient(circle at 86% 10%, rgba(177, 140, 255, .10), transparent 30%),
		linear-gradient(135deg, #1c1b19, #232220);
}

/* ==========================================================================
   13. Last inherited hard-coded navy / sage values
   ========================================================================== */

.mb-global-footer {
	background: var(--gs-charcoal-deep) !important;
}

.mb-newsletter-popup__media-wrap {
	background: linear-gradient(165deg, #3a3835 0%, var(--gs-charcoal-deep) 60%, #3a3835 100%);
}

.mb-author-breadcrumbs a {
	color: var(--gs-gold-deep);
}

.mb-author-trust a {
	color: var(--gs-gold) !important;
}

.mb-author-empty {
	background: var(--gs-ivory-soft);
	border-color: var(--gs-border);
}

html[data-mb-theme="dark"] .mb-global-footer {
	background: #1c1b19 !important;
}

html[data-mb-theme="dark"] .mb-author-breadcrumbs a {
	color: #d9b978;
}

html[data-mb-theme="dark"] .mb-author-empty {
	background: #232220;
	border-color: #3a3733;
}

/* Search page: replace the last inherited cream gradients and Oswald stack. */
.mb-search-hero {
	background: linear-gradient(135deg, var(--gs-ivory) 0%, var(--gs-ivory-soft) 100%);
}

.mb-search-empty-state {
	background: linear-gradient(135deg, var(--gs-ivory) 0%, var(--gs-ivory-soft) 100%);
}

.mb-search-hero h1,
.mb-search-hero h1 strong {
	font-family: inherit !important;
}

.mb-search-hero h1 span {
	color: var(--gs-muted) !important;
}

.mb-search-hero-text {
	color: var(--gs-text);
}

html[data-mb-theme="dark"] .mb-search-hero,
html[data-mb-theme="dark"] .mb-search-empty-state {
	background: linear-gradient(135deg, #1c1b19 0%, #232220 100%);
}

html[data-mb-theme="dark"] .mb-search-hero h1 span,
html[data-mb-theme="dark"] .mb-search-hero-text {
	color: #b6b0a5 !important;
}

/* Tablet browse bar: below the width where seven full category names fit on
   one line, the search moves to its own row so the names keep their size
   instead of spilling onto a third line. */
@media (max-width: 1340px) and (min-width: 768px) {
	.mb-header-sub-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
		padding-block: 4px;
	}

	.mb-header-sub-inner .mb-desktop-search {
		width: 100%;
		max-width: 340px;
	}
}