/**
 * MoodFramework · GoToTop Edition — advanced design system.
 *
 * Loaded after main.css so existing sites keep their structure while the
 * configurable typography, surfaces and dark variants take precedence.
 */

:root {
	--mood-font-display: var(--mood-font-heading);
	--mood-font-ui: var(--mood-font-body);
	--mood-body-size: 17px;
	--mood-body-weight: 400;
	--mood-body-line-height: 1.7;
	--mood-heading-weight: 800;
	--mood-display-weight: 800;
	--mood-ui-weight: 700;
	--mood-heading-tracking: -0.035em;
	--mood-display-tracking: -0.045em;
	--mood-page-bg: #f8fafc;
	--mood-bg-brand-soft: #fdf1f7;
	--mood-card-bg: #fff;
	--mood-card-border: #e2e8f0;
	--mood-dark-1: #0f172a;
	--mood-dark-2: #24102b;
	--mood-dark-3: #073b43;
	--mood-dark-4: #171717;
	--mood-dark-text: #fff;
	--mood-dark-muted: #cbd5e1;
	--mood-dark-accent: #a5f3fc;
	--mood-gradient-start: #111827;
	--mood-gradient-middle: #5b174d;
	--mood-gradient-end: #0d5961;
	--mood-header-bg: #fff;
	--mood-header-text: #0f172a;
	--mood-header-border: #e2e8f0;
	--mood-header-transparent-text: #fff;
	--mood-header-scrolled-bg: #0f172a;
	--mood-header-scrolled-text: #fff;
	--mood-button-radius: 999px;
	--mood-container-max: 1180px;
	--mood-container: min(var(--mood-container-max), calc(100vw - 40px));
}

/* Typography ------------------------------------------------------------- */
body {
	font-family: var(--mood-font-body, ui-sans-serif, system-ui, sans-serif);
	font-size: var(--mood-body-size);
	font-weight: var(--mood-body-weight);
	line-height: var(--mood-body-line-height);
	color: var(--mood-ink);
	background: var(--mood-page-bg);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--mood-font-heading, var(--mood-font-body));
	font-weight: var(--mood-heading-weight);
	letter-spacing: var(--mood-heading-tracking);
}

h1,
.mood-hero h1,
.moodframework-hero h1,
.mood-entry__title,
.woocommerce div.product .product_title {
	font-family: var(--mood-font-display, var(--mood-font-heading));
	font-weight: var(--mood-display-weight);
	letter-spacing: var(--mood-display-tracking);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.main-navigation,
.mood-button,
.wp-block-button__link,
.mood-eyebrow,
.mood-card__meta,
.mood-entry__meta,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--mood-font-ui, var(--mood-font-body));
}

.main-navigation a,
.mood-button,
.wp-block-button__link,
.mood-eyebrow {
	font-weight: var(--mood-ui-weight);
}

/* Global geometry and surfaces ----------------------------------------- */
.mood-site {
	background: var(--mood-bg);
}

.mood-container,
.alignwide {
	width: min(var(--mood-container-max), calc(100vw - 40px));
	max-width: var(--mood-container-max);
}

.moodframework-container--wide {
	width: min(calc(var(--mood-container-max) + 180px), calc(100vw - 40px));
	max-width: calc(var(--mood-container-max) + 180px);
}

.moodframework-container--narrow {
	width: min(860px, calc(100vw - 40px));
}

.mood-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.menu-toggle,
.woocommerce .quantity .qty {
	border-radius: var(--mood-button-radius);
}

.mood-card,
.mood-entry,
.mood-feature-card,
.mood-price-card,
.mood-glass-card,
.mood-testimonial,
.mood-accordion,
.mood-tabs,
.moodframework-form-main,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .mood-woo ul.products li.product,
.woocommerce-page .mood-woo ul.products li.product {
	border-color: var(--mood-card-border);
	border-radius: var(--mood-radius);
}

.mood-card,
.mood-entry,
.mood-feature-card,
.mood-price-card,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .mood-woo ul.products li.product,
.woocommerce-page .mood-woo ul.products li.product {
	background: var(--mood-card-bg);
}

.mood-card,
.mood-entry,
.mood-feature-card,
.mood-price-card,
.moodframework-split__media,
.woocommerce .mood-woo--single div.product,
.woocommerce-page .mood-woo--single div.product {
	box-shadow: var(--mood-shadow);
}

.moodframework-split__media,
.moodframework-gallery figure,
.woocommerce .mood-woo--single div.product,
.woocommerce-page .mood-woo--single div.product {
	border-radius: calc(var(--mood-radius) + 6px);
}

