/* ============================================================================
PLUTONIUM CMS 6.0 - THEME CSS
Theme: plutonium6_default
Generated: 2025-12-23 10:00:46
ARCHITECTURE:
- root_values.css: Base typography, colors, shared utilities (h1-h6, p, a, etc.)
- theme.php: Front-end layouts, navigation, page structure, theme-specific components

DO NOT duplicate base element styles here - they're in root_values.css
This file is for front-end-specific layouts that don't appear in CKEditor:
- Site header/navigation
- Footer layouts
- Page containers
- Front-end specific components (hero sections, galleries, etc.)

Import order:
2. root_values.css (design system variables + base typography)
3. This file (theme-specific customizations)
============================================================================ */



/* Import root CSS variables for consistency with admin */
@import url('/plutonium6.0/assets/css/root_values.css');

/* Import Bootstrap Icons for social media */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');

/* ============================================================================
PICO CSS RESET - ZERO OUT SPACING & WIDTHS
Create clean baseline for custom theme styling
============================================================================ */

/* Reset Pico container widths and spacing */
* {
margin: 0;
padding: 0;
}

/* Reset container constraints */
main,
section,
article,
aside,
header,
footer,
nav,
div {
max-width: none;
width: auto;
margin: 0;
padding: 0;
}

/* Reset Pico's container classes */
.container {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}

/* Reset grid spacing */
.grid {
gap: 0;
margin: 0;
padding: 0;
}

/* ============================================================================
THEME-SPECIFIC CSS VARIABLES
Brand colors from Plutonium 6.0 design system
============================================================================ */

:root {
/* Logo from database */
--OrgLogo: url('/plutonium6.0/assets/images/logo.png');

/* Theme Spacing Scale - Use instead of Pico defaults */
--ThemeSpace1: 0.25rem; /* 4px */
--ThemeSpace2: 0.5rem; /* 8px */
--ThemeSpace3: 0.75rem; /* 12px */
--ThemeSpace4: 1rem; /* 16px */
--ThemeSpace6: 1.5rem; /* 24px */
--ThemeSpace8: 2rem; /* 32px */
--ThemeSpace12: 3rem; /* 48px */
--ThemeSpace16: 4rem; /* 64px */
--ThemeSpace20: 5rem; /* 80px */
--ThemeSpace24: 6rem; /* 96px */
}

/* ============================================================================
BUTTON STYLES - BRAND COLORS
Override structural button styles from root_values.css with brand identity
============================================================================ */

