/**
 * Section Rendering Design Tokens
 * These tokens are ONLY for section preview/rendering (Hero, Features, etc.)
 * NEVER use these in editor UI components
 * These colors ARE modified by user's global settings
 */

:root {
    /* =========================================
       Section Color System - User Customizable
       These values are defaults - will be overridden by global settings
       ========================================= */
    
    /* Primary Colors - Indigo brand identity */
    --aisb-color-primary: #6366f1;           /* Indigo - plugin brand accent */
    --aisb-color-primary-bg: rgba(99, 102, 241, 0.1);
    
    /* Secondary Colors - Light indigo for hierarchy */
    --aisb-color-secondary: #818cf8;         /* Light indigo - complementary to primary */
    --aisb-color-secondary-bg: rgba(129, 140, 248, 0.1);
    
    /* Text Colors */
    --aisb-color-text: #1f2937;              /* Main text color - user customizable */
    --aisb-color-text-muted: #6b7280;        /* Muted text for eyebrows - user customizable */
    --aisb-color-text-inverse: #ffffff;      /* Text on dark backgrounds */
    
    /* Background Colors */
    --aisb-color-background: #ffffff;        /* Main background - user customizable */
    --aisb-color-surface: #f9fafb;           /* Card/panel backgrounds - user customizable */
    
    /* Border Colors */
    --aisb-color-border: #e5e7eb;            /* Card borders - user customizable */
    --aisb-color-divider: rgba(31, 41, 55, 0.1);       /* Subtle dividers - opacity based */
    
    /* Semantic Colors */
    --aisb-color-success: #10b981;
    --aisb-color-error: #ef4444;
    --aisb-color-warning: #f59e0b;
    --aisb-color-info: #3b82f6;
    
    /* Dark Mode Colors - User Customizable */
    --aisb-color-dark-background: #1a1a1a;   /* Main dark background - user customizable */
    --aisb-color-dark-surface: #2a2a2a;      /* Dark card backgrounds - user customizable */
    --aisb-color-dark-text: #fafafa;         /* Dark mode text - user customizable */
    --aisb-color-dark-text-muted: #9ca3af;   /* Dark mode muted text - user customizable */
    --aisb-color-dark-border: #4b5563;       /* Dark mode borders - user customizable */
    
    /* Dark Mode Divider - opacity based for subtlety */
    --aisb-color-dark-divider: rgba(250, 250, 250, 0.1);     /* Subtle dividers */
    
    /* Hover State Colors */
    --aisb-hover-light: rgba(0, 0, 0, 0.02);    /* Light mode subtle hover */
    --aisb-hover-dark: rgba(255, 255, 255, 0.05); /* Dark mode subtle hover */
    
    /* =========================================
       Section Semantic Tokens
       Maps colors to their usage context
       ========================================= */
    
    /* Interactive Elements */
    --aisb-interactive-primary: var(--aisb-color-primary);
    --aisb-interactive-primary-text: var(--aisb-color-text-inverse);
    
    --aisb-interactive-secondary: var(--aisb-color-secondary);
    --aisb-interactive-secondary-text: var(--aisb-color-text-inverse);
    
    /* Content Hierarchy */
    --aisb-content-heading: var(--aisb-color-text);
    --aisb-content-body: var(--aisb-color-text);
    --aisb-content-caption: var(--aisb-color-text-muted);
    
    /* Surfaces */
    --aisb-surface-primary: var(--aisb-color-background);
    --aisb-surface-secondary: var(--aisb-color-surface);
    --aisb-surface-elevated: var(--aisb-color-surface);
    
    /* =========================================
       Section Spacing System
       ========================================= */
    --aisb-section-space-xs: 8px;
    --aisb-section-space-sm: 16px;
    --aisb-section-space-md: 24px;
    --aisb-section-space-lg: 32px;
    --aisb-section-space-xl: 48px;
    --aisb-section-space-2xl: 64px;
    --aisb-section-space-3xl: 96px;
    
    /* =========================================
       Section Typography
       ========================================= */
    --aisb-section-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Font Sizes for Sections - Using REM for Accessibility
       Base browser font-size is typically 16px, so:
       1rem = 16px at default browser settings */
    --aisb-section-text-xs: 0.75rem;    /* 12px equivalent */
    --aisb-section-text-sm: 0.875rem;   /* 14px equivalent */
    --aisb-section-text-base: 1rem;     /* 16px equivalent */
    --aisb-section-text-lg: 1.125rem;   /* 18px equivalent */
    --aisb-section-text-xl: 1.25rem;    /* 20px equivalent */
    --aisb-section-text-2xl: 2rem;      /* 32px equivalent */
    --aisb-section-text-3xl: 1.875rem;  /* 30px equivalent */
    --aisb-section-text-4xl: 2.25rem;   /* 36px equivalent */
    --aisb-section-text-5xl: 3rem;      /* 48px equivalent */
    --aisb-section-text-large-desktop: 3.25rem; /* 52px equivalent - For 1280px+ breakpoint */
    --aisb-section-text-6xl: 3.75rem;   /* 60px equivalent */
    
    /* Font Weights (Deprecated - Use specific weight variables below) */
    --aisb-section-font-normal: 400;
    --aisb-section-font-medium: 500;
    --aisb-section-font-semibold: 600;
    --aisb-section-font-bold: 700;
    
    /* Line Heights */
    --aisb-section-leading-tight: 1.25;
    --aisb-section-leading-normal: 1.5;
    --aisb-section-leading-relaxed: 1.75;
    --aisb-section-leading-loose: 2;
    
    /* =========================================
       Section Border Radius
       ========================================= */
    --aisb-section-radius-none: 0px;
    --aisb-section-radius-sm: 4px;
    --aisb-section-radius-base: 6px;
    --aisb-section-radius-md: 8px;
    --aisb-section-radius-lg: 12px;
    --aisb-section-radius-xl: 16px;
    --aisb-section-radius-2xl: 24px;
    --aisb-section-radius-full: 9999px;
    
    /* Image border-radius compensation for sub-pixel alignment */
    --aisb-image-border-radius-offset: 1px; /* Eliminates hairline artifacts on high-DPI displays */
    
    /* =========================================
       Section Shadows
       ========================================= */
    --aisb-section-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --aisb-section-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --aisb-section-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --aisb-section-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --aisb-section-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* =========================================
       Section Transitions
       ========================================= */
    --aisb-section-transition-fast: 150ms ease;
    --aisb-section-transition-base: 200ms ease;
    --aisb-section-transition-slow: 300ms ease;
    
    /* =========================================
       Foundation for Future Global Settings
       ========================================= */
    
    /* Container Width - User customizable in future */
    --aisb-section-max-width: 1200px;
    
    /* Typography Settings - Now handled by global settings */
    /* Font families injected by Assets.php with fallbacks */
    --aisb-section-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aisb-section-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aisb-section-font-button: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aisb-section-font-eyebrow: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Font weights injected by global settings */
    --aisb-section-font-heading-weight: 600;  /* Default heading weight */
    --aisb-section-font-body-weight: 400;     /* Default body weight */
    --aisb-section-font-button-weight: 500;   /* Default button weight */
    --aisb-section-font-eyebrow-weight: 600;  /* Default eyebrow weight */
    
    /* Spacing Scale - User can adjust density */
    --aisb-section-spacing-scale: 1;
    
    /* Border Radius Presets - User customizable */
    --aisb-section-radius-button: var(--aisb-section-radius-md);
    --aisb-section-radius-card: var(--aisb-section-radius-lg);
    --aisb-section-radius-image: var(--aisb-section-radius-lg);

    /* Image Shadow - User customizable (can be disabled globally) */
    --aisb-image-shadow: var(--aisb-section-shadow-xl);

    /* Golden Ratio for Visual Harmony */
    --aisb-golden-ratio: 1.618;
    
    /* =========================================
       Neo-Brutalist Design Tokens
       Professional brutal styling using design system values
       ========================================= */
    
    /* Neo-Brutalist Border Widths */
    --aisb-neo-border-width: 4px;                    /* Cards border thickness */
    --aisb-neo-border-width-button: 3px;             /* Button border thickness */
    
    /* Neo-Brutalist Shadow Offsets - Based on spacing scale */
    --aisb-neo-shadow-offset: var(--aisb-section-space-xs);                           /* 8px - standard card shadow */
    --aisb-neo-shadow-offset-large: calc(var(--aisb-section-space-xs) * 1.5);        /* 12px - featured elements */
    --aisb-neo-shadow-offset-button: calc(var(--aisb-section-space-xs) * 0.5);       /* 4px - button shadow */
    --aisb-neo-shadow-offset-button-hover: calc(var(--aisb-section-space-xs) * 0.375); /* 3px - button hover shadow */
    
    /* Split-screen layout height - Shared calculation for consistency */
    --aisb-split-image-min-height: calc(var(--aisb-section-space-3xl) * 2.5); /* Hero split-screen and placeholder height */
    
    /* Heading Sizes with Golden Ratio */
    --aisb-section-heading-scale: 1.618;
    --aisb-section-heading-xl: calc(var(--aisb-section-text-3xl) * var(--aisb-section-heading-scale));
    --aisb-section-heading-lg: var(--aisb-section-text-3xl);
    --aisb-section-heading-md: var(--aisb-section-text-2xl);
    --aisb-section-heading-sm: var(--aisb-section-text-xl);

    /* =========================================
       Media Placeholder Tokens
       ========================================= */
    
    /* Placeholder Colors - Integrated with existing design system */
    --aisb-placeholder-bg: var(--aisb-color-surface);
    --aisb-placeholder-border: var(--aisb-color-border);
    --aisb-placeholder-text: var(--aisb-color-text-muted);
    
    /* Dark mode placeholder colors */
    --aisb-placeholder-bg-dark: var(--aisb-color-dark-surface);
    --aisb-placeholder-border-dark: var(--aisb-color-dark-border);
    --aisb-placeholder-text-dark: var(--aisb-color-dark-text-muted);
    
    /* Placeholder Dimensions */
    --aisb-placeholder-min-height: 200px;
    --aisb-placeholder-aspect-ratio-image: 4 / 3;
    --aisb-placeholder-aspect-ratio-video: 16 / 9;
    --aisb-placeholder-max-width-center: 600px;

    /* =========================================
       Icon & Thumbnail Size Tokens
       ========================================= */

    /* Icon Sizes */
    --aisb-section-icon-size-sm: 32px;
    --aisb-section-icon-size-md: 40px;
    --aisb-section-icon-size-lg: 48px;
    --aisb-section-icon-size-xl: 56px;

    /* Icon Inner Sizes (for the icon graphic itself) */
    --aisb-section-icon-inner-sm: 16px;
    --aisb-section-icon-inner-md: 20px;
    --aisb-section-icon-inner-lg: 24px;
    --aisb-section-icon-inner-xl: 28px;

    /* Thumbnail Sizes */
    --aisb-section-thumbnail-size-sm: 48px;
    --aisb-section-thumbnail-size-md: 64px;
    --aisb-section-thumbnail-size-lg: 80px;

    /* =========================================
       Showcase Layout Tokens
       ========================================= */

    /* Showcase Container */
    --aisb-showcase-max-width: 1100px;
    --aisb-showcase-column-width: 280px;
    --aisb-showcase-column-width-full: 320px;

    /* Showcase Media Dimensions */
    --aisb-showcase-media-width: 260px;
    --aisb-showcase-media-width-full: 320px;
    --aisb-showcase-media-width-tablet: 220px;
    --aisb-showcase-media-width-mobile: 240px;
    --aisb-showcase-media-height: 400px;
    --aisb-showcase-media-height-mobile: 340px;

    /* Link Arrow Spacing */
    --aisb-link-arrow-spacing: var(--aisb-section-space-sm); /* 16px */

    /* Showcase Description Width */
    --aisb-showcase-description-max-width-mobile: 300px;

    /* Showcase Mobile Full-Width Height */
    --aisb-showcase-media-height-mobile-full: 360px;
}

