/**
 * Main Styles for WCAG 2.2 AAA Compliant Template
 * This file contains all the visual styling
 */

/* CSS Custom Properties for theming */
:root {
    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --secondary: #64748b;
    --success: #059669;
    --warning: #d97706;
    --error: #dc2626;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;

    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border radius */
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* Focus ring */
    --focus-ring: 0 0 0 4px rgba(59, 130, 246, 0.5);
    --focus-ring-width: 4px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #111827;
        --gray-100: #1f2937;
        --gray-200: #374151;
        --gray-300: #4b5563;
        --gray-600: #d1d5db;
        --gray-700: #e5e7eb;
        --gray-800: #f3f4f6;
        --gray-900: #f9fafb;
        --white: #111827;
        
        /* Dark mode header/footer backgrounds */
        --header-bg: #1f2937;
        --footer-bg: #111827;
        --border-color: #374151;
    }
    
    /* Dark mode body */
    body {
        background-color: var(--gray-50);
        color: var(--gray-900);
    }

    /* Dark mode form labels need to override body color */
    .form-label {
        color: #ffffff !important;
    }

    /* Dark mode form button text needs to be light */
    .form-button {
        color: #ffffff !important;
    }
    
    /* Dark mode header - translucent with blur */
    header {
        background-color: rgba(31, 41, 55, 0.80) !important; /* based on --header-bg */
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
    }
    
    /* Dark mode footer */
    footer {
        background-color: var(--footer-bg) !important;
        border-top: 1px solid var(--border-color);
    }

    /* Dark mode footer headings must remain white */
    .footer-heading {
        color: #ffffff !important;
    }

    /* Dark mode skip-link must have sufficient contrast for WCAG 2 AAA */
    .skip-link {
        color: #ffffff !important;
        background: #1e40af !important;
    }

    .skip-link:focus {
        outline: var(--focus-ring-width) solid #ffffff !important;
    }
    
    /* Dark mode content wrapper - 85% opaque dark background */
    .content-wrapper {
        background: rgba(31, 41, 55, 0.85) !important; /* based on --gray-100 */
        border: 1px solid var(--border-color);
    }
    
    /* Dark mode navigation links */
    .nav-link {
        color: #ffffff !important;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.10);
    }
    
    .nav-link-active {
        color: #ffffff !important;
        background-color: var(--primary);
    }
    
    /* Dark mode mobile navigation */
    .mobile-nav {
        background-color: var(--header-bg);
        border-top: 1px solid var(--border-color);
    }
    
    .mobile-nav-link {
        color: #ffffff !important;
    }
    
    .mobile-nav-link:hover,
    .mobile-nav-link:focus {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.10);
    }
    
    .mobile-nav-link-active {
        color: #ffffff !important;
        background-color: var(--primary);
    }
    
    /* Dark mode list markers and text */
    .markdown-content ul,
    .markdown-content ol,
    .markdown-content li {
        color: var(--gray-800);
    }
    .markdown-content ul li::marker,
    .markdown-content ol li::marker {
        color: var(--gray-800);
    }

    /* Dark mode links lighter and consistent (override accessibility.css) */
    a,
    .markdown-content a,
    .content-wrapper a,
    nav a,
    footer a,
    header a {
        color: #93c5fd !important; /* lighter blue for dark backgrounds */
        text-decoration: underline;
    }
    a:hover,
    a:focus,
    .markdown-content a:hover,
    .markdown-content a:focus,
    .content-wrapper a:hover,
    .content-wrapper a:focus,
    nav a:hover,
    nav a:focus,
    footer a:hover,
    footer a:focus,
    header a:hover,
    header a:focus {
        color: #bfdbfe !important; /* even lighter on interaction */
        text-decoration: underline;
    }

    /* Breadcrumb links readable on dark backgrounds */
    .breadcrumb-link {
        color: var(--gray-800) !important;
        text-decoration: underline;
    }
    .breadcrumb-link:hover,
    .breadcrumb-link:focus {
        color: var(--gray-800) !important;
    }

    /* Tables in dark mode - override accessibility.css black text/borders */
    table {
        background-color: var(--gray-100);
        border: 2px solid var(--border-color) !important;
        border-collapse: collapse;
    }
    th,
    td {
        border: 2px solid var(--border-color) !important;
        color: var(--gray-900) !important; /* light text */
    }
    th {
        background-color: var(--header-bg) !important;
        color: var(--gray-900) !important;
    }
    caption {
        color: var(--gray-900) !important;
    }

    /* H1 underline subtler in dark mode to blend better */
    .markdown-content h1 {
        border-bottom-color: var(--border-color) !important;
    }
    .page-title {
        border-bottom-color: var(--border-color) !important;
    }
}

