/* ==========================================================================
   VIC Theme — Elementor bridge
   Loaded only when Elementor is active, after Elementor's own CSS.

   Purpose: Elementor CONSUMES the VIC design system instead of creating a
   second one. These rules replace Elementor's generic defaults (gray buttons,
   line-height: 1 headings, unspaced paragraphs) with the theme tokens.

   Specificity is kept just above Elementor's defaults, so any style an editor
   sets on a specific widget in Elementor still wins.

   Tip for editors: Elementor fields accept CSS variables with the "Custom"
   unit, e.g. padding  var(--section-pad-y)  or gap  var(--grid-gap).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme Builder header — sticky, white, subtle border (CLAUDE.md §5, §20).
   Do not also enable Elementor "Motion Effects → Sticky" on the header.
   -------------------------------------------------------------------------- */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--color-background);
	border-block-end: 1px solid var(--color-border);
}

.admin-bar .elementor-location-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .elementor-location-header {
		top: 0;
	}
}

/* --------------------------------------------------------------------------
   Heading widget — Elementor forces line-height: 1; restore the type scale.
   Size, weight and tracking come from base.css (h1–h6) when the widget's
   Typography is left at default.
   -------------------------------------------------------------------------- */
h1.elementor-heading-title { line-height: var(--text-h1-line); }
h2.elementor-heading-title { line-height: var(--text-h2-line); }
h3.elementor-heading-title { line-height: var(--text-h3-line); }
h4.elementor-heading-title { line-height: var(--text-h4-line); }
h5.elementor-heading-title { line-height: var(--text-h5-line); }
h6.elementor-heading-title { line-height: var(--text-h6-line); }
p.elementor-heading-title,
div.elementor-heading-title,
span.elementor-heading-title { line-height: var(--text-body-line); }

/* --------------------------------------------------------------------------
   Text Editor widget — the theme reset removes default margins; restore
   paragraph rhythm with tokens.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor :is(p, ul, ol, blockquote) + :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
	margin-block-start: var(--gap-paragraph);
}

.elementor-widget-text-editor :is(ul, ol) {
	padding-inline-start: var(--space-6);
}

.elementor-widget-text-editor li + li {
	margin-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   Button widget — styles, variants (Default/Solid/Outline/Ghost/Underline/
   Text Link), sizes and hover motions live in assets/css/buttons.css, which
   also keeps the legacy CSS classes  vic-button-secondary / vic-button-large
   and the .on-dark behaviour working.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Editor-only notices from VIC widgets (never rendered for visitors).
   -------------------------------------------------------------------------- */
.vic-editor-notice {
	padding: var(--space-3) var(--space-4);
	border: 1px dashed var(--color-warning);
	border-radius: var(--radius-control);
	background-color: var(--color-surface-soft);
	color: var(--color-heading);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

/* --------------------------------------------------------------------------
   Elementor's own Nav Menu widget (not used for the main navigation — see
   CLAUDE.md §39): keep the theme's ↗ external-link icon aligned if it is used
   elsewhere.
   -------------------------------------------------------------------------- */
.elementor-nav-menu a .icon {
	flex: none;
	margin-inline-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   VIC widgets inside Elementor — the widget wrapper provides no extra spacing;
   component spacing comes from tokens.
   -------------------------------------------------------------------------- */
.elementor-widget-vic-product-grid .grid--cards {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Container "VIC Layout" presets (inc/elementor-design-system.php).
   Each preset only sets the CSS variables Elementor's container reads, so
   values stay responsive (tokens step per breakpoint) and any padding / gap /
   border an editor sets on a specific container still wins (higher specificity).
   -------------------------------------------------------------------------- */

/* Section Spacing — vertical padding */
.e-con.vic-section--compact {
	--padding-top: var(--section-pad-y-compact);
	--padding-bottom: var(--section-pad-y-compact);
}

.e-con.vic-section--default {
	--padding-top: var(--section-pad-y);
	--padding-bottom: var(--section-pad-y);
}

.e-con.vic-section--large {
	--padding-top: var(--section-pad-y-large);
	--padding-bottom: var(--section-pad-y-large);
}

.e-con.vic-section--hero {
	--padding-top: var(--hero-pad-y);
	--padding-bottom: var(--hero-pad-y);
}

/* Content Width — narrow readable column inside a boxed container */
.e-con.vic-width--narrow {
	--content-width: min(100%, var(--measure-body));
}

/* Gap */
.e-con.vic-gap--grid { --gap: var(--grid-gap); --row-gap: var(--grid-gap); --column-gap: var(--grid-gap); }
.e-con.vic-gap--xs   { --gap: var(--gap-xs);   --row-gap: var(--gap-xs);   --column-gap: var(--gap-xs); }
.e-con.vic-gap--sm   { --gap: var(--gap-sm);   --row-gap: var(--gap-sm);   --column-gap: var(--gap-sm); }
.e-con.vic-gap--md   { --gap: var(--gap-md);   --row-gap: var(--gap-md);   --column-gap: var(--gap-md); }
.e-con.vic-gap--lg   { --gap: var(--gap-lg);   --row-gap: var(--gap-lg);   --column-gap: var(--gap-lg); }
.e-con.vic-gap--xl   { --gap: var(--gap-xl);   --row-gap: var(--gap-xl);   --column-gap: var(--gap-xl); }

/* Box Style — card / product card / panel (border + radius + padding) */
.e-con:is(.vic-card, .vic-product-card, .vic-panel) {
	--border-style: solid;
	--border-color: var(--color-border);
	--border-top-width: 1px;
	--border-right-width: 1px;
	--border-bottom-width: 1px;
	--border-left-width: 1px;
	--padding-top: var(--card-pad);
	--padding-right: var(--card-pad);
	--padding-bottom: var(--card-pad);
	--padding-left: var(--card-pad);
	--border-radius: var(--radius-card);
	background-color: var(--color-background);
}

.e-con.vic-product-card {
	--border-radius: var(--radius-product);
}

.e-con.vic-panel {
	--padding-top: var(--panel-pad);
	--padding-right: var(--panel-pad);
	--padding-bottom: var(--panel-pad);
	--padding-left: var(--panel-pad);
	--border-radius: var(--radius-panel);
}

/* A box on a navy background keeps its own (light) surface. */
.e-con.surface-dark:is(.vic-card, .vic-product-card, .vic-panel) {
	--border-color: rgba(255, 255, 255, 0.14);
	background-color: var(--vic-blue-deep);
}