/*
Theme Name: EcoMap Studio
Theme URI: https://ecomap.org
Author: EcoMap
Author URI: https://ecomap.org
Description: A simplified website builder for economic development organizations. Build beautiful pages in minutes with our drag-and-drop section editor.
Version: 2.0.524
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecomap-studio
*/

/* ==========================================================================
   Front-end styles only - Editor UI is completely isolated in iframe
   ========================================================================== */

/* ==========================================================================
   DESIGN SYSTEM - CSS Custom Properties
   These variables are required by theme.json and all section patterns
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       PRIMARY COLORS
       Used for buttons, links, accents.
       ------------------------------------------------------------------------- */
    --color-primary: #0073aa;
    --color-primary-contrast: #ffffff;
    /* Brand contrast: the TRUE contrast for brand primary - NOT overridden per-section.
       Used by buttons with ecomap-bg-primary to ensure text is always readable. */
    --brand-primary-contrast: #ffffff;
    --color-primary-rgb: 0, 115, 170;
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 15%, white);
    --color-primary-lighter: color-mix(in srgb, var(--color-primary) 8%, white);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, black 20%);

    /* -------------------------------------------------------------------------
       SECONDARY COLORS
       Background accents, secondary buttons, cards.
       ------------------------------------------------------------------------- */
    --color-secondary: #f1f1f1;
    --color-secondary-contrast: #333333;
    --color-secondary-rgb: 241, 241, 241;
    --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 90%, black);
    --color-secondary-light: color-mix(in srgb, var(--color-secondary) 30%, white);
    --color-secondary-lighter: color-mix(in srgb, var(--color-secondary) 15%, white);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary) 80%, black 20%);

    /* -------------------------------------------------------------------------
       TERTIARY COLORS (Bug #40 fix)
       For tertiary buttons, accents, and decorative elements.
       ------------------------------------------------------------------------- */
    --color-tertiary: #8b5cf6;
    --color-tertiary-contrast: #ffffff;
    --color-tertiary-rgb: 139, 92, 246;
    --color-tertiary-hover: color-mix(in srgb, var(--color-tertiary) 85%, black 15%);
    --color-tertiary-light: color-mix(in srgb, var(--color-tertiary) 30%, white);
    --color-tertiary-lighter: color-mix(in srgb, var(--color-tertiary) 15%, white);
    --color-tertiary-dark: color-mix(in srgb, var(--color-tertiary) 80%, black 20%);

    /* -------------------------------------------------------------------------
       ACCENT COLORS
       For keyword chips, category badges, status indicators.
       ------------------------------------------------------------------------- */
    --accent-sky: #2dadeb;
    --accent-sky-contrast: #ffffff;
    --accent-carrot: #eb6931;
    --accent-carrot-contrast: #ffffff;
    --accent-cherry: #d24f3e;
    --accent-cherry-contrast: #ffffff;
    --accent-canary: #ffc000;
    --accent-canary-contrast: #333333;
    --accent-mint: #32b643;
    --accent-mint-contrast: #ffffff;

    /* -------------------------------------------------------------------------
       SEMANTIC COLORS
       Success, error, warning states.
       ------------------------------------------------------------------------- */
    --color-success: #32b643;
    --color-success-contrast: #ffffff;
    --color-success-hover: color-mix(in srgb, var(--color-success) 85%, black);
    --color-success-light: color-mix(in srgb, var(--color-success) 15%, white);
    --color-error: #e85600;
    --color-error-contrast: #ffffff;
    --color-error-hover: color-mix(in srgb, var(--color-error) 85%, black);
    --color-error-light: color-mix(in srgb, var(--color-error) 15%, white);
    --color-warning: #ffb700;
    --color-warning-contrast: #333333;
    --color-info: #2dadeb;
    --color-info-contrast: #ffffff;
    --color-rating: #fbbf24;
    /* Star ratings, gold accent */

    /* -------------------------------------------------------------------------
       NEUTRAL GRAYS
       For borders, backgrounds, muted text. Scale from light to dark.
       ------------------------------------------------------------------------- */
    --g050: #f7f8f9;
    --g100: #eef0f3;
    --g200: #dadee4;
    --g300: #bcc3ce;
    --g400: #8b93a1;
    --g500: #4a5568;  /* Updated for AAA (7.0:1 on white) */
    --g600: #3d4852;  /* Updated for AAA (8.5:1 on white) */
    --g700: #1e293b;
    --g800: #2d333d;
    --g900: #1a1d23;

    /* -------------------------------------------------------------------------
       CONTEXTUAL COLORS
       Applied to common elements.
       ------------------------------------------------------------------------- */
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-text: #1e293b;
    --color-text-muted: var(--g500);  /* References AAA-compliant gray */
    --color-text-light: #64748b;
    --color-text-inverted: #ffffff;
    --color-border: var(--g200);
    --color-border-light: var(--g100);
    --color-input-bg: var(--g050);
    --color-highlight: #ffe9b3;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.3);
    --color-overlay-dark: rgba(0, 0, 0, 0.7);

    /* Base semantic colors (explicit definitions for consistency) */
    --color-base: #f8fafc;
    --color-contrast: #ffffff;
    --color-dark: #1a1a1a;

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - FONT FAMILIES
       ------------------------------------------------------------------------- */
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-accent: var(--font-heading);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - FONT SIZES
       Modular scale for consistent hierarchy.
       ------------------------------------------------------------------------- */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 2rem;
    /* 32px */
    --font-size-4xl: 2.5rem;
    /* 40px */
    --font-size-5xl: 3rem;
    /* 48px */
    --font-size-6xl: 3.5rem;
    /* 56px */
    --font-size-7xl: 4rem;
    /* 64px */

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - FONT WEIGHTS
       ------------------------------------------------------------------------- */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - LINE HEIGHTS
       ------------------------------------------------------------------------- */
    --line-height-tight: 1.2;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* -------------------------------------------------------------------------
       SPACING SCALE
       Consistent spacing for margins, padding, gaps.
       ------------------------------------------------------------------------- */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
    --spacing-24: 6rem;
    /* 96px */
    --spacing-32: 8rem;
    /* 128px */

    /* -------------------------------------------------------------------------
       LAYOUT
       Container widths, content widths, structural dimensions.
       ------------------------------------------------------------------------- */
    --container-narrow: 720px;
    --container-width: 1200px;
    --container-wide: 1400px;
    --container-full: 100%;
    --content-width: 65ch;
    --ecomap-nav-height: 64px;

    /* -------------------------------------------------------------------------
       BORDERS & RADII
       ------------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;
    --radius-btn: 0.5rem;
    /* 8px - buttons use this, becomes 9999px (pill) on 'round' */
    --radius-chip: 0.5rem;
    /* 8px - chips use this, becomes 9999px (pill) on 'round' */
    --default-radius: var(--radius-md);

    /* -------------------------------------------------------------------------
       SHADOWS
       Elevation levels for cards, modals, dropdowns.
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* -------------------------------------------------------------------------
       TRANSITIONS & ANIMATIONS
       ------------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* -------------------------------------------------------------------------
       Z-INDEX SCALE
       Layering system for overlays, modals, navigation.
       ------------------------------------------------------------------------- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* -------------------------------------------------------------------------
       SECTION THEMING (Dark/Light Mode)
       Applied via Block Inspector toggle for sections.
       ------------------------------------------------------------------------- */
    --section-dark-bg: color-mix(in srgb, var(--color-primary, #0073aa) 15%, #0f172a);
    --section-dark-text: #ffffff;
    --section-light-bg: #ffffff;
    --section-light-text: color-mix(in srgb, var(--color-primary, #0073aa) 20%, #1e293b);

    /* Theme variant backgrounds */
    --section-dark-muted-bg: color-mix(in srgb, var(--color-primary, #0073aa) 8%, #0a0a0a);
    --section-dark-brand-bg: color-mix(in srgb, var(--color-primary, #0073aa) 40%, #0f172a);
    --section-light-muted-bg: #f8fafc;

    /* -------------------------------------------------------------------------
       LEGACY COMPATIBILITY
       Map old variable names to new system.
       ------------------------------------------------------------------------- */
    --ecomap-primary: var(--color-primary);
    --ecomap-secondary: var(--color-secondary);
    --ecomap-text: var(--color-text);
    --ecomap-text-muted: var(--color-text-muted);
    --ecomap-border: var(--color-border);
    --ecomap-background: var(--color-background);
    --ecomap-background-alt: var(--g050);
}

html {
    scroll-padding-top: 80px;
}

/* ==========================================================================
   WORDPRESS VARIABLE COMPATIBILITY LAYER
   ==========================================================================

   PURPOSE:
   Maps --wp--preset--* CSS variables to our design system variables.
   Required because WordPress global-styles are dequeued on frontend.

   HOW IT WORKS:
   Patterns contain inline styles like: style="padding: var(--wp--preset--spacing--xl)"
   WordPress normally provides these values via global-styles (dequeued).
   We provide them here instead, mapping to our design system.

   WHEN TO UPDATE:
   If a pattern uses a new --wp--preset--* value not listed here, add it.
   Check patterns for: var:preset|spacing|NEW or var:preset|color|NEW

   SUPPORTED VALUES:
   - Spacing: xs, sm, md, lg, xl, 2-xl, 3-xl, 4-xl, 5-xl, 10, 20, 30, 40, 60
   - Colors: primary, primary-contrast, secondary, contrast, base, text
   - Font sizes: xs, sm, md, lg, xl
   - Shadows: sm, md, lg

   See theme/README.md for full architecture documentation.
   ========================================================================== */

:root {
    /* Spacing Presets */
    --wp--preset--spacing--xs: var(--spacing-1);
    --wp--preset--spacing--sm: var(--spacing-2);
    --wp--preset--spacing--md: var(--spacing-4);
    --wp--preset--spacing--lg: var(--spacing-6);
    --wp--preset--spacing--xl: var(--spacing-8);
    --wp--preset--spacing--2-xl: var(--spacing-12);
    --wp--preset--spacing--3-xl: var(--spacing-16);
    --wp--preset--spacing--4-xl: var(--spacing-20);
    --wp--preset--spacing--5-xl: var(--spacing-32);

    /* Non-standard numeric spacing (used in patterns) */
    --wp--preset--spacing--10: var(--spacing-1);
    --wp--preset--spacing--20: var(--spacing-2);
    --wp--preset--spacing--30: var(--spacing-3);
    --wp--preset--spacing--40: var(--spacing-4);
    --wp--preset--spacing--60: var(--spacing-6);

    /* Color Presets */
    --wp--preset--color--primary: var(--color-primary);
    --wp--preset--color--primary-contrast: var(--color-primary-contrast);
    --wp--preset--color--secondary: var(--color-secondary);
    --wp--preset--color--contrast: var(--color-text-inverted, #ffffff);
    --wp--preset--color--base: var(--color-background);
    --wp--preset--color--text: var(--color-text);

    /* Primary color variations for patterns */
    --wp--preset--color--primary-50: color-mix(in srgb, var(--color-primary) 5%, white);
    --wp--preset--color--primary-100: color-mix(in srgb, var(--color-primary) 10%, white);
    --wp--preset--color--primary-600: color-mix(in srgb, var(--color-primary), black 40%);
    --wp--preset--color--primary-900: color-mix(in srgb, var(--color-primary), black 70%);

    /* Font Size Presets */
    --wp--preset--font-size--xs: var(--font-size-xs);
    --wp--preset--font-size--sm: var(--font-size-sm);
    --wp--preset--font-size--md: var(--font-size-base);
    --wp--preset--font-size--lg: var(--font-size-lg);
    --wp--preset--font-size--xl: var(--font-size-xl);

    /* Shadow Presets */
    --wp--preset--shadow--sm: var(--shadow-sm);
    --wp--preset--shadow--md: var(--shadow-md);
    --wp--preset--shadow--lg: var(--shadow-lg);
}

/* Section base styles */
.ecomap-section {
    position: relative;
}

/* Ensure sections have proper spacing */
.ecomap-section+.ecomap-section {
    margin-top: 0;
}

/* Repeatable container base */
.ecomap-repeatable-container {
    position: relative;
}

.ecomap-repeatable-item {
    position: relative;
}

/* ==========================================================================
   SECTION THEMING CLASSES
   Applied by EcoMap Studio when toggling section dark/light mode.
   ========================================================================== */

/* Base Section Padding */
.ecomap-section,
.ecomap-section-dark,
.ecomap-section-light {
    padding-block: var(--spacing-20, 5rem);
}

/* Dark Section Theme */
.ecomap-section-dark {
    background-color: var(--section-dark-bg);
    color: var(--section-dark-text);
}

.ecomap-section-dark h1,
.ecomap-section-dark h2,
.ecomap-section-dark h3,
.ecomap-section-dark h4,
.ecomap-section-dark h5,
.ecomap-section-dark h6,
.ecomap-section-dark p,
.ecomap-section-dark span,
.ecomap-section-dark a:not(.wp-block-button__link) {
    color: var(--section-dark-text);
}

.ecomap-section-dark a:not(.wp-block-button__link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ecomap-section-dark a:not(.wp-block-button__link):hover {
    color: var(--color-primary);
}

/* Light Section Theme */
.ecomap-section-light {
    background-color: var(--section-light-bg);
    color: var(--section-light-text);
}

.ecomap-section-light h1,
.ecomap-section-light h2,
.ecomap-section-light h3,
.ecomap-section-light h4,
.ecomap-section-light h5,
.ecomap-section-light h6,
.ecomap-section-light p,
.ecomap-section-light span,
.ecomap-section-light a:not(.wp-block-button__link) {
    color: var(--section-light-text);
}

.ecomap-section-light a:not(.wp-block-button__link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Cards within sections keep their own styles */
.ecomap-section-dark .wp-block-group.has-background h1,
.ecomap-section-dark .wp-block-group.has-background h2,
.ecomap-section-dark .wp-block-group.has-background h3,
.ecomap-section-dark .wp-block-group.has-background h4,
.ecomap-section-dark .wp-block-group.has-background h5,
.ecomap-section-dark .wp-block-group.has-background h6,
.ecomap-section-dark .wp-block-group.has-background p,
.ecomap-section-dark .wp-block-group.has-background span {
    color: inherit !important;
}

/* Icon containers in dark sections - make transparent so icons sit on card surface */
.ecomap-section-dark .ecomap-card .ecomap-bg-base:not(.ecomap-card),
.ecomap-section-dark .ecomap-card .ecomap-bg-contrast:not(.ecomap-card),
.ecomap-theme-dark .ecomap-card .ecomap-bg-base:not(.ecomap-card),
.ecomap-theme-dark .ecomap-card .ecomap-bg-contrast:not(.ecomap-card) {
    background-color: transparent !important;
}

/* Primary-branded text in cards */
.ecomap-section-dark .ecomap-card .ecomap-text-primary,
.ecomap-theme-dark .ecomap-card .ecomap-text-primary {
    color: var(--color-primary);
}

/* Component Theme Overrides - Allow nested components to override section themes */
/* Light-themed components inside dark sections */
.ecomap-section-dark .ecomap-component-light,
.ecomap-section-dark [class*="ecomap-component-light"] {
    background-color: var(--section-light-bg) !important;
    color: var(--section-light-text) !important;
}

.ecomap-section-dark .ecomap-component-light h1,
.ecomap-section-dark .ecomap-component-light h2,
.ecomap-section-dark .ecomap-component-light h3,
.ecomap-section-dark .ecomap-component-light h4,
.ecomap-section-dark .ecomap-component-light h5,
.ecomap-section-dark .ecomap-component-light h6,
.ecomap-section-dark .ecomap-component-light p,
.ecomap-section-dark .ecomap-component-light span,
.ecomap-section-dark .ecomap-component-light a:not(.wp-block-button__link) {
    color: var(--section-light-text) !important;
}

.ecomap-section-dark .ecomap-component-light a:not(.wp-block-button__link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Dark-themed components inside light sections */
.ecomap-section-light .ecomap-component-dark,
.ecomap-section-light [class*="ecomap-component-dark"] {
    background-color: var(--section-dark-bg) !important;
    color: var(--section-dark-text) !important;
}

.ecomap-section-light .ecomap-component-dark h1,
.ecomap-section-light .ecomap-component-dark h2,
.ecomap-section-light .ecomap-component-dark h3,
.ecomap-section-light .ecomap-component-dark h4,
.ecomap-section-light .ecomap-component-dark h5,
.ecomap-section-light .ecomap-component-dark h6,
.ecomap-section-light .ecomap-component-dark p,
.ecomap-section-light .ecomap-component-dark span,
.ecomap-section-light .ecomap-component-dark a:not(.wp-block-button__link) {
    color: var(--section-dark-text) !important;
}

.ecomap-section-light .ecomap-component-dark a:not(.wp-block-button__link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Exclude non-body-text links from WCAG underline requirement */
.ecomap-footer-section a:not(.wp-block-button__link),
.ecomap-footer-nav a,
.ecomap-social-links a,
.ecomap-card a,
.ecomap-nav-links a { text-decoration: none; }

/* ==========================================================================
   TESTIMONIAL CARD COMPONENT
   Fix avatar circles and author info layout
   ========================================================================== */

/* Testimonial avatar - enforce perfect circle
   The figure wrapper MUST be locked to square dimensions with overflow hidden.
   This prevents non-square source images from creating ovals.
   Uses aspect-ratio as the primary constraint, with explicit dimensions as fallback.
   Targets BOTH .testimonial-avatar (testimonials-grid pattern) and
   .ecomap-component-card-testimonial (card component pattern). */
.testimonial-avatar,
.testimonial-avatar.wp-block-image,
.testimonial-avatar.is-resized,
figure.testimonial-avatar,
.ecomap-component-card-testimonial .wp-block-image,
.ecomap-component-card-testimonial figure.wp-block-image,
.ecomap-component-card-testimonial figure.wp-block-image.is-resized,
.ecomap-component-card-testimonial figure.wp-block-image.size-thumbnail,
.ecomap-component-card-testimonial .wp-block-image[style*="width"],
.ecomap-component-card-testimonial figure[style*="border-radius"] {
    display: block !important;
    flex: 0 0 48px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.testimonial-avatar img,
figure.testimonial-avatar img,
.ecomap-component-card-testimonial .wp-block-image img,
.ecomap-component-card-testimonial figure.wp-block-image img,
.ecomap-component-card-testimonial figure.wp-block-image.is-resized img,
.ecomap-component-card-testimonial img[style*="width"],
.ecomap-component-card-testimonial img[style*="height"] {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
}

/* Testimonial author section - horizontal alignment */
.ecomap-component-card-testimonial>.wp-block-group:last-child {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Author name - primary text weight */
.ecomap-component-card-testimonial>.wp-block-group:last-child p:first-of-type {
    font-weight: 600;
    margin: 0;
}

/* Author title - muted secondary text */
.ecomap-component-card-testimonial>.wp-block-group:last-child p:last-of-type {
    font-weight: 400;
    color: var(--section-text-muted, rgba(0, 0, 0, 0.6));
    margin: 0;
}

/* Testimonials Grid Options */
/* Star ratings - uses clip-path for partial star support */
.ecomap-testimonial-rating {
    display: inline-flex;
    position: relative;
    gap: 2px;
    margin-bottom: var(--spacing-3);
    font-size: 1.25rem;
    letter-spacing: 2px;
    /* Hide actual text content - only show ::before and ::after pseudo-elements */
    color: transparent;
}

/* Background stars (empty/gray) */
.ecomap-testimonial-rating::before {
    content: '★★★★★';
    color: var(--color-border, #e2e8f0);
}

/* Foreground stars (filled/colored) - clipped based on rating */
.ecomap-testimonial-rating::after {
    content: '★★★★★';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--star-rating-color, var(--color-rating, #fbbf24));
    clip-path: inset(0 calc((5 - var(--star-count, 5)) * 20%) 0 0);
}

[data-show-ratings="false"] .ecomap-testimonial-rating,
.ecomap-pattern-testimonials-grid:not([data-show-ratings="true"]) .ecomap-testimonial-rating {
    display: none;
}

[data-show-ratings="true"] .ecomap-testimonial-rating {
    display: inline-flex;
}

/* Quote styles */
[data-quote-style="mark"] .ecomap-testimonial-quote::before {
    content: '"';
    font-size: 3rem;
    line-height: 1;
    color: var(--color-accent-medium);
    opacity: 0.2;
    display: block;
    margin-bottom: var(--spacing-2);
    font-family: Georgia, serif;
}

[data-quote-style="border"] .ecomap-testimonial-quote {
    border-left: 3px solid var(--color-accent-medium);
    padding-left: var(--spacing-4);
}

/* Testimonial Carousel */
.ecomap-testimonial-carousel {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.ecomap-carousel-slides {
    position: relative;
    overflow: hidden;
}

.ecomap-carousel-slide {
    display: none;
    padding: var(--spacing-8);
    animation: fadeIn 0.5s ease;
}

.ecomap-carousel-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ecomap-testimonial-quote-mark {
    font-size: 4rem;
    line-height: 1;
    color: var(--quote-mark-color, var(--color-accent-medium));
    opacity: 0.5;
    margin-bottom: var(--spacing-4);
    font-family: Georgia, serif;
}

.ecomap-carousel-slide .ecomap-testimonial-rating {
    display: inline-flex;
    justify-content: center;
    position: relative;
    gap: 4px;
    margin-bottom: var(--spacing-4);
    font-size: 1.25rem;
    letter-spacing: 4px;
    /* Hide actual text content - only show ::before and ::after pseudo-elements */
    color: transparent;
}

.ecomap-carousel-slide .ecomap-testimonial-rating::before {
    content: '★★★★★';
    color: var(--color-border, #e2e8f0);
}

.ecomap-carousel-slide .ecomap-testimonial-rating::after {
    content: '★★★★★';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--star-rating-color, var(--color-rating, #fbbf24));
    clip-path: inset(0 calc((5 - var(--star-count, 5)) * 20%) 0 0);
}

/* Hide ratings by default, show with data attribute */
[data-show-ratings="false"] .ecomap-carousel-slide .ecomap-testimonial-rating,
.ecomap-pattern-testimonials-carousel:not([data-show-ratings="true"]) .ecomap-carousel-slide .ecomap-testimonial-rating {
    display: none;
}

[data-show-ratings="true"] .ecomap-carousel-slide .ecomap-testimonial-rating {
    display: inline-flex;
}

.ecomap-testimonial-text {
    font-size: var(--font-size-xl);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
    color: var(--section-text);
}

/* Override WordPress layout classes on testimonial author */
.ecomap-testimonial-author,
.ecomap-testimonial-author.is-layout-constrained,
.ecomap-testimonial-author.has-global-padding,
.ecomap-testimonial-author.wp-block-group-is-layout-constrained,
.ecomap-testimonial-author[class*="is-layout-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-3) !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Reset WordPress constrained layout child constraints on testimonial author */
.ecomap-testimonial-author > *,
.ecomap-testimonial-author.is-layout-constrained > *,
.ecomap-testimonial-author.has-global-padding > *,
.ecomap-testimonial-author.wp-block-group-is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Testimonial Carousel Avatar - ensure figure is properly sized and spaced */
.ecomap-testimonial-author .ecomap-testimonial-avatar,
.ecomap-testimonial-author .ecomap-testimonial-avatar.wp-block-image,
.ecomap-testimonial-author figure.ecomap-testimonial-avatar {
    display: block !important;
    flex: 0 0 56px !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 100%;
}

.ecomap-testimonial-author .ecomap-testimonial-avatar img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    border-radius: 100%;
}

.ecomap-testimonial-author-info {
    text-align: left;
}

.ecomap-testimonial-name {
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--section-text);
}

.ecomap-testimonial-title {
    color: var(--section-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Carousel navigation dots */
.ecomap-carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-6);
}

.ecomap-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--carousel-dot-color, var(--color-primary, #0073aa));
    opacity: 0.3;
    border: none;
    padding: 6px;
    box-sizing: content-box;
    background-clip: content-box;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ecomap-carousel-dot:hover {
    opacity: 0.6;
}

.ecomap-carousel-dot.active {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--color-background, #ffffff), 0 0 0 4px var(--carousel-dot-color, var(--color-primary, #0073aa));
}

/* Carousel pause/play button (WCAG 2.2.2) */
.ecomap-carousel-pause {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
}
.ecomap-carousel-pause:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Testimonial carousel navigation with arrows */
.ecomap-testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

.ecomap-testimonial-nav .ecomap-carousel-dots {
    margin-top: 0;
}

.ecomap-testimonial-nav .ecomap-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ecomap-testimonial-nav .ecomap-carousel-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.ecomap-testimonial-nav .ecomap-carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .ecomap-carousel-slide {
        padding: var(--spacing-4);
    }

    .ecomap-testimonial-text {
        font-size: var(--font-size-lg);
    }

    .ecomap-testimonial-quote-mark {
        font-size: 3rem;
    }
}

/* ==========================================================================
   FEATURED CAROUSEL (carousel-featured)
   Multi-card horizontal scrolling carousel
   ========================================================================== */

.ecomap-pattern-carousel-featured {
    container-type: inline-size;
    container-name: carousel-featured;
}

.ecomap-carousel-container {
    position: relative;
    overflow: hidden;
    padding: 0 var(--spacing-12);
}

.ecomap-carousel-track {
    display: flex;
    gap: var(--spacing-6);
    transition: transform 0.4s ease-out;
    will-change: transform;
}

/* Carousel card styling */
.ecomap-carousel-card {
    flex: 0 0 calc(33.333% - var(--spacing-6) * 2 / 3);
    min-width: 280px;
    max-width: 400px;
    background: var(--card-bg, #ffffff);
    overflow: hidden;
    transition: transform var(--hover-transition, 150ms ease), box-shadow var(--hover-transition, 150ms ease), background-color var(--hover-transition, 150ms ease);
}

.ecomap-carousel-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    transform: var(--carousel-card-hover-transform, none);
    background-color: var(--carousel-card-hover-bg, var(--card-bg, #ffffff));
}

.ecomap-carousel-card .ecomap-carousel-card-image {
    margin: 0;
    overflow: hidden;
}

.ecomap-carousel-card .ecomap-carousel-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ecomap-carousel-card:hover .ecomap-carousel-card-image img {
    transform: scale(1.05);
}

.ecomap-carousel-card-content {
    display: flex;
    flex-direction: column;
}

/* Card Tags (category labels on cards like "ACCELERATOR", "FUNDING", etc.)
   Uses 4-way matrix based on card background for visibility.
   --card-tag-bg: Tag fill color
   --card-tag-text: Tag text color */
.ecomap-card-tag {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--card-tag-bg, var(--color-primary)) !important;
    color: var(--card-tag-text, var(--color-primary-contrast, #fff)) !important;
}

.ecomap-carousel-card-tag {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ecomap-carousel-card-title {
    color: var(--section-text, var(--color-text));
    line-height: 1.3;
    margin: 0;
}

.ecomap-carousel-card-description {
    flex-grow: 1;
    line-height: 1.5;
    margin: 0;
}

.ecomap-carousel-card-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.ecomap-carousel-card-link:hover {
    color: var(--color-primary-hover);
}

/* Navigation arrows - styled to match button colors */
.ecomap-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary, #0073aa);
    border: none;
    color: var(--color-primary-contrast, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--hover-transition, 150ms ease);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ecomap-carousel-nav svg {
    flex-shrink: 0;
    stroke: currentColor;
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.ecomap-carousel-nav:hover {
    background: var(--color-primary-hover, var(--color-primary));
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.ecomap-carousel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.ecomap-carousel-prev {
    left: 8px;
}

.ecomap-carousel-next {
    right: 8px;
}

/* Hide navigation when disabled via data attribute */
[data-show-navigation="false"] .ecomap-carousel-nav {
    display: none;
}

/* Pagination dots */
.ecomap-carousel-pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-8);
}

.ecomap-carousel-pagination .ecomap-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    opacity: 0.3;
    border: none;
    padding: 7px;
    box-sizing: content-box;
    background-clip: content-box;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ecomap-carousel-pagination .ecomap-carousel-dot:hover {
    opacity: 0.6;
}

.ecomap-carousel-pagination .ecomap-carousel-dot.active {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--color-background, #ffffff), 0 0 0 4px var(--color-primary);
}

/* Hide pagination when disabled via data attribute */
[data-show-pagination="false"] .ecomap-carousel-pagination {
    display: none;
}

/* Tablet: 2 cards visible */
@container carousel-featured (max-width: 900px) {
    .ecomap-carousel-card {
        flex: 0 0 calc(50% - var(--spacing-6) / 2);
        max-width: none;
    }

    .ecomap-carousel-container {
        padding: 0 var(--spacing-10);
    }
}

/* Mobile: 1 card visible */
@container carousel-featured (max-width: 600px) {
    .ecomap-carousel-card {
        flex: 0 0 100%;
        min-width: unset;
        max-width: none;
    }

    .ecomap-carousel-container {
        padding: 0 var(--spacing-8);
    }

    .ecomap-carousel-nav {
        width: 36px;
        height: 36px;
    }

    .ecomap-carousel-nav svg {
        width: 20px;
        height: 20px;
    }

    .ecomap-carousel-card .ecomap-carousel-card-image img {
        height: 160px;
    }
}

/* Small mobile: hide navigation arrows, rely on swipe */
@container carousel-featured (max-width: 480px) {
    .ecomap-carousel-container {
        padding: 0;
    }

    .ecomap-carousel-nav {
        display: none;
    }

    .ecomap-carousel-track {
        padding: 0 var(--spacing-4);
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .ecomap-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .ecomap-carousel-card {
        scroll-snap-align: center;
    }
}

/* ============================================
   EVENT CAROUSEL CARDS
   Horizontal layout with thumbnail + title + date
   ============================================ */

/* Event card link wrapper - makes entire card clickable */
.ecomap-event-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Event card inner layout - horizontal flex */
.ecomap-event-card-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
}

/* Event thumbnail - 80x80 rounded square */
.ecomap-event-thumb {
    margin: 0 !important;
    flex-shrink: 0;
}

.ecomap-event-thumb img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
}

/* Event card content - title and date */
.ecomap-event-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ecomap-event-title {
    color: var(--section-text, var(--color-text));
    line-height: 1.3;
    margin: 0 !important;
}

.ecomap-event-date {
    margin: 0 !important;
    font-style: italic;
}

/* Event cards in Events Carousel - no background/shadow by default */
.ecomap-pattern-carousel-events .ecomap-event-card,
.ecomap-pattern-carousel-events .ecomap-carousel-card {
    background: transparent;
    box-shadow: none !important;
}

.ecomap-pattern-carousel-events .ecomap-event-card:hover,
.ecomap-pattern-carousel-events .ecomap-carousel-card:hover {
    box-shadow: none !important;
    background: var(--carousel-card-hover-bg, transparent);
}

/* Hover state for linkable event cards */
.ecomap-event-card-link:hover .ecomap-event-title {
    color: var(--color-primary);
}

/* Disable event card links when cardLinkEnabled is false */
[data-card-link-enabled="false"] .ecomap-event-card-link {
    pointer-events: none;
    cursor: default;
}

[data-card-link-enabled="false"] .ecomap-event-card-link:hover .ecomap-event-title {
    color: inherit;
}

/* Carousel header layout - button should be right-aligned */
.ecomap-carousel-header {
    width: 100%;
    justify-content: space-between !important;
}

/* Override constrained layout centering on header button */
.ecomap-carousel-header .ecomap-header-button {
    max-width: none !important;
}

/* Reset constrained layout margins on header button and its children */
.ecomap-carousel-header .ecomap-header-button.is-layout-constrained,
.ecomap-carousel-header .ecomap-header-button.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Header button visibility toggle */
[data-show-header-button="false"] .ecomap-header-button {
    display: none !important;
}

/* Events carousel specific - adjust card sizing for horizontal layout */
.ecomap-pattern-carousel-events .ecomap-carousel-card {
    min-width: 260px;
}

/* Mobile: smaller thumbnail and tighter layout */
@media (max-width: 480px) {
    .ecomap-event-thumb img {
        width: 64px;
        height: 64px;
    }

    .ecomap-event-card-inner {
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }

    .ecomap-pattern-carousel-events .ecomap-carousel-card {
        min-width: 240px;
    }
}

/* ==========================================================================
   BASE TYPOGRAPHY
   Apply font families and base text styling
   ========================================================================== */

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

h5 {
    font-size: var(--font-size-xl);
}

h6 {
    font-size: var(--font-size-lg);
}

a {
    color: var(--color-link, var(--color-primary));
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover, var(--color-primary-hover));
}

/* Contact Action Items - Linkable text in contact info cards */
.ecomap-contact-action {
    /* Default: inherit text color from parent (for unlinked items) */
    transition: color var(--transition-fast);
}

/* When linked, use link/primary color */
.ecomap-contact-action--linked,
.ecomap-contact-action--linked a {
    color: var(--color-link, var(--color-primary));
}

.ecomap-contact-action--linked a:hover {
    color: var(--color-link-hover, var(--color-primary-hover));
}

/* Card links use card-aware button colors (based on card background, not section)
   This ensures links on light cards use dark button color, links on dark cards use light button color
   Higher specificity needed to override .ecomap-theme-dark a:not(.wp-block-button__link) rule */
.ecomap-section .ecomap-card .ecomap-contact-action--linked,
.ecomap-section .ecomap-card .ecomap-contact-action--linked a {
    color: var(--card-primary);
}

.ecomap-section .ecomap-card .ecomap-contact-action--linked a:hover {
    color: var(--card-primary-hover);
}

/* Contact Info Section - Equal height cards with top-aligned content */
.ecomap-pattern-content-contact-info .wp-block-columns {
    align-items: stretch !important;
}

.ecomap-pattern-content-contact-info .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

.ecomap-pattern-content-contact-info .ecomap-card {
    justify-content: flex-start !important;
    align-items: center !important;
    height: 100% !important;
    flex: 1 !important;
}

/* Push contact info (last child) to bottom of card */
.ecomap-pattern-content-contact-info .ecomap-card > *:last-child {
    margin-top: auto !important;
}

/* Contact Info Section - Larger icons with bigger container */
.ecomap-pattern-content-contact-info .ecomap-card .ecomap-icon {
    font-size: 2rem;
}

.ecomap-pattern-content-contact-info .ecomap-card > .wp-block-group:first-child {
    padding: 16px !important;
}

/* Contact icon wrapper - no background, fixed height */
.ecomap-contact-icon-wrapper {
    background: transparent !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ecomap-contact-icon-wrapper p {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Hero Icon Cards - enable equal-height columns for bottom-aligned buttons */
.ecomap-pattern-hero-icon-cards .wp-block-columns {
    align-items: stretch !important;
}

.ecomap-pattern-hero-icon-cards .wp-block-column.ecomap-repeatable-item {
    display: flex !important;
    flex-direction: column !important;
}

.ecomap-pattern-hero-icon-cards .ecomap-card {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.ecomap-pattern-hero-icon-cards .ecomap-card > .wp-block-buttons {
    margin-top: auto !important;
}

/* Hero Hub Gateway - enable equal-height columns for bottom-aligned buttons */
.ecomap-pattern-hero-hub-gateway .ecomap-gateway-cards {
    align-items: stretch !important;
}

.ecomap-pattern-hero-hub-gateway .ecomap-gateway-card {
    display: flex !important;
    flex-direction: column !important;
}

.ecomap-pattern-hero-hub-gateway .ecomap-gateway-card-inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.ecomap-pattern-hero-hub-gateway .ecomap-gateway-card-inner > .wp-block-buttons {
    margin-top: auto !important;
}

/* Hero Icon Banner */
.ecomap-pattern-hero-icon-banner .ecomap-hero-banner-icon {
    color: var(--hero-icon-color, var(--section-text, #ffffff));
}

/* Button styling */
.wp-block-button__link {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    /* Use --radius-btn which responds to corner settings (becomes 9999px on 'round') */
    border-radius: var(--radius-btn, var(--radius-md)) !important;
    /* Consistent button padding - use !important to override inline styles from patterns */
    padding: var(--spacing-2) var(--spacing-5) !important;
    font-weight: var(--font-weight-semibold);
    /* Hover effect transitions - uses CSS variables for customization */
    transition: background-color var(--hover-transition, 150ms ease),
                transform var(--hover-transition, 150ms ease),
                box-shadow var(--hover-transition, 150ms ease);
    /* Fixed 44px button height for consistency - capped to prevent oversized buttons */
    height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

/* Ensure buttons in a row align properly */
.wp-block-buttons>.wp-block-button {
    display: flex;
}

/* Button hover - uses CSS variables for customization */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    background-color: var(--button-hover-bg, var(--color-primary-hover));
    color: var(--color-primary-contrast);
    transform: var(--button-hover-transform, none);
    box-shadow: var(--button-hover-glow, none);
}

/* Dark button hover - filled/primary buttons */
.wp-block-button.ecomap-bg-primary .wp-block-button__link:hover,
.wp-block-button.ecomap-bg-primary .wp-block-button__link:focus-visible {
    background-color: var(--button-hover-bg-dark, var(--button-hover-bg, var(--color-primary-hover)));
}

/* Light button hover - outline/secondary buttons */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
    background-color: var(--button-hover-bg-light, var(--button-hover-bg, var(--color-primary)));
}

/* Primary background buttons use section-level --color-primary-contrast if set
   (for button color overrides), otherwise fall back to --brand-primary-contrast
   which ensures text contrasts with the global brand primary color. */
.wp-block-button__link.ecomap-bg-primary {
    color: var(--color-primary-contrast, var(--brand-primary-contrast, #ffffff)) !important;
}

.wp-block-button__link.ecomap-bg-primary:hover {
    color: var(--color-primary-contrast, var(--brand-primary-contrast, #ffffff)) !important;
}

/* Secondary/outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* Secondary/outline button - transparent background, uses button color for border/text */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* Dark section outline buttons - use CSS variables for section-level override support
   Note: .ecomap-bg-primary and .has-primary-background-color removed from selectors
   because background can be overridden to light, and button colors should follow
   the section's computed --color-primary variable, not assume white. */
.ecomap-theme-dark .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-theme-dark-muted .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-theme-dark-brand .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--color-primary, #ffffff);
    color: var(--color-primary, #ffffff);
}

.ecomap-theme-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ecomap-theme-dark-muted .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ecomap-theme-dark-brand .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-primary, #ffffff);
    border-color: var(--color-primary, #ffffff);
    color: var(--color-primary-contrast, var(--wp--preset--color--primary, #0073aa));
}

/* Tertiary button style - text link style using PRIMARY color */
.wp-block-button.is-style-tertiary .wp-block-button__link {
    background-color: transparent;
    color: var(--color-primary);
    border: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wp-block-button.is-style-tertiary .wp-block-button__link:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* Tertiary button on dark backgrounds - use inverted text color */
.ecomap-theme-dark .wp-block-button.is-style-tertiary .wp-block-button__link,
.ecomap-theme-image .wp-block-button.is-style-tertiary .wp-block-button__link,
.ecomap-theme-dark-muted .wp-block-button.is-style-tertiary .wp-block-button__link,
.ecomap-theme-dark-brand .wp-block-button.is-style-tertiary .wp-block-button__link {
    color: var(--color-text-inverted);
}

.ecomap-theme-dark .wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.ecomap-theme-image .wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.ecomap-theme-dark-muted .wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.ecomap-theme-dark-brand .wp-block-button.is-style-tertiary .wp-block-button__link:hover {
    color: color-mix(in srgb, var(--color-text-inverted) 80%, transparent);
}

/* Button group alignment - default to left, smart inheritance for centering */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

.wp-block-buttons.is-content-justification-left {
    justify-content: flex-start;
}

.wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}

.wp-block-buttons.is-content-justification-space-between {
    justify-content: space-between;
}

/* Smart inheritance: center buttons when preceded by centered text
   Only applies if no explicit alignment class is set on buttons */
.has-text-align-center+.wp-block-buttons:not([class*="is-content-justification"]),
.has-text-align-center~.wp-block-buttons:not([class*="is-content-justification"]) {
    justify-content: center;
}

/* Section-level button alignment override
   Uses data-button-alignment attribute on section wrapper */
[data-button-alignment="left"] .wp-block-buttons {
    justify-content: flex-start !important;
}

[data-button-alignment="center"] .wp-block-buttons {
    justify-content: center !important;
}

[data-button-alignment="right"] .wp-block-buttons {
    justify-content: flex-end !important;
}

/* Section-level title alignment override
   Uses data-title-alignment attribute on section wrapper
   Targets section-level headings and their following subtitle paragraphs */
[data-title-alignment="left"]>h2,
[data-title-alignment="left"]>.wp-block-group>h2,
[data-title-alignment="left"]>.wp-block-cover__inner-container>h2,
[data-title-alignment="left"]>h2+p,
[data-title-alignment="left"]>.wp-block-group>h2+p,
[data-title-alignment="left"]>.wp-block-cover__inner-container>h2+p {
    text-align: left !important;
}

[data-title-alignment="center"]>h2,
[data-title-alignment="center"]>.wp-block-group>h2,
[data-title-alignment="center"]>.wp-block-cover__inner-container>h2,
[data-title-alignment="center"]>h2+p,
[data-title-alignment="center"]>.wp-block-group>h2+p,
[data-title-alignment="center"]>.wp-block-cover__inner-container>h2+p {
    text-align: center !important;
}

[data-title-alignment="right"]>h2,
[data-title-alignment="right"]>.wp-block-group>h2,
[data-title-alignment="right"]>.wp-block-cover__inner-container>h2,
[data-title-alignment="right"]>h2+p,
[data-title-alignment="right"]>.wp-block-group>h2+p,
[data-title-alignment="right"]>.wp-block-cover__inner-container>h2+p {
    text-align: right !important;
}

/* ==========================================================================
   DESIGN TOKEN OVERRIDES
   Override inline styles from patterns with design system values.
   Uses !important to beat inline style specificity.
   ========================================================================== */

/* Button icon structure - main styling is in line ~1434 */

/* Icon containers */
.ecomap-btn-icon-left,
.ecomap-btn-icon-right {
    display: inline-flex;
    align-items: center;
}

/* Empty icon containers hidden */
.ecomap-btn-icon-left:empty,
.ecomap-btn-icon-right:empty {
    display: none;
}

/* Icon sizing within buttons */
.wp-block-button__link i {
    font-size: 0.9em;
    line-height: 1;
}

/* Badge/chip radius - uses --radius-chip which becomes 9999px (pill shape) on 'round' */
.ecomap-component-badge {
    border-radius: var(--radius-chip, 9999px) !important;
}

/* Form/search input radius */
.wp-block-search__input,
.wp-block-search__button {
    border-radius: var(--radius-sm) !important;
}

/* Card radius - override inline styles from patterns */
.ecomap-card,
.ecomap-component-card,
.ecomap-component-card-icon-text,
.ecomap-component-card-image,
.ecomap-component-card-testimonial,
.ecomap-component-card-contact,
.ecomap-component-card-persona,
.ecomap-component-card-resource {
    border-radius: var(--radius-md) !important;
}

/* Large card radius - larger cards use --radius-lg */
.ecomap-card.shadow-md,
.ecomap-testimonial-featured,
.ecomap-timeline-card,
.ecomap-carousel-card {
    border-radius: var(--radius-lg) !important;
}

/* Badge and small element radius */
.ecomap-trust-badge,
.ecomap-keyword-card {
    border-radius: var(--radius-md) !important;
}

/* Constrained layout enforcement (wp-block-library is dequeued) */
.is-layout-constrained {
    max-width: var(--container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* When alignfull is on the same element as is-layout-constrained, alignfull wins */
.is-layout-constrained.alignfull {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.is-layout-constrained>* {
    max-width: var(--content-width, 65ch);
    margin-left: auto;
    margin-right: auto;
}

/* Allow alignwide and alignfull to break out of constrained layout */
.is-layout-constrained>.alignwide {
    max-width: var(--container-wide, 1400px);
}

.is-layout-constrained>.alignfull {
    max-width: none;
}

/* Allow column blocks to break out of constrained layout for proper mobile stacking */
.is-layout-constrained>.wp-block-columns {
    max-width: 100%;
}

/* ==========================================================================
   CONTENT BLEED PREVENTION
   Neutralize nested alignwide within sections to prevent overflow.
   When alignwide columns are inside an already-constrained or alignwide
   section, they should not try to break out further with negative margins.
   ========================================================================== */

/* Neutralize alignwide negative margins inside ecomap sections */
.ecomap-section .alignwide,
.ecomap-section.alignwide .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure columns inside constrained sections don't overflow */
.ecomap-section.is-layout-constrained>.wp-block-columns.alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Prevent nested alignwide in cover blocks (heroes) from bleeding */
.wp-block-cover .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure all child elements within sections respect container bounds */
.ecomap-section>*,
.ecomap-section .wp-block-columns,
.ecomap-section .wp-block-column {
    max-width: 100%;
    box-sizing: border-box;
}

/* Images inside sections must not exceed container */
/* Exclude cover block background images which need absolute positioning */
.ecomap-section img:not(.wp-block-cover__image-background) {
    max-width: 100%;
    height: auto;
}

/* Figures and media blocks inside sections */
.ecomap-section figure,
.ecomap-section .wp-block-image,
.ecomap-section .wp-block-video,
.ecomap-section .wp-block-embed {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure cover block background images fill their container */
.ecomap-section.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover .wp-block-cover__image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* Ensure repeatable items don't overflow their containers */
.ecomap-repeatable-item {
    max-width: 100%;
    overflow: hidden;
}

/* Dynamic layout columns should stay within bounds */
.wp-block-columns.ecomap-dynamic-layout {
    max-width: 100%;
    overflow: visible;
}

.wp-block-columns.ecomap-dynamic-layout>.wp-block-column {
    max-width: 100%;
    overflow: hidden;
}

/* Column ratio layouts: ensure columns don't overflow */
[data-column-ratio] .wp-block-columns {
    max-width: 100%;
}

[data-column-ratio] .wp-block-columns>.wp-block-column {
    max-width: 100%;
    overflow: visible;
}

/* Images in column ratio layouts: ensure border-radius displays correctly
   The figure has inline border-radius style, so we apply the same variable to the img */
[data-column-ratio] figure.wp-block-image[style*="border-radius"] img {
    border-radius: var(--wp--preset--spacing--lg);
}

/* Mobile: reset all potential overflow issues */
@media (max-width: 768px) {
    .ecomap-section .wp-block-columns,
    .ecomap-section .wp-block-column,
    .ecomap-section .wp-block-group {
        max-width: 100%;
    }

    /* Ensure images scale properly on mobile */
    .ecomap-section .wp-block-image img {
        width: 100%;
        max-width: 100%;
    }
}

/* Groups inside columns should stretch to fill, not center */
.wp-block-column>.is-layout-constrained {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   BASE LAYOUT & CONTAINERS
   ========================================================================== */

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--md, 1.5rem);
}

/* Site wrapper */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area */
.site-main,
main#main {
    flex: 1;
    width: 100%;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 1rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    z-index: 9999;
}

/* Global focus indicator for keyboard navigation (WCAG 2.4.7) */
a:focus-visible,
[role="tab"]:focus-visible,
[role="tabpanel"]:focus-visible,
.ecomap-carousel-dot:focus-visible,
.ecomap-carousel-nav:focus-visible,
.ecomap-carousel-pause:focus-visible,
.ecomap-filter-tab:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* Screen reader text utility (WCAG) */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* WordPress block alignment */
.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure full-width sections break out of any root padding */
.has-global-padding>.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Full-width sections should have their own internal padding */
.alignfull.has-global-padding {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.alignwide {
    width: calc(100% + 4rem);
    max-width: calc(100% + 2rem);
    margin-left: -2rem;
    margin-right: -2rem;
}

/* Cover block - Hero sections */
.wp-block-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--spacing-16) var(--spacing-4);
    overflow: hidden;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    /* Above the background overlay */
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Neutralize alignwide negative margins inside cover blocks to prevent overflow */
.wp-block-cover__inner-container .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Cover block background image */
.wp-block-cover__image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Columns/Grid layout */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    align-items: stretch;
    /* Equal height columns */
}

.wp-block-column {
    flex: 1;
    min-width: 0;
    display: flex;
    /* Enable inner flex for button positioning */
    flex-direction: column;
    /* Stack children vertically */
}

/* Push buttons to bottom of cards for equal-height alignment */
.ecomap-card .wp-block-buttons,
.wp-block-column>.wp-block-buttons:last-child,
.wp-block-column.ecomap-repeatable-item .wp-block-buttons:last-child {
    margin-top: auto;
}

/* Ensure direct parent of buttons in cards is a flex container (required for margin-top: auto) */
.ecomap-card:has(.wp-block-buttons) {
    display: flex;
    flex-direction: column;
}

.wp-block-column.ecomap-repeatable-item:has(.wp-block-buttons)>.wp-block-group {
    display: flex;
    flex-direction: column;
}

/* General fix: Make any column's inner group a flex container when it contains buttons
   This catches patterns like card-stage-journey that don't use ecomap-repeatable-item */
.wp-block-column:has(.wp-block-buttons)>.wp-block-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Push buttons to bottom in any column's nested group */
.wp-block-column>.wp-block-group>.wp-block-buttons:last-child {
    margin-top: auto;
}

/* ==========================================================================
   EQUAL HEIGHT REPEATABLES
   Inner cards fill the stretched column height for visual consistency.
   Using flex-grow instead of height:100% allows boxes to shrink when
   content is removed (GitHub Issue #41).
   ========================================================================== */

/* Equal height cards - inner content fills stretched column */
.wp-block-column.ecomap-repeatable-item>.wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Also handle direct ecomap-card children */
.wp-block-column.ecomap-repeatable-item>.wp-block-group.ecomap-card,
.wp-block-column.ecomap-repeatable-item>.ecomap-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Nested card content should also expand AND be flex container for button alignment */
.ecomap-card>.wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Gateway cards (hero-hub-gateway) */
.ecomap-gateway-card-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Image cards - content below image should expand */
.wp-block-column.ecomap-repeatable-item .wp-block-image+.wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Ensure ALL nested groups in repeatable cards are flex containers
   This catches deeply nested groups for proper button bottom-alignment */
.wp-block-column.ecomap-repeatable-item .wp-block-group {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   DYNAMIC REPEATABLE LAYOUT SYSTEM
   Calculates column widths based on item count and container width
   Uses Smart Hybrid algorithm for optimal row distribution
   ========================================================================== */

.wp-block-columns.ecomap-dynamic-layout {
    flex-wrap: wrap;
    justify-content: center;
    /* Center remainder items in last row */
    gap: var(--spacing-6) !important;
    /* Override WordPress blockGap to match calc formulas */
}

/* Split layouts with explicit flex-basis: add gap between columns on desktop */
@media (min-width: 768px) {
    .wp-block-columns:not(.ecomap-dynamic-layout):has(> [style*="flex-basis"]) {
        gap: 32px !important;
    }
}

/* Mobile: no horizontal gap for stacked split layouts */
@media (max-width: 767px) {
    .wp-block-columns:not(.ecomap-dynamic-layout):has(> [style*="flex-basis"]) {
        gap: 0 !important;
    }
}

/* Dynamic widths - use spacing variable for gap offset (spaciousness support) */
.wp-block-columns.ecomap-dynamic-layout[data-items-per-row="1"]>.wp-block-column {
    flex: 0 1 100%;
}

.wp-block-columns.ecomap-dynamic-layout[data-items-per-row="2"]>.wp-block-column {
    flex: 0 1 calc(50% - var(--spacing-6) / 2);
}

.wp-block-columns.ecomap-dynamic-layout[data-items-per-row="3"]>.wp-block-column {
    flex: 0 1 calc(33.333% - var(--spacing-6) * 2 / 3);
}

.wp-block-columns.ecomap-dynamic-layout[data-items-per-row="4"]>.wp-block-column {
    flex: 0 1 calc(25% - var(--spacing-6) * 3 / 4);
}

/* Tablet: Max 2 per row */
@media (max-width: 1024px) {

    .wp-block-columns.ecomap-dynamic-layout[data-items-per-row="3"]>.wp-block-column,
    .wp-block-columns.ecomap-dynamic-layout[data-items-per-row="4"]>.wp-block-column {
        flex: 0 1 calc(50% - var(--spacing-6) / 2);
    }
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
    .wp-block-columns.ecomap-dynamic-layout>.wp-block-column {
        flex: 0 1 100%;
    }
}

/* ==========================================================================
   Column Ratio Controls (two-column layouts)
   Applied via data-column-ratio attribute on section elements
   ========================================================================== */

/* Desktop/Tablet: Apply custom column ratios (accounting for 32px gap) */
@media (min-width: 768px) {
    [data-column-ratio="30"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(30% - 16px) !important;
    }

    [data-column-ratio="30"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(70% - 16px) !important;
    }

    [data-column-ratio="35"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(35% - 16px) !important;
    }

    [data-column-ratio="35"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(65% - 16px) !important;
    }

    [data-column-ratio="40"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(40% - 16px) !important;
    }

    [data-column-ratio="40"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(60% - 16px) !important;
    }

    [data-column-ratio="45"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(45% - 16px) !important;
    }

    [data-column-ratio="45"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(55% - 16px) !important;
    }

    [data-column-ratio="50"] .wp-block-columns>.wp-block-column {
        flex-basis: calc(50% - 16px) !important;
    }

    [data-column-ratio="55"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(55% - 16px) !important;
    }

    [data-column-ratio="55"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(45% - 16px) !important;
    }

    [data-column-ratio="60"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(60% - 16px) !important;
    }

    [data-column-ratio="60"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(40% - 16px) !important;
    }

    [data-column-ratio="65"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(65% - 16px) !important;
    }

    [data-column-ratio="65"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(35% - 16px) !important;
    }

    [data-column-ratio="70"] .wp-block-columns>.wp-block-column:first-child {
        flex-basis: calc(70% - 16px) !important;
    }

    [data-column-ratio="70"] .wp-block-columns>.wp-block-column:last-child {
        flex-basis: calc(30% - 16px) !important;
    }

    /* Flipped items: reverse the column ratios so content/media keep their widths regardless of position */
    [data-column-ratio="30"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(70% - 16px) !important;
    }
    [data-column-ratio="30"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(30% - 16px) !important;
    }
    [data-column-ratio="35"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(65% - 16px) !important;
    }
    [data-column-ratio="35"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(35% - 16px) !important;
    }
    [data-column-ratio="40"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(60% - 16px) !important;
    }
    [data-column-ratio="40"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(40% - 16px) !important;
    }
    [data-column-ratio="45"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(55% - 16px) !important;
    }
    [data-column-ratio="45"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(45% - 16px) !important;
    }
    /* 50% doesn't need flip rules - it's symmetric */
    [data-column-ratio="55"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(45% - 16px) !important;
    }
    [data-column-ratio="55"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(55% - 16px) !important;
    }
    [data-column-ratio="60"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(40% - 16px) !important;
    }
    [data-column-ratio="60"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(60% - 16px) !important;
    }
    [data-column-ratio="65"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(35% - 16px) !important;
    }
    [data-column-ratio="65"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(65% - 16px) !important;
    }
    [data-column-ratio="70"] .wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: calc(30% - 16px) !important;
    }
    [data-column-ratio="70"] .wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: calc(70% - 16px) !important;
    }
}

/* Mobile: Always stack regardless of ratio */
@media (max-width: 767px) {
    [data-column-ratio] .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ==========================================================================
   Column Flip Controls
   Flips column order via flex-direction: row-reverse
   ========================================================================== */

@media (min-width: 768px) {
    [data-flip-columns="true"] .wp-block-columns {
        flex-direction: row-reverse;
    }
}

/* Mobile: For non-stacked layouts, also flip */
@media (max-width: 767px) {
    [data-flip-columns="true"] .wp-block-columns.is-not-stacked-on-mobile {
        flex-direction: row-reverse;
    }
}

/* Special handling for hero-split (cover block wrapper) */
.ecomap-pattern-hero-split[data-flip-columns="true"] .wp-block-columns {
    flex-direction: row-reverse;
}

/* Group block - Sections */
.wp-block-group {
    padding: var(--spacing-4);
}

.wp-block-group.alignfull {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

/* Constrained layout */
.wp-block-group.is-layout-constrained>* {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}

/* Images */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-image.alignfull img {
    width: 100%;
}

/* ==========================================================================
   BASE HEADER & NAVIGATION
   These styles provide the foundation that viewport-specific rules modify
   ========================================================================== */

/* Site Header */
.site-header,
#masthead {
    background-color: var(--nav-background, #1e293b);
    min-height: 64px;
    display: flex;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Nav style override CSS variables */
    box-shadow: var(--nav-shadow, none);
    backdrop-filter: blur(var(--nav-blur, 0));
    -webkit-backdrop-filter: blur(var(--nav-blur, 0));
    border-bottom: var(--nav-border, none);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}

/* Nav selection state for Studio editor */
.site-header.ecomap-nav-selected,
#masthead.ecomap-nav-selected {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: -2px;
}

/* Header Container - Flex layout */
.header-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 64px;
    padding: 0 var(--wp--preset--spacing--md, 1.5rem);
    max-width: 1280px;
    margin: 0 auto;
}

/* Site Branding */
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-branding a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.custom-logo {
    max-height: 48px;
    width: auto;
    height: auto;
}

/* Nav Logo Text - displayed next to logo */
.nav-logo-text {
    margin-left: var(--spacing-3, 12px);
    font-size: var(--wp--preset--font-size--lg, 1.125rem);
    font-weight: 600;
    color: var(--nav-text-color, inherit);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Mobile: smaller logo text */
.ecomap-viewport-mobile .nav-logo-text,
.ecomap-viewport-xs .nav-logo-text {
    font-size: var(--wp--preset--font-size--md, 1rem);
    margin-left: var(--spacing-2, 8px);
}

@media (max-width: 768px) {
    .nav-logo-text {
        font-size: var(--wp--preset--font-size--md, 1rem);
        margin-left: var(--spacing-2, 8px);
    }
}

.site-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nav-text-color, #ffffff);
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

/* Logo Placeholder - shown when no logo uploaded */
.logo-placeholder-link {
    text-decoration: none;
    color: inherit;
}

.logo-placeholder {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--nav-text-color, #ffffff);
    letter-spacing: 0.05em;
}

.site-description {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Main Navigation - Base styles */
.main-navigation {
    display: flex;
    align-items: center;
    margin-left: auto; /* Push nav + buttons to the right */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-navigation li {
    margin: 0;
    position: relative;
}

.main-navigation a {
    display: block;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--nav-text-color, #ffffff);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color var(--nav-hover-transition, 0.15s) ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--nav-link-hover-color, var(--nav-hover-color, #0ea5e9));
}

/* Dropdown Indicators - handled by viewport-specific rules below */
/* Desktop: triangle via ::after pseudo-element */
/* Mobile/Tablet: chevron via .dropdown-icon element (added by JS) */

/* Desktop Dropdown Menus */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--nav-background, #1e293b);
    border-radius: 6px;
    padding: 0.5rem 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.main-navigation li:hover>.sub-menu {
    display: block;
}

.main-navigation .sub-menu a {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
}

.main-navigation .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   MOBILE NAVIGATION - HAMBURGER MENU
   Responsive navigation for tablet and mobile (≤1024px)
   Uses viewport classes from frontend-viewport.js
   ========================================================================== */

/* CSS Variables for menu transitions */
:root {
    --menu-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-drawer-width: 280px;
    --nav-background: color-mix(in srgb, var(--color-primary, #3b82f6) 20%, #0f172a);
    --nav-text-color: #ffffff;
    --nav-hover-color: var(--color-primary, #3b82f6);
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/* Hamburger Button - Hidden on desktop */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 1001;
    position: relative;
}

.menu-toggle:focus {
    outline: 2px solid var(--nav-hover-color);
    outline-offset: 2px;
}

.menu-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* Hamburger Bars */
.hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--nav-text-color);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X Animation */
.menu-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--menu-transition), visibility 0s linear var(--menu-transition);
    z-index: 998;
}

.menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--menu-transition), visibility 0s linear 0s;
}

/* ==========================================================================
   VIEWPORT CLASS-BASED RESPONSIVE NAV
   Uses .ecomap-viewport-* classes from frontend-viewport.js
   ========================================================================== */

/* Desktop (>1024px): Hide hamburger, show horizontal nav */
.ecomap-viewport-desktop .menu-toggle {
    display: none !important;
}

.ecomap-viewport-desktop .menu-overlay {
    display: none !important;
}

.ecomap-viewport-desktop .main-navigation {
    display: flex;
    align-items: center;
    margin-left: auto;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.ecomap-viewport-desktop .main-navigation ul {
    display: flex;
    flex-direction: row;
    gap: 36px;
}

.ecomap-viewport-desktop .main-navigation li {
    margin: 0;
    border: none;
}

.ecomap-viewport-desktop .main-navigation a {
    padding: 0;
    display: inline;
}

/* Tablet/Mobile/XS (≤1024px): Show hamburger, nav as drawer */
.ecomap-viewport-tablet .menu-toggle,
.ecomap-viewport-mobile .menu-toggle,
.ecomap-viewport-xs .menu-toggle {
    display: flex !important;
}

.ecomap-viewport-tablet .site-branding,
.ecomap-viewport-mobile .site-branding,
.ecomap-viewport-xs .site-branding {
    flex: 1;
    margin-left: 8px;
}

.ecomap-viewport-tablet .custom-logo,
.ecomap-viewport-mobile .custom-logo,
.ecomap-viewport-xs .custom-logo {
    max-height: 40px;
}

.ecomap-viewport-tablet .site-description,
.ecomap-viewport-mobile .site-description,
.ecomap-viewport-xs .site-description {
    display: none;
}

/* Nav becomes slide-out drawer */
.ecomap-viewport-tablet .main-navigation,
.ecomap-viewport-mobile .main-navigation,
.ecomap-viewport-xs .main-navigation {
    position: fixed;
    top: 64px;
    left: 0;
    width: var(--nav-drawer-width);
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    background: var(--nav-background);
    transform: translateX(-100%);
    z-index: 999;
    padding-top: 0;
    overflow-y: auto;
    box-shadow: none;
    visibility: hidden;
    transition: transform var(--menu-transition), box-shadow 0.3s ease, visibility 0s 0.3s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Disable transitions during viewport resize */
.viewport-resizing .main-navigation,
.viewport-resizing .menu-overlay {
    transition: none !important;
}

body.menu-open .main-navigation {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    clip-path: inset(0 -20px -20px 0);
    visibility: visible;
    transition: transform var(--menu-transition), box-shadow 0.3s ease, visibility 0s;
}

/* Menu drawer container */
.ecomap-viewport-tablet .menu-drawer,
.ecomap-viewport-mobile .menu-drawer,
.ecomap-viewport-xs .menu-drawer {
    padding: 8px 0 0 0;
}

/* Vertical menu items */
.ecomap-viewport-tablet .main-navigation ul,
.ecomap-viewport-mobile .main-navigation ul,
.ecomap-viewport-xs .main-navigation ul {
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
}

.ecomap-viewport-tablet .main-navigation li,
.ecomap-viewport-mobile .main-navigation li,
.ecomap-viewport-xs .main-navigation li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.ecomap-viewport-tablet .main-navigation li:last-child,
.ecomap-viewport-mobile .main-navigation li:last-child,
.ecomap-viewport-xs .main-navigation li:last-child {
    border-bottom: none;
}

.ecomap-viewport-tablet .main-navigation a,
.ecomap-viewport-mobile .main-navigation a,
.ecomap-viewport-xs .main-navigation a {
    display: block;
    padding: var(--spacing-4) var(--spacing-5);
    font-size: 1rem;
}

.ecomap-viewport-tablet .main-navigation a:hover,
.ecomap-viewport-tablet .main-navigation a:focus,
.ecomap-viewport-mobile .main-navigation a:hover,
.ecomap-viewport-mobile .main-navigation a:focus,
.ecomap-viewport-xs .main-navigation a:hover,
.ecomap-viewport-xs .main-navigation a:focus {
    background: rgba(255, 255, 255, 0.05);
}

/* Mobile: Flatten sub-menus to appear inline with indentation (not dropdowns) */
.ecomap-viewport-tablet .main-navigation .sub-menu,
.ecomap-viewport-mobile .main-navigation .sub-menu,
.ecomap-viewport-xs .main-navigation .sub-menu {
    display: block !important;
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ecomap-viewport-tablet .main-navigation .sub-menu .menu-item,
.ecomap-viewport-mobile .main-navigation .sub-menu .menu-item,
.ecomap-viewport-xs .main-navigation .sub-menu .menu-item {
    background: rgba(0, 0, 0, 0.1);
}

.ecomap-viewport-tablet .main-navigation .sub-menu .menu-item a,
.ecomap-viewport-mobile .main-navigation .sub-menu .menu-item a,
.ecomap-viewport-xs .main-navigation .sub-menu .menu-item a {
    padding-left: 40px;
    font-size: 0.9375rem;
}

/* Mobile: Second-level nesting (grandchildren) */
.ecomap-viewport-tablet .main-navigation .sub-menu .sub-menu .menu-item a,
.ecomap-viewport-mobile .main-navigation .sub-menu .sub-menu .menu-item a,
.ecomap-viewport-xs .main-navigation .sub-menu .sub-menu .menu-item a {
    padding-left: 60px;
}

/* Mobile: Third-level nesting (great-grandchildren) */
.ecomap-viewport-tablet .main-navigation .sub-menu .sub-menu .sub-menu .menu-item a,
.ecomap-viewport-mobile .main-navigation .sub-menu .sub-menu .sub-menu .menu-item a,
.ecomap-viewport-xs .main-navigation .sub-menu .sub-menu .sub-menu .menu-item a {
    padding-left: 80px;
}

/* Mobile: Progressively darker backgrounds for nested depth */
.ecomap-viewport-tablet .main-navigation .sub-menu .sub-menu .menu-item,
.ecomap-viewport-mobile .main-navigation .sub-menu .sub-menu .menu-item,
.ecomap-viewport-xs .main-navigation .sub-menu .sub-menu .menu-item {
    background: rgba(0, 0, 0, 0.15);
}

.ecomap-viewport-tablet .main-navigation .sub-menu .sub-menu .sub-menu .menu-item,
.ecomap-viewport-mobile .main-navigation .sub-menu .sub-menu .sub-menu .menu-item,
.ecomap-viewport-xs .main-navigation .sub-menu .sub-menu .sub-menu .menu-item {
    background: rgba(0, 0, 0, 0.2);
}

/* Hide dropdown arrow on mobile since sub-menus are always visible */
.ecomap-viewport-tablet .main-navigation .menu-item-has-children>a::after,
.ecomap-viewport-mobile .main-navigation .menu-item-has-children>a::after,
.ecomap-viewport-xs .main-navigation .menu-item-has-children>a::after {
    display: none;
}

/* Show dropdown arrow in Studio editor even at tablet viewport (editor preview is narrower due to panels) */
.ecomap-editing.ecomap-viewport-tablet .main-navigation .menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin-left: 4px;
    border: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    border-bottom: none;
    transform: none;
    vertical-align: middle;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ecomap-editing.ecomap-viewport-tablet .main-navigation .menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* Hide dropdown toggle button on mobile - sub-menus always visible */
.ecomap-viewport-tablet .main-navigation .dropdown-toggle,
.ecomap-viewport-mobile .main-navigation .dropdown-toggle,
.ecomap-viewport-xs .main-navigation .dropdown-toggle {
    display: none;
}

/* Scroll lock when menu open */
html:has(body.menu-open),
body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.menu-open {
    padding-right: var(--scrollbar-width, 0px);
    padding-top: 64px;
}

body.menu-open .site-header,
body.menu-open #masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    z-index: 1001 !important;
}

/* Admin Bar Offset */
.admin-bar.ecomap-viewport-tablet .main-navigation,
.admin-bar.ecomap-viewport-mobile .main-navigation,
.admin-bar.ecomap-viewport-xs .main-navigation {
    top: 96px;
    height: calc(100dvh - 96px);
}

/* Reduced Motion — WCAG 2.3.3 global override */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   NAV BUTTONS
   ========================================================================== */

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1.5rem;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md, 6px);
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.nav-btn-primary {
    background-color: var(--nav-button-fill, var(--color-primary, #0073aa));
    color: var(--nav-button-text, var(--color-primary-contrast, #ffffff));
    border: 2px solid var(--nav-button-fill, var(--color-primary, #0073aa));
    transition: all var(--nav-hover-transition, 0.15s) ease;
}

.nav-btn-primary:hover {
    filter: brightness(0.9);
}

.nav-btn-secondary {
    background-color: transparent;
    color: var(--nav-text-color, #ffffff);
    border: 2px solid currentColor;
}

.nav-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-btn-link {
    background: transparent;
    color: var(--nav-text-color, #ffffff);
    border: none;
    padding: 0.5rem 0.75rem;
}

.nav-btn-link:hover {
    color: var(--nav-hover-color, var(--color-primary));
}


/* Mobile: hide nav buttons in header (they appear in drawer instead) */
/* Must match hamburger menu breakpoint (768px) from frontend-viewport.js */
@media (max-width: 768px) {
    .header-container > .nav-buttons {
        display: none;
    }
}

/* Studio viewport classes (for preview responsiveness) */
.ecomap-viewport-tablet .header-container > .nav-buttons,
.ecomap-viewport-mobile .header-container > .nav-buttons,
.ecomap-viewport-xs .header-container > .nav-buttons {
    display: none;
}

/* Mobile drawer nav buttons - shown at bottom of drawer on mobile viewports */
.nav-buttons-drawer {
    display: none;
}

/* Show drawer buttons on mobile/tablet viewports */
.ecomap-viewport-tablet .nav-buttons-drawer,
.ecomap-viewport-mobile .nav-buttons-drawer,
.ecomap-viewport-xs .nav-buttons-drawer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--spacing-5, 1.25rem);
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ecomap-viewport-tablet .nav-buttons-drawer .nav-btn,
.ecomap-viewport-mobile .nav-buttons-drawer .nav-btn,
.ecomap-viewport-xs .nav-buttons-drawer .nav-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
}

/* Media query fallback for non-Studio contexts */
@media (max-width: 1024px) {
    .nav-buttons-drawer {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: var(--spacing-5, 1.25rem);
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-buttons-drawer .nav-btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* Ensure drawer buttons stay hidden on desktop */
.ecomap-viewport-desktop .nav-buttons-drawer,
.ecomap-viewport-laptop .nav-buttons-drawer {
    display: none !important;
}

@media (min-width: 1025px) {
    .nav-buttons-drawer {
        display: none !important;
    }
}

/* ==========================================================================
   DROPDOWN MENUS (Hierarchical Navigation)
   ========================================================================== */

/* Desktop: Hover to show dropdown */
.ecomap-viewport-desktop .menu-item-has-children {
    position: relative;
}

.ecomap-viewport-desktop .menu-item-has-children>a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ecomap-viewport-desktop .menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin-left: 4px;
    border: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    border-bottom: none;
    transform: none;
    vertical-align: middle;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ecomap-viewport-desktop .menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
    opacity: 1;
}

.ecomap-viewport-desktop .sub-menu,
.ecomap-viewport-desktop .main-navigation .sub-menu {
    display: flex !important;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--nav-background);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    z-index: 100;
    list-style: none;
    margin: 0;
    gap: 0 !important;
}

.ecomap-viewport-desktop .menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.ecomap-viewport-desktop .sub-menu li {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ecomap-viewport-desktop .sub-menu a {
    display: block;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--nav-text-color);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.ecomap-viewport-desktop .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--nav-hover-color);
}

/* ==========================================================================
   NESTED DROPDOWNS (Grandchildren+)
   Desktop: Fly out to the right
   ========================================================================== */

/* Desktop: Nested items that have children */
.ecomap-viewport-desktop .sub-menu .menu-item-has-children {
    position: relative;
}

/* Desktop: Nested sub-menus fly out to the right */
.ecomap-viewport-desktop .sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    transform: translateX(-8px);
    margin-left: 4px;
}

.ecomap-viewport-desktop .sub-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Right chevron indicator for nested items with children */
.ecomap-viewport-desktop .sub-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: var(--spacing-3);
}

.ecomap-viewport-desktop .sub-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    /* Reset triangle borders from parent rule */
    border: none;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    margin-left: 8px;
    padding: 0;
    opacity: 0.6;
    flex-shrink: 0;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}

.ecomap-viewport-desktop .sub-menu .menu-item-has-children:hover > a::after {
    opacity: 1;
}

/* Mobile/Tablet: Click toggle to expand */
.dropdown-toggle {
    display: none;
}

.ecomap-viewport-tablet .dropdown-toggle,
.ecomap-viewport-mobile .dropdown-toggle,
.ecomap-viewport-xs .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--nav-text-color);
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.ecomap-viewport-tablet .dropdown-toggle:hover,
.ecomap-viewport-mobile .dropdown-toggle:hover,
.ecomap-viewport-xs .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.dropdown-icon {
    display: block;
    width: 8px;
    height: 8px;
    border: none;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-top: none;
    border-left: none;
    background: transparent;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.menu-item-has-children.is-open>.dropdown-toggle .dropdown-icon {
    transform: rotate(-135deg);
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.site-footer {
    margin-top: 0;
    padding: 0;
}

.ecomap-footer-section {
    margin-top: var(--wp--preset--spacing--xl, 32px);
}

/* Responsive footer columns */
.ecomap-viewport-mobile .ecomap-footer-section .wp-block-columns,
.ecomap-viewport-xs .ecomap-footer-section .wp-block-columns {
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg, 24px);
}

.ecomap-viewport-mobile .ecomap-footer-section .wp-block-column,
.ecomap-viewport-xs .ecomap-footer-section .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
}

.ecomap-viewport-mobile .ecomap-footer-section .wp-block-group[class*="flex"][class*="space-between"],
.ecomap-viewport-xs .ecomap-footer-section .wp-block-group[class*="flex"][class*="space-between"] {
    flex-direction: column;
    gap: var(--wp--preset--spacing--sm, 12px);
    text-align: center;
}

/* Footer colors - can be overridden by design tokens */
.site-footer,
.ecomap-footer-section,
.ecomap-footer-section.has-black-background-color,
.ecomap-footer-section.has-background {
    background-color: var(--footer-background, #000000) !important;
    color: var(--footer-text-color, #d1d5db) !important;
}

.site-footer a:not(.wp-block-button__link),
.ecomap-footer-section a:not(.wp-block-button__link) {
    color: var(--footer-link-color, var(--footer-text-color, #d1d5db));
    text-decoration: underline;
    transition: color 150ms ease;
}

.ecomap-footer-section a:not(.wp-block-button__link):hover {
    color: var(--footer-link-hover-color, var(--footer-link-color, var(--footer-text-color, #ffffff)));
}

/* Footer social links (Font Awesome icons) */
.ecomap-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.ecomap-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--footer-social-color, rgba(255, 255, 255, 0.6));
    font-size: 18px;
    text-decoration: none !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    transition: color 150ms ease, background 150ms ease;
}

.ecomap-social-links a:hover {
    color: var(--footer-social-hover-color, var(--footer-social-color, #ffffff));
    background: rgba(255, 255, 255, 0.15);
}

/* Footer nav links spacing */
.ecomap-footer-nav__links {
    gap: 4px !important;
}

.ecomap-footer-nav__links p {
    margin: 0 !important;
}

.ecomap-footer-nav__links a {
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 150ms ease;
}

.ecomap-footer-nav__links a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* Footer page list (semantic ul/li nav) */
.ecomap-footer-page-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.ecomap-footer-page-list li {
    margin: 0;
    padding: 0;
}

.ecomap-footer-page-list a {
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none;
}

/* Footer newsletter signup */
.ecomap-footer-newsletter__title {
    margin-bottom: var(--spacing-2) !important;
}

.ecomap-footer-newsletter__description {
    opacity: 0.7;
    margin-bottom: var(--spacing-4) !important;
}

.ecomap-footer-newsletter__embed {
    margin-top: var(--spacing-4);
}

/* Style embedded form inputs to match footer theme */
.ecomap-footer-newsletter__embed input[type="email"],
.ecomap-footer-newsletter__embed input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.ecomap-footer-newsletter__embed input[type="email"]::placeholder,
.ecomap-footer-newsletter__embed input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ecomap-footer-newsletter__embed input[type="submit"],
.ecomap-footer-newsletter__embed button[type="submit"] {
    margin-top: var(--spacing-2);
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--footer-btn-bg, rgba(255, 255, 255, 0.15));
    color: var(--footer-btn-text, #ffffff);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.ecomap-footer-newsletter__embed input[type="submit"]:hover,
.ecomap-footer-newsletter__embed button[type="submit"]:hover {
    background: var(--footer-btn-hover-bg, var(--footer-btn-bg, rgba(255, 255, 255, 0.25)));
    color: var(--footer-btn-hover-text, var(--footer-btn-text, #ffffff));
}

/* Footer Grid Layout - Desktop 3 columns */
.ecomap-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--wp--preset--spacing--xl, 48px);
}

/* When center column is missing (no contact/social/newsletter), use 2 columns */
.ecomap-footer-grid:has(.ecomap-footer-brand):has(.ecomap-footer-nav):not(:has(.ecomap-footer-contact)) {
    grid-template-columns: 1fr 1fr;
}

/* Footer Brand Column */
.ecomap-footer-brand {
    display: flex;
    flex-direction: column;
}

.ecomap-footer-logo-wrap {
    margin-bottom: var(--spacing-4);
}

.ecomap-footer-logo-wrap img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

.ecomap-footer-tagline {
    font-size: var(--wp--preset--font-size--sm);
    opacity: 0.8;
    margin: 0;
}

.ecomap-footer-address {
    font-size: var(--wp--preset--font-size--sm);
    opacity: 0.7;
    margin: 0;
}

.ecomap-footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: var(--spacing-4) 0;
}

/* Footer Contact Column */
.ecomap-footer-contact {
    display: flex;
    flex-direction: column;
}

.ecomap-footer-heading {
    font-size: var(--wp--preset--font-size--md);
    font-weight: 600;
    margin: 0 0 var(--spacing-4) 0;
    color: inherit;
}

.ecomap-footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.ecomap-footer-contact-links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 150ms ease;
}

.ecomap-footer-contact-links a:hover {
    opacity: 1;
}

.ecomap-footer-contact-links i {
    width: 16px;
    text-align: center;
    opacity: 0.6;
}

.ecomap-footer-newsletter-text {
    font-size: var(--wp--preset--font-size--sm);
    opacity: 0.7;
    margin: 0 0 var(--spacing-3) 0;
}

/* Footer Signup Bar - Email input + button styled like screenshot */
.ecomap-footer-signup-bar {
    margin-top: var(--spacing-2);
}

.ecomap-footer-signup-bar__input {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    overflow: hidden;
    padding: 4px;
}

.ecomap-footer-signup-bar__input input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
}
.ecomap-footer-signup-bar__input input[type="email"]:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -2px;
}

.ecomap-footer-signup-bar__input input[type="email"]::placeholder {
    color: #94a3b8;
}

.ecomap-footer-signup-bar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--footer-btn-bg, var(--color-primary, #f05453));
    color: var(--footer-btn-text, #ffffff) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 150ms ease, transform 150ms ease;
}

.ecomap-footer-signup-bar__button:hover {
    background: var(--footer-btn-hover-bg, var(--color-primary-hover, #e34342));
    transform: scale(1.02);
}

/* Footer Navigation Column */
.ecomap-footer-nav {
    display: flex;
    flex-direction: column;
}

/* Tablet Layout - Brand full width, then 2 columns */
@media (max-width: 1024px) {
    .ecomap-footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .ecomap-footer-brand {
        grid-column: 1 / -1;
        margin-bottom: var(--spacing-4);
    }

    /* When center column is missing on tablet */
    .ecomap-footer-grid:has(.ecomap-footer-brand):has(.ecomap-footer-nav):not(:has(.ecomap-footer-contact)) {
        grid-template-columns: 1fr;
    }

    .ecomap-footer-grid:has(.ecomap-footer-brand):has(.ecomap-footer-nav):not(:has(.ecomap-footer-contact)) .ecomap-footer-brand {
        grid-column: 1;
    }
}

/* Mobile Layout - Single column */
@media (max-width: 768px) {
    .ecomap-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--lg, 32px);
    }

    .ecomap-footer-brand {
        grid-column: 1;
    }

    /* Center items on mobile */
    .ecomap-footer-brand,
    .ecomap-footer-contact,
    .ecomap-footer-nav {
        text-align: center;
        align-items: center;
    }

    .ecomap-footer-contact-links {
        align-items: center;
    }

    .ecomap-social-links {
        justify-content: center;
    }
}

/* Viewport-based responsive (for Studio preview) */
.ecomap-viewport-tablet .ecomap-footer-grid {
    grid-template-columns: 1fr 1fr;
}

.ecomap-viewport-tablet .ecomap-footer-brand {
    grid-column: 1 / -1;
    margin-bottom: var(--spacing-4);
}

.ecomap-viewport-mobile .ecomap-footer-grid,
.ecomap-viewport-xs .ecomap-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg, 32px);
}

.ecomap-viewport-mobile .ecomap-footer-brand,
.ecomap-viewport-xs .ecomap-footer-brand {
    grid-column: 1;
}

.ecomap-viewport-mobile .ecomap-footer-brand,
.ecomap-viewport-mobile .ecomap-footer-contact,
.ecomap-viewport-mobile .ecomap-footer-nav,
.ecomap-viewport-xs .ecomap-footer-brand,
.ecomap-viewport-xs .ecomap-footer-contact,
.ecomap-viewport-xs .ecomap-footer-nav {
    text-align: center;
    align-items: center;
}

.ecomap-viewport-mobile .ecomap-footer-contact-links,
.ecomap-viewport-xs .ecomap-footer-contact-links {
    align-items: center;
}

.ecomap-viewport-mobile .ecomap-social-links,
.ecomap-viewport-xs .ecomap-social-links {
    justify-content: center;
}

/* ==========================================================================
   SECTION SPACING - ZERO GAPS BETWEEN SECTIONS
   ========================================================================== */

/* Remove block gap between top-level sections */
.wp-block-post-content.is-layout-flow,
.is-root-container.is-layout-flow,
body .is-layout-flow {
    gap: 0 !important;
    --wp--style--block-gap: 0 !important;
}

.wp-block-post-content>*,
.is-root-container>*,
body>.wp-block-group,
body>.wp-block-cover {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-block-post-content.has-global-padding,
.is-root-container.has-global-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-block-post-content>*:first-child,
.is-root-container>*:first-child,
body>.wp-block-group:first-child,
body>.wp-block-cover:first-child,
main>*:first-child,
.entry-content>*:first-child {
    margin-top: 0 !important;
}

.site-header+main,
.site-header+.entry-content,
header+main,
nav+main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main,
.entry-content {
    padding-top: 0 !important;
}

/* Prevent horizontal scroll - applied to content containers only to preserve sticky positioning */
.is-root-container,
.wp-block-post-content,
.entry-content,
main {
    overflow-x: clip;
    max-width: 100%;
}

/* Section vertical padding - controlled by spacing setting */
/* --section-padding-y scales with compact/comfortable/spacious */
.wp-block-cover {
    padding-top: var(--section-padding-y, 4rem) !important;
    padding-bottom: var(--section-padding-y, 4rem) !important;
}

.wp-block-group.alignfull,
.wp-block-group[class*="ecomap-section"] {
    padding-top: var(--section-padding-y, 4rem) !important;
    padding-bottom: var(--section-padding-y, 4rem) !important;
}

body>.wp-block-group,
.is-root-container.wp-block-group,
.wp-block-post-content.wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Desktop-first: Default styles are for large screens (>1024px)
   ========================================================================== */

/* Desktop Small / Tablet Landscape (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-6xl: 3rem;
        --font-size-7xl: 3.5rem;
        --spacing-32: 6rem;
        --spacing-24: 5rem;
        --spacing-20: 4rem;
    }

    .alignwide {
        max-width: 95%;
    }
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-5xl: 2.25rem;
        --font-size-6xl: 2.5rem;
        --font-size-7xl: 3rem;
        --spacing-32: 4rem;
        --spacing-24: 3rem;
        --spacing-20: 2.5rem;
        --spacing-16: 2rem;
    }

    .alignwide,
    .alignfull {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Cards - slightly tighter padding on tablet */
    .ecomap-card {
        padding: var(--spacing-6, 1.25rem);
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-4xl: 1.75rem;
        --font-size-5xl: 2rem;
        --font-size-6xl: 2.25rem;
        --font-size-7xl: 2.5rem;
        --spacing-32: 3rem;
        --spacing-24: 2.5rem;
        --spacing-20: 2rem;
        --spacing-16: 1.5rem;
        --spacing-12: 1.25rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    .wp-block-group.alignfull>.wp-block-group__inner-container,
    .wp-block-cover__inner-container {
        padding-left: var(--spacing-4, 1rem);
        padding-right: var(--spacing-4, 1rem);
    }

    /* Cover blocks - reduce min-height on mobile */
    .wp-block-cover {
        min-height: 300px;
    }

    /* Cards - tighter padding on mobile */
    .ecomap-card {
        padding: var(--spacing-4, 1rem);
    }
}

/* ==========================================================================
   TYPOGRAPHY RESPONSIVE - Override inline font-sizes
   ========================================================================== */

/* Tablet Portrait (768px) */
@media (max-width: 768px) {

    .wp-block-heading[style*="font-size:5rem"],
    .wp-block-heading[style*="font-size: 5rem"],
    h1[style*="font-size:5rem"],
    h2[style*="font-size:5rem"] {
        font-size: 3rem !important;
    }

    .wp-block-heading[style*="font-size:4rem"],
    .wp-block-heading[style*="font-size: 4rem"],
    .wp-block-heading[style*="font-size:3.5rem"],
    .wp-block-heading[style*="font-size: 3.5rem"] {
        font-size: 2.5rem !important;
    }

    h3[style*="font-size:3rem"],
    p[style*="font-size:3rem"],
    .wp-block-heading[style*="font-size:3rem"] {
        font-size: 2.25rem !important;
    }

    p[style*="font-size:4rem"],
    span[style*="font-size:4rem"] {
        font-size: 2.75rem !important;
    }

    .wp-block-heading[style*="font-size:2.5rem"],
    h2[style*="font-size:2.5rem"],
    h3[style*="font-size:2.5rem"] {
        font-size: 2rem !important;
    }

    .wp-block-image[style*="width:64px"],
    .wp-block-image[style*="width: 64px"] {
        width: 48px !important;
    }

    .wp-block-image[style*="width:56px"],
    .wp-block-image[style*="width: 56px"] {
        width: 44px !important;
    }

    /* Protect testimonial avatars from responsive width changes */
    .testimonial-avatar,
    .ecomap-component-card-testimonial .wp-block-image,
    .ecomap-component-card-testimonial figure.wp-block-image {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .testimonial-avatar img,
    .ecomap-component-card-testimonial .wp-block-image img {
        width: 48px !important;
        height: 48px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {

    .wp-block-heading[style*="font-size:5rem"],
    .wp-block-heading[style*="font-size: 5rem"],
    h1[style*="font-size:5rem"],
    h2[style*="font-size:5rem"] {
        font-size: 2.25rem !important;
    }

    .wp-block-heading[style*="font-size:4rem"],
    .wp-block-heading[style*="font-size: 4rem"],
    .wp-block-heading[style*="font-size:3.5rem"],
    .wp-block-heading[style*="font-size: 3.5rem"] {
        font-size: 2rem !important;
    }

    h3[style*="font-size:3rem"],
    p[style*="font-size:3rem"],
    .wp-block-heading[style*="font-size:3rem"] {
        font-size: 1.75rem !important;
    }

    p[style*="font-size:4rem"],
    span[style*="font-size:4rem"] {
        font-size: 2rem !important;
    }

    .wp-block-heading[style*="font-size:2.5rem"],
    h2[style*="font-size:2.5rem"],
    h3[style*="font-size:2.5rem"] {
        font-size: 1.5rem !important;
    }

    .wp-block-heading[style*="font-size:2rem"],
    h2[style*="font-size:2rem"],
    h3[style*="font-size:2rem"] {
        font-size: 1.375rem !important;
    }

    .wp-block-image[style*="width:64px"],
    .wp-block-image[style*="width: 64px"] {
        width: 40px !important;
    }

    .wp-block-image[style*="width:56px"],
    .wp-block-image[style*="width: 56px"] {
        width: 36px !important;
    }

    .wp-block-image[style*="width:48px"],
    .wp-block-image[style*="width: 48px"] {
        width: 32px !important;
    }

    /* Protect testimonial avatars from responsive width changes */
    .testimonial-avatar,
    .testimonial-avatar[style*="width:48px"],
    .ecomap-component-card-testimonial .wp-block-image,
    .ecomap-component-card-testimonial .wp-block-image[style*="width:48px"],
    .ecomap-component-card-testimonial figure.wp-block-image {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .testimonial-avatar img,
    .ecomap-component-card-testimonial .wp-block-image img {
        width: 48px !important;
        height: 48px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   LAYOUT STACKING - COLUMNS
   ========================================================================== */

/* Tablet Portrait (768px) - 2-column grid for 3-4 column layouts */
@media (max-width: 768px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:33"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:25"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:16"] {
        flex-basis: calc(50% - 1rem) !important;
        flex-grow: 0 !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:40%"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:45%"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:50%"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:55%"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:60%"],
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:65%"] {
        flex-basis: 100% !important;
    }

    .wp-block-columns {
        gap: var(--spacing-6, 1.5rem) !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:50%"]:first-child,
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:40%"]:first-child,
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis:45%"]:first-child {
        margin-bottom: var(--spacing-8, 2rem);
    }
}

/* Mobile (600px) - Single column stack */
@media (max-width: 600px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        flex-grow: 0 !important;
    }

    .wp-block-columns {
        gap: var(--spacing-4, 1rem) !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:last-child) {
        margin-bottom: var(--spacing-6, 1.5rem);
    }
}

/* ==========================================================================
   BUTTON STACKING
   ========================================================================== */

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .wp-block-buttons {
        flex-direction: column !important;
        gap: var(--spacing-3, 0.75rem) !important;
    }

    .wp-block-buttons>.wp-block-button {
        width: 100%;
    }

    .wp-block-buttons>.wp-block-button .wp-block-button__link {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   GRID LAYOUTS (Gallery)
   ========================================================================== */

@media (max-width: 768px) {

    .wp-block-gallery.columns-3,
    .wp-block-gallery.columns-4,
    .wp-block-gallery.columns-5 {
        columns: 2 !important;
    }
}

@media (max-width: 480px) {
    .wp-block-gallery {
        columns: 1 !important;
    }

    .wp-block-gallery .blocks-gallery-item {
        width: 100% !important;
    }
}

/* ==========================================================================
   ECOMAP UTILITY CLASSES
   Clean slate - NO WordPress-generated class dependencies
   These replace WordPress has-* utility classes with our custom system
   ========================================================================== */

/* Background Colors */
/* Primary Background Colors */
/* Uses section-level --color-primary if set (for button color overrides), otherwise
   falls back to WordPress preset color (global brand primary). This allows section
   style overrides to customize button backgrounds while preserving brand defaults. */
.ecomap-bg-primary {
    background-color: var(--color-primary, var(--wp--preset--color--primary));
}

.ecomap-bg-primary-hover {
    background-color: var(--color-primary-hover);
}

.ecomap-bg-primary-light {
    background-color: var(--color-primary-light);
}

.ecomap-bg-primary-lighter {
    background-color: var(--color-primary-lighter);
}

/* Secondary Background Colors (complementary) */
.ecomap-bg-secondary {
    background-color: var(--wp--preset--color--secondary, var(--color-secondary));
}

.ecomap-bg-secondary-hover {
    background-color: var(--color-secondary-hover);
}

.ecomap-bg-secondary-light {
    background-color: var(--color-secondary-light);
}

.ecomap-bg-secondary-lighter {
    background-color: var(--color-secondary-lighter);
}

/* Tertiary Background Colors (triadic) */
.ecomap-bg-tertiary {
    background-color: var(--wp--preset--color--tertiary, var(--color-tertiary));
}

.ecomap-bg-tertiary-hover {
    background-color: var(--color-tertiary-hover);
}

.ecomap-bg-tertiary-light {
    background-color: var(--color-tertiary-light);
}

.ecomap-bg-tertiary-lighter {
    background-color: var(--color-tertiary-lighter);
}

/* Base Background Colors */
.ecomap-bg-surface {
    background-color: var(--color-surface, #ffffff);
}

.ecomap-bg-base {
    background-color: var(--color-base, #f8fafc);
}

.ecomap-bg-dark {
    background-color: var(--color-dark, #1a1a1a);
}

.ecomap-bg-contrast {
    background-color: var(--color-contrast, #ffffff);
}

/* DEPRECATED: .ecomap-bg-muted incorrectly uses text color for background.
   Use .ecomap-bg-base for light gray backgrounds instead. */
.ecomap-bg-muted {
    background-color: var(--color-text-muted, #666666);
}

.ecomap-bg-transparent {
    background-color: transparent;
}

/* Text Colors */
/* Primary Text Colors */
.ecomap-text-primary {
    color: var(--color-primary);
}

.ecomap-text-primary-dark {
    color: var(--color-primary-dark);
}

/* Fix: When element has contrast/white background, use dark primary color for text */
/* This ensures text is visible on white backgrounds regardless of section theme */
.ecomap-bg-contrast.ecomap-text-primary,
.ecomap-bg-base.ecomap-text-primary,
.has-white-background-color.ecomap-text-primary {
    color: var(--wp--preset--color--primary, #0073aa) !important;
}

/* Secondary Text Colors */
.ecomap-text-secondary {
    color: var(--color-secondary);
}

.ecomap-text-secondary-dark {
    color: var(--color-secondary-dark);
}

/* Tertiary Text Colors */
.ecomap-text-tertiary {
    color: var(--color-tertiary);
}

.ecomap-text-tertiary-dark {
    color: var(--color-tertiary-dark);
}

/* === SEMANTIC ACCENT HIERARCHY === */
/* Cascading colors: tertiary ⊂ secondary ⊂ primary
   When secondary/tertiary inactive, these cascade to primary via PHP-generated variables */

/* Strong accent - CTAs, progress indicators, stat numbers, badges */
.ecomap-accent-strong {
    color: var(--color-accent-strong);
}

.ecomap-bg-accent-strong {
    background-color: var(--color-accent-strong);
    color: var(--color-primary-contrast);
}

/* Medium accent - Eyebrows, category labels, icons, job titles */
.ecomap-accent-medium {
    color: var(--color-accent-medium);
}

.ecomap-bg-accent-medium {
    background-color: var(--color-accent-medium);
}

/* Subtle accent - Timestamps, read times, most subtle colored elements */
.ecomap-accent-subtle {
    color: var(--color-accent-subtle);
}

.ecomap-bg-accent-subtle {
    background-color: var(--color-accent-subtle);
}

/* Light variants for dark backgrounds - use PHP-generated cascading variables */
.ecomap-accent-strong-light {
    color: var(--color-accent-strong-light);
}

.ecomap-accent-medium-light {
    color: var(--color-accent-medium-light);
}

.ecomap-accent-subtle-light {
    color: var(--color-accent-subtle-light);
}

/* Base Text Colors */
.ecomap-text-base {
    color: var(--color-text, #333333);
}

.ecomap-text-muted {
    color: var(--color-text-muted, #666666);
}

/* Secondary text (Text 2) - for stat labels, subtitles, etc. */
.ecomap-text-2 {
    color: var(--color-text-2, var(--color-text-muted, #64748b));
}

/* Text that contrasts with section background.
   Uses --section-text (auto-computed for each section) with fallback to white.
   Note: --color-contrast is for button backgrounds, use --section-text for text. */
.ecomap-text-contrast {
    color: var(--section-text, var(--color-text-inverted, #ffffff));
}

.ecomap-text-dark {
    color: var(--color-dark, #1a1a1a);
}

.ecomap-text-inherit {
    color: inherit;
}

/* Border Colors */
.ecomap-border-primary {
    border-color: var(--color-primary);
}

.ecomap-border-secondary {
    border-color: var(--color-secondary);
}

.ecomap-border-tertiary {
    border-color: var(--color-tertiary);
}

/* Font Sizes */
.ecomap-text-xs {
    font-size: var(--text-xs, 0.75rem);
}

.ecomap-text-sm {
    font-size: var(--font-size-sm, 0.875rem) !important;
}

.ecomap-text-md {
    font-size: var(--text-base, 1rem);
}

.ecomap-text-lg {
    font-size: var(--text-lg, 1.125rem);
}

.ecomap-text-xl {
    font-size: var(--text-xl, 1.25rem);
}

.ecomap-text-2xl {
    font-size: var(--text-2xl, 1.5rem);
}

.ecomap-text-3xl {
    font-size: var(--text-3xl, 1.875rem);
}

.ecomap-text-4xl {
    font-size: var(--text-4xl, 2.25rem);
}

.ecomap-text-5xl {
    font-size: var(--text-5xl, 3rem);
}

/* Font Families */
.ecomap-font-heading {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
}

.ecomap-font-body {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* Font Weights */
.ecomap-font-normal {
    font-weight: 400;
}

.ecomap-font-medium {
    font-weight: 500;
}

.ecomap-font-semibold {
    font-weight: 600;
}

.ecomap-font-bold {
    font-weight: 700;
}

/* Text gradient for hero emphasis - uses --accent-text-color with opacity gradient */
.text-gradient-primary,
.ecomap-text-accent {
    --accent-text-base: var(--accent-text-color, var(--color-primary, #3b82f6));
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-text-base) 60%, transparent), var(--accent-text-base));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Theming - Complete styling packages */
.ecomap-theme-light {
    --section-bg: var(--color-surface, #ffffff);
    --section-text: var(--color-text, #333333);
    --section-text-muted: var(--color-text-muted, #666666);
    /* Card variables - consistent default */
    --card-bg: #f8fafc;
    --card-text: var(--section-text);
    --card-text-muted: var(--section-text-muted);
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

.ecomap-theme-dark {
    --section-bg: var(--section-dark-bg);
    --section-text: #ffffff;
    --section-text-muted: rgba(255, 255, 255, 0.7);
    /* Card variables - light card bg needs dark text */
    --card-bg: #f8fafc;
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

.ecomap-theme-image {
    /* Cover blocks with background images - text on overlay */
    --section-bg: transparent;
    --section-text: #ffffff;
    --section-text-muted: rgba(255, 255, 255, 0.8);
    /* Card variables - light card bg needs dark text */
    --card-bg: #f8fafc;
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(0, 0, 0, 0.08);
    color: var(--section-text);
    position: relative;
    /* Background image properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== DARK MUTED VARIANT ===== */
.ecomap-theme-dark-muted {
    --section-bg: var(--section-dark-muted-bg);
    --section-text: #ffffff;
    --section-text-muted: rgba(255, 255, 255, 0.6);
    /* Card variables - light card bg needs dark text */
    --card-bg: #f8fafc;
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

/* ===== DARK BRAND VARIANT ===== */
.ecomap-theme-dark-brand {
    --section-bg: var(--section-dark-brand-bg);
    --section-text: #ffffff;
    --section-text-muted: rgba(255, 255, 255, 0.75);
    /* Card variables - light card bg needs dark text */
    --card-bg: #f8fafc;
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

/* ===== LIGHT MUTED VARIANT ===== */
.ecomap-theme-light-muted {
    --section-bg: var(--section-light-muted-bg);
    --section-text: var(--section-light-text);
    --section-text-muted: rgba(0, 0, 0, 0.6);
    --card-bg: #f8fafc;
    --card-text: var(--section-light-text);
    --card-text-muted: rgba(0, 0, 0, 0.6);
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

/* Dynamic overlay for background image sections
   Overlay color and opacity controlled via CSS variables for WCAG compliance
   Left/width are set by JavaScript in preview; CSS calc fallback for frontend */
.ecomap-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    background-color: var(--overlay-color, #000000);
    opacity: var(--overlay-opacity, 0.5);
    z-index: 1;
    pointer-events: none;
}

/* Content above overlay and background image elements */
/* Exclude background elements which need position: absolute and lower z-index */
.ecomap-theme-image>*:not(.ecomap-bg-overlay):not(.ecomap-bg-image):not(.wp-block-cover__image-background):not(.wp-block-cover__background),
.has-background-image>*:not(.ecomap-bg-overlay):not(.ecomap-bg-image):not(.wp-block-cover__image-background):not(.wp-block-cover__background) {
    position: relative;
    z-index: 2;
}

/* Background image sections need relative positioning for overlay
   overflow:visible allows the overlay/background to break out of constrained width */
.has-background-image {
    position: relative;
    overflow: visible;
    background-color: transparent !important;
}

/* Background image element - breaks out to full viewport width */
.ecomap-bg-image {
    position: absolute;
    top: 0;
    bottom: 0;
    /* CSS calc fallback for frontend; preview JS overrides with exact values */
    left: calc(-50vw + 50%);
    right: auto;
    width: 100vw;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

/* Override constrained layout child rules for background elements
   These need to break out to full viewport width, not be constrained to content width */
.ecomap-bg-overlay,
.ecomap-bg-image,
.is-layout-constrained > .ecomap-bg-overlay,
.is-layout-constrained > .ecomap-bg-image,
.wp-block-group.is-layout-constrained > .ecomap-bg-overlay,
.wp-block-group.is-layout-constrained > .ecomap-bg-image {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Banner image tiling - repeats image horizontally from left to right */
[data-tile-image="true"] .ecomap-bg-image {
    background-repeat: repeat-x !important;
    background-position: left center !important;
    background-size: auto 100% !important;
}

/* Full-width image sections */
.ecomap-theme-image.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Show background image for image theme */
.ecomap-theme-image .wp-block-cover__image-background {
    display: block !important;
    opacity: 1 !important;
}

/* Hide background image when toggling to light/dark themes */
.ecomap-theme-light .wp-block-cover__image-background,
.ecomap-theme-dark .wp-block-cover__image-background {
    display: none !important;
}

/* ============================================
   BACKGROUND VIDEO STYLES
   Supports MP4, WebM, GIF, YouTube, and Vimeo
   ============================================ */

/* Background video sections - establishes positioning context */
.has-background-video {
    position: relative !important;
    overflow: hidden;
    background-color: transparent !important;
}

/* Ensure wp-block-cover with video also works */
.wp-block-cover.has-background-video {
    position: relative !important;
}

/* Base video element styles - fills container and stays behind content */
.ecomap-bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    object-fit: cover;
    pointer-events: none;
}

/* GIF as video background - inherits from .ecomap-bg-video, just ensure cover */
.ecomap-bg-video-gif {
    object-fit: cover;
}

/* YouTube/Vimeo iframe video background */
.ecomap-bg-video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    /* 16:9 aspect ratio scaling to fill container */
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    border: none;
}

/* Content above video background */
.has-background-video > *:not(.ecomap-bg-video):not(.ecomap-bg-overlay):not(.wp-block-cover__background) {
    position: relative;
    z-index: 2;
}

/* WordPress cover block inner container must be above video */
.has-background-video .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Overlay for video backgrounds (reuse existing overlay system) */
.has-background-video .ecomap-bg-overlay,
.has-background-video .wp-block-cover__background {
    z-index: 1;
}

/* Hide cover image when video is active */
.has-background-video .wp-block-cover__image-background {
    display: none !important;
}

.ecomap-theme-primary {
    --section-bg: var(--color-primary);
    --section-text: var(--color-primary-contrast, #ffffff);
    --section-text-muted: rgba(255, 255, 255, 0.8);
    /* Card variables - light card bg needs dark text */
    --card-bg: #f8fafc;
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(0, 0, 0, 0.08);
    background-color: var(--section-bg);
    color: var(--section-text);
}

/* ============================================
   SECTION SUB-THEME INHERITANCE
   Make child elements respect section themes
   ============================================ */

/* All themes - text elements inherit section text color */
/* Bug #29 fix: Added .wp-block-group to ensure nested groups inherit text color */
.ecomap-theme-light h1,
.ecomap-theme-light h2,
.ecomap-theme-light h3,
.ecomap-theme-light h4,
.ecomap-theme-light h5,
.ecomap-theme-light h6,
.ecomap-theme-light p,
.ecomap-theme-light li,
.ecomap-theme-light blockquote,
.ecomap-theme-light .wp-block-group,
.ecomap-theme-dark h1,
.ecomap-theme-dark h2,
.ecomap-theme-dark h3,
.ecomap-theme-dark h4,
.ecomap-theme-dark h5,
.ecomap-theme-dark h6,
.ecomap-theme-dark p,
.ecomap-theme-dark li,
.ecomap-theme-dark blockquote,
.ecomap-theme-dark .wp-block-group,
.ecomap-theme-image h1,
.ecomap-theme-image h2,
.ecomap-theme-image h3,
.ecomap-theme-image h4,
.ecomap-theme-image h5,
.ecomap-theme-image h6,
.ecomap-theme-image p,
.ecomap-theme-image li,
.ecomap-theme-image blockquote,
.ecomap-theme-image .wp-block-group,
.ecomap-theme-primary h1,
.ecomap-theme-primary h2,
.ecomap-theme-primary h3,
.ecomap-theme-primary h4,
.ecomap-theme-primary h5,
.ecomap-theme-primary h6,
.ecomap-theme-primary p,
.ecomap-theme-primary li,
.ecomap-theme-primary blockquote,
.ecomap-theme-primary .wp-block-group {
    color: var(--section-text);
}

/* Muted text respects section theme */
.ecomap-theme-light .ecomap-text-muted,
.ecomap-theme-dark .ecomap-text-muted,
.ecomap-theme-image .ecomap-text-muted,
.ecomap-theme-primary .ecomap-text-muted {
    color: var(--section-text-muted);
}

/* Secondary text (Text 2) respects section theme - for stat labels, subtitles, etc. */
.ecomap-theme-light .ecomap-text-2,
.ecomap-theme-dark .ecomap-text-2,
.ecomap-theme-image .ecomap-text-2,
.ecomap-theme-primary .ecomap-text-2 {
    color: var(--section-text-2, var(--section-text-muted));
}

/* Secondary color on dark/image sections - use lighter variant for readability */
.ecomap-theme-dark .ecomap-text-secondary,
.ecomap-theme-image .ecomap-text-secondary,
.ecomap-theme-dark-muted .ecomap-text-secondary,
.ecomap-theme-dark-brand .ecomap-text-secondary,
.ecomap-theme-primary .ecomap-text-secondary {
    color: var(--color-secondary-light);
}

.ecomap-theme-dark .ecomap-bg-secondary,
.ecomap-theme-image .ecomap-bg-secondary,
.ecomap-theme-dark-muted .ecomap-bg-secondary,
.ecomap-theme-dark-brand .ecomap-bg-secondary {
    background-color: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}

/* Tertiary color on dark/image sections - use lighter variant for readability */
.ecomap-theme-dark .ecomap-text-tertiary,
.ecomap-theme-image .ecomap-text-tertiary,
.ecomap-theme-dark-muted .ecomap-text-tertiary,
.ecomap-theme-dark-brand .ecomap-text-tertiary,
.ecomap-theme-primary .ecomap-text-tertiary {
    color: var(--color-tertiary-light);
}

.ecomap-theme-dark .ecomap-bg-tertiary,
.ecomap-theme-image .ecomap-bg-tertiary,
.ecomap-theme-dark-muted .ecomap-bg-tertiary,
.ecomap-theme-dark-brand .ecomap-bg-tertiary {
    background-color: var(--color-tertiary-light);
    color: var(--color-tertiary-dark);
}

/* Base definitions for shorthand accent classes (aliases for text-accent-*) */
.ecomap-accent-strong {
    color: var(--color-accent-strong);
}

.ecomap-accent-medium {
    color: var(--color-accent-medium);
}

.ecomap-accent-subtle {
    color: var(--color-accent-subtle);
}

/* Semantic Text Utilities (Subset/Fallback Logic) */
.ecomap-text-accent-strong {
    color: var(--color-accent-strong);
}

.ecomap-text-accent-medium {
    color: var(--color-accent-medium);
}

.ecomap-text-accent-subtle {
    color: var(--color-accent-subtle);
}

.ecomap-bg-accent-strong {
    background-color: var(--color-accent-strong);
}

.ecomap-bg-accent-medium {
    background-color: var(--color-accent-medium);
}

.ecomap-bg-accent-medium-lighter {
    background-color: var(--color-accent-medium-lighter);
}

.ecomap-bg-accent-subtle {
    background-color: var(--color-accent-subtle);
}

.ecomap-bg-accent-subtle-lighter {
    background-color: var(--color-accent-subtle-lighter);
}

.ecomap-border-accent-strong {
    border-color: var(--color-accent-strong);
}

.ecomap-border-accent-medium {
    border-color: var(--color-accent-medium);
}

.ecomap-border-accent-subtle {
    border-color: var(--color-accent-subtle);
}

/* ============================================
   THEME-AWARE ACCENT BACKGROUNDS
   Dynamic tints/shades using color-mix() in oklch

   Uses BOTH same-element (.theme.bg) AND descendant (.theme .bg) selectors
   because patterns vary: some have both classes on same element,
   others have theme on parent with accent on child.
   ============================================ */

/* Light theme - subtle desaturated tints (8% accent, 92% white) */
.ecomap-theme-light.ecomap-bg-accent-medium-lighter,
.ecomap-theme-light .ecomap-bg-accent-medium-lighter {
    background-color: #f0f9ff; /* Fallback: light blue tint */
    background-color: color-mix(in oklch, var(--color-accent-medium, #3b82f6) 8%, white);
}

.ecomap-theme-light.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-light .ecomap-bg-accent-subtle-lighter {
    background-color: #f5f5f4; /* Fallback: light stone tint */
    background-color: color-mix(in oklch, var(--color-accent-subtle, #78716c) 8%, white);
}

/* Dark themes - rich desaturated shades (15% accent, 85% black) */
.ecomap-theme-dark.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark .ecomap-bg-accent-medium-lighter,
.ecomap-theme-image.ecomap-bg-accent-medium-lighter,
.ecomap-theme-image .ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-muted.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-muted .ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-brand.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-brand .ecomap-bg-accent-medium-lighter {
    background-color: #0f172a; /* Fallback: dark slate */
    background-color: color-mix(in oklch, var(--color-accent-medium, #3b82f6) 15%, black);
}

.ecomap-theme-dark.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-image.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-image .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-muted.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-muted .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-brand.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-brand .ecomap-bg-accent-subtle-lighter {
    background-color: #1c1917; /* Fallback: dark stone */
    background-color: color-mix(in oklch, var(--color-accent-subtle, #78716c) 15%, black);
}

/* Primary theme - subtle white overlay */
.ecomap-theme-primary.ecomap-bg-accent-medium-lighter,
.ecomap-theme-primary .ecomap-bg-accent-medium-lighter,
.ecomap-theme-primary.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-primary .ecomap-bg-accent-subtle-lighter {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Primary theme - full accent backgrounds (stronger white overlay) */
.ecomap-theme-primary.ecomap-bg-accent-medium,
.ecomap-theme-primary .ecomap-bg-accent-medium,
.ecomap-theme-primary.ecomap-bg-accent-subtle,
.ecomap-theme-primary .ecomap-bg-accent-subtle {
    background-color: rgba(255, 255, 255, 0.18);
}

/* Full accent backgrounds - stronger presence (15% color for light, 25% for dark) */
.ecomap-theme-light.ecomap-bg-accent-medium,
.ecomap-theme-light .ecomap-bg-accent-medium {
    background-color: color-mix(in oklch, var(--color-accent-medium) 15%, white);
}

.ecomap-theme-light.ecomap-bg-accent-subtle,
.ecomap-theme-light .ecomap-bg-accent-subtle {
    background-color: color-mix(in oklch, var(--color-accent-subtle) 15%, white);
}

.ecomap-theme-dark.ecomap-bg-accent-medium,
.ecomap-theme-dark .ecomap-bg-accent-medium,
.ecomap-theme-image.ecomap-bg-accent-medium,
.ecomap-theme-image .ecomap-bg-accent-medium,
.ecomap-theme-dark-muted.ecomap-bg-accent-medium,
.ecomap-theme-dark-muted .ecomap-bg-accent-medium,
.ecomap-theme-dark-brand.ecomap-bg-accent-medium,
.ecomap-theme-dark-brand .ecomap-bg-accent-medium {
    background-color: color-mix(in oklch, var(--color-accent-medium) 25%, black);
}

.ecomap-theme-dark.ecomap-bg-accent-subtle,
.ecomap-theme-dark .ecomap-bg-accent-subtle,
.ecomap-theme-image.ecomap-bg-accent-subtle,
.ecomap-theme-image .ecomap-bg-accent-subtle,
.ecomap-theme-dark-muted.ecomap-bg-accent-subtle,
.ecomap-theme-dark-muted .ecomap-bg-accent-subtle,
.ecomap-theme-dark-brand.ecomap-bg-accent-subtle,
.ecomap-theme-dark-brand .ecomap-bg-accent-subtle {
    background-color: color-mix(in oklch, var(--color-accent-subtle) 25%, black);
}

/* Theme-aware accent-strong backgrounds - light themes (20% color tint) */
.ecomap-theme-light.ecomap-bg-accent-strong,
.ecomap-theme-light .ecomap-bg-accent-strong,
.ecomap-theme-light-muted.ecomap-bg-accent-strong,
.ecomap-theme-light-muted .ecomap-bg-accent-strong {
    background-color: color-mix(in oklch, var(--color-accent-strong) 20%, white);
}

/* Theme-aware accent-strong backgrounds - dark themes (30% color shade) */
.ecomap-theme-dark.ecomap-bg-accent-strong,
.ecomap-theme-dark .ecomap-bg-accent-strong,
.ecomap-theme-image.ecomap-bg-accent-strong,
.ecomap-theme-image .ecomap-bg-accent-strong,
.ecomap-theme-dark-muted.ecomap-bg-accent-strong,
.ecomap-theme-dark-muted .ecomap-bg-accent-strong,
.ecomap-theme-dark-brand.ecomap-bg-accent-strong,
.ecomap-theme-dark-brand .ecomap-bg-accent-strong {
    background-color: color-mix(in oklch, var(--color-accent-strong) 30%, black);
}

/* Theme-aware accent-strong backgrounds - primary theme (white overlay) */
.ecomap-theme-primary.ecomap-bg-accent-strong,
.ecomap-theme-primary .ecomap-bg-accent-strong {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Border accent overrides for dark themes - use lighter variants for visibility */
.ecomap-theme-dark.ecomap-border-accent-medium,
.ecomap-theme-dark .ecomap-border-accent-medium,
.ecomap-theme-image.ecomap-border-accent-medium,
.ecomap-theme-image .ecomap-border-accent-medium,
.ecomap-theme-dark-muted.ecomap-border-accent-medium,
.ecomap-theme-dark-muted .ecomap-border-accent-medium,
.ecomap-theme-dark-brand.ecomap-border-accent-medium,
.ecomap-theme-dark-brand .ecomap-border-accent-medium {
    border-color: var(--color-accent-medium-light);
}

.ecomap-theme-dark.ecomap-border-accent-subtle,
.ecomap-theme-dark .ecomap-border-accent-subtle,
.ecomap-theme-image.ecomap-border-accent-subtle,
.ecomap-theme-image .ecomap-border-accent-subtle,
.ecomap-theme-dark-muted.ecomap-border-accent-subtle,
.ecomap-theme-dark-muted .ecomap-border-accent-subtle,
.ecomap-theme-dark-brand.ecomap-border-accent-subtle,
.ecomap-theme-dark-brand .ecomap-border-accent-subtle {
    border-color: var(--color-accent-subtle-light);
}

/* Text contrast on accent backgrounds - light themes use standard text */
.ecomap-theme-light.ecomap-bg-accent-medium-lighter,
.ecomap-theme-light .ecomap-bg-accent-medium-lighter,
.ecomap-theme-light.ecomap-bg-accent-medium,
.ecomap-theme-light .ecomap-bg-accent-medium,
.ecomap-theme-light.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-light .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-light.ecomap-bg-accent-subtle,
.ecomap-theme-light .ecomap-bg-accent-subtle {
    color: var(--color-text);
}

/* Text contrast on accent backgrounds - dark themes use light text */
.ecomap-theme-dark.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark .ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark.ecomap-bg-accent-medium,
.ecomap-theme-dark .ecomap-bg-accent-medium,
.ecomap-theme-image.ecomap-bg-accent-medium-lighter,
.ecomap-theme-image .ecomap-bg-accent-medium-lighter,
.ecomap-theme-image.ecomap-bg-accent-medium,
.ecomap-theme-image .ecomap-bg-accent-medium,
.ecomap-theme-dark-muted.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-muted .ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-muted.ecomap-bg-accent-medium,
.ecomap-theme-dark-muted .ecomap-bg-accent-medium,
.ecomap-theme-dark-brand.ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-brand .ecomap-bg-accent-medium-lighter,
.ecomap-theme-dark-brand.ecomap-bg-accent-medium,
.ecomap-theme-dark-brand .ecomap-bg-accent-medium {
    color: var(--section-dark-text, #fff);
}

.ecomap-theme-dark.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark.ecomap-bg-accent-subtle,
.ecomap-theme-dark .ecomap-bg-accent-subtle,
.ecomap-theme-image.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-image .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-image.ecomap-bg-accent-subtle,
.ecomap-theme-image .ecomap-bg-accent-subtle,
.ecomap-theme-dark-muted.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-muted .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-muted.ecomap-bg-accent-subtle,
.ecomap-theme-dark-muted .ecomap-bg-accent-subtle,
.ecomap-theme-dark-brand.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-brand .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-dark-brand.ecomap-bg-accent-subtle,
.ecomap-theme-dark-brand .ecomap-bg-accent-subtle {
    color: var(--section-dark-text, #fff);
}

/* Text contrast on primary theme accent backgrounds */
.ecomap-theme-primary.ecomap-bg-accent-medium-lighter,
.ecomap-theme-primary .ecomap-bg-accent-medium-lighter,
.ecomap-theme-primary.ecomap-bg-accent-medium,
.ecomap-theme-primary .ecomap-bg-accent-medium,
.ecomap-theme-primary.ecomap-bg-accent-subtle-lighter,
.ecomap-theme-primary .ecomap-bg-accent-subtle-lighter,
.ecomap-theme-primary.ecomap-bg-accent-subtle,
.ecomap-theme-primary .ecomap-bg-accent-subtle {
    color: var(--section-text, #fff);
}

/* Text contrast on accent-strong backgrounds - light themes use dark text */
.ecomap-theme-light.ecomap-bg-accent-strong,
.ecomap-theme-light .ecomap-bg-accent-strong,
.ecomap-theme-light-muted.ecomap-bg-accent-strong,
.ecomap-theme-light-muted .ecomap-bg-accent-strong {
    color: var(--color-text);
}

/* Text contrast on accent-strong backgrounds - dark themes use light text */
.ecomap-theme-dark.ecomap-bg-accent-strong,
.ecomap-theme-dark .ecomap-bg-accent-strong,
.ecomap-theme-image.ecomap-bg-accent-strong,
.ecomap-theme-image .ecomap-bg-accent-strong,
.ecomap-theme-dark-muted.ecomap-bg-accent-strong,
.ecomap-theme-dark-muted .ecomap-bg-accent-strong,
.ecomap-theme-dark-brand.ecomap-bg-accent-strong,
.ecomap-theme-dark-brand .ecomap-bg-accent-strong,
.ecomap-theme-primary.ecomap-bg-accent-strong,
.ecomap-theme-primary .ecomap-bg-accent-strong {
    color: var(--section-dark-text, #fff);
}

/* Links in dark/image/primary sections - white text, brand hover */
.ecomap-theme-dark a:not(.wp-block-button__link),
.ecomap-theme-image a:not(.wp-block-button__link),
.ecomap-theme-primary a:not(.wp-block-button__link) {
    color: var(--section-text);
}

.ecomap-theme-dark a:not(.wp-block-button__link):hover,
.ecomap-theme-image a:not(.wp-block-button__link):hover,
.ecomap-theme-primary a:not(.wp-block-button__link):hover {
    color: var(--color-primary-light, #99d6ff);
}

/* Cards with own backgrounds keep their own colors */
.ecomap-theme-dark .wp-block-group.has-background h1,
.ecomap-theme-dark .wp-block-group.has-background h2,
.ecomap-theme-dark .wp-block-group.has-background h3,
.ecomap-theme-dark .wp-block-group.has-background p,
.ecomap-theme-image .wp-block-group.has-background h1,
.ecomap-theme-image .wp-block-group.has-background h2,
.ecomap-theme-image .wp-block-group.has-background h3,
.ecomap-theme-image .wp-block-group.has-background p,
.ecomap-theme-primary .wp-block-group.has-background h1,
.ecomap-theme-primary .wp-block-group.has-background h2,
.ecomap-theme-primary .wp-block-group.has-background h3,
.ecomap-theme-primary .wp-block-group.has-background p {
    color: inherit;
}

/* Cards with white/light backgrounds use --card-text for proper override support */
.ecomap-card.has-white-background-color,
.ecomap-card.has-white-background-color h1,
.ecomap-card.has-white-background-color h2,
.ecomap-card.has-white-background-color h3,
.ecomap-card.has-white-background-color h4,
.ecomap-card.has-white-background-color h5,
.ecomap-card.has-white-background-color h6,
.ecomap-card.has-white-background-color p,
.ecomap-gateway-card-inner.has-white-background-color,
.ecomap-gateway-card-inner.has-white-background-color h1,
.ecomap-gateway-card-inner.has-white-background-color h2,
.ecomap-gateway-card-inner.has-white-background-color h3,
.ecomap-gateway-card-inner.has-white-background-color h4,
.ecomap-gateway-card-inner.has-white-background-color h5,
.ecomap-gateway-card-inner.has-white-background-color h6,
.ecomap-gateway-card-inner.has-white-background-color p {
    color: var(--card-text);
}

/* ============================================
   CARD COMPONENT
   Inherits from section theme with subtle contrast
   ============================================ */

.ecomap-card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md, 1.5rem);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden; /* Clip content (especially images) to card's rounded corners */
}

/* Cards with images at top - remove image margins and let card handle border radius */
.ecomap-card > .wp-block-image:first-child,
.ecomap-card > figure.wp-block-image:first-child {
    margin: 0 !important;
    border-radius: 0 !important;
}

.ecomap-card > .wp-block-image:first-child img,
.ecomap-card > figure.wp-block-image:first-child img {
    border-radius: 0 !important;
    display: block;
    width: 100%;
}

/* Card hover effect - uses CSS variables for customization */
.ecomap-card {
    transition: transform var(--hover-transition, 200ms ease),
                box-shadow var(--hover-transition, 200ms ease);
}

/* Individual card text color overrides - applied when card has inline --card-text */
.ecomap-card[style*="--card-text"] h1,
.ecomap-card[style*="--card-text"] h2,
.ecomap-card[style*="--card-text"] h3,
.ecomap-card[style*="--card-text"] h4,
.ecomap-card[style*="--card-text"] h5,
.ecomap-card[style*="--card-text"] h6,
.ecomap-card[style*="--card-text"] p,
.wp-block-column[style*="--card-text"] h1,
.wp-block-column[style*="--card-text"] h2,
.wp-block-column[style*="--card-text"] h3,
.wp-block-column[style*="--card-text"] h4,
.wp-block-column[style*="--card-text"] h5,
.wp-block-column[style*="--card-text"] h6,
.wp-block-column[style*="--card-text"] p {
    color: var(--card-text);
}

/* Muted text inside individually-colored cards */
.ecomap-card[style*="--card-text-muted"] .ecomap-card-subtitle,
.wp-block-column[style*="--card-text-muted"] .ecomap-card-subtitle {
    color: var(--card-text-muted);
}

/* Button colors inside individually-colored cards */
.ecomap-card-dark .wp-block-button.is-style-link .wp-block-button__link {
    color: #ffffff;
}

.ecomap-card-light .wp-block-button.is-style-link .wp-block-button__link {
    color: var(--color-primary);
}

.ecomap-card:hover {
    transform: var(--card-hover-transform, none);
    box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* Card text elements inherit card color */
.ecomap-card h1,
.ecomap-card h2,
.ecomap-card h3,
.ecomap-card h4,
.ecomap-card h5,
.ecomap-card h6,
.ecomap-card p,
.ecomap-card li,
/* Gateway cards (hero-hub-gateway pattern) */
.ecomap-gateway-card-inner h1,
.ecomap-gateway-card-inner h2,
.ecomap-gateway-card-inner h3,
.ecomap-gateway-card-inner h4,
.ecomap-gateway-card-inner h5,
.ecomap-gateway-card-inner h6,
.ecomap-gateway-card-inner p,
.ecomap-gateway-card-inner li {
    color: var(--card-text);
}

/* Icons inside cards - use icon override color, not card text color */
/* Higher specificity needed to override .ecomap-card p inheritance */
.ecomap-card .ecomap-accent-medium,
.ecomap-card .ecomap-icon.ecomap-accent-medium {
    color: var(--color-accent-medium) !important;
}

/* Muted text in cards - use card-text at reduced opacity */
.ecomap-card .ecomap-text-muted,
.ecomap-card [class*="has-gray-"][class*="-color"] {
    color: var(--card-text) !important;
    opacity: 0.7;
}

/* Secondary text (Text 2) in cards - use card-text-2 if available, fallback to card-text with opacity */
.ecomap-card .ecomap-text-2 {
    color: var(--card-text-2, var(--card-text, inherit)) !important;
}

/* Dark/Image section card hover - lighter shadow */
.ecomap-theme-dark .ecomap-card:hover,
.ecomap-theme-image .ecomap-card:hover,
.ecomap-theme-primary .ecomap-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Card buttons use card-specific variables with smart defaults for light cards */
/* Default: assume light card background, so use dark button colors */
/* Note: --override-card-primary is set by sendStyleOverrides() on the section,
   allowing button color overrides to propagate to cards */
.ecomap-card,
.wp-block-column.ecomap-repeatable-item,
.ecomap-gateway-card {
    --card-primary: var(--override-card-primary, var(--wp--preset--color--primary, #0073aa));
    --card-primary-hover: var(--override-card-primary-hover, color-mix(in srgb, var(--card-primary) 85%, black));
    --card-primary-contrast: var(--override-card-primary-contrast, #ffffff);
}

/* Primary filled buttons inside cards - must override WordPress inline styles */
.ecomap-card .wp-block-button__link,
.ecomap-card .wp-block-button__link.has-background,
.ecomap-card .wp-block-button__link.ecomap-bg-primary,
.ecomap-card .wp-block-button__link.ecomap-bg-primary.has-background {
    background-color: var(--card-primary) !important;
    color: var(--card-primary-contrast) !important;
    border-color: var(--card-primary) !important;
}

.ecomap-card .wp-block-button__link:hover {
    background-color: var(--card-primary-hover) !important;
}

/* Card outline/secondary buttons */
.ecomap-card .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-card .wp-block-button.is-style-secondary .wp-block-button__link {
    background-color: transparent !important;
    border-color: var(--card-primary) !important;
    color: var(--card-primary) !important;
}

.ecomap-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ecomap-card .wp-block-button.is-style-secondary .wp-block-button__link:hover {
    background-color: var(--card-primary) !important;
    color: var(--card-primary-contrast) !important;
}

/* Card link/tertiary buttons - text-only with underline, no fill */
.ecomap-card .wp-block-button.is-style-tertiary .wp-block-button__link,
.ecomap-card .wp-block-button.is-style-link .wp-block-button__link {
    background-color: transparent !important;
    color: var(--card-primary) !important;
    text-decoration: underline;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ecomap-card .wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.ecomap-card .wp-block-button.is-style-link .wp-block-button__link:hover {
    color: var(--card-primary-hover) !important;
}

/* ============================================
   CTA CONTENT BLOCK
   The colored square in split CTA patterns.
   Uses its own background (--cta-bg) separate from cards.
   Defaults to primary brand color.
   ============================================ */

/* CTA content block background - uses dedicated variable, defaults to primary */
.ecomap-cta-content {
    background-color: var(--cta-bg, var(--wp--preset--color--primary, #0073aa)) !important;
}

/* CTA text uses computed contrast color */
.ecomap-cta-content,
.ecomap-cta-content h1,
.ecomap-cta-content h2,
.ecomap-cta-content h3,
.ecomap-cta-content p {
    color: var(--cta-text, #ffffff);
}

/* Override text colors within primary/accent background elements
   so .ecomap-text-contrast elements use contrasting text color instead of
   the section-level text color. This ensures text stays readable on
   dark card backgrounds even when the parent section is light.
   (e.g., Card Keyword Square pattern: light section with blue cards) */
.ecomap-bg-primary,
.ecomap-bg-secondary,
.ecomap-bg-tertiary,
.has-primary-background-color,
.has-secondary-background-color,
.has-tertiary-background-color {
    --color-contrast: var(--color-primary-contrast, #ffffff);
    --section-text: var(--color-primary-contrast, #ffffff);
}

/* Override text colors within CTA content so .ecomap-text-contrast elements
   use the CTA-computed text color instead of the section-level text color.
   This ensures text stays white on dark CTA backgrounds even when the parent
   section has a light background (e.g., CTA Split pattern).
   MUST come AFTER .has-primary-background-color rule - both have same specificity,
   so CSS order determines winner. CTA uses computed --cta-text based on CTA background
   luminance, not the general primary-contrast color. */
.ecomap-cta-content {
    --color-contrast: var(--cta-text, #ffffff);
    --section-text: var(--cta-text, #ffffff);
}

/* Override text colors within cards to use card-appropriate text color.
   This prevents section-level text color from cascading into cards.
   Cards compute their own --card-text based on card background, so use that. */
.ecomap-card {
    --color-contrast: var(--card-text, var(--color-text, #1e293b));
    --section-text: var(--card-text, var(--color-text, #1e293b));
}

/* Within colored card backgrounds (badges, etc.), use the contrast color for that bg.
   Higher specificity than the .ecomap-card rule above. */
.ecomap-card .ecomap-bg-primary,
.ecomap-card .ecomap-bg-secondary,
.ecomap-card .ecomap-bg-tertiary,
.ecomap-card .has-primary-background-color,
.ecomap-card .has-secondary-background-color,
.ecomap-card .has-tertiary-background-color {
    --color-contrast: var(--color-primary-contrast, #ffffff);
    --section-text: var(--color-primary-contrast, #ffffff);
}

/* CTA filled buttons - white on dark CTA background by default */
.ecomap-cta-content .wp-block-button__link {
    background-color: var(--cta-button-bg, #ffffff) !important;
    color: var(--cta-button-text, var(--wp--preset--color--primary, #0073aa)) !important;
    border-color: var(--cta-button-bg, #ffffff) !important;
}

/* CTA buttons with ecomap-bg-contrast need higher specificity to override
   the general .ecomap-section button rule at line ~4258 (specificity 0-4-0).
   This rule is 0-5-0 specificity to ensure CTA styling takes precedence. */
.ecomap-section .ecomap-cta-content .wp-block-button__link.ecomap-bg-contrast.ecomap-text-primary,
.ecomap-section .ecomap-cta-content .wp-block-button__link.ecomap-bg-contrast.has-text-color {
    color: var(--cta-button-text, var(--wp--preset--color--primary, #0073aa)) !important;
}

.ecomap-cta-content .wp-block-button__link:hover {
    background-color: color-mix(in srgb, var(--cta-button-bg, #ffffff) 90%, black) !important;
}

/* CTA outline buttons - white border/text on dark CTA background */
.ecomap-cta-content .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border-color: var(--cta-text, #ffffff) !important;
    color: var(--cta-text, #ffffff) !important;
}

.ecomap-cta-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--cta-text, #ffffff) !important;
    color: var(--cta-bg, var(--wp--preset--color--primary, #0073aa)) !important;
}

/* CTA link/tertiary buttons */
.ecomap-cta-content .wp-block-button.is-style-tertiary .wp-block-button__link {
    background-color: transparent !important;
    color: var(--cta-text, #ffffff) !important;
    text-decoration: underline;
}

.ecomap-cta-content .wp-block-button.is-style-tertiary .wp-block-button__link:hover {
    opacity: 0.8;
}

/* ============================================
   STATS TEXT COLOR
   Big stat numbers (500+, $150M+, etc.) use dedicated color variable.
   Defaults to primary on light backgrounds, white on dark backgrounds.
   User can override via "Stats Text" picker in Text overrides.
   ============================================ */

/* Stats on cards use --stats-text-color variable */
.ecomap-card .has-primary-color,
.ecomap-card .ecomap-text-primary,
.ecomap-card [data-counter],
.ecomap-card [data-count-target],
.ecomap-card .ecomap-stat-number,
.ecomap-card .ecomap-stat-counter,
.ecomap-card .ecomap-accent-strong {
    color: var(--stats-text-color, var(--color-primary)) !important;
}

/* Timeline Year: uses its own variable, not stats-text-color */
/* Must come AFTER .ecomap-card .has-primary-color for specificity */
.ecomap-section.ecomap-pattern-stats-timeline .ecomap-card .ecomap-timeline-year.has-primary-color {
    color: var(--timeline-year-color, var(--color-primary)) !important;
}

/* Stats on sections (not in cards) also use --stats-text-color */
.ecomap-section > .wp-block-cover__inner-container .has-primary-color,
.ecomap-section > .wp-block-cover__inner-container .ecomap-text-primary,
.ecomap-section > .wp-block-cover__inner-container [data-counter],
.ecomap-section > .wp-block-cover__inner-container [data-count-target],
.ecomap-section > .wp-block-cover__inner-container .ecomap-stat-number,
.ecomap-section > .wp-block-cover__inner-container .ecomap-stat-counter,
.ecomap-section > .wp-block-group > .has-primary-color,
.ecomap-section > .wp-block-group > .ecomap-text-primary,
.ecomap-section > .wp-block-group > [data-counter],
.ecomap-section > .wp-block-group > [data-count-target],
.ecomap-section > .wp-block-group > .ecomap-stat-number,
.ecomap-section > .wp-block-group > .ecomap-stat-counter {
    color: var(--stats-text-color, var(--color-primary)) !important;
}

/* Stats in columns (Stats Row, Stats Inline, Stats Counters patterns) */
/* Handle both: .ecomap-section > .wp-block-group (nested) and .ecomap-section.wp-block-group (same element) */
.ecomap-section > .wp-block-group .wp-block-columns .has-primary-color,
.ecomap-section > .wp-block-group .wp-block-columns .ecomap-text-primary,
.ecomap-section > .wp-block-group .wp-block-columns [data-counter],
.ecomap-section > .wp-block-group .wp-block-columns [data-count-target],
.ecomap-section > .wp-block-group .wp-block-columns .ecomap-stat-number,
.ecomap-section > .wp-block-group .wp-block-columns .ecomap-stat-counter,
.ecomap-section.wp-block-group .wp-block-columns .has-primary-color,
.ecomap-section.wp-block-group .wp-block-columns .ecomap-text-primary,
.ecomap-section.wp-block-group .wp-block-columns [data-counter],
.ecomap-section.wp-block-group .wp-block-columns [data-count-target],
.ecomap-section.wp-block-group .wp-block-columns .ecomap-stat-number,
.ecomap-section.wp-block-group .wp-block-columns .ecomap-stat-counter {
    color: var(--stats-text-color, var(--color-primary)) !important;
}

/* Exception: Buttons with contrast background use adaptive text color */
/* --color-base is the inverse of --color-contrast:
   - Light section (dark button bg) → white text
   - Dark section (white button bg) → primary blue text */
.ecomap-section .wp-block-button__link.ecomap-bg-contrast.ecomap-text-primary,
.ecomap-section .wp-block-button__link.ecomap-bg-contrast.has-text-color {
    color: var(--color-base, var(--wp--preset--color--primary, #0073aa)) !important;
}

/* ============================================
   CARD THEME ENFORCEMENT
   When cards are inside themed sections, the theme's --card-bg
   takes precedence over utility background classes.
   Specificity: 0-2-0 beats 0-1-0 of utility classes
   ============================================ */

/* Dark theme cards - enforce semi-transparent surface */
.ecomap-theme-dark .ecomap-card,
.ecomap-theme-dark-muted .ecomap-card,
.ecomap-theme-dark-brand .ecomap-card {
    background-color: var(--card-bg);
}

/* Image theme cards - enforce semi-transparent glass surface */
.ecomap-theme-image .ecomap-card {
    background-color: var(--card-bg);
}

/* Primary theme cards - enforce semi-transparent brand surface */
.ecomap-theme-primary .ecomap-card {
    background-color: var(--card-bg);
}

/* ============================================
   WORDPRESS BACKGROUND CLASS NEUTRALIZATION
   Uses !important to override WordPress has-*-background-color classes
   which also use !important (e.g., has-white-background-color)
   ============================================ */

.ecomap-theme-dark .ecomap-card.has-background,
.ecomap-theme-dark-muted .ecomap-card.has-background,
.ecomap-theme-dark-brand .ecomap-card.has-background,
.ecomap-theme-image .ecomap-card.has-background,
.ecomap-theme-primary .ecomap-card.has-background {
    background-color: var(--card-bg) !important;
}

/* ============================================
   UTILITY CLASS OVERRIDE FOR THEMED CARDS
   ============================================ */

/* ecomap-bg-contrast on cards in non-light themes */
.ecomap-theme-dark .ecomap-card.ecomap-bg-contrast,
.ecomap-theme-dark-muted .ecomap-card.ecomap-bg-contrast,
.ecomap-theme-dark-brand .ecomap-card.ecomap-bg-contrast,
.ecomap-theme-image .ecomap-card.ecomap-bg-contrast,
.ecomap-theme-primary .ecomap-card.ecomap-bg-contrast {
    background-color: var(--card-bg) !important;
}

/* ecomap-bg-base on cards in non-light themes */
.ecomap-theme-dark .ecomap-card.ecomap-bg-base,
.ecomap-theme-dark-muted .ecomap-card.ecomap-bg-base,
.ecomap-theme-dark-brand .ecomap-card.ecomap-bg-base,
.ecomap-theme-image .ecomap-card.ecomap-bg-base,
.ecomap-theme-primary .ecomap-card.ecomap-bg-base {
    background-color: var(--card-bg) !important;
}

/* ecomap-bg-surface on cards in non-light themes */
.ecomap-theme-dark .ecomap-card.ecomap-bg-surface,
.ecomap-theme-dark-muted .ecomap-card.ecomap-bg-surface,
.ecomap-theme-dark-brand .ecomap-card.ecomap-bg-surface,
.ecomap-theme-image .ecomap-card.ecomap-bg-surface,
.ecomap-theme-primary .ecomap-card.ecomap-bg-surface {
    background-color: var(--card-bg) !important;
}

/* ============================================
   CHIP THEME SUPPORT
   Chips should also respect theme context
   ============================================ */

.ecomap-chip {
    background-color: var(--chip-bg, var(--card-bg, #f8fafc));
    color: var(--chip-text, var(--card-text, inherit));
    border: 1px solid var(--chip-border, var(--card-border, rgba(0, 0, 0, 0.08)));
}

/* Ensure chip paragraph text uses chip color, not inherited section text */
.ecomap-chip p {
    color: var(--chip-text, var(--card-text, inherit));
}

/* ============================================
   ICON SYSTEM
   Icons use brand color with section-aware variants
   ============================================ */

/* Default icon color - uses accent cascade for secondary/tertiary support */
.ecomap-icon {
    color: var(--color-accent-medium);
    transition: color 0.2s ease;
}

/* Icons on primary background - ensure white regardless of section theme */
.ecomap-bg-primary .ecomap-icon,
.has-primary-background-color .ecomap-icon {
    color: white;
}

/* Icon in colored circle - accent background with contrast icon */
.ecomap-icon-circle {
    background-color: var(--color-accent-medium);
    color: var(--color-accent-medium-contrast, #ffffff);
    border-radius: 50%;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* Large icon circle variant */
.ecomap-icon-circle-lg {
    background-color: var(--color-accent-medium);
    color: var(--color-accent-medium-contrast, #ffffff);
    border-radius: 50%;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* Secondary icon circle */
.ecomap-icon-circle-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast);
    border-radius: 50%;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* Tertiary icon circle */
.ecomap-icon-circle-tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-tertiary-contrast);
    border-radius: 50%;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* Custom SVG icons - inherit color like Font Awesome */
.ecomap-custom-icon-svg,
[class*="ecomap-custom-icon-"] svg {
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Custom icon span container - inline-flex for vertical centering */
[class*="ecomap-custom-icon-"].ecomap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Custom icons in icon circles */
.ecomap-icon-circle [class*="ecomap-custom-icon-"] svg {
    width: 24px;
    height: 24px;
}

/* Custom icons with accent classes */
[class*="ecomap-custom-icon-"].ecomap-accent-medium {
    color: var(--color-accent-medium);
}

[class*="ecomap-custom-icon-"].ecomap-accent-strong {
    color: var(--color-accent-strong);
}

[class*="ecomap-custom-icon-"].ecomap-accent-subtle {
    color: var(--color-accent-subtle);
}

/* Make icon clickable in editor */
[data-icon-editable] {
    cursor: pointer;
    position: relative;
}

[data-icon-editable]:hover::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px dashed var(--color-accent-medium);
    border-radius: 4px;
    pointer-events: none;
}

/* ============================================
   PARTNER LOGO GRID
   Fixed column layouts: logos fill their cell,
   full image always visible (height adapts to aspect ratio).
   Logo Grid: 4 per row | Premier: 3 per row | Supporting: 4 per row
   ============================================ */

.ecomap-logo-grid {
    gap: var(--spacing-4);
}

.ecomap-logo-grid-premier {
    gap: var(--spacing-6);
}

.ecomap-logo-grid-supporting {
    gap: var(--spacing-4);
}

/* Row height equalization — all items in a row match the tallest.
   WP is-layout-flex defaults to align-items: center; override to stretch. */
.ecomap-logo-grid.is-layout-flex,
.ecomap-logo-grid-premier.is-layout-flex,
.ecomap-logo-grid-supporting.is-layout-flex {
    align-items: stretch !important;
}

.ecomap-logo-item,
.ecomap-logo-wrapper {
    transition: transform 0.2s ease, filter 0.3s ease;
}

/* ── Column sizing ── */
/* Override generic .ecomap-repeatable-item { max-width:100%; overflow:hidden } */
/* Logo Grid: 4 per row (gap = --spacing-4) */
.ecomap-logo-grid .ecomap-logo-item {
    flex: 0 0 calc(25% - var(--spacing-4) * 0.75) !important;
    min-width: 120px;
    overflow: visible !important;
    max-width: none !important;
}

/* Premier: 3 per row (gap = --spacing-6) */
.ecomap-logo-grid-premier .ecomap-logo-premier {
    flex: 0 0 calc(33.333% - var(--spacing-6) * 2 / 3) !important;
    min-width: 160px;
    overflow: visible !important;
    max-width: none !important;
}

/* Supporting: 4 per row (gap = --spacing-4) */
.ecomap-logo-grid-supporting .ecomap-logo-wrapper {
    flex: 0 0 calc(25% - var(--spacing-4) * 0.75) !important;
    min-width: 100px;
    overflow: visible !important;
    max-width: none !important;
}

/* ── Figure: fills cell, centers content ── */
/* Override generic .ecomap-section .wp-block-image { max-width:100%; overflow:hidden } */
.ecomap-logo-item .ecomap-partner-logo,
.ecomap-logo-wrapper .ecomap-partner-logo,
.ecomap-logo-premier .ecomap-partner-logo {
    width: 100%;
    height: auto;
    overflow: visible !important;
    max-width: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Image: fills figure, height auto for full visibility ── */
.ecomap-partner-logo img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none;
    object-fit: contain;
    transition: filter 0.3s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Placeholder fills figure the same way */
.ecomap-partner-logo .ecomap-missing-image-placeholder {
    width: 100% !important;
    height: auto !important;
    min-height: 50px;
    aspect-ratio: 3 / 1;
}

.ecomap-partner-logo:hover img {
    transform: scale(1.05);
}

/* Grayscale effect - controllable via data attribute */
[data-grayscale-effect="true"] .ecomap-logo-item img,
[data-grayscale-effect="true"] .ecomap-partner-logo img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

[data-grayscale-effect="true"] .ecomap-logo-item:hover img,
[data-grayscale-effect="true"] .ecomap-partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

[data-grayscale-effect="false"] .ecomap-logo-item img,
[data-grayscale-effect="false"] .ecomap-partner-logo img {
    filter: none;
    opacity: 1;
}

/* Dark theme grayscale effect - brighter opacity for visibility */
.ecomap-theme-dark [data-grayscale-effect="true"] .ecomap-logo-item img,
.ecomap-theme-dark [data-grayscale-effect="true"] .ecomap-partner-logo img {
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.5;
}

.ecomap-theme-dark [data-grayscale-effect="true"] .ecomap-logo-item:hover img,
.ecomap-theme-dark [data-grayscale-effect="true"] .ecomap-partner-logo:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* Supporting Partners visibility via data attribute */
[data-show-supporting-partners="false"] .ecomap-partners-supporting-section {
    display: none !important;
}

/* Partner logo hover background - shown when logo links are enabled */
/* Uses --partner-logo-hover-bg CSS variable set via hover effects accordion */
[data-card-link-enabled="true"] .ecomap-logo-item,
[data-card-link-enabled="true"] .ecomap-logo-wrapper,
[data-card-link-enabled="true"] .ecomap-logo-premier {
    border-radius: var(--radius-md, 8px);
    transition: transform 0.2s ease, filter 0.3s ease, background-color var(--hover-transition, 150ms ease);
}

[data-card-link-enabled="true"] .ecomap-logo-item:hover,
[data-card-link-enabled="true"] .ecomap-logo-wrapper:hover,
[data-card-link-enabled="true"] .ecomap-logo-premier:hover {
    background-color: var(--partner-logo-hover-bg, transparent);
}

/* Corner radius variants for partner logo hover background */
/* Pill style (rounded corners) */
.corners-pill [data-card-link-enabled="true"] .ecomap-logo-item,
.corners-pill [data-card-link-enabled="true"] .ecomap-logo-wrapper,
.corners-pill [data-card-link-enabled="true"] .ecomap-logo-premier,
[data-corners="pill"] .ecomap-logo-item,
[data-corners="pill"] .ecomap-logo-wrapper,
[data-corners="pill"] .ecomap-logo-premier {
    border-radius: 9999px;
}

/* Soft style (medium rounded corners) */
.corners-soft [data-card-link-enabled="true"] .ecomap-logo-item,
.corners-soft [data-card-link-enabled="true"] .ecomap-logo-wrapper,
.corners-soft [data-card-link-enabled="true"] .ecomap-logo-premier,
[data-corners="soft"] .ecomap-logo-item,
[data-corners="soft"] .ecomap-logo-wrapper,
[data-corners="soft"] .ecomap-logo-premier {
    border-radius: var(--radius-md, 8px);
}

/* Sharp style (no rounded corners) */
.corners-sharp [data-card-link-enabled="true"] .ecomap-logo-item,
.corners-sharp [data-card-link-enabled="true"] .ecomap-logo-wrapper,
.corners-sharp [data-card-link-enabled="true"] .ecomap-logo-premier,
[data-corners="sharp"] .ecomap-logo-item,
[data-corners="sharp"] .ecomap-logo-wrapper,
[data-corners="sharp"] .ecomap-logo-premier {
    border-radius: 0;
}

/* ============================================
   CHIP/TAG COMPONENTS
   Pill-shaped clickable tags
   ============================================ */

.ecomap-chip-grid {
    gap: var(--spacing-3);
}

.ecomap-chip {
    cursor: pointer;
    /* Chip hover transitions - uses CSS variables for customization */
    transition: background-color var(--hover-transition, 150ms ease),
                transform var(--hover-transition, 150ms ease),
                box-shadow var(--hover-transition, 150ms ease);
    border: 1px solid var(--g200);
}

/* Chip hover - uses CSS variables for customization */
.ecomap-chip:hover {
    background-color: var(--chip-hover-bg, var(--color-primary)) !important;
    border-color: var(--chip-hover-bg, var(--color-primary));
    transform: var(--chip-hover-transform, none);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ecomap-chip:hover p {
    color: var(--color-primary-contrast, #ffffff) !important;
}

/* Chip icons - default to dark text, not primary color */
.ecomap-chip-icon {
    font-size: 0.875rem;
    color: var(--chip-icon-color, #1e293b) !important;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

/* Chip height - 40px total with centered content */
.ecomap-chip {
    height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

.ecomap-chip p {
    margin: 0 !important;
}

.ecomap-chip:hover .ecomap-chip-icon {
    color: var(--color-primary-contrast, #ffffff) !important;
}

/* Dark theme chips - use CSS variables so JS can synchronize fill and text */
.ecomap-theme-dark .ecomap-chip {
    background-color: var(--chip-bg, rgba(255, 255, 255, 0.1));
    border-color: var(--chip-border, rgba(255, 255, 255, 0.2));
}

/* Per-item color override - inline style takes precedence */
.ecomap-chip[style*="--chip-bg"] {
    background-color: var(--chip-bg) !important;
}

/* Per-item color override for chips - also handle text and icons */
.ecomap-chip[style*="--chip-text"],
.ecomap-chip[style*="--chip-text"] p,
.ecomap-chip[style*="--chip-text"] .ecomap-chip-icon {
    color: var(--chip-text) !important;
}

/* Per-item color override for cards with inline styles */
.ecomap-card[style*="--card-bg"] {
    background-color: var(--card-bg) !important;
}

/* Per-item color override for columns - direct background when card-bg is set */
.wp-block-column.ecomap-repeatable-item[style*="--card-bg"],
.ecomap-repeatable-item[style*="--card-bg"] {
    background-color: var(--card-bg) !important;
    border-radius: var(--radius-md, 8px);
}

/* Per-item color override for columns containing cards */
.wp-block-column[style*="--card-bg"] .ecomap-card,
.ecomap-repeatable-item[style*="--card-bg"] .ecomap-card {
    background-color: var(--card-bg) !important;
}

/* Per-item color override for columns containing wp-block-group (card-stage-journey pattern) */
.wp-block-column[style*="--card-bg"] > .wp-block-group,
.ecomap-repeatable-item[style*="--card-bg"] > .wp-block-group {
    background-color: var(--card-bg) !important;
}

/* Per-item text color override for cards and columns */
.ecomap-card[style*="--card-text"] h1,
.ecomap-card[style*="--card-text"] h2,
.ecomap-card[style*="--card-text"] h3,
.ecomap-card[style*="--card-text"] h4,
.ecomap-card[style*="--card-text"] p,
.wp-block-column[style*="--card-text"] .ecomap-card h1,
.wp-block-column[style*="--card-text"] .ecomap-card h2,
.wp-block-column[style*="--card-text"] .ecomap-card h3,
.wp-block-column[style*="--card-text"] .ecomap-card h4,
.wp-block-column[style*="--card-text"] .ecomap-card p,
.wp-block-column[style*="--card-text"] > .wp-block-group h1,
.wp-block-column[style*="--card-text"] > .wp-block-group h2,
.wp-block-column[style*="--card-text"] > .wp-block-group h3,
.wp-block-column[style*="--card-text"] > .wp-block-group h4,
.wp-block-column[style*="--card-text"] > .wp-block-group p,
.ecomap-repeatable-item[style*="--card-text"] h1,
.ecomap-repeatable-item[style*="--card-text"] h2,
.ecomap-repeatable-item[style*="--card-text"] h3,
.ecomap-repeatable-item[style*="--card-text"] h4,
.ecomap-repeatable-item[style*="--card-text"] p {
    color: var(--card-text) !important;
}

/* Per-item muted text color override */
.ecomap-card[style*="--card-text-muted"] .ecomap-text-2,
.wp-block-column[style*="--card-text-muted"] .ecomap-card .ecomap-text-2,
.wp-block-column[style*="--card-text-muted"] > .wp-block-group .ecomap-text-2,
.ecomap-repeatable-item[style*="--card-text-muted"] .ecomap-text-2 {
    color: var(--card-text-muted) !important;
}

/* Per-item color override for gateway cards */
.ecomap-gateway-card[style*="--card-bg"] .ecomap-gateway-card-inner {
    background-color: var(--card-bg) !important;
}

/* Per-item color override for timeline items */
.ecomap-timeline-item[style*="--card-bg"] .ecomap-timeline-content {
    background-color: var(--card-bg) !important;
}

/* Per-item color override for horizontal guide cards */
.ecomap-guide-card-horizontal[style*="--card-bg"] {
    background-color: var(--card-bg) !important;
}

/* Per-item text overrides for gateway cards */
.ecomap-gateway-card[style*="--card-text"] .ecomap-gateway-card-inner h1,
.ecomap-gateway-card[style*="--card-text"] .ecomap-gateway-card-inner h2,
.ecomap-gateway-card[style*="--card-text"] .ecomap-gateway-card-inner h3,
.ecomap-gateway-card[style*="--card-text"] .ecomap-gateway-card-inner p {
    color: var(--card-text) !important;
}

/* Per-item text overrides for timeline items */
.ecomap-timeline-item[style*="--card-text"] .ecomap-timeline-content h1,
.ecomap-timeline-item[style*="--card-text"] .ecomap-timeline-content h2,
.ecomap-timeline-item[style*="--card-text"] .ecomap-timeline-content h3,
.ecomap-timeline-item[style*="--card-text"] .ecomap-timeline-content p {
    color: var(--card-text) !important;
}

/* Per-item text overrides for guide cards */
.ecomap-guide-card-horizontal[style*="--card-text"] h1,
.ecomap-guide-card-horizontal[style*="--card-text"] h2,
.ecomap-guide-card-horizontal[style*="--card-text"] h3,
.ecomap-guide-card-horizontal[style*="--card-text"] p {
    color: var(--card-text) !important;
}

/* ==========================================================================
   Per-item color override: Icons, Buttons, and Links
   When a card/column has inline --card-* variables, these rules adapt child elements
   ========================================================================== */

/* Per-item icon color - icons inside individually-colored cards */
.ecomap-card[style*="--card-icon-color"] i,
.ecomap-card[style*="--card-icon-color"] .ecomap-icon,
.ecomap-card[style*="--card-icon-color"] .ecomap-accent-medium,
.wp-block-column[style*="--card-icon-color"] .ecomap-card i,
.wp-block-column[style*="--card-icon-color"] .ecomap-card .ecomap-icon,
.wp-block-column[style*="--card-icon-color"] .ecomap-card .ecomap-accent-medium,
.wp-block-column[style*="--card-icon-color"] > .wp-block-group i,
.wp-block-column[style*="--card-icon-color"] > .wp-block-group .ecomap-icon,
.ecomap-repeatable-item[style*="--card-icon-color"] i,
.ecomap-repeatable-item[style*="--card-icon-color"] .ecomap-icon,
.ecomap-repeatable-item[style*="--card-icon-color"] .ecomap-accent-medium {
    color: var(--card-icon-color) !important;
}

/* Per-item link color */
.ecomap-card[style*="--card-link-color"] a:not(.wp-block-button__link):not(.wp-element-button),
.wp-block-column[style*="--card-link-color"] .ecomap-card a:not(.wp-block-button__link):not(.wp-element-button),
.wp-block-column[style*="--card-link-color"] > .wp-block-group a:not(.wp-block-button__link):not(.wp-element-button),
.ecomap-repeatable-item[style*="--card-link-color"] a:not(.wp-block-button__link):not(.wp-element-button) {
    color: var(--card-link-color) !important;
}

/* Per-item primary button - use button colors based on card light/dark class */
/* Dark card background → Light fill (--color-base), Dark text (--color-contrast) */
.ecomap-card-dark .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-dark .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button,
.ecomap-card-dark.wp-block-column .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-dark.wp-block-column .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button,
.ecomap-card-dark > .wp-block-group .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-dark > .wp-block-group .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button {
    background-color: var(--color-base, #ffffff) !important;
    color: var(--color-contrast, #0f172a) !important;
}

/* Light card background → Dark fill (--color-contrast), Light text (--color-base) */
.ecomap-card-light .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-light .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button,
.ecomap-card-light.wp-block-column .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-light.wp-block-column .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button,
.ecomap-card-light > .wp-block-group .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link,
.ecomap-card-light > .wp-block-group .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-element-button {
    background-color: var(--color-contrast, #0f172a) !important;
    color: var(--color-base, #ffffff) !important;
}

/* Per-item outline/secondary button - use button colors based on card light/dark class */
/* Dark card background → use Light Button color (--color-base) */
.ecomap-card-dark .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-card-dark.wp-block-column .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-card-dark > .wp-block-group .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--color-base, #ffffff) !important;
    color: var(--color-base, #ffffff) !important;
    background-color: transparent !important;
}

/* Light card background → use Dark Button color (--color-contrast) */
.ecomap-card-light .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-card-light.wp-block-column .wp-block-button.is-style-outline .wp-block-button__link,
.ecomap-card-light > .wp-block-group .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--color-contrast, #0f172a) !important;
    color: var(--color-contrast, #0f172a) !important;
    background-color: transparent !important;
}

/* Per-item link-style button - use button colors based on card light/dark class */
/* Dark card background → use Light Button color (--color-base) */
.ecomap-card-dark .wp-block-button.is-style-link .wp-block-button__link,
.ecomap-card-dark.wp-block-column .wp-block-button.is-style-link .wp-block-button__link,
.ecomap-card-dark > .wp-block-group .wp-block-button.is-style-link .wp-block-button__link {
    color: var(--color-base, #ffffff) !important;
    background-color: transparent !important;
    background: none !important;
}

/* Light card background → use Dark Button color (--color-contrast) */
.ecomap-card-light .wp-block-button.is-style-link .wp-block-button__link,
.ecomap-card-light.wp-block-column .wp-block-button.is-style-link .wp-block-button__link,
.ecomap-card-light > .wp-block-group .wp-block-button.is-style-link .wp-block-button__link {
    color: var(--color-contrast, #0f172a) !important;
    background-color: transparent !important;
    background: none !important;
}

/* Per-item secondary text (text-2) color */
.ecomap-card[style*="--card-text-2"] .ecomap-text-2,
.wp-block-column[style*="--card-text-2"] .ecomap-card .ecomap-text-2,
.wp-block-column[style*="--card-text-2"] > .wp-block-group .ecomap-text-2,
.ecomap-repeatable-item[style*="--card-text-2"] .ecomap-text-2 {
    color: var(--card-text-2) !important;
}

/* Per-item list item colors */
.ecomap-card[style*="--card-text"] li,
.wp-block-column[style*="--card-text"] .ecomap-card li,
.wp-block-column[style*="--card-text"] > .wp-block-group li,
.ecomap-repeatable-item[style*="--card-text"] li {
    color: var(--card-text) !important;
}

/* Chip hover - preserve per-item color when set */
.ecomap-chip[style*="--chip-bg"]:hover {
    background-color: var(--chip-hover-bg, var(--chip-bg)) !important;
}

/* Chip hover text and icons - preserve per-item text color when set */
.ecomap-chip[style*="--chip-text"]:hover p,
.ecomap-chip[style*="--chip-text"]:hover .ecomap-chip-icon {
    color: var(--chip-text) !important;
}

.ecomap-theme-dark .ecomap-chip p {
    color: var(--chip-text, var(--section-text));
}

.ecomap-theme-dark .ecomap-chip:hover {
    background-color: var(--color-primary-light) !important;
}

/* Chip color variants - secondary */
.ecomap-chip-secondary {
    background-color: var(--color-secondary-lighter);
    border-color: var(--color-secondary-light);
}

.ecomap-chip-secondary:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.ecomap-chip-secondary:hover p {
    color: var(--color-secondary-contrast) !important;
}

.ecomap-theme-dark .ecomap-chip-secondary {
    background-color: rgba(var(--color-secondary-rgb), 0.15);
    border-color: var(--color-secondary-light);
}

.ecomap-theme-dark .ecomap-chip-secondary:hover {
    background-color: var(--color-secondary-light) !important;
}

/* Chip color variants - tertiary */
.ecomap-chip-tertiary {
    background-color: var(--color-tertiary-lighter);
    border-color: var(--color-tertiary-light);
}

.ecomap-chip-tertiary:hover {
    background-color: var(--color-tertiary) !important;
    border-color: var(--color-tertiary) !important;
}

.ecomap-chip-tertiary:hover p {
    color: var(--color-tertiary-contrast) !important;
}

.ecomap-theme-dark .ecomap-chip-tertiary {
    background-color: rgba(var(--color-tertiary-rgb), 0.15);
    border-color: var(--color-tertiary-light);
}

.ecomap-theme-dark .ecomap-chip-tertiary:hover {
    background-color: var(--color-tertiary-light) !important;
}

/* Color cycling removed - use explicit variant classes instead:
   .ecomap-chip-secondary, .ecomap-chip-tertiary for chips
   All repeatable elements now use uniform styling */

/* ============================================
   GATEWAY CARDS
   Floating cards for hub-style heroes
   ============================================ */

.ecomap-gateway-cards-container {
    margin-top: var(--spacing-8);
}

/* Gateway cards responsive grid - equal width cards, wrap in pairs */
.ecomap-gateway-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Center remainder items in last row */
    gap: var(--spacing-6, 1.5rem) !important;
}

/* Gateway cards - respect data-items-per-row attribute */
.ecomap-gateway-cards[data-items-per-row="2"] > .wp-block-column {
    flex: 0 1 calc(50% - var(--spacing-6, 1.5rem) / 2) !important;
    min-width: 0;
    max-width: 100%;
}

.ecomap-gateway-cards[data-items-per-row="3"] > .wp-block-column {
    flex: 0 1 calc(33.333% - var(--spacing-6, 1.5rem) * 2 / 3) !important;
    min-width: 0;
    max-width: 100%;
}

.ecomap-gateway-cards[data-items-per-row="4"] > .wp-block-column {
    flex: 0 1 calc(25% - var(--spacing-6, 1.5rem) * 3 / 4) !important;
    min-width: 0;
    max-width: 100%;
}

/* Tablet: 2 per row (earlier breakpoint for gateway cards) */
@media (max-width: 900px) {
    .ecomap-gateway-cards[data-items-per-row="3"] > .wp-block-column,
    .ecomap-gateway-cards[data-items-per-row="4"] > .wp-block-column {
        flex: 0 1 calc(50% - var(--spacing-6, 1.5rem) / 2) !important;
    }
}

/* Mobile: 1 per row */
@media (max-width: 500px) {
    .ecomap-gateway-cards[data-items-per-row="2"] > .wp-block-column,
    .ecomap-gateway-cards[data-items-per-row="3"] > .wp-block-column,
    .ecomap-gateway-cards[data-items-per-row="4"] > .wp-block-column {
        flex: 0 1 100% !important;
    }
}

.ecomap-gateway-card-inner {
    background-color: var(--card-bg);
    color: var(--card-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ecomap-gateway-card-inner:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ============================================
   INLINE STATS BAR
   Horizontal stats with number + label
   ============================================ */

.ecomap-stat-inline {
    text-align: center;
    min-width: 140px;
}

/* Responsive: wrap on smaller screens */
@media (max-width: 768px) {
    .ecomap-pattern-stats-inline .wp-block-group {
        justify-content: center !important;
        gap: var(--spacing-6);
    }

    .ecomap-stat-inline {
        flex-direction: column;
        min-width: 120px;
    }

    .ecomap-stat-inline h3 {
        margin-right: 0 !important;
        margin-bottom: var(--spacing-1);
    }
}

/* ============================================
   SPLIT CTA
   50/50 layout with image and content
   ============================================ */

.ecomap-pattern-cta-split .ecomap-cta-image {
    min-height: 400px;
}

.ecomap-pattern-cta-split .ecomap-cta-image .wp-block-cover {
    height: 100%;
}

.ecomap-pattern-cta-split .ecomap-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .ecomap-pattern-cta-split .wp-block-columns {
        flex-direction: column-reverse;
    }

    .ecomap-pattern-cta-split .ecomap-cta-content,
    .ecomap-pattern-cta-split .ecomap-cta-image {
        flex-basis: 100% !important;
    }

    .ecomap-pattern-cta-split .ecomap-cta-image {
        min-height: 300px;
    }
}

/* ============================================
   CTA BRAND SPLIT
   Two-column layout with brand logo and image
   ============================================ */

/* Main columns container */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-columns {
    gap: var(--wp--preset--spacing--xl, 2rem) !important;
    padding: 0 !important;
    align-items: stretch !important;
    max-width: var(--container-width, 1200px);
    /* Center the columns within the constrained layout */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Both columns stretch to equal height - remove WordPress default margins */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-columns > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* Content column - vertically centered with reduced padding */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: var(--wp--preset--spacing--lg, 1.5rem) !important;
}

/* Content inner - left-align all children, don't expand */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-content-inner {
    padding: 0 !important;
    align-items: flex-start !important;
    flex: 0 0 auto !important;
}

/* Logo image sizing - use correct class name */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-logo {
    margin-bottom: var(--wp--preset--spacing--lg, 1.5rem);
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 300px;
    height: 125px;
    flex-shrink: 0;
}

.ecomap-pattern-cta-brand-split .ecomap-brand-split-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* Adjust logo size for narrower content columns (image gets more space) */
.ecomap-pattern-cta-brand-split[data-column-ratio="30"] .ecomap-brand-split-logo,
.ecomap-pattern-cta-brand-split[data-column-ratio="35"] .ecomap-brand-split-logo {
    width: 220px;
    height: 100px;
}

/* Adjust logo size for wider content columns */
.ecomap-pattern-cta-brand-split[data-column-ratio="60"] .ecomap-brand-split-logo,
.ecomap-pattern-cta-brand-split[data-column-ratio="65"] .ecomap-brand-split-logo,
.ecomap-pattern-cta-brand-split[data-column-ratio="70"] .ecomap-brand-split-logo {
    width: 350px;
    height: 140px;
}

/* Image column - size based on content */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-media {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    display: flex !important;
    align-items: stretch !important;
}

.ecomap-pattern-cta-brand-split .ecomap-brand-split-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
}

.ecomap-pattern-cta-brand-split .ecomap-brand-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg, 12px);
}

/* Logo should NOT have rounded corners */
.ecomap-pattern-cta-brand-split .ecomap-brand-split-logo,
.ecomap-pattern-cta-brand-split .ecomap-brand-split-logo img {
    border-radius: 0 !important;
}

/* Column ratio support (30-70 range) */
@media (min-width: 782px) {
    .ecomap-pattern-cta-brand-split[data-column-ratio="30"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 30% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="30"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 70% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="35"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 35% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="35"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 65% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="40"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 40% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="40"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 60% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="45"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 45% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="45"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 55% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="50"] .ecomap-brand-split-columns > .wp-block-column {
        flex-basis: 50% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="55"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 55% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="55"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 45% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="60"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 60% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="60"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 40% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="65"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 65% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="65"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 35% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="70"] .ecomap-brand-split-columns > .wp-block-column:first-child {
        flex-basis: 70% !important;
    }
    .ecomap-pattern-cta-brand-split[data-column-ratio="70"] .ecomap-brand-split-columns > .wp-block-column:last-child {
        flex-basis: 30% !important;
    }
}

/* Flip layout support */
.ecomap-pattern-cta-brand-split[data-flip-columns="true"] .ecomap-brand-split-columns {
    flex-direction: row-reverse;
}

/* Mobile: Stack vertically */
@media (max-width: 781px) {
    .ecomap-pattern-cta-brand-split .ecomap-brand-split-columns {
        flex-direction: column !important;
    }

    .ecomap-pattern-cta-brand-split .ecomap-brand-split-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .ecomap-pattern-cta-brand-split .ecomap-brand-split-content {
        padding: var(--wp--preset--spacing--md, 1rem) !important;
    }

    .ecomap-pattern-cta-brand-split .ecomap-brand-split-media {
        min-height: 250px;
    }

    .ecomap-pattern-cta-brand-split .ecomap-brand-split-image img {
        border-radius: var(--radius-md, 8px);
    }

    /* Smaller logo on mobile */
    .ecomap-pattern-cta-brand-split .ecomap-brand-split-logo {
        width: 200px;
        height: 80px;
    }
}

/* ============================================
   JOURNEY STAGE PROGRESSION
   Horizontal 5-stage business journey
   ============================================ */

.ecomap-journey-section {
    --journey-step-size: 48px;
    --journey-step-gap: var(--spacing-6);
    --journey-connector-width: 2px;
}

/* Stage number - guaranteed perfect circle via aspect-ratio
   Supports section style overrides via --stage-node-bg and --stage-node-color
   Falls back to semantic classes (ecomap-bg-primary, ecomap-text-contrast) */
.ecomap-stage-number {
    aspect-ratio: 1 / 1 !important;
    width: var(--journey-step-size);
    height: var(--journey-step-size);
    min-width: var(--journey-step-size);
    min-height: var(--journey-step-size);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    /* Use CSS variable if set, otherwise let WordPress classes handle it */
    background-color: var(--stage-node-bg, var(--wp--preset--color--primary, var(--color-primary)));
}

/* Ensure text inside stage number has proper contrast with background */
.ecomap-stage-number,
.ecomap-stage-number p,
.ecomap-stage-number [data-ecomap-step-number] {
    color: var(--stage-node-color, var(--color-primary-contrast, #ffffff)) !important;
}

/* ==========================================================================
   ACCENT ELEMENT CONTRAST - Global rules for text on colored backgrounds
   Ensures WCAG compliance for elements with accent/primary backgrounds
   ========================================================================== */

/* Primary/accent background elements - set contrast color */
.ecomap-bg-primary,
.ecomap-bg-secondary,
.ecomap-bg-tertiary,
[class*="has-primary-background"],
[class*="has-secondary-background"],
[class*="has-tertiary-background"] {
    color: var(--color-primary-contrast, #ffffff);
}

/* Inherit contrast color to all children of accent backgrounds */
.ecomap-bg-primary *,
.ecomap-bg-secondary *,
.ecomap-bg-tertiary *,
[class*="has-primary-background"] *,
[class*="has-secondary-background"] *,
[class*="has-tertiary-background"] * {
    color: inherit;
}

/* Exception: Links inside accent backgrounds should still be distinguishable */
.ecomap-bg-primary a:not(.wp-block-button__link),
.ecomap-bg-secondary a:not(.wp-block-button__link),
.ecomap-bg-tertiary a:not(.wp-block-button__link) {
    color: inherit;
    text-decoration: underline;
}

/* Step style variants via data attribute */
[data-step-style="icons"] .ecomap-stage-number {
    font-size: 1.25rem;
}

[data-step-style="dots"] .ecomap-stage-number {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    font-size: 0;
}

/* ==========================================================================
   STAGE PROGRESSION - CSS Arrows & Responsive Layout
   Horizontal timeline with CSS connectors (no DOM arrows)
   Following journey-timeline pattern for CSS-based connectors
   ========================================================================== */

/* Container query context for responsive layout */
.ecomap-pattern-stage-progression {
    container-type: inline-size;
    container-name: stage-section;
}

/* Horizontal layout with fixed gap for predictable arrow placement */
.stage-progression {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: var(--spacing-8);
    align-items: flex-start;
}

/* Stage items need position relative for absolute arrow positioning */
.stage-progression .stage-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 auto;
    min-width: 100px;
    max-width: 160px;
    overflow: visible; /* Override .ecomap-repeatable-item overflow:hidden to show arrows */
}

/* CSS-based arrows between items via ::after pseudo-element */
.stage-progression .stage-item:not(:last-child)::after {
    content: '→';
    position: absolute;
    /* Position at center of gap: right edge of item + half the actual gap (set by JS) */
    left: calc(100% + var(--actual-gap, var(--spacing-8)) / 2);
    /* Account for item padding-top (--wp--preset--spacing--lg ≈ 24px) + half circle height */
    top: calc(var(--wp--preset--spacing--lg, 1.5rem) + var(--journey-step-size, 48px) / 2);
    /* Center the arrow on that point */
    transform: translate(-50%, -50%);
    font-size: var(--font-size-2xl);
    color: var(--stage-arrow-color, var(--g300));
    pointer-events: none;
    z-index: 1;
    /* Ensure precise centering of arrow character */
    width: 1em;
    text-align: center;
    line-height: 1;
}

/* Hide legacy DOM arrows for backwards compatibility */
.stage-progression .stage-arrow,
.ecomap-pattern-stage-progression .stage-arrow {
    display: none !important;
}

/* ==========================================================================
   DYNAMIC LAYOUT: JS-driven horizontal↔vertical switching
   data-stage-layout attribute takes priority when set by JavaScript
   This enables smart switching based on item count AND container width
   ========================================================================== */

/* Vertical layout when JS sets data-stage-layout="vertical" */
[data-stage-layout="vertical"] .stage-progression {
    flex-direction: column !important;
    align-items: center;
    gap: var(--spacing-6);
}

[data-stage-layout="vertical"] .stage-progression .stage-item {
    max-width: 280px;
    width: 100%;
}

/* Rotate arrows to point down in vertical mode */
[data-stage-layout="vertical"] .stage-progression .stage-item:not(:last-child)::after {
    position: relative;
    left: auto;
    top: auto;
    transform: rotate(90deg);
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-1);
}

/* Horizontal layout when JS sets data-stage-layout="horizontal" */
[data-stage-layout="horizontal"] .stage-progression {
    flex-direction: row;
}

/* Ensure horizontal arrows are visible when JS sets horizontal layout */
[data-stage-layout="horizontal"] .stage-progression .stage-item:not(:last-child)::after {
    content: '→';
    position: absolute;
    left: calc(100% + var(--actual-gap, var(--spacing-8)) / 2);
    top: calc(var(--wp--preset--spacing--lg, 1.5rem) + var(--journey-step-size, 48px) / 2);
    transform: translate(-50%, -50%);
    font-size: var(--font-size-2xl);
    color: var(--stage-arrow-color, var(--g300));
    pointer-events: none;
    z-index: 1;
    margin-top: 0;
    margin-bottom: 0;
    /* Ensure precise centering of arrow character */
    width: 1em;
    text-align: center;
    line-height: 1;
}

/* ==========================================================================
   FALLBACK: Container query for static rendering (no JS)
   Used when page is rendered without Studio active
   ========================================================================== */

/* Responsive: Vertical layout when container is narrow (fallback) */
@container stage-section (max-width: 780px) {
    /* Only apply if JS hasn't set layout mode */
    .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression {
        flex-direction: column !important;
        align-items: center;
        gap: var(--spacing-6);
    }

    .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression .stage-item {
        max-width: 280px;
        width: 100%;
    }

    /* Rotate arrows to point down in vertical mode */
    .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression .stage-item:not(:last-child)::after {
        position: relative;
        left: auto;
        top: auto;
        transform: rotate(90deg);
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-1);
    }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression {
            flex-direction: column !important;
            align-items: center;
            gap: var(--spacing-6);
        }

        .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression .stage-item {
            max-width: 280px;
            width: 100%;
        }

        .ecomap-pattern-stage-progression:not([data-stage-layout]) .stage-progression .stage-item:not(:last-child)::after {
            position: relative;
            left: auto;
            top: auto;
            transform: rotate(90deg);
            margin-top: var(--spacing-3);
            margin-bottom: var(--spacing-1);
        }
    }
}

/* ============================================
   JOURNEY TIMELINE (VERTICAL)
   Vertical timeline with connector and nodes
   Uses flexbox to prevent node/text overlap
   ============================================ */

.ecomap-timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* Timeline item uses flex to properly space node and content */
.ecomap-timeline-item {
    display: flex;
    gap: var(--spacing-6, 1.5rem);
    position: relative;
    padding-bottom: var(--spacing-8);
}

.ecomap-timeline-item:last-child {
    padding-bottom: 0;
}

/* Vertical connector line between nodes - syncs with node fill via --timeline-line-color */
.ecomap-timeline-item::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: var(--timeline-line-color, var(--color-accent-subtle, var(--g200, #e5e7eb)));
    opacity: 0.4;
    z-index: 0;
}

.ecomap-timeline-item:last-child::before {
    display: none;
}

/* Timeline node (step number) - uses accent-medium for secondary cascade */
/* Supports section style overrides via --timeline-node-bg and --timeline-node-color */
.ecomap-timeline-node {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full, 50%);
    background: var(--timeline-node-bg, var(--color-accent-medium));
    color: var(--timeline-node-color, var(--color-accent-medium-contrast, #ffffff));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 1.125rem);
    box-shadow: 0 0 0 4px var(--timeline-node-ring, var(--color-surface, #fff));
}

/* Content area - flex grows to fill remaining space */
/* Uses card variables to isolate text from section background */
.ecomap-timeline-content {
    flex: 1;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    color: var(--card-text);
}

.ecomap-timeline-content h1,
.ecomap-timeline-content h2,
.ecomap-timeline-content h3,
.ecomap-timeline-content h4,
.ecomap-timeline-content h5,
.ecomap-timeline-content h6,
.ecomap-timeline-content .wp-block-heading {
    color: var(--card-text);
}

.ecomap-timeline-content p,
.ecomap-timeline-content .ecomap-text-2,
.ecomap-timeline-content .ecomap-text-muted {
    color: var(--card-text-muted);
}

/* Fix: Override .ecomap-repeatable-item overflow:hidden to show node box-shadow ring */
.ecomap-timeline-item {
    overflow: visible;
}

/* Fix: WordPress applies is-layout-constrained to first child of constrained containers,
   causing the first timeline item content to have unwanted max-width and centered margins.
   Reset these constraints to ensure consistent layout across all timeline items. */
.ecomap-timeline-item.is-layout-constrained,
.ecomap-timeline-item.has-global-padding {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ecomap-timeline-item.is-layout-constrained > *,
.ecomap-timeline-content.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Timeline node inner elements - number shown by default, icon hidden */
.ecomap-timeline-node .ecomap-timeline-number {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ecomap-timeline-node .ecomap-timeline-icon {
    display: none !important;
    line-height: 1;
}

/* Timeline node style variants */
[data-node-style="icons"] .ecomap-timeline-number {
    display: none !important;
}

[data-node-style="icons"] .ecomap-timeline-node .ecomap-timeline-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    /* Override default .ecomap-icon color - inherit from parent node which uses 4-way matrix contrast color */
    color: inherit !important;
}

[data-node-style="dots"] .ecomap-timeline-node {
    width: 16px;
    height: 16px;
    font-size: 0;
}

[data-node-style="dots"] .ecomap-timeline-number,
[data-node-style="dots"] .ecomap-timeline-icon {
    display: none;
}

/* For dots style, adjust the connector line position */
[data-node-style="dots"] .ecomap-timeline-item::before {
    left: 8px;
}

/* Timeline node color variants - base uses accent cascade */
/* Note: Uses --timeline-node-bg/color variables to support section style overrides */
.ecomap-timeline-node {
    background-color: var(--timeline-node-bg, var(--color-accent-medium));
    color: var(--timeline-node-color, var(--color-accent-medium-contrast, #ffffff));
}

.ecomap-timeline-node-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-secondary-contrast) !important;
}

.ecomap-timeline-node-tertiary {
    background-color: var(--color-tertiary) !important;
    color: var(--color-tertiary-contrast) !important;
}

/* Theme-aware timeline node overrides */
.ecomap-theme-dark .ecomap-timeline-node-secondary,
.ecomap-theme-image .ecomap-timeline-node-secondary {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-secondary-dark) !important;
}

.ecomap-theme-dark .ecomap-timeline-node-tertiary,
.ecomap-theme-image .ecomap-timeline-node-tertiary {
    background-color: var(--color-tertiary-light) !important;
    color: var(--color-tertiary-dark) !important;
}

/* Timeline node cycling removed - use explicit .ecomap-timeline-node-secondary/.tertiary instead */

/* Mobile: smaller nodes and tighter spacing */
@media (max-width: 600px) {
    .ecomap-timeline-item {
        gap: var(--spacing-4, 1rem);
    }

    .ecomap-timeline-item::before {
        left: 16px;
        top: 32px;
    }

    .ecomap-timeline-node {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }

    .ecomap-timeline-content {
        padding: var(--spacing-4);
    }
}

/* Step number, stage progression, and team grid cycling removed
   All step numbers use uniform primary color
   Job titles should use ecomap-text-muted for neutral styling */

/* Stats, features, and card persona cycling removed
   All stat numbers use uniform styling
   All feature labels use uniform styling */

/* ============================================
   COMPARISON TABLE "PRO" COLUMN STYLING
   Uses secondary color for the highlighted column
   ============================================ */


/* Card stage journey and card keyword square cycling removed
   All cards now use uniform primary background
   For intentional color variation, use explicit .ecomap-bg-secondary class */

/* ============================================
   COMPARISON TABLE PATTERN - CSS GRID
   2D repeatable with dynamic column count
   ============================================ */

.ecomap-comparison-table {
    --table-border-color: var(--g200);
    --table-feature-width: 40%;
    --plan-cols: 2;
    border: 1px solid var(--table-border-color);
    border-radius: 12px;
    background: var(--color-background, #fff);
    overflow: hidden;
    container-type: inline-size;
    container-name: comparison-table;
}

/* Grid layout for perfect column alignment */
.ecomap-table-row {
    display: grid;
    grid-template-columns: var(--table-feature-width) repeat(var(--plan-cols), 1fr);
    border-bottom: 1px solid var(--table-border-color);
}

.ecomap-table-body .ecomap-table-row:last-child {
    border-bottom: none;
}

.ecomap-table-cell {
    padding: var(--spacing-4) var(--spacing-5);
    display: flex;
    align-items: center;
    min-height: 48px;
}

.ecomap-table-cell p {
    margin: 0;
}

.ecomap-cell-feature {
    justify-content: flex-start;
}

.ecomap-cell-plan {
    justify-content: center;
    text-align: center;
    border-left: 1px solid var(--table-border-color);
}

/* Header row styling */
.ecomap-table-header .ecomap-table-row {
    background: var(--g50);
}

.ecomap-cell-header p {
    font-weight: 600;
}

/* Dynamic column widths based on count */
[data-column-count="2"] .ecomap-table-row {
    --plan-cols: 1;
    --table-feature-width: 50%;
}

[data-column-count="3"] .ecomap-table-row {
    --plan-cols: 2;
    --table-feature-width: 40%;
}

[data-column-count="4"] .ecomap-table-row {
    --plan-cols: 3;
    --table-feature-width: 35%;
}

[data-column-count="5"] .ecomap-table-row {
    --plan-cols: 4;
    --table-feature-width: 30%;
}

/* Highlight last column when enabled */
[data-highlight-column="last"] .ecomap-table-row .ecomap-cell-plan:last-child {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

[data-highlight-column="last"] .ecomap-table-header .ecomap-cell-plan:last-child {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Mobile: Stack layout for all column counts */
@container comparison-table (max-width: 600px) {
    .ecomap-comparison-table .ecomap-table-row {
        grid-template-columns: 1fr;
    }

    .ecomap-comparison-table .ecomap-cell-feature {
        background: var(--g50);
        font-weight: 600;
    }

    .ecomap-comparison-table .ecomap-cell-plan {
        border-left: none;
        border-top: 1px solid var(--table-border-color);
        justify-content: flex-start;
        padding-left: var(--spacing-6);
    }

    .ecomap-comparison-table .ecomap-cell-plan::before {
        content: attr(data-cell-label);
        color: var(--g500);
        margin-right: var(--spacing-3);
        min-width: 60px;
    }

    /* Header row adjustments for mobile */
    .ecomap-comparison-table .ecomap-table-header .ecomap-cell-feature {
        background: var(--g100);
    }

    .ecomap-comparison-table .ecomap-table-header .ecomap-cell-plan {
        background: var(--g50);
    }
}

/* Dark theme support */
.ecomap-theme-dark .ecomap-comparison-table {
    --table-border-color: var(--g700);
    background: var(--g900);
}

.ecomap-theme-dark .ecomap-table-header .ecomap-table-row {
    background: var(--g800);
}

.ecomap-theme-dark [data-highlight-column="last"] .ecomap-table-row .ecomap-cell-plan:last-child {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Legacy compat: hide old wp-block-columns structure if present */
.ecomap-comparison-table .wp-block-columns {
    display: none;
}

/* ============================================
   TEAM SECTION OPTIONS
   Configurable team member display
   ============================================ */

.ecomap-team-section {
    --team-image-size: 140px;
    --team-gap: var(--spacing-6);
}

/* Team member card content centering - override WordPress flex alignment */
/* WordPress generates dynamic classes like wp-container-core-group-is-layout-XXX */
/* that set align-items: flex-start. We need to override these aggressively. */
/* Content items are centered horizontally, but the wrapper aligns to top of card */
.ecomap-team-member {
    align-items: center !important;  /* Center children horizontally */
    justify-content: flex-start !important;  /* Align to top of container */
    text-align: center !important;
    width: 100% !important;
}

/* Override all WordPress dynamic layout classes on team member */
div.ecomap-team-member[class*="wp-container"],
div.ecomap-team-member.is-layout-flex,
.wp-block-group.ecomap-team-member {
    align-items: center !important;  /* Center children horizontally */
    justify-content: flex-start !important;  /* Align to top */
}

/* All direct children should be centered and full-width */
.ecomap-team-member > * {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure headings are centered */
.ecomap-team-member h4,
.ecomap-team-member .wp-block-heading,
.ecomap-team-section h4,
.ecomap-team-section .wp-block-heading {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure paragraphs/bios are centered */
.ecomap-team-member p,
.ecomap-team-member .ecomap-team-bio,
.ecomap-team-section .ecomap-team-bio {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Image figure needs to be centered in its flex container */
.ecomap-team-member figure.ecomap-team-image,
.ecomap-team-member .wp-block-image {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
}

/* Team member image container - figure element */
.ecomap-team-image {
    width: var(--team-image-size);
    height: var(--team-image-size);
    overflow: hidden;
    flex-shrink: 0;
}

/* Team member image - actual img inside figure */
.ecomap-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image style variants via data attribute */
[data-image-style="circle"] .ecomap-team-image,
[data-image-style="circle"] .ecomap-team-image img,
.ecomap-team-image.style-circle,
.ecomap-team-image.style-circle img {
    border-radius: var(--radius-full, 100%);
}

[data-image-style="square"] .ecomap-team-image,
[data-image-style="square"] .ecomap-team-image img,
.ecomap-team-image.style-square,
.ecomap-team-image.style-square img {
    border-radius: 0;
}

[data-image-style="rounded"] .ecomap-team-image,
[data-image-style="rounded"] .ecomap-team-image img,
.ecomap-team-image.style-rounded,
.ecomap-team-image.style-rounded img {
    border-radius: var(--radius-lg, 12px);
}

/* Image size variants via data attribute */
[data-image-size="100px"] .ecomap-team-image,
[data-image-size="100px"] .ecomap-team-image img {
    width: 100px;
    height: 100px;
}

[data-image-size="140px"] .ecomap-team-image,
[data-image-size="140px"] .ecomap-team-image img {
    width: 140px;
    height: 140px;
}

[data-image-size="180px"] .ecomap-team-image,
[data-image-size="180px"] .ecomap-team-image img {
    width: 180px;
    height: 180px;
}

/* Social links visibility via data attribute - must override .ecomap-team-member display:flex */
.ecomap-team-section[data-show-social="false"] .ecomap-social-links,
.ecomap-team-section[data-show-social="false"] .wp-block-social-links,
[data-show-social="false"] .ecomap-social-links,
[data-show-social="false"] .wp-block-social-links {
    display: none !important;
}

/* Hide social platforms that are not enabled by default */
/* Default enabled: linkedin, x. Others hidden until explicitly enabled */
.ecomap-team-section .wp-social-link-facebook,
.ecomap-team-section .wp-social-link-youtube,
.ecomap-team-section .wp-social-link-tiktok,
.ecomap-team-section .wp-social-link-instagram {
    display: none;
}

/* Show platforms when explicitly enabled via data attribute */
.ecomap-team-section[data-social-facebook="true"] .wp-social-link-facebook,
.ecomap-team-section[data-social-youtube="true"] .wp-social-link-youtube,
.ecomap-team-section[data-social-tiktok="true"] .wp-social-link-tiktok,
.ecomap-team-section[data-social-instagram="true"] .wp-social-link-instagram {
    display: flex;
}

/* Hide default platforms when explicitly disabled */
.ecomap-team-section[data-social-linkedin="false"] .wp-social-link-linkedin,
.ecomap-team-section[data-social-x="false"] .wp-social-link-x {
    display: none;
}

/* Social link labels - visible by default */
.ecomap-team-section .wp-block-social-link-label-visible {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-600, #6b7280);
}

/* When more than 2 social links are enabled, hide labels (icons only) */
.ecomap-team-section .wp-block-social-links.has-many-links .wp-block-social-link-label-visible {
    display: none;
}

/* Team member social links - styled version with labels */
.ecomap-team-member .ecomap-social-links,
.ecomap-team-member .wp-block-social-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    width: 100% !important;
    gap: var(--spacing-3);
    list-style: none;
    margin: 0 auto !important;
    padding: 0;
}

.ecomap-team-member .wp-block-social-link a {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-gray-500, #6b7280);
    font-size: 0.875rem;
    text-decoration: none;
    padding: var(--spacing-1);
    background: transparent;
    width: auto;
    height: auto;
}

.ecomap-team-member .wp-block-social-link a:hover {
    color: var(--color-primary, #3b82f6);
}

.ecomap-team-member .wp-block-social-link svg {
    width: 16px;
    height: 16px;
}


/* Bios visibility via data attribute - must override .ecomap-team-section .ecomap-team-bio display:block */
.ecomap-team-section[data-show-bios="false"] .ecomap-team-bio,
[data-show-bios="false"] .ecomap-team-bio {
    display: none !important;
}

/* Team card column layout - ensure each card column aligns content at top */
/* Cards stretch to equal height (from parent flex), but content aligns to top */
.ecomap-pattern-team-grid .wp-block-column.ecomap-card,
.ecomap-team-section .wp-block-column.ecomap-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;  /* Center horizontally */
    justify-content: flex-start !important;  /* Align content to top */
}

/* Team grid responsive - adapt when cards get thin */
/* When 4+ columns on smaller screens, reduce image size */
@media (max-width: 1200px) {
    .ecomap-pattern-team-grid .wp-block-columns {
        gap: var(--spacing-md, 1rem);
    }

    .ecomap-team-section .ecomap-team-image,
    .ecomap-team-section .ecomap-team-image img {
        width: 100px !important;
        height: 100px !important;
    }

    /* Reduce font size slightly on narrower cards (team member names only, not section heading) */
    .ecomap-team-section .ecomap-team-member h4,
    .ecomap-team-section .ecomap-team-member .wp-block-heading {
        font-size: 1rem !important;
    }

    .ecomap-team-section .ecomap-team-bio {
        font-size: 0.8125rem !important;
    }
}

/* Stack to 2 columns on tablet */
@media (max-width: 900px) {
    .ecomap-pattern-team-grid .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .ecomap-pattern-team-grid .wp-block-column {
        flex-basis: calc(50% - var(--spacing-md, 1rem)) !important;
        flex-grow: 0 !important;
    }

    .ecomap-team-section .ecomap-team-image,
    .ecomap-team-section .ecomap-team-image img {
        width: 120px !important;
        height: 120px !important;
    }

    /* Restore normal font sizes when cards are wider (team member names only) */
    .ecomap-team-section .ecomap-team-member h4,
    .ecomap-team-section .ecomap-team-member .wp-block-heading {
        font-size: 1.125rem !important;
    }

    .ecomap-team-section .ecomap-team-bio {
        font-size: 0.875rem !important;
    }
}

/* Stack to 1 column on mobile */
@media (max-width: 600px) {
    .ecomap-pattern-team-grid .wp-block-column {
        flex-basis: 100% !important;
    }

    .ecomap-team-section .ecomap-team-image,
    .ecomap-team-section .ecomap-team-image img {
        width: 140px !important;
        height: 140px !important;
    }
}

/* Team Grid Card Link Indicator - chain icon on hover for linked cards */
.ecomap-team-section[data-card-link-enabled="true"] .wp-block-column.ecomap-card.has-link {
    position: relative;
}

.ecomap-team-section[data-card-link-enabled="true"] .wp-block-column.ecomap-card.has-link::after {
    content: '\f0c1'; /* Font Awesome chain/link icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--color-primary, #0073aa);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

.ecomap-team-section[data-card-link-enabled="true"] .wp-block-column.ecomap-card.has-link:hover::after {
    opacity: 1;
}

/* Dark theme adjustment for team card link indicator */
.ecomap-team-section.ecomap-theme-dark[data-card-link-enabled="true"] .wp-block-column.ecomap-card.has-link::after {
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-primary-light, #4da6d9);
}

/* ============================================
   STATS SECTION OPTIONS
   Configurable stats display
   ============================================ */

.ecomap-stats-section {
    --stats-columns: 4;
}

/* Responsive column adjustments */
@media (max-width: 768px) {
    .ecomap-stats-section {
        --stats-columns: 2;
    }
}

@media (max-width: 480px) {
    .ecomap-stats-section {
        --stats-columns: 1;
    }
}

/* Grid using CSS variable */
.ecomap-stats-grid {
    display: grid;
    grid-template-columns: repeat(var(--stats-columns), 1fr);
    gap: var(--spacing-6);
}

/* Icons visibility via data attribute */
[data-show-icons="false"] .ecomap-stat-icon {
    display: none;
}

/* ==========================================================================
   CARD BUTTON CONFIGURATION
   Controls for card-based sections (feature grids, icon cards, etc.)
   ========================================================================== */

/* Hide card buttons when toggle is off */
[data-show-card-buttons="false"] .ecomap-card .wp-block-buttons,
[data-show-card-buttons="false"] .wp-block-column .wp-block-buttons,
[data-show-card-buttons="false"] .ecomap-gateway-card .wp-block-buttons {
    display: none;
}

/* Button Style: Filled (default) - uses card-aware colors */
[data-card-button-style="filled"] .ecomap-card .wp-block-button__link,
[data-card-button-style="filled"] .wp-block-column .wp-block-button__link,
[data-card-button-style="filled"] .ecomap-gateway-card .wp-block-button__link {
    background-color: var(--card-primary);
    color: var(--card-primary-contrast);
    border: 2px solid var(--card-primary);
}

[data-card-button-style="filled"] .ecomap-card .wp-block-button__link:hover,
[data-card-button-style="filled"] .wp-block-column .wp-block-button__link:hover,
[data-card-button-style="filled"] .ecomap-gateway-card .wp-block-button__link:hover {
    background-color: var(--card-primary-hover);
    border-color: var(--card-primary-hover);
}

/* Button Style: Outline - uses card-aware colors */
[data-card-button-style="outline"] .ecomap-card .wp-block-button__link,
[data-card-button-style="outline"] .wp-block-column .wp-block-button__link,
[data-card-button-style="outline"] .ecomap-gateway-card .wp-block-button__link {
    background-color: transparent;
    color: var(--card-primary);
    border: 2px solid var(--card-primary);
}

[data-card-button-style="outline"] .ecomap-card .wp-block-button__link:hover,
[data-card-button-style="outline"] .wp-block-column .wp-block-button__link:hover,
[data-card-button-style="outline"] .ecomap-gateway-card .wp-block-button__link:hover {
    background-color: var(--card-primary);
    color: var(--card-primary-contrast);
}

/* Button Style: Ghost (text only) - uses card-aware colors */
[data-card-button-style="ghost"] .ecomap-card .wp-block-button__link,
[data-card-button-style="ghost"] .wp-block-column .wp-block-button__link,
[data-card-button-style="ghost"] .ecomap-gateway-card .wp-block-button__link {
    background-color: transparent;
    color: var(--card-primary);
    border: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

[data-card-button-style="ghost"] .ecomap-card .wp-block-button__link:hover,
[data-card-button-style="ghost"] .wp-block-column .wp-block-button__link:hover,
[data-card-button-style="ghost"] .ecomap-gateway-card .wp-block-button__link:hover {
    text-decoration-thickness: 2px;
}

/* Dark CARD button colors - when the card itself has dark background */
/* Override the light-card defaults with light button colors */
.ecomap-card.ecomap-card-dark,
.ecomap-card.ecomap-bg-dark,
.ecomap-card.has-section-dark-background-color,
.ecomap-card.has-gray-800-background-color,
.ecomap-card.has-gray-900-background-color,
.ecomap-card.has-black-background-color {
    --card-primary: #ffffff;
    --card-primary-hover: #e5e7eb;
    --card-primary-contrast: #1e293b;
}

/* Spacing Utilities */
.ecomap-space-xs {
    padding: var(--space-xs, 0.5rem);
}

.ecomap-space-sm {
    padding: var(--space-sm, 1rem);
}

.ecomap-space-md {
    padding: var(--space-md, 1.5rem);
}

.ecomap-space-lg {
    padding: var(--space-lg, 2rem);
}

.ecomap-space-xl {
    padding: var(--space-xl, 3rem);
}

/* Gap Utilities */
.ecomap-gap-xs {
    gap: var(--space-xs, 0.5rem);
}

.ecomap-gap-sm {
    gap: var(--space-sm, 1rem);
}

.ecomap-gap-md {
    gap: var(--space-md, 1.5rem);
}

.ecomap-gap-lg {
    gap: var(--space-lg, 2rem);
}

.ecomap-gap-xl {
    gap: var(--space-xl, 3rem);
}

/* Border Radius */
.ecomap-rounded-none {
    border-radius: 0;
}

.ecomap-rounded-sm {
    border-radius: var(--radius-sm, 4px);
}

.ecomap-rounded-md {
    border-radius: var(--radius-md, 8px);
}

.ecomap-rounded-lg {
    border-radius: var(--radius-lg, 12px);
}

.ecomap-rounded-full {
    border-radius: 9999px;
}

/* ==========================================================================
   RESPONSIVE UTILITY CLASSES
   ========================================================================== */

/* Hide/Show at Breakpoints */
@media (max-width: 1024px) {
    .hide-desktop-small {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 481px) {
    .show-mobile-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-tablet-only {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .show-desktop-small-only {
        display: none !important;
    }
}

/* Text Alignment at Breakpoints */
@media (max-width: 768px) {
    .text-center-tablet {
        text-align: center !important;
    }

    .text-left-tablet {
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }
}

/* Column Control at Breakpoints */
@media (max-width: 768px) {
    .stack-tablet {
        flex-direction: column !important;
    }

    .stack-tablet>* {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .stack-mobile {
        flex-direction: column !important;
    }

    .stack-mobile>* {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Spacing Modifiers at Breakpoints */
@media (max-width: 768px) {
    .py-tablet-8 {
        padding-top: var(--spacing-8, 2rem) !important;
        padding-bottom: var(--spacing-8, 2rem) !important;
    }

    .py-tablet-6 {
        padding-top: var(--spacing-6, 1.5rem) !important;
        padding-bottom: var(--spacing-6, 1.5rem) !important;
    }

    .py-tablet-4 {
        padding-top: var(--spacing-4, 1rem) !important;
        padding-bottom: var(--spacing-4, 1rem) !important;
    }

    .px-tablet-4 {
        padding-left: var(--spacing-4, 1rem) !important;
        padding-right: var(--spacing-4, 1rem) !important;
    }

    .mb-tablet-4 {
        margin-bottom: var(--spacing-4, 1rem) !important;
    }

    .mb-tablet-6 {
        margin-bottom: var(--spacing-6, 1.5rem) !important;
    }

    .gap-tablet-4 {
        gap: var(--spacing-4, 1rem) !important;
    }

    .gap-tablet-6 {
        gap: var(--spacing-6, 1.5rem) !important;
    }
}

@media (max-width: 480px) {
    .py-mobile-8 {
        padding-top: var(--spacing-8, 2rem) !important;
        padding-bottom: var(--spacing-8, 2rem) !important;
    }

    .py-mobile-6 {
        padding-top: var(--spacing-6, 1.5rem) !important;
        padding-bottom: var(--spacing-6, 1.5rem) !important;
    }

    .py-mobile-4 {
        padding-top: var(--spacing-4, 1rem) !important;
        padding-bottom: var(--spacing-4, 1rem) !important;
    }

    .px-mobile-4 {
        padding-left: var(--spacing-4, 1rem) !important;
        padding-right: var(--spacing-4, 1rem) !important;
    }

    .px-mobile-3 {
        padding-left: var(--spacing-3, 0.75rem) !important;
        padding-right: var(--spacing-3, 0.75rem) !important;
    }

    .mb-mobile-4 {
        margin-bottom: var(--spacing-4, 1rem) !important;
    }

    .mb-mobile-6 {
        margin-bottom: var(--spacing-6, 1.5rem) !important;
    }

    .gap-mobile-3 {
        gap: var(--spacing-3, 0.75rem) !important;
    }

    .gap-mobile-4 {
        gap: var(--spacing-4, 1rem) !important;
    }
}

/* Full Width on Mobile */
@media (max-width: 480px) {
    .full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* No Wrap - Prevent stacking */
.no-stack-tablet.wp-block-columns,
.is-not-stacked-on-mobile.wp-block-columns {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

.no-stack-tablet.wp-block-columns>.wp-block-column,
.is-not-stacked-on-mobile.wp-block-columns>.wp-block-column {
    flex-basis: auto !important;
}

/* When inside a section with explicit column ratio, respect the ratio instead of auto */
/* This ensures column ratios work properly with non-stacking columns */
[data-column-ratio] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column {
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* Apply column ratios to non-stacking columns (inherits from the [data-column-ratio] rules above) */
@media (min-width: 600px) {
    [data-column-ratio="50"] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column {
        flex-basis: 50% !important;
    }
    [data-column-ratio="40"] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column:first-child {
        flex-basis: 40% !important;
    }
    [data-column-ratio="40"] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column:last-child {
        flex-basis: 60% !important;
    }
    [data-column-ratio="60"] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column:first-child {
        flex-basis: 60% !important;
    }
    [data-column-ratio="60"] .is-not-stacked-on-mobile.wp-block-columns>.wp-block-column:last-child {
        flex-basis: 40% !important;
    }

    /* Flipped items: reverse the column ratios so content/media keep their widths regardless of position */
    [data-column-ratio="40"] .is-not-stacked-on-mobile.wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: 60% !important;
    }
    [data-column-ratio="40"] .is-not-stacked-on-mobile.wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: 40% !important;
    }
    [data-column-ratio="60"] .is-not-stacked-on-mobile.wp-block-columns[data-flipped="true"]>.wp-block-column:first-child {
        flex-basis: 40% !important;
    }
    [data-column-ratio="60"] .is-not-stacked-on-mobile.wp-block-columns[data-flipped="true"]>.wp-block-column:last-child {
        flex-basis: 60% !important;
    }
}

/* Mobile: Force split sections (with data-column-ratio) to stack */
/* This overrides is-not-stacked-on-mobile for sections that use column ratio */
@media (max-width: 768px) {
    /* Target all wp-block-columns inside sections with column ratio */
    .ecomap-section[data-column-ratio] .wp-block-columns,
    [data-column-ratio] .wp-block-columns.is-not-stacked-on-mobile,
    [data-column-ratio] .wp-block-columns.no-stack-tablet,
    [data-column-ratio] .wp-block-columns[class*="is-layout-flex"] {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .ecomap-section[data-column-ratio] .wp-block-columns > .wp-block-column,
    [data-column-ratio] .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column,
    [data-column-ratio] .wp-block-columns.no-stack-tablet > .wp-block-column,
    [data-column-ratio] .wp-block-columns[class*="is-layout-flex"] > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image columns in split sections: full viewport width (bleed) */
    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-image),
    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-cover),
    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-video) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    /* Images inside full-bleed columns should fill the space */
    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-image) .wp-block-image,
    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-cover) .wp-block-cover {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-image) .wp-block-image img {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    [data-column-ratio] .wp-block-columns > .wp-block-column:has(.wp-block-image) figure {
        border-radius: 0 !important;
    }

    /* Text columns in split sections: keep padding */
    [data-column-ratio] .wp-block-columns > .wp-block-column:not(:has(.wp-block-image)):not(:has(.wp-block-cover)):not(:has(.wp-block-video)) {
        padding: var(--spacing-6, 1.5rem) var(--wp--style--root--padding-right, 1rem) !important;
    }
}

/* ==========================================================================
   GUIDES - Cards, Grid, and Single Article Styles
   ========================================================================== */

/* Guides Section Container */
.ecomap-guides-section {
    padding: var(--spacing-12, 3rem) var(--spacing-4, 1rem);
    background-color: var(--color-surface, #ffffff);
}

/* Guides Empty State */
.ecomap-guides-empty {
    text-align: center;
    padding: var(--spacing-12, 3rem);
    color: #666;
}

/* ==========================================================================
   GUIDES GRID LAYOUT
   ========================================================================== */

.ecomap-guides-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Guide Card */
.ecomap-guide-card {
    position: relative;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.ecomap-guide-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card Image */
.ecomap-guide-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ecomap-guide-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.ecomap-guide-card:hover .ecomap-guide-card-image img {
    transform: scale(1.03);
}

/* Placeholder Image */
.ecomap-guide-card-image--placeholder {
    background: linear-gradient(135deg, #e0e5ec 0%, #d1d9e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecomap-guide-card-image--placeholder span {
    font-size: 48px;
    font-weight: 600;
    color: #8a9bb5;
    text-transform: uppercase;
}

/* Card Content */
.ecomap-guide-card-content {
    padding: var(--spacing-4, 1rem);
}

/* Card Date */
.ecomap-guide-card-date {
    display: block;
    font-size: 12px;
    color: var(--card-text-muted, #666);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

/* Card Title */
.ecomap-guide-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.ecomap-guide-card-title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-card-title a:hover {
    color: var(--accent-color, #0073aa);
}

/* Card Excerpt */
.ecomap-guide-card-excerpt {
    font-size: 14px;
    color: var(--card-text-muted, #666);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Featured Card */
.ecomap-guide-card--featured .ecomap-guide-card-title {
    font-size: 24px;
}

.ecomap-guide-card--featured .ecomap-guide-card-excerpt {
    -webkit-line-clamp: 3;
}

/* ==========================================================================
   GUIDES LIST LAYOUT
   ========================================================================== */

.ecomap-guides-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 1rem);
}

.ecomap-guide-list-item {
    display: flex;
    gap: var(--spacing-4, 1rem);
    padding: var(--spacing-4, 1rem);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 200ms ease;
}

.ecomap-guide-list-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ecomap-guide-list-image {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.ecomap-guide-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecomap-guide-list-content {
    flex: 1;
    min-width: 0;
}

.ecomap-guide-list-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.ecomap-guide-list-title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-list-title a:hover {
    color: var(--accent-color, #0073aa);
}

.ecomap-guide-list-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.ecomap-guide-list-meta .separator {
    margin: 0 6px;
}

.ecomap-guide-list-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   GUIDES FEATURED LAYOUT
   ========================================================================== */

.ecomap-guides-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

.ecomap-guide-featured-main {
    grid-row: span 2;
}

.ecomap-guide-featured-secondary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 1rem);
}

/* Featured Guides Grid (ghost previews) */
.ecomap-guides-featured-grid,
.wp-block-columns.ecomap-guides-featured-grid {
    display: flex;
    gap: var(--wp--preset--spacing--2-xl, 3rem);
    max-width: 1200px !important;
    margin: 0 auto;
    align-items: stretch;
}

.ecomap-guides-featured-grid > .wp-block-column {
    flex-basis: auto !important;
}

.ecomap-guides-featured-grid .ecomap-guide-card-primary {
    flex: 1.5;
    min-width: 0;
}

.ecomap-guides-featured-grid .ecomap-guides-featured-secondary,
.ecomap-guides-featured-grid .ecomap-guides-featured-secondary.is-layout-flow {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Primary ghost card - full height */
.ecomap-guides-featured-grid .ecomap-ghost-preview--primary {
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.ecomap-guides-featured-grid .ecomap-ghost-preview--primary .ecomap-ghost-image {
    flex: 1;
    min-height: 200px;
}

.ecomap-guides-featured-grid .ecomap-ghost-preview--primary .ecomap-ghost-content {
    padding: var(--spacing-lg, 1.5rem);
}

/* Secondary ghost cards - equal height distribution */
.ecomap-guides-featured-grid .ecomap-ghost-preview--secondary {
    flex: 1;
    min-height: 100px;
    display: flex;
    align-items: center;
    padding: var(--spacing-md, 1rem);
}

.ecomap-guides-featured-grid .ecomap-ghost-preview--secondary .ecomap-ghost-image--small {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    aspect-ratio: 1;
    border-radius: var(--radius-md, 8px);
}

.ecomap-guides-featured-grid .ecomap-ghost-preview--secondary .ecomap-ghost-content--horizontal {
    flex: 1;
    padding-left: var(--spacing-md, 1rem);
}

/* Mobile responsive - Featured Guides Grid */
@media (max-width: 900px) {
    .ecomap-guides-featured-grid {
        flex-direction: column;
    }

    .ecomap-guides-featured-grid .ecomap-guide-card-primary,
    .ecomap-guides-featured-grid .ecomap-guides-featured-secondary {
        flex: none;
        width: 100%;
    }

    .ecomap-guides-featured-grid .ecomap-ghost-preview--primary {
        min-height: 300px;
    }

    .ecomap-guides-featured-grid .ecomap-guides-featured-secondary {
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }
}

@media (max-width: 600px) {
    .ecomap-guides-featured-grid .ecomap-ghost-preview--primary {
        min-height: 250px;
    }

    .ecomap-guides-featured-grid .ecomap-ghost-preview--secondary {
        flex-direction: column;
        padding: var(--spacing-md, 1rem);
        text-align: center;
    }

    .ecomap-guides-featured-grid .ecomap-ghost-preview--secondary .ecomap-ghost-image--small {
        width: 60px;
        height: 60px;
        margin-bottom: var(--spacing-sm, 0.5rem);
    }

    .ecomap-guides-featured-grid .ecomap-ghost-preview--secondary .ecomap-ghost-content--horizontal {
        padding-left: 0;
    }
}

/* ==========================================================================
   SINGLE GUIDE ARTICLE STYLES
   ========================================================================== */

.single-guide-main {
    padding: var(--spacing-8, 2rem) var(--spacing-4, 1rem);
}

.guide-article {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Wider layout on large screens */
@media (min-width: 1024px) {
    .guide-article {
        max-width: 900px;
    }
}

@media (min-width: 1280px) {
    .guide-article {
        max-width: 1000px;
    }
}

/* Back navigation */
.guide-back-nav {
    padding-top: var(--spacing-8, 2rem);
    margin-bottom: var(--spacing-8, 2rem);
}

.guide-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 150ms ease;
}

.guide-back-link:hover {
    color: var(--accent-color, #0073aa);
}

.guide-back-link svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Guide Breadcrumb
   ========================================================================== */

.guide-breadcrumb {
    margin-bottom: var(--spacing-4, 1rem);
}

.guide-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.guide-breadcrumb-list a {
    color: #666;
    text-decoration: none;
    transition: color 150ms ease;
}

.guide-breadcrumb-list a:hover {
    color: var(--accent-color, #0073aa);
}

.guide-breadcrumb-separator {
    color: #ccc;
    user-select: none;
}

.guide-breadcrumb-current {
    color: #1a1a1a;
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .guide-breadcrumb-current {
        max-width: 120px;
    }
}

/* ==========================================================================
   Guide Cards - BEM Pattern Classes
   ========================================================================== */

/* Image container (BEM variant) */
.ecomap-guide-card__image {
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #e0e5ec 0%, #d1d9e6 100%);
}

.ecomap-guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 200ms ease;
}

.ecomap-guide-card:hover .ecomap-guide-card__image img {
    transform: scale(1.03);
}

/* Content area (BEM variant) */
.ecomap-guide-card__content {
    padding: var(--spacing-4, 1rem);
}

/* Category pills container */
.ecomap-guide-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: var(--spacing-2, 0.5rem);
    min-height: calc(12px * 1.5 + 0.25rem); /* Reserve space for alignment */
}

/* Category pill */
.ecomap-guide-card__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--card-tag-color, var(--color-primary, #0073aa));
    background-color: color-mix(in srgb, var(--card-tag-color, var(--color-primary, #0073aa)) 25%, transparent);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    line-height: 1.5;
}

/* Reserve category space when no categories exist (title is first child) */
.ecomap-guide-card__content > .ecomap-guide-card__title:first-child {
    margin-top: calc(12px * 1.5 + 0.25rem + var(--spacing-2, 0.5rem)); /* pill height + margin */
}

/* Title (BEM variant) */
.ecomap-guide-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--card-text, #1a1a1a);
    margin: 0 0 var(--spacing-2, 0.5rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ecomap-guide-card__title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-card__title a:hover {
    color: var(--accent-color, #0073aa);
}

/* Stretched link - makes entire card clickable (frontend only, not editor) */
.ecomap-guide-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Disable stretched link in editor mode - clicks should only work on actual title text */
.ecomap-editing .ecomap-guide-card__title a::after {
    display: none;
}

/* Excerpt (BEM variant) */
.ecomap-guide-card__excerpt {
    font-size: 14px;
    color: var(--card-text-muted, #666);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta info (BEM variant) */
.ecomap-guide-card__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-size: 12px;
    color: var(--card-text-muted, #888);
    margin-top: var(--spacing-3, 0.75rem);
}

/* Reading time - monospace for data */
.ecomap-guide-card__reading-time,
.reading-time {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* Featured primary card - larger */
.ecomap-guide-card--featured-primary .ecomap-guide-card__title {
    font-size: 20px;
    -webkit-line-clamp: 3;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__excerpt {
    -webkit-line-clamp: 3;
}

/* Featured secondary cards - horizontal layout */
.ecomap-guide-card--featured-secondary {
    display: flex;
    flex-direction: row;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__image {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__title {
    font-size: 14px;
    -webkit-line-clamp: 2;
}

/* Ghost Preview Elements for Guides */
.ecomap-ghost-preview {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed var(--g300, #cbd5e1);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ecomap-ghost-preview:hover {
    border-color: var(--color-primary, #0073aa);
}

.ecomap-ghost-preview--primary {
    display: flex;
    flex-direction: column;
}

.ecomap-ghost-preview--secondary {
    display: flex;
    flex-direction: row;
}

.ecomap-ghost-image {
    aspect-ratio: 16/9;
    background: var(--g100, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.ecomap-ghost-image--small {
    aspect-ratio: 1/1;
    min-height: auto;
    min-width: 100px;
    max-width: 100px;
    flex-shrink: 0;
    border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
}

.ecomap-ghost-icon {
    stroke: var(--g400, #94a3b8);
    stroke-width: 1.5;
    fill: none;
}

.ecomap-ghost-content {
    padding: var(--spacing-lg, 24px);
}

.ecomap-ghost-content--horizontal {
    padding: var(--spacing-md, 16px);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ecomap-ghost-category,
.ecomap-ghost-title,
.ecomap-ghost-excerpt,
.ecomap-ghost-meta {
    background: var(--g200, #e2e8f0);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm, 8px);
}

.ecomap-ghost-category {
    width: 80px;
    height: 12px;
}

.ecomap-ghost-title {
    width: 85%;
    height: 20px;
}

.ecomap-ghost-title--small {
    width: 90%;
    height: 16px;
}

.ecomap-ghost-excerpt {
    width: 100%;
    height: 14px;
}

.ecomap-ghost-excerpt--short {
    width: 70%;
}

.ecomap-ghost-meta {
    width: 40%;
    height: 12px;
    margin-bottom: 0;
}

.ecomap-ghost-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ecomap-ghost-preview:hover .ecomap-ghost-overlay {
    opacity: 1;
}

.ecomap-ghost-instruction {
    font-weight: 600;
    font-size: var(--font-size-sm, 14px);
    color: var(--g700, #334155);
}

.ecomap-ghost-hint {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-primary, #0073aa);
}

/* Guides Notice Banner - shown when no guides exist */
.ecomap-guides-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    padding: 12px 20px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--spacing-xl, 1.5rem);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ecomap-guides-notice__content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
}

.ecomap-guides-notice__content svg {
    flex-shrink: 0;
    color: #d97706;
}

.ecomap-guides-notice__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: #d97706;
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.ecomap-guides-notice__btn:hover {
    background: #b45309;
    color: white !important;
}

@media (max-width: 600px) {
    .ecomap-guides-notice {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ecomap-guides-notice__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Edit Guide button - consistent across all ghost cards */
.ecomap-ghost-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: var(--g800, #1e293b);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ecomap-ghost-edit-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.ecomap-ghost-edit-btn svg {
    flex-shrink: 0;
}

/* Ghost tile CTA button */
.ecomap-ghost-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-4, 16px);
    padding: 12px 24px;
    background: var(--color-primary, #0073aa);
    color: white !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.ecomap-ghost-cta:hover {
    background: var(--color-primary-hover, #005a87);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.4);
}

/* Hide ghost elements when section is connected */
[data-guides-connected="true"] .ecomap-guides-ghost-container {
    display: none;
}

/* ==========================================================================
   Guides Directory Section
   ========================================================================== */

.ecomap-pattern-guides-directory {
    background: var(--section-bg, #ffffff);
}

.ecomap-guides-directory-header {
    text-align: center;
    margin-bottom: var(--spacing-xl, 2rem);
}

.ecomap-guides-directory-content,
.ecomap-guides-directory-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Filter Tabs */
.ecomap-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2, 0.5rem);
    justify-content: center;
    margin-bottom: var(--spacing-xl, 2rem);
    padding: var(--spacing-2, 0.5rem);
    background: var(--g50, #f8fafc);
    border-radius: var(--radius-lg, 12px);
}

.ecomap-filter-tab {
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    font-size: 14px;
    font-weight: 500;
    color: var(--g600, #475569);
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ecomap-filter-tab:hover {
    background: var(--g100, #f1f5f9);
    color: var(--g900, #0f172a);
}

.ecomap-filter-tab--active {
    background: white;
    color: var(--g900, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ghost filter tabs */
.ecomap-filter-tab--ghost {
    color: var(--g400, #94a3b8);
    pointer-events: none;
}

/* Directory Grid */
.ecomap-guides-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
}

@media (max-width: 1024px) {
    .ecomap-guides-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ecomap-guides-directory-grid {
        grid-template-columns: 1fr;
    }

    .ecomap-filter-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .ecomap-filter-tab {
        text-align: center;
    }
}

/* Guides Directory Pagination */
.ecomap-guides-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-top: var(--spacing-xl, 2rem);
    padding-top: var(--spacing-lg, 1.5rem);
}

.ecomap-guides-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-2, 0.5rem);
    border: 1px solid var(--g200, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: white;
    color: var(--g700, #334155);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ecomap-guides-pagination__btn:hover:not(:disabled) {
    border-color: var(--color-primary, #0073aa);
    color: var(--color-primary, #0073aa);
    background: var(--g50, #f8fafc);
}

.ecomap-guides-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ecomap-guides-pagination__btn--active {
    background: var(--color-primary, #0073aa);
    border-color: var(--color-primary, #0073aa);
    color: white;
}

.ecomap-guides-pagination__btn--active:hover {
    background: var(--color-primary-hover, #005a87);
    border-color: var(--color-primary-hover, #005a87);
    color: white;
}

.ecomap-guides-pagination__ellipsis {
    color: var(--g400, #94a3b8);
    padding: 0 var(--spacing-1, 0.25rem);
}

/* Hide pagination when only one page */
.ecomap-guides-pagination[data-total-pages="1"] {
    display: none;
}

/* Ghost card for directory */
.ecomap-ghost-preview--card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed var(--g300, #cbd5e1);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ecomap-ghost-preview--card:hover {
    border-color: var(--color-primary, #0073aa);
}

.ecomap-ghost-image--card {
    aspect-ratio: 16/10;
    background: var(--g100, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

/* Directory empty overlay */
.ecomap-guides-directory-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ecomap-guides-directory-content:hover .ecomap-guides-directory-empty-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Guides Empty State */
.ecomap-guides-empty-state {
    text-align: center;
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.02);
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg, 12px);
}

.ecomap-guides-empty-state__icon {
    margin-bottom: var(--spacing-4, 1rem);
    color: var(--g400, #94a3b8);
}

.ecomap-guides-empty-state__message {
    font-size: 15px;
    color: var(--g600, #475569);
    margin: 0 0 var(--spacing-4, 1rem) 0;
    max-width: 320px;
}

.ecomap-guides-empty-state__link {
    display: inline-block;
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--color-primary, #0073aa);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: background 0.15s ease;
}

.ecomap-guides-empty-state__link:hover {
    background: var(--color-primary-hover, #005a87);
    color: white;
}

/* Ensure guides sections with empty state have proper padding */
.ecomap-pattern-guides-featured > .ecomap-guides-empty-state,
.ecomap-pattern-guides-latest > .ecomap-guides-empty-state,
.ecomap-pattern-guides-list > .ecomap-guides-empty-state,
.ecomap-pattern-guides-directory > .ecomap-guides-empty-state {
    margin: var(--spacing-lg, 1.5rem) auto;
}

/* Guide Card - Directory Variant */
.ecomap-guide-card--directory {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, white);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

.ecomap-guide-card--directory:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ecomap-guide-card--directory .ecomap-guide-card__image {
    aspect-ratio: 16/10;
}

.ecomap-guide-card--directory .ecomap-guide-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ecomap-guide-card--directory .ecomap-guide-card__excerpt {
    flex: 1;
}

/* Edit overlay for guide cards (editor only) */
.ecomap-guide-card__edit-overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* Above stretched link (z-index: 1) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

/* Only show edit overlay on hover in editor context */
.ecomap-editing .ecomap-guide-card:hover .ecomap-guide-card__edit-overlay {
    opacity: 1;
    pointer-events: auto;
}

.ecomap-guide-card__edit-overlay span {
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    background: white;
    color: var(--g900, #0f172a);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm, 4px);
}

/* ====================================
   Latest Guides Section
   ==================================== */
.ecomap-pattern-guides-latest {
    background: var(--g50, #f8fafc);
}

.ecomap-guides-latest-wrapper,
.ecomap-guides-latest-container {
    max-width: 1200px;
    margin: 0 auto;
}

.ecomap-guides-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
}

@media (max-width: 900px) {
    .ecomap-guides-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ecomap-guides-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* Ghost preview for latest - compact variant */
.ecomap-ghost-preview--compact {
    display: flex;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    background: white;
    border: 2px dashed var(--g200, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ecomap-ghost-preview--compact:hover {
    border-color: var(--color-primary, #0073aa);
}

.ecomap-ghost-image--small {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: var(--g100, #f1f5f9);
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecomap-ghost-content--compact {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-xs, 0.25rem);
}

.ecomap-ghost-content--compact .ecomap-ghost-category {
    width: 60px;
    height: 10px;
    background: var(--g200, #e2e8f0);
    border-radius: 4px;
}

.ecomap-ghost-content--compact .ecomap-ghost-title--small {
    width: 80%;
    height: 14px;
    background: var(--g200, #e2e8f0);
    border-radius: 4px;
}

.ecomap-ghost-content--compact .ecomap-ghost-meta {
    width: 50px;
    height: 10px;
    background: var(--g100, #f1f5f9);
    border-radius: 4px;
}

/* Latest guides empty overlay */
.ecomap-guides-latest-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ecomap-guides-latest-content:hover .ecomap-guides-latest-empty-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Guide Card - Compact Variant (for latest) */
.ecomap-guide-card--compact {
    display: flex;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    background: var(--card-bg, white);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

.ecomap-guide-card--compact:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ecomap-guide-card--compact .ecomap-guide-card__image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.ecomap-guide-card--compact .ecomap-guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecomap-guide-card--compact .ecomap-guide-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* Compact card category pills */
.ecomap-guide-card--compact .ecomap-guide-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: calc(11px * 1.5 + 0.25rem);
    margin-bottom: 0; /* Container gap handles spacing */
}

.ecomap-guide-card--compact .ecomap-guide-card__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--card-tag-color, var(--color-primary, #0073aa));
    background-color: color-mix(in srgb, var(--card-tag-color, var(--color-primary, #0073aa)) 25%, transparent);
    padding: 0.125rem 0.375rem;
    border-radius: 0.1875rem;
    line-height: 1.5;
}

/* Reserve category space when no categories exist in compact cards */
.ecomap-guide-card--compact .ecomap-guide-card__content > .ecomap-guide-card__title:first-child {
    margin-top: calc(11px * 1.5 + 0.25rem + 4px); /* pill height + gap */
}

.ecomap-guide-card--compact .ecomap-guide-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--card-text, #0f172a);
}

.ecomap-guide-card--compact .ecomap-guide-card__title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-card--compact .ecomap-guide-card__title a:hover {
    color: var(--color-primary, #0073aa);
}

.ecomap-guide-card--compact .ecomap-guide-card__meta {
    font-size: 12px;
    color: var(--card-text-muted, #64748b);
}

/* ==========================================================================
   Guides List Pattern - Horizontal Card Layout
   ========================================================================== */

.ecomap-guides-list-container {
    max-width: 900px;
    margin: 0 auto;
}

.ecomap-guides-list-header {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--2-xl, 2.5rem);
}

.ecomap-guides-list-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--wp--preset--spacing--sm, 0.5rem) 0;
    letter-spacing: -0.02em;
}

.ecomap-guides-list-subtitle {
    font-size: 18px;
    color: var(--g500, #64748b);
    line-height: 1.5;
    margin: 0;
}

.ecomap-guides-list-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--md, 1rem);
}

/* Horizontal Guide Card */
.ecomap-guide-card--horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--wp--preset--spacing--lg, 1.5rem);
    padding: var(--wp--preset--spacing--md, 1rem);
    background: var(--card-bg, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--g200, #e2e8f0);
    transition: all 0.2s ease;
    position: relative;
}

.ecomap-guide-card--horizontal:hover {
    border-color: var(--g300, #cbd5e1);
    background: var(--card-bg, #f8fafc);
    filter: brightness(0.97);
}

.ecomap-guide-card--horizontal .ecomap-guide-card__image {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.ecomap-guide-card--horizontal .ecomap-guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ecomap-guide-card--horizontal:hover .ecomap-guide-card__image img {
    transform: scale(1.05);
}

.ecomap-guide-card--horizontal .ecomap-guide-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.ecomap-guide-card--horizontal .ecomap-guide-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem) 0;
}

.ecomap-guide-card--horizontal .ecomap-guide-card__excerpt {
    font-size: 14px;
    color: var(--card-text-muted, #475569);
    line-height: 1.5;
    margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ecomap-guide-card--horizontal .ecomap-guide-card__meta {
    font-size: 13px;
    color: var(--card-text-muted, #64748b);
}

/* Ghost placeholders for list pattern */
.ecomap-ghost-preview--horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--wp--preset--spacing--lg, 1.5rem);
    padding: var(--wp--preset--spacing--md, 1rem);
    background: var(--g50, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--g200, #e2e8f0);
}

.ecomap-ghost-image--horizontal {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    background: var(--g100, #f1f5f9);
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecomap-ghost-content--horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* Responsive: Stack on mobile */
@media (max-width: 640px) {
    .ecomap-guide-card--horizontal {
        flex-direction: column;
        gap: var(--wp--preset--spacing--md, 1rem);
    }

    .ecomap-guide-card--horizontal .ecomap-guide-card__image {
        width: 100%;
        height: 160px;
    }

    .ecomap-ghost-preview--horizontal {
        flex-direction: column;
    }

    .ecomap-ghost-image--horizontal {
        width: 100%;
        height: 160px;
    }
}

/* ==========================================================================
   Dynamic Guides Section Layouts
   Supports variable column counts and responsive breakpoints
   ========================================================================== */

/* Latest Guides - Dynamic Columns */
.ecomap-pattern-guides-latest {
    --guides-latest-columns: 3;
}

.ecomap-pattern-guides-latest .ecomap-guides-latest-grid {
    display: grid;
    grid-template-columns: repeat(var(--guides-latest-columns, 3), 1fr);
    gap: var(--spacing-lg, 1.5rem);
}

/* Directory Guides - Dynamic Columns */
.ecomap-pattern-guides-directory {
    --guides-columns: 3;
}

.ecomap-pattern-guides-directory .ecomap-guides-directory-grid {
    grid-template-columns: repeat(var(--guides-columns, 3), 1fr);
}

/* Directory Guides - Attribute-based Column Overrides */
.ecomap-pattern-guides-directory[data-columns="2"] {
    --guides-columns: 2;
}

.ecomap-pattern-guides-directory[data-columns="4"] {
    --guides-columns: 4;
}

/* Latest Guides - Attribute-based Column Overrides */
.ecomap-pattern-guides-latest[data-columns="2"] {
    --guides-latest-columns: 2;
}

.ecomap-pattern-guides-latest[data-columns="4"] {
    --guides-latest-columns: 4;
}

/* Latest Guides - Card Style Variants */
.ecomap-pattern-guides-latest[data-card-style="card"] .ecomap-guides-latest-grid {
    gap: var(--spacing-xl, 2rem);
}

/* Guides Directory - List View Mode */
.ecomap-pattern-guides-directory[data-view-mode="list"] .ecomap-guides-directory-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--md, 1rem);
    max-width: 900px;
    margin: 0 auto;
}

.ecomap-pattern-guides-directory[data-view-mode="list"] .ecomap-guides-directory-grid--list {
    display: flex;
    flex-direction: column;
}

/* Guides Directory - Hide filters when disabled */
.ecomap-pattern-guides-directory[data-show-filters="false"] .ecomap-filter-tabs {
    display: none;
}

/* Guides Directory - List View Display Options */
.ecomap-pattern-guides-directory[data-view-mode="list"][data-show-image="false"] .ecomap-guide-card__image {
    display: none;
}

.ecomap-pattern-guides-directory[data-view-mode="list"][data-show-excerpt="false"] .ecomap-guide-card__excerpt {
    display: none;
}

.ecomap-pattern-guides-directory[data-view-mode="list"][data-show-image="false"] .ecomap-guide-card--horizontal {
    padding-left: var(--wp--preset--spacing--lg, 1.5rem);
}

/* List Guides - Display Options (legacy pattern, keeping for backwards compat) */
.ecomap-pattern-guides-list[data-show-image="false"] .ecomap-guide-card__image {
    display: none;
}

.ecomap-pattern-guides-list[data-show-excerpt="false"] .ecomap-guide-card__excerpt {
    display: none;
}

.ecomap-pattern-guides-list[data-show-image="false"] .ecomap-guide-card--horizontal {
    padding-left: var(--wp--preset--spacing--lg, 1.5rem);
}

/* Responsive: 4 columns -> 2 columns on tablet */
@media (max-width: 1024px) {
    .ecomap-pattern-guides-latest[data-columns="4"] .ecomap-guides-latest-grid {
        --guides-latest-columns: 2;
    }

    .ecomap-pattern-guides-directory[data-columns="4"] .ecomap-guides-directory-grid {
        --guides-columns: 2;
    }
}

/* Responsive: 3 columns -> 2 columns on tablet */
@media (max-width: 900px) {
    .ecomap-pattern-guides-latest[data-columns="3"] .ecomap-guides-latest-grid,
    .ecomap-pattern-guides-latest[data-columns="4"] .ecomap-guides-latest-grid {
        --guides-latest-columns: 2;
    }

    .ecomap-pattern-guides-directory[data-columns="3"] .ecomap-guides-directory-grid,
    .ecomap-pattern-guides-directory[data-columns="4"] .ecomap-guides-directory-grid {
        --guides-columns: 2;
    }
}

/* Responsive: All to 1 column on mobile */
@media (max-width: 640px) {
    .ecomap-pattern-guides-latest .ecomap-guides-latest-grid {
        --guides-latest-columns: 1;
    }

    .ecomap-pattern-guides-directory .ecomap-guides-directory-grid {
        --guides-columns: 1;
    }
}

/* Featured Guides Container - Base Styles */
.ecomap-guides-featured-container {
    display: flex;
    gap: var(--spacing-xl, 2rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg, 1.5rem);
}

.ecomap-guide-card--featured-primary {
    flex: 1.5;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__image {
    width: 100%;
    aspect-ratio: 16/10;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__content {
    padding: var(--spacing-lg, 1.5rem);
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__title a:hover {
    text-decoration: underline;
}

.ecomap-guide-card--featured-primary .ecomap-guide-card__excerpt {
    color: var(--card-text-muted, #666);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.ecomap-guides-featured-secondary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

.ecomap-guide-card--featured-secondary {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md, 1rem);
    background: var(--card-bg, #fff);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__content {
    flex: 1;
    min-width: 0;
}

/* Featured secondary category pills */
.ecomap-guide-card--featured-secondary .ecomap-guide-card__categories {
    margin-bottom: 0.25rem;
}

/* Reserve category space when no categories exist in featured secondary cards */
.ecomap-guide-card--featured-secondary .ecomap-guide-card__content > .ecomap-guide-card__title:first-child {
    margin-top: calc(12px * 1.5 + 0.25rem + 0.25rem); /* pill height + margin */
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.25rem 0;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__title a {
    color: inherit;
    text-decoration: none;
}

.ecomap-guide-card--featured-secondary .ecomap-guide-card__title a:hover {
    text-decoration: underline;
}

/* Featured guides responsive */
@media (max-width: 900px) {
    .ecomap-guides-featured-container {
        flex-direction: column;
    }

    .ecomap-guide-card--featured-primary,
    .ecomap-guides-featured-secondary {
        flex: none;
        width: 100%;
    }

    .ecomap-guides-featured-secondary {
        flex-direction: column;
    }
}

/* Featured Guides - Dynamic Guide Count */
.ecomap-pattern-guides-featured[data-guide-count="2"] .ecomap-guides-featured-secondary {
    display: none;
}

.ecomap-pattern-guides-featured[data-guide-count="2"] .ecomap-guides-featured-container {
    display: block;
}

.ecomap-pattern-guides-featured[data-guide-count="2"] .ecomap-guide-card--featured-primary {
    max-width: 800px;
    margin: 0 auto;
}

/* Featured Guides - Layout Style Variants */
.ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guides-featured-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl, 2rem);
}

.ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guide-card--featured-primary {
    grid-column: auto;
}

.ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guides-featured-secondary {
    display: contents;
}

.ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guide-card--featured-secondary {
    flex-direction: column;
}

.ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guide-card--featured-secondary .ecomap-guide-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
}

@media (max-width: 768px) {
    .ecomap-pattern-guides-featured[data-layout-style="grid"] .ecomap-guides-featured-container {
        grid-template-columns: 1fr;
    }
}

/* Guide header */
.guide-header {
    margin-bottom: var(--spacing-8, 2rem);
    text-align: center;
}

.guide-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

.guide-subtitle-display {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.guide-meta {
    font-size: 14px;
    color: #888;
}

.guide-meta-separator {
    margin: 0 8px;
}

/* Featured image */
.guide-featured-image-container {
    margin: 0 0 var(--spacing-8, 2rem) 0;
    border-radius: 12px;
    overflow: hidden;
}

.guide-featured-image-display {
    width: 100%;
    height: auto;
    display: block;
}

.guide-featured-caption {
    font-size: 13px;
    color: #888;
    text-align: center;
    padding: 12px 16px;
    background: #f8f9fa;
}

/* Guide content */
.guide-content {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}

.guide-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin: var(--spacing-8, 2rem) 0 var(--spacing-4, 1rem) 0;
    letter-spacing: -0.02em;
}

.guide-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: var(--spacing-6, 1.5rem) 0 var(--spacing-3, 0.75rem) 0;
}

.guide-content p {
    margin: 0 0 var(--spacing-4, 1rem) 0;
}

.guide-content ul,
.guide-content ol {
    margin: 0 0 var(--spacing-4, 1rem) 0;
    padding-left: 24px;
}

.guide-content li {
    margin-bottom: 8px;
}

.guide-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: var(--spacing-4, 1rem) 0;
}

.guide-content blockquote {
    margin: var(--spacing-6, 1.5rem) 0;
    padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
    border-left: 4px solid var(--accent-color, #0073aa);
    background: #f8f9fa;
    font-style: italic;
}

.guide-content code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.9em;
    background: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
}

.guide-content pre {
    background: #1a1a1a;
    color: #f8f8f2;
    padding: var(--spacing-4, 1rem);
    border-radius: 8px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.5;
}

.guide-content pre code {
    background: none;
    padding: 0;
}

/* Guide footer */
.guide-footer {
    margin-top: var(--spacing-8, 2rem);
    padding-top: var(--spacing-6, 1.5rem);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.guide-categories,
.guide-tags {
    font-size: 14px;
    margin-bottom: var(--spacing-3, 0.75rem);
}

.guide-categories-label,
.guide-tags-label {
    color: #666;
    margin-right: 8px;
}

.guide-category-link,
.guide-tag-link {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f3f5;
    border-radius: 16px;
    color: #333;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 4px;
    transition: background 150ms ease;
}

.guide-category-link:hover,
.guide-tag-link:hover {
    background: #e9ecef;
}

/* ==========================================================================
   RELATED GUIDES SECTION
   ========================================================================== */

.related-guides {
    max-width: 900px;
    margin: var(--spacing-12, 3rem) auto 0;
    padding-top: var(--spacing-8, 2rem);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.related-guides-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 var(--spacing-6, 1.5rem) 0;
    text-align: center;
}

.related-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4, 1rem);
}

.related-guide-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 200ms ease;
}

.related-guide-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.related-guide-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.related-guide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-guide-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 12px 12px 4px;
}

.related-guide-title a {
    color: inherit;
    text-decoration: none;
}

.related-guide-title a:hover {
    color: var(--accent-color, #0073aa);
}

.related-guide-date {
    display: block;
    font-size: 12px;
    color: #888;
    padding: 0 12px 12px;
}

/* ==========================================================================
   GUIDE STANDALONE VIEW
   ========================================================================== */

.guide-standalone-header {
    border-bottom: 1px solid var(--g200, #e5e7eb);
    padding: var(--spacing-4, 1rem) 0;
    background: var(--color-background, #fff);
    position: sticky;
    top: 0;
    z-index: 100;
}

.guide-standalone-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4, 1rem);
}

.guide-standalone-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--g600, #666);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 150ms ease;
}

.guide-standalone-back:hover {
    color: var(--color-primary, #0073aa);
}

/* Dark mode support for standalone view */
.guide-standalone.ecomap-theme-dark .guide-standalone-header {
    background: var(--color-background, #1a1a1a);
    border-bottom-color: var(--g700, #333);
}

.guide-standalone.ecomap-theme-dark .guide-standalone-back {
    color: var(--g400, #9ca3af);
}

.guide-standalone.ecomap-theme-dark .guide-standalone-back:hover {
    color: var(--color-primary, #3b82f6);
}

/* ==========================================================================
   GUIDES RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
    .ecomap-guides-grid {
        --columns: 2 !important;
    }

    .ecomap-guides-featured {
        grid-template-columns: 1fr;
    }

    .ecomap-guide-featured-main {
        grid-row: auto;
    }

    .ecomap-guide-featured-secondary {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ecomap-guide-featured-secondary .ecomap-guide-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .guide-title {
        font-size: 28px;
    }

    .guide-content {
        font-size: 17px;
    }

    .related-guides-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3, 0.75rem);
    }
}

@media (max-width: 600px) {
    .ecomap-guides-grid {
        --columns: 1 !important;
    }

    .ecomap-guide-list-item {
        flex-direction: column;
    }

    .ecomap-guide-list-image {
        width: 100%;
        height: 160px;
    }

    .guide-title {
        font-size: 24px;
    }

    .guide-content {
        font-size: 16px;
    }

    .guide-content h2 {
        font-size: 20px;
    }
}

/* ==========================================================================
   WORDPRESS BLOCK CLASS DEFINITIONS
   Replaces wp-block-library.css (dequeued on frontend)
   ========================================================================== */

/* Heading Block */
.wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

/* Paragraph Block */
.wp-block-paragraph {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-normal, 1.6);
}

/* List Block */
.wp-block-list {
    margin: 0 0 var(--spacing-4) 0;
    padding-left: var(--spacing-6);
}

.wp-block-list li {
    margin-bottom: var(--spacing-2);
}

/* Quote Block - uses accent cascade for secondary support */
.wp-block-quote {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-4) var(--spacing-6);
    border-left: 4px solid var(--color-accent-medium);
    font-style: italic;
}

.wp-block-quote cite {
    display: block;
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-text-muted);
}

/* Separator Block */
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-8) auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

/* Spacer Block */
.wp-block-spacer {
    clear: both;
}

/* Details/Accordion Block */
.wp-block-details {
    margin-bottom: var(--spacing-3);
}

.wp-block-details summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold, 600);
    padding: var(--spacing-2) 0;
    list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

/* FAQ Accordion Options */
/* Expand behavior: single = close others when one opens (handled via JS) */
/* Icon styles for FAQ toggle indicator */
[data-icon-style="chevron"] .ecomap-faq-item summary::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    margin-left: auto;
}

[data-icon-style="chevron"] .ecomap-faq-item[open] summary::after {
    transform: rotate(-135deg);
}

[data-icon-style="plus"] .ecomap-faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    margin-left: auto;
    transition: transform 200ms ease;
}

[data-icon-style="plus"] .ecomap-faq-item[open] summary::after {
    content: '−';
}

.ecomap-faq-item summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Fix: Reset WordPress constrained layout styles on FAQ items
   WordPress applies is-layout-constrained classes to the first child of
   constrained containers, causing the first FAQ item to be offset.
   Also reset child constraints since is-layout-constrained > * applies max-width */
.ecomap-faq-item.is-layout-constrained,
.ecomap-faq-item.has-global-padding {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ecomap-faq-item.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* FAQ Categorized */
.ecomap-pattern-faq-categorized .ecomap-faq-category {
    margin-bottom: var(--wp--preset--spacing--2-xl, 2.5rem);
}

.ecomap-pattern-faq-categorized .ecomap-faq-category:last-child {
    margin-bottom: 0;
}

.ecomap-pattern-faq-categorized .ecomap-faq-category > h2 {
    margin-bottom: var(--wp--preset--spacing--lg, 1.5rem);
    font-size: 1.5rem;
}

/* Reset WordPress layout classes on categorized FAQ items */
.ecomap-faq-cat-item.is-layout-constrained,
.ecomap-faq-cat-item.has-global-padding {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ecomap-faq-cat-item.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Social Links Block */
.wp-block-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-block-social-link {
    display: block;
}

.wp-block-social-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}

.wp-block-social-link a:hover {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

.wp-block-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Embed Block */
.wp-block-embed {
    margin: var(--spacing-6) 0;
}

.wp-block-embed__wrapper {
    position: relative;
}

.wp-block-embed iframe {
    max-width: 100%;
}

/* ==========================================================================
   COVER BLOCK OVERLAYS
   Background dim utilities (0-100 in steps of 10)
   ========================================================================== */

.wp-block-cover__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 1;
}

/* Cover background inherits section background when overridden */
.ecomap-section.wp-block-cover > .wp-block-cover__background {
    background-color: var(--section-bg);
}

/* Default dim (when just has-background-dim is present) */
.has-background-dim {
    opacity: 0.5;
}

/* Specific opacity levels */
.has-background-dim-0 {
    opacity: 0;
}

.has-background-dim-10 {
    opacity: 0.1;
}

.has-background-dim-20 {
    opacity: 0.2;
}

.has-background-dim-30 {
    opacity: 0.3;
}

.has-background-dim-40 {
    opacity: 0.4;
}

.has-background-dim-50 {
    opacity: 0.5;
}

.has-background-dim-60 {
    opacity: 0.6;
}

.has-background-dim-70 {
    opacity: 0.7;
}

.has-background-dim-80 {
    opacity: 0.8;
}

.has-background-dim-90 {
    opacity: 0.9;
}

.has-background-dim-100 {
    opacity: 1;
}

/* ==========================================================================
   BLOCK STYLE VARIANTS
   Custom style variations (is-style-* classes)
   ========================================================================== */

/* Logos Only - Social Links */
.wp-block-social-links.is-style-logos-only .wp-block-social-link a {
    background: transparent;
    color: inherit;
    width: auto;
    height: auto;
    padding: var(--spacing-1);
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link a:hover {
    color: var(--color-primary);
    background: transparent;
}

/* Rounded Image */
.wp-block-image.is-style-rounded img {
    border-radius: var(--radius-full, 9999px);
}

/* Link Style Button */
.wp-block-button.is-style-link .wp-block-button__link {
    background: transparent;
    padding: 0 !important;
    color: var(--color-primary);
    text-decoration: underline;
    border: none;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* Link button without underline (toggled off) */
.wp-block-button.is-style-link .wp-block-button__link.no-underline {
    text-decoration: none;
}

.wp-block-button.is-style-link .wp-block-button__link.no-underline:hover {
    text-decoration: underline;
}

/* Interactive Card - uses CSS variables for customization */
.is-style-interactive-card {
    cursor: pointer;
    transition: transform var(--hover-transition, 200ms ease),
                box-shadow var(--hover-transition, 200ms ease);
}

.is-style-interactive-card:hover {
    transform: var(--card-hover-transform, none);
    box-shadow: var(--card-hover-shadow, var(--shadow-lg));
}

/* Arrow Animation */
.is-style-arrow {
    transition: transform 150ms ease;
}

.is-style-interactive-card:hover .is-style-arrow,
.is-style-arrow:hover {
    transform: translateX(4px);
}

/* Grayscale Hover (partner logos) */
.is-style-grayscale-hover img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 200ms ease, opacity 200ms ease;
}

.is-style-grayscale-hover img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
   LAYOUT UTILITIES
   WordPress alignment and layout classes
   ========================================================================== */

/* Block Alignment (missing ones) */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.alignright {
    float: right;
    margin-left: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Text Alignment */
.has-text-align-left {
    text-align: left;
}

.has-text-align-center {
    text-align: center;
}

.has-text-align-right {
    text-align: right;
}

/* Flex Layout */
.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* WordPress Layout Modifiers - Required because global-styles are dequeued */
.is-layout-flex.is-vertical {
    flex-direction: column;
}

.is-layout-flex.is-content-justification-center {
    justify-content: center;
    align-items: center;
}

.is-layout-flex.is-content-justification-left {
    justify-content: flex-start;
}

.is-layout-flex.is-content-justification-right {
    justify-content: flex-end;
}

.is-layout-flex.is-content-justification-space-between {
    justify-content: space-between;
}

/* Button Width Utilities */
.wp-block-button__width-25 {
    width: 25%;
}

.wp-block-button__width-50 {
    width: 50%;
}

.wp-block-button__width-75 {
    width: 75%;
}

.wp-block-button__width-100 {
    width: 100%;
}

.wp-block-button__width-100 .wp-block-button__link {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   PATTERN-SPECIFIC RESPONSIVE STYLES
   Mobile-first responsive fixes for specific patterns
   ========================================================================== */

/* Stats Inline - Stack on mobile (768px and below) */
@media (max-width: 768px) {

    .ecomap-stat-inline,
    .ecomap-pattern-stats-inline .wp-block-group[class*="is-layout-flex"] {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: var(--spacing-6);
    }
}

/* ==========================================================================
   FEATURE SPLIT SECTION
   Two-column layout with text content and stacked feature cards
   ========================================================================== */

/* Ensure section doesn't allow overflow */
.ecomap-pattern-feature-split {
    overflow: hidden;
}

/* Columns container - constrain to 1200px max width and center */
.ecomap-pattern-feature-split .wp-block-columns {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Each column - prevent overflow */
.ecomap-pattern-feature-split .wp-block-column {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Container for feature cards - vertical stack, full width */
.ecomap-feature-split-cards {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--sm, 0.75rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Feature cards - always fill container width, prevent overflow */
.ecomap-feature-split-card {
    width: 100%;
    max-width: 100%;
    display: flex;
    /* Stretch items vertically so icon container matches text height */
    align-items: stretch;
    /* Allow wrapping on small screens - override is-nowrap */
    flex-wrap: wrap !important;
    gap: var(--wp--preset--spacing--sm, 0.75rem);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    overflow: hidden;
}

/* Keep nowrap on larger screens for proper layout */
@media (min-width: 480px) {
    .ecomap-feature-split-card {
        flex-wrap: nowrap !important;
    }
}

/* Icon container styling - uses icon color for translucent background
   Does NOT use .ecomap-icon class so it won't be counted in section icon overrides */
.ecomap-feature-split-icon {
    /* Fixed width for consistent square-ish icon boxes across all cards */
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    /* Stretch to match sibling height, center icon within */
    align-self: stretch !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Translucent icon color background using color-mix (12% icon color, 88% transparent) */
    background-color: color-mix(in srgb, var(--color-accent-medium, #0073aa) 12%, transparent);
}

/* Override any WordPress layout classes on icon container */
.ecomap-feature-split-icon.is-layout-constrained,
.ecomap-feature-split-icon.is-layout-flow,
.ecomap-feature-split-icon.has-global-padding {
    max-width: 56px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Reset any child max-width constraints from is-layout-constrained > * */
.ecomap-feature-split-icon > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Icon paragraph styling */
.ecomap-feature-split-icon p {
    margin: 0;
}

/* Text content should flex to fill remaining space */
.ecomap-feature-split-card > .wp-block-group:not(.ecomap-feature-split-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Vertically center text when stretched */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ensure text wraps properly */
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
}

/* Reset WordPress layout constraints on text content */
.ecomap-feature-split-card > .wp-block-group:not(.ecomap-feature-split-icon).is-layout-flex,
.ecomap-feature-split-card > .wp-block-group:not(.ecomap-feature-split-icon).is-layout-constrained {
    max-width: none !important;
}

/* Reset child constraints from is-layout-constrained > * or is-layout-flex > * */
.ecomap-feature-split-card > .wp-block-group:not(.ecomap-feature-split-icon) > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Heading styling */
.ecomap-feature-split-card h4 {
    margin: 0;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Description styling */
.ecomap-feature-split-card .ecomap-text-muted {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Feature Split - Stack columns on mobile */
@media (max-width: 768px) {
    .ecomap-pattern-feature-split .wp-block-columns {
        flex-direction: column !important;
    }

    .ecomap-pattern-feature-split .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Center text content on mobile */
    .ecomap-pattern-feature-split .wp-block-column:first-child {
        text-align: center;
    }

    .ecomap-pattern-feature-split .wp-block-column:first-child .wp-block-buttons {
        justify-content: center;
    }

    /* Reduce icon padding on mobile */
    .ecomap-feature-split-icon {
        padding: var(--wp--preset--spacing--xs, 0.5rem) !important;
    }
}

/* Very small screens - icon and text stack vertically within card */
@media (max-width: 479px) {
    .ecomap-feature-split-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .ecomap-feature-split-icon {
        align-self: flex-start !important;
        flex: 0 0 auto !important;
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    .ecomap-feature-split-card > .wp-block-group:not(.ecomap-feature-split-icon) {
        width: 100%;
        max-width: 100% !important;
    }
}

/* Alternating Features - Center buttons and text on mobile */
@media (max-width: 768px) {

    .ecomap-pattern-features-alternating .wp-block-heading,
    .ecomap-pattern-features-alternating .wp-block-paragraph {
        text-align: center !important;
    }

    .ecomap-pattern-features-alternating .wp-block-buttons {
        justify-content: center !important;
    }
}

/* Logo Grid - Reduce padding and width on mobile */
@media (max-width: 600px) {
    .ecomap-logo-item {
        padding: var(--spacing-3) !important;
        width: 140px;
    }

    .ecomap-logo-grid-supporting .ecomap-logo-wrapper {
        width: 140px;
    }

    .ecomap-logo-premier {
        width: 200px;
    }
}

/* ==========================================================================
   BUTTON ACCESSIBILITY IMPROVEMENTS
   Touch targets, focus states, and disabled states
   ========================================================================== */

/* 44px fixed button height for consistency */
.wp-block-button__link {
    height: 44px;
    max-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Keyboard focus states - visible focus ring */
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Focus states for dark theme sections */
.ecomap-theme-dark .wp-block-button__link:focus-visible,
.ecomap-theme-image .wp-block-button__link:focus-visible {
    outline-color: var(--color-white);
}

/* Outline button focus states */
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    outline-color: var(--color-primary);
}

/* Disabled button styles */
.wp-block-button__link:disabled,
.wp-block-button__link.is-disabled,
.wp-block-button__link[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   NEW SECTION TYPE STYLES
   Progress bars, timeline, marquee, and other new patterns
   ========================================================================== */

/* Progress Bars - Stats Progress Bars Section */
.ecomap-pattern-stats-progress-bars .ecomap-progress-container {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg, 1.5rem);
    width: 100%;
}

.ecomap-pattern-stats-progress-bars .ecomap-progress-item {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs, 0.5rem);
    width: 100%;
}

.ecomap-pattern-stats-progress-bars .ecomap-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wp--preset--spacing--md, 1rem);
    width: 100%;
    /* Override WordPress group block padding - only vertical spacing, no horizontal */
    /* This ensures labels align with progress bar edges */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ecomap-pattern-stats-progress-bars .ecomap-progress-label {
    margin: 0;
    color: var(--section-text, var(--g700, #374151));
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.ecomap-pattern-stats-progress-bars .ecomap-progress-value {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    color: var(--progress-bar-value, var(--color-primary, #0073aa)) !important;
}

/* Hide percentage value when show-percentage is false */
.ecomap-pattern-stats-progress-bars[data-show-percentage="false"] .ecomap-progress-value {
    display: none;
}

/* Progress Track (background) - the gray bar behind the fill */
/* Uses CSS variable for Studio override, falls back to theme gray */
.ecomap-pattern-stats-progress-bars .ecomap-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--progress-bar-track, var(--g100, #eef0f3)) !important;
    display: block !important;
}

/* Ensure the track is visible even as a wp-block-group */
.ecomap-pattern-stats-progress-bars .ecomap-progress-track.wp-block-group {
    padding: 0 !important;
    min-height: 10px;
}

/* Square bar style */
.ecomap-pattern-stats-progress-bars[data-bar-style="square"] .ecomap-progress-track,
.ecomap-pattern-stats-progress-bars[data-bar-style="square"] .ecomap-progress-fill {
    border-radius: 3px;
}

/* Progress Fill (foreground) - the colored bar that fills based on percentage */
.ecomap-pattern-stats-progress-bars .ecomap-progress-fill {
    height: 10px;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Ensure fill uses the primary color from theme or explicit class */
.ecomap-pattern-stats-progress-bars .ecomap-progress-fill.wp-block-group {
    padding: 0 !important;
}

/* Use CSS variable for Studio override, falls back to WordPress primary */
.ecomap-pattern-stats-progress-bars .ecomap-progress-fill.has-primary-background-color,
.ecomap-pattern-stats-progress-bars .ecomap-progress-fill.ecomap-bg-primary {
    background-color: var(--progress-bar-fill, var(--color-primary, #3b82f6)) !important;
}

/* Subtle gradient overlay for depth */
.ecomap-pattern-stats-progress-bars .ecomap-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.08) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Dark theme adjustments - CSS variable takes precedence when set */
.ecomap-theme-dark.ecomap-pattern-stats-progress-bars .ecomap-progress-track,
[data-theme="dark"] .ecomap-pattern-stats-progress-bars .ecomap-progress-track {
    background-color: var(--progress-bar-track, var(--g800, #2d333d)) !important;
}

.ecomap-theme-dark.ecomap-pattern-stats-progress-bars .ecomap-progress-label,
[data-theme="dark"] .ecomap-pattern-stats-progress-bars .ecomap-progress-label {
    color: var(--section-text, var(--g200, #e5e7eb));
}

/* ==========================================================================
   Stats Timeline - Dynamic Grid with Connecting Lines
   ========================================================================== */

/* Timeline Grid - Dynamic Layout */
.ecomap-pattern-stats-timeline .ecomap-timeline-grid {
    position: relative;
    overflow: visible !important; /* Allow connector lines to extend outside grid bounds */
}

.ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--3-xl, 4rem) var(--wp--preset--spacing--md, 1rem) !important;
    align-items: stretch;
}

/* Timeline items - equal height, reset any inherited ::before from other patterns */
.ecomap-pattern-stats-timeline .ecomap-stats-timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    gap: 0;
    overflow: visible !important; /* Allow connector ::after to extend outside item bounds */
}

/* Reset any inherited ::before pseudo-element */
.ecomap-pattern-stats-timeline .ecomap-stats-timeline-item::before {
    content: none;
    display: none;
}

/* Card fills container height for equal rows */
.ecomap-pattern-stats-timeline .ecomap-timeline-card {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dynamic widths based on items-per-row
   Using flex: 0 0 with max-width prevents items from growing beyond their calculated size
   justify-content: center on parent ensures remainder rows stay centered */
.ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout[data-items-per-row="1"] > .wp-block-column {
    flex: 0 0 100%;
    max-width: 100%;
}

.ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout[data-items-per-row="2"] > .wp-block-column {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    max-width: calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
}

.ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout[data-items-per-row="3"] > .wp-block-column {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    max-width: calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
}

.ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout[data-items-per-row="4"] > .wp-block-column {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
    max-width: calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
}

/* ==========================================================================
   Horizontal Connecting Lines (between cards in same row)
   Uses ::after pseudo-element on each card except last in row
   ========================================================================== */

/* Base connector setup - hidden by default on mobile, shown on desktop */
.ecomap-pattern-stats-timeline .ecomap-stats-timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: var(--wp--preset--spacing--md, 1rem);
    height: 2px;
    background: var(--g200);
    z-index: 0;
    transform: translateY(-50%);
    display: none;
}

/* Desktop: Show horizontal connectors (768px+) */
@media (min-width: 768px) {
    /* Show connector on items that JS has marked with data-has-connector attribute
       JS calculates actual items per row dynamically, handling all breakpoints */
    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item[data-has-connector="true"]::after {
        display: block;
    }

    /* Fallback: If JS hasn't run yet, use :has() selector with nth-child rules
       These will be overridden once JS sets data-has-connector attributes */
    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item:has(~ .ecomap-stats-timeline-item)::after {
        display: block;
    }

    /* Fallback nth-child rules for before JS runs */
    /* 4 per row: hide on 4th, 8th, 12th items */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid[data-items-per-row="4"]:not([data-effective-items-per-row]) .ecomap-stats-timeline-item:nth-child(4n)::after {
        display: none;
    }

    /* 3 per row: hide on 3rd, 6th, 9th items */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid[data-items-per-row="3"]:not([data-effective-items-per-row]) .ecomap-stats-timeline-item:nth-child(3n)::after {
        display: none;
    }

    /* 2 per row: hide on 2nd, 4th, 6th items (even positions) */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid[data-items-per-row="2"]:not([data-effective-items-per-row]) .ecomap-stats-timeline-item:nth-child(even)::after {
        display: none;
    }

    /* 1 per row: hide all connectors */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid[data-items-per-row="1"]:not([data-effective-items-per-row]) .ecomap-stats-timeline-item::after {
        display: none;
    }

    /* Once JS has run (data-effective-items-per-row is set), only show connectors where JS says to */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid[data-effective-items-per-row] .ecomap-stats-timeline-item:not([data-has-connector="true"])::after {
        display: none;
    }
}

/* ==========================================================================
   Vertical Connecting Lines (between rows)
   Connects last card of row to first card of next row
   Positioned dynamically by JavaScript
   ========================================================================== */

/* Three-part row connector container - injected by JS
   Creates an L-shaped connector from last item of row to first item of next row
   Structure: horizontal line (right from last item) → vertical line (down) → horizontal line (left to first item next row)
*/
.ecomap-timeline-row-connector {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.ecomap-timeline-row-connector-horizontal {
    position: absolute;
    height: 2px;
    background: var(--g200);
}

.ecomap-timeline-row-connector-vertical {
    position: absolute;
    width: 2px;
    background: var(--g200);
}

/* ==========================================================================
   Mobile ONLY: Vertical stacking with vertical line between cards
   ========================================================================== */

@media (max-width: 767px) {
    /* Single column on mobile - force gap to match connector height */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid,
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout {
        gap: 1.5rem !important;
    }

    .ecomap-pattern-stats-timeline .ecomap-timeline-grid > .wp-block-column,
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout > .wp-block-column {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Hide horizontal connectors and JS row connectors on mobile */
    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item::after {
        display: none !important;
    }

    .ecomap-pattern-stats-timeline .ecomap-timeline-row-connector {
        display: none !important;
    }

    /* Vertical connector between stacked items on mobile - spans full gap (1.5rem) */
    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item:has(~ .ecomap-stats-timeline-item)::before {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 2px;
        height: 1.5rem;
        background: var(--g200);
        z-index: 0;
        transform: translateX(-50%);
    }
}

/* Small tablet (768-900px): 1 per row - cards too cramped otherwise */
@media (min-width: 768px) and (max-width: 900px) {
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout {
        gap: 1.5rem !important;
    }

    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout > .wp-block-column {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Use vertical connectors like mobile */
    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item::after {
        display: none !important;
    }

    .ecomap-pattern-stats-timeline .ecomap-timeline-row-connector {
        display: none !important;
    }

    .ecomap-pattern-stats-timeline .ecomap-stats-timeline-item:has(~ .ecomap-stats-timeline-item)::before {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 2px;
        height: 1.5rem;
        background: var(--g200);
        z-index: 0;
        transform: translateX(-50%);
    }
}

/* Larger tablet (901-1024px): Max 2 per row */
@media (min-width: 901px) and (max-width: 1024px) {
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout {
        gap: var(--wp--preset--spacing--2-xl, 2.5rem) var(--wp--preset--spacing--md, 1rem) !important;
    }

    /* Force max 2 per row - min-width prevents 3+ fitting */
    .ecomap-pattern-stats-timeline .ecomap-timeline-grid.ecomap-dynamic-layout > .wp-block-column {
        flex: 1 1 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2) !important;
        min-width: calc(50% - var(--wp--preset--spacing--md, 1rem) / 2) !important;
    }
}

/* Trust Badges */
.ecomap-trust-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--md, 1rem);
    justify-content: center;
}

/* Dynamic layout mode - center remainder items in last row */
.ecomap-trust-badges-grid.ecomap-dynamic-layout {
    justify-content: center;
    align-items: stretch;
}

/* Base badge sizing - max 5 per row on desktop */
.ecomap-trust-badges-grid .ecomap-trust-badge {
    flex: 0 0 calc(20% - var(--wp--preset--spacing--md, 1rem) * 4 / 5);
    min-width: 100px;
}

/* Dynamic widths based on items-per-row (set by JS) */
.ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="1"] .ecomap-trust-badge {
    flex: 0 0 100%;
    max-width: 200px;
}

.ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="2"] .ecomap-trust-badge {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
}

.ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-trust-badge {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
}

.ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-trust-badge {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
}

.ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="5"] .ecomap-trust-badge {
    flex: 0 0 calc(20% - var(--wp--preset--spacing--md, 1rem) * 4 / 5);
}

/* Tablet: Max 3 per row */
@media (max-width: 1024px) {
    .ecomap-trust-badges-grid .ecomap-trust-badge {
        flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    }

    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="5"] .ecomap-trust-badge {
        flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    }
}

/* Mobile: Max 2 per row */
@media (max-width: 768px) {
    .ecomap-trust-badges-grid .ecomap-trust-badge {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    }

    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="5"] .ecomap-trust-badge {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    }
}

/* Small Mobile: Single column */
@media (max-width: 480px) {
    .ecomap-trust-badges-grid .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="1"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="2"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-trust-badge,
    .ecomap-trust-badges-grid.ecomap-dynamic-layout[data-items-per-row="5"] .ecomap-trust-badge {
        flex: 0 0 100%;
    }
}

.ecomap-trust-badge {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    align-items: center;
    text-align: center;
}

.ecomap-trust-badge > * {
    width: 100%;
}

.ecomap-trust-badge:hover {
    box-shadow: var(--shadow-sm);
}

/* Keyword Square Grid */
.ecomap-keyword-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--md, 1rem);
    justify-content: center;
}

.ecomap-keyword-card {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
    min-width: 150px;
    max-width: 200px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.ecomap-keyword-card:hover {
    box-shadow: var(--shadow-md);
}

/* Keyword Card Override Support - use card variables for proper isolation */
/* Background: --card-bg takes precedence, falls back to primary color */
.ecomap-keyword-card.has-primary-background-color,
.ecomap-keyword-card.ecomap-bg-primary {
    background-color: var(--card-bg, var(--color-primary)) !important;
}

/* Text inside keyword cards uses --card-text for override support */
.ecomap-keyword-card .has-white-color,
.ecomap-keyword-card .ecomap-text-contrast {
    color: var(--card-text, #ffffff) !important;
}

/* Icons inside keyword cards use --card-icon-color for independent override support */
/* Falls back to --card-text so icons match text by default */
.ecomap-keyword-card [class*="fa-"],
.ecomap-keyword-card [class*="ri-"],
.ecomap-keyword-card .ecomap-icon {
    color: var(--card-icon-color, var(--card-text, #ffffff)) !important;
}

/* Responsive: 3 per row on tablet */
@media (max-width: 1024px) {
    .ecomap-keyword-card {
        flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    }
}

/* Responsive: 2 per row on mobile */
@media (max-width: 600px) {
    .ecomap-keyword-card {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    }
}

/* Keyword Grid Dynamic Layout - Even Row Distribution */
.ecomap-keyword-grid.ecomap-dynamic-layout {
    justify-content: center; /* Center remainder items in last row */
    align-items: stretch; /* Equal height cards per row */
}

/* Override WordPress auto margins and enable equal height */
.ecomap-keyword-grid.ecomap-dynamic-layout .ecomap-keyword-card {
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: unset; /* Remove fixed square ratio to allow height stretching */
    min-height: 120px; /* Maintain minimum visual size */
    height: auto; /* Allow height to stretch with row */
    min-width: 0; /* Override base min-width to ensure exact column counts */
}

.ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="1"] .ecomap-keyword-card {
    flex: 0 0 100%;
    max-width: 200px;
}

.ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="2"] .ecomap-keyword-card {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    width: calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    max-width: none;
}

.ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-keyword-card {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    width: calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    max-width: none;
}

.ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-keyword-card {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
    width: calc(25% - var(--wp--preset--spacing--md, 1rem) * 3 / 4);
    max-width: none;
}

/* Tablet: Max 3 per row for keyword cards */
@media (max-width: 1024px) {
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-keyword-card {
        flex: 0 0 calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
        width: calc(33.333% - var(--wp--preset--spacing--md, 1rem) * 2 / 3);
    }
}

/* Mobile: Max 2 per row */
@media (max-width: 768px) {
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-keyword-card,
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-keyword-card {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
        width: calc(50% - var(--wp--preset--spacing--md, 1rem) / 2);
    }
}

/* Small Mobile: Single column, full width */
@media (max-width: 480px) {
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="1"] .ecomap-keyword-card,
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="2"] .ecomap-keyword-card,
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="3"] .ecomap-keyword-card,
    .ecomap-keyword-grid.ecomap-dynamic-layout[data-items-per-row="4"] .ecomap-keyword-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
    }
}

/* Card link wrapper - ensures <a> wrapper doesn't affect card layout */
a.ecomap-card-link-wrapper {
    display: contents;
    text-decoration: none;
    color: inherit;
}

/* Fallback for browsers that don't support display: contents */
@supports not (display: contents) {
    a.ecomap-card-link-wrapper {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    /* Ensure keyword cards in link wrappers maintain their flex sizing */
    a.ecomap-card-link-wrapper > .ecomap-keyword-card {
        width: 100%;
    }
}

/* Buttons inside linked cards are decorative - no hover state */
a.ecomap-card-link-wrapper .wp-block-button__link {
    pointer-events: none;
}

a.ecomap-card-link-wrapper .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
}

/* Features Alternating - Zigzag Layout */
.ecomap-alternating-container {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--4-xl, 4rem);
}

.ecomap-alternating-feature {
    display: flex;
    flex-wrap: wrap;
}

/* Alternate image position on even items */
.ecomap-alternating-container[data-alternate-layout="true"] .ecomap-alternating-feature:nth-child(even),
.ecomap-alternating-container:not([data-alternate-layout]) .ecomap-alternating-feature:nth-child(even) {
    flex-direction: row-reverse;
}

/* Per-item flip control via data-flipped attribute
   This allows manual flipping independent of the auto-alternate nth-child rule.
   Logic: XOR behavior - flipped odd items become reversed, flipped even items become normal */

/* Odd items with data-flipped="true" get reversed */
.ecomap-alternating-container .ecomap-alternating-feature:nth-child(odd)[data-flipped="true"] {
    flex-direction: row-reverse;
}

/* Even items with data-flipped="true" return to normal order (overriding the auto-alternate) */
.ecomap-alternating-container[data-alternate-layout="true"] .ecomap-alternating-feature:nth-child(even)[data-flipped="true"],
.ecomap-alternating-container:not([data-alternate-layout]) .ecomap-alternating-feature:nth-child(even)[data-flipped="true"] {
    flex-direction: row;
}

/* Mobile: Stack vertically with consistent order */
@media (max-width: 782px) {

    .ecomap-alternating-feature,
    .ecomap-alternating-container[data-alternate-layout="true"] .ecomap-alternating-feature:nth-child(even),
    .ecomap-alternating-container:not([data-alternate-layout]) .ecomap-alternating-feature:nth-child(even),
    .ecomap-alternating-feature[data-flipped="true"] {
        flex-direction: column;
    }

    .ecomap-alternating-feature .ecomap-feature-content,
    .ecomap-alternating-feature .ecomap-feature-media {
        flex-basis: 100% !important;
    }
}

/* Social Links - Theme aware */
.wp-block-social-links.is-style-logos-only .wp-social-link svg {
    fill: currentColor;
}

.ecomap-theme-dark .wp-block-social-links .wp-social-link,
.ecomap-theme-image .wp-block-social-links .wp-social-link,
.ecomap-theme-primary .wp-block-social-links .wp-social-link {
    color: rgba(255, 255, 255, 0.7);
}

.ecomap-theme-dark .wp-block-social-links .wp-social-link:hover,
.ecomap-theme-image .wp-block-social-links .wp-social-link:hover,
.ecomap-theme-primary .wp-block-social-links .wp-social-link:hover {
    color: #fff;
}

/* ============================================
   TABBED CONTENT SECTION STYLES
   ============================================ */

.ecomap-tabs-container {
    max-width: 100%;
}

.ecomap-tabs-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-8, 2rem);
    flex-wrap: wrap;
}

.ecomap-tab-btn {
    position: relative;
    padding: var(--spacing-3, 0.75rem) var(--spacing-6, 1.5rem);
    /* Use CSS variables for border/color so sendStyleOverrides() can control tab styling */
    border: 2px solid var(--tab-inactive-border, var(--g200, #e5e7eb));
    background: transparent;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--tab-inactive-text, var(--section-card-text-muted, var(--color-text-muted)));
    cursor: pointer;
    transition: all 0.2s ease;
}

.ecomap-tab-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ecomap-tab-btn.is-active {
    /* Use CSS variables for active state so sendStyleOverrides() can control tab styling */
    background: var(--tab-active-fill, var(--color-primary));
    border-color: var(--tab-active-fill, var(--color-primary));
    color: var(--tab-active-text, var(--color-primary-contrast, #fff));
}

/* Tab button hover hint - "Double-click to edit" */
.ecomap-tab-btn::after {
    content: 'Double-click to edit';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    background: var(--g800, #1f2937);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 100;
}

.ecomap-tab-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Hide hint when editing or active */
.ecomap-tab-btn.is-editing::after,
.ecomap-tab-btn.is-active:hover::after {
    opacity: 0;
    visibility: hidden;
}

/* Tab button editing state */
.ecomap-tab-btn.is-editing {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    cursor: text;
    background: #fff;
    color: var(--g900, #111827);
}

.ecomap-tab-panels {
    position: relative;
}

.ecomap-tab-panel {
    display: none;
}

.ecomap-tab-panel.is-active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Grid - Flexbox for centered remainder items in last row */
.ecomap-tab-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6, 1.5rem);
    justify-content: center; /* Center remainder items in last row */
    align-items: stretch; /* Cards same height per row */
}

/* Default: 3 per row - cards get fixed width and equal height per row */
.ecomap-tab-grid > .ecomap-tab-card,
.ecomap-tab-grid > .ecomap-card-link-wrapper {
    flex: 0 1 calc(33.333% - var(--spacing-6, 1.5rem) * 2 / 3);
    /* Force stretch to match tallest card in row - override height: 100% */
    height: auto !important;
    align-self: stretch;
}

/* 2 cards: 2 per row */
.ecomap-tab-grid[data-items-per-row="2"] > .ecomap-tab-card,
.ecomap-tab-grid[data-items-per-row="2"] > .ecomap-card-link-wrapper {
    flex: 0 1 calc(50% - var(--spacing-6, 1.5rem) / 2);
}

/* 3 cards: 3 per row (explicit for clarity) */
.ecomap-tab-grid[data-items-per-row="3"] > .ecomap-tab-card,
.ecomap-tab-grid[data-items-per-row="3"] > .ecomap-card-link-wrapper {
    flex: 0 1 calc(33.333% - var(--spacing-6, 1.5rem) * 2 / 3);
}

/* 4+ items: 2 per row for 2x2 or 3x2 layout */
.ecomap-tab-grid[data-items-per-row="4"] > .ecomap-tab-card,
.ecomap-tab-grid[data-items-per-row="4"] > .ecomap-card-link-wrapper,
.ecomap-tab-grid[data-items-per-row="5"] > .ecomap-tab-card,
.ecomap-tab-grid[data-items-per-row="5"] > .ecomap-card-link-wrapper {
    flex: 0 1 calc(50% - var(--spacing-6, 1.5rem) / 2);
}

/* Link wrapper needs to stretch its child to full height */
.ecomap-tab-grid > .ecomap-card-link-wrapper {
    display: flex;
}

.ecomap-tab-grid > .ecomap-card-link-wrapper > .ecomap-tab-card {
    flex: 1;
    width: 100%;
}

/* Tab Card (new structure) */
.ecomap-tab-card {
    background: var(--section-card-bg, var(--g050, #f9fafb));
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Top-align content so number circles line up */
    height: 100%; /* Fill grid cell height */
    box-sizing: border-box;
}

/* Reset WordPress constrained layout on tab cards */
.ecomap-tab-card.is-layout-constrained,
.ecomap-tab-card.has-global-padding {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--spacing-6, 1.5rem);
    padding-right: var(--spacing-6, 1.5rem);
}

/* Reset child constraints from is-layout-constrained > * */
.ecomap-tab-card.is-layout-constrained > *,
.ecomap-tab-card > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    flex-shrink: 0; /* Prevent content from shrinking */
}

/* Legacy tab-item support */
.ecomap-tab-item {
    background: var(--section-card-bg, var(--g050, #f9fafb));
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-6, 1.5rem);
    text-align: center;
}

/* Step number badge (nodes in tab cards) */
/* Use CSS variables so sendStyleOverrides() can control node styling */
.ecomap-tab-number,
p.ecomap-tab-number,
.ecomap-tab-card p.ecomap-tab-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--tab-node-bg, var(--section-card-accent, var(--color-primary)));
    color: var(--tab-node-text, var(--section-card-accent-contrast, #fff));
    border-radius: 50%;
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 1.125rem);
    margin: 0 0 var(--spacing-6, 1.5rem) 0; /* Reset all margins, add bottom spacing */
    flex-shrink: 0; /* Prevent circle from shrinking */
}

/* Light accent colors need dark text */
.ecomap-tab-number[data-accent-light="true"] {
    color: var(--g900, #111827);
}

/* Tab card icon (alternative to numbered nodes) */
.ecomap-tab-icon,
p.ecomap-tab-icon,
.ecomap-tab-card p.ecomap-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--tab-node-bg, var(--section-card-accent, var(--color-primary)));
    color: var(--tab-node-text, var(--section-card-accent-contrast, #fff));
    border-radius: 50%;
    font-size: var(--font-size-lg, 1.125rem);
    margin: 0 0 var(--spacing-6, 1.5rem) 0;
    flex-shrink: 0;
}

.ecomap-tab-icon .ecomap-icon {
    color: inherit !important;
    font-size: inherit;
}

/* Node style visibility - numbers mode (default) for tab section */
.ecomap-pattern-content-tab-section[data-node-style="numbers"] .ecomap-tab-number,
.ecomap-pattern-content-tab-section:not([data-node-style]) .ecomap-tab-number {
    display: inline-flex;
}

.ecomap-pattern-content-tab-section[data-node-style="numbers"] .ecomap-tab-icon,
.ecomap-pattern-content-tab-section:not([data-node-style]) .ecomap-tab-icon {
    display: none;
}

/* Node style visibility - icons mode for tab section */
.ecomap-pattern-content-tab-section[data-node-style="icons"] .ecomap-tab-number {
    display: none;
}

.ecomap-pattern-content-tab-section[data-node-style="icons"] .ecomap-tab-icon {
    display: inline-flex;
}

/* Node style visibility - none mode for tab section */
.ecomap-pattern-content-tab-section[data-node-style="none"] .ecomap-tab-number,
.ecomap-pattern-content-tab-section[data-node-style="none"] .ecomap-tab-icon {
    display: none;
}

/* Tab card title */
.ecomap-tab-card h4,
.ecomap-tab-card-title,
.ecomap-tab-item h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    margin: 0 0 var(--spacing-2, 0.5rem);
    color: var(--section-card-text, var(--color-text));
}

/* Tab card description */
.ecomap-tab-card p,
.ecomap-tab-card-description,
.ecomap-tab-item p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--section-card-text-muted, var(--color-text-muted));
    margin: 0;
}

/* Card Link Enabled State */
[data-card-link-enabled="true"] .ecomap-tab-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-card-link-enabled="true"] .ecomap-tab-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-card-link-enabled="true"] .ecomap-tab-card.has-link::after {
    content: '\2192';
    position: absolute;
    bottom: var(--spacing-4, 1rem);
    right: var(--spacing-4, 1rem);
    color: var(--color-primary);
    font-size: var(--font-size-lg, 1.125rem);
}

/* Responsive: Tablet - 2 per row */
@media (max-width: 1024px) {
    .ecomap-tab-grid > .ecomap-tab-card,
    .ecomap-tab-grid > .ecomap-card-link-wrapper {
        flex: 0 1 calc(50% - var(--spacing-6, 1.5rem) / 2);
        height: auto !important;
        align-self: stretch;
    }
}

/* Responsive: Mobile - 1 per row */
@media (max-width: 768px) {
    .ecomap-tab-grid > .ecomap-tab-card,
    .ecomap-tab-grid > .ecomap-card-link-wrapper {
        flex: 0 1 100%;
        height: auto !important;
        align-self: stretch;
    }

    .ecomap-tabs-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .ecomap-tab-btn {
        text-align: center;
    }
}

/* Dark theme tab section adjustments */
/* Use CSS variables so sendStyleOverrides() can override inactive tab styling */
/* IMPORTANT: Use :not(.is-active) to avoid overriding active tab styles */
.ecomap-theme-dark .ecomap-tab-btn:not(.is-active),
.ecomap-theme-image .ecomap-tab-btn:not(.is-active) {
    border-color: var(--tab-inactive-border, rgba(255, 255, 255, 0.3));
    color: var(--tab-inactive-text, rgba(255, 255, 255, 0.7));
}

.ecomap-theme-dark .ecomap-tab-btn:not(.is-active):hover,
.ecomap-theme-image .ecomap-tab-btn:not(.is-active):hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.ecomap-theme-dark .ecomap-tab-card,
.ecomap-theme-image .ecomap-tab-card,
.ecomap-theme-dark .ecomap-tab-item,
.ecomap-theme-image .ecomap-tab-item {
    /* Use CSS variable so sendStyleOverrides() can preserve original card bg when section bg is overridden */
    background: var(--section-card-bg, rgba(255, 255, 255, 0.08));
}

.ecomap-theme-dark .ecomap-tab-card h4,
.ecomap-theme-image .ecomap-tab-card h4,
.ecomap-theme-dark .ecomap-tab-item h4,
.ecomap-theme-image .ecomap-tab-item h4 {
    /* Use CSS variable so sendStyleOverrides() can preserve original card text when section bg is overridden */
    color: var(--section-card-text, #fff);
}

.ecomap-theme-dark .ecomap-tab-card p:not(.ecomap-tab-number):not(.ecomap-tab-icon),
.ecomap-theme-image .ecomap-tab-card p:not(.ecomap-tab-number):not(.ecomap-tab-icon),
.ecomap-theme-dark .ecomap-tab-item p:not(.ecomap-tab-number):not(.ecomap-tab-icon),
.ecomap-theme-image .ecomap-tab-item p:not(.ecomap-tab-number):not(.ecomap-tab-icon) {
    /* Use CSS variable so sendStyleOverrides() can preserve original card text when section bg is overridden */
    /* IMPORTANT: Exclude .ecomap-tab-number and .ecomap-tab-icon which have own color logic via --tab-node-text */
    color: var(--section-card-text-muted, rgba(255, 255, 255, 0.7));
}

.ecomap-theme-dark [data-card-link-enabled="true"] .ecomap-tab-card:hover,
.ecomap-theme-image [data-card-link-enabled="true"] .ecomap-tab-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ecomap-theme-dark [data-card-link-enabled="true"] .ecomap-tab-card.has-link::after,
.ecomap-theme-image [data-card-link-enabled="true"] .ecomap-tab-card.has-link::after {
    color: var(--color-primary-light);
}

/* ============================================
   NEWSLETTER FORM STYLES
   ============================================ */

.ecomap-newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    max-width: 500px;
    width: 100%;
}

.ecomap-newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: 1rem;
    font-family: var(--font-body);
}

.ecomap-newsletter-input:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.ecomap-newsletter-btn {
    background: var(--color-contrast, #fff);
    color: var(--color-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ecomap-newsletter-btn:hover {
    opacity: 0.9;
}

/* Placeholder contrast (WCAG 1.4.3) */
.ecomap-newsletter-input::placeholder,
.ecomap-footer-newsletter__input::placeholder {
    color: #64748b;
    opacity: 1;
}

/* Dark theme adjustments - invert colors */
.ecomap-theme-light .ecomap-newsletter-input {
    background: var(--g100, #f3f4f6);
    color: var(--color-text);
    border: 1px solid #94a3b8;
}

.ecomap-theme-light .ecomap-newsletter-btn {
    background: var(--color-primary);
    color: var(--color-primary-contrast, #fff);
}

/* Form accessibility: visible labels, error states */
.ecomap-newsletter-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.ecomap-newsletter-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ecomap-newsletter-field .ecomap-newsletter-input {
    flex: none;
}

.ecomap-form-error {
    font-size: 0.8125rem;
    color: #dc2626;
    line-height: 1.3;
}

.ecomap-newsletter-input[aria-invalid="true"],
.ecomap-input-field[aria-invalid="true"] {
    border-color: #dc2626;
    outline-color: #dc2626;
}

.ecomap-newsletter-input[aria-invalid="true"]:focus,
.ecomap-input-field[aria-invalid="true"]:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* Numbered Steps */
.ecomap-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    /* Use CSS variable if set, otherwise let WordPress classes handle it */
    background-color: var(--step-node-bg, var(--wp--preset--color--primary, var(--color-primary)));
}

.ecomap-step-number,
.ecomap-step-number p,
.ecomap-step-number [data-ecomap-step-number] {
    color: var(--step-node-text, var(--color-primary-contrast, #ffffff)) !important;
}

/* Video Feature placeholder */
.ecomap-video-placeholder {
    background: var(--g100);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ecomap-video-placeholder:hover {
    background: var(--g200);
}

/* Video placeholder icon and text - constant dark gray, not influenced by overrides */
.ecomap-video-placeholder .ecomap-icon {
    color: #64748b !important;
}

.ecomap-video-placeholder .ecomap-text-2 {
    color: #64748b !important;
}

/* Video feature body text - nearly full opacity, just slightly softer than headings */
.ecomap-pattern-content-video-feature > .wp-block-columns .ecomap-text-2.ecomap-text-md {
    color: rgba(30, 41, 59, 0.9);
}

/* Quote highlight - quotation mark styling */
.ecomap-pattern-content-quote-highlight blockquote,
.ecomap-pattern-testimonials-single-featured blockquote {
    border: none;
    margin: 0;
    padding: 0;
}

/* Star ratings for testimonials-single-featured (Font Awesome icons) */
.ecomap-pattern-testimonials-single-featured .fa-star {
    color: var(--star-rating-color, var(--color-rating, #fbbf24));
}

/* Hide stars only when explicitly set to false (default: true for this pattern) */
.ecomap-pattern-testimonials-single-featured[data-show-ratings="false"] .ecomap-testimonial-featured .fa-star {
    display: none;
}

/* ==========================================================================
   Card Grid Images - Image fills top of card
   ========================================================================== */

.ecomap-pattern-card-grid-images .wp-block-column > .wp-block-image {
    margin: 0;
}

.ecomap-pattern-card-grid-images .wp-block-column > .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Card border adapts to section background - gray on light, white on dark */
.ecomap-pattern-card-grid-images .wp-block-column.ecomap-repeatable-item {
    border-style: solid;
    border-color: var(--grid-card-border, rgba(0, 0, 0, 0.12));
}

.ecomap-theme-dark .ecomap-pattern-card-grid-images .wp-block-column.ecomap-repeatable-item,
.ecomap-theme-dark-muted .ecomap-pattern-card-grid-images .wp-block-column.ecomap-repeatable-item,
.ecomap-theme-dark-brand .ecomap-pattern-card-grid-images .wp-block-column.ecomap-repeatable-item,
.ecomap-theme-image .ecomap-pattern-card-grid-images .wp-block-column.ecomap-repeatable-item {
    border-color: var(--grid-card-border, rgba(255, 255, 255, 0.2));
}

/* ==========================================================================
   Card Full - Full Width Image Cards
   The image fills the full width of the card and uses object-fit: cover
   to crop/zoom the image to fill the container.
   ========================================================================== */

/* Remove default margin from figure element so image touches card top */
.ecomap-pattern-card-full .ecomap-card .wp-block-image,
.ecomap-pattern-card-full .ecomap-card > .wp-block-image,
.ecomap-pattern-card-full .ecomap-card figure.wp-block-image {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure image fills width */
.ecomap-pattern-card-full .ecomap-card .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Override inline styles on figure to remove bottom corner radius */
.ecomap-pattern-card-full .ecomap-card figure.wp-block-image {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Constrained layout fix - ensure first child (image) has no top margin */
.ecomap-pattern-card-full .ecomap-card > *:first-child {
    margin-top: 0 !important;
}

/* Responsive: Add horizontal padding on smaller viewports */
@media (max-width: 768px) {
    .ecomap-pattern-card-full {
        padding-left: var(--spacing-4, 1rem);
        padding-right: var(--spacing-4, 1rem);
    }
}

/* ==========================================================================
   Card Resource - Full Width Image Cards
   The image fills the full width of the card and uses object-fit: cover
   to crop/zoom the image to fill the container.
   ========================================================================== */

/* Remove default margin from figure element so image touches card top */
.ecomap-pattern-card-resource .ecomap-card .wp-block-image,
.ecomap-pattern-card-resource .ecomap-card > .wp-block-image,
.ecomap-pattern-card-resource .ecomap-card figure.wp-block-image {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure image fills width */
.ecomap-pattern-card-resource .ecomap-card .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Override inline styles on figure to remove bottom corner radius */
.ecomap-pattern-card-resource .ecomap-card figure.wp-block-image {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Constrained layout fix - ensure first child (image) has no top margin */
.ecomap-pattern-card-resource .ecomap-card > *:first-child {
    margin-top: 0 !important;
}

/* Responsive: Add horizontal padding on smaller viewports */
@media (max-width: 768px) {
    .ecomap-pattern-card-resource {
        padding-left: var(--spacing-4, 1rem);
        padding-right: var(--spacing-4, 1rem);
    }
}

/* ==========================================================================
   Card Pathway - Interactive Navigation Cards
   ========================================================================== */

/* Card styling */
.ecomap-pattern-card-pathway .ecomap-card {
    border-color: var(--color-border, var(--g200));
    height: 100%;
}

/* Ensure equal height cards fill their column */
.ecomap-pattern-card-pathway .wp-block-column.ecomap-repeatable-item {
    display: flex;
}

.ecomap-pattern-card-pathway .wp-block-column.ecomap-repeatable-item > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Dark theme adjustments */
.ecomap-theme-dark.ecomap-pattern-card-pathway .ecomap-card {
    border-color: var(--color-border-dark, rgba(255, 255, 255, 0.1));
}

/* ==========================================================================
   Content Icon Grid Compact - Centered Layout & Card Link Styles
   ========================================================================== */

/* Base compact feature styling - centered layout */
.ecomap-compact-feature {
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border-radius: var(--radius-md, 8px);
    position: relative;
}

/* Card link enabled state - clickable area with hover effect */
[data-card-link-enabled="true"] .ecomap-repeatable-item .ecomap-compact-feature {
    cursor: pointer;
    padding: var(--wp--preset--spacing--md, 1rem);
    margin: calc(-1 * var(--wp--preset--spacing--md, 1rem));
}

[data-card-link-enabled="true"] .ecomap-repeatable-item .ecomap-compact-feature:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Dark theme adjustment for hover */
.ecomap-theme-dark[data-card-link-enabled="true"] .ecomap-repeatable-item .ecomap-compact-feature:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Has-link indicator - chain icon on hover */
[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link .ecomap-compact-feature::after {
    content: '\f0c1'; /* Font Awesome chain/link icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--color-primary, #0073aa);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link:hover .ecomap-compact-feature::after {
    opacity: 0.8;
}

/* ============================================
   UNIVERSAL CARD LINK STYLES
   Applies to all sections with cardLinkEnabled toggle
   ============================================ */

/* Universal card click target when links are enabled */
[data-card-link-enabled="true"] .ecomap-repeatable-item {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Has-link indicator for all card types - chain icon on hover */
[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link {
    position: relative;
}

[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link::after {
    content: '\f0c1'; /* Font Awesome chain/link icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--color-primary, #0073aa);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link:hover::after {
    opacity: 1;
}

/* Dark theme adjustment for link indicator */
.ecomap-theme-dark[data-card-link-enabled="true"] .ecomap-repeatable-item.has-link::after {
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-primary-light, #4da6d9);
}

/* Stats Icon Blocks - card link styles */
.ecomap-pattern-stats-icon-blocks[data-card-link-enabled="true"] .ecomap-repeatable-item .ecomap-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ecomap-pattern-stats-icon-blocks[data-card-link-enabled="true"] .ecomap-repeatable-item:hover .ecomap-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Journey Timeline - card link styles */
.ecomap-pattern-journey-timeline[data-card-link-enabled="true"] .ecomap-timeline-item {
    cursor: pointer;
}

.ecomap-pattern-journey-timeline[data-card-link-enabled="true"] .ecomap-timeline-item:hover .ecomap-timeline-content {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-md, 8px);
}

.ecomap-theme-dark.ecomap-pattern-journey-timeline[data-card-link-enabled="true"] .ecomap-timeline-item:hover .ecomap-timeline-content {
    background: rgba(255, 255, 255, 0.05);
}

/* Trust Badges - card link styles */
.ecomap-pattern-trust-badges[data-card-link-enabled="true"] .ecomap-trust-badge {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ecomap-pattern-trust-badges[data-card-link-enabled="true"] .ecomap-trust-badge:hover {
    border-color: var(--color-primary, #0073aa);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card Grid Icons - card link styles */
.ecomap-pattern-card-grid-icons[data-card-link-enabled="true"] .ecomap-repeatable-item {
    cursor: pointer;
}

/* Card Grid Icons - button toggle (hidden by default, shown when data-show-buttons="true") */
.ecomap-pattern-card-grid-icons .ecomap-card-button {
    display: none;
}

.ecomap-pattern-card-grid-icons[data-show-buttons="true"] .ecomap-card-button {
    display: flex;
}

/* When buttons are shown, disable card link cursor */
.ecomap-pattern-card-grid-icons[data-show-buttons="true"] .ecomap-repeatable-item {
    cursor: default;
}

/* Card Grid Icons - Dividers (lines between columns and rows) */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns {
    --divider-color: var(--grid-divider-color, #1e293b);
    position: relative;
    padding-top: var(--wp--preset--spacing--lg, 1.5rem);
    padding-bottom: var(--wp--preset--spacing--lg, 1.5rem);
}

/* Top horizontal line */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--divider-color);
}

/* Bottom horizontal line */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--divider-color);
}

/* Vertical dividers between columns (not on first column) */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns > .wp-block-column:not(:first-child) {
    border-left: 1px solid var(--divider-color);
    padding-left: var(--wp--preset--spacing--lg, 1.5rem);
}

/* Multi-row support: horizontal lines between rows using flex-wrap and row-gap trick */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns {
    row-gap: calc(var(--wp--preset--spacing--lg, 1.5rem) * 2 + 1px) !important;
    background-image: linear-gradient(to bottom,
        transparent calc(50% - 0.5px),
        var(--divider-color) calc(50% - 0.5px),
        var(--divider-color) calc(50% + 0.5px),
        transparent calc(50% + 0.5px));
    background-size: 100% calc(var(--wp--preset--spacing--lg, 1.5rem) * 2 + 1px);
    background-position: 0 calc(100% + var(--wp--preset--spacing--lg, 1.5rem));
    background-repeat: repeat-y;
}

/* Fix: Remove internal row lines for single-row layouts */
.ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns:not([style*="flex-wrap"]) {
    background-image: none;
}

/* Tablet: 2-column layout - vertical dividers only between columns in same row */
@media (min-width: 782px) and (max-width: 1024px) {
    /* Remove left border from all columns first */
    .ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns > .wp-block-column {
        border-left: none;
        padding-left: 0;
    }

    /* Add left border only to even items (right column in 2-col layout) */
    .ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns > .wp-block-column:nth-child(even) {
        border-left: 1px solid var(--divider-color);
        padding-left: var(--wp--preset--spacing--lg, 1.5rem);
    }

    /* 2+1 layout: 3rd item wraps to new row - horizontal divider instead of vertical */
    .ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns > .wp-block-column:nth-child(3):last-child {
        border-left: none;
        border-top: 1px solid var(--divider-color);
        padding-left: 0;
        padding-top: var(--wp--preset--spacing--lg, 1.5rem);
        margin-top: var(--wp--preset--spacing--lg, 1.5rem);
        flex-basis: 100%; /* Force full width on its own row */
    }
}

/* Mobile: Stack columns, show horizontal dividers between items */
@media (max-width: 781px) {
    .ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns > .wp-block-column:not(:first-child) {
        border-left: none;
        border-top: 1px solid var(--divider-color);
        padding-left: 0;
        padding-top: var(--wp--preset--spacing--lg, 1.5rem);
        margin-top: var(--wp--preset--spacing--lg, 1.5rem);
    }

    .ecomap-pattern-card-grid-icons[data-show-dividers="true"] > .wp-block-columns {
        background-image: none;
    }
}

/* Hero Stats - card link styles */
.ecomap-hero-stats[data-card-link-enabled="true"] .ecomap-repeatable-item {
    cursor: pointer;
}

/* Card Pathway - card link styles (already interactive but enhancing) */
.ecomap-pattern-card-pathway[data-card-link-enabled="true"] .is-style-interactive-card {
    cursor: pointer;
}

.ecomap-pattern-card-pathway[data-card-link-enabled="true"] .is-style-interactive-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary, #0073aa);
}

/* Dark theme adjustments for all card link hovers */
.ecomap-theme-dark[data-card-link-enabled="true"] .ecomap-repeatable-item:hover,
.ecomap-theme-primary[data-card-link-enabled="true"] .ecomap-repeatable-item:hover,
.ecomap-theme-image[data-card-link-enabled="true"] .ecomap-repeatable-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Has-link indicator positioning adjustments for specific card types */
.ecomap-pattern-journey-timeline[data-card-link-enabled="true"] .ecomap-timeline-item.has-link::after {
    top: 0;
    right: 0;
}

.ecomap-pattern-trust-badges[data-card-link-enabled="true"] .ecomap-trust-badge.has-link::after {
    top: 4px;
    right: 4px;
}

/* ============================================
   DYNAMIC FEED STYLES
   Centralized styles for JS-rendered feed cards
   ============================================ */

/* Feed grid layout */
.ecomap-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-6, 1.5rem);
}

/* Base card styles - theme aware */
.ecomap-card,
.ecomap-news-card,
.ecomap-resource-card {
    background: var(--card-bg, #f8fafc);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ecomap-card:hover,
.ecomap-news-card:hover,
.ecomap-resource-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card figure/image */
.ecomap-card .ecomap-card-figure,
.ecomap-news-card .ecomap-card-figure,
.ecomap-resource-card .ecomap-card-figure {
    margin: 0;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--g100, #f3f4f6);
}

.ecomap-resource-card .ecomap-card-figure {
    height: 160px;
    aspect-ratio: auto;
}

.ecomap-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card content area */
.ecomap-card-content {
    padding: var(--spacing-6, 1.5rem);
}

.ecomap-resource-card .ecomap-card-content {
    padding: var(--spacing-5, 1.25rem);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card typography - theme aware */
.ecomap-card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    margin: 0 0 var(--spacing-2, 0.5rem);
    color: var(--section-card-text, var(--color-text));
    line-height: 1.3;
}

.ecomap-card-date {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-accent-medium);
    margin-bottom: var(--spacing-3, 0.75rem);
}

.ecomap-news-card .ecomap-card-date {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs, 0.75rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

.ecomap-card-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--section-card-text-muted, var(--color-text-muted));
    margin: 0 0 var(--spacing-4, 1rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ecomap-news-card .ecomap-card-desc {
    -webkit-line-clamp: 2;
}

/* WCAG 1.4.12: Graceful degradation for text spacing overrides on clamped text */
[style*="line-clamp"],
.ecomap-carousel-card-description,
.ecomap-guide-card-excerpt,
.ecomap-guide-card__excerpt,
.ecomap-guide-card__title,
.ecomap-card-desc {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Card links */
.ecomap-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-accent-medium);
    text-decoration: none;
}

.ecomap-card-link:hover {
    text-decoration: underline;
}

/* Resource card button-style link */
.ecomap-resource-card .ecomap-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    background: var(--color-accent-medium);
    color: var(--color-accent-medium-contrast, #fff);
    border-radius: 6px;
    transition: opacity 0.2s ease;
}

.ecomap-resource-card .ecomap-card-link:hover {
    opacity: 0.9;
    text-decoration: none;
}

/* Loading and empty states */
.ecomap-loading,
.ecomap-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-8, 2rem);
    color: var(--section-card-text-muted, var(--color-text-muted));
}

/* News grid - slightly wider cards */
.ecomap-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6, 1.5rem);
}

/* News card border variant */
.ecomap-news-card {
    border: 1px solid var(--g200, #e5e7eb);
    box-shadow: none;
}

.ecomap-news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Resources grid */
.ecomap-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-6, 1.5rem);
}

.ecomap-resource-card {
    display: flex;
    flex-direction: column;
}

/* Global Box Sizing Reset - Critical for full-width layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Layout Alignment Utilities */
.is-vertically-aligned-top {
    align-self: flex-start !important;
}

.is-vertically-aligned-center {
    align-self: center !important;
}

.is-vertically-aligned-bottom {
    align-self: flex-end !important;
}

/* Color Utilities */
.has-white-background-color {
    background-color: #ffffff !important;
}

.has-black-background-color {
    background-color: #000000 !important;
}

.has-black-color {
    color: #000000 !important;
}

/* WordPress white color class - uses --section-text for adaptive contrast.
   Text adapts based on section background (white on dark, dark on light). */
.has-white-color {
    color: var(--section-text, var(--color-text-inverted, #ffffff)) !important;
}

/* Secondary/Tertiary WordPress color classes - must define since global-styles is dequeued */
.has-secondary-background-color {
    background-color: var(--color-secondary) !important;
}

.has-secondary-light-background-color {
    background-color: var(--color-secondary-light) !important;
}

.has-secondary-lighter-background-color {
    background-color: var(--color-secondary-lighter) !important;
}

.has-secondary-color {
    color: var(--color-secondary) !important;
}

.has-tertiary-background-color {
    background-color: var(--color-tertiary) !important;
}

.has-tertiary-light-background-color {
    background-color: var(--color-tertiary-light) !important;
}

.has-tertiary-lighter-background-color {
    background-color: var(--color-tertiary-lighter) !important;
}

.has-tertiary-color {
    color: var(--color-tertiary) !important;
}

.has-primary-light-background-color {
    background-color: var(--color-primary-light) !important;
}

.has-primary-lighter-background-color {
    background-color: var(--color-primary-lighter) !important;
}

.has-primary-color {
    color: var(--color-primary) !important;
}

/* Persona role text override - must come after .has-primary-color base rule
   Uses hybrid approach: adapts based on card background luminance */
.ecomap-section.ecomap-pattern-card-persona .ecomap-card .has-primary-color.ecomap-accent-medium {
    color: var(--persona-role-color, var(--color-primary)) !important;
}

/* Feature category text override (e.g., "RESOURCES", "FUNDING" in features-alternating)
   Uses hybrid approach: adapts based on section background luminance */
.ecomap-section.ecomap-pattern-features-alternating .has-primary-color.ecomap-accent-medium {
    color: var(--feature-category-color, var(--color-primary)) !important;
}

/* ============================================
   PATTERN PREVIEW TOOLTIP
   Robust floating preview on hover
   ============================================ */

#ecomap-pattern-tooltip {
    position: fixed;
    z-index: 10000;
    width: 440px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-10px);
    overflow: hidden;
    /* Ensure content doesn't spill out */
}

#ecomap-pattern-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Callout Arrow */
#ecomap-pattern-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background: var(--color-surface, #fff);
    border-left: 1px solid var(--color-border, #e2e8f0);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    transform: rotate(45deg);
    z-index: 10001;
    /* Above tooltip content base */
}

/* Dark mode override for arrow border (if surface is dark) */
.ecomap-theme-dark #ecomap-pattern-tooltip::before {
    background: var(--g800);
    border-color: var(--g700);
}

.ecomap-tooltip-content {
    position: relative;
    z-index: 10002;
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
    background: inherit;
}

.ecomap-tooltip-preview {
    width: 440px !important;
    height: 330px !important;
    flex-shrink: 0;
    background: var(--g050, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    overflow: hidden;
    position: relative;
    /* Resetting any flex/grid gap issues */
    margin: 0 !important;
    padding: 0 !important;
}

/* NUCLEAR OPTION: Force all direct children (like wrapper) to behave */
.ecomap-tooltip-preview>* {
    width: 440px !important;
    height: 330px !important;
    max-width: 440px !important;
    max-height: 330px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* SPECIFIC OVERRIDE for the wrapper causing issues */
.ecomap-tooltip-preview .ecomap-pattern-svg-wrapper {
    width: 440px !important;
    height: 330px !important;
    max-width: 440px !important;
    max-height: 330px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force the SVG itself to strictly obey */
.ecomap-tooltip-preview svg {
    width: 440px !important;
    height: 330px !important;
    min-width: 440px !important;
    min-height: 330px !important;
    max-width: 440px !important;
    max-height: 330px !important;
    object-fit: contain !important;
    /* Keep aspect ratio logic intact */
    display: block !important;
}

.ecomap-tooltip-preview img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ecomap-tooltip-footer {
    padding: var(--spacing-4, 1rem);
    background: var(--color-surface, #fff);
}

.ecomap-tooltip-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: 600;
    color: var(--color-text-dark, #1e293b);
    margin-bottom: 4px;
}

.ecomap-tooltip-meta {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   SPLIT CARD PATTERN
   Full-width rounded card with text/image split layout
   ========================================================================== */

/* Main card container - uses card background override, NO padding */
/* Target all WordPress layout classes to override default padding */
.ecomap-pattern-content-split-card .ecomap-split-card,
.ecomap-pattern-content-split-card .ecomap-split-card.is-layout-flow,
.ecomap-pattern-content-split-card .ecomap-split-card.wp-block-group-is-layout-flow,
.ecomap-pattern-content-split-card .wp-block-group.ecomap-split-card {
    overflow: hidden;
    background-color: var(--split-card-bg, var(--color-primary, #0f172a));
    position: relative;
    padding: 0 !important;
}

/* Columns container - no gap, stretch to fill entire card */
.ecomap-pattern-content-split-card .ecomap-split-card-columns {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    min-height: 400px;
}

/* Both columns stretch to equal height */
.ecomap-pattern-content-split-card .ecomap-split-card-columns > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

/* Content column - uses pattern-specific variable to avoid inheriting global --card-bg default.
   Falls back to --color-primary which is the brand primary color.
   NOTE: Do NOT define --split-card-bg locally here - let it inherit from the section
   when set by sendStyleOverrides(). Only use fallback chain in background-color. */
.ecomap-pattern-content-split-card .ecomap-split-card-content {
    background-color: var(--split-card-bg, var(--color-primary, #0f172a));
}

/* Content inner wrapper - vertically center content, light text on dark background
 * NOTE: Do NOT define --card-text locally - let it inherit from section when set by
 * sendStyleOverrides(). Default is white for dark primary background. */
.ecomap-pattern-content-split-card .ecomap-split-card-content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
    color: var(--card-text, #ffffff);
}

/* Headings and paragraphs inherit light text color */
.ecomap-pattern-content-split-card .ecomap-split-card-content-inner h2,
.ecomap-pattern-content-split-card .ecomap-split-card-content-inner p {
    color: inherit;
}

/* Media column - positioned for absolute image and caption, no padding */
.ecomap-pattern-content-split-card .ecomap-split-card-media {
    position: relative;
    min-height: 400px;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image fills the entire media column absolutely */
.ecomap-pattern-content-split-card .ecomap-split-card-image {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.ecomap-pattern-content-split-card .ecomap-split-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Caption overlay at bottom left of image column */
.ecomap-pattern-content-split-card .ecomap-split-card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm, 0.875rem);
    text-align: left;
    z-index: 10;
}

/* Column ratio support - inherit from data-column-ratio attribute */
@media (min-width: 782px) {
    .ecomap-pattern-content-split-card[data-column-ratio="30"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 30% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="30"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 70% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="35"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 35% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="35"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 65% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="40"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 40% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="40"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 60% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="45"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 45% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="45"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 55% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="50"] .ecomap-split-card-columns > .wp-block-column {
        flex-basis: 50% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="55"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 55% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="55"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 45% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="60"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 60% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="60"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 40% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="65"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 65% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="65"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 35% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="70"] .ecomap-split-card-columns > .wp-block-column:first-child {
        flex-basis: 70% !important;
    }
    .ecomap-pattern-content-split-card[data-column-ratio="70"] .ecomap-split-card-columns > .wp-block-column:last-child {
        flex-basis: 30% !important;
    }
}

/* Flip columns support */
.ecomap-pattern-content-split-card[data-flip-columns="true"] .ecomap-split-card-columns {
    flex-direction: row-reverse;
}

/* Mobile: Stack vertically */
@media (max-width: 781px) {
    .ecomap-pattern-content-split-card .ecomap-split-card-columns {
        flex-direction: column !important;
    }

    .ecomap-pattern-content-split-card .ecomap-split-card-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .ecomap-pattern-content-split-card .ecomap-split-card-content-inner {
        min-height: auto;
    }

    .ecomap-pattern-content-split-card .ecomap-split-card-image {
        min-height: 250px;
    }

    /* Rounded corners on mobile */
    .ecomap-pattern-content-split-card .ecomap-split-card {
        border-radius: var(--wp--preset--spacing--lg, 1rem);
    }
}

/* ==========================================================================
   SPLIT BULLETS PATTERN
   Split section with heading on one side and repeatable bullet points
   Full-width background, content constrained to 1200px
   ========================================================================== */

/* Section uses full-width background via section background color
 * IMPORTANT: This pattern defaults to primary-color background with white text.
 * We SET the variables here (not just use them) so this overrides .ecomap-theme-light
 * which would otherwise set --section-bg to white. Inline style overrides from the
 * editor will have higher specificity and still work correctly. */
.ecomap-pattern-content-split-bullets {
    --section-bg: var(--wp--preset--color--primary, #0f172a);
    --section-text: #ffffff;
    --section-text-muted: rgba(255, 255, 255, 0.7);
    background-color: var(--section-bg);
    color: var(--section-text);
}

/* Ensure heading and bullet text use light color on dark backgrounds */
.ecomap-pattern-content-split-bullets h2,
.ecomap-pattern-content-split-bullets .ecomap-bullet-text {
    color: var(--section-text, #ffffff) !important;
}

/* Columns should align to top with no extra gaps */
.ecomap-pattern-content-split-bullets .ecomap-split-bullets-columns {
    align-items: flex-start !important;
    gap: var(--wp--preset--spacing--2-xl, 3rem) !important;
}

/* Remove any default padding/margin from columns */
.ecomap-pattern-content-split-bullets .ecomap-split-bullets-heading,
.ecomap-pattern-content-split-bullets .ecomap-split-bullets-list {
    padding: 0 !important;
    margin: 0 !important;
}

/* Heading should have no top margin */
.ecomap-pattern-content-split-bullets .ecomap-split-bullets-heading h2 {
    margin-top: 0 !important;
}

/* Bullet items container - vertical stack with gap, NO extra padding */
.ecomap-pattern-content-split-bullets .ecomap-bullet-items-container,
.ecomap-pattern-content-split-bullets .ecomap-bullet-items-container.is-layout-flex,
.ecomap-pattern-content-split-bullets .ecomap-bullet-items-container.wp-block-group-is-layout-flex {
    gap: var(--wp--preset--spacing--lg, 1.5rem) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual bullet item - flex row */
.ecomap-pattern-content-split-bullets .ecomap-bullet-item {
    gap: var(--spacing-4, 1rem) !important;
    align-items: flex-start !important;
}

/* Bullet icon container - keeps the star visible */
.ecomap-pattern-content-split-bullets .ecomap-bullet-icon {
    flex-shrink: 0;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bullet marker (star icon) - uses dedicated variable for icon override support
 * Falls back to section text color (white on dark backgrounds) */
.ecomap-pattern-content-split-bullets .ecomap-bullet-marker {
    font-size: 1.25rem;
    line-height: 1.4;
    display: inline-block;
    color: var(--bullet-icon-color, var(--section-text, #ffffff)) !important;
}

/* Heading right-aligned by default */
.ecomap-pattern-content-split-bullets .ecomap-split-bullets-heading h2 {
    text-align: right;
}

/* Bullet text - light color on dark background */
.ecomap-pattern-content-split-bullets .ecomap-bullet-text {
    flex: 1;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flip columns support */
.ecomap-pattern-content-split-bullets[data-flip-columns="true"] .ecomap-split-bullets-columns {
    flex-direction: row-reverse;
}

/* Mobile: Stack vertically */
@media (max-width: 781px) {
    .ecomap-pattern-content-split-bullets .ecomap-split-bullets-columns {
        flex-direction: column !important;
    }

    .ecomap-pattern-content-split-bullets .ecomap-split-bullets-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   FULL WIDTH IMAGE PATTERN
   Simple full-width image within constrained container
   ========================================================================== */

/* Container with max-width - no overflow hidden so captions can display */
.ecomap-pattern-content-full-image .ecomap-full-image-container,
.ecomap-pattern-content-full-image .ecomap-full-image-container.is-layout-flow,
.ecomap-pattern-content-full-image .ecomap-full-image-container.wp-block-group-is-layout-flow {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
}

/* Image fills container, maintains aspect ratio */
.ecomap-pattern-content-full-image .ecomap-full-image {
    margin: 0 !important;
}

/* Apply rounded corners directly to the image, not the container */
.ecomap-pattern-content-full-image .ecomap-full-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--wp--preset--spacing--lg, var(--radius-lg, 12px));
}

/* Caption appears below the image, outside the rounded area */
.ecomap-pattern-content-full-image .ecomap-full-image figcaption {
    margin-top: var(--spacing-3, 0.75rem);
    text-align: center;
    color: var(--color-text-muted, var(--g400, #8b93a1));
    font-size: var(--font-size-sm, 0.875rem);
}

/* ==========================================================================
   Content Simple Text Pattern
   ========================================================================== */

/* Content container width controlled by data attribute */
.ecomap-pattern-content-simple-text .ecomap-simple-text-content {
    max-width: var(--content-width, 800px);
    margin-left: auto;
    margin-right: auto;
}

/* Ensure proper text alignment within the constrained width */
.ecomap-pattern-content-simple-text .ecomap-simple-text-content h2 {
    text-align: left;
}

.ecomap-pattern-content-simple-text .ecomap-simple-text-content p {
    text-align: justify;
}

/* Link button styling - right aligned */
.ecomap-pattern-content-simple-text .wp-block-buttons {
    justify-content: flex-end !important;
}

.ecomap-pattern-content-simple-text .wp-block-button.is-style-link .wp-block-button__link {
    color: var(--color-primary, var(--section-text, currentColor));
    font-weight: 500;
}

/* Mobile: full width, left-aligned text */
@media (max-width: 768px) {
    .ecomap-pattern-content-simple-text .ecomap-simple-text-content {
        max-width: 100%;
        padding-left: var(--wp--preset--spacing--md, 1rem);
        padding-right: var(--wp--preset--spacing--md, 1rem);
    }

    .ecomap-pattern-content-simple-text .ecomap-simple-text-content p {
        text-align: left;
    }
}

/* ==========================================================================
   Content Image Split Pattern
   ========================================================================== */

.wp-block-group.ecomap-pattern-content-image-split {
    --max-image-height: 400px;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Main container - flexbox for side-by-side layout */
.ecomap-pattern-content-image-split .ecomap-image-split-container {
    display: flex;
    flex-direction: row;
    min-height: var(--max-image-height);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Image side - pins to edge, takes natural width based on height constraint */
.ecomap-pattern-content-image-split .ecomap-image-split-image {
    flex: 0 0 auto;
    max-height: var(--max-image-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
}

/* Flipped: image on right needs no right padding */
.ecomap-pattern-content-image-split[data-flip-layout="true"] .ecomap-image-split-image {
    padding-left: unset;
    padding-right: 0 !important;
}

.ecomap-pattern-content-image-split .ecomap-image-split-image .wp-block-image {
    margin: 0;
    height: var(--max-image-height);
    display: flex;
    align-items: center;
}

.ecomap-pattern-content-image-split .ecomap-image-split-image img {
    height: var(--max-image-height);
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Content side - fills remaining space, centers content vertically */
.ecomap-pattern-content-image-split .ecomap-image-split-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important; /* Override WordPress is-content-justification-center */
    min-height: var(--max-image-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Content Image Split: CTA background override
   Uses --cta-bg when set (via ctaBackgroundColor override), defaults to off-white.
   This override has higher specificity than generic .ecomap-cta-content rule. */
.ecomap-pattern-content-image-split .ecomap-image-split-content.ecomap-cta-content {
    background-color: var(--cta-bg, #f8fafc) !important;
}

/* Inner content wrapper - left-align (override is-layout-constrained centering) */
.ecomap-pattern-content-image-split .ecomap-image-split-content > .wp-block-group {
    width: 100%;
    max-width: 712px;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Left-align children (override is-layout-constrained centering) */
.ecomap-pattern-content-image-split .ecomap-image-split-content > .wp-block-group > * {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Flipped layout - image on right */
.ecomap-pattern-content-image-split[data-flip-layout="true"] .ecomap-image-split-container {
    flex-direction: row-reverse;
}

.ecomap-pattern-content-image-split[data-flip-layout="true"] .ecomap-image-split-content {
    align-items: flex-end;
}

.ecomap-pattern-content-image-split[data-flip-layout="true"] .ecomap-image-split-content > .wp-block-group {
    text-align: left;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Stack vertically at 960px, image always on top */
@media (max-width: 960px) {
    .ecomap-pattern-content-image-split .ecomap-image-split-container {
        flex-direction: column !important;
        min-height: auto;
    }

    .ecomap-pattern-content-image-split .ecomap-image-split-image {
        max-height: none;
        width: 100%;
        order: -1; /* Always on top */
    }

    .ecomap-pattern-content-image-split .ecomap-image-split-image .wp-block-image {
        height: auto;
        width: 100%;
    }

    .ecomap-pattern-content-image-split .ecomap-image-split-image img {
        height: auto;
        width: 100%;
        max-width: 100%;
    }

    .ecomap-pattern-content-image-split .ecomap-image-split-content {
        min-height: auto;
        align-items: stretch !important;
    }

    .ecomap-pattern-content-image-split .ecomap-image-split-content > .wp-block-group {
        max-width: 100%;
    }
}