/* Theme Name: SiteKrafter-Pro
  Theme URI: https://sitekrafter.com
  Version: 7.0.0
  Template: Divi
  Author: Mak
  Author URI: https://diviuniversity.com
  Description: SiteKrafter Pro helps you build websites faster, with better structure, consistency, and scalability.
  Website: https://sitekrafter.com
*/

/* ==========================================================================
   BASE STYLES & RESET
   ========================================================================== */

/* Conservative Reset - Divi 5 Compatible */
.sk-reset *,
.sk-reset *::before,
.sk-reset *::after {
  box-sizing: border-box;
}

.sk-reset {
  margin: 0;
  padding: 0;
}

/* Keep the safe styles that don't conflict with Divi */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:focus-within {
  scroll-behavior: smooth;
}

/* Only apply font-size when specifically needed - avoid global override */
.sk-custom-font-size {
  font-size: var(--font-base-size);
}

/* Scoped body styles - only apply when using SiteKrafter classes */
.sk-typography {
  font-family: var(--font-secondary);
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
}

/* Optional: Apply to specific contexts */
body.sk-custom-typography {
  font-family: var(--font-secondary);
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
}

/* ==========================================================================
   DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-base-size: 62.5%; /* 10px */
  
  /* Font Families */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-tertiary: 'Montserrat', sans-serif;
  
  /* Typography Scale - Modern UI/UX Best Practices */
  --text-xs: clamp(0.75rem, calc(0.2vw + 0.7rem), 0.875rem);    /* 12px - 14px */
  --text-s: clamp(0.875rem, calc(0.3vw + 0.8rem), 1rem);       /* 14px - 16px */
  --text-m: clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem);       /* 16px - 18px */
  --text-l: clamp(1.125rem, calc(0.5vw + 1rem), 1.25rem);      /* 18px - 20px */
  --text-xl: clamp(1.25rem, calc(0.6vw + 1.1rem), 1.5rem);     /* 20px - 24px */
  --text-2xl: clamp(1.5rem, calc(1vw + 1.3rem), 2rem);         /* 24px - 32px */
  --text-3xl: clamp(2rem, calc(1.5vw + 1.7rem), 2.5rem);       /* 32px - 40px */
  --text-4xl: clamp(2.5rem, calc(2vw + 2rem), 3rem);           /* 40px - 48px */
  
  /* Heading Sizes - Modern UI/UX Best Practices */
  --sk-heading-9xl: clamp(4rem, calc(8vw + 2rem), 8rem);        /* 64px - 128px - Hero displays */
  --sk-heading-8xl: clamp(3.5rem, calc(6vw + 2rem), 6rem);      /* 56px - 96px - Large displays */
  --sk-heading-7xl: clamp(3rem, calc(4vw + 2rem), 4.5rem);      /* 48px - 72px - Section headers */
  --sk-heading-6xl: clamp(2.5rem, calc(3vw + 1.5rem), 3.75rem); /* 40px - 60px - Page titles */
  --sk-heading-5xl: clamp(2rem, calc(2vw + 1.5rem), 3rem);      /* 32px - 48px - Main headings */
  --sk-heading-4xl: clamp(1.75rem, calc(1.5vw + 1.25rem), 2.25rem); /* 28px - 36px - H1 */
  --sk-heading-3xl: clamp(1.5rem, calc(1vw + 1.25rem), 1.875rem);   /* 24px - 30px - H2 */
  --sk-heading-2xl: clamp(1.25rem, calc(0.8vw + 1.1rem), 1.5rem);   /* 20px - 24px - H3 */
  --sk-heading-xl:  clamp(1.125rem, calc(0.6vw + 1rem), 1.25rem);   /* 18px - 20px - H4 */
  --sk-heading-l:   clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem);    /* 16px - 18px - H5 */
  --sk-heading-m:   clamp(0.875rem, calc(0.3vw + 0.8rem), 1rem);    /* 14px - 16px - H6 */
  --sk-heading-s:   clamp(0.75rem, calc(0.2vw + 0.7rem), 0.875rem); /* 12px - 14px - Small headings */
  
  /* Heading Aliases for compatibility */
  --heading-9xl: var(--sk-heading-9xl);
  --heading-8xl: var(--sk-heading-8xl);
  --heading-7xl: var(--sk-heading-7xl);
  --heading-6xl: var(--sk-heading-6xl);
  --heading-5xl: var(--sk-heading-5xl);
  --heading-4xl: var(--sk-heading-4xl);
  --heading-3xl: var(--sk-heading-3xl);
  --heading-2xl: var(--sk-heading-2xl);
  --heading-xl: var(--sk-heading-xl);
  --heading-l: var(--sk-heading-l);
  --heading-m: var(--sk-heading-m);
  --heading-s: var(--sk-heading-s);
  
  /* Line Heights - Modern UI/UX Best Practices */
  --line-height-tight: 1.1;    /* For large headings */
  --line-height-snug: 1.25;    /* For headings */
  --line-height-normal: 1.5;   /* For body text */
  --line-height-relaxed: 1.6;  /* For comfortable reading */
  --line-height-loose: 1.75;   /* For accessibility */
  
  /* Text-specific line heights */
  --line-height-text-xs: 1.4;
  --line-height-text-s: 1.45;
  --line-height-text-m: 1.5;
  --line-height-text-l: 1.55;
  --line-height-text-xl: 1.6;
  --line-height-text-2xl: 1.4;
  --line-height-text-3xl: 1.3;
  --line-height-text-4xl: 1.25;
  
  /* Heading-specific line heights */
  --line-height-heading-9xl: 1.1;
  --line-height-heading-8xl: 1.1;
  --line-height-heading-7xl: 1.15;
  --line-height-heading-6xl: 1.2;
  --line-height-heading-5xl: 1.2;
  --line-height-heading-4xl: 1.25;
  --line-height-heading-3xl: 1.3;
  --line-height-heading-2xl: 1.35;
  --line-height-heading-xl: 1.4;
  --line-height-heading-l: 1.45;
  --line-height-heading-m: 1.5;
  --line-height-heading-s: 1.5;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.15em;

  /* ===== COLORS ===== */
  
  /* Primary Color Tokens */
  --pri-h: 235;
  --pri-s: 84%;
  
  /* Accent Color Tokens */
  --acc-h: 344;
  --acc-s: 91%;
  
  /* Primary Color Scale */
  --pri-50: hsl(var(--pri-h), var(--pri-s), 97%);
  --pri-100: hsl(var(--pri-h), var(--pri-s), 90%);
  --pri-200: hsl(var(--pri-h), var(--pri-s), 80%);
  --pri-300: hsl(var(--pri-h), var(--pri-s), 70%);
  --pri-400: hsl(var(--pri-h), var(--pri-s), 60%);
  --pri-500: hsl(var(--pri-h), var(--pri-s), 50%);
  --pri-600: hsl(var(--pri-h), var(--pri-s), 40%);
  --pri-700: hsl(var(--pri-h), var(--pri-s), 30%);
  --pri-800: hsl(var(--pri-h), var(--pri-s), 20%);
  --pri-900: hsl(var(--pri-h), var(--pri-s), 10%);
  
  /* Accent Color Scale */
  --acc-50: hsl(var(--acc-h), var(--acc-s), 97%);
  --acc-100: hsl(var(--acc-h), var(--acc-s), 90%);
  --acc-200: hsl(var(--acc-h), var(--acc-s), 80%);
  --acc-300: hsl(var(--acc-h), var(--acc-s), 70%);
  --acc-400: hsl(var(--acc-h), var(--acc-s), 60%);
  --acc-500: hsl(var(--acc-h), var(--acc-s), 50%);
  --acc-600: hsl(var(--acc-h), var(--acc-s), 40%);
  --acc-700: hsl(var(--acc-h), var(--acc-s), 30%);
  --acc-800: hsl(var(--acc-h), var(--acc-s), 20%);
  --acc-900: hsl(var(--acc-h), var(--acc-s), 10%);
  
  /* Grayscale */
  --gray-50: hsl(0, 0%, 98%);
  --gray-100: hsl(0, 0%, 96%);
  --gray-200: hsl(0, 0%, 90%);
  --gray-300: hsl(0, 0%, 83%);
  --gray-400: hsl(0, 0%, 64%);
  --gray-500: hsl(0, 0%, 45%);
  --gray-600: hsl(0, 0%, 32%);
  --gray-700: hsl(0, 0%, 25%);
  --gray-800: hsl(0, 0%, 15%);
  --gray-900: hsl(0, 0%, 9%);
  
  /* Semantic Colors */
  --success: hsl(120, 100%, 69%);
  --warning: hsl(61, 100%, 48%);
  --error: hsl(0, 100%, 71%);
  --info: hsl(217, 100%, 76%);
  --info-light: hsl(217, 100%, 95%);
  --warning-light: hsl(45, 100%, 90%);
  --success-light: hsl(140, 70%, 90%);
  --error-light: hsl(0, 100%, 94%);
  
  /* Color Aliases */
  --white: #ffffff;
  --black: #000000;
  --pri: var(--pri-500);
  --pri-light: var(--pri-300);
  --pri-dark: var(--pri-700);
  --acc: var(--acc-500);
  --acc-light: var(--acc-300);
  --acc-dark: var(--acc-700);
  --text-dark: var(--gray-900);
  --text-medium: var(--gray-700);
  --text-light: var(--gray-100);
  --text-white: var(--white);
  --bg-light: var(--gray-50);
  --bg-dark: var(--gray-900);
  --bg-muted: var(--gray-100);
  --on-primary: var(--white);
  
  /* Transparent Colors */
  --pri-500-t10: hsl(var(--pri-h) var(--pri-s) 50% / 0.1);
  --pri-500-t25: hsl(var(--pri-h) var(--pri-s) 50% / 0.25);
  --pri-500-t50: hsl(var(--pri-h) var(--pri-s) 50% / 0.5);
  --pri-500-t75: hsl(var(--pri-h) var(--pri-s) 50% / 0.75);
  --acc-500-t10: hsl(var(--acc-h) var(--acc-s) 50% / 0.1);
  --acc-500-t25: hsl(var(--acc-h) var(--acc-s) 50% / 0.25);
  --acc-500-t50: hsl(var(--acc-h) var(--acc-s) 50% / 0.5);
  --acc-500-t75: hsl(var(--acc-h) var(--acc-s) 50% / 0.75);
  --gray-500-t10: hsl(0 0% 45% / 0.1);
  --gray-500-t25: hsl(0 0% 45% / 0.25);
  --gray-500-t50: hsl(0 0% 45% / 0.5);
  --gray-500-t75: hsl(0 0% 45% / 0.75);
  --error-500-t10: hsl(0 100% 71% / 0.1);
  --error-500-t25: hsl(0 100% 71% / 0.25);
  --error-500-t50: hsl(0 100% 71% / 0.5);
  --error-500-t75: hsl(0 100% 71% / 0.75);

  /* ===== SPACING & SIZING ===== */
  
  /* Spacing Scale */
  --spacing-xs: clamp(0.5rem, 1vw, 0.81rem);
  --spacing-s: clamp(0.81rem, 2vw, 1.31rem);
  --spacing-m: clamp(1.31rem, 3vw, 2.11rem);
  --spacing-l: clamp(2.11rem, 5vw, 3.42rem);
  --spacing-xl: clamp(3.42rem, 7vw, 5.53rem);
  
  /* Container & Layout */
  --container-max-width: clamp(320px, 95vw, 1366px);
  --container-padding: clamp(1.6rem, 3vw, 4rem);
  --section-padding-block: clamp(3.2rem, 7vw, 8rem);
  --sec-padding-s: clamp(3.8rem, 7vw, 6.2rem) clamp(2.4rem, 5vw, 4rem);
  --sec-padding-m: clamp(6.2rem, 9vw, 10rem) clamp(4rem, 6.5vw, 6.5rem);
  --sec-padding-l: clamp(10rem, 11vw, 16.2rem) clamp(6.5rem, 7.5vw, 10.5rem);
  --sec-padding-hero: clamp(16.2rem, 13vw, 26.2rem) clamp(10.5rem, 9vw, 16.8rem);
  --grid-gap: var(--spacing-m);

  /* ===== VISUAL EFFECTS ===== */
  
  /* Shadows */
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-m: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-l: 0px 10px 15px rgba(0, 0, 0, 0.05), 0px 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.1);
  --shadow-inset: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --radius-xs: clamp(0.4rem, 0.4vw, 0.5rem);
  --radius-s: clamp(0.5rem, 0.5vw, 0.63rem);
  --radius-m: clamp(0.63rem, 0.6vw, 0.78rem);
  --radius-l: clamp(0.78rem, 0.7vw, 0.98rem);
  --radius-xl: clamp(0.98rem, 0.8vw, 1.22rem);
  --radius-full: 999rem;
  
  /* Transitions */
  --transition-fast: 0.1s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* ===== ACCESSIBILITY ===== */
  
  --focus-outline-width: 3px;
  --focus-color: #f90;
  --focus-outline-offset: 2px;
  --focus-shadow: 0 0 0 3px rgba(255, 153, 0, 0.4);

  /* ===== BREAKPOINTS ===== */
  
  --breakpoint-xs: 480px;  /* Extra small devices */
  --breakpoint-sm: 768px;  /* Small devices (tablets) */
  --breakpoint-md: 992px;  /* Medium devices (desktops) */
  --breakpoint-lg: 1200px; /* Large devices (large desktops) */
  --breakpoint-xl: 1440px; /* Extra large devices */
  --breakpoint-2xl: 1920px; /* 2K displays */
  --breakpoint-4k: 3840px; /* 4K displays */
}

