/* ============================================================================
PLUTONIUM CMS 6.0 - THEME CSS
Theme: plutonium6_default
Generated: 2026-04-21 03:51:59
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);
margin-top: 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);
margin-top: 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);
margin-top: 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);
margin-top: 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);
margin-top: var(--Space2);
text-decoration: none;
}

.buttonBlue:hover {
background: hsla(var(--ColorBrand3Dark), 1);
color: hsla(var(--White), 1);
text-decoration: none;
}
/* Navy Button */
.buttonNavy {
display: inline-block;
background: hsla(var(--ColorBrand3Dark), 1);
color: hsla(var(--White), 1);
border-radius: 2px;
padding: var(--Space3) var(--Space6);
margin-bottom: var(--Space2);
margin-top: var(--Space2);
text-decoration: none;
}
.buttonNavy:hover {
background: hsla(var(--ColorBrand3), 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 {
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(--FontSizeBase);
padding-bottom: var(--ThemeSpace1);
}
}

@media (max-width: 1024px) {
body {
font-size: calc(var(--FontSizeBase) * 0.95);
}

h1 {
font-size: var(--FontSize3XL);
}

h2 {
font-size: var(--FontSize2XL);
line-height: 1.3;
}

h3 {
font-size: var(--FontSizeXL);
}
}

@media (max-width: 768px) {
body,
p,
ul,
li,
ol,
dl,
dt,
dd,
#main-content p {
font-size: calc(var(--FontSizeBase) * 0.9);
line-height: 1.45;
}

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

h2 {
font-size: var(--FontSizeXL);
line-height: 1.35;
}

h3 {
font-size: var(--FontSizeLG);
}

h4 {
font-size: var(--FontSizeBase);
}
}

@media (max-width: 480px) {
h1 {
font-size: var(--FontSizeXL);
}

h2 {
font-size: var(--FontSizeLG);
}

h3 {
font-size: var(--FontSizeBase);
}
}

h1 {
font-size: var(--FontSize4XL);
font-weight: 600;
margin-bottom: var(--ThemeSpace4);
}

h2 {
font-size: var(--FontSize3XL);
font-weight: 600;
line-height: 3rem;
margin-bottom: var(--ThemeSpace4);
}

h3 {
font-size: var(--FontSize2XL);
font-weight: 600;
margin-bottom: var(--ThemeSpace4);
}
h4 {
font-size: var(--FontSizeXL);
font-weight: 600;
margin-bottom: var(--ThemeSpace4);
}
h5 {
font-size: var(--FontSizeLG);
margin-bottom: var(--ThemeSpace4);
font-weight: 200;
}
h6 {
font-size: var(--FontSizeSM);
}
.sectionPlain {
width: 100%;
margin: 20px auto;
max-width: 1920px;
overflow: auto;
}