/* Header ---------------------------------------------------------------- */
.site-header {
	background: var(--mood-header-bg);
	border-bottom-color: var(--mood-header-border);
	color: var(--mood-header-text);
}

.site-header .main-navigation a,
.site-header .site-title,
.site-header .menu-toggle {
	color: inherit;
}

.site-header .site-description {
	color: color-mix(in srgb, var(--mood-header-text) 68%, transparent);
}

.main-navigation .sub-menu {
	background: var(--mood-bg);
	border-color: var(--mood-line);
	color: var(--mood-ink);
}

.mood-header-transparent .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--mood-header-transparent-text);
}

.mood-header-transparent .site-header.is-scrolled {
	background: var(--mood-header-scrolled-bg);
	color: var(--mood-header-scrolled-text);
	border-bottom-color: color-mix(in srgb, var(--mood-header-scrolled-text) 16%, transparent);
}

.mood-header-transparent .site-header:not(.is-scrolled) .main-navigation > ul > li > a,
.mood-header-transparent .site-header:not(.is-scrolled) .site-title,
.mood-header-transparent .site-header:not(.is-scrolled) .menu-toggle {
	color: var(--mood-header-transparent-text);
}

.mood-header-transparent .site-header.is-scrolled .main-navigation > ul > li > a,
.mood-header-transparent .site-header.is-scrolled .site-title,
.mood-header-transparent .site-header.is-scrolled .menu-toggle {
	color: var(--mood-header-scrolled-text);
}

/* Buttons and focus ----------------------------------------------------- */
.mood-button--primary,
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: linear-gradient(135deg, var(--mood-accent), var(--mood-secondary));
	color: #fff;
	box-shadow: 0 14px 34px color-mix(in srgb, var(--mood-accent) 26%, transparent);
}

.mood-button--primary:hover,
.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: #fff;
	box-shadow: 0 20px 48px color-mix(in srgb, var(--mood-accent) 34%, transparent);
}

.mood-button--ghost,
.is-style-outline .wp-block-button__link {
	color: var(--mood-accent);
	border-color: color-mix(in srgb, var(--mood-accent) 34%, transparent);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mood-secondary) 70%, #fff);
	outline-offset: 3px;
}

/* MoodFramework tones -------------------------------------------------- */
.mood-section--dark,
.moodframework-tone--dark {
	background: var(--mood-dark-1);
	color: var(--mood-dark-text);
}

.moodframework-tone--dark-2 {
	background: var(--mood-dark-2);
	color: var(--mood-dark-text);
}

.moodframework-tone--dark-3 {
	background: var(--mood-dark-3);
	color: var(--mood-dark-text);
}

.moodframework-tone--dark-4 {
	background: var(--mood-dark-4);
	color: var(--mood-dark-text);
}

.moodframework-tone--white {
	background: var(--mood-bg);
	color: var(--mood-ink);
}

.moodframework-tone--light,
.moodframework-tone--soft {
	background: var(--mood-bg-soft);
	color: var(--mood-ink);
}

.moodframework-tone--brand-soft {
	background: var(--mood-bg-brand-soft);
	color: var(--mood-ink);
}

.moodframework-tone--gradient {
	background-color: var(--mood-gradient-start);
	background-image:
		radial-gradient(circle at 15% 18%, color-mix(in srgb, var(--mood-secondary) 42%, transparent), transparent 31%),
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--mood-accent) 34%, transparent), transparent 28%),
		linear-gradient(135deg, var(--mood-gradient-start) 0%, var(--mood-gradient-middle) 54%, var(--mood-gradient-end) 100%);
	color: var(--mood-dark-text);
}

:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h1,
:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h2,
:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h3,
:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h4,
:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h5,
:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) h6 {
	color: var(--mood-dark-text);
}

:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(
	.moodframework-section__header p,
	.moodframework-rich,
	.moodframework-lead,
	.mood-hero__subtitle,
	.moodframework-subtitle,
	.mood-entry__meta
) {
	color: var(--mood-dark-muted);
}

:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-eyebrow, .moodframework-eyebrow) {
	color: var(--mood-dark-accent);
}

:is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) .mood-eyebrow::before {
	background: var(--mood-dark-accent);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--mood-dark-accent) 18%, transparent);
}

.moodframework-hero::after,
.mood-hero::after {
	background: radial-gradient(circle, color-mix(in srgb, var(--mood-accent) 46%, transparent), transparent 68%);
}