/* Base styles */
* {
    box-sizing: border-box;
}

/* Prevent horizontal scroll globally */
html {
    max-width: 100%;
    overflow-x: hidden;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--font-family);
    background-color: var(--gray-50);
    color: var(--gray-900);
    margin: 0;
    padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--spacing-md);
    color: var(--gray-900);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--gray-700);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

/* Skip links */
.skip-links {
    position: relative;
}

.skip-link {
    position: absolute;
    top: -200px;
    left: var(--spacing-md);
    background: var(--primary);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    z-index: 1000;
    transition: top 0.3s ease-in-out;
}

.skip-link:focus {
    top: var(--spacing-md);
    outline: var(--focus-ring-width) solid var(--white);
}

/* Navigation */
.nav-link {
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in-out;
    display: inline-block;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Responsive navigation layout */
@media (min-width: 768px) and (max-width: 1200px) {
    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
    }
}

@media (min-width: 1201px) {
    .nav-link {
        font-size: 0.9rem;
    }
}

/* Navigation container improvements */
nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    nav ul {
        justify-content: flex-end;
        align-items: center;
    }
}

.nav-link:hover,
.nav-link:focus {
    color: var(--primary);
    background-color: var(--gray-100);
    text-decoration: none;
}

.nav-link-active {
    color: var(--primary);
    font-weight: 600;
    background-color: var(--gray-100);
}

.nav-link:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

/* Hamburger menu button (visible on all screen sizes) */
.hamburger-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    color: var(--gray-600);
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 1002;
}

.hamburger-menu-button:hover {
    color: var(--primary);
    background-color: var(--gray-100);
}

.hamburger-menu-button:focus {
    color: var(--primary);
    outline: none;
}

/* Header positioning for dropdown menu */
header {
    /* Make the navigation bar stick to viewport top */
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    /* Translucent background with blur for all modes */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--gray-200);
    z-index: 1500; /* above backdrop so header stays unblurred */
    transition: background-color 0.3s ease-in-out;
}

/* Logo scroll-based sizing */
.logo-container {
    transition: all 0.3s ease-in-out;
}

.logo-image {
    transition: all 0.3s ease-in-out;
}

/* Desktop logo - larger when at top */
@media (min-width: 768px) {
    .logo-image {
        height: 4rem;
        width: auto;
    }

    /* Smaller logo when scrolled */
    header.scrolled .logo-image {
        height: 3rem;
        width: auto;
    }
}

/* Mobile logo - smaller by default, no scroll change needed */
@media (max-width: 767px) {
    .logo-image {
        height: 3rem;
        width: auto;
    }
}

/* Desktop navigation (hidden by default, shown when hamburger is clicked) */
.desktop-nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 550px;
    z-index: 2001; /* highest */
    margin-top: 0.5rem;
}

/* Backdrop for navigation dropdown */
.nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1200; /* below header, above main */
    backdrop-filter: blur(6px);
}

.desktop-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1000;
}

.desktop-nav-list li {
    border-bottom: 1px solid var(--gray-100);
}

.desktop-nav-list li:last-child {
    border-bottom: none;
}

.desktop-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
}

.desktop-nav-link:hover,
.desktop-nav-link:focus {
    background: var(--gray-50);
    color: var(--primary);
    text-decoration: none;
}