.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;
        padding-top: 30px; /* 125px fixed nav + 55px breathing room */
        background-color: hsla(var(--ColorBrandLight), 1);
        position: relative;
        z-index: 2;
        padding-bottom: 60px;
        }

        .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), .65);
        background-image: url('https://news.2percentrealty.ca/themes/plutonium6_default/media/header_bg.svg');
        background-repeat: repeat-x;
        width: 100%;
        margin: 0 auto;
        margin-top: 0px;
        height: fit-content;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        }
        .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; }

        /* ============================================================================
        CUSTOM LIST STYLES
        Styled list components with custom bullets and formatting
        ============================================================================ */

        /* Custom bullet list with WebP graphic */
        ul.custom-bullet {
            list-style: none;
            padding-left: 0;
            margin-left: 0;
        }

        ul.custom-bullet li {
            position: relative;
            padding-left: 40px;
            margin-bottom: 16px;
            margin-top: 16px;
        }

        ul.custom-bullet li::before {
            content: '';
            position: absolute;
            left: 0;
            top: -8px;
            width: 32px;
            height: 32px;
            background-image: url('/themes/plutonium6_default/media/eq_horse_icon_white_bg.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* ============================================================================
        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(--ThemeSpace4);
        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: 'Barlow Semi Condensed', sans-serif;
        font-weight: var(--FontWeightBold);
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: var(--ThemeSpace3);
        }

        .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(--FontWeightNormal);
        transition: all 0.2s ease;
        border-radius: var(--RadiusXL);
        background: hsla(var(--White), 0.1);
        gap: var(--ThemeSpace1);
        }

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

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

        /* Dropdown Indicator */
        .nav-dropdown-indicator {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: var(--ThemeSpace1);
        background-image: url('https://news.2percentrealty.ca/themes/plutonium6_default/media/nav-dropdown-arrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.2s ease;
        vertical-align: middle;
        }

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

        /* News mega-dropdown — full-width panel fixed to the viewport, click-driven */
        .nav-submenu--news {
        min-width: unset;
        max-width: unset;
        width: 95vw;
        position: fixed;
        top: 125px; /* matches header height */
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-10px);
        padding: var(--ThemeSpace4);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ThemeSpace4);
        }

        /* Suppress hover for the news panel — click-only */
        .nav-item-has-children:hover .nav-submenu--news {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-10px);
        }

        /* Open state set by JS */
        .nav-item-has-children.is-open .nav-submenu--news {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        }

        /* View All link at the top of the mega-menu */
        .nav-submenu-section--viewall {
        grid-column: 1 / -1;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.3);
        padding-bottom: var(--ThemeSpace2);
        margin-bottom: var(--ThemeSpace1);
        }

        .nav-submenu-viewall {
        display: inline-flex;
        align-items: center;
        gap: var(--ThemeSpace1);
        font-size: var(--FontSizeBase);
        font-weight: var(--FontWeightBold);
        color: hsla(var(--ColorBrand), 1);
        text-decoration: none;
        padding: var(--ThemeSpace1) var(--ThemeSpace4);
        transition: opacity 0.2s ease;
        }

        .nav-submenu-viewall:hover {
        opacity: 0.75;
        }

        /* Mobile accordion panel — hidden on desktop */
        .nav-submenu--news-mob {
        display: none;
        }

        /* Non-clickable section headings inside the news dropdown */
        .nav-submenu-section {
        list-style: none;
        margin: 0;
        padding: 0;
        }

        .nav-submenu-section-heading {
        display: block;
        padding: var(--ThemeSpace2) var(--ThemeSpace4) var(--ThemeSpace1);
        font-size: var(--FontSizeXS);
        font-weight: var(--FontWeightBold);
        color: hsla(var(--ColorBrand), 1);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 0;
        cursor: default;
        }

        /* Scrollable section list */
        .nav-submenu-section-list {
        list-style: none;
        margin: 0;
        padding: var(--ThemeSpace1) 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 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) {

        /* ── Mobile nav layout ──────────────────────────────────────── */
        .site-header .theme-container-fluid {
        height: auto;
        min-height: 65px;
        padding: 8px var(--ThemeSpace4);
        }

        .site-nav {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        position: relative;
        }

        .nav-brand-link {
        height: 65px;
        max-height: 65px;
        }

        .nav-brand-logo {
        height: 48px;
        }

        .nav-mobile-toggle {
        display: flex;
        position: absolute;
        right: 0;
        }

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

        /* ── News: hide desktop panel, show mobile accordion ──────────── */
        .nav-submenu--news {
        display: none !important;
        }

        .nav-submenu--news-mob {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        }

        .nav-item-has-children.is-open .nav-submenu--news-mob,
        .nav-item-has-children.nav-submenu-open .nav-submenu--news-mob {
        max-height: 1400px;
        }

        .nmo-viewall-item {
        list-style: none;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.3);
        }

        .nmo-viewall {
        display: block;
        padding: var(--ThemeSpace2) var(--ThemeSpace4);
        font-size: var(--FontSizeSM);
        font-weight: var(--FontWeightBold);
        color: hsl(var(--ColorBrand));
        text-decoration: none;
        }

        .nmo-section {
        list-style: none;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.15);
        }

        .nmo-section:last-child {
        border-bottom: none;
        }

        .nmo-section-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--ThemeSpace2) var(--ThemeSpace4);
        font-size: var(--FontSizeXS);
        font-weight: var(--FontWeightBold);
        color: hsl(var(--ColorBrand2Dark));
        text-transform: uppercase;
        letter-spacing: 0.08em;
        background: none;
        border: none;
        cursor: pointer;
        }

        .nmo-section-btn:hover,
        .nmo-section-btn:active {
        background-color: hsl(var(--ColorBrand));
        color: #fff;
        }

        .nmo-section-btn:hover .nmo-chevron,
        .nmo-section-btn:active .nmo-chevron {
        border-color: #fff;
        }

        .nmo-chevron {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 2px solid hsl(var(--ColorBrand2Dark));
        border-bottom: 2px solid hsl(var(--ColorBrand2Dark));
        transform: rotate(45deg);
        margin-bottom: 2px;
        flex-shrink: 0;
        transition: transform 0.2s ease, margin-bottom 0.2s ease, margin-top 0.2s ease;
        }

        .nmo-section-btn[aria-expanded="false"] .nmo-chevron {
        transform: rotate(-45deg);
        margin-bottom: 0;
        margin-top: 2px;
        }

        .nmo-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 800px;
        overflow: hidden;
        transition: max-height 0.25s ease;
        }

        .nmo-list.nmo-list--collapsed {
        max-height: 0;
        }

        .nmo-item {
        list-style: none;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.08);
        }

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

        .nmo-item a {
        display: block;
        padding: 5px var(--ThemeSpace4);
        font-size: var(--FontSizeSM);
        color: hsl(var(--ColorBrand2Dark));
        text-decoration: none;
        }

        .nmo-item a:hover,
        .nmo-item a:focus {
        background-color: hsla(var(--ColorBrand), 0.06);
        color: hsl(var(--ColorBrand));
        }

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

