/* Core CSS - ADHD Samen Theme */
/* Shared styles loaded on all pages */
/* Build date: 2025-10-28 16:56:52 */
/* DO NOT EDIT - Generated file */


/* ========================================
   CORE - Variables, Base & Typography
   ======================================== */
:root {
    /* Primary Brand Colors */
    --ads-primary: #4A90E2;
    --ads-secondary: #7ED321;
    --ads-accent: #F5A623;

    /* Status Colors */
    --ads-danger: #E74C3C;
    --ads-success: #27AE60;
    --ads-warning: #F39C12;
    --ads-info: #3498DB;

    /* Neutral Colors */
    --ads-white: #FFFFFF;

    /* Extended Gray Scale (50-900) */
    --ads-gray-50: #F9FAFB;     /* Lightest - backgrounds */
    --ads-gray-100: #F3F4F6;    /* Very light - hover states */
    --ads-gray-200: #E5E7EB;    /* Light - borders */
    --ads-gray-300: #D1D5DB;    /* Medium-light - dividers */
    --ads-gray-400: #9CA3AF;    /* Medium - placeholders */
    --ads-gray-500: #6B7280;    /* Medium - secondary text */
    --ads-gray-600: #4B5563;    /* Medium-dark - body text */
    --ads-gray-700: #374151;    /* Dark - headings */
    --ads-gray-800: #1F2937;    /* Very dark */
    --ads-gray-900: #111827;    /* Darkest - emphasis */

    /* Legacy compatibility (map to new scale) */
    --ads-gray-light: var(--ads-gray-100);
    --ads-gray-dark: var(--ads-gray-700);

    /* Spacing */
    --ads-spacing-xs: 8px;
    --ads-spacing-sm: 16px;
    --ads-spacing-md: 24px;
    --ads-spacing-lg: 40px;
    --ads-spacing-xl: 64px;

    /* Typography */
    --ads-font-family-base: 'Open Sans', sans-serif;
    --ads-font-family-heading: 'Montserrat', sans-serif;

    /* Typography Scale - Font Sizes */
    --ads-font-size-xs: 0.75rem;      /* 12px */
    --ads-font-size-sm: 0.875rem;     /* 14px */
    --ads-font-size-base: 1rem;       /* 16px - body text */
    --ads-font-size-lg: 1.125rem;     /* 18px */
    --ads-font-size-xl: 1.25rem;      /* 20px */
    --ads-font-size-2xl: 1.5rem;      /* 24px */
    --ads-font-size-3xl: 1.875rem;    /* 30px */
    --ads-font-size-4xl: 2.25rem;     /* 36px */
    --ads-font-size-5xl: 3rem;        /* 48px - large headings */

    /* Font Weights */
    --ads-font-weight-normal: 400;
    --ads-font-weight-medium: 600;
    --ads-font-weight-bold: 700;

    /* Line Heights */
    --ads-line-height-tight: 1.25;    /* For headings */
    --ads-line-height-base: 1.5;      /* For body text */
    --ads-line-height-relaxed: 1.75;  /* For loose text */

    /* Border Radius */
    --ads-radius-sm: 4px;
    --ads-radius-md: 8px;
    --ads-radius-lg: 12px;

    /* Transitions */
    --ads-transition-fast: 150ms ease-in-out;
    --ads-transition-base: 300ms ease-in-out;

    /* Shadow System - Elevation & Depth */
    --ads-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ads-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --ads-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ads-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --ads-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --ads-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Shadow Colors - for colored shadows */
    --ads-shadow-primary: 0 4px 14px 0 rgba(74, 144, 226, 0.39);
    --ads-shadow-secondary: 0 4px 14px 0 rgba(126, 211, 33, 0.39);
    --ads-shadow-accent: 0 4px 14px 0 rgba(245, 166, 35, 0.39);

    /* Z-Index Scale - Layering System */
    --ads-z-base: 0;
    --ads-z-dropdown: 1000;
    --ads-z-sticky: 1020;
    --ads-z-fixed: 1030;
    --ads-z-modal-backdrop: 1040;
    --ads-z-modal: 1050;
    --ads-z-popover: 1060;
    --ads-z-tooltip: 1070;
    --ads-z-notification: 1080;
    --ads-z-overlay: 9999;

    /* ========================================
       MODERN DESIGN TOKENS - 2025 Update
       Extended variables for modern UI patterns
       ======================================== */

    /* Extended Border Radius - Modern Design */
    --ads-radius-xl: 16px;
    --ads-radius-2xl: 20px;
    --ads-radius-3xl: 24px;
    --ads-radius-full: 9999px;

    /* Extended Spacing Scale */
    --ads-spacing-2xl: 80px;      /* 5rem */
    --ads-spacing-3xl: 120px;     /* 7.5rem */
    --ads-spacing-4xl: 160px;     /* 10rem */

    /* Gradient System - Modern Color Combinations */
    --ads-gradient-primary: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    --ads-gradient-secondary: linear-gradient(135deg, #7ED321 0%, #5FA319 100%);
    --ads-gradient-accent: linear-gradient(135deg, #F5A623 0%, #E09512 100%);
    --ads-gradient-sunset: linear-gradient(135deg, #F5A623 0%, #E74C3C 100%);
    --ads-gradient-ocean: linear-gradient(135deg, #4A90E2 0%, #3498DB 50%, #7ED321 100%);
    --ads-gradient-purple: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    --ads-gradient-calm: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);

    /* Glassmorphism Effects */
    --ads-glass-bg: rgba(255, 255, 255, 0.1);
    --ads-glass-bg-light: rgba(255, 255, 255, 0.7);
    --ads-glass-bg-dark: rgba(0, 0, 0, 0.1);
    --ads-glass-border: rgba(255, 255, 255, 0.2);
    --ads-glass-blur: blur(10px);
    --ads-glass-blur-strong: blur(20px);

    /* Enhanced Shadows - Multi-layer with Color */
    --ads-shadow-colored-primary: 0 8px 24px rgba(74, 144, 226, 0.15), 0 4px 8px rgba(74, 144, 226, 0.1);
    --ads-shadow-colored-secondary: 0 8px 24px rgba(126, 211, 33, 0.15), 0 4px 8px rgba(126, 211, 33, 0.1);
    --ads-shadow-colored-accent: 0 8px 24px rgba(245, 166, 35, 0.15), 0 4px 8px rgba(245, 166, 35, 0.1);
    --ads-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.08);
    --ads-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.08);

    /* Animation Timing - Custom Easing Curves */
    --ads-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ads-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ads-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ads-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Extended Transition Durations */
    --ads-transition-slow: 500ms;
    --ads-transition-slower: 700ms;
}
/* ========================================
   BASE STYLES & CSS RESET
   Modern foundation for HTML elements
   Source: Extracted from legacy main.css backups
   Date: 2025-10-26
   ======================================== */

/* ========================================
   CSS RESET - Modern Box Model
   ======================================== */

/* Universal Reset - Apply consistent box-sizing */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   HTML & BODY BASE
   ======================================== */

/* Root Element Configuration */
html {
    /* Base font size for rem calculations */
    font-size: 16px;

    /* Smooth scrolling for anchor links */
    scroll-behavior: smooth;

    /* Improve font rendering on webkit browsers */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Body Base Styling */
body {
    /* Typography */
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    font-size: var(--ads-font-size-base, 1rem);
    line-height: var(--ads-line-height-base, 1.5);
    color: var(--ads-gray-900, #111827);

    /* Background */
    background-color: var(--ads-white, #FFFFFF);

    /* Font Rendering - Improve readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Prevent horizontal overflow */
    overflow-x: hidden;
}

/* ========================================
   TYPOGRAPHY BASE
   ======================================== */

/* Heading Base Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ads-font-family-heading, 'Montserrat', sans-serif);
    font-weight: var(--ads-font-weight-bold, 700);
    line-height: var(--ads-line-height-tight, 1.25);
    color: var(--ads-gray-900, #111827);
    margin-top: 0;
    margin-bottom: var(--ads-spacing-md, 24px);
}

/* Heading Size Scale */
h1 {
    font-size: var(--ads-font-size-4xl, 2.25rem);
}

h2 {
    font-size: var(--ads-font-size-3xl, 1.875rem);
}

h3 {
    font-size: var(--ads-font-size-2xl, 1.5rem);
}

h4 {
    font-size: var(--ads-font-size-xl, 1.25rem);
}

h5 {
    font-size: var(--ads-font-size-lg, 1.125rem);
}

h6 {
    font-size: var(--ads-font-size-base, 1rem);
}

/* Paragraph Spacing */
p {
    margin-top: 0;
    margin-bottom: var(--ads-spacing-md, 24px);
}

/* ========================================
   LINK STYLES
   ======================================== */

/* Base Link Styling */
a {
    color: var(--ads-primary, #4A90E2);
    text-decoration: underline;
    transition: color var(--ads-transition-fast, 150ms ease-in-out);
}

a:hover {
    color: var(--ads-secondary, #7ED321);
}

/* Focus State - Accessibility (WCAG 2.1) */
a:focus {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Remove focus styles for mouse users (only show for keyboard users) */
a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Modern focus-visible pseudo-class for keyboard-only focus */
a:focus-visible {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Remove text decoration from button-style links */
a.ads-btn {
    text-decoration: none;
}

/* ========================================
   LIST STYLES
   ======================================== */

/* Reset list styling */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--ads-spacing-md, 24px);
    padding-left: var(--ads-spacing-lg, 40px);
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
    margin-bottom: 0;
}

/* List items */
li {
    margin-bottom: var(--ads-spacing-xs, 8px);
}

/* Remove default list styling for navigation */
nav ul,
nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ========================================
   IMAGE & MEDIA DEFAULTS
   ======================================== */

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

/* SVG Styling */
svg {
    max-width: 100%;
    height: auto;
    fill: currentColor;
}

/* Figure element */
figure {
    margin: 0 0 var(--ads-spacing-md, 24px) 0;
}

figcaption {
    font-size: var(--ads-font-size-sm, 0.875rem);
    color: var(--ads-gray-600, #4B5563);
    margin-top: var(--ads-spacing-xs, 8px);
}

/* ========================================
   TABLE DEFAULTS
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: var(--ads-spacing-md, 24px);
}

th,
td {
    padding: var(--ads-spacing-sm, 16px);
    text-align: left;
    border-bottom: 1px solid var(--ads-gray-200, #E5E7EB);
}

th {
    font-weight: var(--ads-font-weight-bold, 700);
    color: var(--ads-gray-900, #111827);
    background-color: var(--ads-gray-50, #F9FAFB);
}

/* ========================================
   FORM ELEMENT BASICS
   ======================================== */

/* Reset form elements */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: var(--ads-line-height-base, 1.5);
    margin: 0;
}

/* Button reset - only for native buttons without custom classes */
button:not([class*="ads-btn"]):not([class*="btn"]) {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: visible;
}

/* Input & Textarea reset */
input,
textarea,
select {
    display: block;
    width: 100%;
}

/* Remove default input styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Search input reset */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Placeholder styling */
::placeholder {
    color: var(--ads-gray-400, #9CA3AF);
    opacity: 1;
}

/* ========================================
   ACCESSIBILITY - FOCUS STATES
   ======================================== */

/* Focus visible for all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   TEXT SELECTION
   ======================================== */

/* Custom text selection color */
::selection {
    background-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

::-moz-selection {
    background-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

/* ========================================
   UTILITY RESETS
   ======================================== */

/* Abbreviation styling */
abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Code & Pre formatting */
code,
kbd,
pre,
samp {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: var(--ads-font-size-sm, 0.875rem);
}

pre {
    overflow-x: auto;
    margin-bottom: var(--ads-spacing-md, 24px);
    padding: var(--ads-spacing-md, 24px);
    background-color: var(--ads-gray-50, #F9FAFB);
    border-radius: var(--ads-radius-md, 8px);
}

code {
    padding: 2px 6px;
    background-color: var(--ads-gray-100, #F3F4F6);
    border-radius: var(--ads-radius-sm, 4px);
}

/* Blockquote styling */
blockquote {
    margin: var(--ads-spacing-lg, 40px) 0;
    padding: var(--ads-spacing-md, 24px);
    padding-left: var(--ads-spacing-lg, 40px);
    border-left: 4px solid var(--ads-primary, #4A90E2);
    background-color: var(--ads-gray-50, #F9FAFB);
    font-style: italic;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Horizontal Rule */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--ads-gray-200, #E5E7EB);
    margin: var(--ads-spacing-lg, 40px) 0;
}

/* Strong & Bold */
strong,
b {
    font-weight: var(--ads-font-weight-bold, 700);
}

/* Emphasis & Italic */
em,
i {
    font-style: italic;
}

/* Small text */
small {
    font-size: var(--ads-font-size-sm, 0.875rem);
}

/* Mark/Highlight */
mark {
    background-color: var(--ads-accent, #F5A623);
    color: var(--ads-gray-900, #111827);
    padding: 2px 4px;
    border-radius: var(--ads-radius-sm, 4px);
}

/* ========================================
   HIDDEN ELEMENTS
   ======================================== */

/* Visually hidden but accessible to screen readers */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Show on focus for skip links */
.sr-only:focus,
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

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

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
/* ========================================
   TYPOGRAPHY - Base Text Styling
   ADHD Samen Theme - Core Typography System
   ======================================== */

/* ----------------------------------------
   Base Body Typography
   ---------------------------------------- */

body {
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    font-size: var(--ads-font-size-lg, 1.125rem);
    line-height: var(--ads-line-height-base, 1.5);
    color: var(--ads-gray-600, #4B5563);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Headings - Base Styles
   ---------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ads-font-family-heading, 'Montserrat', sans-serif);
    font-weight: var(--ads-font-weight-medium, 600);
    line-height: var(--ads-line-height-tight, 1.25);
    color: var(--ads-gray-700, #374151);
    margin-bottom: var(--ads-spacing-md, 24px);
    clear: both;
}

h1 {
    font-size: var(--ads-font-size-4xl, 2.25rem);
    margin-bottom: var(--ads-spacing-lg, 40px);
}

h2 {
    font-size: var(--ads-font-size-3xl, 1.875rem);
    margin-top: var(--ads-spacing-xl, 64px);
}

h3 {
    font-size: var(--ads-font-size-2xl, 1.5rem);
    margin-top: var(--ads-spacing-lg, 40px);
}

h4 {
    font-size: var(--ads-font-size-xl, 1.25rem);
}

h5 {
    font-size: var(--ads-font-size-lg, 1.125rem);
}

h6 {
    font-size: var(--ads-font-size-base, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive Headings - Mobile Optimization */
@media (max-width: 768px) {
    h1 {
        font-size: var(--ads-font-size-3xl, 1.875rem);
    }

    h2 {
        font-size: var(--ads-font-size-2xl, 1.5rem);
        margin-top: var(--ads-spacing-lg, 40px);
    }

    h3 {
        font-size: var(--ads-font-size-xl, 1.25rem);
    }
}

/* ----------------------------------------
   Paragraphs
   ---------------------------------------- */

p {
    margin-bottom: var(--ads-spacing-md, 24px);
    letter-spacing: 0.01em;
}

/* Lead paragraph - larger introductory text */
p.lead,
.lead {
    font-size: var(--ads-font-size-xl, 1.25rem);
    line-height: var(--ads-line-height-relaxed, 1.75);
    color: var(--ads-gray-600, #4B5563);
}

/* Small text */
small,
.small {
    font-size: var(--ads-font-size-sm, 0.875rem);
    line-height: var(--ads-line-height-base, 1.5);
}

/* ----------------------------------------
   Links
   ---------------------------------------- */

a {
    color: var(--ads-primary, #4A90E2);
    text-decoration: underline;
    transition: color var(--ads-transition-fast, 150ms ease-in-out);
}

a:hover,
a:focus {
    color: var(--ads-secondary, #7ED321);
}

a:visited {
    color: var(--ads-primary, #4A90E2);
    opacity: 0.8;
}

a:focus {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
}

a:active {
    outline: 0;
}

/* ----------------------------------------
   Text Formatting Elements
   ---------------------------------------- */

/* Bold / Strong */
b,
strong {
    font-weight: var(--ads-font-weight-bold, 700);
}

/* Italic / Emphasis */
em,
i,
cite,
dfn {
    font-style: italic;
}

/* Mark / Highlight */
mark,
ins {
    background: #fff9c0;
    padding: 2px 4px;
    text-decoration: none;
}

/* Strikethrough / Delete */
del,
s {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Underline */
u {
    text-decoration: underline;
}

/* Subscript & Superscript */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Abbreviations */
abbr,
acronym {
    border-bottom: 1px dotted var(--ads-gray-400, #9CA3AF);
    cursor: help;
    text-decoration: none;
}

/* ----------------------------------------
   Blockquotes
   ---------------------------------------- */

blockquote {
    margin: var(--ads-spacing-lg, 40px) var(--ads-spacing-md, 24px);
    padding: var(--ads-spacing-md, 24px) var(--ads-spacing-lg, 40px);
    border-left: 4px solid var(--ads-primary, #4A90E2);
    background: var(--ads-gray-50, #F9FAFB);
    font-style: italic;
    font-size: var(--ads-font-size-lg, 1.125rem);
    line-height: var(--ads-line-height-relaxed, 1.75);
    color: var(--ads-gray-700, #374151);
}

blockquote p {
    margin-bottom: var(--ads-spacing-sm, 16px);
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    display: block;
    margin-top: var(--ads-spacing-sm, 16px);
    font-size: var(--ads-font-size-sm, 0.875rem);
    font-style: normal;
    color: var(--ads-gray-500, #6B7280);
}

blockquote cite::before {
    content: "— ";
}

/* ----------------------------------------
   Lists
   ---------------------------------------- */

ul,
ol {
    margin: 0 0 var(--ads-spacing-md, 24px) var(--ads-spacing-lg, 40px);
    padding: 0;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li {
    margin-bottom: var(--ads-spacing-xs, 8px);
    line-height: var(--ads-line-height-relaxed, 1.75);
}

/* Nested lists */
li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: var(--ads-spacing-md, 24px);
    margin-top: var(--ads-spacing-xs, 8px);
}

/* Definition lists */
dl {
    margin-bottom: var(--ads-spacing-md, 24px);
}

dt {
    font-weight: var(--ads-font-weight-bold, 700);
    color: var(--ads-gray-700, #374151);
    margin-top: var(--ads-spacing-sm, 16px);
}

dd {
    margin: var(--ads-spacing-xs, 8px) 0 var(--ads-spacing-sm, 16px) var(--ads-spacing-lg, 40px);
    color: var(--ads-gray-600, #4B5563);
}

/* ----------------------------------------
   Code & Preformatted Text
   ---------------------------------------- */

/* Inline code */
code,
kbd,
tt,
var,
samp {
    font-family: 'Monaco', 'Consolas', 'Andale Mono', 'DejaVu Sans Mono', monospace;
    font-size: var(--ads-font-size-sm, 0.875rem);
    background: var(--ads-gray-100, #F3F4F6);
    padding: 2px 6px;
    border-radius: var(--ads-radius-sm, 4px);
    color: var(--ads-danger, #E74C3C);
}

/* Code blocks */
pre {
    font-family: 'Monaco', 'Consolas', 'Courier 10 Pitch', 'Courier', monospace;
    font-size: var(--ads-font-size-sm, 0.875rem);
    line-height: var(--ads-line-height-relaxed, 1.75);
    background: var(--ads-gray-800, #1F2937);
    color: var(--ads-gray-50, #F9FAFB);
    padding: var(--ads-spacing-md, 24px);
    border-radius: var(--ads-radius-md, 8px);
    margin-bottom: var(--ads-spacing-md, 24px);
    max-width: 100%;
    overflow-x: auto;
    box-shadow: var(--ads-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Keyboard input */
kbd {
    background: var(--ads-gray-800, #1F2937);
    color: var(--ads-white, #FFFFFF);
    border: 1px solid var(--ads-gray-600, #4B5563);
    border-bottom-width: 2px;
    box-shadow: var(--ads-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

/* ----------------------------------------
   Horizontal Rule
   ---------------------------------------- */

hr {
    border: 0;
    border-top: 1px solid var(--ads-gray-200, #E5E7EB);
    margin: var(--ads-spacing-xl, 64px) 0;
}

/* ----------------------------------------
   Address
   ---------------------------------------- */

address {
    margin-bottom: var(--ads-spacing-md, 24px);
    font-style: normal;
    line-height: var(--ads-line-height-base, 1.5);
}

/* ----------------------------------------
   Text Selection
   ---------------------------------------- */

::selection {
    background: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    text-shadow: none;
}

::-moz-selection {
    background: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    text-shadow: none;
}

/* ----------------------------------------
   Print Styles - Typography Optimization
   ---------------------------------------- */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    h1 {
        font-size: 18pt;
        page-break-after: avoid;
    }

    h2 {
        font-size: 16pt;
        page-break-after: avoid;
    }

    h3 {
        font-size: 14pt;
        page-break-after: avoid;
    }

    p,
    blockquote {
        orphans: 3;
        widows: 3;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
}

/* ========================================
   LAYOUT - Grid & Containers
   ======================================== */
/* =============================================
   MODERN FOOTER - 2025 Design
   4-column responsive layout with trust signals
   ============================================= */

/* ===== Footer CTA Section (Before Footer) ===== */
.footer-cta-section {
    background: var(--ads-gradient-calm);
    padding: var(--ads-spacing-3xl) 0;
    position: relative;
    overflow: hidden;
}

.footer-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 166, 35, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.footer-cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.footer-cta-content h2 {
    font-size: var(--ads-font-size-4xl);
    color: var(--ads-gray-800);
    margin-bottom: var(--ads-spacing-md);
    font-weight: var(--ads-font-weight-bold);
}

.footer-cta-content p {
    font-size: var(--ads-font-size-lg);
    color: var(--ads-gray-600);
    margin-bottom: var(--ads-spacing-lg);
    line-height: var(--ads-line-height-relaxed);
}

.footer-cta-buttons {
    display: flex;
    gap: var(--ads-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.footer-cta-buttons .ads-btn {
    padding: var(--ads-spacing-md) var(--ads-spacing-xl);
    font-size: var(--ads-font-size-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--ads-spacing-xs);
}

.footer-cta-buttons .ads-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.footer-cta-buttons .ads-btn-outline {
    background: var(--ads-white);
    border: 2px solid var(--ads-primary);
    color: var(--ads-primary);
    box-shadow: var(--ads-shadow-base);
}

.footer-cta-buttons .ads-btn-outline:hover {
    background: var(--ads-primary);
    color: var(--ads-white);
    border-color: var(--ads-primary);
}

/* ===== Main Footer ===== */
.site-footer {
    background: var(--ads-gray-50);
    color: var(--ads-gray-700);
    padding: var(--ads-spacing-3xl) 0 var(--ads-spacing-md);
    margin-top: var(--ads-spacing-2xl);
    position: relative;
    border-top: 1px solid var(--ads-gray-200);
}

.footer-main {
    padding-bottom: var(--ads-spacing-2xl);
    border-bottom: 1px solid var(--ads-gray-200);
}

/* ===== Footer Grid (Default: 5 Columns for Desktop) ===== */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ads-spacing-xl);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-md);
}

/* Brand Column (Wider) */
.footer-brand {
    grid-column: span 1;
}

/* Newsletter Column */
.footer-newsletter {
    grid-column: span 1;
}

/* ===== Footer Column Titles ===== */
.footer-column-title {
    color: var(--ads-gray-900);
    font-size: var(--ads-font-size-lg);
    font-weight: var(--ads-font-weight-bold);
    margin: 0 0 var(--ads-spacing-md) 0;
    font-family: var(--ads-font-family-heading);
    position: relative;
    padding-bottom: var(--ads-spacing-sm);
}

.footer-column-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--ads-gradient-primary);
    border-radius: var(--ads-radius-full);
}

/* ===== Footer Brand Column ===== */
.footer-description {
    font-size: var(--ads-font-size-base);
    line-height: var(--ads-line-height-relaxed);
    color: var(--ads-gray-600);
    margin-bottom: var(--ads-spacing-md);
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-sm);
    margin-bottom: var(--ads-spacing-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--ads-spacing-sm);
    color: var(--ads-gray-600);
    font-size: var(--ads-font-size-sm);
}

.contact-item .dashicons {
    color: var(--ads-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-item a {
    color: var(--ads-gray-700);
    text-decoration: none;
    transition: color var(--ads-transition-base);
}

.contact-item a:hover {
    color: var(--ads-primary);
}

/* ===== Footer Social Icons ===== */
.footer-social {
    display: flex;
    gap: var(--ads-spacing-sm);
    margin-top: var(--ads-spacing-md);
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--ads-white);
    color: var(--ads-primary);
    border: 2px solid var(--ads-gray-200);
    border-radius: var(--ads-radius-full);
    transition: all var(--ads-transition-base);
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--ads-primary);
    color: var(--ads-white);
    border-color: var(--ads-primary);
    transform: translateY(-3px);
    box-shadow: var(--ads-shadow-colored-primary);
}

.footer-social a .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* ===== Footer Links ===== */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-sm);
}

.footer-links li {
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: var(--ads-gray-600);
    text-decoration: none;
    font-size: var(--ads-font-size-sm);
    transition: all var(--ads-transition-base);
    display: inline-block;
    position: relative;
    padding-left: 0;
}

.footer-links a::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: all var(--ads-transition-base);
    color: var(--ads-primary);
}

.footer-links a:hover {
    color: var(--ads-primary);
    padding-left: 20px;
}

.footer-links a:hover::before {
    opacity: 1;
    left: 0;
}

/* ===== Footer Newsletter ===== */
.newsletter-text {
    font-size: var(--ads-font-size-sm);
    color: var(--ads-gray-600);
    margin-bottom: var(--ads-spacing-md);
    line-height: var(--ads-line-height-base);
}

.footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-sm);
}

.footer-newsletter-form input[type="email"] {
    padding: var(--ads-spacing-sm);
    border: 2px solid var(--ads-gray-300);
    border-radius: var(--ads-radius-md);
    background: var(--ads-white);
    color: var(--ads-gray-900);
    font-size: var(--ads-font-size-sm);
    transition: all var(--ads-transition-base);
}

.footer-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--ads-primary);
    background: var(--ads-white);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.footer-newsletter-form input[type="email"]::placeholder {
    color: var(--ads-gray-400);
}

.footer-newsletter-form .btn-newsletter {
    padding: var(--ads-spacing-sm) var(--ads-spacing-md);
    background: var(--ads-primary);
    color: var(--ads-white);
    border: none;
    border-radius: var(--ads-radius-md);
    font-weight: var(--ads-font-weight-bold);
    font-size: var(--ads-font-size-sm);
    cursor: pointer;
    transition: all var(--ads-transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ads-spacing-xs);
}

.footer-newsletter-form .btn-newsletter:hover {
    background: var(--ads-secondary);
    transform: translateY(-2px);
    box-shadow: var(--ads-shadow-colored-primary);
}

.footer-newsletter-form .btn-newsletter .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.newsletter-privacy {
    font-size: var(--ads-font-size-xs);
    color: var(--ads-gray-500);
    display: flex;
    align-items: center;
    gap: var(--ads-spacing-xs);
    margin-top: var(--ads-spacing-xs);
}

.newsletter-privacy .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--ads-success);
}

/* Recent Posts in Newsletter Column */
.recent-posts {
    margin-top: var(--ads-spacing-lg);
    padding-top: var(--ads-spacing-lg);
    border-top: 1px solid var(--ads-gray-200);
}

.recent-posts h5 {
    color: var(--ads-gray-900);
    font-size: var(--ads-font-size-sm);
    font-weight: var(--ads-font-weight-bold);
    margin: 0 0 var(--ads-spacing-sm) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recent-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-xs);
}

.recent-posts-list li {
    margin: 0;
    padding: 0;
}

.recent-posts-list a {
    color: var(--ads-gray-600);
    text-decoration: none;
    font-size: var(--ads-font-size-xs);
    transition: color var(--ads-transition-base);
    display: block;
    line-height: var(--ads-line-height-tight);
}

.recent-posts-list a:hover {
    color: var(--ads-primary);
}

/* ===== Footer Bottom ===== */
.footer-bottom {
    padding-top: var(--ads-spacing-lg);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ads-spacing-lg);
    flex-wrap: wrap;
}

.footer-copyright p {
    margin: 0;
    font-size: var(--ads-font-size-sm);
    color: var(--ads-gray-600);
}

.footer-bottom-links {
    display: flex;
    gap: var(--ads-spacing-lg);
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: var(--ads-gray-600);
    text-decoration: none;
    font-size: var(--ads-font-size-sm);
    transition: color var(--ads-transition-base);
}

.footer-bottom-links a:hover {
    color: var(--ads-primary);
}

/* ===== Accessibility Controls ===== */
.accessibility-controls {
    position: fixed;
    right: 20px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--ads-spacing-xs);
    z-index: var(--ads-z-fixed);
}

.accessibility-btn {
    width: 50px;
    height: 50px;
    background: var(--ads-white);
    border: 2px solid var(--ads-primary);
    border-radius: var(--ads-radius-full);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--ads-transition-base);
    box-shadow: var(--ads-shadow-lg);
    color: var(--ads-primary);
}

.accessibility-btn:hover {
    background: var(--ads-primary);
    color: var(--ads-white);
    transform: scale(1.1);
}

.accessibility-btn:focus-visible {
    outline: 3px solid var(--ads-accent);
    outline-offset: 3px;
}

.accessibility-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.accessibility-btn .btn-label {
    font-size: 10px;
    font-weight: var(--ads-font-weight-bold);
    line-height: 1;
    margin-top: 2px;
}

/* ===== Back to Top Button ===== */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background: var(--ads-gradient-primary);
    color: var(--ads-white);
    border: none;
    border-radius: var(--ads-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--ads-transition-base);
    box-shadow: var(--ads-shadow-xl);
    z-index: var(--ads-z-fixed);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--ads-shadow-hover);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--ads-accent);
    outline-offset: 3px;
}

.back-to-top .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* ===== Responsive Design ===== */

/* Extra Large Desktop (1600px+) - 5 columns with wider container */
@media (min-width: 1600px) {
    .site-footer .ads-container {
        max-width: 1500px;
    }

    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--ads-spacing-xl);
    }

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

    .footer-newsletter {
        grid-column: span 1;
    }
}

/* Large Desktop (1400px - 1599px) - 5 columns */
@media (min-width: 1400px) and (max-width: 1599px) {
    .site-footer .ads-container {
        max-width: 1400px;
    }

    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--ads-spacing-xl);
    }

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

    .footer-newsletter {
        grid-column: span 1;
    }
}

/* Desktop (1200px - 1399px) - 5 columns */
@media (min-width: 1200px) and (max-width: 1399px) {
    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--ads-spacing-lg);
    }

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

    .footer-newsletter {
        grid-column: span 1;
    }
}

/* Laptop (1024px - 1199px) - 3 columns */
@media (max-width: 1199px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ads-spacing-lg);
    }

    .footer-brand {
        grid-column: span 3;
    }

    .footer-newsletter {
        grid-column: span 3;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .footer-cta-content h2 {
        font-size: var(--ads-font-size-3xl);
    }

    .footer-cta-content p {
        font-size: var(--ads-font-size-base);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ads-spacing-xl);
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-newsletter {
        grid-column: span 2;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .footer-cta-section {
        padding: var(--ads-spacing-2xl) 0;
    }

    .footer-cta-content h2 {
        font-size: var(--ads-font-size-2xl);
    }

    .footer-cta-content p {
        font-size: var(--ads-font-size-sm);
    }

    .footer-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-cta-buttons .ads-btn {
        width: 100%;
        justify-content: center;
    }

    .site-footer {
        padding: var(--ads-spacing-2xl) 0 var(--ads-spacing-md);
    }

    .footer-main {
        padding-bottom: var(--ads-spacing-xl);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--ads-spacing-xl);
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: span 1;
    }

    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ads-spacing-md);
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: var(--ads-spacing-sm);
    }

    .accessibility-controls {
        right: 10px;
        bottom: 80px;
    }

    .accessibility-btn {
        width: 45px;
        height: 45px;
    }

    .back-to-top {
        right: 10px;
        bottom: 20px;
        width: 45px;
        height: 45px;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .footer-cta-section {
        padding: var(--ads-spacing-xl) 0;
    }

    .footer-cta-content h2 {
        font-size: var(--ads-font-size-xl);
    }

    .footer-cta-buttons .ads-btn {
        padding: var(--ads-spacing-sm) var(--ads-spacing-md);
        font-size: var(--ads-font-size-base);
    }

    .footer-column-title {
        font-size: var(--ads-font-size-base);
    }

    .footer-social a {
        width: 36px;
        height: 36px;
    }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    .site-footer {
        border-top: 3px solid var(--ads-white);
    }

    .footer-column-title {
        text-decoration: underline;
    }

    .footer-links a {
        text-decoration: underline;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .footer-social a,
    .footer-links a,
    .footer-cta-buttons .ads-btn,
    .accessibility-btn,
    .back-to-top,
    .footer-newsletter-form .btn-newsletter {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Print Styles ===== */
@media print {
    .footer-cta-section,
    .footer-social,
    .footer-newsletter-form,
    .accessibility-controls,
    .back-to-top,
    .footer-bottom-links {
        display: none !important;
    }

    .site-footer {
        background: transparent;
        color: var(--ads-gray-900);
        page-break-inside: avoid;
    }

    .footer-column-title {
        color: var(--ads-gray-900);
        border-bottom: 2px solid var(--ads-gray-900);
    }

    .footer-links a {
        color: var(--ads-gray-900);
        text-decoration: none;
    }

    .contact-item a {
        color: var(--ads-gray-900);
    }
}
   GRID & LAYOUT SYSTEM
   Flexible layout utilities
   ======================================== */

/* Container */
.adhd-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.adhd-container-fluid {
    width: 100%;
    padding: 0 1rem;
}

/* Container System - Max-width wrapper */
.ads-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ads-spacing-md, 24px);
}

/* Responsive container padding */
@media (max-width: 768px) {
    .ads-container {
        padding: 0 var(--ads-spacing-sm, 16px);
    }
}

/* Row System - Flexbox container for columns */
.ads-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 calc(var(--ads-spacing-sm, 16px) / -2);
}

/* Column children get proper gutters */
.ads-row > [class*="ads-col-"] {
    padding: 0 calc(var(--ads-spacing-sm, 16px) / 2);
}

/* Column base */
[class*="ads-col-"] {
    flex: 0 0 auto;
    width: 100%;
}

/* 12-column grid system */
.ads-col-1 { width: 8.333333%; }
.ads-col-2 { width: 16.666667%; }
.ads-col-3 { width: 25%; }
.ads-col-4 { width: 33.333333%; }
.ads-col-5 { width: 41.666667%; }
.ads-col-6 { width: 50%; }
.ads-col-7 { width: 58.333333%; }
.ads-col-8 { width: 66.666667%; }
.ads-col-9 { width: 75%; }
.ads-col-10 { width: 83.333333%; }
.ads-col-11 { width: 91.666667%; }
.ads-col-12 { width: 100%; }

/* Responsive columns (mobile-first) */
@media (max-width: 768px) {
    .ads-col-sm-12 { width: 100%; }
    .ads-col-sm-6 { width: 50%; }
}

/* Flexbox Utilities */
.adhd-flex {
    display: flex;
}

.adhd-flex-col {
    flex-direction: column;
}

.adhd-flex-wrap {
    flex-wrap: wrap;
}

.adhd-justify-start { justify-content: flex-start; }
.adhd-justify-center { justify-content: center; }
.adhd-justify-end { justify-content: flex-end; }
.adhd-justify-between { justify-content: space-between; }
.adhd-justify-around { justify-content: space-around; }

.adhd-align-start { align-items: flex-start; }
.adhd-align-center { align-items: center; }
.adhd-align-end { align-items: flex-end; }
.adhd-align-stretch { align-items: stretch; }

/* Gap Utilities */
.adhd-gap-xs { gap: var(--ads-spacing-xs, 8px); }
.adhd-gap-sm { gap: var(--ads-spacing-sm, 16px); }
.adhd-gap-md { gap: var(--ads-spacing-md, 24px); }
.adhd-gap-lg { gap: var(--ads-spacing-lg, 40px); }
.adhd-gap-xl { gap: var(--ads-spacing-xl, 64px); }

/* Grid System */
.adhd-grid {
    display: grid;
    gap: var(--ads-spacing-md, 24px);
    align-items: stretch;
}

.adhd-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.adhd-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.adhd-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Grid */
@media (max-width: 768px) {
    .adhd-grid-2,
    .adhd-grid-3,
    .adhd-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .adhd-grid-3,
    .adhd-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   MODERN HEADER - 2025 Design
   Sticky navigation with glassmorphism effects
   ============================================= */

/* ===== Header Container ===== */
.site-header {
    background: var(--ads-white);
    box-shadow: var(--ads-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--ads-z-sticky);
    transition: all var(--ads-transition-base);
    border-bottom: 1px solid var(--ads-gray-100);
}

/* Scrolled state - add shadow */
.site-header.scrolled {
    box-shadow: var(--ads-shadow-lg);
    backdrop-filter: var(--ads-glass-blur);
    background: var(--ads-glass-bg-light);
}

/* Header Inner Wrapper */
.site-header .ads-container {
    padding-top: var(--ads-spacing-sm);
    padding-bottom: var(--ads-spacing-sm);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ads-spacing-lg);
}

/* ===== Site Branding ===== */
.site-branding {
    flex-shrink: 0;
}

.site-branding .custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.site-branding .custom-logo {
    max-height: 50px;
    width: auto;
    height: auto;
    transition: transform var(--ads-transition-base);
}

.site-branding .custom-logo:hover {
    transform: scale(1.05);
}

/* Site Title (if no logo) */
.site-title a {
    font-family: var(--ads-font-family-heading);
    font-size: var(--ads-font-size-2xl);
    font-weight: var(--ads-font-weight-bold);
    color: var(--ads-primary);
    text-decoration: none;
    transition: color var(--ads-transition-base);
}

.site-title a:hover {
    color: var(--ads-accent);
}

/* ===== Main Navigation ===== */
.main-navigation {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.main-navigation .nav-menu {
    list-style: none;
    display: flex;
    gap: var(--ads-spacing-md);
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-navigation .nav-menu li {
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu a {
    text-decoration: none;
    color: var(--ads-gray-700);
    font-weight: var(--ads-font-weight-medium);
    font-size: var(--ads-font-size-base);
    padding: var(--ads-spacing-xs) var(--ads-spacing-sm);
    position: relative;
    display: inline-block;
    transition: color var(--ads-transition-base);
}

.main-navigation .nav-menu a:hover {
    color: var(--ads-primary);
}

/* Active menu item underline */
.main-navigation .nav-menu a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--ads-spacing-sm);
    right: var(--ads-spacing-sm);
    height: 3px;
    background: var(--ads-gradient-primary);
    border-radius: var(--ads-radius-full);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ads-transition-base);
    pointer-events: none;
}

.main-navigation .nav-menu a:hover::before,
.main-navigation .nav-menu .current-menu-item a::before,
.main-navigation .nav-menu .current_page_item a::before {
    transform: scaleX(1);
}

/* Remove underline from dropdown items (they use ::after for arrows) */
.main-navigation .menu-item-has-children > a::before {
    display: none;
}

/* Current menu item */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--ads-primary);
}

/* ===== Dropdown Submenu Styles ===== */

/* Parent menu items with children */
.main-navigation .menu-item-has-children {
    position: relative;
}

/* Parent link with dropdown - use flexbox for proper spacing */
.main-navigation .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: calc(var(--ads-spacing-sm) + 4px);
}

/* Dropdown indicator (arrow) - positioned AFTER text */
.main-navigation .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid currentColor;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* Hover state - make arrow more visible */
.main-navigation .menu-item-has-children > a:hover::after {
    opacity: 1;
}

/* Rotate arrow when submenu is open */
.main-navigation .menu-item-has-children.submenu-open > a::after {
    transform: rotate(180deg);
}

/* Submenu container */
.main-navigation .sub-menu {
    list-style: none;
    margin: 0;
    padding: var(--ads-spacing-sm) 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--ads-white);
    box-shadow: var(--ads-shadow-xl);
    border-radius: var(--ads-radius-md);
    border: 1px solid var(--ads-gray-100);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--ads-transition-base);
    z-index: var(--ads-z-dropdown);
}

/* Show submenu on hover (desktop only) */
@media (min-width: 769px) {
    .main-navigation .menu-item-has-children:hover > .sub-menu,
    .main-navigation .menu-item-has-children.submenu-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Submenu items */
.main-navigation .sub-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--ads-gray-100);
}

.main-navigation .sub-menu li:last-child {
    border-bottom: none;
}

/* Submenu links */
.main-navigation .sub-menu a {
    display: block;
    padding: var(--ads-spacing-sm) var(--ads-spacing-md);
    color: var(--ads-gray-700);
    font-size: var(--ads-font-size-sm);
    white-space: nowrap;
}

.main-navigation .sub-menu a:hover {
    background: var(--ads-gray-50);
    color: var(--ads-primary);
}

/* Remove underline animation from submenu links */
.main-navigation .sub-menu a::before {
    display: none;
}

/* Current submenu item */
.main-navigation .sub-menu .current-menu-item > a {
    background: var(--ads-primary-50);
    color: var(--ads-primary);
    font-weight: var(--ads-font-weight-bold);
}

/* ===== Header Actions (CTA) ===== */
.header-actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--ads-spacing-sm);
    align-items: center;
}

.header-actions .ads-btn-small {
    padding: var(--ads-spacing-xs) var(--ads-spacing-md);
    font-size: var(--ads-font-size-sm);
    white-space: nowrap;
    background: var(--ads-gradient-accent);
    border: none;
    color: var(--ads-white);
    font-weight: var(--ads-font-weight-bold);
    box-shadow: var(--ads-shadow-colored-accent);
    transition: all var(--ads-transition-base);
}

.header-actions .ads-btn-small:hover {
    transform: translateY(-2px);
    box-shadow: var(--ads-shadow-hover);
}

/* ===== Mobile Menu Toggle ===== */
.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid var(--ads-primary);
    border-radius: var(--ads-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: all var(--ads-transition-base);
    align-items: center;
    justify-content: center;
    gap: var(--ads-spacing-xs);
    min-width: 44px;
    min-height: 44px;
    color: var(--ads-primary);
    position: relative;
    z-index: var(--ads-z-dropdown);
    flex-shrink: 0;
}

.menu-toggle:hover {
    background: var(--ads-primary);
    color: var(--ads-white);
    border-color: var(--ads-primary);
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--ads-primary);
    outline-offset: 3px;
}

.menu-toggle:active {
    transform: scale(0.95);
}

/* Hamburger Icon */
.hamburger-box {
    width: 26px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 100%;
    height: 3px;
    background: currentColor;
    border-radius: var(--ads-radius-full);
    transition: all var(--ads-transition-base);
    display: block;
    position: relative;
}

.hamburger-inner {
    position: relative;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger-inner::before {
    top: -7px;
}

.hamburger-inner::after {
    bottom: -7px;
}

/* Menu Toggle Active State (X icon) */
.menu-toggle[aria-expanded="true"] .hamburger-inner {
    background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.menu-toggle-text {
    font-size: var(--ads-font-size-sm);
    font-weight: var(--ads-font-weight-medium);
}

/* ===== Responsive Design ===== */

/* Desktop large (1200px+) */
@media (min-width: 1200px) {
    .main-navigation .nav-menu {
        gap: var(--ads-spacing-lg);
    }

    .main-navigation .nav-menu a {
        font-size: var(--ads-font-size-lg);
    }
}

/* Tablet and Mobile */
@media (max-width: 1024px) {
    .header-inner {
        gap: var(--ads-spacing-md);
    }

    .main-navigation .nav-menu {
        gap: var(--ads-spacing-sm);
    }

    .main-navigation .nav-menu a {
        padding: var(--ads-spacing-xs);
        font-size: var(--ads-font-size-sm);
    }
}

/* Mobile Menu */
@media (max-width: 768px) {
    /* Ensure header layout works on mobile */
    .header-inner {
        position: relative;
        gap: var(--ads-spacing-sm); /* Reduce gap to 16px on mobile */
    }

    /* Ensure branding stays on left */
    .site-branding {
        order: 1;
        flex: 0 0 auto; /* Don't grow or shrink */
    }

    /* Position actions in middle */
    .header-actions {
        order: 2;
        margin-left: auto; /* Push to right side before toggle */
    }

    /* Show hamburger menu toggle */
    .menu-toggle {
        display: flex !important;
        order: 3; /* Appears after header-actions, on far right */
        margin-left: var(--ads-spacing-sm); /* 16px space from contact button */
    }

    /* Navigation dropdown positioned last in document flow */
    .main-navigation {
        order: 5;
    }

    /* Hide desktop navigation, show as dropdown */
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ads-white);
        box-shadow: var(--ads-shadow-xl);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all var(--ads-transition-base);
        max-height: 0;
        overflow: hidden;
        z-index: calc(var(--ads-z-dropdown) - 1);
    }

    .main-navigation.toggled {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 100vh;
        overflow-y: auto;
    }

    .main-navigation .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: var(--ads-spacing-md) 0;
        align-items: stretch;
    }

    .main-navigation .nav-menu li {
        border-bottom: 1px solid var(--ads-gray-100);
    }

    .main-navigation .nav-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation .nav-menu a {
        display: block;
        padding: var(--ads-spacing-md) var(--ads-spacing-lg);
        font-size: var(--ads-font-size-base);
    }

    .main-navigation .nav-menu a::before {
        left: var(--ads-spacing-lg);
        right: var(--ads-spacing-lg);
        bottom: var(--ads-spacing-xs);
    }

    /* ===== Mobile Submenu Styles ===== */

    /* Submenu positioning for mobile */
    .main-navigation .sub-menu {
        position: static;
        min-width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--ads-gray-50);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: all var(--ads-transition-base);
    }

    /* Show submenu when parent has submenu-open class */
    .main-navigation .menu-item-has-children.submenu-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: 1000px;
        padding: var(--ads-spacing-xs) 0;
    }

    /* Mobile submenu items */
    .main-navigation .sub-menu li {
        border-bottom: 1px solid var(--ads-gray-200);
    }

    .main-navigation .sub-menu a {
        padding-left: calc(var(--ads-spacing-lg) + var(--ads-spacing-md));
        font-size: var(--ads-font-size-sm);
        background: transparent;
    }

    .main-navigation .sub-menu a:hover,
    .main-navigation .sub-menu a:focus {
        background: var(--ads-gray-100);
    }

    /* Dropdown arrow positioning for mobile */
    .main-navigation .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--ads-spacing-md);
        padding-right: var(--ads-spacing-lg);
    }

    /* Reset flexbox arrow to absolute position for mobile */
    .main-navigation .menu-item-has-children > a::after {
        position: absolute;
        right: var(--ads-spacing-lg);
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 8px solid currentColor;
    }

    .main-navigation .menu-item-has-children.submenu-open > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .header-actions {
        margin-left: auto;
    }

    .header-actions .ads-btn-small {
        padding: var(--ads-spacing-xs) var(--ads-spacing-sm);
        font-size: var(--ads-font-size-xs);
    }
}

@media (max-width: 480px) {
    .site-header .ads-container {
        padding-top: var(--ads-spacing-xs);
        padding-bottom: var(--ads-spacing-xs);
    }

    .site-branding .custom-logo {
        max-height: 40px;
    }

    .site-title a {
        font-size: var(--ads-font-size-xl);
    }

    .header-actions .ads-btn-small {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Hide menu text on very small screens, keep icon */
    .menu-toggle-text {
        display: none;
    }

    /* Ensure hamburger button remains visible and touchable */
    .menu-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 12px;
    }

    /* Slightly larger hamburger icon on small screens */
    .hamburger-box {
        width: 28px;
        height: 22px;
    }
}

/* ===== Reading Progress Bar ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--ads-gradient-primary);
    z-index: calc(var(--ads-z-sticky) + 1);
    width: 0%;
    transition: width 100ms linear;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}

/* ===== Skip Link (Accessibility) ===== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--ads-primary);
    color: var(--ads-white);
    padding: var(--ads-spacing-sm) var(--ads-spacing-md);
    text-decoration: none;
    font-weight: var(--ads-font-weight-bold);
    border-radius: 0 0 var(--ads-radius-md) 0;
    transition: all var(--ads-transition-base);
    z-index: calc(var(--ads-z-overlay) + 1);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--ads-accent);
    outline-offset: 2px;
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    .site-header {
        border-bottom: 2px solid var(--ads-gray-900);
    }

    .main-navigation .nav-menu a {
        color: var(--ads-gray-900);
        font-weight: var(--ads-font-weight-bold);
    }

    .main-navigation .nav-menu a::after {
        height: 4px;
        background: var(--ads-gray-900);
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-branding .custom-logo,
    .main-navigation .nav-menu a,
    .main-navigation .nav-menu a::after,
    .header-actions .ads-btn-small,
    .menu-toggle,
    .main-navigation {
        transition: none !important;
        animation: none !important;
    }

    .reading-progress {
        transition: none !important;
    }
}

/* ===== Print Styles ===== */
@media print {
    .site-header {
        position: static;
        box-shadow: none;
        border-bottom: 2px solid var(--ads-gray-900);
    }

    .main-navigation,
    .header-actions,
    .menu-toggle,
    .reading-progress,
    .skip-link {
        display: none !important;
    }

    .site-branding {
        margin-bottom: var(--ads-spacing-md);
    }
}

/* ========================================
   COMPONENTS - Reusable UI
   ======================================== */
/**
 * Accordion Component
 * Collapsible content sections with smooth animations
 * ADHD-friendly: User controls information flow, clear visual states
 */

/* ========================================
   Accordion Container
   ======================================== */
.adhd-accordion {
	width: 100%;
}

/* ========================================
   Accordion Item
   ======================================== */
.adhd-accordion-item {
	background: var(--ads-white, #FFFFFF);
	border: 2px solid var(--ads-gray-200, #E5E7EB);
	border-radius: var(--ads-radius-lg, 12px);
	margin-bottom: var(--ads-spacing-md, 24px);
	overflow: hidden;
	transition: all var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
}

.adhd-accordion-item:hover {
	border-color: var(--ads-gray-300, #D1D5DB);
	box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.adhd-accordion-item.active {
	border-color: var(--ads-primary, #4A90E2);
	box-shadow: var(--ads-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

/* ========================================
   Accordion Header (Button)
   ======================================== */
.adhd-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--ads-spacing-lg, 40px);
	background: var(--ads-white, #FFFFFF);
	border: none;
	cursor: pointer;
	transition: all var(--ads-transition-fast, 0.2s) var(--ads-ease-smooth, ease);
	text-align: left;
}

.adhd-accordion-header:hover {
	background: var(--ads-gray-50, #F9FAFB);
}

.adhd-accordion-item.active .adhd-accordion-header {
	background: rgba(74, 144, 226, 0.05);
}

/* Accordion Header Content */
.accordion-header-content {
	display: flex;
	align-items: center;
	gap: var(--ads-spacing-md, 24px);
	flex: 1;
}

.accordion-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(74, 144, 226, 0.1);
	border-radius: var(--ads-radius-lg, 12px);
	flex-shrink: 0;
}

.accordion-icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: var(--ads-primary, #4A90E2);
}

.adhd-accordion-item.active .accordion-icon {
	background: var(--ads-primary, #4A90E2);
}

.adhd-accordion-item.active .accordion-icon .dashicons {
	color: var(--ads-white, #FFFFFF);
}

.accordion-title {
	margin: 0;
	font-size: var(--ads-text-2xl, 24px);
	font-weight: 700;
	color: var(--ads-gray-900, #111827);
	line-height: 1.3;
}

/* Accordion Arrow */
.accordion-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	transition: transform var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
}

.accordion-arrow .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: var(--ads-gray-600, #4B5563);
}

.adhd-accordion-header[aria-expanded="true"] .accordion-arrow {
	transform: rotate(180deg);
}

.adhd-accordion-header[aria-expanded="true"] .accordion-arrow .dashicons {
	color: var(--ads-primary, #4A90E2);
}

/* Accordion Header Focus */
.adhd-accordion-header:focus-visible {
	outline: 3px solid var(--ads-primary, #4A90E2);
	outline-offset: -3px;
}

/* ========================================
   Accordion Content
   ======================================== */
.adhd-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--ads-transition-slow, 0.4s) var(--ads-ease-smooth, ease);
}

.adhd-accordion-item.active .adhd-accordion-content {
	max-height: 2000px;
}

.adhd-accordion-body {
	padding: 0 var(--ads-spacing-lg, 40px) var(--ads-spacing-lg, 40px) var(--ads-spacing-lg, 40px);
	padding-left: calc(var(--ads-spacing-lg, 40px) + 48px + var(--ads-spacing-md, 24px));
}

.adhd-accordion-body p {
	margin-bottom: var(--ads-spacing-md, 24px);
	font-size: var(--ads-text-base, 16px);
	color: var(--ads-gray-700, #374151);
	line-height: 1.6;
}

/* Accordion Lists */
.accordion-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: var(--ads-spacing-md, 24px);
}

.accordion-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--ads-spacing-sm, 16px);
	margin-bottom: var(--ads-spacing-sm, 16px);
	font-size: var(--ads-text-base, 16px);
	color: var(--ads-gray-700, #374151);
	line-height: 1.6;
	padding-left: var(--ads-spacing-md, 24px);
	position: relative;
}

.accordion-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--ads-primary, #4A90E2);
	font-weight: 700;
	font-size: 1.2em;
}

.accordion-list-ordered {
	counter-reset: accordion-counter;
}

.accordion-list-ordered li {
	counter-increment: accordion-counter;
}

.accordion-list-ordered li::before {
	content: counter(accordion-counter) ".";
	font-size: 1em;
}

/* Treatment Grid (for behandeling accordion) */
.treatment-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ads-spacing-md, 24px);
	margin-bottom: var(--ads-spacing-md, 24px);
}

.treatment-item {
	padding: var(--ads-spacing-md, 24px);
	background: var(--ads-gray-50, #F9FAFB);
	border-radius: var(--ads-radius-md, 8px);
	border: 1px solid var(--ads-gray-200, #E5E7EB);
}

/* Myths Grid */
.myths-grid {
	display: flex;
	flex-direction: column;
	gap: var(--ads-spacing-md, 24px);
	margin-bottom: var(--ads-spacing-md, 24px);
}

.myth-item {
	padding: var(--ads-spacing-md, 24px);
	background: var(--ads-gray-50, #F9FAFB);
	border-radius: var(--ads-radius-md, 8px);
	border: 1px solid var(--ads-gray-200, #E5E7EB);
}

.myth-false,
.myth-true {
	display: flex;
	align-items: flex-start;
	gap: var(--ads-spacing-xs, 8px);
	font-size: var(--ads-text-sm, 14px);
	line-height: 1.6;
}

.myth-false {
	color: var(--ads-danger, #E74C3C);
}

.myth-true {
	color: var(--ads-success, #27AE60);
}

.myth-false .dashicons,
.myth-true .dashicons {
	flex-shrink: 0;
	margin-top: 2px;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
	.adhd-accordion-header {
		padding: var(--ads-spacing-md, 24px);
	}

	.adhd-accordion-body {
		padding: 0 var(--ads-spacing-md, 24px) var(--ads-spacing-md, 24px) var(--ads-spacing-md, 24px);
		padding-left: calc(var(--ads-spacing-md, 24px) + 48px + var(--ads-spacing-sm, 16px));
	}

	.accordion-icon {
		width: 40px;
		height: 40px;
	}

	.accordion-icon .dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	.accordion-title {
		font-size: var(--ads-text-xl, 20px);
	}

	.treatment-grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
	.adhd-accordion-header {
		padding: var(--ads-spacing-sm, 16px);
	}

	.adhd-accordion-body {
		padding: 0 var(--ads-spacing-sm, 16px) var(--ads-spacing-sm, 16px) var(--ads-spacing-sm, 16px);
		padding-left: var(--ads-spacing-sm, 16px);
	}

	.accordion-header-content {
		gap: var(--ads-spacing-sm, 16px);
	}

	.accordion-icon {
		width: 36px;
		height: 36px;
	}

	.accordion-title {
		font-size: var(--ads-text-lg, 18px);
	}
}

/* ========================================
   Reduced Motion Support
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	.adhd-accordion-item,
	.adhd-accordion-header,
	.adhd-accordion-content,
	.accordion-arrow {
		transition: none;
	}

	.adhd-accordion-header[aria-expanded="true"] .accordion-arrow {
		transform: none;
	}
}
   BUTTON UTILITIES
   Reusable button components
   ======================================== */

/* Base Button */
.ads-btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--ads-radius-lg, 12px);
    transition: all var(--ads-transition-base, 300ms ease-in-out);
}

.ads-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ads-btn:active {
    transform: translateY(0);
}

/* Button Focus States (Accessibility - WCAG 2.1) */
/* Ensures keyboard navigation users can see which button has focus */
.ads-btn:focus {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Remove focus styles for mouse users (only show for keyboard users) */
.ads-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Modern focus-visible pseudo-class for keyboard-only focus */
.ads-btn:focus-visible {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Button Disabled States */
/* Prevents interaction with disabled buttons and provides visual feedback */
.ads-btn:disabled,
.ads-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Variants */
.ads-btn-primary {
    background-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    border-color: var(--ads-primary, #4A90E2);
}

.ads-btn-primary:hover {
    background-color: #3A7BC8;
}

.ads-btn-secondary {
    background-color: var(--ads-secondary, #7ED321);
    color: var(--ads-white, #FFFFFF);
    border-color: var(--ads-secondary, #7ED321);
}

.ads-btn-secondary:hover {
    background-color: #6AB91A;
}

.ads-btn-accent {
    background-color: #E09512;
    color: var(--ads-white, #FFFFFF);
    border-color: #E09512;
}

.ads-btn-accent:hover {
    background-color: #C77E0E;
}

.ads-btn-danger {
    background-color: var(--ads-danger, #E74C3C);
    color: var(--ads-white, #FFFFFF);
    border-color: var(--ads-danger, #E74C3C);
}

.ads-btn-danger:hover {
    background-color: #C0392B;
}

.ads-btn-success {
    background-color: var(--ads-success, #27AE60);
    color: var(--ads-white, #FFFFFF);
    border-color: var(--ads-success, #27AE60);
}

.ads-btn-success:hover {
    background-color: #229954;
}

.ads-btn-warning {
    background-color: var(--ads-warning, #F39C12);
    color: var(--ads-white, #FFFFFF);
    border-color: var(--ads-warning, #F39C12);
}

.ads-btn-warning:hover {
    background-color: #D68910;
}

/* Button Sizes */
.ads-btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.ads-btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
}

.ads-btn-xl {
    padding: 20px 40px;
    font-size: 1.25rem;
}

/* Gradient Button Variants */
.ads-btn-gradient-sunset {
    background: linear-gradient(135deg, #F5A623 0%, #E74C3C 100%);
    color: var(--ads-white, #FFFFFF);
    border: none;
    position: relative;
    overflow: hidden;
}

.ads-btn-gradient-sunset::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ads-btn-gradient-sunset:hover::before {
    width: 300px;
    height: 300px;
}

.ads-btn-gradient-sunset:hover {
    background: linear-gradient(135deg, #E09512 0%, #C0392B 100%);
    transform: translateY(-3px);
}

/* Glass Effect Button (Glassmorphism) */
.ads-btn-glass {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ads-white, #FFFFFF);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ads-btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

/* Button Lift Effect */
.ads-btn-lift {
    transition: all var(--ads-transition-base, 300ms ease-in-out);
}

.ads-btn-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Outline Variant */
.ads-btn-outline {
    background-color: transparent;
    color: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
}

.ads-btn-outline:hover {
    background-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

/* Full Width */
.ads-btn-block {
    display: block;
    width: 100%;
}

/* ========================================
   ACCORDION COMPONENT
   Collapsible content sections
   ======================================== */

.adhd-accordion {
    border: 1px solid var(--ads-gray-light, #F8F9FA);
    border-radius: var(--ads-radius-md, 8px);
    overflow: hidden;
}

.adhd-accordion-item {
    border-bottom: 1px solid var(--ads-gray-light, #F8F9FA);
}

.adhd-accordion-item:last-child {
    border-bottom: none;
}

.adhd-accordion-header {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--ads-white, #FFFFFF);
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--ads-font-family-heading, 'Montserrat', sans-serif);
    transition: var(--ads-transition-base, 300ms ease-in-out);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adhd-accordion-header:hover {
    background: var(--ads-gray-light, #F8F9FA);
}

.adhd-accordion-header.active {
    background: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

.adhd-accordion-header:focus {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
}

.adhd-accordion-header:focus:not(:focus-visible) {
    outline: none;
}

.adhd-accordion-header:focus-visible {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
}

.adhd-accordion-content {
    padding: 1rem 1.5rem;
    display: none;
    background: var(--ads-white, #FFFFFF);
}

.adhd-accordion-content.active {
    display: block;
}

.adhd-accordion-icon {
    transition: transform var(--ads-transition-base, 300ms ease-in-out);
}

.adhd-accordion-header.active .adhd-accordion-icon {
    transform: rotate(180deg);
}

/* ========================================
   CARD COMPONENT SYSTEM
   Unified card component with variants
   ======================================== */

.adhd-card {
    background: var(--ads-white, #FFFFFF);
    border: 1px solid var(--ads-gray-light, #F8F9FA);
    border-radius: var(--ads-radius-md, 8px);
    padding: 1.5rem;
    transition: var(--ads-transition-base, 300ms ease-in-out);
}

.adhd-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.adhd-card-header {
    margin-bottom: 1rem;
}

.adhd-card-title {
    font-family: var(--ads-font-family-heading, 'Montserrat', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--ads-gray-dark, #333333);
}

.adhd-card-thumbnail {
    width: 100%;
    border-radius: var(--ads-radius-md, 8px);
    margin-bottom: 1rem;
    object-fit: cover;
}

.adhd-card-content {
    color: var(--ads-gray-dark, #333333);
    line-height: 1.6;
}

.adhd-card-excerpt {
    color: #666;
    margin-bottom: 1rem;
}

.adhd-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #999;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ads-gray-light, #F8F9FA);
}

.adhd-card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ads-gray-light, #F8F9FA);
}

/* Card Variants */
.adhd-card-primary {
    border-color: var(--ads-primary, #4A90E2);
}

.adhd-card-accent {
    border-color: var(--ads-accent, #F5A623);
}

/* ========================================
   TIP CARD VARIANT
   Informational callout with left accent
   Used in: ADHD Tips pages (2 occurrences)
   ======================================== */

.adhd-tip-card {
    background: var(--ads-white, #ffffff);
    border: 1px solid var(--ads-gray-200, #E5E7EB);
    border-left: 4px solid var(--ads-accent, #F5A623);
    border-radius: var(--ads-radius-md, 8px);
    padding: var(--ads-spacing-md, 24px);
    box-shadow: var(--ads-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition: all var(--ads-transition-base, 300ms ease-in-out);
}

.adhd-tip-card:hover {
    transform: translateX(2px);
    box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* ========================================
   TYPE CARD VARIANT
   Prominent cards for ADHD type categories
   Used in: Wat is ADHD page (15 occurrences)
   ======================================== */

.adhd-type-card {
    background: var(--ads-white, #ffffff);
    border: 2px solid var(--ads-primary, #4A90E2);
    border-radius: var(--ads-radius-lg, 12px);
    padding: var(--ads-spacing-lg, 40px);
    text-align: center;
    transition: all var(--ads-transition-base, 300ms ease-in-out);
}

.adhd-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 144, 226, 0.15);
}

/* ========================================
   TOOL CARD VARIANT
   Resource cards for downloadable tools
   Used in: Hulpmiddelen page (2 occurrences)
   ======================================== */

.adhd-tool-card {
    background: var(--ads-white, #ffffff);
    border: 1px solid var(--ads-gray-200, #E5E7EB);
    border-top: 3px solid var(--ads-accent, #F5A623);
    border-radius: var(--ads-radius-md, 8px);
    padding: var(--ads-spacing-md, 24px);
    transition: all var(--ads-transition-base, 300ms ease-in-out);
}

.adhd-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.15);
}

.adhd-tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ads-spacing-sm, 16px);
}

.adhd-tool-buttons {
    display: flex;
    gap: var(--ads-spacing-xs, 8px);
}

/**
 * Carousel Component
 * Testimonial carousel with navigation controls
 * ADHD-friendly: Clear navigation, pausable auto-play, smooth transitions
 */

/* ========================================
   Carousel Container
   ======================================== */
.adhd-testimonial-carousel {
	position: relative;
	width: 100%;
}

.carousel-container {
	position: relative;
	overflow: hidden;
	border-radius: var(--ads-radius-xl, 16px);
}

/* ========================================
   Carousel Track & Slides
   ======================================== */
.carousel-track {
	display: flex;
	transition: transform var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
	will-change: transform;
}

.carousel-slide {
	flex: 0 0 100%;
	width: 100%;
	opacity: 0;
	transition: opacity var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
	display: none;
}

.carousel-slide.active {
	opacity: 1;
	display: block;
	animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ========================================
   Carousel Controls
   ======================================== */
.carousel-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background: var(--ads-white, #FFFFFF);
	border: 2px solid var(--ads-gray-300, #D1D5DB);
	border-radius: var(--ads-radius-full, 9999px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--ads-transition-fast, 0.2s) var(--ads-ease-smooth, ease);
	z-index: 10;
	box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.carousel-control:hover {
	background: var(--ads-primary, #4A90E2);
	border-color: var(--ads-primary, #4A90E2);
	transform: translateY(-50%) scale(1.1);
	box-shadow: var(--ads-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

.carousel-control:hover .dashicons {
	color: var(--ads-white, #FFFFFF);
}

.carousel-control:focus-visible {
	outline: 3px solid var(--ads-primary, #4A90E2);
	outline-offset: 2px;
}

.carousel-control .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: var(--ads-gray-700, #374151);
	transition: color var(--ads-transition-fast, 0.2s) ease;
}

.carousel-control-prev {
	left: -24px;
}

.carousel-control-next {
	right: -24px;
}

.carousel-control:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.carousel-control:disabled:hover {
	background: var(--ads-white, #FFFFFF);
	border-color: var(--ads-gray-300, #D1D5DB);
	transform: translateY(-50%);
}

/* ========================================
   Carousel Indicators
   ======================================== */
.carousel-indicators {
	display: flex;
	justify-content: center;
	gap: var(--ads-spacing-sm, 16px);
	margin-top: var(--ads-spacing-lg, 40px);
}

.carousel-indicator {
	width: 12px;
	height: 12px;
	background: var(--ads-gray-300, #D1D5DB);
	border: none;
	border-radius: var(--ads-radius-full, 9999px);
	cursor: pointer;
	transition: all var(--ads-transition-fast, 0.2s) var(--ads-ease-smooth, ease);
	padding: 0;
}

.carousel-indicator:hover {
	background: var(--ads-gray-400, #9CA3AF);
	transform: scale(1.2);
}

.carousel-indicator.active {
	background: var(--ads-primary, #4A90E2);
	width: 32px;
	border-radius: var(--ads-radius-full, 9999px);
}

.carousel-indicator:focus-visible {
	outline: 2px solid var(--ads-primary, #4A90E2);
	outline-offset: 2px;
}

/* ========================================
   Testimonial Card Styling (in carousel)
   ======================================== */
.carousel-slide .adhd-card {
	background: var(--ads-white, #FFFFFF);
	border: 2px solid var(--ads-gray-200, #E5E7EB);
}

.testimonial-rating {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: var(--ads-spacing-md, 24px);
}

.star-rating {
	color: var(--ads-warning, #F39C12);
	font-size: 24px;
}

.testimonial-quote {
	font-style: italic;
	font-size: var(--ads-text-lg, 18px);
	line-height: 1.6;
	color: var(--ads-gray-700, #374151);
	margin-bottom: var(--ads-spacing-lg, 40px);
	position: relative;
}

.testimonial-quote::before {
	content: '"';
	font-size: 4rem;
	color: var(--ads-gray-200, #E5E7EB);
	position: absolute;
	top: -20px;
	left: -10px;
	font-family: Georgia, serif;
	line-height: 1;
}

.testimonial-author {
	text-align: center;
}

.author-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--ads-radius-full, 9999px);
	margin: 0 auto var(--ads-spacing-sm, 16px);
}

.author-avatar .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.author-avatar-primary {
	background: var(--ads-primary, #4A90E2);
}

.author-avatar-secondary {
	background: var(--ads-secondary, #7ED321);
}

.author-avatar-accent {
	background: var(--ads-accent, #F5A623);
}

.author-name {
	font-size: var(--ads-text-xl, 20px);
	font-weight: 700;
	color: var(--ads-gray-900, #111827);
	margin-bottom: var(--ads-spacing-xs, 8px);
}

.author-role {
	font-size: var(--ads-text-base, 16px);
	color: var(--ads-gray-600, #4B5563);
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
	.carousel-control {
		width: 40px;
		height: 40px;
	}

	.carousel-control .dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	.carousel-control-prev {
		left: -20px;
	}

	.carousel-control-next {
		right: -20px;
	}

	.testimonial-quote {
		font-size: var(--ads-text-base, 16px);
	}

	.author-avatar {
		width: 56px;
		height: 56px;
	}

	.author-avatar .dashicons {
		font-size: 28px;
		width: 28px;
		height: 28px;
	}

	.author-name {
		font-size: var(--ads-text-lg, 18px);
	}

	.author-role {
		font-size: var(--ads-text-sm, 14px);
	}
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
	.carousel-control {
		width: 36px;
		height: 36px;
		position: static;
		margin: var(--ads-spacing-md, 24px) auto 0;
	}

	.carousel-control-prev,
	.carousel-control-next {
		left: auto;
		right: auto;
		transform: none;
	}

	.carousel-control:hover {
		transform: scale(1.1);
	}

	/* Show controls below carousel on mobile */
	.carousel-container {
		margin-bottom: var(--ads-spacing-md, 24px);
	}

	.carousel-indicators {
		margin-top: var(--ads-spacing-md, 24px);
	}

	.testimonial-quote::before {
		font-size: 3rem;
		top: -15px;
	}

	.author-avatar {
		width: 48px;
		height: 48px;
	}

	.author-avatar .dashicons {
		font-size: 24px;
		width: 24px;
		height: 24px;
	}
}

/* ========================================
   Swipe Support (Touch Devices)
   ======================================== */
.carousel-container.dragging {
	cursor: grabbing;
}

.carousel-container.dragging .carousel-slide {
	pointer-events: none;
}

/* ========================================
   Reduced Motion Support
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	.carousel-track,
	.carousel-slide,
	.carousel-control,
	.carousel-indicator {
		transition: none;
		animation: none;
	}

	.carousel-slide.active {
		animation: none;
	}

	.carousel-control:hover {
		transform: translateY(-50%);
	}

	@media (max-width: 480px) {
		.carousel-control:hover {
			transform: none;
		}
	}
}

/* ========================================
   Auto-play Pause Button
   ======================================== */
.carousel-autoplay-toggle {
	position: absolute;
	top: var(--ads-spacing-md, 24px);
	right: var(--ads-spacing-md, 24px);
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--ads-gray-300, #D1D5DB);
	border-radius: var(--ads-radius-full, 9999px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--ads-transition-fast, 0.2s) ease;
	z-index: 11;
	opacity: 0;
}

.carousel-container:hover .carousel-autoplay-toggle {
	opacity: 1;
}

.carousel-autoplay-toggle:hover {
	background: var(--ads-white, #FFFFFF);
	box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.carousel-autoplay-toggle .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--ads-gray-700, #374151);
}
   FORM COMPONENTS - Modern Input System
   Enhanced forms with floating labels & validation
   ======================================== */

/* Form Groups */
.ads-form-group {
    position: relative;
    margin-bottom: var(--ads-spacing-md, 24px);
}

/* Base Input Styling */
.ads-input,
.ads-textarea,
.ads-select {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--ads-font-size-base, 1rem);
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    color: var(--ads-gray-900, #111827);
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-md, 8px);
    transition: all var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.ads-input:focus,
.ads-textarea:focus,
.ads-select:focus {
    outline: none;
    border-color: var(--ads-primary, #4A90E2);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.ads-input::placeholder,
.ads-textarea::placeholder {
    color: var(--ads-gray-400, #9CA3AF);
}

.ads-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Floating Label Inputs */
.ads-form-floating {
    position: relative;
}

.ads-form-floating .ads-input,
.ads-form-floating .ads-textarea {
    padding-top: 20px;
    padding-bottom: 4px;
}

.ads-form-floating label {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: var(--ads-font-size-base, 1rem);
    color: var(--ads-gray-500, #6B7280);
    pointer-events: none;
    transition: all var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    transform-origin: left top;
}

.ads-form-floating .ads-input:focus + label,
.ads-form-floating .ads-input:not(:placeholder-shown) + label,
.ads-form-floating .ads-textarea:focus + label,
.ads-form-floating .ads-textarea:not(:placeholder-shown) + label {
    top: 4px;
    font-size: var(--ads-font-size-xs, 0.75rem);
    color: var(--ads-primary, #4A90E2);
}

/* Input Sizes */
.ads-input-sm {
    padding: 8px 12px;
    font-size: var(--ads-font-size-sm, 0.875rem);
}

.ads-input-lg {
    padding: 16px 20px;
    font-size: var(--ads-font-size-lg, 1.125rem);
}

/* Input with Icons */
.ads-input-group {
    position: relative;
}

.ads-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ads-gray-400, #9CA3AF);
    pointer-events: none;
}

.ads-input-icon-left {
    left: 12px;
}

.ads-input-icon-right {
    right: 12px;
}

.ads-input-group .ads-input-with-icon-left {
    padding-left: 40px;
}

.ads-input-group .ads-input-with-icon-right {
    padding-right: 40px;
}

/* Validation States */
.ads-input-success,
.ads-textarea-success {
    border-color: var(--ads-success, #27AE60);
}

.ads-input-success:focus,
.ads-textarea-success:focus {
    border-color: var(--ads-success, #27AE60);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.ads-input-error,
.ads-textarea-error {
    border-color: var(--ads-danger, #E74C3C);
}

.ads-input-error:focus,
.ads-textarea-error:focus {
    border-color: var(--ads-danger, #E74C3C);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.ads-input-warning,
.ads-textarea-warning {
    border-color: var(--ads-warning, #F39C12);
}

.ads-input-warning:focus,
.ads-textarea-warning:focus {
    border-color: var(--ads-warning, #F39C12);
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
}

/* Validation Feedback Messages */
.ads-form-feedback {
    display: block;
    margin-top: 6px;
    font-size: var(--ads-font-size-sm, 0.875rem);
}

.ads-form-feedback-success {
    color: var(--ads-success, #27AE60);
}

.ads-form-feedback-error {
    color: var(--ads-danger, #E74C3C);
}

.ads-form-feedback-warning {
    color: var(--ads-warning, #F39C12);
}

/* Character Counter */
.ads-form-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: var(--ads-font-size-sm, 0.875rem);
    color: var(--ads-gray-500, #6B7280);
}

.ads-form-counter-limit {
    color: var(--ads-danger, #E74C3C);
}

/* Checkbox & Radio Buttons */
.ads-checkbox,
.ads-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ads-checkbox input[type="checkbox"],
.ads-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ads-primary, #4A90E2);
}

/* Custom Checkbox */
.ads-checkbox-custom {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    user-select: none;
}

.ads-checkbox-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.ads-checkbox-custom .checkmark {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-sm, 4px);
    transition: all var(--ads-transition-fast, 150ms);
}

.ads-checkbox-custom input:checked ~ .checkmark {
    background: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
}

.ads-checkbox-custom .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ads-checkbox-custom input:checked ~ .checkmark::after {
    display: block;
}

/* Toggle Switch */
.ads-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.ads-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ads-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-full, 9999px);
    transition: all var(--ads-transition-base, 300ms);
}

.ads-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.ads-toggle input:checked + .ads-toggle-slider {
    background: var(--ads-primary, #4A90E2);
}

.ads-toggle input:checked + .ads-toggle-slider::before {
    transform: translateX(24px);
}

.ads-toggle input:focus + .ads-toggle-slider {
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* File Upload */
.ads-file-upload {
    position: relative;
    display: inline-block;
}

.ads-file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ads-file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ads-white, #FFFFFF);
    border: 2px dashed var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-md, 8px);
    cursor: pointer;
    transition: all var(--ads-transition-base, 300ms);
}

.ads-file-upload-label:hover {
    border-color: var(--ads-primary, #4A90E2);
    background: var(--ads-gray-50, #F9FAFB);
}

.ads-file-upload input:focus + .ads-file-upload-label {
    border-color: var(--ads-primary, #4A90E2);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Search Input */
.ads-search {
    position: relative;
}

.ads-search-input {
    padding-left: 40px;
}

.ads-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ads-gray-400, #9CA3AF);
    pointer-events: none;
}

.ads-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--ads-gray-400, #9CA3AF);
    opacity: 0;
    transition: opacity var(--ads-transition-fast, 150ms);
}

.ads-search-input:not(:placeholder-shown) ~ .ads-search-clear {
    opacity: 1;
}

.ads-search-clear:hover {
    color: var(--ads-gray-600, #4B5563);
}

/* Input Disabled State */
.ads-input:disabled,
.ads-textarea:disabled,
.ads-select:disabled {
    background: var(--ads-gray-100, #F3F4F6);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Form Helper Text */
.ads-form-help {
    display: block;
    margin-top: 6px;
    font-size: var(--ads-font-size-sm, 0.875rem);
    color: var(--ads-gray-500, #6B7280);
}

/**
 * Quiz Preview Component
 * Interactive inline quiz with instant feedback
 * ADHD-friendly: clear visual feedback, progress indication
 */

/* ========================================
   Quiz Container
   ======================================== */
.adhd-quiz-preview {
	width: 100%;
}

/* ========================================
   Quiz Question Card
   ======================================== */
.quiz-question-card {
	background: var(--ads-white, #FFFFFF);
	border: 2px solid var(--ads-gray-200, #E5E7EB);
	border-radius: var(--ads-radius-lg, 12px);
	padding: var(--ads-spacing-lg, 40px);
	margin-bottom: var(--ads-spacing-lg, 40px);
	transition: all var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
}

.quiz-question-card.answered {
	border-color: var(--ads-primary, #4A90E2);
	background: var(--ads-gray-50, #F9FAFB);
}

/* Quiz Question Header */
.quiz-question-header {
	margin-bottom: var(--ads-spacing-md, 24px);
}

.quiz-question-number {
	display: inline-block;
	font-size: var(--ads-text-sm, 14px);
	font-weight: 600;
	color: var(--ads-primary, #4A90E2);
	background: rgba(74, 144, 226, 0.1);
	padding: 4px 12px;
	border-radius: var(--ads-radius-full, 9999px);
	margin-bottom: var(--ads-spacing-sm, 16px);
}

.quiz-question-text {
	font-size: var(--ads-text-xl, 20px);
	font-weight: 700;
	color: var(--ads-gray-900, #111827);
	line-height: 1.4;
	margin: 0;
}

/* ========================================
   Quiz Answers
   ======================================== */
.quiz-answers {
	display: flex;
	flex-direction: column;
	gap: var(--ads-spacing-sm, 16px);
}

.quiz-answer-btn {
	display: flex;
	align-items: center;
	gap: var(--ads-spacing-sm, 16px);
	padding: var(--ads-spacing-md, 24px);
	background: var(--ads-white, #FFFFFF);
	border: 2px solid var(--ads-gray-300, #D1D5DB);
	border-radius: var(--ads-radius-lg, 12px);
	font-size: var(--ads-text-base, 16px);
	font-weight: 500;
	color: var(--ads-gray-700, #374151);
	cursor: pointer;
	transition: all var(--ads-transition-fast, 0.2s) var(--ads-ease-smooth, ease);
	text-align: left;
	width: 100%;
}

.quiz-answer-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--ads-gray-100, #F3F4F6);
	border-radius: var(--ads-radius-full, 9999px);
	flex-shrink: 0;
}

.quiz-answer-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--ads-gray-600, #4B5563);
}

/* Answer Button Hover */
.quiz-answer-btn:hover:not(.selected):not(:disabled) {
	border-color: var(--ads-primary, #4A90E2);
	background: var(--ads-gray-50, #F9FAFB);
	transform: translateX(4px);
	box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

/* Answer Button Selected */
.quiz-answer-btn.selected {
	border-color: var(--ads-primary, #4A90E2);
	background: rgba(74, 144, 226, 0.1);
	color: var(--ads-primary, #4A90E2);
	font-weight: 600;
}

.quiz-answer-btn.selected .quiz-answer-icon {
	background: var(--ads-primary, #4A90E2);
}

.quiz-answer-btn.selected .quiz-answer-icon .dashicons {
	color: var(--ads-white, #FFFFFF);
}

/* Answer Button Disabled */
.quiz-answer-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Answer Button Focus */
.quiz-answer-btn:focus-visible {
	outline: 3px solid var(--ads-primary, #4A90E2);
	outline-offset: 2px;
}

/* ========================================
   Quiz Feedback
   ======================================== */
.quiz-feedback {
	margin-top: var(--ads-spacing-md, 24px);
	padding: var(--ads-spacing-md, 24px);
	border-radius: var(--ads-radius-lg, 12px);
	animation: slideDown 0.3s ease;
}

.quiz-feedback.feedback-yes {
	background: rgba(234, 179, 8, 0.1);
	border: 2px solid var(--ads-warning, #F39C12);
}

.quiz-feedback.feedback-sometimes {
	background: rgba(74, 144, 226, 0.1);
	border: 2px solid var(--ads-info, #3498DB);
}

.quiz-feedback.feedback-no {
	background: rgba(39, 174, 96, 0.1);
	border: 2px solid var(--ads-success, #27AE60);
}

.quiz-feedback-content {
	display: flex;
	align-items: flex-start;
	gap: var(--ads-spacing-sm, 16px);
	font-size: var(--ads-text-base, 16px);
	color: var(--ads-gray-700, #374151);
	line-height: 1.6;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   Quiz Progress
   ======================================== */
.quiz-progress {
	margin-bottom: var(--ads-spacing-lg, 40px);
}

.quiz-progress-label {
	font-size: var(--ads-text-sm, 14px);
	font-weight: 600;
	color: var(--ads-gray-600, #4B5563);
	margin-bottom: var(--ads-spacing-xs, 8px);
}

.quiz-progress-current {
	color: var(--ads-primary, #4A90E2);
	font-weight: 700;
}

/* ========================================
   Quiz CTA
   ======================================== */
.quiz-cta {
	padding-top: var(--ads-spacing-xl, 64px);
	border-top: 2px solid var(--ads-gray-200, #E5E7EB);
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
	.quiz-question-card {
		padding: var(--ads-spacing-md, 24px);
	}

	.quiz-question-text {
		font-size: var(--ads-text-lg, 18px);
	}

	.quiz-answer-btn {
		padding: var(--ads-spacing-sm, 16px);
		font-size: var(--ads-text-sm, 14px);
	}

	.quiz-answer-icon {
		width: 28px;
		height: 28px;
	}
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
	.quiz-question-card {
		padding: var(--ads-spacing-sm, 16px);
	}

	.quiz-question-text {
		font-size: var(--ads-text-base, 16px);
	}

	.quiz-answer-btn {
		gap: var(--ads-spacing-xs, 8px);
	}
}

/* ========================================
   Reduced Motion Support
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	.quiz-answer-btn,
	.quiz-feedback,
	.quiz-question-card {
		transition: none;
		animation: none;
	}

	.quiz-answer-btn:hover {
		transform: none;
	}
}
/* ============================================
   TAB SYSTEM COMPONENT
   ============================================

   Accessible tabbed interface for content organization

   Features:
   - Smooth transitions
   - Keyboard navigation support
   - WCAG 2.1 AA compliant
   - Mobile responsive
   - Focus indicators

   Usage:
   <div class="adhd-tabs">
     <div class="adhd-tab-nav">
       <button class="adhd-tab-button active">Tab 1</button>
       ...
     </div>
     <div class="adhd-tab-content active">Content 1</div>
     ...
   </div>

   ============================================ */

/* Tab Container */
.adhd-tabs {
    margin: 0;
    background: transparent;
    width: 100%;
}

/* ========================================
   NEW HOMEPAGE TABS STYLING
   ======================================== */

/* Tab Navigation - Pill Style */
.adhd-tabs-nav {
    display: flex;
    justify-content: center;
    gap: var(--ads-spacing-sm, 16px);
    flex-wrap: wrap;
    border-bottom: none;
    padding: 0;
    margin-bottom: var(--ads-spacing-lg, 40px);
    background: transparent;
}

/* Tab Button - Pill Style */
.adhd-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ads-spacing-xs, 8px);
    padding: var(--ads-spacing-sm, 16px) var(--ads-spacing-md, 24px);
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-lg, 12px);
    color: var(--ads-gray-700, #374151);
    font-size: var(--ads-text-base, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease);
    position: relative;
    line-height: 1.4;
}

.adhd-tab-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Tab Button Hover */
.adhd-tab-btn:hover:not(.active) {
    background: var(--ads-gray-50, #F9FAFB);
    border-color: var(--ads-primary, #4A90E2);
    color: var(--ads-primary, #4A90E2);
    transform: translateY(-2px);
    box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06));
}

/* Tab Button Active */
.adhd-tab-btn.active {
    background: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    box-shadow: var(--ads-shadow-primary, 0 4px 6px -1px rgba(74,144,226,0.3), 0 2px 4px -1px rgba(74,144,226,0.2));
}

/* Tab Button Focus (Keyboard Accessibility) */
.adhd-tab-btn:focus-visible {
    outline: 3px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
}

/* Tab Content Container */
.adhd-tabs-content {
    padding-top: 0;
}

/* Tab Panel */
.adhd-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    animation: none;
}

.adhd-tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp var(--ads-transition-normal, 0.3s) var(--ads-ease-smooth, ease) forwards;
}

/* Tab Content Text */
.tab-content-text {
    padding-right: var(--ads-spacing-md, 24px);
}

/* Tab Features List */
.tab-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--ads-spacing-sm, 16px);
    margin-bottom: var(--ads-spacing-sm, 16px);
    font-size: var(--ads-text-base, 16px);
    color: var(--ads-gray-700, #374151);
    line-height: 1.6;
}

.tab-features-list li .dashicons {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 24px;
    margin-top: 2px;
}

/* Tab Visual */
.tab-visual {
    padding-left: var(--ads-spacing-md, 24px);
}

/* Tab Stat Grid */
.tab-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ads-spacing-lg, 40px);
    text-align: center;
}

/* ========================================
   LEGACY TAB STYLING (Backward Compatible)
   ======================================== */

/* Tab Navigation Container */
.adhd-tab-nav,
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--ads-gray-100, #f5f5f5);
    border-bottom: 2px solid var(--ads-gray-200, #e5e5e5);
    padding: 0;
    margin: 0;
}

/* Individual Tab Button */
.adhd-tab-button {
    /* Reset */
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;

    /* Layout */
    flex: 1 1 auto;
    min-width: 120px;
    padding: 1rem 1.5rem;

    /* Typography */
    font-size: 1rem;
    font-weight: 500;
    color: var(--ads-gray-700, #4a5568);
    text-align: center;
    line-height: 1.4;

    /* Visual */
    background-color: transparent;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;

    /* Spacing */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tab Button Hover State */
.adhd-tab-button:hover {
    background-color: var(--ads-gray-50, #fafafa);
    color: var(--ads-primary, #4A90E2);
}

/* Tab Button Active State */
.adhd-tab-button.active {
    color: var(--ads-primary, #4A90E2);
    background-color: var(--ads-white, #ffffff);
    border-bottom-color: var(--ads-primary, #4A90E2);
    font-weight: 600;
}

/* Tab Button Focus State (WCAG 2.1 AA) */
.adhd-tab-button:focus {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: -2px;
    z-index: 1;
}

.adhd-tab-button:focus:not(:focus-visible) {
    outline: none;
}

.adhd-tab-button:focus-visible {
    outline: 2px solid var(--ads-primary, #4A90E2);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Tab Button Active Indicator (Optional enhancement) */
.adhd-tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ads-primary, #4A90E2);
    animation: tabSlideIn 0.3s ease;
}

@keyframes tabSlideIn {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Tab Content Panels Container */
.adhd-tab-panels,
.tab-contents {
    position: relative;
    padding: 0;
    margin: 0;
}

/* Individual Tab Content Panel */
.adhd-tab-content {
    /* Hidden by default */
    display: none;
    opacity: 0;

    /* Layout */
    padding: 2rem;

    /* Animation ready */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
}

/* Active Tab Content */
.adhd-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: tabContentFadeIn 0.4s ease;
}

@keyframes tabContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Content Typography */
.adhd-tab-content h3,
.adhd-tab-panel h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--ads-gray-900, #1a202c);
    font-size: 1.5rem;
    font-weight: 600;
}

.adhd-tab-content h4,
.adhd-tab-panel h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--ads-gray-800, #2d3748);
    font-size: 1.25rem;
    font-weight: 600;
}

.adhd-tab-content p,
.adhd-tab-panel p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--ads-gray-700, #4a5568);
}

.adhd-tab-content ul,
.adhd-tab-content ol,
.adhd-tab-panel ul,
.adhd-tab-panel ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.adhd-tab-content li,
.adhd-tab-panel li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Nested Components Support */
.adhd-tab-content .adhd-card,
.adhd-tab-content .adhd-info-box,
.adhd-tab-content .adhd-highlight,
.adhd-tab-panel .adhd-card,
.adhd-tab-panel .adhd-info-box,
.adhd-tab-panel .adhd-highlight {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    /* New homepage tabs */
    .adhd-tabs-nav {
        gap: var(--ads-spacing-xs, 8px);
    }

    .adhd-tab-btn {
        padding: var(--ads-spacing-xs, 8px) var(--ads-spacing-sm, 16px);
        font-size: var(--ads-text-sm, 14px);
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }

    .adhd-tab-btn .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    .tab-content-text {
        padding-right: 0;
        margin-bottom: var(--ads-spacing-lg, 40px);
    }

    .tab-visual {
        padding-left: 0;
    }

    .tab-stat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ads-spacing-md, 24px);
    }

    /* Legacy tabs */
    .adhd-tab-nav,
    .tab-buttons {
        flex-direction: column;
        border-bottom: none;
    }

    .adhd-tab-button {
        min-width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--ads-gray-200, #e5e5e5);
        border-left: 3px solid transparent;
        padding: 1rem 1.25rem;
    }

    .adhd-tab-button.active {
        border-bottom-color: var(--ads-gray-200, #e5e5e5);
        border-left-color: var(--ads-primary, #4A90E2);
    }

    .adhd-tab-button.active::after {
        display: none;
    }

    .adhd-tab-content {
        padding: 1.5rem 1rem;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    /* New homepage tabs */
    .adhd-tabs-nav {
        flex-direction: column;
        gap: var(--ads-spacing-xs, 8px);
    }

    .adhd-tab-btn {
        width: 100%;
        flex: 1 1 100%;
        min-width: 100%;
        justify-content: center;
    }

    .tab-stat-grid {
        grid-template-columns: 1fr;
        gap: var(--ads-spacing-md, 24px);
    }

    /* Legacy tabs */
    .adhd-tab-button {
        font-size: 0.95rem;
        padding: 0.875rem 1rem;
    }

    .adhd-tab-content {
        padding: 1.25rem 0.75rem;
    }

    .adhd-tab-content h3 {
        font-size: 1.25rem;
    }

    .adhd-tab-content h4 {
        font-size: 1.1rem;
    }
}

/* ============================================
   VARIANT: COMPACT TABS
   ============================================ */

.adhd-tabs.compact .adhd-tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.adhd-tabs.compact .adhd-tab-content {
    padding: 1.5rem;
}

/* ============================================
   VARIANT: BORDERED TABS
   ============================================ */

.adhd-tabs.bordered {
    border: 1px solid var(--ads-gray-200, #e5e5e5);
}

/* ============================================
   VARIANT: PILLS STYLE
   ============================================ */

.adhd-tabs.pills .adhd-tab-nav,
.adhd-tabs.pills .tab-buttons {
    background: transparent;
    border-bottom: none;
    gap: 0.5rem;
    padding: 0.5rem;
}

.adhd-tabs.pills .adhd-tab-button {
    border-radius: 20px;
    border: 1px solid var(--ads-gray-300, #d1d5db);
    background: var(--ads-white, #ffffff);
    border-bottom: 1px solid var(--ads-gray-300, #d1d5db);
}

.adhd-tabs.pills .adhd-tab-button.active {
    background: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #ffffff);
    border-color: var(--ads-primary, #4A90E2);
}

.adhd-tabs.pills .adhd-tab-button.active::after {
    display: none;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .adhd-tab-button {
        border: 2px solid currentColor;
    }

    .adhd-tab-button.active {
        background: var(--ads-primary, #4A90E2);
        color: var(--ads-white, #ffffff);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .adhd-tab-button,
    .adhd-tab-content {
        transition: none;
        animation: none;
    }

    .adhd-tab-content.active {
        animation: none;
    }
}

/* Screen Reader Only Text */
.adhd-tab-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

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

@media print {
    .adhd-tab-nav,
    .tab-buttons {
        display: none;
    }

    .adhd-tab-content {
        display: block !important;
        opacity: 1 !important;
        page-break-inside: avoid;
    }

    .adhd-tab-content:not(:first-of-type) {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid #000;
    }
}

/* ============================================
   LEGACY SUPPORT
   ============================================

   Support for existing HTML structures
   ============================================ */

/* Support for .symptom-tabs variant */
.symptom-tabs.adhd-tabs {
    /* Inherits all base styles */
}

/* Support for .tab-buttons instead of .adhd-tab-nav */
/* Already covered by selectors above */

/* Support for .tab-contents instead of .adhd-tab-panels */
/* Already covered by selectors above */
/* ========================================
   ADHD TEST COMPONENTS - Complete Interactive System
   Medical questionnaire UI with accessibility-first design
   Created: 2025-10-26
   ======================================== */

/* ========================================
   1. TEST CONTAINER & STRUCTURE
   ======================================== */

.adhd-test-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--ads-spacing-md, 24px);
}

.adhd-test-header {
    margin-bottom: var(--ads-spacing-lg, 40px);
    text-align: center;
}

.adhd-test-header h2 {
    margin-bottom: var(--ads-spacing-sm, 16px);
    color: var(--ads-gray-900, #111827);
}

/* ========================================
   2. PROGRESS BAR SYSTEM
   ======================================== */

.adhd-test-progress {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--ads-gray-200, #E5E7EB);
    border-radius: var(--ads-radius-full, 9999px);
    overflow: hidden;
    margin-bottom: var(--ads-spacing-sm, 16px);
}

.adhd-test-progress-bar {
    height: 100%;
    background: linear-gradient(90deg,
        var(--ads-primary, #4A90E2) 0%,
        var(--ads-secondary, #7ED321) 100%
    );
    border-radius: var(--ads-radius-full, 9999px);
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}

.adhd-test-progress-text {
    display: block;
    text-align: center;
    font-size: var(--ads-font-size-sm, 0.875rem);
    color: var(--ads-gray-600, #4B5563);
    margin-top: 8px;
}

/* ========================================
   3. AGE SELECTOR (Children's Test)
   ======================================== */

.adhd-test-age-selector {
    margin-bottom: var(--ads-spacing-lg, 40px);
    padding: var(--ads-spacing-md, 24px);
    background: var(--ads-gray-50, #F9FAFB);
    border-radius: var(--ads-radius-lg, 12px);
    text-align: center;
}

.adhd-test-age-selector h3 {
    margin-bottom: var(--ads-spacing-sm, 16px);
    color: var(--ads-gray-900, #111827);
}

.adhd-age-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.adhd-age-btn {
    padding: 14px 28px;
    font-size: var(--ads-font-size-base, 1rem);
    font-weight: 600;
    color: var(--ads-gray-700, #374151);
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-md, 8px);
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.adhd-age-btn:hover {
    background: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.adhd-age-btn:active {
    transform: translateY(0);
}

.adhd-age-btn.active {
    background: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

/* ========================================
   4. TEST FORM & SECTIONS
   ======================================== */

.adhd-test-form {
    margin-bottom: var(--ads-spacing-xl, 64px);
}

.adhd-test-section {
    margin-bottom: var(--ads-spacing-xl, 64px);
}

.adhd-test-section h3 {
    font-family: var(--ads-font-family-heading, 'Montserrat', sans-serif);
    font-size: var(--ads-font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--ads-gray-900, #111827);
    margin-bottom: var(--ads-spacing-sm, 16px);
    padding-bottom: 12px;
    border-bottom: 3px solid var(--ads-primary, #4A90E2);
}

.adhd-section-intro {
    font-size: var(--ads-font-size-base, 1rem);
    color: var(--ads-gray-600, #4B5563);
    margin-bottom: var(--ads-spacing-md, 24px);
    line-height: 1.6;
}

/* ========================================
   5. QUESTION CONTAINER - PRIMARY COMPONENT
   ======================================== */

.adhd-test-question {
    padding: var(--ads-spacing-md, 24px);
    margin-bottom: var(--ads-spacing-lg, 40px);
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-200, #E5E7EB);
    border-radius: var(--ads-radius-lg, 12px);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.adhd-test-question:hover {
    border-color: var(--ads-gray-300, #D1D5DB);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Question answered state (optional - add via JS) */
.adhd-test-question.answered {
    border-left: 4px solid var(--ads-success, #27AE60);
}

/* Question unanswered state (optional - add via JS) */
.adhd-test-question.unanswered {
    border-left: 4px solid var(--ads-warning, #F39C12);
}

/* Question currently active (optional) */
.adhd-test-question.active {
    border-color: var(--ads-primary, #4A90E2);
    box-shadow: 0 4px 16px rgba(74, 144, 226, 0.15);
}

/* ========================================
   6. QUESTION TEXT - TYPOGRAPHY
   ======================================== */

.adhd-question-text {
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    font-size: var(--ads-font-size-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ads-gray-900, #111827);
    margin-bottom: var(--ads-spacing-sm, 16px);
    max-width: 75ch;
}

/* Optional question number styling */
.adhd-question-text .question-number {
    display: inline-block;
    font-size: var(--ads-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--ads-gray-500, #6B7280);
    margin-right: 8px;
}

/* Required indicator */
.adhd-question-text .required {
    color: var(--ads-danger, #E74C3C);
    margin-left: 4px;
}

/* ========================================
   7. ANSWER OPTIONS - CORE INTERACTIVE COMPONENT
   ======================================== */

.adhd-answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Desktop: Horizontal layout */
@media (min-width: 768px) {
    .adhd-answer-options {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (min-width: 1024px) {
    .adhd-answer-options {
        flex-wrap: nowrap;
        gap: 12px;
    }
}

/* ========================================
   8. INDIVIDUAL ANSWER OPTION - INTERACTIVE STATES
   ======================================== */

.adhd-answer-options label {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    min-height: 48px;

    /* Typography */
    font-family: var(--ads-font-family-base, 'Open Sans', sans-serif);
    font-size: var(--ads-font-size-base, 1rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;

    /* Default appearance */
    color: var(--ads-gray-700, #374151);
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    border-radius: var(--ads-radius-md, 8px);

    /* Interaction */
    cursor: pointer;
    user-select: none;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop responsive sizing */
@media (min-width: 768px) {
    .adhd-answer-options label {
        flex: 0 1 calc(50% - 5px);
    }
}

@media (min-width: 1024px) {
    .adhd-answer-options label {
        flex: 1;
        min-width: 100px;
    }
}

/* ========================================
   9. HOVER STATE (Desktop Only)
   ======================================== */

@media (hover: hover) and (pointer: fine) {
    .adhd-answer-options label:hover {
        background: var(--ads-gray-50, #F9FAFB);
        border-color: var(--ads-primary, #4A90E2);
        color: var(--ads-gray-900, #111827);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* ========================================
   10. FOCUS STATE (Keyboard Navigation)
   ======================================== */

.adhd-answer-options label:focus-within {
    outline: 3px solid var(--ads-primary, #4A90E2);
    outline-offset: 2px;
    border-color: var(--ads-primary, #4A90E2);
    background: var(--ads-gray-50, #F9FAFB);
    z-index: 10;
}

.adhd-answer-options input[type="radio"]:focus {
    outline: none;
}

/* ========================================
   11. ACTIVE STATE (Click Moment)
   ======================================== */

.adhd-answer-options label:active {
    transform: scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   12. SELECTED STATE (Checked Radio Button)
   ======================================== */

.adhd-answer-options label:has(input[type="radio"]:checked) {
    background: var(--ads-primary, #4A90E2);
    border-color: var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.25);
}

/* Selected + Hover combination */
@media (hover: hover) and (pointer: fine) {
    .adhd-answer-options label:has(input[type="radio"]:checked):hover {
        background: #357ABD;
        border-color: #357ABD;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.35);
    }
}

/* ========================================
   13. RADIO BUTTON VISUAL HIDING
   ======================================== */

.adhd-answer-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Alternative: Show radio button (if preferred) */
.adhd-answer-options.show-radio input[type="radio"] {
    position: static;
    opacity: 1;
    width: 20px;
    height: 20px;
    pointer-events: auto;
    margin: 0;
    accent-color: var(--ads-primary, #4A90E2);
}

/* ========================================
   14. DISABLED STATE
   ======================================== */

.adhd-answer-options label:has(input[type="radio"]:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--ads-gray-100, #F3F4F6);
}

/* ========================================
   15. TEST NAVIGATION BUTTONS
   ======================================== */

.adhd-test-navigation {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: var(--ads-spacing-lg, 40px);
}

.adhd-test-prev,
.adhd-test-next {
    flex: 1;
    max-width: 200px;
    padding: 14px 28px;
    font-size: var(--ads-font-size-base, 1rem);
    font-weight: 600;
    border-radius: var(--ads-radius-md, 8px);
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.adhd-test-prev {
    background: var(--ads-white, #FFFFFF);
    border: 2px solid var(--ads-gray-300, #D1D5DB);
    color: var(--ads-gray-700, #374151);
}

.adhd-test-prev:hover {
    border-color: var(--ads-gray-400, #9CA3AF);
    background: var(--ads-gray-50, #F9FAFB);
}

.adhd-test-next {
    background: var(--ads-primary, #4A90E2);
    border: 2px solid var(--ads-primary, #4A90E2);
    color: var(--ads-white, #FFFFFF);
}

.adhd-test-next:hover {
    background: #357ABD;
    border-color: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

/* ========================================
   16. TEST SUBMIT BUTTON
   ======================================== */

.adhd-test-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--ads-spacing-xl, 64px);
}

.adhd-test-submit {
    padding: 16px 48px;
    font-size: var(--ads-font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--ads-white, #FFFFFF);
    background: var(--ads-secondary, #7ED321);
    border: 2px solid var(--ads-secondary, #7ED321);
    border-radius: var(--ads-radius-md, 8px);
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(126, 211, 33, 0.25);
}

.adhd-test-submit:hover {
    background: #5FA319;
    border-color: #5FA319;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(126, 211, 33, 0.35);
}

.adhd-test-submit:active {
    transform: translateY(0);
}

.adhd-test-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   17. MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 767px) {
    .adhd-test-container {
        padding: var(--ads-spacing-sm, 16px);
    }

    .adhd-test-question {
        padding: var(--ads-spacing-sm, 16px);
        margin-bottom: var(--ads-spacing-md, 24px);
    }

    .adhd-question-text {
        font-size: var(--ads-font-size-base, 1rem);
    }

    .adhd-answer-options label {
        padding: 14px 16px;
        font-size: 0.9375rem;
    }

    .adhd-test-navigation {
        flex-direction: column;
    }

    .adhd-test-prev,
    .adhd-test-next {
        max-width: 100%;
    }

    .adhd-test-submit {
        width: 100%;
        padding: 16px 24px;
    }

    .adhd-age-buttons {
        flex-direction: column;
    }

    .adhd-age-btn {
        width: 100%;
    }
}

/* ========================================
   18. PRINT STYLES
   ======================================== */

@media print {
    .adhd-test-question {
        page-break-inside: avoid;
        border: 1px solid #000;
    }

    .adhd-answer-options {
        flex-direction: column;
    }

    .adhd-answer-options label:has(input[type="radio"]:checked) {
        background: #E5E7EB !important;
        color: #000000 !important;
        font-weight: bold;
        border: 2px solid #000 !important;
    }

    .adhd-test-navigation,
    .adhd-test-submit {
        display: none;
    }
}

/* ========================================
   19. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .adhd-answer-options label {
        border-width: 3px;
    }

    .adhd-answer-options label:focus-within {
        outline-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .adhd-answer-options label,
    .adhd-test-progress-bar,
    .adhd-test-prev,
    .adhd-test-next,
    .adhd-test-submit {
        transition: none;
    }

    .adhd-answer-options label:hover {
        transform: none;
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   20. OPTIONAL ANIMATION ENHANCEMENTS
   ======================================== */

/* Question fade-in animation (add class via JS) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adhd-test-question.animate-in {
    animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress bar pulse on update */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.adhd-test-progress-bar.updating {
    animation: pulse 400ms ease-in-out;
}

/* ========================================
   UTILITIES - Helper Classes
   ======================================== */
/* ========================================
   COLOR UTILITIES
   ======================================== */

/* Text Colors - Brand */
.ads-text-primary { color: var(--ads-primary, #4A90E2); }
.ads-text-secondary { color: var(--ads-secondary, #7ED321); }
.ads-text-accent { color: var(--ads-accent, #F5A623); }

/* Text Colors - Status */
.ads-text-danger { color: var(--ads-danger, #E74C3C); }
.ads-text-success { color: var(--ads-success, #27AE60); }
.ads-text-warning { color: var(--ads-warning, #F39C12); }
.ads-text-info { color: var(--ads-info, #3498DB); }

/* Text Colors - Grays */
.ads-text-gray-50 { color: var(--ads-gray-50, #F9FAFB); }
.ads-text-gray-100 { color: var(--ads-gray-100, #F3F4F6); }
.ads-text-gray-200 { color: var(--ads-gray-200, #E5E7EB); }
.ads-text-gray-300 { color: var(--ads-gray-300, #D1D5DB); }
.ads-text-gray-400 { color: var(--ads-gray-400, #9CA3AF); }
.ads-text-gray-500 { color: var(--ads-gray-500, #6B7280); }
.ads-text-gray-600 { color: var(--ads-gray-600, #4B5563); }
.ads-text-gray-700 { color: var(--ads-gray-700, #374151); }
.ads-text-gray-800 { color: var(--ads-gray-800, #1F2937); }
.ads-text-gray-900 { color: var(--ads-gray-900, #111827); }

/* Background Colors - Brand */
.ads-bg-primary { background-color: var(--ads-primary, #4A90E2); }
.ads-bg-secondary { background-color: var(--ads-secondary, #7ED321); }
.ads-bg-accent { background-color: var(--ads-accent, #F5A623); }
.ads-bg-white { background-color: var(--ads-white, #FFFFFF); }

/* Background Colors - Grays */
.ads-bg-gray-50 { background-color: var(--ads-gray-50, #F9FAFB); }
.ads-bg-gray-100 { background-color: var(--ads-gray-100, #F3F4F6); }
.ads-bg-gray-200 { background-color: var(--ads-gray-200, #E5E7EB); }

/* ========================================
   DISPLAY & VISIBILITY UTILITIES
   ======================================== */

/* Display */
.ads-block { display: block; }
.ads-inline-block { display: inline-block; }
.ads-inline { display: inline; }
.ads-hidden { display: none; }

/* Visibility */
.ads-visible { visibility: visible; }
.ads-invisible { visibility: hidden; }

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

/* Overflow */
.ads-overflow-auto { overflow: auto; }
.ads-overflow-hidden { overflow: hidden; }
.ads-overflow-visible { overflow: visible; }
.ads-overflow-scroll { overflow: scroll; }

/* ========================================
   SHADOW UTILITIES
   ======================================== */

/* Standard Shadows */
.ads-shadow-none { box-shadow: none; }
.ads-shadow-sm { box-shadow: var(--ads-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)); }
.ads-shadow { box-shadow: var(--ads-shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)); }
.ads-shadow-md { box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); }
.ads-shadow-lg { box-shadow: var(--ads-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); }
.ads-shadow-xl { box-shadow: var(--ads-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); }
.ads-shadow-2xl { box-shadow: var(--ads-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25)); }

/* Colored Shadows - for emphasis */
.ads-shadow-primary { box-shadow: var(--ads-shadow-primary, 0 4px 14px 0 rgba(74, 144, 226, 0.39)); }
.ads-shadow-secondary { box-shadow: var(--ads-shadow-secondary, 0 4px 14px 0 rgba(126, 211, 33, 0.39)); }
.ads-shadow-accent { box-shadow: var(--ads-shadow-accent, 0 4px 14px 0 rgba(245, 166, 35, 0.39)); }

/* Inner Shadow */
.ads-shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }

/* Hover Shadows - for interactive elements */
.ads-hover-shadow-sm:hover { box-shadow: var(--ads-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)); }
.ads-hover-shadow:hover { box-shadow: var(--ads-shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)); }
.ads-hover-shadow-md:hover { box-shadow: var(--ads-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); }
.ads-hover-shadow-lg:hover { box-shadow: var(--ads-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); }
.ads-hover-shadow-xl:hover { box-shadow: var(--ads-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); }

/* ========================================
   SPACING UTILITIES
   ======================================== */

/* Margin - All Sides */
.ads-m-0 { margin: 0; }
.ads-m-xs { margin: var(--ads-spacing-xs, 8px); }
.ads-m-sm { margin: var(--ads-spacing-sm, 16px); }
.ads-m-md { margin: var(--ads-spacing-md, 24px); }
.ads-m-lg { margin: var(--ads-spacing-lg, 40px); }
.ads-m-xl { margin: var(--ads-spacing-xl, 64px); }

/* Margin - Directional */
.ads-mt-0 { margin-top: 0; }
.ads-mt-xs { margin-top: var(--ads-spacing-xs, 8px); }
.ads-mt-sm { margin-top: var(--ads-spacing-sm, 16px); }
.ads-mt-md { margin-top: var(--ads-spacing-md, 24px); }
.ads-mt-lg { margin-top: var(--ads-spacing-lg, 40px); }
.ads-mt-xl { margin-top: var(--ads-spacing-xl, 64px); }

.ads-mb-0 { margin-bottom: 0; }
.ads-mb-xs { margin-bottom: var(--ads-spacing-xs, 8px); }
.ads-mb-sm { margin-bottom: var(--ads-spacing-sm, 16px); }
.ads-mb-md { margin-bottom: var(--ads-spacing-md, 24px); }
.ads-mb-lg { margin-bottom: var(--ads-spacing-lg, 40px); }
.ads-mb-xl { margin-bottom: var(--ads-spacing-xl, 64px); }

.ads-ml-0 { margin-left: 0; }
.ads-ml-xs { margin-left: var(--ads-spacing-xs, 8px); }
.ads-ml-sm { margin-left: var(--ads-spacing-sm, 16px); }
.ads-ml-md { margin-left: var(--ads-spacing-md, 24px); }

.ads-mr-0 { margin-right: 0; }
.ads-mr-xs { margin-right: var(--ads-spacing-xs, 8px); }
.ads-mr-sm { margin-right: var(--ads-spacing-sm, 16px); }
.ads-mr-md { margin-right: var(--ads-spacing-md, 24px); }

/* Padding - All Sides */
.ads-p-0 { padding: 0; }
.ads-p-xs { padding: var(--ads-spacing-xs, 8px); }
.ads-p-sm { padding: var(--ads-spacing-sm, 16px); }
.ads-p-md { padding: var(--ads-spacing-md, 24px); }
.ads-p-lg { padding: var(--ads-spacing-lg, 40px); }
.ads-p-xl { padding: var(--ads-spacing-xl, 64px); }

/* Padding - Directional */
.ads-pt-0 { padding-top: 0; }
.ads-pt-xs { padding-top: var(--ads-spacing-xs, 8px); }
.ads-pt-sm { padding-top: var(--ads-spacing-sm, 16px); }
.ads-pt-md { padding-top: var(--ads-spacing-md, 24px); }

.ads-pb-0 { padding-bottom: 0; }
.ads-pb-xs { padding-bottom: var(--ads-spacing-xs, 8px); }
.ads-pb-sm { padding-bottom: var(--ads-spacing-sm, 16px); }
.ads-pb-md { padding-bottom: var(--ads-spacing-md, 24px); }

/* Padding - Axis */
.ads-px-0 { padding-left: 0; padding-right: 0; }
.ads-px-xs { padding-left: var(--ads-spacing-xs, 8px); padding-right: var(--ads-spacing-xs, 8px); }
.ads-px-sm { padding-left: var(--ads-spacing-sm, 16px); padding-right: var(--ads-spacing-sm, 16px); }
.ads-px-md { padding-left: var(--ads-spacing-md, 24px); padding-right: var(--ads-spacing-md, 24px); }

.ads-py-0 { padding-top: 0; padding-bottom: 0; }
.ads-py-xs { padding-top: var(--ads-spacing-xs, 8px); padding-bottom: var(--ads-spacing-xs, 8px); }
.ads-py-sm { padding-top: var(--ads-spacing-sm, 16px); padding-bottom: var(--ads-spacing-sm, 16px); }
.ads-py-md { padding-top: var(--ads-spacing-md, 24px); padding-bottom: var(--ads-spacing-md, 24px); }

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

/* Font Sizes */
.ads-text-xs { font-size: var(--ads-font-size-xs, 0.75rem); }
.ads-text-sm { font-size: var(--ads-font-size-sm, 0.875rem); }
.ads-text-base { font-size: var(--ads-font-size-base, 1rem); }
.ads-text-lg { font-size: var(--ads-font-size-lg, 1.125rem); }
.ads-text-xl { font-size: var(--ads-font-size-xl, 1.25rem); }
.ads-text-2xl { font-size: var(--ads-font-size-2xl, 1.5rem); }
.ads-text-3xl { font-size: var(--ads-font-size-3xl, 1.875rem); }
.ads-text-4xl { font-size: var(--ads-font-size-4xl, 2.25rem); }
.ads-text-5xl { font-size: var(--ads-font-size-5xl, 3rem); }

/* Font Weights */
.ads-font-normal { font-weight: var(--ads-font-weight-normal, 400); }
.ads-font-medium { font-weight: var(--ads-font-weight-medium, 600); }
.ads-font-bold { font-weight: var(--ads-font-weight-bold, 700); }

/* Line Heights */
.ads-leading-tight { line-height: var(--ads-line-height-tight, 1.25); }
.ads-leading-base { line-height: var(--ads-line-height-base, 1.5); }
.ads-leading-relaxed { line-height: var(--ads-line-height-relaxed, 1.75); }

/* Text Alignment */
.ads-text-left { text-align: left; }
.ads-text-center { text-align: center; }
.ads-text-right { text-align: right; }

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

/* ========================================
   Z-INDEX UTILITIES
   ======================================== */

/* Z-Index Layers */
.ads-z-base { z-index: var(--ads-z-base, 0); }
.ads-z-dropdown { z-index: var(--ads-z-dropdown, 1000); }
.ads-z-sticky { z-index: var(--ads-z-sticky, 1020); }
.ads-z-fixed { z-index: var(--ads-z-fixed, 1030); }
.ads-z-modal-backdrop { z-index: var(--ads-z-modal-backdrop, 1040); }
.ads-z-modal { z-index: var(--ads-z-modal, 1050); }
.ads-z-popover { z-index: var(--ads-z-popover, 1060); }
.ads-z-tooltip { z-index: var(--ads-z-tooltip, 1070); }
.ads-z-notification { z-index: var(--ads-z-notification, 1080); }
.ads-z-overlay { z-index: var(--ads-z-overlay, 9999); }

/* Relative/Absolute positioning helpers */
.ads-relative { position: relative; }
.ads-absolute { position: absolute; }
.ads-fixed { position: fixed; }
.ads-sticky { position: sticky; }


/* ========================================
   ANIMATIONS - Keyframes & Transitions
   ======================================== */
   ANIMATION SYSTEM - Keyframes & Utilities
   Modern animation library for smooth UX
   ======================================== */

/* Fade Animations */
@keyframes ads-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ads-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ads-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ads-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ads-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ads-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale Animations */
@keyframes ads-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ads-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes ads-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse & Ping Effects */
@keyframes ads-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes ads-ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Bounce Animation */
@keyframes ads-bounce {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* Shake Animation */
@keyframes ads-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Slide Animations */
@keyframes ads-slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes ads-slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes ads-slide-in-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes ads-slide-in-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Rotate Animations */
@keyframes ads-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ads-rotate-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Animation Utility Classes */
.ads-animate-fade-in {
    animation: ads-fade-in var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-fade-in-up {
    animation: ads-fade-in-up var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-fade-in-down {
    animation: ads-fade-in-down var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-fade-in-left {
    animation: ads-fade-in-left var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-fade-in-right {
    animation: ads-fade-in-right var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-scale-in {
    animation: ads-scale-in var(--ads-transition-base, 300ms) var(--ads-ease-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)) forwards;
}

.ads-animate-zoom-in {
    animation: ads-zoom-in var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ads-animate-pulse {
    animation: ads-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ads-animate-ping {
    animation: ads-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ads-animate-bounce {
    animation: ads-bounce 1s infinite;
}

.ads-animate-shake {
    animation: ads-shake 0.5s ease-in-out;
}

.ads-animate-spin {
    animation: ads-rotate 1s linear infinite;
}

.ads-animate-spin-slow {
    animation: ads-rotate 3s linear infinite;
}

/* Animation Delays */
.ads-animate-delay-100 { animation-delay: 100ms; }
.ads-animate-delay-200 { animation-delay: 200ms; }
.ads-animate-delay-300 { animation-delay: 300ms; }
.ads-animate-delay-500 { animation-delay: 500ms; }
.ads-animate-delay-700 { animation-delay: 700ms; }
.ads-animate-delay-1000 { animation-delay: 1000ms; }

/* Animation Durations */
.ads-animate-duration-fast { animation-duration: 150ms; }
.ads-animate-duration-base { animation-duration: 300ms; }
.ads-animate-duration-slow { animation-duration: 500ms; }
.ads-animate-duration-slower { animation-duration: 700ms; }

/* Scroll Animation Helpers (used with JavaScript Intersection Observer) */
.ads-scroll-animate {
    opacity: 0;
    transition: all var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.ads-scroll-animate.ads-in-view {
    opacity: 1;
    transform: translateY(0);
}

.ads-scroll-fade {
    opacity: 0;
}

.ads-scroll-fade.ads-in-view {
    opacity: 1;
}

.ads-scroll-slide-up {
    opacity: 0;
    transform: translateY(40px);
}

.ads-scroll-slide-up.ads-in-view {
    opacity: 1;
    transform: translateY(0);
}

.ads-scroll-slide-left {
    opacity: 0;
    transform: translateX(40px);
}

.ads-scroll-slide-left.ads-in-view {
    opacity: 1;
    transform: translateX(0);
}

.ads-scroll-slide-right {
    opacity: 0;
    transform: translateX(-40px);
}

.ads-scroll-slide-right.ads-in-view {
    opacity: 1;
    transform: translateX(0);
}

.ads-scroll-scale {
    opacity: 0;
    transform: scale(0.8);
}

.ads-scroll-scale.ads-in-view {
    opacity: 1;
    transform: scale(1);
}

/* Smooth Hover Transition Helpers */
.ads-transition-all {
    transition: all var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.ads-transition-colors {
    transition: background-color var(--ads-transition-base, 300ms), color var(--ads-transition-base, 300ms);
}

.ads-transition-transform {
    transition: transform var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.ads-transition-shadow {
    transition: box-shadow var(--ads-transition-base, 300ms) var(--ads-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}