/* ==========================================================================
   DIVI INTEGRATION & OVERRIDES
   ========================================================================== */

/* Editor Overrides */
.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-font-icon-filter,
.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-options-filter {
  top: 0;
  margin-top: 0;
}

/* Divi Module Enhancements */
.et_pb_module {
  width: 100%; /* Ensures modules take full grid width */
  height: 100%; /* Ensures row-spanned modules stretch */
}

/* Divi Text Module Overrides */
.et_pb_text {
  margin: 0 !important;
}

/* Divi Button Overrides */
button, .et_pb_button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   UTILITY CLASSES - TYPOGRAPHY
   ========================================================================== */

/* Font Families */
.accent-text {
  font-family: var(--font-tertiary);
}

/* Font Sizes with Line Heights */
.text-xs  { 
  font-size: var(--text-xs) !important; 
  line-height: var(--line-height-text-xs) !important;
}
.text-s   { 
  font-size: var(--text-s) !important; 
  line-height: var(--line-height-text-s) !important;
}
.text-m   { 
  font-size: var(--text-m) !important; 
  line-height: var(--line-height-text-m) !important;
}
.text-l   { 
  font-size: var(--text-l) !important; 
  line-height: var(--line-height-text-l) !important;
}
.text-xl  { 
  font-size: var(--text-xl) !important; 
  line-height: var(--line-height-text-xl) !important;
}
.text-2xl { 
  font-size: var(--text-2xl) !important; 
  line-height: var(--line-height-text-2xl) !important;
}
.text-3xl { 
  font-size: var(--text-3xl) !important; 
  line-height: var(--line-height-text-3xl) !important;
}
.text-4xl { 
  font-size: var(--text-4xl) !important; 
  line-height: var(--line-height-text-4xl) !important;
}