/* ============================================================================
        FOOTER COMPONENT - 2% Realty Corporate Footer
        Ported from network.2percentrealty.ca/themes/2perCorp2023
        All selectors prefixed with .tpf- to avoid collision with Plutonium defaults
        ============================================================================ */

/* --- Reset / Scope --- */
#twoPerFooter {
    padding: 0;
    z-index: 10;
    font-family: 'Open Sans', sans-serif;
}
#twoPerFooter a {
    color: rgb(6, 38, 58);
    text-decoration: none;
}
#twoPerFooter a:hover {
    color: rgb(35, 113, 167);
}
#twoPerFooter a:visited {
    color: rgb(6, 38, 58);
}
#twoPerFooter h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgb(6, 38, 58);
    line-height: 1;
    margin: 10px 0 0 0;
}
#twoPerFooter p {
    font-size: 14px;
    font-weight: 400;
    color: rgb(6, 38, 58);
    line-height: 1.5;
    margin: 0 0 10px 0;
}

/* --- Layout helpers --- */
.tpf-container {
    width: 100%;
}
.tpf-content {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 2em;
    overflow: hidden;
    position: relative;
}
.tpf-whiteBG {
    background: #fff;
}
.tpf-relative {
    position: relative;
}
.tpf-absolute {
    position: absolute;
}
.tpf-flex {
    display: flex;
}