/* =========================================
   Media Placeholder Styles
   Professional placeholder component following design system
   ========================================= */

.aisb-media-placeholder {
  position: relative;
  width: 100%;
  min-height: var(--aisb-placeholder-min-height);
  background: var(--aisb-placeholder-bg);
  border: 1px dashed var(--aisb-placeholder-border);
  border-radius: var(--aisb-section-radius-image, var(--aisb-section-radius-lg));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--aisb-section-transition-base);
}

.aisb-media-placeholder--video {
  aspect-ratio: var(--aisb-placeholder-aspect-ratio-video);
  min-height: auto;
}

.aisb-media-placeholder--image {
  aspect-ratio: var(--aisb-placeholder-aspect-ratio-image);
  min-height: auto;
}

.aisb-media-placeholder--shortcode {
  min-height: auto;
  aspect-ratio: 1 / 1;
}

.aisb-media-placeholder--shortcode .aisb-media-placeholder__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aisb-section-space-sm);
}

.aisb-media-placeholder--shortcode .dashicons {
  font-size: var(--aisb-section-text-2xl); /* 32px equivalent - 2rem */
  line-height: 1;
  color: var(--aisb-placeholder-text);
}

.aisb-media-placeholder--shortcode .aisb-media-placeholder__hint {
  font-family: var(--aisb-section-font-family);
  font-size: var(--aisb-section-text-sm);
  color: var(--aisb-placeholder-text);
  opacity: 0.7;
  font-style: italic;
}

/* Dark mode shortcode styles */
.aisb-section--dark .aisb-media-placeholder--shortcode .dashicons {
  color: var(--aisb-placeholder-text-dark);
}

.aisb-section--dark .aisb-media-placeholder--shortcode .aisb-media-placeholder__hint {
  color: var(--aisb-placeholder-text-dark);
}

/* Override parent overflow:hidden to show borders properly */
.aisb-hero__media:has(.aisb-media-placeholder),
.aisb-features__media:has(.aisb-media-placeholder),
.aisb-stats__media:has(.aisb-media-placeholder),
.aisb-testimonials__media:has(.aisb-media-placeholder),
.aisb-checklist__media:has(.aisb-media-placeholder),
.aisb-faq__media:has(.aisb-media-placeholder),
.aisb-team__media:has(.aisb-media-placeholder),
.aisb-pricing__media:has(.aisb-media-placeholder),
.aisb-steps__media:has(.aisb-media-placeholder) {
  overflow: visible;
}

/* Center layout constraints */
.aisb-section--center .aisb-media-placeholder {
  max-width: var(--aisb-placeholder-max-width-center);
  margin: 0 auto;
}

.aisb-media-placeholder__content {
  text-align: center;
  pointer-events: none;
}

.aisb-media-placeholder__text {
  font-family: var(--aisb-section-font-family);
  font-size: var(--aisb-section-text-lg);
  font-weight: var(--aisb-section-font-medium);
  color: var(--aisb-placeholder-text);
  letter-spacing: 0.05em;
}

/* Dark mode styles */
.aisb-section--dark .aisb-media-placeholder {
  background: var(--aisb-placeholder-bg-dark);
  border-color: var(--aisb-placeholder-border-dark);
}

.aisb-section--dark .aisb-media-placeholder__text {
  color: var(--aisb-placeholder-text-dark);
}

/* Hover state for better UX */
.aisb-media-placeholder:hover {
  border-color: var(--aisb-color-primary);
}

.aisb-section--dark .aisb-media-placeholder:hover {
  border-color: var(--aisb-color-primary);
}

/* =========================================
   Smart Color Link Styling System
   Comprehensive coverage for all section types with proper contrast
   ========================================= */