.desktop-nav-link-active {
    background: var(--primary);
    color: var(--white);
}

.desktop-nav-link-active:hover,
.desktop-nav-link-active:focus {
    background: var(--primary-dark);
    color: var(--white);
}

/* Dark mode support for desktop navigation */
@media (prefers-color-scheme: dark) {
    .desktop-nav {
        background: var(--header-bg);
        border-color: var(--border-color);
        box-shadow: 0 10px 25px -3px rgb(0 0 0 / 0.5);
    }
    
    .desktop-nav-list li {
        border-bottom-color: var(--border-color);
    }
    
    .desktop-nav-link {
        color: #ffffff !important;
        font-weight: 500;
    }
    
    .desktop-nav-link:hover,
    .desktop-nav-link:focus {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff !important;
        text-decoration: none;
    }
    
    .desktop-nav-link-active {
        background: var(--primary);
        color: #ffffff !important;
    }
    
    .desktop-nav-link-active:hover,
    .desktop-nav-link-active:focus {
        background: var(--primary-dark);
        color: #ffffff !important;
    }
}

.mobile-nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid var(--gray-200) !important;
    margin: 0;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: var(--primary);
    background-color: var(--gray-100);
    text-decoration: none;
}

.mobile-nav-link-active {
    color: var(--primary);
    font-weight: 600;
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-200) !important;
}

/* Remove border from last mobile nav item */
.mobile-nav-link:last-child {
    border-bottom: none;
}

/* Mobile navigation list styling */
.mobile-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav-list li {
    margin: 0;
    padding: 0;
}

/* Mobile navigation z-index fix */
.mobile-nav {
    position: relative;
    z-index: 2001; /* highest */
}

/* Responsive behavior for navigation menus */
@media (min-width: 768px) {
    /* On desktop, hide mobile menu */
    .mobile-nav {
        display: none !important;
    }
    
    /* Desktop nav should be hidden by default, shown only when toggled */
    .desktop-nav.hidden {
        display: none !important;
    }
    
    .desktop-nav:not(.hidden) {
        display: block;
    }
}

@media (max-width: 767px) {
    /* On mobile, hide desktop menu */
    .desktop-nav {
        display: none !important;
    }
    
    /* Mobile nav should be hidden by default, shown only when toggled */
    .mobile-nav.hidden {
        display: none !important;
    }
    
    .mobile-nav:not(.hidden) {
        display: block;
    }
}

/* Breadcrumb */
.breadcrumb {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li:last-child {
    flex-shrink: 1;
    min-width: 0;
}

.breadcrumb-current {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--gray-600);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.breadcrumb-link {
    color: var(--gray-700);
    text-decoration: underline;
    font-size: 0.9rem;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
    color: var(--gray-700);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--gray-700);
    font-weight: 500;
}

/* Content */
.content-wrapper {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: var(--spacing-lg) var(--spacing-md) !important;
        margin: 0;
        border-radius: 0;
    }
}

.page-title {
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--primary);
}

/* Markdown content styles */
.markdown-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--spacing-md);
}

.markdown-content h2 {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-2xl);
}

.markdown-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.markdown-content p {
    color: var(--gray-700);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.markdown-content ul,
.markdown-content ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    color: var(--gray-700);
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content ul ul {
    list-style-type: circle;
}

.markdown-content ul ul ul {
    list-style-type: square;
}

.markdown-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
}

.markdown-content blockquote {
    border-left: 4px solid var(--primary);
    background-color: var(--gray-50);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-style: italic;
    color: var(--gray-700);
}

.markdown-content code {
    background-color: var(--gray-100);
    color: var(--gray-800);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.markdown-content pre {
    background-color: var(--gray-100);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

/* Images */
.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.image-container {
    margin: 0;
}

/* Contact Button */
.contact-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary);
    color: var(--white) !important; /* ensure white text on blue background in light mode */
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--primary);
    white-space: nowrap;
    /* from previous inline override */
    margin-right: 1.5rem !important;
}