/* Primary Button - Brand gradient */
button, .button, a.button {
display: inline-block;
background: hsla(var(--ColorBrand), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

button:hover, .button:hover, a.button:hover {
background: hsla(var(--ColorBrandDark), 1);
text-decoration: none;
}

/* Secondary Button - Subtle brand accent */
.buttonSecondary {
display: inline-block;
background: hsla(var(--ColorBrand2), 0.15);
color: hsla(var(--ColorBrand2Dark), 1);
border: 1px solid hsla(var(--ColorBrand2), 0.3);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonSecondary:hover {
background: hsla(var(--ColorBrand2), 0.25);
border-color: hsla(var(--ColorBrand2), 0.5);
text-decoration: none;
}

/* Outline Button - Brand border */
.buttonOutline {
display: inline-block;
background: transparent;
border: 2px solid hsla(var(--ColorBrand), 1);
color: hsla(var(--ColorBrand), 1);
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonOutline:hover {
background: hsla(var(--ColorBrand), 0.1);
border-color: hsla(var(--ColorBrandDark), 1);
color: hsla(var(--ColorBrandDark), 1);
text-decoration: none;
}

/* Red Button */
.buttonRed {
display: inline-block;
background: hsla(var(--ColorBrand4), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonRed:hover {
background: hsla(var(--ColorBrand4Dark), 1);
color: hsla(var(--White), 1);
text-decoration: none;
}

/* Green Button */
.buttonGreen {
display: inline-block;
background: hsla(var(--ColorBrand5), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonGreen:hover {
background: hsla(var(--ColorBrand5Dark), 1);
color: hsla(var(--White), 1);
text-decoration: none;
}
.buttonPurple {
display: inline-block;
background: hsla(var(--ColorBrand2), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonPurple:hover {
background: hsla(var(--ColorBrand2Dark), 1);
color: hsla(var(--White), 1);
text-decoration: none;
}

/* Blue Button */
.buttonBlue {
display: inline-block;
background: hsla(var(--ColorBrand3), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
text-decoration: none;
}

.buttonBlue:hover {
background: hsla(var(--ColorBrand3Dark), 1);
color: hsla(var(--White), 1);
text-decoration: none;
}

/* ============================================================================
SEMANTIC LAYOUT STRUCTURE
Base styling for semantic HTML elements with zero baseline
============================================================================ */

/* Global Body Baseline */
body {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: var(--FontFamily);
font-size: var(--FontSizeBase);
line-height: var(--LineHeightBase);
color: hsla(var(--ColorTextPrimary), 1);
background-color: hsla(var(--White), 1);
}

p, ul, li, ol, dl, dt, dd {
margin: 0;
padding: 0;
font-size: var(--FontSizeBase);
}

#main-content p {
padding-bottom: var(--ThemeSpace1);
font-size: var(--FontSizeBase);
line-height: var(--LineHeightBase);
}
@media (max-width: 1366px) {
#main-content p {
font-size: var(--FontSizeLG);
padding-bottom: var(--ThemeSpace2);
}
}

h1 {
font-size: var(--FontSize4XL);
font-weight: 200;
margin-bottom: var(--ThemeSpace4);
}
h2 {
font-size: var(--FontSize3XL);
font-weight: 200;
margin-bottom: var(--ThemeSpace4);
}
h3 {
font-size: var(--FontSize2XL);
font-weight: 200;
margin-bottom: var(--ThemeSpace4);
}
h4 {
font-size: var(--FontSizeXL);
font-weight: 200;
margin-bottom: var(--ThemeSpace4);
}
h5 {
font-size: var(--FontSizeLG);
margin-bottom: var(--ThemeSpace4);
font-weight: 200;
}
h6 {
font-size: var(--FontSizeSM);
}
.sectionPlain {
width: 90%;
margin: 0 auto;
max-width: 1920px;
}
.sectionPlain p {
margin-bottom: var(--ThemeSpace4);
}

/* Ordered list with numbers outside margin and bold */
.sectionPlain ol {
list-style-position: outside;
padding-left: var(--ThemeSpace8);
margin-left: 0;
}

.sectionPlain ol li {
padding-left: var(--ThemeSpace2);
padding-bottom: var(--ThemeSpace2);
}

.sectionPlain ol li::marker {
font-weight: var(--FontWeightBold);
}




/* ============================================================================
HEADER / NAVIGATION BASELINE
Semantic <header> with zero spacing - use theme classes for styling
    ============================================================================ */

    /* Semantic header element - zero baseline */
    header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    }

    /* Navigation container - zero baseline */
    nav {
    margin: 0;
    padding: 0;
    width: 100%;
    }

    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    }

    nav ul li {
    margin: 0;
    padding: 0;
    }

    nav a {
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: inherit;
    }

    /* ============================================================================
    LAYOUT UTILITIES
    Container and layout helper classes
    ============================================================================ */

    .theme-container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--ThemeSpace4);
    }

    /* ============================================================================
    THEME SPACING CLASSES
    Use these classes to add consistent spacing
    ============================================================================ */

    /* Padding Classes */
    .theme-p-1 { padding: var(--ThemeSpace1); }
    .theme-p-2 { padding: var(--ThemeSpace2); }
    .theme-p-3 { padding: var(--ThemeSpace3); }
    .theme-p-4 { padding: var(--ThemeSpace4); }
    .theme-p-6 { padding: var(--ThemeSpace6); }
    .theme-p-8 { padding: var(--ThemeSpace8); }
    .theme-p-12 { padding: var(--ThemeSpace12); }
    .theme-p-16 { padding: var(--ThemeSpace16); }
    .theme-p-20 { padding: var(--ThemeSpace20); }
    .theme-p-24 { padding: var(--ThemeSpace24); }

    /* Margin Classes */
    .theme-m-1 { margin: var(--ThemeSpace1); }
    .theme-m-2 { margin: var(--ThemeSpace2); }
    .theme-m-3 { margin: var(--ThemeSpace3); }
    .theme-m-4 { margin: var(--ThemeSpace4); }
    .theme-m-6 { margin: var(--ThemeSpace6); }
    .theme-m-8 { margin: var(--ThemeSpace8); }
    .theme-m-12 { margin: var(--ThemeSpace12); }
    .theme-m-16 { margin: var(--ThemeSpace16); }
    .theme-m-20 { margin: var(--ThemeSpace20); }
    .theme-m-24 { margin: var(--ThemeSpace24); }

    /* Vertical Padding */
    .theme-py-1 { padding-top: var(--ThemeSpace1); padding-bottom: var(--ThemeSpace1); }
    .theme-py-2 { padding-top: var(--ThemeSpace2); padding-bottom: var(--ThemeSpace2); }
    .theme-py-3 { padding-top: var(--ThemeSpace3); padding-bottom: var(--ThemeSpace3); }
    .theme-py-4 { padding-top: var(--ThemeSpace4); padding-bottom: var(--ThemeSpace4); }
    .theme-py-6 { padding-top: var(--ThemeSpace6); padding-bottom: var(--ThemeSpace6); }
    .theme-py-8 { padding-top: var(--ThemeSpace8); padding-bottom: var(--ThemeSpace8); }
    .theme-py-12 { padding-top: var(--ThemeSpace12); padding-bottom: var(--ThemeSpace12); }
    .theme-py-16 { padding-top: var(--ThemeSpace16); padding-bottom: var(--ThemeSpace16); }
    .theme-py-20 { padding-top: var(--ThemeSpace20); padding-bottom: var(--ThemeSpace20); }
    .theme-py-24 { padding-top: var(--ThemeSpace24); padding-bottom: var(--ThemeSpace24); }

    /* Horizontal Padding */
    .theme-px-1 { padding-left: var(--ThemeSpace1); padding-right: var(--ThemeSpace1); }
    .theme-px-2 { padding-left: var(--ThemeSpace2); padding-right: var(--ThemeSpace2); }
    .theme-px-3 { padding-left: var(--ThemeSpace3); padding-right: var(--ThemeSpace3); }
    .theme-px-4 { padding-left: var(--ThemeSpace4); padding-right: var(--ThemeSpace4); }
    .theme-px-6 { padding-left: var(--ThemeSpace6); padding-right: var(--ThemeSpace6); }
    .theme-px-8 { padding-left: var(--ThemeSpace8); padding-right: var(--ThemeSpace8); }
    .theme-px-12 { padding-left: var(--ThemeSpace12); padding-right: var(--ThemeSpace12); }
    .theme-px-16 { padding-left: var(--ThemeSpace16); padding-right: var(--ThemeSpace16); }
    .theme-px-20 { padding-left: var(--ThemeSpace20); padding-right: var(--ThemeSpace20); }
    .theme-px-24 { padding-left: var(--ThemeSpace24); padding-right: var(--ThemeSpace24); }

    /* ============================================================================
    SEMANTIC SECTION ELEMENTS
    Zero baseline for <section> elements - use theme classes for styling
        ============================================================================ */

        /* Semantic main element - zero baseline */
        main {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: auto;
        }

        /* Semantic section elements - zero baseline */
        section {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        }

        /* Article element - zero baseline */
        article {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        }

        /* Aside element - zero baseline */
        aside {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        }

        /* Footer element - zero baseline */
        footer {
        margin: 0;
        padding: 0;
        width: 100%;
        }

        /* ============================================================================
        THEME LAYOUT CLASSES
        Use these classes to create consistent layouts
        ============================================================================ */

        /* Container Classes - Use instead of Pico containers */
        .theme-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--ThemeSpace4);
        }

        .theme-container-narrow {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 var(--ThemeSpace4);
        }

        /* Width Classes */
        .theme-w-full { width: 100%; }
        .theme-w-auto { width: auto; }
        .theme-w-fit { width: fit-content; }

        /* Height Classes */
        .theme-h-auto { height: auto; }
        .theme-h-full { height: 100%; }
        .theme-h-screen { height: 100vh; }

        /* Display Classes */
        .theme-block { display: block; }
        .theme-inline { display: inline; }
        .theme-inline-block { display: inline-block; }
        .theme-flex { display: flex; }
        .theme-grid { display: grid; }
        .theme-hidden { display: none; }

        /* ============================================================================
        FRONT-END LAYOUT STRUCTURES
        Page-level layouts that don't appear in CKEditor
        Base typography is handled by root_values.css
        ============================================================================ */

        /* Site Header - Front-end navigation, logo, etc. */
        /* Site Header - Fixed overlay navigation */
        .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 125px;
        z-index: 1000;
        overflow: visible; /* Allow dropdowns to show */
        }

        /* Container inside fixed header */
        .site-header .theme-container-fluid {
        display: flex;
        align-items: center;
        height: 125px;
        width: 100%;
        max-width: 100%;
        }

        /* No body padding needed - slider starts at top and nav overlays it */
        body {
        padding-top: 0;
        }

        /* Main content gets normal spacing */
        #main-content {
        margin-top: 0vh;
        position: relative;
        z-index: 2;
        }

        .site-header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        }

        /* Site Navigation */{
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        }

        /* Code elements - zero baseline */
        code, pre {
        margin: 0;
        padding: 0;
        font-family: var(--FontFamilyMono);
        background: none;
        }

        blockquote {
        margin: 0;
        padding: 0;
        font-style: normal;
        }

        hr {
        margin: 0;
        padding: 0;
        border: none;
        height: 1px;
        background: transparent;
        }
        .content-area {
        width: 90%;
        padding: var(--ThemeSpace2);
        margin: 0 auto;
        }

        /* ============================================================================
        THEME BRAND CLASSES
        Apply Plutonium 6.0 brand colors consistently
        ============================================================================ */

        /* Text Color Classes */
        .theme-text-brand { color: hsla(var(--ColorBrand), 1); }
        .theme-text-brand-light { color: hsla(var(--ColorBrandLight), 1); }
        .theme-text-brand-dark { color: hsla(var(--ColorBrandDark), 1); }
        .theme-text-primary { color: hsla(var(--ColorTextPrimary), 1); }
        .theme-text-secondary { color: hsla(var(--ColorTextSecondary), 1); }
        .theme-text-muted { color: hsla(var(--ColorTextMuted), 1); }
        .theme-text-white { color: hsla(var(--White), 1); }
        .theme-text-black { color: hsla(var(--Black), 1); }

        /* Background Color Classes */
        .theme-bg-brand {
        background-color: hsla(var(--White), 0);
        background-image: url('https://staging.2025.equineconnection.ca/themes/plutonium6_default/media/paper_bg_repeat.webp');
        background-repeat: repeat-x;
        width: 100%;
        margin: 0 auto;
        margin-top: 0px;
        height: fit-content;
        }
        .theme-bg-brand-light { background-color: hsla(var(--ColorBrandLight), 1); }
        .theme-bg-brand-dark { background-color: hsla(var(--ColorBrandDark), 1); }
        .theme-bg-white { background-color: hsla(var(--White), 1); }
        .theme-bg-gray-1 { background-color: hsla(var(--Gray1), 1); }
        .theme-bg-gray-2 { background-color: hsla(var(--Gray2), 1); }
        .theme-bg-gray-9 { background-color: hsla(var(--Gray9), 1); }
        .theme-bg-gray-10 { background-color: hsla(var(--Gray10), 1); }

        /* Border Classes */
        .theme-border { border: 1px solid hsla(var(--ColorBorder), 1); }
        .theme-border-brand { border: 1px solid hsla(var(--ColorBrand), 1); }
        .theme-border-t { border-top: 1px solid hsla(var(--ColorBorder), 1); }
        .theme-border-b { border-bottom: 1px solid hsla(var(--ColorBorder), 1); }
        .theme-border-l { border-left: 1px solid hsla(var(--ColorBorder), 1); }
        .theme-border-r { border-right: 1px solid hsla(var(--ColorBorder), 1); }

        /* Shadow Classes */
        .theme-shadow-sm { box-shadow: var(--ShadowSM); }
        .theme-shadow { box-shadow: var(--ShadowBase); }
        .theme-shadow-md { box-shadow: var(--ShadowMD); }
        .theme-shadow-lg { box-shadow: var(--ShadowLG); }

        /* Border Radius Classes */
        .theme-rounded-sm { border-radius: var(--RadiusSM); }
        .theme-rounded { border-radius: var(--RadiusBase); }
        .theme-rounded-lg { border-radius: var(--RadiusLG); }
        .theme-rounded-full { border-radius: 50%; }

        /* Typography Classes */
        .theme-font-heading { font-family: var(--FontFamilyHeading); }
        .theme-font-body { font-family: var(--FontFamily); }
        .theme-font-mono { font-family: var(--FontFamilyMono); }

        .theme-text-xs { font-size: var(--FontSizeXS); }
        .theme-text-sm { font-size: var(--FontSizeSM); }
        .theme-text-base { font-size: var(--FontSizeBase); }
        .theme-text-lg { font-size: var(--FontSizeLG); }
        .theme-text-xl { font-size: var(--FontSizeXL); }
        .theme-text-2xl { font-size: var(--FontSize2XL); }
        .theme-text-3xl { font-size: var(--FontSize3XL); }

        .theme-font-normal { font-weight: var(--FontWeightNormal); }
        .theme-font-medium { font-weight: var(--FontWeightMedium); }
        .theme-font-semibold { font-weight: var(--FontWeightSemibold); }
        .theme-font-bold { font-weight: var(--FontWeightBold); }

        .theme-text-left { text-align: left; }
        .theme-text-center { text-align: center; }
        .theme-text-right { text-align: right; }

        /* ============================================================================
        RESPONSIVE BREAKPOINTS
        Mobile-first approach with zero baseline
        ============================================================================ */

        /* Tablet and up */
        @media (min-width: 768px) {
        .theme-container {
        padding: 0 var(--ThemeSpace6);
        }
        }

        /* Desktop and up */
        @media (min-width: 1024px) {
        .theme-container {
        padding: 0 var(--ThemeSpace8);
        }
        }

        /* Large desktop and up */
        @media (min-width: 1280px) {
        .theme-container {
        max-width: 1280px;
        }
        }

        /* Page Title Styling */
        article header h1 {
        color: hsla(var(--Azure), 1);
        border-bottom: 3px solid hsla(var(--Azure), 0.2);
        padding-bottom: var(--Space3);
        margin-bottom: var(--Space6);
        }

        /* ============================================================================
        RESPONSIVE ADJUSTMENTS
        ============================================================================ */

        /* Body background with subtle pattern */
        body {
        background-color: hsla(var(--Gray1), 1);
        background-image:
        linear-gradient(hsla(var(--Azure), 0.02) 1px, transparent 1px),
        linear-gradient(90deg, hsla(var(--Azure), 0.02) 1px, transparent 1px);
        background-size: 20px 20px;
        }

        @media (max-width: 768px) {
        .hero {
        padding: var(--Space8) var(--Space4);
        }

        .hero h1 {
        font-size: var(--FontSize2XL);
        }

        .content-area {
        font-size: var(--FontSizeSM);
        padding: var(--Space4);
        }

        .content-area h1 {
        font-size: var(--FontSize2XL);
        }

        .site-logo {
        height: 40px;
        }

        header nav ul {
        flex-wrap: wrap;
        gap: var(--Space2);
        }
        }

        /* Smooth scrolling */
        html {
        scroll-behavior: smooth;
        }

        /* Focus styles for accessibility */
        *:focus-visible {
        outline: 2px solid hsla(var(--Azure), 1);
        outline-offset: 2px;
        }

        /* ============================================================================
        ACCESSIBILITY & PERFORMANCE
        ============================================================================ */

        /* Smooth scrolling */
        html {
        scroll-behavior: smooth;
        }

        /* Focus styles for accessibility */
        *:focus-visible {
        outline: 2px solid hsla(var(--ColorBrand), 1);
        outline-offset: 2px;
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
        html {
        scroll-behavior: auto;
        }

        * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        }
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
        .theme-text-brand {
        color: hsla(var(--Black), 1);
        }

        .theme-bg-brand {
        background-color: hsla(var(--Black), 1);
        color: hsla(var(--White), 1);
        }
        }

        /* ============================================================================
        EXAMPLE SEMANTIC COMPONENT STRUCTURE
        Remove this section and build your own components
        ============================================================================ */

        /* ============================================================================
        NAVIGATION COMPONENT
        Hierarchical horizontal navigation with dropdown menus
        ============================================================================ */



        /* Main Navigation Container */
        .site-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        }

        /* Brand/Logo */
        .nav-brand {
        margin: 0;
        padding: 0;
        }

        .nav-brand-link {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        height: 125px;
        max-height: 125px;
        text-decoration: none;
        transition: opacity 0.2s ease;
        color: hsla(var(--White), 1);
        font-weight: var(--FontWeightBold);
        font-size: var(--FontSizeH4);
        gap: var(--ThemeSpace2);
        }

        .nav-brand-link:hover {
        opacity: 0.9;
        }

        /* Logo Image */
        .nav-brand-logo {
        height: 90px;
        max-height: 125px;
        width: auto;
        max-width: 300px; /* Prevent overly wide logos */
        object-fit: contain;
        transition: opacity 0.2s ease;
        }

        /* Fallback Text Brand */
        .nav-brand-text {
        color: hsla(var(--White), 1);
        font-weight: var(--FontWeightBold);
        font-size: var(--FontSizeH4);
        }

        /* Mobile Toggle Button */
        .nav-mobile-toggle {
        display: none;
        flex-direction: column;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--ThemeSpace2);
        gap: var(--ThemeSpace1);
        }

        .nav-toggle-icon {
        width: 24px;
        height: 3px;
        background-color: currentColor;
        transition: all 0.3s ease;
        }

        /* Navigation Menu Container */
        .nav-menu-container {
        margin: 0;
        padding: 0;
        }

        /* Main Menu (Top Level) */
        .nav-menu {
        font-family: 'Raleway', sans-serif;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: var(--ThemeSpace1);
        }

        .nav-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
        }

        .nav-menu > li > a {
        display: flex;
        align-items: center;
        padding: var(--ThemeSpace2) var(--ThemeSpace3);
        color: hsla(var(--ColorBrand4Dark), 0.9);
        text-decoration: none;
        line-height: 1.1;
        font-size: var(--FontSizeBase);
        font-weight: var(--FontWeightSemibold);
        transition: all 0.2s ease;
        border-radius: var(--RadiusBase);
        gap: var(--ThemeSpace1);
        }

        .nav-menu > li > a:hover,
        .nav-menu > li > a:focus {
        color: hsla(var(--Blue), 1);
        background-color: hsla(var(--Blue), 0.2);
        }

        .nav-menu > li > a[aria-current="page"] {
        color: hsla(var(--Violet), 1);
        background-color: hsla(var(--Blue), 0.2);
        }

        /* Dropdown Indicator */
        .nav-dropdown-indicator {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        transition: transform 0.2s ease;
        }

        .nav-item-has-children:hover .nav-dropdown-indicator {
        transform: rotate(180deg);
        }

        /* Submenu (Dropdown) */
        .nav-submenu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        max-width: 400px;
        background-color: hsla(var(--White), 1);
        border-radius: var(--RadiusBase);
        box-shadow: var(--ShadowLG);
        border: 1px solid hsla(var(--ColorBorder), 1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
        margin: 0;
        padding: var(--ThemeSpace2) 0;
        list-style: none;
        z-index: 1000;
        }

        .nav-item-has-children:hover .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        }

        /* Submenu Items */
        .nav-submenu-item {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.1);
        }

        .nav-submenu-item:last-child {
        border-bottom: none;
        }

        .nav-submenu-item a {
        display: flex;
        align-items: center;
        padding: var(--ThemeSpace2) var(--ThemeSpace4);
        color: hsla(var(--ColorTextPrimary), 1);
        text-decoration: none;
        transition: all 0.2s ease;
        margin: 0;
        position: relative;
        }

        .nav-submenu-item a:hover,
        .nav-submenu-item a:focus {
        background-color: hsla(var(--ColorBrand), 0.05);
        color: hsla(var(--ColorBrand), 1);
        }

        .nav-submenu-item a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.1);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
        }

        /* Indentation for nested levels */
        .nav-indent {
        display: inline-flex;
        align-items: center;
        margin-right: var(--ThemeSpace2);
        }

        .nav-indent-spacer {
        width: var(--ThemeSpace4);
        height: 1px;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.3);
        margin-right: var(--ThemeSpace1);
        }

        .nav-indent-spacer:last-child {
        margin-right: var(--ThemeSpace2);
        }

        /* Level-specific styling */
        .nav-submenu-level-1 a {
        font-weight: var(--FontWeightMedium);
        padding-left: var(--ThemeSpace4);
        }

        .nav-submenu-level-2 a {
        padding-left: var(--ThemeSpace6);
        font-size: var(--FontSizeSM);
        color: hsla(var(--ColorTextSecondary), 1);
        }

        .nav-submenu-level-3 a {
        padding-left: var(--ThemeSpace8);
        font-size: var(--FontSizeSM);
        color: hsla(var(--ColorTextSecondary), 0.9);
        }

        .nav-submenu-level-4 a {
        padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace4));
        font-size: var(--FontSizeXS);
        color: hsla(var(--ColorTextSecondary), 0.8);
        }

        /* Children indicator */
        .nav-has-children-indicator {
        margin-left: auto;
        color: hsla(var(--ColorTextSecondary), 0.6);
        font-size: var(--FontSizeXS);
        font-weight: var(--FontWeightBold);
        }

        /* Active/hover states for nested items */
        .nav-submenu-level-2 a:hover,
        .nav-submenu-level-2 a:focus,
        .nav-submenu-level-3 a:hover,
        .nav-submenu-level-3 a:focus,
        .nav-submenu-level-4 a:hover,
        .nav-submenu-level-4 a:focus {
        background-color: hsla(var(--ColorBrand), 0.08);
        color: hsla(var(--ColorBrand), 1);
        }

        /* Current page states for nested items */
        .nav-submenu-level-2 a[aria-current="page"],
        .nav-submenu-level-3 a[aria-current="page"],
        .nav-submenu-level-4 a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.12);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
        }

        /* Active States */
        .nav-item-active > a {
        color: hsla(var(--White), 1);
        }

        .nav-item-current > a {
        background-color: hsla(var(--White), 0.15);
        }

        /* Skip to Main Content */
        .skip-to-main {
        position: absolute;
        left: -9999px;
        z-index: 9999;
        text-decoration: none;
        border-radius: var(--RadiusBase);
        }

        .skip-to-main:focus {
        left: var(--ThemeSpace4);
        top: var(--ThemeSpace4);
        }

        /* ============================================================================
        MOBILE NAVIGATION
        Responsive behavior for smaller screens
        ============================================================================ */

        @media (max-width: 768px) {
        .nav-mobile-toggle {
        display: flex;
        }

        .nav-menu-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: hsla(var(--White), 0.9);
        backdrop-filter: blur(20px);
        border-radius: var(--RadiusXL);
        border: 1px solid hsla(var(--ColorBorder), 1);
        box-shadow: var(--ShadowLG);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        }

        .nav-menu-container.nav-menu-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        }

        .nav-menu {
        flex-direction: column;
        align-items: stretch;
        padding: var(--ThemeSpace4);
        gap: 0;
        }

        .nav-menu > li {
        color: hsl(var(--ColorBrand2Dark));
        border-bottom: 1px solid hsla(var(--Gray50), 0.5);
        margin: var(--Space3);
        }

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

        .nav-menu > li > a {
        color: hsl(var(--ColorBrand2Dark));
        padding: var(--ThemeSpace1);
        justify-content: space-between;
        }

        .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        min-width: auto;
        max-width: none;
        }

        .nav-item-has-children.nav-submenu-open .nav-submenu {
        max-height: 500px;
        }

        .nav-submenu-item {
        border-bottom: 1px solid hsla(var(--White), 0.05);
        }

        .nav-submenu-item:last-child {
        border-bottom: none;
        }

        .nav-submenu-item a {
        color: hsla(var(--White), 0.8);
        padding: var(--ThemeSpace2) var(--ThemeSpace4);
        }

        .nav-submenu-item a:hover,
        .nav-submenu-item a:focus {
        background-color: hsla(var(--White), 0.1);
        color: hsla(var(--ColorBrand2Dark), 1);
        }

        /* Mobile indentation adjustments */
        .nav-submenu-level-1 a {
        color: hsla(var(--ColorBrand2Dark), 0.8);
        padding-left: var(--ThemeSpace6);
        }

        .nav-submenu-level-2 a {
        color: hsla(var(--ColorBrand2Dark), 0.8);
        padding-left: var(--ThemeSpace8);
        }

        .nav-submenu-level-3 a {
        padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace4));
        }

        .nav-submenu-level-4 a {
        padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace6));
        }

        /* Mobile indent spacers */
        .nav-indent-spacer {
        border-bottom-color: hsla(var(--White), 0.2);
        }

        .nav-has-children-indicator {
        color: hsla(var(--White), 0.4);
        }

        /* Mobile toggle animation */
        .nav-mobile-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        }

        .nav-mobile-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(2) {
        opacity: 0;
        }

        .nav-mobile-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        }
        }

        /* Example: Basic Footer Component */
        .site-footer {
        /* Use semantic <footer> with theme classes */
            /* Example: <footer class="site-footer theme-bg-gray-9 theme-py-8"> */
                }

                /* Example: Content Section Component */
                .content-section {
                /* Use semantic <section> with theme classes */
                    /* Example: <section class="content-section theme-container theme-py-12"> */
                        }

                        /* ============================================================================
                        CUSTOM THEME STYLES
                        Add your custom CSS below this line
                        ============================================================================ */

                        /* === NEWS TEMPLATE STYLES === */

                        /* News Index Styles */
                        .news-index-header {
                        text-align: center;
                        margin-bottom: var(--ThemeSpace8);
                        }

                        .news-filter-breadcrumb {
                        font-size: 0.875rem;
                        }

                        .news-articles-grid {
                        display: grid !important;
                        grid-template-columns: 1fr;
                        gap: 2rem;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                        }

                        @media (min-width: 768px) {
                        .news-articles-grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 2rem;
                        }
                        }

                        @media (min-width: 1024px) {
                        .news-articles-grid {
                        grid-template-columns: repeat(3, 1fr) !important;
                        gap: 2.5rem;
                        }
                        }

                        /* News Card Styles */

                        .news-index {
                        margin-top: -450px;
                        background: hsla(var(--White), .8);
                        backdrop-filter: blur(8px);
                        padding: var(--ThemeSpace8);
                        border-radius: var(--RadiusLG);
                        }

                        .news-card {
                        background: hsla(var(--White), 1);
                        border-radius: var(--RadiusBase);
                        box-shadow: var(--ShadowSM);
                        overflow: hidden;
                        transition: box-shadow 0.2s ease;
                        border: 1px solid hsla(var(--ColorBorder), 1);
                        }

                        .news-card:hover {
                        box-shadow: var(--ShadowMD);
                        }

                        .news-card-image img {
                        width: 100%;
                        height: 12rem;
                        object-fit: cover;
                        display: block;
                        }

                        .news-card-content {
                        padding: var(--ThemeSpace6);
                        }

                        .news-card-categories {
                        margin-bottom: var(--ThemeSpace3);
                        }

                        .news-category-tag {
                        display: inline-block;
                        font-size: 0.75rem;
                        font-weight: var(--FontWeightSemiBold);
                        color: hsla(var(--PlutoAccent), 1);
                        text-transform: uppercase;
                        letter-spacing: 0.05em;
                        margin-right: var(--ThemeSpace3);
                        text-decoration: none;
                        }

                        .news-category-tag:hover {
                        color: hsla(var(--PlutoAccentDark), 1);
                        }

                        .news-card-title {
                        margin-bottom: var(--ThemeSpace3);
                        font-size: 1.25rem;
                        font-weight: var(--FontWeightSemiBold);
                        line-height: 1.4;
                        }

                        .news-card-title a {
                        color: inherit;
                        text-decoration: none;
                        transition: color 0.2s ease;
                        }

                        .news-card-title a:hover {
                        color: hsla(var(--PlutoAccent), 1);
                        }

                        .news-card-summary {
                        margin-bottom: var(--ThemeSpace4);
                        color: hsla(var(--ColorTextSecondary), 1);
                        line-height: 1.5;
                        }

                        .news-card-meta {
                        font-size: 0.875rem;
                        color: hsla(var(--ColorTextSecondary), 1);
                        }

                        /* Individual Article Styles */
                        .news-article {
                        max-width: var(--MaxWidth4XL);
                        margin: 0 auto;
                        margin-top: -67vh;
                        background: hsla(var(--White), .8);
                        backdrop-filter: blur(8px);
                        padding: var(--ThemeSpace8);
                        border-radius: var(--RadiusLG);
                        }

                        .news-article-header {

                        text-align: center;
                        margin: 0 auto;
                        margin-bottom: 36px;
                        border-radius: var(--RadiusBase);
                        }
                        .article-inner {
                        width: 100%;
                        }

                        .news-breadcrumb {
                        margin-bottom: var(--ThemeSpace4);
                        text-align: left;
                        }

                        .news-breadcrumb a {
                        color: hsla(var(--PlutoAccent), 1);
                        text-decoration: none;
                        font-size: 0.875rem;
                        }

                        .news-breadcrumb a:hover {
                        text-decoration: underline;
                        }

                        .news-article-title {
                        margin-bottom: var(--ThemeSpace4);
                        font-size: 2.5rem;
                        font-weight: var(--FontWeightBold);
                        line-height: 1.2;
                        }

                        @media (max-width: 768px) {
                        .news-article-title {
                        font-size: 2rem;
                        }
                        }

                        .news-article-meta {
                        margin-bottom: var(--ThemeSpace4);
                        color: hsla(var(--ColorTextSecondary), 1);
                        font-size: 0.875rem;
                        }

                        .news-categories a {
                        color: hsla(var(--PlutoAccent), 1);
                        text-decoration: none;
                        margin-right: var(--ThemeSpace2);
                        }

                        .news-categories a:hover {
                        text-decoration: underline;
                        }

                        .news-article-summary {
                        font-size: 1.125rem;
                        color: hsla(var(--ColorTextSecondary), 1);
                        margin-bottom: var(--ThemeSpace6);
                        font-style: italic;
                        line-height: 1.6;
                        }

                        .news-featured-image {
                        margin-bottom: var(--ThemeSpace6);
                        }

                        .news-featured-image img {
                        width: 100%;
                        height: auto;
                        border-radius: var(--RadiusBase);
                        box-shadow: var(--ShadowSM);
                        }

                        .news-article-content {
                        margin-bottom: var(--ThemeSpace8);
                        line-height: 1.7;
                        }

                        .news-article-content h2,
                        .news-article-content h3,
                        .news-article-content h4 {
                        margin-top: var(--ThemeSpace6);
                        margin-bottom: var(--ThemeSpace4);
                        }

                        .news-article-content p {
                        margin-bottom: var(--ThemeSpace4);
                        font-size: var(--FontSizeBase);
                        }

                        .news-article-content li {
                        line-height: var(--LineHeightTight);
                        }

                        .news-article-content img {
                        max-width: 100%;
                        height: auto;
                        border-radius: var(--RadiusBase);
                        margin: var(--ThemeSpace4) 0;
                        }

                        /* Article Tags */
                        .news-article-tags {
                        margin-bottom: var(--ThemeSpace6);
                        }

                        .news-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--ThemeSpace2);
                        }

                        .news-tag {
                        background: hsla(var(--ColorSurface), 1);
                        padding: var(--ThemeSpace1) var(--ThemeSpace3);
                        border-radius: var(--RadiusBase);
                        font-size: 0.875rem;
                        color: hsla(var(--ColorTextSecondary), 1);
                        border: 1px solid hsla(var(--ColorBorder), 1);
                        }

                        /* Article Gallery */
                        .news-gallery-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                        gap: 1rem;
                        }

                        .news-gallery-item {
                        position: relative;
                        overflow: hidden;
                        border-radius: 8px;
                        }

                        .gallery-thumbnail {
                        transition: transform 0.3s ease, opacity 0.3s ease;
                        }

                        .gallery-thumbnail:hover {
                        transform: scale(1.05);
                        opacity: 0.9;
                        }

                        /* Lightbox Overlay */
                        .gallery-lightbox {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 9999;
                        }

                        .lightbox-backdrop {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: hsla(var(--Black), 0.95);
                        backdrop-filter: blur(10px);
                        }

                        .lightbox-content {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 4rem 2rem 2rem;
                        }

                        .lightbox-image-container {
                        max-width: 90vw;
                        max-height: 85vh;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        }

                        #lightbox-image {
                        max-width: 100%;
                        max-height: 85vh;
                        object-fit: contain;
                        border-radius: 4px;
                        box-shadow: 0 10px 50px hsla(var(--Black), 0.5);
                        }

                        /* Lightbox Controls */
                        .lightbox-close,
                        .lightbox-prev,
                        .lightbox-next {
                        position: absolute;
                        background: hsla(var(--White), 0.1);
                        border: 1px solid hsla(var(--White), 0.2);
                        color: hsla(var(--White), 1);
                        font-size: 2rem;
                        cursor: pointer;
                        border-radius: 50%;
                        width: 50px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.2s ease;
                        backdrop-filter: blur(10px);
                        z-index: 10001;
                        }

                        .lightbox-close:hover,
                        .lightbox-prev:hover,
                        .lightbox-next:hover {
                        background: hsla(var(--White), 0.2);
                        border-color: hsla(var(--White), 0.4);
                        transform: scale(1.1);
                        }

                        .lightbox-close {
                        top: 1rem;
                        right: 1rem;
                        font-size: 2.5rem;
                        line-height: 1;
                        }

                        .lightbox-prev {
                        left: 1rem;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 3rem;
                        line-height: 1;
                        padding-bottom: 5px;
                        }

                        .lightbox-next {
                        right: 1rem;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 3rem;
                        line-height: 1;
                        padding-bottom: 5px;
                        }

                        .lightbox-prev:hover {
                        transform: translateY(-50%) scale(1.1);
                        }

                        .lightbox-next:hover {
                        transform: translateY(-50%) scale(1.1);
                        }

                        .lightbox-counter {
                        position: absolute;
                        bottom: 2rem;
                        left: 50%;
                        transform: translateX(-50%);
                        color: hsla(var(--White), 1);
                        background: hsla(var(--Black), 0.5);
                        padding: 0.5rem 1rem;
                        border-radius: 20px;
                        font-size: 0.9rem;
                        backdrop-filter: blur(10px);
                        }

                        /* Mobile Responsive */
                        @media screen and (max-width: 768px) {
                        .lightbox-content {
                        padding: 3rem 1rem 1rem;
                        }

                        .lightbox-close,
                        .lightbox-prev,
                        .lightbox-next {
                        width: 40px;
                        height: 40px;
                        font-size: 1.5rem;
                        }

                        .lightbox-prev {
                        left: 0.5rem;
                        }

                        .lightbox-next {
                        right: 0.5rem;
                        }

                        .lightbox-counter {
                        bottom: 1rem;
                        font-size: 0.8rem;
                        }
                        }


                        USAGE EXAMPLES:

                        Basic Page Structure:

                        <body>
                            <header class="site-header theme-bg-brand theme-py-0">
                                <nav class="site-nav theme-container">
                                    <!-- Navigation content -->
                                </nav>
                            </header>

                            <main class="theme-py-8">
                                <section class="content-section theme-container theme-py-12">
                                    <h1 class="theme-text-3xl theme-font-bold theme-text-brand theme-mb-6">Page Title
                                    </h1>
                                    <p class="theme-text-base theme-mb-4">Content paragraph...</p>
                                </section>
                            </main>

                            <footer class="site-footer theme-bg-gray-9 theme-py-8">
                                <div class="theme-container theme-text-center theme-text-white">
                                    <!-- Footer content -->
                                </div>
                            </footer>
                        </body>

                        Benefits of this approach:
                        - Zero spacing baseline from Pico CSS
                        - Semantic HTML structure preserved
                        - Consistent spacing via theme classes
                        - Easy to customize and maintain
                        - Brand colors from Plutonium 6.0 design system
                        - Responsive and accessible
                        */