/* Section-level links (against section background) */
.aisb-section--light [class*="__body"] a:not([class]),
.aisb-section--light [class*="__content"] a:not([class]),
.aisb-section--light [class*="__outro"] a:not([class]),
.aisb-section--light [class*="__item-text"] a:not([class]) {
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.aisb-section--dark [class*="__body"] a:not([class]),
.aisb-section--dark [class*="__content"] a:not([class]),
.aisb-section--dark [class*="__outro"] a:not([class]),
.aisb-section--dark [class*="__item-text"] a:not([class]) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Surface-level links (in cards, items, and other surface containers) */
.aisb-section--light [class*="__description"] a:not([class]),
.aisb-section--light [class*="__card"] a:not([class]),
.aisb-section--light [class*="__item-content"] a:not([class]),
.aisb-section--light [class*="__item-answer"] a:not([class]),
.aisb-section--light .aisb-pricing__product-description a:not([class]) {
  color: var(--aisb-smart-light-surface-link, var(--aisb-color-primary));
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.aisb-section--dark [class*="__description"] a:not([class]),
.aisb-section--dark [class*="__card"] a:not([class]),
.aisb-section--dark [class*="__item-content"] a:not([class]),
.aisb-section--dark [class*="__item-answer"] a:not([class]),
.aisb-section--dark .aisb-pricing__product-description a:not([class]) {
  color: var(--aisb-smart-dark-surface-link, var(--aisb-color-primary));
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Section-level hover - use section background brightness */
/* These links sit directly on section background (body, content, outro) */
.aisb-section--light [class*="__body"] a:not([class]):hover,
.aisb-section--light [class*="__content"] a:not([class]):hover,
.aisb-section--light [class*="__outro"] a:not([class]):hover,
.aisb-section--light [class*="__item-text"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-section--dark [class*="__body"] a:not([class]):hover,
.aisb-section--dark [class*="__content"] a:not([class]):hover,
.aisb-section--dark [class*="__outro"] a:not([class]):hover,
.aisb-section--dark [class*="__item-text"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Surface-level hover - use surface color brightness (for links in cards) */
/* These links sit on card surfaces which use SURFACE color, not section background */
.aisb-section--light [class*="__description"] a:not([class]):hover,
.aisb-section--light [class*="__card"] a:not([class]):hover,
.aisb-section--light [class*="__item-content"] a:not([class]):hover,
.aisb-section--light [class*="__item-answer"] a:not([class]):hover,
.aisb-section--light .aisb-pricing__product-description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-surface-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-section--dark [class*="__description"] a:not([class]):hover,
.aisb-section--dark [class*="__card"] a:not([class]):hover,
.aisb-section--dark [class*="__item-content"] a:not([class]):hover,
.aisb-section--dark [class*="__item-answer"] a:not([class]):hover,
.aisb-section--dark .aisb-pricing__product-description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-surface-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Focus states for accessibility */
.aisb-section [class*="__body"] a:not([class]):focus,
.aisb-section [class*="__content"] a:not([class]):focus,
.aisb-section [class*="__outro"] a:not([class]):focus,
.aisb-section [class*="__description"] a:not([class]):focus,
.aisb-section [class*="__card"] a:not([class]):focus,
.aisb-section [class*="__item-content"] a:not([class]):focus,
.aisb-section [class*="__item-answer"] a:not([class]):focus,
.aisb-section .aisb-pricing__product-description a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================
   Media Placeholder Smart Colors
   Surface-aware text colors for proper contrast
   ========================================= */

/* Light mode - surface-aware media placeholder text */
.aisb-section--light .aisb-media-placeholder__text,
.aisb-section--light .aisb-media-placeholder__hint,
.aisb-section--light [class*="__video-placeholder"],
.aisb-section--light [class*="__logo-placeholder"] {
  color: var(--aisb-smart-light-surface-text, var(--aisb-color-text-muted));
}

/* Dark mode - surface-aware media placeholder text */
.aisb-section--dark .aisb-media-placeholder__text,
.aisb-section--dark .aisb-media-placeholder__hint,
.aisb-section--dark [class*="__video-placeholder"],
.aisb-section--dark [class*="__logo-placeholder"] {
  color: var(--aisb-smart-dark-surface-text, var(--aisb-color-dark-text-muted));
}

/* Shortcode placeholder icons also need surface-aware colors */
.aisb-section--light .aisb-media-placeholder--shortcode .dashicons {
  color: var(--aisb-smart-light-surface-text, var(--aisb-color-text-muted));
}

.aisb-section--dark .aisb-media-placeholder--shortcode .dashicons {
  color: var(--aisb-smart-dark-surface-text, var(--aisb-color-dark-text-muted));
}

/* =========================================
   Features Minimal Card Overrides
   Minimal cards sit on section background, not surface
   ========================================= */

/* Features minimal cards - use section-level colors instead of surface-level */
.aisb-section--light.aisb-features.aisb-features--minimal [class*="__item-content"] a:not([class]) {
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
}

.aisb-section--dark.aisb-features.aisb-features--minimal [class*="__item-content"] a:not([class]) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
}

/* Features minimal cards hover states - use calculated brightness */
.aisb-section--light.aisb-features.aisb-features--minimal [class*="__item-content"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-section--dark.aisb-features.aisb-features--minimal [class*="__item-content"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Features minimal cards focus states for accessibility */
.aisb-section.aisb-features.aisb-features--minimal [class*="__item-content"] a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Features minimal + custom background overrides (matches Learn More link logic exactly) */
.aisb-features--custom-background.aisb-features--minimal [class*="__item-content"] a:not([class]) {
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
}

.aisb-features--custom-background.aisb-features--minimal.aisb-section--dark [class*="__item-content"] a:not([class]) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
}

/* Features minimal + custom background hover states - use calculated brightness */
.aisb-features--custom-background.aisb-features--minimal [class*="__item-content"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-features--custom-background.aisb-features--minimal.aisb-section--dark [class*="__item-content"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Features minimal + custom background focus states for accessibility */
.aisb-features--custom-background.aisb-features--minimal [class*="__item-content"] a:not([class]):focus,
.aisb-features--custom-background.aisb-features--minimal.aisb-section--dark [class*="__item-content"] a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Checklist + custom background overrides - use section-level colors */
.aisb-checklist--custom-background [class*="__item-text"] a:not([class]) {
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
}

.aisb-checklist--custom-background.aisb-section--dark [class*="__item-text"] a:not([class]) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
}

/* Checklist + custom background hover states - use calculated brightness */
.aisb-checklist--custom-background [class*="__item-text"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-checklist--custom-background.aisb-section--dark [class*="__item-text"] a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Checklist + custom background focus states for accessibility */
.aisb-checklist--custom-background [class*="__item-text"] a:not([class]):focus,
.aisb-checklist--custom-background.aisb-section--dark [class*="__item-text"] a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* TinyMCE A tags in non-surface sections - use section-level colors like team member links */
.aisb-section--light .aisb-team__bio a:not([class]),
.aisb-section--light .aisb-stats__description a:not([class]),
.aisb-section--light .aisb-steps__item-description a:not([class]),
.aisb-section--light .aisb-checklist__item-text a:not([class]) {
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
}

.aisb-section--dark .aisb-team__bio a:not([class]),
.aisb-section--dark .aisb-stats__description a:not([class]),
.aisb-section--dark .aisb-steps__item-description a:not([class]),
.aisb-section--dark .aisb-checklist__item-text a:not([class]) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
}

/* =========================================
   Stats Minimal Hover Overrides
   Stats minimal sits on section background, NOT surface
   Override the wildcard [class*="__description"] rule
   ========================================= */

/* Stats minimal (default) hover - use SECTION brightness, not surface */
.aisb-section--light .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-section--dark .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Stats minimal focus states for accessibility */
.aisb-section .aisb-stats__description a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Stats minimal + custom background hover - use calculated section brightness */
.aisb-stats--custom-background .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-stats--custom-background.aisb-section--dark .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Stats minimal + custom background focus states */
.aisb-stats--custom-background .aisb-stats__description a:not([class]):focus,
.aisb-stats--custom-background.aisb-section--dark .aisb-stats__description a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================
   Stats Cards Variant Overrides
   Stats cards sit on surface background, not section background
   ========================================= */

/* Stats cards - use surface-level colors instead of section-level */
.aisb-section--light.aisb-stats--cards .aisb-stats__description a:not([class]) {
  color: var(--aisb-smart-light-surface-link, var(--aisb-color-primary));
}

.aisb-section--dark.aisb-stats--cards .aisb-stats__description a:not([class]) {
  color: var(--aisb-smart-dark-surface-link, var(--aisb-color-primary));
}

/* Stats cards hover states - use surface brightness */
.aisb-section--light.aisb-stats--cards .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-surface-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-section--dark.aisb-stats--cards .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-surface-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Stats cards focus states for accessibility */
.aisb-section.aisb-stats--cards .aisb-stats__description a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Stats cards + custom background overrides */
.aisb-stats--custom-background.aisb-stats--cards .aisb-stats__description a:not([class]) {
  color: var(--aisb-smart-light-surface-link, var(--aisb-color-primary));
}

.aisb-stats--custom-background.aisb-stats--cards.aisb-section--dark .aisb-stats__description a:not([class]) {
  color: var(--aisb-smart-dark-surface-link, var(--aisb-color-primary));
}

/* Stats cards + custom background hover states */
.aisb-stats--custom-background.aisb-stats--cards .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-light-surface-link-hover-brightness, 0.75));
  text-decoration: underline;
}

.aisb-stats--custom-background.aisb-stats--cards.aisb-section--dark .aisb-stats__description a:not([class]):hover {
  filter: brightness(var(--aisb-smart-dark-surface-link-hover-brightness, 1.2));
  text-decoration: underline;
}

/* Stats cards + custom background focus states */
.aisb-stats--custom-background.aisb-stats--cards .aisb-stats__description a:not([class]):focus,
.aisb-stats--custom-background.aisb-stats--cards.aisb-section--dark .aisb-stats__description a:not([class]):focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
/**
 * SECTION CONTENT BUTTON STYLES ONLY
 * ⚠️ WARNING: These styles are EXCLUSIVELY for buttons within section content (Hero, Features, etc.)
 * 
 * DO NOT USE THESE CLASSES FOR EDITOR UI COMPONENTS!
 * - Editor UI buttons should use: aisb-modal-button--primary/secondary
 * - Editor UI must remain isolated from user customization
 * 
 * These button styles respond to Global Settings color changes.
 * Editor UI components must NEVER use these classes to maintain consistent branding.
 */

/* Base Button Styles */
.aisb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* Prevent inherited text-align from affecting wrapped text */
  box-sizing: border-box; /* Ensure consistent rendering across editor and frontend contexts */
  padding: var(--aisb-section-space-sm) var(--aisb-section-space-lg);
  font-family: var(--aisb-section-font-button, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--aisb-section-text-base);
  font-weight: var(--aisb-section-font-button-weight, var(--aisb-section-font-medium));
  text-decoration: none;
  border-radius: var(--aisb-section-radius-button, var(--aisb-section-radius-md));
  transition: all var(--aisb-section-transition-base);
  cursor: pointer;
  border: 2px solid var(--aisb-transparent, transparent);
}

/* Primary Button */
.aisb-btn-primary {
  background: var(--aisb-button-primary-bg, var(--aisb-color-primary));
  color: var(--aisb-button-primary-text, var(--aisb-color-text-inverse));
  border: 2px solid var(--aisb-button-primary-bg, var(--aisb-color-primary));
}

.aisb-btn-primary:hover {
  filter: brightness(0.9);
  color: var(--aisb-button-primary-hover-text, var(--aisb-button-primary-text, var(--aisb-color-text-inverse)));
  text-decoration: none; /* Prevent theme link underline from affecting buttons */
}

/* Secondary Button - Solid with smart contrast background */
.aisb-btn-secondary {
  background: var(--aisb-button-secondary-bg, var(--aisb-color-secondary));
  color: var(--aisb-secondary-button-text, var(--aisb-color-text-inverse));
  border: 2px solid var(--aisb-button-secondary-bg, var(--aisb-color-secondary));
}

.aisb-btn-secondary:hover {
  filter: brightness(0.9);
  color: var(--aisb-secondary-button-hover-text, var(--aisb-secondary-button-text, var(--aisb-color-text-inverse)));
  text-decoration: none; /* Prevent theme link underline from affecting buttons */
}

/* Light mode ghost button - Use link smart colors for perfect sync */
.aisb-section--light .aisb-btn-ghost {
  background: var(--aisb-transparent, transparent);
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
  border: 2px solid var(--aisb-smart-light-section-link, var(--aisb-color-primary));
}

.aisb-section--light .aisb-btn-ghost:hover {
  background: var(--aisb-color-primary);
  filter: brightness(0.9);
  color: var(--aisb-button-primary-hover-text, var(--aisb-button-primary-text, var(--aisb-color-text-inverse)));
  text-decoration: none; /* Prevent theme link underline from affecting buttons */
}

/* Dark mode ghost button - Use link smart colors for perfect sync */
.aisb-section--dark .aisb-btn-ghost {
  background: var(--aisb-transparent, transparent);
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
  border: 2px solid var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
}

/* Dark Mode Ghost Button - Use calculated accessible text color on hover */
.aisb-section--dark .aisb-btn-ghost:hover {
  background: var(--aisb-color-primary);
  filter: brightness(0.9);
  color: var(--aisb-button-primary-hover-text, var(--aisb-button-primary-text, var(--aisb-color-text-inverse)));
  text-decoration: none; /* Prevent theme link underline from affecting buttons */
}

/* Dark Mode Primary Button - Use dark-context background calculation */
.aisb-section--dark .aisb-btn-primary {
  background: var(--aisb-button-primary-bg-dark, var(--aisb-color-primary));
  border-color: var(--aisb-button-primary-bg-dark, var(--aisb-color-primary));
}

/* Dark Mode Secondary Button - Use dark-context background calculation */
.aisb-section--dark .aisb-btn-secondary {
  background: var(--aisb-button-secondary-bg-dark, var(--aisb-color-secondary));
  border-color: var(--aisb-button-secondary-bg-dark, var(--aisb-color-secondary));
}

/* Accessible focus states - preserve button text colors */
.aisb-btn:focus,
.aisb-btn-primary:focus {
  outline: 2px solid var(--aisb-color-primary);
  outline-offset: 2px;
  color: var(--aisb-button-primary-text, var(--aisb-color-text-inverse));
  text-decoration: none;
}

.aisb-btn-secondary:focus {
  outline: 2px solid var(--aisb-color-primary);
  outline-offset: 2px;
  color: var(--aisb-secondary-button-text, var(--aisb-color-text-inverse));
  text-decoration: none;
}

/* Light mode ghost button focus */
.aisb-section--light .aisb-btn-ghost:focus {
  outline: 2px solid var(--aisb-smart-light-section-link, var(--aisb-color-primary));
  outline-offset: 2px;
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
  text-decoration: none;
}

/* Dark mode ghost button focus */
.aisb-section--dark .aisb-btn-ghost:focus {
  outline: 2px solid var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
  outline-offset: 2px;
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
  text-decoration: none;
}

/* Dark Mode Primary/Secondary Focus States */
.aisb-section--dark .aisb-btn:focus,
.aisb-section--dark .aisb-btn-primary:focus {
  outline-color: var(--aisb-color-primary);
  color: var(--aisb-button-primary-text, var(--aisb-color-text-inverse));
}

.aisb-section--dark .aisb-btn-secondary:focus {
  color: var(--aisb-secondary-button-text, var(--aisb-color-text-inverse));
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .aisb-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Pricing Section Specific: CTA Button Spacing */
.aisb-pricing__cta.aisb-btn {
  margin-top: var(--aisb-section-space-md);
  width: 100%;
}

/* Compact Button Variant - for product cards and smaller contexts */
.aisb-btn--compact {
  padding: var(--aisb-section-space-xs) var(--aisb-section-space-md);
  font-size: var(--aisb-section-text-sm);
}

/* Compact variants maintain all color and style inheritance */
.aisb-btn--compact.aisb-btn-primary {
  /* Inherits all primary button styles */
}

.aisb-btn--compact.aisb-btn-secondary {
  /* Inherits all secondary button styles */
}

.aisb-btn--compact.aisb-btn-ghost {
  /* Inherits all ghost button styles */
}

/* Compact buttons in mobile maintain full width like regular buttons */
@media (max-width: 640px) {
  .aisb-btn--compact {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   BUTTON HOVER EFFECT STYLES
   Applied via body class from Global Settings
   ============================================ */

/* Lift Effect - Button raises up with shadow */
body.aisb-hover-lift .aisb-btn-primary:hover,
body.aisb-hover-lift .aisb-btn-secondary:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.aisb-hover-lift .aisb-section--light .aisb-btn-ghost:hover,
body.aisb-hover-lift .aisb-section--dark .aisb-btn-ghost:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Scale Effect - Button grows slightly */
body.aisb-hover-scale .aisb-btn-primary:hover,
body.aisb-hover-scale .aisb-btn-secondary:hover {
  filter: none;
  transform: scale(1.03);
}

body.aisb-hover-scale .aisb-section--light .aisb-btn-ghost:hover,
body.aisb-hover-scale .aisb-section--dark .aisb-btn-ghost:hover {
  filter: none;
  transform: scale(1.03);
}

/* Glow Effect - Soft color glow around button */
body.aisb-hover-glow .aisb-btn-primary:hover {
  filter: none;
  box-shadow: 0 0 20px var(--aisb-button-glow-color, rgba(99, 102, 241, 0.4));
}

body.aisb-hover-glow .aisb-btn-secondary:hover {
  filter: none;
  box-shadow: 0 0 20px var(--aisb-secondary-glow-color, rgba(129, 140, 248, 0.4));
}

body.aisb-hover-glow .aisb-section--light .aisb-btn-ghost:hover,
body.aisb-hover-glow .aisb-section--dark .aisb-btn-ghost:hover {
  filter: none;
  box-shadow: 0 0 20px var(--aisb-button-glow-color, rgba(99, 102, 241, 0.4));
}

/* None Effect - Disable hover transitions */
body.aisb-hover-none .aisb-btn-primary:hover,
body.aisb-hover-none .aisb-btn-secondary:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

/* Ghost buttons with 'none' effect should not fill on hover */
body.aisb-hover-none .aisb-section--light .aisb-btn-ghost:hover {
  background: transparent;
  color: var(--aisb-smart-light-section-link, var(--aisb-color-primary));
  transform: none;
  box-shadow: none;
}

body.aisb-hover-none .aisb-section--dark .aisb-btn-ghost:hover {
  background: transparent;
  color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary));
  transform: none;
  box-shadow: none;
}

/* Reduced Motion Support - Disable transform effects for accessibility */
@media (prefers-reduced-motion: reduce) {
  body.aisb-hover-lift .aisb-btn:hover,
  body.aisb-hover-scale .aisb-btn:hover,
  body.aisb-hover-lift .aisb-btn-primary:hover,
  body.aisb-hover-lift .aisb-btn-secondary:hover,
  body.aisb-hover-lift .aisb-btn-ghost:hover,
  body.aisb-hover-scale .aisb-btn-primary:hover,
  body.aisb-hover-scale .aisb-btn-secondary:hover,
  body.aisb-hover-scale .aisb-btn-ghost:hover {
    transform: none;
  }
}

/* Print styles - !important acceptable for print overrides */
@media print {
  .aisb-btn,
  .aisb-btn--compact {
    background: var(--aisb-color-background) !important;
    color: var(--aisb-color-text) !important;
    border: 1px solid var(--aisb-color-border) !important;
  }
}
/**
 * Font Weight Styles - Global Override
 * Applies global font weight settings to ALL section elements
 * IMPORTED LAST for highest CSS specificity
 *
 * WHY !important IS REQUIRED HERE:
 * ================================
 * WordPress themes load their CSS AFTER plugin CSS in the cascade. Without
 * !important, theme styles override our Global Settings font weight customization,
 * causing user's font weight preferences to be ignored.
 *
 * The proper long-term solution would be to increase selector specificity:
 *   .aisb-section--hero .aisb-hero__heading { font-weight: ...; }
 * This requires refactoring ALL section CSS files.
 *
 * For now, !important ensures Global Settings work across all themes.
 */

/* ========================================
   HEADING ELEMENTS - Use heading font weight
   ======================================== */
.aisb-hero__heading,
.aisb-features__heading,
.aisb-features__card-heading,
.aisb-stats__heading,
.aisb-stats__value,
.aisb-testimonials__heading,
.aisb-testimonials__author,
.aisb-checklist__heading,
.aisb-checklist__item-heading,
.aisb-faq__heading,
.aisb-faq__question,
.aisb-team__heading,
.aisb-team__name,
.aisb-pricing__heading,
.aisb-pricing__name,
.aisb-pricing__price,
.aisb-steps__heading,
.aisb-steps__item-heading,
.aisb-steps__item-number {
  font-weight: var(--aisb-section-font-heading-weight, 600) !important;
}

/* ========================================
   BODY TEXT ELEMENTS - Use body font weight
   ======================================== */
.aisb-hero__content,
.aisb-hero__outro,
.aisb-features__content,
.aisb-features__card-content,
.aisb-features__outro,
.aisb-stats__label,
.aisb-stats__description,
.aisb-stats__outro,
.aisb-testimonials__content,
.aisb-testimonials__quote,
.aisb-testimonials__role,
.aisb-testimonials__outro,
.aisb-checklist__content,
.aisb-checklist__item-text,
.aisb-checklist__outro,
.aisb-faq__answer,
.aisb-faq__outro,
.aisb-team__content,
.aisb-team__bio,
.aisb-team__role,
.aisb-team__outro,
.aisb-pricing__content,
.aisb-pricing__description,
.aisb-pricing__features,
.aisb-pricing__period,
.aisb-pricing__outro,
.aisb-steps__content,
.aisb-steps__description,
.aisb-steps__outro,
.aisb-section__content,
.aisb-section__body,
.aisb-section__description,
.aisb-section__outro {
  font-weight: var(--aisb-section-font-body-weight, 400) !important;
}

/* ========================================
   EYEBROW HEADINGS - Use dedicated eyebrow typography settings
   ======================================== */
.aisb-hero__eyebrow,
.aisb-features__eyebrow,
.aisb-stats__eyebrow,
.aisb-testimonials__eyebrow,
.aisb-checklist__eyebrow,
.aisb-faq__eyebrow,
.aisb-team__eyebrow,
.aisb-pricing__eyebrow,
.aisb-steps__eyebrow,
.aisb-section__eyebrow {
  font-family: var(--aisb-section-font-eyebrow, var(--aisb-section-font-heading)) !important;
  font-weight: var(--aisb-section-font-eyebrow-weight, 600) !important;
}

/* ========================================
   BUTTON ELEMENTS - Use button font weight
   ======================================== */
.aisb-btn,
.aisb-btn-primary,
.aisb-btn-secondary,
.aisb-btn-ghost {
  font-weight: var(--aisb-section-font-button-weight, var(--aisb-section-font-medium)) !important;
}
/**
 * Minimal menu list styles
 * Follows industry standard spacing, inherits colors from parent
 */

/* Standard list with bullets */
.aisb-menu-list {
    margin: 0 0 1rem 0;
    padding: 0 0 0 1.25rem; /* Industry standard 20px indent for bullets */
    list-style: disc;
}

.aisb-menu-list li {
    margin: 0 0 0.5rem 0; /* Standard 8px spacing between items */
    line-height: 1.5;
}

.aisb-menu-list li:last-child {
    margin-bottom: 0;
}

/* No bullets variant */
.aisb-menu-list--no-bullets {
    list-style: none;
    padding-left: 0;
}

/* Links inherit all colors from parent context - smart color system handles accessibility */
.aisb-menu-list a {
    /* Color inherited from smart color system */
    /* Hover handled by section-specific rules below */
}

/* Remove underlines from menu links using specific selectors that override smart color system */
/* Light theme sections */
.aisb-section--light .aisb-hero__body .aisb-menu-list a,
.aisb-section--light .aisb-hero__content .aisb-menu-list a,
.aisb-section--light .aisb-hero__outro .aisb-menu-list a,
.aisb-section--light .aisb-features__body .aisb-menu-list a,
.aisb-section--light .aisb-features__content .aisb-menu-list a,
.aisb-section--light .aisb-features__outro .aisb-menu-list a,
.aisb-section--light .aisb-features__item-content .aisb-menu-list a,
.aisb-section--light .aisb-faq__body .aisb-menu-list a,
.aisb-section--light .aisb-faq__content .aisb-menu-list a,
.aisb-section--light .aisb-faq__outro .aisb-menu-list a,
.aisb-section--light .aisb-faq__item-answer-inner .aisb-menu-list a,
.aisb-section--light .aisb-testimonials__body .aisb-menu-list a,
.aisb-section--light .aisb-testimonials__content .aisb-menu-list a,
.aisb-section--light .aisb-testimonials__outro .aisb-menu-list a,
.aisb-section--light .aisb-team__body .aisb-menu-list a,
.aisb-section--light .aisb-team__content .aisb-menu-list a,
.aisb-section--light .aisb-team__outro .aisb-menu-list a,
.aisb-section--light .aisb-team__bio .aisb-menu-list a,
.aisb-section--light .aisb-checklist__body .aisb-menu-list a,
.aisb-section--light .aisb-checklist__content .aisb-menu-list a,
.aisb-section--light .aisb-checklist__outro .aisb-menu-list a,
.aisb-section--light .aisb-checklist__item-text .aisb-menu-list a,
.aisb-section--light .aisb-pricing__body .aisb-menu-list a,
.aisb-section--light .aisb-pricing__content .aisb-menu-list a,
.aisb-section--light .aisb-pricing__outro .aisb-menu-list a,
.aisb-section--light .aisb-pricing__product-description .aisb-menu-list a,
.aisb-section--light .aisb-stats__body .aisb-menu-list a,
.aisb-section--light .aisb-stats__content .aisb-menu-list a,
.aisb-section--light .aisb-stats__outro .aisb-menu-list a,
.aisb-section--light .aisb-stats__description .aisb-menu-list a,
.aisb-section--light .aisb-steps__body .aisb-menu-list a,
.aisb-section--light .aisb-steps__content .aisb-menu-list a,
.aisb-section--light .aisb-steps__outro .aisb-menu-list a,
.aisb-section--light .aisb-steps__item-description .aisb-menu-list a,
/* Dark theme sections */
.aisb-section--dark .aisb-hero__body .aisb-menu-list a,
.aisb-section--dark .aisb-hero__content .aisb-menu-list a,
.aisb-section--dark .aisb-hero__outro .aisb-menu-list a,
.aisb-section--dark .aisb-features__body .aisb-menu-list a,
.aisb-section--dark .aisb-features__content .aisb-menu-list a,
.aisb-section--dark .aisb-features__outro .aisb-menu-list a,
.aisb-section--dark .aisb-features__item-content .aisb-menu-list a,
.aisb-section--dark .aisb-faq__body .aisb-menu-list a,
.aisb-section--dark .aisb-faq__content .aisb-menu-list a,
.aisb-section--dark .aisb-faq__outro .aisb-menu-list a,
.aisb-section--dark .aisb-faq__item-answer-inner .aisb-menu-list a,
.aisb-section--dark .aisb-testimonials__body .aisb-menu-list a,
.aisb-section--dark .aisb-testimonials__content .aisb-menu-list a,
.aisb-section--dark .aisb-testimonials__outro .aisb-menu-list a,
.aisb-section--dark .aisb-team__body .aisb-menu-list a,
.aisb-section--dark .aisb-team__content .aisb-menu-list a,
.aisb-section--dark .aisb-team__outro .aisb-menu-list a,
.aisb-section--dark .aisb-team__bio .aisb-menu-list a,
.aisb-section--dark .aisb-checklist__body .aisb-menu-list a,
.aisb-section--dark .aisb-checklist__content .aisb-menu-list a,
.aisb-section--dark .aisb-checklist__outro .aisb-menu-list a,
.aisb-section--dark .aisb-checklist__item-text .aisb-menu-list a,
.aisb-section--dark .aisb-pricing__body .aisb-menu-list a,
.aisb-section--dark .aisb-pricing__content .aisb-menu-list a,
.aisb-section--dark .aisb-pricing__outro .aisb-menu-list a,
.aisb-section--dark .aisb-pricing__product-description .aisb-menu-list a,
.aisb-section--dark .aisb-stats__body .aisb-menu-list a,
.aisb-section--dark .aisb-stats__content .aisb-menu-list a,
.aisb-section--dark .aisb-stats__outro .aisb-menu-list a,
.aisb-section--dark .aisb-stats__description .aisb-menu-list a,
.aisb-section--dark .aisb-steps__body .aisb-menu-list a,
.aisb-section--dark .aisb-steps__content .aisb-menu-list a,
.aisb-section--dark .aisb-steps__outro .aisb-menu-list a,
.aisb-section--dark .aisb-steps__item-description .aisb-menu-list a {
    text-decoration: none;
}

/* Hover state for menu links - use calculated brightness for custom backgrounds */
/* Light mode - use calculated brightness or default to darken */
.aisb-section--light .aisb-menu-list a:hover {
    filter: brightness(var(--aisb-smart-light-link-hover-brightness, 0.75));
    text-decoration: none;
}

/* Dark mode - use calculated brightness or default to brighten */
.aisb-section--dark .aisb-menu-list a:hover {
    filter: brightness(var(--aisb-smart-dark-link-hover-brightness, 1.2));
    text-decoration: none;
}

/* Nested menu support for hierarchical menus */
.aisb-menu-list ul {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    list-style: circle;
}

.aisb-menu-list--no-bullets ul {
    list-style: none;
    margin-left: 1rem; /* Slight indent for visual hierarchy */
}

/* Ensure proper spacing in rich text context */
.aisb-features__body .aisb-menu-list,
.aisb-hero__body .aisb-menu-list,
.aisb-faq__item-answer-inner .aisb-menu-list,
.aisb-testimonials__body .aisb-menu-list,
.aisb-team__body .aisb-menu-list,
.aisb-checklist__content .aisb-menu-list,
.aisb-pricing__body .aisb-menu-list,
.aisb-stats__body .aisb-menu-list,
.aisb-steps__body .aisb-menu-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* When menu is the last element in a content area */
.aisb-features__body .aisb-menu-list:last-child,
.aisb-hero__body .aisb-menu-list:last-child,
.aisb-faq__item-answer-inner .aisb-menu-list:last-child,
.aisb-testimonials__body .aisb-menu-list:last-child,
.aisb-team__body .aisb-menu-list:last-child,
.aisb-checklist__content .aisb-menu-list:last-child,
.aisb-pricing__body .aisb-menu-list:last-child,
.aisb-stats__body .aisb-menu-list:last-child,
.aisb-steps__body .aisb-menu-list:last-child {
    margin-bottom: 0;
}

/* When menu is the first element in a content area */
.aisb-features__body .aisb-menu-list:first-child,
.aisb-hero__body .aisb-menu-list:first-child,
.aisb-faq__item-answer-inner .aisb-menu-list:first-child,
.aisb-testimonials__body .aisb-menu-list:first-child,
.aisb-team__body .aisb-menu-list:first-child,
.aisb-checklist__content .aisb-menu-list:first-child,
.aisb-pricing__body .aisb-menu-list:first-child,
.aisb-stats__body .aisb-menu-list:first-child,
.aisb-steps__body .aisb-menu-list:first-child {
    margin-top: 0;
}
/**
 * Neo-Brutalist Mode Styles
 * Adds heavy borders and 3D shadow effects to cards and buttons
 * Now with separate controls for cards and buttons
 * Works with any border radius setting for creative flexibility
 *
 * ARCHITECTURE NOTE:
 * - .aisb-neo-brutalist-cards is applied to <body> element
 * - .aisb-section--dark is applied to individual <section> elements
 * - Dark mode selectors must use descendant syntax, not compound syntax
 */

/* ============================================
   CARDS - Neo-Brutalist Styles (Light Mode)
   ============================================ */

/* Features Cards - Using design tokens
 * EXCLUDES minimal variants (showcase, inline, minimal) that have no surface backgrounds
 */
.aisb-neo-brutalist-cards .aisb-features:not(.aisb-features--minimal):not(.aisb-features--showcase):not(.aisb-features--inline):not(.aisb-features--hero) .aisb-features__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Testimonials Cards - Using design tokens */
.aisb-neo-brutalist-cards .aisb-testimonials__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Pricing Plans - Using design tokens */
.aisb-neo-brutalist-cards .aisb-pricing__card {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Product Cards (when pricing section is in product mode) - Using design tokens */
.aisb-neo-brutalist-cards .aisb-pricing__product-card {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Featured Pricing Plan - Larger shadow using design token */
.aisb-neo-brutalist-cards .aisb-pricing__card--featured {
  box-shadow: var(--aisb-neo-shadow-offset-large) var(--aisb-neo-shadow-offset-large) 0 var(--section-border, var(--aisb-color-border));
}

/* FAQ Items - Using design tokens */
.aisb-neo-brutalist-cards .aisb-faq__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Hero Banner Card (CTA Banner mode) - Using design tokens */
.aisb-neo-brutalist-cards .aisb-hero__banner-wrapper {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Stats Cards (when using cards variant) - Using design tokens */
.aisb-neo-brutalist-cards .aisb-stats--cards .aisb-stats__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Post Grid Cards - Using design tokens
 * EXCLUDES minimal/hero variants that have no surface backgrounds
 */
.aisb-neo-brutalist-cards .aisb-postgrid:not(.aisb-features--minimal):not(.aisb-features--hero) .aisb-postgrid__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* Product Grid Cards (WooCommerce) - Using design tokens
 * EXCLUDES minimal variant that has no surface background
 */
.aisb-neo-brutalist-cards .aisb-productgrid:not(.aisb-features--minimal) .aisb-productgrid__item {
  border: var(--aisb-neo-border-width) solid var(--section-border, var(--aisb-color-border));
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--section-border, var(--aisb-color-border));
}

/* ============================================
   CARDS - Neo-Brutalist Styles (Dark Mode)
   ============================================ */

/*
 * IMPORTANT: Dark mode selectors use descendant syntax because:
 * - .aisb-neo-brutalist-cards is on <body>
 * - .aisb-section--dark is on <section> (a descendant of body)
 *
 * WRONG: .aisb-section--dark.aisb-neo-brutalist-cards (compound - same element)
 * RIGHT: .aisb-neo-brutalist-cards .aisb-section--dark (descendant - different elements)
 */

/* Dark Mode Support for Cards - Using design tokens
 * Features dark mode EXCLUDES minimal variants (showcase, inline, minimal, hero)
 */
.aisb-neo-brutalist-cards .aisb-section--dark.aisb-features:not(.aisb-features--minimal):not(.aisb-features--showcase):not(.aisb-features--inline):not(.aisb-features--hero) .aisb-features__item,
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-testimonials__item,
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-pricing__card,
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-pricing__product-card,
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-faq__item,
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-hero__banner-wrapper {
  border-color: var(--aisb-color-dark-border);
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--aisb-color-dark-border);
}

/* Stats Cards Dark Mode - needs extra specificity due to base selector */
.aisb-neo-brutalist-cards .aisb-section--dark.aisb-stats--cards .aisb-stats__item {
  border-color: var(--aisb-color-dark-border);
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--aisb-color-dark-border);
}

/* Post Grid and Product Grid Dark Mode
 * EXCLUDES minimal/hero variants that have no surface backgrounds
 */
.aisb-neo-brutalist-cards .aisb-section--dark.aisb-postgrid:not(.aisb-features--minimal):not(.aisb-features--hero) .aisb-postgrid__item,
.aisb-neo-brutalist-cards .aisb-section--dark.aisb-productgrid:not(.aisb-features--minimal) .aisb-productgrid__item {
  border-color: var(--aisb-color-dark-border);
  box-shadow: var(--aisb-neo-shadow-offset) var(--aisb-neo-shadow-offset) 0 var(--aisb-color-dark-border);
}

/* Featured pricing plan in dark mode - Using design token */
.aisb-neo-brutalist-cards .aisb-section--dark .aisb-pricing__card--featured {
  box-shadow: var(--aisb-neo-shadow-offset-large) var(--aisb-neo-shadow-offset-large) 0 var(--aisb-color-dark-border);
}

/* ============================================
   CARDS - Stacking Context
   ============================================ */

/* Ensure proper stacking context for cards
 * EXCLUDES minimal variants that have no surface backgrounds - no stacking needed
 */
.aisb-neo-brutalist-cards .aisb-features:not(.aisb-features--minimal):not(.aisb-features--showcase):not(.aisb-features--inline):not(.aisb-features--hero) .aisb-features__item,
.aisb-neo-brutalist-cards .aisb-testimonials__item,
.aisb-neo-brutalist-cards .aisb-pricing__card,
.aisb-neo-brutalist-cards .aisb-pricing__product-card,
.aisb-neo-brutalist-cards .aisb-faq__item,
.aisb-neo-brutalist-cards .aisb-hero__banner-wrapper,
.aisb-neo-brutalist-cards .aisb-stats--cards .aisb-stats__item,
.aisb-neo-brutalist-cards .aisb-postgrid:not(.aisb-features--minimal):not(.aisb-features--hero) .aisb-postgrid__item,
.aisb-neo-brutalist-cards .aisb-productgrid:not(.aisb-features--minimal) .aisb-productgrid__item {
  position: relative;
  z-index: 1;
}

/* ============================================
   BUTTONS - Neo-Brutalist Styles (Light Mode)
   ============================================ */

.aisb-neo-brutalist-buttons .aisb-btn-primary {
  border: var(--aisb-neo-border-width-button) solid var(--aisb-neo-brutalist-primary-border, var(--aisb-color-primary));
  box-shadow: var(--aisb-neo-shadow-offset-button) var(--aisb-neo-shadow-offset-button) 0 var(--aisb-neo-brutalist-primary-border, var(--aisb-color-primary));
  transition: all 0.2s ease;
}

.aisb-neo-brutalist-buttons .aisb-btn-secondary {
  border: var(--aisb-neo-border-width-button) solid var(--aisb-neo-brutalist-secondary-border, var(--aisb-color-secondary));
  box-shadow: var(--aisb-neo-shadow-offset-button) var(--aisb-neo-shadow-offset-button) 0 var(--aisb-neo-brutalist-secondary-border, var(--aisb-color-secondary));
  transition: all 0.2s ease;
}

/* ============================================
   BUTTONS - Neo-Brutalist Styles (Dark Mode)
   ============================================ */

/*
 * Dark mode button selectors also use descendant syntax
 * .aisb-neo-brutalist-buttons is on <body>
 * .aisb-section--dark is on <section>
 */

.aisb-neo-brutalist-buttons .aisb-section--dark .aisb-btn-primary {
  border: var(--aisb-neo-border-width-button) solid var(--aisb-neo-brutalist-primary-border-dark, var(--aisb-color-primary));
  box-shadow: var(--aisb-neo-shadow-offset-button) var(--aisb-neo-shadow-offset-button) 0 var(--aisb-neo-brutalist-primary-border-dark, var(--aisb-color-primary));
}

.aisb-neo-brutalist-buttons .aisb-section--dark .aisb-btn-secondary {
  border: var(--aisb-neo-border-width-button) solid var(--aisb-neo-brutalist-secondary-border-dark, var(--aisb-color-secondary));
  box-shadow: var(--aisb-neo-shadow-offset-button) var(--aisb-neo-shadow-offset-button) 0 var(--aisb-neo-brutalist-secondary-border-dark, var(--aisb-color-secondary));
}

/* ============================================
   BUTTONS - Hover Effects
   ============================================ */

/* Light mode hover */
.aisb-neo-brutalist-buttons .aisb-btn-primary:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--aisb-neo-shadow-offset-button-hover) var(--aisb-neo-shadow-offset-button-hover) 0 var(--aisb-neo-brutalist-primary-border, var(--aisb-color-primary));
}

.aisb-neo-brutalist-buttons .aisb-btn-secondary:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--aisb-neo-shadow-offset-button-hover) var(--aisb-neo-shadow-offset-button-hover) 0 var(--aisb-neo-brutalist-secondary-border, var(--aisb-color-secondary));
}