/* Header-specific and child element overrides to defeat generic link color rules */
header .contact-button,
.contact-button .contact-text {
    color: #ffffff !important;
}
.contact-button .contact-icon,
.contact-button .contact-icon path {
    stroke: currentColor !important;
}
.contact-button .contact-icon path { stroke-width: 2; }

.contact-button:hover,
.contact-button:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

.contact-button:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

/* Contact button responsive content */
.contact-text {
    display: inline;
}

.contact-icon {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
}

/* Mobile: show icon, hide text */
@media (max-width: 640px) {
    .contact-button {
        padding: var(--spacing-sm);
        min-width: 40px;
        justify-content: center;
    }
    
    .contact-text {
        display: none;
    }
    
    .contact-icon {
        display: inline;
    }
}

/* Match previous inline responsive margin for contact button */
@media (max-width: 767px) {
    .contact-button { margin-right: 0.75rem !important; }
}

/* Header layout utilities */
.flex {
    display: flex;
}

.relative {
    position: relative;
}

.items-center {
    align-items: center;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--primary);
    color: var(--white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    text-decoration: none;
}

.btn-primary:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

/* Back to top */
.back-to-top-container {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

.back-to-top {
    display: inline-block;
    background-color: var(--primary);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.25rem;
    transition: all 0.2s ease-in-out;
}

.back-to-top:hover,
.back-to-top:focus {
    background-color: var(--primary-dark);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-2px);
}

.back-to-top:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

/* Footer */
footer {
    background-color: var(--gray-800);
    color: var(--white);
}