/* Font Weights */
.font-100 { font-weight: 100 !important; }
.font-200 { font-weight: 200 !important; }
.font-300 { font-weight: 300 !important; }
.font-400, .font-normal { font-weight: 400 !important; }
.font-500 { font-weight: 500 !important; }
.font-600, .font-semibold { font-weight: 600 !important; }
.font-700, .font-bold { font-weight: 700 !important; }
.font-800, .font-extrabold { font-weight: 800 !important; }
.font-900 { font-weight: 900 !important; }

/* Text Transform */
.text-uppercase     { text-transform: uppercase !important; }
.text-lowercase     { text-transform: lowercase !important; }
.text-capitalize    { text-transform: capitalize !important; }

/* Font Style */
.text-italic        { font-style: italic !important; }
.text-strike        { text-decoration: line-through !important; }
.text-decoration-none { text-decoration: none !important; }

/* Letter Spacing */
.tracking-wide      { letter-spacing: 0.1em !important; }
.tracking-wider     { letter-spacing: 0.15em !important; }
.tracking-tight     { letter-spacing: -0.02em !important; }

/* Text Alignment */
.text-left          { text-align: left !important; }
.text-center        { text-align: center !important; }
.text-right         { text-align: right !important; }
.text-justify       { text-align: justify !important; }

/* ==========================================================================
   UTILITY CLASSES - COLORS
   ========================================================================== */

/* Text Colors - Primary */
.text-pri-50 { color: var(--pri-50); }
.text-pri-100 { color: var(--pri-100); }
.text-pri-200 { color: var(--pri-200); }
.text-pri-300 { color: var(--pri-300); }
.text-pri-400 { color: var(--pri-400); }
.text-pri-500 { color: var(--pri-500); }
.text-pri-600 { color: var(--pri-600); }
.text-pri-700 { color: var(--pri-700); }
.text-pri-800 { color: var(--pri-800); }
.text-pri-900 { color: var(--pri-900); }