/* --- Hiring band --- */
.tpf-hiring {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.tpf-sec50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.tpf-innovative,
.tpf-hiringLink {
    padding: 1.2em 0;
}
.tpf-innovative {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'Lato', sans-serif;
    color: rgb(35, 113, 167);
    font-weight: 400;
    font-size: 2.5vw;
    line-height: 110%;
}
.tpf-hiringLink {
    text-align: right;
}
.tpf-canLarge {
    width: 55%;
    display: block;
    margin-left: auto;
}

/* --- Yellow buttons --- */
.tpf-button {
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.tpf-yellowButton {
    background: rgb(255, 193, 7);
    color: rgb(6, 38, 58);
    border: none;
}
.tpf-yellowButton:hover {
    background: rgb(230, 173, 0);
    color: rgb(6, 38, 58);
}
.tpf-buttonMed {
    font-size: 0.9em;
    line-height: 34px;
    padding: 3px 20px;
    margin: 4px 0;
}

/* --- Footer grid --- */
.tpf-footerGrid {
    display: grid;
    overflow: visible;
    grid-template-rows: auto;
    justify-content: space-evenly;
    min-height: 150px;
    grid-template-columns: 8% 60% 30%;
    grid-gap: 1%;
    padding: 1em;
    grid-template-areas: "tpfFooterLogo tpfRevolution tpfFootAddy";
}
.tpf-footerLogo {
    grid-area: tpfFooterLogo;
    overflow: visible;
}
.tpf-footerLogo img {
    width: 100%;
}
.tpf-revolution {
    width: 50%;
    grid-area: tpfRevolution;
}
.tpf-footerLogo img,
.tpf-revolution img {
    bottom: 7%;
}
.tpf-footAddy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: rgb(6, 38, 58);
    grid-area: tpfFootAddy;
    line-height: 1.25;
}

/* --- Legal / TM bar --- */
.tpf-tm {
    font-size: 0.6em;
    line-height: 110%;
    padding-bottom: 3em;
}

/* --- Responsive: tablet --- */
@media only screen and (max-width: 1023px) {
    .tpf-hiring,
    .tpf-hiringLink {
        text-align: center;
    }
    .tpf-innovative {
        font-size: clamp(1.2rem, 5.5vw, 2.2rem);
        padding: 1em 0;
    }
    .tpf-footerGrid {
        grid-template-columns: 12% 56% 30%;
    }
    .tpf-revolution {
        width: 70%;
    }
}

/* --- Responsive: medium --- */
@media only screen and (max-width: 900px) {
    .tpf-footerGrid {
        grid-template-columns: 38% 60%;
        grid-template-areas:
            "tpfFooterLogo tpfFootAddy"
            "tpfRevolution .";
    }
    .tpf-footerLogo img {
        width: 62px;
    }
    .tpf-footAddy {
        font-size: 0.8em;
        grid-area: 1 / 2 / 3 / 3;
    }
    .tpf-revolution {
        width: 100%;
    }
    .tpf-footerLogo img,
    .tpf-revolution img {
        position: relative;
        bottom: auto;
        display: block;
        overflow: visible;
    }
    .tpf-tm {
        padding: 3em 4vw;
    }
}

/* --- Responsive: mobile --- */
@media only screen and (max-width: 600px) {
    .tpf-sec50 {
        grid-template-columns: 1fr;
    }
    .tpf-innovative {
        font-size: clamp(1rem, 4.2vw, 1.35rem);
        justify-content: center;
    }
    .tpf-hiringLink {
        text-align: center;
    }
    .tpf-canLarge {
        margin: 0 auto;
    }
    .tpf-footerGrid {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "tpfFooterLogo"
            "tpfRevolution"
            "tpfFootAddy";
    }
    .tpf-footAddy {
        align-items: center;
        text-align: center;
        grid-area: tpfFootAddy;
    }
    .tpf-revolution {
        width: 80%;
        margin: 0 auto;
    }
    .tpf-footerLogo {
        text-align: center;
    }
    .tpf-footerLogo img {
        width: 80px;
        margin: 0 auto;
    }
}
    
    .social-media-links {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin: 0 auto;
        padding-top: 16px;
    }
    
    .social-media-links a {
        color: hsla(var(--ColorTextPrimary), 0.7);
        font-size: 1.5rem;
        transition: color 0.3s ease, transform 0.3s ease;
        text-decoration: none;
    }
    
    .social-media-links a:hover {
        color: hsla(var(--ColorBrand), 1);
        transform: translateY(-3px);
    }

                /* 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: 145px;   /* 125px fixed nav height + 20px breathing room */
                        background: hsla(var(--White), .8);
                        padding: var(--ThemeSpace8);
                        border-radius: var(--RadiusLG);
                        width: 90%;
                        margin-left: auto;
                        margin-right: auto;
                        margin-bottom: 0;
                        }

                        .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 {
                        width: 90%;
                        margin: 0 auto;
                        padding-top: 145px;  /* 125px fixed nav height + 20px breathing room — matches .news-index */
                        padding-bottom: 40px;
                        }

                        /* Hero: bleeds to the edges of article-inner using negative margins */
                        .news-article-hero {
                        position: relative;
                        min-height: 420px;
                        margin: calc(-1 * var(--ThemeSpace8)) calc(-1 * var(--ThemeSpace8)) var(--ThemeSpace6);
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        display: flex;
                        align-items: flex-end;
                        }

                        .news-article-hero-overlay {
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 100%);
                        display: flex;
                        align-items: flex-end;
                        }

                        .news-article-hero-inner {
                        width: 100%;
                        padding: 2.5rem var(--ThemeSpace8) 2rem;
                        }

                        .news-article-hero .news-article-title {
                        color: hsla(var(--White), 1);
                        font-size: clamp(1.5rem, 4vw, 2.5rem);
                        line-height: 1.2;
                        text-shadow: 0 2px 8px rgba(0,0,0,0.45);
                        margin: 0;
                        }

                        .news-article-hero .unsplash-credit-inline,
                        .news-article-hero .unsplash-credit-inline a {
                        color: rgba(255,255,255,0.65);
                        font-size: 0.75rem;
                        }

                        @media (max-width: 640px) {
                        .news-article-hero { min-height: 280px; }
                        .news-article-hero-inner { padding: 1.5rem var(--ThemeSpace8) 1.25rem; }
                        }

                        /* Constrained content area — contains the hero and all article content */
                        .article-inner {
                        max-width: var(--MaxWidth4XL);
                        width: 90%;
                        margin: 0 auto;
                        background: hsla(var(--White));
                        padding: var(--ThemeSpace8);
                        border-radius: var(--RadiusLG);
                        overflow: hidden;
                        }

                        .news-article-header {
                        text-align: center;
                        margin: 0 auto;
                        margin-bottom: 36px;
                        border-radius: var(--RadiusBase);
                        }

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

                        /* Recent Articles — shown at the bottom of individual article view */
                        .news-recent-articles {
                        margin-top: var(--ThemeSpace10, 2.5rem);
                        padding-top: var(--ThemeSpace8, 2rem);
                        border-top: 1px solid hsla(var(--ColorBorder), 1);
                        }

                        .news-recent-articles__heading {
                        font-size: 1.25rem;
                        font-weight: var(--FontWeightSemiBold);
                        margin-bottom: var(--ThemeSpace6, 1.5rem);
                        color: hsla(var(--ColorText), 1);
                        }

                        .news-recent-articles__grid {
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 1.5rem;
                        }

                        @media (min-width: 640px) {
                        .news-recent-articles__grid {
                        grid-template-columns: repeat(3, 1fr);
                        gap: 1.5rem;
                        }
                        }

                        /* scale card title down slightly inside the recent strip */
                        .news-recent-articles__grid .news-card-title {
                        font-size: 1rem;
                        }

                        .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 {
                        display: inline-block;
                        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);
                        text-decoration: none;
                        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
                        }

                        .news-tag:hover {
                        background: hsla(var(--PlutoAccent), 0.1);
                        color: hsla(var(--PlutoAccent), 1);
                        border-color: hsla(var(--PlutoAccent), 0.4);
                        }

                        /* 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
                        */