@media (max-width: 768px) {
    footer {
        font-size: 0.875rem;
    }
    
    .footer-heading {
        font-size: 1rem;
    }
    
    .footer-text {
        font-size: 0.8rem;
    }
    
    .footer-copyright {
        font-size: 0.75rem;
    }
    
    .accessibility-statement {
        font-size: 0.7rem;
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

.footer-heading {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

.footer-text {
    color: #d1d5db;
    margin-bottom: var(--spacing-sm);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-link {
    color: #93c5fd !important;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.footer-link:hover,
.footer-link:focus {
    color: #bfdbfe !important;
    text-decoration: underline;
}

/* Footer anchors and action links color (moved from inline styles) */
footer a,
footer a .action-link {
    color: #93c5fd !important;
    text-decoration: underline;
}

footer a:hover,
footer a:focus,
footer a .action-link:hover,
footer a .action-link:focus {
    color: #bfdbfe !important;
    text-decoration: underline;
}

.footer-link:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

.footer-address {
    font-style: normal;
}

.footer-bottom {
    border-top: 1px solid #374151;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    text-align: center;
}

.footer-copyright {
    color: #d1d5db;
    margin: 0;
}

/* Action link styling for footer */
.action-link {
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

/* Social Media Links */
.social-media-links {
    margin-top: var(--spacing-lg);
}

.social-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #93c5fd !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out, transform 0.1s ease-in-out;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
}

.social-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease-in-out;
}

.social-link:hover .social-icon,
.social-link:focus .social-icon {
    filter: brightness(0) invert(1) brightness(1.2);
}

.social-handle {
    font-size: 0.875rem;
    white-space: nowrap;
}

.action-link:hover,
.action-link:focus {
    color: #bfdbfe !important;
    text-decoration: underline;
}

.action-link:focus {
    outline: var(--focus-ring-width) solid var(--primary-light);
    outline-offset: 2px;
}

.accessibility-statement {
    font-size: 0.875rem;
    margin-left: var(--spacing-sm);
}

/* Error pages */
.error-404 {
    text-align: center;
    padding: var(--spacing-2xl);
}

.error-404 h1 {
    font-size: 4rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

.error-404 p {
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: var(--spacing-xl);
}

/* Responsive design */
@media (max-width: 768px) {
    :root {
        --font-size-base: 16px; /* Better accessibility */
    }
    
    /* Prevent horizontal scroll */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Main container improvements */
    .max-w-7xl {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .max-w-4xl {
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .content-wrapper {
        padding: var(--spacing-lg);
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .markdown-content h1 {
        font-size: 1.875rem;
        word-wrap: break-word;
    }

    .markdown-content h2 {
        font-size: 1.5rem;
        word-wrap: break-word;
    }
    
    .markdown-content h3 {
        font-size: 1.25rem;
        word-wrap: break-word;
    }
    
    .markdown-content p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero-image {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }
    
    /* Breadcrumb mobile layout: inline items */
    .breadcrumb { display: inline; }
    .breadcrumb li { display: inline; }
    .breadcrumb li:not(:last-child)::after { display: inline; content: '/'; color: var(--gray-600); margin: 0 0.25rem; }
    
    .breadcrumb-current {
        font-weight: 500;
        color: var(--gray-900);
        font-size: 0.875rem;
    }
}

/* Mobile dark mode specific styles */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* General content text color */
    body {
        color: var(--gray-800);
    }
    
    /* Content text colors */
    .markdown-content {
        color: var(--gray-800);
    }
    
    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        color: var(--gray-900);
    }
    
    .markdown-content p {
        color: var(--gray-800);
    }
    
    /* List colors and markers */
    .markdown-content ul,
    .markdown-content ol {
        color: var(--gray-800);
    }
    
    .markdown-content ul li::marker,
    .markdown-content ol li::marker {
        color: var(--gray-800);
    }
    
    .markdown-content li {
        color: var(--gray-800);
    }
    
    /* Breadcrumb mobile dark mode fixes */
    .breadcrumb {
        flex-direction: row;
        align-items: center;
        gap: 0;
        font-size: 0.875rem;
    }
    
    .breadcrumb li {
        width: auto;
    }
    
    .breadcrumb li:not(:last-child)::after {
        display: inline;
        content: '/';
        color: var(--gray-600);
        margin: 0 0.25rem;
    }
    
    .breadcrumb li:not(:last-child) {
        margin-bottom: 0;
    }
    
    .breadcrumb-current {
        font-weight: 500;
        color: var(--gray-800);
        font-size: 0.875rem;
    }
    
    .breadcrumb-link {
        color: var(--primary-light);
        font-size: 0.875rem;
    }
    
    /* Any other text elements that might be black */
    div:not(.markdown-content) {
        color: var(--gray-800);
    }
    
    span {
        color: var(--gray-800);
    }
    
    /* Make sure all text content is light */
    .content-wrapper {
        color: var(--gray-800);
    }
}

/* Print styles */
@media print {
    .skip-links,
    .mobile-menu-button,
    .back-to-top-container,
    footer {
        display: none;
    }

    .content-wrapper {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* High contrast mode */
.high-contrast {
    --primary: #000000;
    --primary-dark: #000000;
    --gray-700: #000000;
    --gray-900: #000000;
    --white: #ffffff;
    --gray-50: #ffffff;
}

/* Inner page animated background (more complex and prominent) */
.inner-page {
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Five layered backgrounds for depth and motion */
    background-image:
        radial-gradient(1200px 1200px at 8% 10%, rgba(99, 102, 241, 0.50) 0%, rgba(99, 102, 241, 0) 62%),
        radial-gradient(1050px 1050px at 92% 88%, rgba(16, 185, 129, 0.44) 0%, rgba(16, 185, 129, 0) 62%),
        radial-gradient(900px 900px at 85% 15%, rgba(59, 130, 246, 0.40) 0%, rgba(59, 130, 246, 0) 62%),
        conic-gradient(from 30deg at 70% 30%, rgba(99, 102, 241, 0.22), rgba(16, 185, 129, 0.22), rgba(59, 130, 246, 0.22), rgba(99, 102, 241, 0.22)),
        linear-gradient(135deg, rgba(99, 102, 241, 0.10) 0%, rgba(16, 185, 129, 0.08) 50%, rgba(59, 130, 246, 0.10) 100%);
    background-size:
        300% 300%,
        280% 280%,
        260% 260%,
        220% 220%,
        180% 180%;
    background-position:
        0% 0%,
        100% 100%,
        80% 20%,
        50% 50%,
        0% 0%;
    /* Blend to be more visible on light backgrounds */
    background-blend-mode: overlay, hard-light, multiply, soft-light, normal;
    animation:
        innerBgShift 16s ease-in-out infinite alternate,
        innerBgPulse 20s ease-in-out infinite alternate;
    will-change: background-position, background-size;
}

@media (prefers-color-scheme: dark) {
    .inner-page {
        background-image:
            radial-gradient(1100px 1100px at 8% 10%, rgba(99, 102, 241, 0.36) 0%, rgba(99, 102, 241, 0) 60%),
            radial-gradient(950px 950px at 92% 88%, rgba(16, 185, 129, 0.32) 0%, rgba(16, 185, 129, 0) 60%),
            radial-gradient(820px 820px at 85% 15%, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0) 60%),
            conic-gradient(from 30deg at 70% 30%, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.18));
        /* Blend to be vivid on dark backgrounds */
        background-blend-mode: screen, screen, screen, soft-light;
    }
}

@keyframes innerBgShift {
    0% {
        background-position:
            0% 0%,
            100% 100%,
            80% 20%,
            50% 50%,
            0% 0%;
    }
    25% {
        background-position:
            22% 10%,
            85% 78%,
            70% 25%,
            48% 52%,
            20% 8%;
    }
    50% {
        background-position:
            38% 18%,
            68% 88%,
            60% 35%,
            52% 48%,
            40% 16%;
    }
    75% {
        background-position:
            18% 6%,
            78% 70%,
            90% 18%,
            47% 55%,
            60% 12%;
    }
    100% {
        background-position:
            0% 0%,
            100% 100%,
            80% 20%,
            50% 50%,
            0% 0%;
    }
}

@keyframes innerBgPulse {
    0% {
        background-size:
            260% 260%,
            240% 240%,
            220% 220%,
            180% 180%,
            140% 140%;
    }
    50% {
        background-size:
            300% 300%,
            270% 270%,
            245% 245%,
            200% 200%,
            160% 160%;
    }
    100% {
        background-size:
            260% 260%,
            240% 240%,
            220% 220%,
            180% 180%,
            140% 140%;
    }
}

/* Specific reduced-motion handling for background animation
   (global reduced-motion rules also apply) */
@media (prefers-reduced-motion: reduce) {
    .inner-page {
        animation: none;
        background-position: 0% 0%, 100% 100%, 100% 0%;
    }
}

.high-contrast a {
    color: #000000;
    font-weight: bold;
}

.high-contrast .nav-link:hover,
.high-contrast .nav-link:focus {
    background-color: #000000;
    color: #ffffff;
}

/* Keyboard navigation support */
.keyboard-navigation *:focus {
    outline: var(--focus-ring-width) solid var(--primary-light) !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Remove focus outline/border on navigation items */
header .desktop-nav a:focus,
.mobile-nav a:focus,
.desktop-nav-group-toggle:focus,
.mobile-nav-group-toggle:focus,
.nav-link:focus,
.desktop-nav-link:focus,
.mobile-nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Override global keyboard-navigation focus ring for nav elements */
.keyboard-navigation header .desktop-nav a:focus,
.keyboard-navigation .mobile-nav a:focus,
.keyboard-navigation .desktop-nav-group-toggle:focus,
.keyboard-navigation .mobile-nav-group-toggle:focus,
.keyboard-navigation .nav-link:focus,
.keyboard-navigation .desktop-nav-link:focus,
.keyboard-navigation .mobile-nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

.desktop-nav-group {
    position: relative;
}
.desktop-nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--gray-700);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.desktop-nav-group-toggle:hover,
.desktop-nav-group-toggle:focus {
    background: var(--gray-50);
    color: var(--primary);
}

.desktop-nav-group-title {
    font-weight: 600;
}

.desktop-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.desktop-submenu.hidden {
    display: none;
}

.desktop-submenu li {
    border-top: 1px solid var(--gray-100);
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s ease;
}

.desktop-nav-group-toggle[aria-expanded="true"] .caret {
    transform: rotate(180deg);
}

/* Mobile multilevel nav */

.mobile-nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--gray-700);
    font-weight: 600;
    text-align: left;
}

.mobile-nav-group-title {
    font-weight: 600;
}

.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-submenu.hidden {
    display: none;
}

.mobile-submenu .mobile-nav-link {
    padding-left: calc(var(--spacing-md) * 2);
}

.mobile-nav-group-toggle[aria-expanded="true"] .caret {
    transform: rotate(180deg);
}

@media (prefers-color-scheme: dark) {
    .desktop-nav-group-toggle {
        color: #ffffff !important;
    }

    .desktop-nav-group-toggle[aria-expanded="true"] {
        color: #ffffff !important;
        background: rgba(255,255,255,0.10);
    }

    .desktop-submenu li {
        border-top-color: var(--border-color);
    }

    .mobile-nav-group-toggle {
        color: #ffffff !important;
    }

    .mobile-nav-group-toggle[aria-expanded="true"] {
        color: #ffffff !important;
        background: rgba(255,255,255,0.10);
    }
}

/* Homepage hero rectangle with flowing diagonal gradients (edge fade) */
.home-hero {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    /* Rectangle banner */
    min-height: 320px;
    margin-bottom: var(--spacing-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.08), rgba(16, 185, 129, 0.06));
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
    -webkit-mask-image:
        radial-gradient(closest-side at 50% 50%,
            black 55%, rgba(0,0,0,0.88) 72%, rgba(0,0,0,0.6) 86%, rgba(0,0,0,0.3) 94%, transparent 100%);
    mask-image:
        radial-gradient(closest-side at 50% 50%,
            black 55%, rgba(0,0,0,0.88) 72%, rgba(0,0,0,0.6) 86%, rgba(0,0,0,0.3) 94%, transparent 100%);
    /* Extend to the edges of the parent .content-wrapper by negating its horizontal padding */
    margin-left: calc(-1 * var(--spacing-xl));
    margin-right: calc(-1 * var(--spacing-xl));
    width: calc(100% + (var(--spacing-xl) * 2));
}

.home-hero::before,
.home-hero::after {
    pointer-events: none;
}

/* Layer 1: broad diagonal soft gradient sweep */
.home-hero::before {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 52% 48% 58% 46% / 60% 52% 55% 45%;
    background:
        radial-gradient(closest-side at 50% 50%,
            rgba(255,255,255,0.95) 0%,
            rgba(147,197,253,0.75) 14%,
            rgba(59,130,246,0.35) 28%,
            rgba(59,130,246,0.12) 44%,
            transparent 56%),
        radial-gradient(closest-side at 50% 50%,
            transparent 34%,
            rgba(253,186,116,0.48) 48%,
            rgba(249,115,22,0.30) 64%,
            rgba(249,115,22,0.12) 78%,
            transparent 88%),
        conic-gradient(from 0deg at 50% 50%,
            rgba(255,255,255,0.22) 0deg,
            transparent 18deg 36deg,
            rgba(255,255,255,0.22) 54deg,
            transparent 72deg 90deg,
            rgba(255,255,255,0.20) 108deg,
            transparent 126deg 144deg,
            rgba(255,255,255,0.20) 162deg,
            transparent 180deg 360deg);
    background-blend-mode: screen;
    filter: blur(18px) saturate(140%);
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,1) 46%, rgba(0,0,0,0.9) 66%, rgba(0,0,0,0.6) 84%, rgba(0,0,0,0.28) 96%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,1) 46%, rgba(0,0,0,0.9) 66%, rgba(0,0,0,0.6) 84%, rgba(0,0,0,0.28) 96%, transparent 100%);
    animation: starRotate 48s linear infinite, starPulse 8s ease-in-out infinite, starMorph 20s ease-in-out infinite alternate;
    z-index: 1;
}
 