/* Dark mode hover */
.aisb-neo-brutalist-buttons .aisb-section--dark .aisb-btn-primary:hover {
  box-shadow: var(--aisb-neo-shadow-offset-button-hover) var(--aisb-neo-shadow-offset-button-hover) 0 var(--aisb-neo-brutalist-primary-border-dark, var(--aisb-color-primary));
}

.aisb-neo-brutalist-buttons .aisb-section--dark .aisb-btn-secondary:hover {
  box-shadow: var(--aisb-neo-shadow-offset-button-hover) var(--aisb-neo-shadow-offset-button-hover) 0 var(--aisb-neo-brutalist-secondary-border-dark, var(--aisb-color-secondary));
}

/* Disable transform on mobile for better UX */
@media (max-width: 768px) {
  .aisb-neo-brutalist-buttons .aisb-btn-primary:hover,
  .aisb-neo-brutalist-buttons .aisb-btn-secondary:hover {
    transform: none;
  }
}

/**
 * CORE COMPONENTS - Site-wide styles for native themes
 *
 * This file loads on ALL pages for themes that declare `aisb-native-theme` support,
 * ensuring buttons, links, and neo-brutalist styles work correctly throughout the site.
 *
 * ARCHITECTURE:
 * - Uses @import to maintain single source of truth with frontend.css
 * - Changes in component files automatically apply everywhere
 * - No maintenance burden or risk of style drift
 *
 * When to load:
 * - Native theme pages WITHOUT sections (404, archive, search, etc.)
 *
 * When NOT to load:
 * - Section pages (frontend.css includes these styles already)
 * - Non-native themes (they handle their own styling)
 *
 * @since 1.2.0
 */