/* Text Colors - Accent */
.text-acc-50 { color: var(--acc-50); }
.text-acc-100 { color: var(--acc-100); }
.text-acc-200 { color: var(--acc-200); }
.text-acc-300 { color: var(--acc-300); }
.text-acc-400 { color: var(--acc-400); }
.text-acc-500 { color: var(--acc-500); }
.text-acc-600 { color: var(--acc-600); }
.text-acc-700 { color: var(--acc-700); }
.text-acc-800 { color: var(--acc-800); }
.text-acc-900 { color: var(--acc-900); }

/* Text Colors - Gray */
.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

/* Background Colors - Primary */
.bg-pri-50 { background-color: var(--pri-50); }
.bg-pri-100 { background-color: var(--pri-100); }
.bg-pri-200 { background-color: var(--pri-200); }
.bg-pri-300 { background-color: var(--pri-300); }
.bg-pri-400 { background-color: var(--pri-400); }
.bg-pri-500 { background-color: var(--pri-500); }
.bg-pri-600 { background-color: var(--pri-600); }
.bg-pri-700 { background-color: var(--pri-700); }
.bg-pri-800 { background-color: var(--pri-800); }
.bg-pri-900 { background-color: var(--pri-900); }

/* Background Colors - Accent */
.bg-acc-50 { background-color: var(--acc-50); }
.bg-acc-100 { background-color: var(--acc-100); }
.bg-acc-200 { background-color: var(--acc-200); }
.bg-acc-300 { background-color: var(--acc-300); }
.bg-acc-400 { background-color: var(--acc-400); }
.bg-acc-500 { background-color: var(--acc-500); }
.bg-acc-600 { background-color: var(--acc-600); }
.bg-acc-700 { background-color: var(--acc-700); }
.bg-acc-800 { background-color: var(--acc-800); }
.bg-acc-900 { background-color: var(--acc-900); }

/* Background Colors - Gray */
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }

/* Background Colors - Semantic */
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error-500-t10 { background-color: var(--error-500-t10); }
.bg-error-500-t25 { background-color: var(--error-500-t25); }
.bg-error-500-t50 { background-color: var(--error-500-t50); }
.bg-error-500-t75 { background-color: var(--error-500-t75); }

/* Border Colors - Primary */
.border-pri-50 { border-color: var(--pri-50); }
.border-pri-100 { border-color: var(--pri-100); }
.border-pri-200 { border-color: var(--pri-200); }
.border-pri-300 { border-color: var(--pri-300); }
.border-pri-400 { border-color: var(--pri-400); }
.border-pri-500 { border-color: var(--pri-500); }
.border-pri-600 { border-color: var(--pri-600); }
.border-pri-700 { border-color: var(--pri-700); }
.border-pri-800 { border-color: var(--pri-800); }
.border-pri-900 { border-color: var(--pri-900); }

/* Border Colors - Accent */
.border-acc-50 { border-color: var(--acc-50); }
.border-acc-100 { border-color: var(--acc-100); }
.border-acc-200 { border-color: var(--acc-200); }
.border-acc-300 { border-color: var(--acc-300); }
.border-acc-400 { border-color: var(--acc-400); }
.border-acc-500 { border-color: var(--acc-500); }
.border-acc-600 { border-color: var(--acc-600); }
.border-acc-700 { border-color: var(--acc-700); }
.border-acc-800 { border-color: var(--acc-800); }
.border-acc-900 { border-color: var(--acc-900); }

/* ==========================================================================
   UTILITY CLASSES - SPACING
   ========================================================================== */

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-s { gap: var(--spacing-s) !important; }
.gap-m { gap: var(--spacing-m) !important; }
.gap-l { gap: var(--spacing-l) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }

/* Margin - All Sides */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-s { margin: var(--spacing-s) !important; }
.m-m { margin: var(--spacing-m) !important; }
.m-l { margin: var(--spacing-l) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Margin - Top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-s { margin-top: var(--spacing-s) !important; }
.mt-m { margin-top: var(--spacing-m) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

/* Margin - Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mb-m { margin-bottom: var(--spacing-m) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

/* Margin - Left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-s { margin-left: var(--spacing-s) !important; }
.ml-m { margin-left: var(--spacing-m) !important; }
.ml-l { margin-left: var(--spacing-l) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }

/* Margin - Right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-s { margin-right: var(--spacing-s) !important; }
.mr-m { margin-right: var(--spacing-m) !important; }
.mr-l { margin-right: var(--spacing-l) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }

/* Padding - All Sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-s { padding: var(--spacing-s) !important; }
.p-m { padding: var(--spacing-m) !important; }
.p-l { padding: var(--spacing-l) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Padding - Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-s { padding-top: var(--spacing-s) !important; }
.pt-m { padding-top: var(--spacing-m) !important; }
.pt-l { padding-top: var(--spacing-l) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-s { padding-bottom: var(--spacing-s) !important; }
.pb-m { padding-bottom: var(--spacing-m) !important; }
.pb-l { padding-bottom: var(--spacing-l) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }

/* Padding - Left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-s { padding-left: var(--spacing-s) !important; }
.pl-m { padding-left: var(--spacing-m) !important; }
.pl-l { padding-left: var(--spacing-l) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }

/* Padding - Right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-s { padding-right: var(--spacing-s) !important; }
.pr-m { padding-right: var(--spacing-m) !important; }
.pr-l { padding-right: var(--spacing-l) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }

/* Legacy Padding Classes (for backwards compatibility) */
.no-padding { padding: 0 !important; }
.pad-xs { padding: var(--spacing-xs) !important; }
.pad-s { padding: var(--spacing-s) !important; }
.pad-m { padding: var(--spacing-m) !important; }
.pad-l { padding: var(--spacing-l) !important; }
.pad-xl { padding: var(--spacing-xl) !important; }

/* ==========================================================================
   UTILITY CLASSES - VISUAL EFFECTS
   ========================================================================== */

/* Border Radius */
.rounded-none { border-radius: 0 !important; }
.rounded-xs { border-radius: var(--radius-xs) !important; }
.rounded-s { border-radius: var(--radius-s) !important; }
.rounded-m { border-radius: var(--radius-m) !important; }
.rounded-l { border-radius: var(--radius-l) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Legacy Border Radius Classes */
.rad-xs { border-radius: var(--radius-xs) !important; }
.rad-s { border-radius: var(--radius-s) !important; }
.rad-m { border-radius: var(--radius-m) !important; }
.rad-l { border-radius: var(--radius-l) !important; }
.rad-xl { border-radius: var(--radius-xl) !important; }
.rad-full { border-radius: var(--radius-full) !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-s { box-shadow: var(--shadow-s) !important; }
.shadow-m { box-shadow: var(--shadow-m) !important; }
.shadow-l { box-shadow: var(--shadow-l) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-inset { box-shadow: var(--shadow-inset) !important; }

/* ==========================================================================
   UTILITY CLASSES - LAYOUT & DISPLAY
   ========================================================================== */

/* Display */
.hide { display: none !important; }
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }

/* Flexbox Utilities */
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }

/* Grid Column Spanning */
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

/* Grid Row Spanning */
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

/* ==========================================================================
   COMPONENT CLASSES - TYPOGRAPHY
   ========================================================================== */

/* Headings */
.sk h1, .sk h2, .sk h3, .sk h4, .sk h5, .sk h6 {
  margin-block-end: var(--spacing-s);
  text-rendering: optimizelegibility;
  margin-bottom: 0.5em;
}

.sk h1 {
  font-family: var(--font-primary);
  font-size: var(--heading-4xl);
  line-height: var(--line-height-heading-4xl);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.sk h2 {
  font-family: var(--font-primary);
  font-size: var(--heading-3xl);
  line-height: var(--line-height-heading-3xl);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.sk h3 {
  font-family: var(--font-primary);
  font-size: var(--heading-2xl);
  line-height: var(--line-height-heading-2xl);
  letter-spacing: -0.015em;
  font-weight: 600;
}

.sk h4 {
  font-family: var(--font-primary);
  font-size: var(--heading-xl);
  line-height: var(--line-height-heading-xl);
  letter-spacing: -0.01em;
  font-weight: 500;
}

.sk h5 {
  font-family: var(--font-primary);
  font-size: var(--heading-l);
  line-height: var(--line-height-heading-l);
  letter-spacing: -0.005em;
  font-weight: 500;
}

.sk h6 {
  font-family: var(--font-primary);
  font-size: var(--heading-m);
  line-height: var(--line-height-heading-m);
  letter-spacing: normal;
  font-weight: 500;
}

/* Heading Utility Classes */
.heading-display { font-size: var(--heading-7xl); font-weight: 800; }
.heading-section { font-size: var(--heading-4xl); font-weight: 700; }
.heading-subtitle { font-size: var(--heading-xl); font-weight: 500; opacity: 0.8; }

/* SiteKrafter Heading Classes */
.sk-heading-9xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-9xl) !important;
  line-height: var(--line-height-heading-9xl) !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
}

.sk-heading-8xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-8xl) !important;
  line-height: var(--line-height-heading-8xl) !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance !important;
}

.sk-heading-7xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-7xl) !important;
  line-height: var(--line-height-heading-7xl) !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
}

.sk-heading-6xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-6xl) !important;
  line-height: var(--line-height-heading-6xl) !important;
  letter-spacing: -0.018em !important;
  text-wrap: balance !important;
}

.sk-heading-5xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-5xl) !important;
  line-height: var(--line-height-heading-5xl) !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance !important;
}

.sk-heading-4xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-4xl) !important;
  line-height: var(--line-height-heading-4xl) !important;
  letter-spacing: -0.012em !important;
  text-wrap: balance !important;
}

.sk-heading-3xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-3xl) !important;
  line-height: var(--line-height-heading-3xl) !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.sk-heading-2xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-2xl) !important;
  line-height: var(--line-height-heading-2xl) !important;
  letter-spacing: -0.008em !important;
  text-wrap: balance !important;
}

.sk-heading-xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-xl) !important;
  line-height: var(--line-height-heading-xl) !important;
  letter-spacing: -0.005em !important;
  text-wrap: balance !important;
}

.sk-heading-l {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-l) !important;
  line-height: var(--line-height-heading-l) !important;
  letter-spacing: -0.002em !important;
  text-wrap: balance !important;
}

.sk-heading-m {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-m) !important;
  line-height: var(--line-height-heading-m) !important;
  letter-spacing: normal !important;
  text-wrap: balance !important;
}

.sk-heading-s {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-s) !important;
  line-height: var(--line-height-heading-s) !important;
  letter-spacing: normal !important;
  text-wrap: balance !important;
}

/* Text Elements */
.sk p, .sk a, .sk li {
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-wrap: balance;
}