/* EVENTS CALENDAR STYLES ========================================================
   
   Uses Plutonium CMS 6.0 Design System (root_values.css)
   Semantic colors, spacing, shadows, and radius for consistency
   ============================================================================ */

    .events-calendar {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--Space8) var(--Space4);
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        margin-bottom: var(--Space2);
        width: 95%;
    }

    .calendar-header h2 {
        font-size: var(--FontSize2XL);
        font-weight: var(--FontWeightBold);
        color: hsla(var(--ColorBrand), 1);
        margin: 0;
    }

    .calendar-nav {
        display: flex;
        gap: var(--Space4);
        align-items: center;
    }

    .nav-btn {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand), 1) 0%, 
            hsla(var(--ColorBrandDark), 1) 100%);
        color: hsla(var(--White), 1);
        border: none;
        padding: var(--Space2) var(--Space4);
        border-radius: var(--RadiusBase);
        cursor: pointer;
        font-size: var(--FontSizeBase);
        font-weight: var(--FontWeightMedium);
        text-decoration: none;
        display: inline-block;
        transition: all var(--TransitionFast);
        box-shadow: var(--ShadowSM);
    }

    .nav-btn:hover {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand), 0.9) 0%, 
            hsla(var(--ColorBrandDark), 0.9) 100%);
        color: hsla(var(--White), 1);
        box-shadow: var(--ShadowMD);
        transform: translateY(-1px);
    }

    .nav-btn.today-btn {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand2), 1) 0%, 
            hsla(var(--ColorBrand2Dark), 1) 100%);
    }

    .nav-btn.today-btn:hover {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand2), 0.9) 0%, 
            hsla(var(--ColorBrand2Dark), 0.9) 100%);
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: hsla(var(--ColorBorder), 0.3);
        border: 1px solid hsla(var(--ColorBorder), 0.3);
        border-radius: var(--RadiusLG);
        overflow: hidden;
        box-shadow: var(--ShadowBase);
        margin: 0 auto;
        width: 95%;
    }

    .calendar-day-header {
        background: hsla(var(--ColorBgSecondary), 1);
        padding: var(--Space3);
        text-align: center;
        font-weight: var(--FontWeightSemibold);
        text-transform: uppercase;
        font-size: var(--FontSizeSM);
        color: hsla(var(--ColorTextSecondary), 1);
        letter-spacing: 0.05em;
    }

    .calendar-day {
        background: hsla(var(--White), 1);
        min-height: 120px;
        padding: var(--Space2);
        position: relative;
    }

    .calendar-day.other-month {
        background: hsla(var(--ColorBgTertiary), 1);
        opacity: 0.6;
    }

    .calendar-day.today {
        background: hsla(var(--ColorBrand), 0.05);
        box-shadow: inset 0 0 0 2px hsla(var(--ColorBrand), 0.5);
    }

    .day-number {
        font-size: var(--FontSizeSM);
        font-weight: var(--FontWeightSemibold);
        color: hsla(var(--ColorTextPrimary), 1);
        margin-bottom: var(--Space2);
    }

    .event-card {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand2), 1) 0%, 
            hsla(var(--ColorBrand2Dark), 1) 100%);
        border-radius: var(--RadiusBase);
        padding: var(--Space2);
        margin-top: var(--Space2);
        cursor: pointer;
        text-decoration: none;
        display: block;
        transition: all var(--TransitionFast);
        position: relative;
        overflow: hidden;
        box-shadow: var(--ShadowSM);
        min-height: 80px;
    }

    .event-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ShadowMD);
    }

    .event-card.has-image {
        padding: 0;
    }

    .event-image {
        width: 100%;
        height: 100%;
        min-height: 80px;
        object-fit: cover;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .event-title {
        font-size: var(--FontSizeXS);
        font-weight: var(--FontWeightSemibold);
        color: hsla(var(--White), 1);
        margin: 0;
        padding: var(--Space2);
        line-height: var(--LineHeightNormal);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .event-card.has-image .event-title {
        position: relative;
        z-index: 1;
        background: linear-gradient(to bottom, 
            hsla(var(--Black), 0.85) 0%,
            hsla(var(--Black), 0.7) 60%,
            hsla(var(--Black), 0.5) 100%);
        padding: var(--Space2);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .event-card .session-info {
        position: relative;
        z-index: 1;
        padding: 0 var(--Space2) var(--Space2);
        margin: 0;
        background: linear-gradient(to bottom,
            hsla(var(--Black), 0.5) 0%,
            hsla(var(--Black), 0.75) 100%);
    }

    .event-card.has-image .session-info {
        color: hsla(var(--White), 0.95);
    }

    .event-card .session-info small {
        opacity: 0.85;
    }

    .error-state {
        text-align: center;
        padding: var(--Space12);
        color: hsla(var(--ColorTextMuted), 1);
        font-size: var(--FontSizeLG);
    }

/* == EVENT DETAIL MODAL ========================================================
   
   Full-screen modal for displaying complete event information
   ============================================================================ */

    .event-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--ZIndexModal);
        animation: fadeIn var(--TransitionFast);
    }

    .event-modal.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .event-modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: hsla(var(--Black), 0.8);
        backdrop-filter: blur(4px);
    }

    .event-modal-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--Space4);
        overflow-y: auto;
    }

    .event-modal-content {
        position: relative;
        background: hsla(var(--White), 1);
        border-radius: var(--RadiusLG);
        max-width: 1400px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: var(--Shadow2XL);
        animation: slideUp var(--TransitionBase);
    }

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

    .event-modal-close {
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        background: hsla(var(--ColorBrand), 1);
        color: hsla(var(--White), 1);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: var(--RadiusFull);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--FontSize2XL);
        line-height: 1;
        margin: var(--Space4) var(--Space4) 0 0;
        z-index: 10;
        box-shadow: var(--ShadowMD);
        transition: all var(--TransitionFast);
    }

    .event-modal-close:hover {
        background: hsla(var(--ColorBrandDark), 1);
        transform: scale(1.1);
    }

    .event-modal-header {
        padding: var(--Space6) var(--Space6) var(--Space4);
        border-bottom: 2px solid hsla(var(--ColorBorder), 0.2);
    }

    .event-modal-cover {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        border-radius: var(--RadiusLG) var(--RadiusLG) 0 0;
        margin-bottom: var(--Space4);
    }

    .event-modal-title {
        font-size: var(--FontSizeXL);
        font-weight: var(--FontWeightBold);
        color: hsla(var(--ColorBrand), 1);
        margin: 0 0 var(--Space3) 0;
    }

    .event-modal-session-title {
        font-size: var(--FontSizeXL);
        font-weight: var(--FontWeightMedium);
        color: hsla(var(--ColorBrand2Dark), 1);
        margin: calc(var(--Space2) * -1) 0 var(--Space4) 0;
        font-style: italic;
    }

    .event-modal-category {
        display: inline-block;
        background: hsla(var(--ColorBrand2), 0.1);
        color: hsla(var(--ColorBrand2Dark), 1);
        padding: var(--Space1) var(--Space3);
        border-radius: var(--RadiusFull);
        font-size: var(--FontSizeSM);
        font-weight: var(--FontWeightSemibold);
        margin-bottom: var(--Space4);
    }

    .event-modal-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--Space4);
        padding: var(--Space4);
        background: hsla(var(--ColorBgSecondary), 1);
        border-radius: var(--RadiusBase);
        margin-bottom: var(--Space4);
    }

    .event-meta-item {
        display: flex;
        align-items: flex-start;
        gap: var(--Space2);
    }

    .event-meta-icon {
        color: hsla(var(--ColorBrand), 1);
        font-size: var(--FontSizeLG);
        margin-top: 2px;
    }

    .event-meta-content {
        flex: 1;
    }

    .event-meta-label {
        font-size: var(--FontSizeXS);
        color: hsla(var(--ColorTextSecondary), 1);
        text-transform: uppercase;
        font-weight: var(--FontWeightSemibold);
        letter-spacing: 0.05em;
        margin-bottom: var(--Space1);
    }

    .event-meta-value {
        font-size: var(--FontSizeBase);
        color: hsla(var(--ColorTextPrimary), 1);
        font-weight: var(--FontWeightMedium);
    }

    .event-modal-body {
        padding: var(--Space6);
    }

    .event-modal-section {
        margin-bottom: var(--Space6);
    }

    .event-modal-section h3 {
        font-size: var(--FontSizeXL);
        font-weight: var(--FontWeightBold);
        color: hsla(var(--ColorBrand2), 1);
        margin: 0 0 var(--Space3) 0;
    }

    .event-modal-section-content {
        font-size: var(--FontSizeBase);
        line-height: var(--LineHeightRelaxed);
        color: hsla(var(--ColorTextPrimary), 1);
    }

    .event-modal-section-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--RadiusBase);
        margin: var(--Space4) 0;
    }
    .event-modal-section-content p {
        margin-top: var(--Space4);
        margin-bottom: var(--Space4);
    }

    .event-modal-footer {
        padding: var(--Space6);
        border-top: 2px solid hsla(var(--ColorBorder), 0.2);
        background: hsla(var(--ColorBgSecondary), 1);
        border-radius: 0 0 var(--RadiusLG) var(--RadiusLG);
        display: flex;
        gap: var(--Space4);
        flex-wrap: wrap;
    }

    .event-modal-btn {
        flex: 1;
        min-width: 200px;
        padding: var(--Space3) var(--Space6);
        border-radius: var(--RadiusBase);
        font-size: var(--FontSizeBase);
        font-weight: var(--FontWeightSemibold);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: all var(--TransitionFast);
        border: none;
    }

    .event-modal-btn-primary {
        background: linear-gradient(135deg, 
            hsla(var(--ColorBrand), 1) 0%, 
            hsla(var(--ColorBrandDark), 1) 100%);
        color: hsla(var(--White), 1);
        box-shadow: var(--ShadowSM);
    }

    .event-modal-btn-primary:hover {
        box-shadow: var(--ShadowMD);
        transform: translateY(-2px);
    }

    .event-modal-btn-secondary {
        background: hsla(var(--White), 1);
        color: hsla(var(--ColorBrand), 1);
        border: 2px solid hsla(var(--ColorBrand), 1);
    }

    .event-modal-btn-secondary:hover {
        background: hsla(var(--ColorBrand), 0.05);
    }