/* ==========================================================================
   DESIGN TOKENS (Required for component styling)
   Same tokens used by frontend.css
   ========================================================================== */

/* ==========================================================================
   SITE-WIDE COMPONENT STYLES
   Same files imported by frontend.css - single source of truth
   ========================================================================== */

/* Button styles for aisb-btn, aisb-btn-primary, aisb-btn-secondary, aisb-btn-ghost */

/* Font weight overrides for typography consistency */

/* Menu list styles for lists within sections and theme content */

/* ==========================================================================
   NEO-BRUTALIST STYLES
   Activated by body classes (.aisb-neo-brutalist-cards, .aisb-neo-brutalist-buttons)
   Body classes are added by PHP when Global Settings enable these features
   ========================================================================== */

/* ==========================================================================
   LINK STYLES
   Ensure links use proper accessible colors from CSS variables
   These styles work with smart color system for accessibility
   ========================================================================== */

/* Links within light theme contexts */
/* Excludes plugin buttons (.aisb-btn) and WooCommerce action buttons:
   - .button (WooCommerce generic button class - e.g., Return to shop)
   - .remove (cart remove link)
   - .add_to_cart_button (Add to Cart)
   - .added_to_cart (View Cart after adding)
   - .checkout-button (Proceed to Checkout link)
   - .wc-forward (WooCommerce forward navigation)
   - .product_type_grouped (View Products for grouped)
   - .product_type_external (external product links)
   - .page-numbers (pagination links)
*/
.aisb-section--light a:not(.aisb-btn):not(.button):not(.remove):not(.add_to_cart_button):not(.added_to_cart):not(.checkout-button):not(.wc-forward):not(.product_type_grouped):not(.product_type_external):not(.page-numbers) {
  color: var(--aisb-smart-light-section-link, var(--aisb-link-color, var(--aisb-color-primary)));
}