.sk-content {
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* Rich Text */
.richtext {
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-kerning: normal;
  hanging-punctuation: first;
  font-size: var(--text-m);
  line-height: var(--line-height-normal, 1.5);
  max-width: 70ch;
  margin-inline: auto;
}

.richtext blockquote {
  font-style: italic;
  border-inline-start: 3px solid var(--pri);
  padding-inline-start: var(--spacing-m);
  margin-inline: 0;
  color: var(--text-medium);
}

.richtext ul,
.richtext ol {
  padding-inline-start: var(--spacing-l);
  margin-block: var(--spacing-m);
}

.richtext li + li {
  margin-block-start: var(--spacing-xs);
}

/* ==========================================================================
   COMPONENT CLASSES - UI ELEMENTS
   ========================================================================== */

/* Buttons */
.button-pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--white);
  background: var(--pri);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--white);
  background: var(--acc);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline-pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--pri);
  background: transparent;
  border: 2px solid var(--pri);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline-acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--acc);
  background: transparent;
  border: 2px solid var(--acc);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline {
  background: transparent;
  color: var(--acc);
  border: 2px solid var(--acc);
  box-shadow: none;
}

.button-outline:hover {
  background: var(--acc);
  color: var(--white);
}

.button-ghost {
  background: transparent;
  color: var(--acc);
  box-shadow: none;
  border: none;
}

.button-ghost:hover {
  background: hsla(var(--pri-h), var(--pri-s), 50%, 0.1);
}

.button-text {
  background: none;
  color: var(--acc);
  padding: var(--spacing-xs);
  box-shadow: none;
}

.button-text:hover {
  text-decoration: underline;
}

.button-link {
  background: none;
  color: var(--acc);
  text-decoration: underline;
  padding: var(--spacing-xs);
}

.button-link:hover {
  color: var(--acc-dark);
}

/* Notices */
.notice,
.notice-info,
.notice-warning,
.notice-success,
.notice-error {
  font-size: var(--text-m);
  padding: var(--spacing-m);
  max-width: 65ch;
  border-radius: var(--radius-xs);
  line-height: var(--line-height-normal);
  margin-block: var(--spacing-s);
  color: var(--text-dark);
  background-color: var(--info-light);
}

.notice-info { background-color: var(--info-light); }
.notice-warning { background-color: var(--warning-light); }
.notice-success { background-color: var(--success-light); }
.notice-error { background-color: var(--error-light); }

/* Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .25rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  transition: all 0.3s ease;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   COMPONENT CLASSES - ADVANCED LAYOUTS
   ========================================================================== */

/* Responsive Grid Systems */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

.grid-cols-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 300px), 1fr));
}

.grid-cols-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 25vw, 300px), 1fr));
}

/* Bento Grid System */
.grid-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: var(--spacing-l);
}

.bento-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-l);
  background-color: var(--gray-100);
  border-radius: var(--radius-m);
  font-size: var(--text-m);
  font-weight: bold;
}

.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
.bento-full { grid-column: 1 / -1; grid-row: span 2; }

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ========================================================================== */

/* Mobile Phones (< 480px) */
@media (max-width: var(--breakpoint-xs)) {
  
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 40vw, 200px), 1fr));
    --grid-gap: var(--spacing-xs);
  }
}

/* Small Devices (< 768px) */
@media (max-width: var(--breakpoint-sm)) {
}

/* Tablets / Medium Devices (< 992px) */
@media (max-width: var(--breakpoint-md)) {
}

/* Large Devices (> 1200px) */
@media (min-width: var(--breakpoint-lg)) {
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 20vw, 350px), 1fr));
  }
}

/* 4K Displays (> 3840px) */
@media (min-width: var(--breakpoint-4k)) {
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 15vw, 400px), 1fr));
  }
}

/* ==========================================================================
   ACCESSIBILITY & FOCUS MANAGEMENT
   ========================================================================== */

/* Universal Focus Styles - Always Active */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
}



/* Enhanced focus for links */
a:focus {
  background-color: rgba(255, 153, 0, 0.1) !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
}

/* Divi Navigation Focus Styles */
#top-menu a:focus,
#et-top-navigation a:focus,
.et_pb_menu a:focus {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
  background-color: rgba(255, 153, 0, 0.15) !important;
  border-radius: 4px !important;
}

/* Divi Dropdown Focus Styles */
.sub-menu a:focus,
.et_mobile_menu a:focus {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
  background-color: rgba(255, 153, 0, 0.2) !important;
}

/* Skip Navigation */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #007bff;
  color: white;
  padding: 10px 15px;
  font-size: 1.4rem;
  text-decoration: none;
  border-radius: 5px;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}



/* Scoped Button Styles - Avoid conflicts with Divi */
.sk-button {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.sk-button:focus,
.sk-button:hover {
  background: #0056b3;
  outline: 3px solid rgba(255, 255, 255, 0.6);
}

/* Focus Styles for Buttons */
.button:focus-visible,
.button-sec:focus-visible,
.button-outline:focus-visible,
.button-ghost:focus-visible,
.button-text:focus-visible,
.button-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-shadow);
}

/* Dropdown Navigation */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: #007bff;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  position: relative;
}

.dropdown-toggle:focus {
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-shadow);
}

.dropdown-toggle[aria-expanded="true"]:after {
  content: " ▲";
}

.dropdown-toggle[aria-expanded="false"]:after,
.dropdown-toggle:not([aria-expanded]):after {
  content: " ▼";
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: none;
  min-width: 150px;
  z-index: 1000;
  border-radius: 5px;
  overflow: hidden;
}

.dropdown-menu a {
  display: block;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: #007bff;
  color: #fff;
  outline: none;
  box-shadow: inset 3px 0 0 var(--focus-color);
}

.dropdown-toggle:focus + .dropdown-menu,
.dropdown-menu:focus-within,
.dropdown.open .dropdown-menu {
  display: block;
}

/* Modal Accessibility */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: none;
  z-index: 1000;
}

.modal.open {
  display: block;
}

.modal:focus {
  outline: 3px solid #007bff;
}

/* Keyboard Navigation Enhancements */
.keyboard-nav :focus {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
}