.moodframework-card__icon {
	background: color-mix(in srgb, var(--mood-accent) 11%, transparent);
	color: var(--mood-accent);
}

/* Cards within dark sections: selectable light or glass treatment. */
.mood-dark-cards-light :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) {
	background: var(--mood-card-bg);
	border-color: var(--mood-card-border);
	color: var(--mood-ink);
}

.mood-dark-cards-light :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) :is(h2, h3, h4, p, div) {
	color: inherit;
}

.mood-dark-cards-glass :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) {
	background: color-mix(in srgb, #fff 9%, transparent);
	border-color: color-mix(in srgb, #fff 18%, transparent);
	color: var(--mood-dark-text);
	box-shadow: 0 18px 55px rgba(0, 0, 0, .16);
	backdrop-filter: blur(18px);
}

.mood-dark-cards-glass :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) :is(h2, h3, h4) {
	color: var(--mood-dark-text);
}

.mood-dark-cards-glass :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) :is(p, .moodframework-rich, .mood-entry__meta) {
	color: var(--mood-dark-muted);
}

.mood-dark-cards-glass :is(
	.moodframework-tone--dark,
	.moodframework-tone--dark-2,
	.moodframework-tone--dark-3,
	.moodframework-tone--dark-4,
	.moodframework-tone--gradient
) .moodframework-card__icon {
	background: color-mix(in srgb, #fff 12%, transparent);
	color: var(--mood-dark-accent);
}

/* Forms ----------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
	border-color: var(--mood-line);
	background: var(--mood-bg);
	color: var(--mood-ink);
	border-radius: max(10px, calc(var(--mood-radius) * .55));
}

.moodframework-form-section--avia,
.moodframework-form-section--clean,
.moodframework-form-section--card {
	background: var(--mood-bg-soft);
}

.moodframework-form-section--dark {
	background: var(--mood-dark-1);
	color: var(--mood-dark-text);
}

.moodframework-form-section--dark .moodframework-section__header p,
.moodframework-form-section--dark .moodframework-form-note {
	color: var(--mood-dark-muted);
}

/* WooCommerce ----------------------------------------------------------- */
.woocommerce,
.woocommerce-page,
.mood-woo {
	color: var(--mood-ink);
}

.woocommerce .mood-woo--single div.product,
.woocommerce-page .mood-woo--single div.product,
.woocommerce .mood-woo--single div.product .woocommerce-tabs .panel,
.woocommerce .mood-woo--single div.product .woocommerce-tabs ul.tabs li,
.woocommerce #review_form #respond {
	background: var(--mood-bg);
	border-color: var(--mood-line);
}

.woocommerce .mood-woo--single div.product .woocommerce-product-details__short-description,
.woocommerce .mood-woo--single div.product .product_meta,
.woocommerce .mood-woo .woocommerce-result-count,
.woocommerce .mood-woo .woocommerce-breadcrumb {
	color: var(--mood-muted);
}

/* Compatibility fallback for browsers without color-mix(). ------------- */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.site-header .site-description { color: var(--mood-muted); }
	.mood-header-transparent .site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .16); }
	.mood-button--primary,
	.wp-block-button__link { box-shadow: 0 14px 34px rgba(15, 23, 42, .18); }
	.moodframework-tone--gradient {
		background-image: linear-gradient(135deg, var(--mood-gradient-start) 0%, var(--mood-gradient-middle) 54%, var(--mood-gradient-end) 100%);
	}
	.moodframework-hero::after,
	.mood-hero::after { background: radial-gradient(circle, rgba(217, 8, 113, .42), transparent 68%); }
	.moodframework-card__icon { background: rgba(217, 8, 113, .10); }
	.mood-dark-cards-glass :is(
		.moodframework-tone--dark,
		.moodframework-tone--dark-2,
		.moodframework-tone--dark-3,
		.moodframework-tone--dark-4,
		.moodframework-tone--gradient
	) :is(.mood-card, .mood-testimonial, .mood-accordion, .mood-tabs) {
		background: rgba(255, 255, 255, .09);
		border-color: rgba(255, 255, 255, .18);
	}
}

@media (max-width: 680px) {
	:root {
		--mood-container: min(var(--mood-container-max), calc(100vw - 28px));
	}

	body {
		font-size: var(--mood-body-size);
	}

	.mood-container,
	.alignwide,
	.moodframework-container--wide,
	.moodframework-container--narrow {
		width: calc(100vw - 28px);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}