.aisb-section--light a:not(.aisb-btn):not(.button):not(.remove):not(.add_to_cart_button):not(.added_to_cart):not(.checkout-button):not(.wc-forward):not(.product_type_grouped):not(.product_type_external):not(.page-numbers):hover {
  text-decoration: underline;
}

/* Links within dark theme contexts */
/* Same exclusions as light theme */
.aisb-section--dark a:not(.aisb-btn):not(.button):not(.remove):not(.add_to_cart_button):not(.added_to_cart):not(.checkout-button):not(.wc-forward):not(.product_type_grouped):not(.product_type_external):not(.page-numbers) {
  color: var(--aisb-smart-dark-section-link, var(--aisb-link-color-dark, var(--aisb-color-primary)));
}

.aisb-section--dark a:not(.aisb-btn):not(.button):not(.remove):not(.add_to_cart_button):not(.added_to_cart):not(.checkout-button):not(.wc-forward):not(.product_type_grouped):not(.product_type_external):not(.page-numbers):hover {
  text-decoration: underline;
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT NAVIGATION
   These require high specificity to override the main link rules (0,11,1).
   The main link rules have 10 :not() clauses = 0,11,1 specificity.
   Using 9x [href] attribute selectors achieves 0,12,1 to beat it.
   CRITICAL: Light and dark modes MUST use different text colors!
   ========================================================================== */

/* Light mode - non-active nav links use dark text */
.aisb-section--light .woocommerce-MyAccount-navigation a[href][href][href][href][href][href][href][href][href] {
  color: var(--aisb-color-text, #1f2937);
  text-decoration: none;
}

/* Dark mode - non-active nav links use LIGHT text */
.aisb-section--dark .woocommerce-MyAccount-navigation a[href][href][href][href][href][href][href][href][href] {
  color: var(--aisb-color-dark-text, #f9fafb);
  text-decoration: none;
}

/* Active nav link - white text on primary background (both modes) */
.aisb-section--light .woocommerce-MyAccount-navigation li.is-active a[href][href][href][href][href][href][href][href][href],
.aisb-section--dark .woocommerce-MyAccount-navigation li.is-active a[href][href][href][href][href][href][href][href][href] {
  color: var(--aisb-button-primary-text, #ffffff);
}

/* Light mode hover - use smart button text for contrast on primary background */
.aisb-section--light .woocommerce-MyAccount-navigation a[href][href][href][href][href][href][href][href][href]:hover {
  color: var(--aisb-button-primary-text, #ffffff);
  text-decoration: none;
}

/* Dark mode hover - use smart button text for contrast on primary background */
.aisb-section--dark .woocommerce-MyAccount-navigation a[href][href][href][href][href][href][href][href][href]:hover {
  color: var(--aisb-button-primary-text, #ffffff);
  text-decoration: none;
}

/* ==========================================================================
   WOOCOMMERCE SHOW PASSWORD BUTTON
   WordPress uses inline SVG with hardcoded dark colors. We override with
   CSS filter to invert colors in dark mode for proper visibility.
   ========================================================================== */

/* Light mode - use dark icon (WordPress default works) */
.aisb-section--light .show-password-input {
  /* Default WordPress styling is fine for light mode */
  opacity: 0.7;
}

.aisb-section--light .show-password-input:hover,
.aisb-section--light .show-password-input:focus {
  opacity: 1;
}

/* Dark mode - invert the icon to make it visible */
.aisb-section--dark .show-password-input {
  filter: invert(1);
  opacity: 0.7;
}

.aisb-section--dark .show-password-input:hover,
.aisb-section--dark .show-password-input:focus {
  opacity: 1;
}

/* Focus state for accessibility */
.show-password-input:focus {
  outline: 2px solid var(--aisb-color-primary, #6366f1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .aisb-btn,
  .aisb-btn--compact {
    background: var(--aisb-color-background) !important;
    color: var(--aisb-color-text) !important;
    border: 1px solid var(--aisb-color-border) !important;
  }
}