.keyboard-nav a:focus,
.keyboard-nav button:focus,
.keyboard-nav input:focus,
.keyboard-nav select:focus,
.keyboard-nav textarea:focus {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
}

/* Enhanced focus for interactive elements */
.keyboard-nav a:focus {
  background-color: rgba(255, 153, 0, 0.1) !important;
  border-radius: 3px !important;
}

.keyboard-nav button:focus {
  transform: translateY(-1px) !important;
  box-shadow: var(--focus-shadow), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Skip link enhancements */
.skip-nav:focus {
  top: 10px;
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-shadow);
  z-index: 9999;
}

/* Accessible Forms */
input, select, textarea {
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1.4rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #007bff;
  outline: 3px solid rgba(0, 123, 255, 0.8);
}

/* Close Modal with Keyboard */
.close-btn {
  background: red;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   ADDITIONAL UTILITY CLASSES - WIDTH & HEIGHT
   ========================================================================== */

/* Width utilities */
.w-full { width: 100% !important; }
.w-half { width: 50% !important; }
.w-third { width: 33.333% !important; }
.w-quarter { width: 25% !important; }
.w-auto { width: auto !important; }
.w-fit { width: fit-content !important; }
.w-screen { width: 100vw !important; }

/* Max Width utilities */
.max-w-full { max-width: 100% !important; }
.max-w-prose { max-width: 65ch !important; }
.max-w-screen { max-width: 100vw !important; }
.max-w-container { max-width: var(--container-max-width) !important; }

/* Min Width utilities */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.min-w-fit { min-width: fit-content !important; }

/* Height utilities */
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-auto { height: auto !important; }
.h-fit { height: fit-content !important; }

/* Max Height utilities */
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }

/* Min Height utilities */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.min-h-fit { min-height: fit-content !important; }

/* ==========================================================================
   ADDITIONAL UTILITY CLASSES - POSITION & LAYOUT
   ========================================================================== */

/* Position utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.static { position: static !important; }

/* Position helpers */
.top-0 { top: 0 !important; }
.top-xs { top: var(--spacing-xs) !important; }
.top-s { top: var(--spacing-s) !important; }
.top-m { top: var(--spacing-m) !important; }
.top-l { top: var(--spacing-l) !important; }
.top-xl { top: var(--spacing-xl) !important; }

.right-0 { right: 0 !important; }
.right-xs { right: var(--spacing-xs) !important; }
.right-s { right: var(--spacing-s) !important; }
.right-m { right: var(--spacing-m) !important; }
.right-l { right: var(--spacing-l) !important; }
.right-xl { right: var(--spacing-xl) !important; }

.bottom-0 { bottom: 0 !important; }
.bottom-xs { bottom: var(--spacing-xs) !important; }
.bottom-s { bottom: var(--spacing-s) !important; }
.bottom-m { bottom: var(--spacing-m) !important; }
.bottom-l { bottom: var(--spacing-l) !important; }
.bottom-xl { bottom: var(--spacing-xl) !important; }

.left-0 { left: 0 !important; }
.left-xs { left: var(--spacing-xs) !important; }
.left-s { left: var(--spacing-s) !important; }
.left-m { left: var(--spacing-m) !important; }
.left-l { left: var(--spacing-l) !important; }
.left-xl { left: var(--spacing-xl) !important; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-xs { top: var(--spacing-xs); right: var(--spacing-xs); bottom: var(--spacing-xs); left: var(--spacing-xs); }
.inset-s { top: var(--spacing-s); right: var(--spacing-s); bottom: var(--spacing-s); left: var(--spacing-s); }

/* Z-index utilities */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }

/* ==========================================================================
   ADDITIONAL UTILITY CLASSES - VISUAL EFFECTS
   ========================================================================== */

/* Opacity utilities */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Transition utilities */
.transition-none { transition: none !important; }
.transition-all { transition: all var(--transition-normal) !important; }
.transition-colors { transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal) !important; }
.transition-opacity { transition: opacity var(--transition-normal) !important; }
.transition-transform { transition: transform var(--transition-normal) !important; }
.transition-shadow { transition: box-shadow var(--transition-normal) !important; }

/* Duration utilities */
.duration-fast { transition-duration: var(--transition-fast) !important; }
.duration-normal { transition-duration: var(--transition-normal) !important; }
.duration-slow { transition-duration: var(--transition-slow) !important; }

/* Transform utilities */
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.transform-none { transform: none !important; }

/* Scale utilities */
.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: scale(0) !important; }
.scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; transform: scale(0.5) !important; }
.scale-75 { --tw-scale-x: 0.75; --tw-scale-y: 0.75; transform: scale(0.75) !important; }
.scale-90 { --tw-scale-x: 0.9; --tw-scale-y: 0.9; transform: scale(0.9) !important; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; transform: scale(0.95) !important; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: scale(1) !important; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: scale(1.05) !important; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: scale(1.1) !important; }
.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; transform: scale(1.25) !important; }
.scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; transform: scale(1.5) !important; }