/* == RESPONSIVE BREAKPOINTS =====================================================
   
   Mobile-first approach matching design system
   ============================================================================ */

    @media (max-width: 768px) {
    .events-calendar {
        padding: var(--Space4) var(--Space2);
    }
    
    .calendar-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
    
    .calendar-day-header {
        display: none;
    }
    
    .calendar-day {
        min-height: 35px;
        padding: var(--Space1);
    }
    
    .calendar-day.other-month {
        display: none;
    }
    
    .event-card {
        margin-top: var(--Space1);
        padding: var(--Space1);
    }
    
    .event-title {
        font-size: calc(var(--FontSizeXS) * 0.85);
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .event-image {
        height: 40px;
    }
    
    .calendar-header {
        flex-direction: column;
        gap: var(--Space4);
        align-items: flex-start;
    }
    
    .calendar-nav {
        width: 100%;
        justify-content: center;
    }
    
    .nav-btn {
        padding: var(--Space2) var(--Space3);
        font-size: var(--FontSizeSM);
    }
}

/* ── News Header Search ─────────────────────────────────────────────────────── */
.nav-news-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 var(--Space4);
    flex: 0 1 320px;
}
.nav-news-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-news-search-icon {
    position: absolute;
    left: 0.6rem;
    font-size: 1.1rem;
    color: hsla(var(--ColorBrandLight), 1);
    pointer-events: none;
    user-select: none;
}
.nav-news-search-input {
    width: 100%;
    padding: 0.42rem 2.2rem 0.42rem 2.1rem;
    background: hsla(var(--ColorBrandDark), 0.45);
    border: 1px solid hsla(var(--ColorBrandLight), 0.55);
    border-radius: 999px;
    color: #fff;
    font-family: var(--FontFamily);
    font-size: var(--FontSizeSM);
    outline: none;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-news-search-input::placeholder { color: rgba(255,255,255,0.6); }
.nav-news-search-input:focus {
    background: hsla(var(--ColorBrandDark), 0.65);
    border-color: hsla(var(--ColorBrandLight), 1);
    box-shadow: 0 0 0 2px hsla(var(--ColorBrandLight), 0.25);
}
.nav-news-search-input::-webkit-search-cancel-button { display: none; }
.nav-news-search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: hsla(var(--ColorBrandLight), 1);
    display: flex;
    align-items: center;
    line-height: 1;
}
.nav-news-search-clear .material-symbols-outlined { font-size: 1rem; }
.nav-news-search-count {
    font-size: 0.65rem;
    color: hsla(var(--ColorBrandLight), 0.9);
    text-align: center;
    min-height: 1em;
    margin-top: 0.15rem;
}
@media (max-width: 768px) {
    .nav-news-search {
        order: 3;
        flex: 0 1 100%;
        margin: var(--Space2) 0 0;
    }
}

