/* ==========================================================================
   Legacy Page Overrides
   ==========================================================================
   Modernizes unmigrated Elementor pages that still use the old Section-Column
   layout (.elementor-section) or have leftover background images on modern
   containers. New pages use .e-con containers with design tokens.

   Uses !important to override Elementor's inline styles stored in the database.
   ========================================================================== */

/* ==========================================================================
   1. Section Backgrounds — replace angled red/orange images with cream
   ========================================================================== */

.elementor-section {
	background-image: none !important;
	background-color: var(--color-container-cream) !important;
}

.elementor-section > .elementor-background-overlay {
	display: none !important;
}

/* Remove leftover SVG/angled background images from .e-con containers
   that have already been tagged with the cream background class */
.zededa-bg-cream {
	background-image: none !important;
}

/* ==========================================================================
   2. Shape Dividers — hide angled SVG decorations
   ========================================================================== */

.elementor-section .elementor-shape-top,
.elementor-section .elementor-shape-bottom {
	display: none !important;
}

/* ==========================================================================
   3. Typography Colors — align with new design system
   ========================================================================== */

.elementor-section .elementor-heading-title {
	color: var(--color-text-primary) !important;
}

.elementor-section .elementor-text-editor,
.elementor-section .elementor-text-editor p,
.elementor-section .elementor-text-editor li {
	color: var(--color-text-primary) !important;
}

/* Exception: inner-section columns with explicit backgrounds (e.g. dark
   location cards on Contact Us) need white text. Scoped to inner-sections
   to avoid catching top-level columns like the form area. */
.elementor-inner-section .elementor-column[data-settings*="background_background"] .elementor-heading-title {
	color: var(--color-neutral-white) !important;
}

.elementor-inner-section .elementor-column[data-settings*="background_background"] .elementor-text-editor,
.elementor-inner-section .elementor-column[data-settings*="background_background"] .elementor-text-editor p,
.elementor-inner-section .elementor-column[data-settings*="background_background"] .elementor-text-editor li {
	color: var(--color-neutral-white) !important;
}

/* ==========================================================================
   4. Links — use brand orange for inline links (exclude .e-con descendants)
   ========================================================================== */

.elementor-section a:not(.elementor-button):not([class*="zededa-"]):not([class*="e-con"]) {
	color: var(--color-brand-primary) !important;
}

/* ==========================================================================
   5. Buttons — match new CTA style (aqua background, dark teal text)
   ========================================================================== */