/* Layer 2: subtle moving light bands */
.home-hero::after {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 56% 44% 52% 48% / 42% 60% 52% 58%;
    background:
        radial-gradient(closest-side at 50% 50%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 64%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.20) 0deg 6deg, rgba(255,255,255,0.00) 6deg 18deg),
        repeating-conic-gradient(from 12deg at 50% 50%, rgba(59,130,246,0.16) 0deg 4deg, rgba(59,130,246,0.00) 4deg 22deg);
    background-blend-mode: screen;
    filter: blur(22px) saturate(150%);
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,1) 38%, rgba(0,0,0,0.88) 62%, rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.24) 98%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,1) 38%, rgba(0,0,0,0.88) 62%, rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.24) 98%, transparent 100%);
    animation: raysRotate 60s linear infinite, raysPulse 10s ease-in-out infinite;
    z-index: 2;
}
 
.home-hero-title {
    position: relative;
    z-index: 3;
    text-align: center;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--gray-900);
    text-wrap: balance;
    margin: 0;
 }
 
 @media (min-width: 768px) {
    .home-hero {
        min-height: 420px;
    }

    .home-hero-title {
        font-size: 2.75rem;
    }
}

/* Match mobile .content-wrapper horizontal padding so hero bleeds correctly */
@media (max-width: 768px) {
    .content-wrapper > .home-hero {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        width: calc(100% + (var(--spacing-md) * 2));
    }
 }
 