/* ── Unsplash Attribution ────────────────────────────────────────────────────── */
.unsplash-credit {
    font-size: 0.7rem;
    color: hsla(var(--ColorTextMuted), 0.75);
    margin: 0.35rem 0 0 0;
}
.unsplash-credit a,
.unsplash-credit-inline a {
    color: inherit;
    text-decoration: underline;
}
.unsplash-credit-inline {
    display: block;
    font-size: 0.65rem;
    color: hsla(var(--ColorTextMuted), 0.7);
    padding: 0.2rem 0.5rem 0.3rem;
    background: rgba(0,0,0,0.03);
}

/* ── News pagination ─────────────────────────────────────────────────────────── */
.news-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 2.5rem 0 1rem;
}
.news-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.news-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid hsla(var(--ColorBorder), 1);
    background: hsla(var(--ColorSurface), 1);
    color: hsla(var(--ColorText), 1);
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.news-pagination__btn:hover:not(.is-current):not(.is-disabled) {
    background: hsla(var(--ColorBrand), 1);
    border-color: hsla(var(--ColorBrand), 1);
    color: #fff;
}
.news-pagination__btn.is-current {
    background: hsla(var(--ColorBrand), 1);
    border-color: hsla(var(--ColorBrand), 1);
    color: #fff;
    cursor: default;
}
.news-pagination__btn.is-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}
.news-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    color: hsla(var(--ColorTextMuted), 1);
    user-select: none;
}
.news-pagination__info {
    width: 100%;
    text-align: center;
    font-size: .8125rem;
    color: hsla(var(--ColorTextMuted), 1);
    margin: .25rem 0 0;
}

