/* =====================================================
   COMMUNITY THEME - CSS Variables and Base Styles
   Source: communitiesdesign/incontrol-community-li.html
   WCAG 2.1 AA Compliant
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary Theme Colors */
    --primary-color: var(--community-primary, #6A4A9E);
    --primary-color-text: var(--community-primary-text, #ffffff);
    --primary-color-safe: var(--community-primary-safe, #6A4A9E);
    --accent-color: var(--community-accent, #7BCED7);
    --accent-color-text: var(--community-accent-text, #000000);

    /* Header top-bar bordered-box height (logo + top-hosted menu/megamenu) */
    --header-bar-item-height: 75px;

    /* Notification gradient (WCAG AA with white text) */
    --notification-gradient-start: #C44D1C; /* 4.53:1 with white */
    --notification-gradient-end: #E86A3F;

    /* Typography Scale (Mobile base) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Spacing Scale */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Focus ring color (follows the community brand in both themes) */
    --focus-color: var(--primary-color);
}

/* =====================================================
   RESPONSIVE TYPOGRAPHY - Tablets (768px+)
   Source: incontrol-community-li.html lines 1777-1786
   ===================================================== */

@media (min-width: 768px) {
    :root {
        --font-size-base: 1rem;       /* 16px */
        --font-size-lg: 1.25rem;      /* 20px */
        --font-size-xl: 1.375rem;     /* 22px */
        --font-size-2xl: 1.625rem;    /* 26px */
        --spacing-md: 1.5rem;         /* 24px */
        --spacing-lg: 2rem;           /* 32px */
        --spacing-xl: 2.5rem;         /* 40px */
    }
}

/* =====================================================
   RESPONSIVE TYPOGRAPHY - Desktop (1250px+)
   Source: incontrol-community-li.html lines 1882-1890
   ===================================================== */

@media (min-width: 1250px) {
    :root {
        --font-size-lg: 1.25rem;      /* 20px */
        --font-size-xl: 1.5rem;       /* 24px */
        --font-size-2xl: 1.75rem;     /* 28px */
        --font-size-3xl: 2rem;        /* 32px */
        --spacing-lg: 2rem;           /* 32px */
        --spacing-xl: 3rem;           /* 48px */
    }
}

/* Base body styles */
body {
    font-family: 'IBM Plex Sans', 'Inter', sans-serif;
    background: var(--surface);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    width: 100%;
    max-width: 100vw;
    padding-top: 76px; /* Base padding for mobile - space for fixed header */
}

/* Mobile: Additional adjustments */
@media (max-width: 1023px) {
    .main-container {
        padding-top: 1rem;
    }
}

/* Desktop: Adjust padding for proper spacing */
@media (min-width: 1024px) {
    body {
        padding-top: 80px; /* Slightly more for desktop */
    }
}

/* Desktop: Adjust body padding for taller header with logo */
@media (min-width: 1250px) {
    body {
        padding-top: 90px;
    }
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Prevent overflow from media */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Heading hierarchy */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
}

/* Content line heights */
p, .post-text, .community-update {
    line-height: var(--line-height-relaxed);
}

/* Subtle animated background */
.background-gradient {
    position: fixed;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary-color) 3%, transparent) 0%, transparent 40%),
                radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--accent-color) 3%, transparent) 0%, transparent 40%),
                radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent-color) 2%, transparent) 0%, transparent 40%);
    animation: float 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes float {
    0%, 100% { transform: translate(-10%, -10%) rotate(0deg); }
    33% { transform: translate(-5%, -15%) rotate(120deg); }
    66% { transform: translate(-15%, -5%) rotate(240deg); }
}