@keyframes starRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes raysRotate {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes starPulse {
    0%, 100% {
        opacity: 0.85;
        filter: blur(16px) saturate(135%);
    }

    50% {
        opacity: 1;
        filter: blur(20px) saturate(165%);
    }
}

@keyframes raysPulse {
    0%, 100% {
        opacity: 0.45;
        filter: blur(18px) saturate(140%);
    }

    50% {
        opacity: 0.65;
        filter: blur(24px) saturate(160%);
    }
}

@keyframes starMorph {
    0% {
        border-radius: 52% 48% 58% 46% / 60% 52% 55% 45%;
    }

    33% {
        border-radius: 58% 42% 54% 46% / 55% 58% 47% 40%;
    }

    66% {
        border-radius: 50% 50% 60% 40% / 62% 48% 58% 42%;
    }

    100% {
        border-radius: 55% 45% 52% 48% / 58% 50% 52% 40%;
    }
}
 
@media (prefers-reduced-motion: reduce) {
    .home-hero::before,
    .home-hero::after {
        animation: none;
    }
}

@media (prefers-color-scheme: dark) {
    .home-hero {
        border-color: var(--border-color);
        background: rgba(31, 41, 55, 0.6);
    }

    .home-hero-title {
        color: var(--gray-800);
    }
}

/* Form styling for accessibility and dark mode compatibility */
.form-input, .form-textarea, .form-select {
    background-color: var(--white);
    color: var(--gray-900);
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

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

.form-button {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%;
    min-height: 48px;
}

.form-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

.form-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.form-button:active {
    transform: translateY(0);
}

/* Label styling */
.form-label {
    color: var(--gray-900);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

/* Error styling */
.form-error {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.form-required {
    color: var(--error);
}

/* Dark mode form adjustments */
@media (prefers-color-scheme: dark) {
    .form-input, .form-textarea, .form-select {
        background-color: var(--gray-800);
        color: var(--gray-100);
        border-color: var(--gray-600);
    }

    .form-input:focus, .form-textarea:focus, .form-select:focus {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .form-button:focus {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
    }

    .form-label {
        color: var(--gray-100);
    }
}

.dark .form-input, .dark .form-textarea, .dark .form-select {
    background-color: var(--gray-800);
    color: var(--gray-100);
    border-color: var(--gray-600);
}

.dark .form-input:focus, .dark .form-textarea:focus, .dark .form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark .form-button:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

.dark .form-label {
    color: #ffffff !important;
}

.dark .form-button {
    color: #ffffff !important;
}