/* ============================================================================
   DARK MODE
   System-level dark mode overrides
   ============================================================================ */
@media (prefers-color-scheme: dark) {

    /* ─── Page body ──────────────────────────────────────────────────── */
    body {
        background-color: #0f1318;
        color: #dce3e8;
    }

    /* ─── Nav header + buttons ───────────────────────────────────────── */
    .theme-bg-brand {
        background-color: rgba(8, 16, 26, 0.88);
    }
    .nav-menu > li > a {
        color: rgba(220, 227, 232, 0.9);
        background: transparent;
    }
    .nav-menu > li > a:hover,
    .nav-menu > li > a:focus {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.12);
    }
    .nav-menu > li > a[aria-current="page"] {
        color: #ffffff;
        background-color: transparent;
    }

    /* ─── Nav: mobile dropdown ─ see combined query below ───────────── */

    /* ─── News index ─────────────────────────────────────────────────── */
    .news-index {
        background-color: #0f1318;
    }
    .news-card {
        background-color: #1a2229;
        border-color: rgba(255, 255, 255, 0.08);
        color: #dce3e8;
    }
    .news-card * {
        color: inherit;
    }

    /* ─── Article detail ─────────────────────────────────────────────── */

/* ── article-inner mobile: edge-to-edge width, compact padding ── */
@media (max-width: 768px) {
    .article-inner {
        width: 96%;
        padding: var(--ThemeSpace4);
    }
}

    .article-inner {
        background-color: #0f1318;
    }
    .news-article-content {
        background-color: #1a2229;
        color: #dce3e8;
    }
    .news-article-header h1,
    .news-article-header h2,
    .news-article-header h3 {
        color: #f0f4f7;
    }
    .news-article-meta,
    .news-article-summary {
        color: rgba(220, 227, 232, 0.75);
    }
    .news-article-body,
    .news-article-body p,
    .news-article-body li {
        color: #dce3e8;
    }
    .news-article-body h2,
    .news-article-body h3,
    .news-article-body h4 {
        color: #f0f4f7;
    }
    .news-article-body a {
        color: hsla(var(--ColorBrandLight), 1);
    }
    .news-article-body blockquote {
        background-color: rgba(255, 255, 255, 0.05);
        border-left-color: hsla(var(--ColorBrandLight), 0.6);
        color: rgba(220, 227, 232, 0.85);
    }

    /* ─── Breadcrumb & tags ──────────────────────────────────────────── */
    .news-breadcrumb,
    .news-breadcrumb a {
        color: rgba(220, 227, 232, 0.7);
    }
    .news-breadcrumb a:hover {
        color: hsla(var(--ColorBrandLight), 1);
    }
    .news-category-tag,
    .news-tag {
        background-color: rgba(255, 255, 255, 0.08);
        color: #dce3e8;
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* ─── Pagination ─────────────────────────────────────────────────── */
    .news-pagination__btn {
        background-color: #1a2229;
        border-color: rgba(255, 255, 255, 0.15);
        color: #dce3e8;
    }
    .news-pagination__ellipsis {
        color: rgba(220, 227, 232, 0.5);
    }
    .news-pagination__info {
        color: rgba(220, 227, 232, 0.5);
    }

    /* ─── Footer ─────────────────────────────────────────────────────── */
    #twoPerFooter {
        background-color: #080c10;
        color: rgba(220, 227, 232, 0.85);
    }
    #twoPerFooter a {
        color: hsla(var(--ColorBrandLight), 1);
    }
}

/* ─── Dark mode × mobile: dropdown panel ──────────────────────────────
   Scoped to mobile so the container background doesn't bleed onto
   the desktop nav at full width.
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .nav-menu-container {
        background-color: rgba(10, 16, 24, 0.97);
        border-color: rgba(255, 255, 255, 0.12);
    }
    .nav-menu > li {
        color: #dce3e8;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}