/* Rotate utilities */
.rotate-0 { transform: rotate(0deg) !important; }
.rotate-1 { transform: rotate(1deg) !important; }
.rotate-2 { transform: rotate(2deg) !important; }
.rotate-3 { transform: rotate(3deg) !important; }
.rotate-6 { transform: rotate(6deg) !important; }
.rotate-12 { transform: rotate(12deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.-rotate-1 { transform: rotate(-1deg) !important; }
.-rotate-2 { transform: rotate(-2deg) !important; }
.-rotate-3 { transform: rotate(-3deg) !important; }
.-rotate-6 { transform: rotate(-6deg) !important; }
.-rotate-12 { transform: rotate(-12deg) !important; }
.-rotate-45 { transform: rotate(-45deg) !important; }
.-rotate-90 { transform: rotate(-90deg) !important; }
.-rotate-180 { transform: rotate(-180deg) !important; }

/* ==========================================================================
   ADDITIONAL UTILITY CLASSES - OVERFLOW & VISIBILITY
   ========================================================================== */

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* Visibility utilities */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.hidden { display: none !important; }

/* ==========================================================================
   COMPONENT UTILITY CLASSES
   ========================================================================== */

/* Divi Module Presets */
.sk-card {
  background-color: var(--white) !important;
  box-shadow: var(--shadow-m) !important;
  border-radius: var(--radius-m) !important;
  padding: var(--spacing-l) !important;
}

.sk-hero-text {
  text-align: center !important;
  max-width: 65ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sk-button-divi {
  background-color: var(--pri) !important;
  color: var(--white) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-m) !important;
  transition: all var(--transition-normal) !important;
  border: none !important;
  padding: var(--spacing-s) var(--spacing-m) !important;
  font-weight: 500 !important;
}

.sk-button-divi:hover {
  box-shadow: var(--shadow-l) !important;
  transform: translateY(-1px) !important;
}

/* Glass effect utility */
.glass-effect {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   RESPONSIVE UTILITIES - MOBILE FIRST
   ========================================================================== */

/* Small devices (tablets) - 768px and up */
@media (min-width: 768px) {
  .sm\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .sm\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .sm\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .sm\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .sm\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .sm\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .sm\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .sm\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .sm\:p-0 { padding: 0 !important; }
  .sm\:p-xs { padding: var(--spacing-xs) !important; }
  .sm\:p-s { padding: var(--spacing-s) !important; }
  .sm\:p-m { padding: var(--spacing-m) !important; }
  .sm\:p-l { padding: var(--spacing-l) !important; }
  .sm\:p-xl { padding: var(--spacing-xl) !important; }
  
  .sm\:m-0 { margin: 0 !important; }
  .sm\:m-xs { margin: var(--spacing-xs) !important; }
  .sm\:m-s { margin: var(--spacing-s) !important; }
  .sm\:m-m { margin: var(--spacing-m) !important; }
  .sm\:m-l { margin: var(--spacing-l) !important; }
  .sm\:m-xl { margin: var(--spacing-xl) !important; }
  
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  
  .sm\:flex { display: flex !important; }
  .sm\:grid { display: grid !important; }
  .sm\:block { display: block !important; }
  .sm\:hidden { display: none !important; }
  
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:flex-col { flex-direction: column !important; }
  
  .sm\:justify-start { justify-content: flex-start !important; }
  .sm\:justify-center { justify-content: center !important; }
  .sm\:justify-end { justify-content: flex-end !important; }
  .sm\:justify-between { justify-content: space-between !important; }
  
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:items-end { align-items: flex-end !important; }
}

/* Medium devices (desktops) - 992px and up */
@media (min-width: 992px) {
  .md\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .md\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .md\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .md\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .md\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .md\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .md\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .md\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .md\:p-0 { padding: 0 !important; }
  .md\:p-xs { padding: var(--spacing-xs) !important; }
  .md\:p-s { padding: var(--spacing-s) !important; }
  .md\:p-m { padding: var(--spacing-m) !important; }
  .md\:p-l { padding: var(--spacing-l) !important; }
  .md\:p-xl { padding: var(--spacing-xl) !important; }
  
  .md\:m-0 { margin: 0 !important; }
  .md\:m-xs { margin: var(--spacing-xs) !important; }
  .md\:m-s { margin: var(--spacing-s) !important; }
  .md\:m-m { margin: var(--spacing-m) !important; }
  .md\:m-l { margin: var(--spacing-l) !important; }
  .md\:m-xl { margin: var(--spacing-xl) !important; }
  
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  
  .md\:flex { display: flex !important; }
  .md\:grid { display: grid !important; }
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
  
  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-col { flex-direction: column !important; }
  
  .md\:justify-start { justify-content: flex-start !important; }
  .md\:justify-center { justify-content: center !important; }
  .md\:justify-end { justify-content: flex-end !important; }
  .md\:justify-between { justify-content: space-between !important; }
  
  .md\:items-start { align-items: flex-start !important; }
  .md\:items-center { align-items: center !important; }
  .md\:items-end { align-items: flex-end !important; }
}

/* Large devices (large desktops) - 1200px and up */
@media (min-width: 1200px) {
  .lg\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .lg\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .lg\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .lg\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .lg\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .lg\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .lg\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .lg\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .lg\:p-0 { padding: 0 !important; }
  .lg\:p-xs { padding: var(--spacing-xs) !important; }
  .lg\:p-s { padding: var(--spacing-s) !important; }
  .lg\:p-m { padding: var(--spacing-m) !important; }
  .lg\:p-l { padding: var(--spacing-l) !important; }
  .lg\:p-xl { padding: var(--spacing-xl) !important; }
  
  .lg\:m-0 { margin: 0 !important; }
  .lg\:m-xs { margin: var(--spacing-xs) !important; }
  .lg\:m-s { margin: var(--spacing-s) !important; }
  .lg\:m-m { margin: var(--spacing-m) !important; }
  .lg\:m-l { margin: var(--spacing-l) !important; }
  .lg\:m-xl { margin: var(--spacing-xl) !important; }
  
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  
  .lg\:flex { display: flex !important; }
  .lg\:grid { display: grid !important; }
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
  
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:flex-col { flex-direction: column !important; }
  
  .lg\:justify-start { justify-content: flex-start !important; }
  .lg\:justify-center { justify-content: center !important; }
  .lg\:justify-end { justify-content: flex-end !important; }
  .lg\:justify-between { justify-content: space-between !important; }
  
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:items-center { align-items: center !important; }
  .lg\:items-end { align-items: flex-end !important; }
}