/* ============================================================================
   PLUTONIUM CMS 6.0 - THEME CSS
   Theme: plutonium6_default
   Generated: 2025-12-06 03:39:36   
   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:
   1. Pico CSS (from CDN)
   2. root_values.css (design system variables + base typography)
   3. This file (theme-specific customizations)
   ============================================================================ */

/* Import Pico CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css');

/* Import root CSS variables for consistency with admin */
@import url('/plutonium6.0/assets/css/root_values.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 {
    /* Brand Colors - Inherit from Plutonium 6.0 */
    --ColorBrand: var(--Azure);
    --ColorBrandLight: var(--AzureLight);
    --ColorBrandDark: var(--AzureDark);
    
    /* 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 */
}

/* ============================================================================
   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);
}

/* ============================================================================
   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: 80px;
    background: hsla(var(--White), 1);
    border-top: 1px solid hsla(var(--AzureLight), 1);
    border-bottom: 1px solid hsla(var(--AzureDark), 1);
    z-index: 1000;
    overflow: visible; /* Allow dropdowns to show */
}

/* Container inside fixed header */
.site-header .theme-container-fluid {
    display: flex;
    align-items: center;
    height: 80px;
    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: 100px;
    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(--ColorBrand), .5); 
    border-radius: 100px;
    width: 90%;
    margin: 0 auto;
    margin-top: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    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);
}

/* Card-style sections */
section {
    background: hsla(var(--White), 1);
    padding: var(--Space6);
    border-radius: var(--RadiusLG);
    box-shadow: var(--ShadowBase);
    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: 95%;
    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: 100px;
    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: 125px;
    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 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--ThemeSpace2);
}

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

.nav-menu > li > a {
    display: flex;
    align-items: center;
    padding: var(--ThemeSpace0) var(--ThemeSpace0);
    color: hsla(var(--White), 0.9);
    text-decoration: none;
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeSM);
    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(--White), 1);
    background-color: hsla(var(--White), 0.1);
}

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

/* 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(--ColorBrand), 1);
        border-radius: 0 0 var(--RadiusBase) var(--RadiusBase);
        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 {
        border-bottom: 1px solid hsla(var(--White), 0.1);
    }
    
    .nav-menu > li:last-child {
        border-bottom: none;
    }
    
    .nav-menu > li > a {
        padding: var(--ThemeSpace3);
        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(--White), 1);
    }
    
    /* Mobile indentation adjustments */
    .nav-submenu-level-1 a {
        padding-left: var(--ThemeSpace6);
    }
    
    .nav-submenu-level-2 a {
        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-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;
}

.news-article-header {
    margin-bottom: var(--ThemeSpace6);
    text-align: center;
}

.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;
    font-size: 1.05rem;
}

.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);
}

.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-article-gallery {
    margin-bottom: var(--ThemeSpace8);
}

.news-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}

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

.news-gallery-item img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    border-radius: var(--RadiusBase);
    transition: transform 0.2s ease;
}

.news-gallery-item img:hover {
    transform: scale(1.02);
}

/* Empty State */
.news-empty-state {
    text-align: center;
    padding: var(--ThemeSpace12) var(--ThemeSpace4);
}

.news-empty-state h2 {
    margin-bottom: var(--ThemeSpace4);
    color: hsla(var(--ColorTextSecondary), 1);
}

.news-empty-state p {
    color: hsla(var(--ColorTextSecondary), 1);
    margin-bottom: var(--ThemeSpace6);
    font-size: 1.125rem;
}

/* Category Link Styles */
.news-category-link {
    color: hsla(var(--PlutoAccent), 1);
    text-decoration: none;
    margin-right: var(--ThemeSpace2);
    font-weight: var(--FontWeightMedium);
}

.news-category-link:hover {
    text-decoration: underline;
}

.news-category-link:not(:last-child)::after {
    content: ",";
    color: hsla(var(--ColorTextSecondary), 1);
    margin-left: 2px;
}

/*
   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
*/