/* =============================================================================
   BASE — design tokens + base elements + utility classes
   -----------------------------------------------------------------------------
   Every color and font here comes from Elementor → Site Settings:
     Global Colors  → --e-global-color-{id}
     Global Fonts   → --e-global-typography-{id}-*
   Hex values below are ONLY fallbacks for pages rendered without the kit.
   Never hard-code a brand color in theme CSS; add a token instead.

   Most styling belongs in Elementor (kit Theme Style + global presets). This
   file only covers what Elementor can't: WordPress/WooCommerce markup the
   theme renders, and a few opt-in utility classes for widgets.
   ============================================================================= */

body {
	/* Colors — ids match config/brand.json and Elementor global color ids. */
	--color-primary:       var(--e-global-color-primary, #1E3A5F);
	--color-primary-hover: var(--e-global-color-primary-hover, #152B47);
	--color-secondary:     var(--e-global-color-secondary, #5B8A8F);
	--color-accent:        var(--e-global-color-accent, #C8963E);
	--color-heading:       var(--e-global-color-heading, #111827);
	--color-text:          var(--e-global-color-text, #3D4451);
	--color-muted:         var(--e-global-color-muted, #6B7280);
	--color-on-dark:       var(--e-global-color-on-dark, #FFFFFF);
	--color-surface:       var(--e-global-color-surface, #FFFFFF);
	--color-card:          var(--e-global-color-card, #FFFFFF);
	--color-surface-alt:   var(--e-global-color-surface-alt, #F3F5F7);
	--color-surface-dark:  var(--e-global-color-surface-dark, #0F1F33);
	--color-border:        var(--e-global-color-border, #E2E6EA);
	--color-success:       var(--e-global-color-success, #1F8A4C);
	--color-error:         var(--e-global-color-error, #C0392B);

	/* Fonts — Elementor "Heading" (primary) and "Body" (text) global fonts. */
	--font-heading: var(--e-global-typography-primary-font-family, "Manrope"), system-ui, sans-serif;
	--font-body:    var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;

	/* Type presets used by theme-rendered markup (same presets as Elementor). */
	--text-sm:   var(--e-global-typography-body-sm-font-size, 14px);
	--text-base: var(--e-global-typography-text-font-size, 16px);
	--text-lg:   var(--e-global-typography-body-lg-font-size, 18px);
	--text-h6:   var(--e-global-typography-h6-font-size, 18px);
	--text-h5:   var(--e-global-typography-h5-font-size, 21px);
	--text-h4:   var(--e-global-typography-h4-font-size, 26px);
	--text-h3:   var(--e-global-typography-h3-font-size, 34px);
	--weight-heading: var(--e-global-typography-primary-font-weight, 700);
	--button-font-size:   var(--e-global-typography-button-font-size, 15px);
	--button-font-weight: var(--e-global-typography-button-font-weight, 600);

	/* Scale (not brand-specific). --radius-* / --container-width: inc/brand/design-tokens.php */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
	--shadow-md: 0 8px 24px rgb(16 24 40 / 8%);
	--transition: 0.2s ease;
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* -----------------------------------------------------------------------------
   Base elements — the kit (.elementor-kit-N) overrides these where it sets values.
   ----------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Programmatic focus targets (WC notices, skip-link targets) don't need a ring. */
[tabindex="-1"]:focus {
	outline: none;
}

/* Hello Elementor's reset tints table rows and draws borders; theme tables opt out per component. */
.woocommerce table :is(th, td) {
	border-color: var(--color-border);
}

::selection {
	background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Buttons that are controls, not CTAs (qty steppers, toggles, carousel arrows).
   The kit styles every <button> as a CTA; add .btn-reset to opt out. */
body button.btn-reset,
body button.btn-reset:hover,
body button.btn-reset:focus {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	box-shadow: none;
}

/* Line icons (uploaded SVGs with fill="none" + a stroke) stay outlined: Elementor's icon widgets
   put a fill color on the <svg>, which floods them. They take the text color (stroke="currentColor"). */
.elementor-widget svg[fill="none"][stroke] :not([fill]),
.elementor-widget svg[fill="none"] [stroke]:not([fill]) {
	fill: none;
}

/* -----------------------------------------------------------------------------
   Utility classes — add in Elementor → Advanced → CSS Classes
   -----------------------------------------------------------------------------
   Button widget:
     btn-outline   transparent, primary border/text; fills on hover
     btn-light     white button for dark/photo sections
     btn-ghost     white outline for dark/photo sections
     btn-link      underlined text link, no box
     btn-text      plain text link (no box, no underline)
   Any widget/container:
     text-balance  balanced line breaks for headings
   ----------------------------------------------------------------------------- */

.elementor-widget.btn-outline .elementor-button {
	background-color: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.elementor-widget.btn-outline .elementor-button:hover,
.elementor-widget.btn-outline .elementor-button:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.elementor-widget.btn-light .elementor-button {
	background-color: var(--color-card);
	color: var(--color-primary);
}

.elementor-widget.btn-light .elementor-button:hover,
.elementor-widget.btn-light .elementor-button:focus-visible {
	background-color: var(--color-surface-alt);
	color: var(--color-primary-hover);
}

.elementor-widget.btn-ghost .elementor-button {
	background-color: transparent;
	color: var(--color-on-dark);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.elementor-widget.btn-ghost .elementor-button:hover,
.elementor-widget.btn-ghost .elementor-button:focus-visible {
	background-color: var(--color-on-dark);
	color: var(--color-primary);
}

.elementor-widget.btn-link .elementor-button {
	padding: 0;
	background: none;
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.elementor-widget.btn-link .elementor-button:hover,
.elementor-widget.btn-link .elementor-button:focus-visible {
	background: none;
	color: var(--color-primary-hover);
}

.elementor-widget.btn-text .elementor-button {
	padding: 0;
	background: none;
	color: var(--color-primary);
}

.elementor-widget.btn-text .elementor-button:hover,
.elementor-widget.btn-text .elementor-button:focus-visible {
	background: none;
	color: var(--color-primary-hover);
}

.text-balance,
.text-balance :is(h1, h2, h3, h4, h5, h6, p) {
	text-wrap: balance;
}

/* -----------------------------------------------------------------------------
   Header icon buttons — Button widgets with CSS classes
     "nova-header-icon nova-header-cart"     (CSS ID cartButton — live count badge)
     "nova-header-icon nova-header-account"  (links to My account)
   Icon color comes from the widget's Text Color global; text is screen-reader only.
   ----------------------------------------------------------------------------- */

/* Same box at rest and on hover (size comes from the widget's padding): nothing moves. */
.elementor-widget.nova-header-icon .elementor-button {
	position: relative;
	padding: var(--space-2);
}

.elementor-widget.nova-header-icon .elementor-button,
.elementor-widget.nova-header-icon .elementor-button:hover,
.elementor-widget.nova-header-icon .elementor-button:focus-visible {
	background: transparent;
	box-shadow: none;
	transform: none;
}

.elementor-widget.nova-header-icon .elementor-button-icon {
	margin: 0;
}

/* No hover animation on the header icons (color changes instantly). */
.elementor-widget.nova-header-icon,
.elementor-widget.nova-header-icon .elementor-button,
.elementor-widget.nova-header-icon .elementor-button *,
body .nova-mobile-nav-cta a.nova-mobile-nav-cta__cart-link,
body .nova-mobile-nav-cta a.nova-mobile-nav-cta__cart-link * {
	transition: none;
	animation: none;
}

.elementor-widget.nova-header-icon .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nova-cart-count {
	position: absolute;
	top: -6px;
	right: -12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.nova-cart-count[hidden],
.nova-cart-count:empty {
	display: none;
}

/* Mobile menu — Shop + Cart + My account CTAs cloned under the dropdown (assets/js/mobile-nav-cta.js). */
.nova-mobile-nav-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5) var(--space-5);
	border-top: 1px solid var(--color-border);
	list-style: none;
}

.nova-mobile-nav-cta__item {
	margin: 0;
}

.nova-mobile-nav-cta .nova-mobile-nav-cta__item[hidden] {
	display: none;
}

/* Header icon spacing doesn't belong in the menu: full-width items. */
.nova-mobile-nav-cta .nova-mobile-nav-cta__item.elementor-element {
	width: 100%;
	margin: 0 !important;
	--margin-top: 0;
	--margin-right: 0;
	--margin-bottom: 0;
	--margin-left: 0;
}

/* Cart count: a pill after the label instead of a corner badge. */
.nova-mobile-nav-cta .nova-cart-count {
	position: static;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	margin-left: var(--space-1, 4px);
	font-size: 12px;
	line-height: 1;
	transform: none;
}

body .nova-mobile-nav-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-button, 6px);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-decoration: none;
}

/* These links live inside the nav-menu dropdown, whose per-widget color rules
   are id-scoped (.elementor-N .elementor-element-X …) — !important is the only
   way to keep CTA colors without reaching for element ids. */
body .nova-mobile-nav-cta a.nova-mobile-nav-cta__shop-link {
	background: var(--color-primary) !important;
	color: var(--color-on-dark) !important;
}

body .nova-mobile-nav-cta :is(a.nova-mobile-nav-cta__cart-link, a.nova-mobile-nav-cta__account-link) {
	position: relative;
	background: transparent !important;
	color: var(--color-primary) !important;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.nova-mobile-nav-cta :is(.nova-mobile-nav-cta__cart-link, .nova-mobile-nav-cta__account-link) svg path {
	stroke: currentColor;
}

/* Form fields are always white, whatever the brand's surface color (kit, Fluent Forms, WooCommerce). */
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select),
body .fluentform .ff-el-form-control,
body .select2-container--default .select2-selection--single {
	background-color: white !important;
}

/* Form submit buttons (Fluent Forms) look like every other button: kit radius + padding here;
   colors + Button preset as globals on the form widget (`wp peptide normalize`). */
body .fluentform .ff-btn-submit,
body .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	padding: var(--button-padding, 14px 28px);
	border: 0;
	border-radius: var(--radius-button, 6px);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	box-shadow: none;
	opacity: 1;
}

body .fluentform .ff-btn-submit:hover,
body .fluentform .ff-btn-submit:focus-visible {
	background-color: var(--color-primary-hover);
	color: var(--color-on-dark);
	opacity: 1;
}

/* -----------------------------------------------------------------------------
   Plain WordPress content (legal pages, posts) outside Elementor
   ----------------------------------------------------------------------------- */

.page-content > :is(p, ul, ol) {
	max-width: 72ch;
}

.screen-reader-text {
	position: absolute !important; /* WP core pattern — must never be overridden. */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}