.elementor-section .elementor-button {
	font-family: var(--typography-font-family-cta) !important;
	font-size: clamp(14px, calc(0.19vw + 13.28px), 17px) !important;
	font-weight: var(--typography-font-weight-bold) !important;
	letter-spacing: -0.005em !important;
	line-height: 1.45 !important;
	background-color: var(--color-navigation-cta-background) !important;
	color: var(--color-container-blue) !important;
	border: var(--border-width-thin) solid var(--color-container-blue) !important;
	border-radius: 0 !important;
	padding: 12px var(--spacing-lg) !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-section .elementor-button:hover {
	opacity: 0.9 !important;
	box-shadow: var(--shadow-md) !important;
}

.elementor-section .elementor-button:visited {
	color: var(--color-container-blue) !important;
}

/* ==========================================================================
   6. Column Content Spacing — replace percentage margins with token spacing
   ========================================================================== */

.elementor-section .elementor-widget-wrap.elementor-element-populated {
	margin-top: var(--spacing-xl) !important;
}

/* ==========================================================================
   7. Single-Post Template Spacing — reduce old percentage-based padding
      that was designed for the angled background SVG layout.

      container-styles.css applies padding-top/bottom: var(--container-padding-block)
      (64px) to every .zededa-bg-cream element. In single-post templates the parent
      AND its child both carry that class, doubling the padding (128px+). Override
      with the actual padding properties (not just Elementor --padding-* vars) so
      that single posts get standard spacing.
   ========================================================================== */

/* Parent .e-con: had 10% top/bottom padding for the angled SVG visual.
   Override both the Elementor variable AND the actual property. Bottom padding
   is zero because the following section provides its own top padding. */
.elementor-location-single > .e-con.e-parent {
	--padding-top: var(--spacing-xl) !important;
	--padding-bottom: 0px !important;
	padding-top: var(--spacing-xl) !important;
	padding-bottom: 0 !important;
}

/* Child .e-con: had 70px top padding to push content below SVG apex.
   Also carries .zededa-bg-cream which adds another 64px — zero it all out. */
.elementor-location-single > .e-con.e-parent > .e-con-inner > .e-con.e-child {
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Legacy sections in single post templates — standard spacing */
.elementor-location-single .elementor-section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: var(--spacing-xl) !important;
	padding-bottom: var(--spacing-xl) !important;
}

/* Column wrappers inside single-post legacy sections — the blanket rule in §6
   adds margin-top: --spacing-xl to all .elementor-widget-wrap, but inside
   single-post sections the section padding already provides the gap. */
.elementor-location-single .elementor-section .elementor-widget-wrap.elementor-element-populated {
	margin-top: 0 !important;
}

/* ==========================================================================
   8. .e-con Card Protection — undo overrides for modern card templates
      nested inside legacy sections (e.g. Ele Custom Skin loop templates)
   ========================================================================== */

/* Card containers inside legacy sections: container-styles.css applies 64px
   padding + full-width to every .zededa-bg-cream, but these are card templates
   (loop 118), not standalone sections. Strip the section-level overrides. */
.elementor-section .e-con.zededa-bg-cream {
	padding: 0 !important;
	max-width: none !important;
	width: auto !important;
}

/* The .resources-tiles-box overlay has .zededa-bg-cream which makes it
   opaque, covering all card text. Force transparent + collapse its inner
   wrapper so it adds no visible space inside the card. */
.elementor-section .e-con .resources-tiles-box.e-con.e-child.zededa-bg-cream {
	background-color: transparent !important;
}

.elementor-section .resources-tiles-box > .e-con-inner {
	display: none !important;
}

/* Card body containers: template sets white (#FFF) but .zededa-bg-cream
   overrides to cream. Restore white for visual card separation.
   Provide standard theme padding so card text doesn't butt against edges;
   Elementor variables take precedence when set, design tokens are fallback.
   Exclude .resources-tiles-box which must stay transparent. */
.elementor-section .e-con .e-con.e-child.zededa-bg-cream:not(.resources-tiles-box) {
	background-color: var(--color-neutral-white) !important;
	padding: var(--padding-top, var(--spacing-md)) var(--padding-right, var(--spacing-lg)) var(--padding-bottom, var(--spacing-md)) var(--padding-left, var(--spacing-lg)) !important;
}

/* Card buttons are text-links, not filled CTAs */
.elementor-section .e-con .elementor-button {
	background-color: transparent !important;
	color: var(--color-brand-primary) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-family: var(--typography-font-family-base) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	line-height: 22px !important;
	text-transform: uppercase !important;
}

.elementor-section .e-con .elementor-button:hover {
	opacity: 1 !important;
	box-shadow: none !important;
}

.elementor-section .e-con .elementor-button:visited {
	color: var(--color-brand-primary) !important;
}

/* Card links should inherit color, not forced orange */
.elementor-section .e-con a:not(.elementor-button) {
	color: inherit !important;
}

/* News card image containers: the inner .e-con wrapping the image widget
   is e-parent (not e-child) in the loop template, so the e-child rule
   above doesn't match. Descendant selector needed because e-con-boxed
   parents have an intermediate .e-con-inner wrapper. */
a.e-con.zededa-bg-cream .zededa-bg-cream:has(.elementor-widget-image) {
	background-color: var(--color-neutral-white) !important;
}