/*
   CyberPools Website - Main Stylesheet
   This file contains all the styles for the CyberPools website,
   organized by section with responsive adjustments at the end.
   Includes dark theme support while preserving original layouts.
   Enhanced for ADA compliance with improved contrast ratios and focus states.
*/

/* ======= VARIABLES ======= */
:root {
    --primary: #2454a9;      /* Darkened primary blue for better contrast */
    --primary-light: #3182ce;
    --secondary: #5a6779;    /* Darkened secondary gray for better contrast */
    --accent: #2471cb;       /* Darkened accent blue for better contrast */
    --light: #f7fafc;        /* Light background */
    --dark: #2d3748;         /* Dark text color */
    --success: #2e8555;      /* Darkened success green for better contrast */
    --danger: #d32f2f;       /* Darkened danger red for better contrast */
    --warning: #f59f00;      /* Darkened warning yellow for better contrast */
    
    /* Theme variables */
    --background: #f7fafc;
    --text-color: #2d3748;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --border-color: #edf2f7;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --testimonial-bg: #ffffff;
    --footer-bg: #2d3748;
    --footer-text: #ffffff;
    --footer-link: #cbd5e0;  /* Lightened for better contrast */
    --input-bg: #ffffff;
    --input-text: #2d3748;
    --input-border: #a0aec0;  /* Darkened for better visibility */
    --hover-bg: #f7fafc;
    --services-bg: #f8fafc;
    --contact-bg: #f8fafc;
    --error-color: #d32f2f;
    --focus-outline: #2454a9;
    --focus-outline-width: 3px;
}

/* Dark theme variables */
[data-theme="dark"] {
    --primary: #63b3ed;      /* Lightened primary for dark mode */
    --primary-light: #90cdf4;
    --secondary: #cbd5e0;    /* Lightened secondary for dark mode */
    --background: #1a202c;
    --text-color: #f7fafc;
    --card-bg: #2d3748;
    --header-bg: #1a202c;
    --border-color: #4a5568;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --testimonial-bg: #2d3748;
    --footer-bg: #171923;
    --footer-text: #f7fafc;
    --footer-link: #e2e8f0; /* Lightened for better contrast */
    --input-bg: #2d3748;
    --input-text: #f7fafc;
    --input-border: #718096; /* Lightened for better visibility */
    --hover-bg: #2d3748;
    --services-bg: #171923;
    --contact-bg: #171923;
    --error-color: #f56565;
    --focus-outline: #90cdf4;
}

/* ======= GLOBAL STYLES ======= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background);
    overflow-x: hidden;
    width: 100%;
    transition: all 0.3s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Common section styling */
.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: var(--secondary);
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ======= ACCESSIBILITY FEATURES ======= */
/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px;
    z-index: 9999;
    transition: top 0.3s;
    text-decoration: none;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

.skip-link:focus {
    top: 0;
    clip: auto;
}

/* Improved focus states */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: var(--focus-outline-width) solid var(--focus-outline);
    outline-offset: 2px;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Enhanced form validation feedback */
.error-message {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Form element with error */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--error-color);
}

/* Accessibility badge */
.accessibility-badge {
    margin-top: 1rem;
    font-weight: bold;
}

/* Accessibility section */
.accessibility {
    padding: 3rem 0;
    background-color: var(--card-bg);
    margin-top: 2rem;
}

.accessibility-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.accessibility-content p {
    margin-bottom: 1rem;
}

/* Table responsiveness */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* ======= BUTTON STYLES ======= */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-light);
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* ======= HEADER & NAVIGATION ======= */
header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-icon {
    margin-right: 10px;
    color: var(--primary);
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
    padding: 0.5rem;
    border-radius: 4px;
}

nav ul li a:hover {
    color: var(--primary);
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s;
    padding: 0;
    position: relative;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sun-icon, .moon-icon {
    position: absolute;
    transition: opacity 0.3s, transform 0.5s;
}

.sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.moon-icon {
    opacity: 1;
    transform: scale(1);
}

[data-theme="dark"] .sun-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 101;
    transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when menu is open */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ======= HERO SECTION ======= */
.hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--background) 0%, var(--card-bg) 100%);
    text-align: center;
    width: 100%;
    transition: background 0.3s ease;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--secondary);
}

.hero .btn-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ======= ABOUT SECTION ======= */
.about {
    padding: 5rem 0;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Single-column about content */
.about-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.about-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.about-image-container {
    margin: 3rem 0;
    text-align: center;
}

.about-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px var(--shadow-color);
    display: inline-block;
}

/* Testimonial styling */
.testimonial {
    background-color: var(--testimonial-bg);
    border-left: 4px solid var(--primary);
    padding: 2rem;
    margin: 3rem 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px var(--shadow-color);
    text-align: left;
    transition: background-color 0.3s ease;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial-author {
    font-weight: 600;
    color: var(--primary);
}

/* ======= FEATURES SECTION ======= */
/* 3-2 Layout for features */
.features-heading {
    margin-top: 4rem;
    margin-bottom: 2rem;
    color: var(--primary);
    text-align: center;
    font-size: 1.8rem;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.features-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.features-row-top {
    /* For the top row with 3 items */
    margin-bottom: 1rem;
}

.features-row-top .feature {
    /* 3 cards in top row */
    flex: 1 1 calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
    min-width: 250px;
}

.features-row-bottom .feature {
    /* 2 cards in bottom row */
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    min-width: 280px;
}

.feature {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: transform 0.3s, background-color 0.3s;
    text-align: center;
    width: 100%;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.feature h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

/* ======= SERVICES SECTION ======= */
.services {
    padding: 5rem 0;
    background-color: var(--services-bg);
    text-align: center;
    transition: background-color 0.3s ease;
}

.services-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: background-color 0.3s ease;
}

.services-table th, .services-table td {
    padding: 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.services-table th {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
}

.services-table tr:last-child td {
    border-bottom: none;
}

.services-table tr:hover {
    background-color: var(--hover-bg);
}

/* Adding a caption for screen readers */
.services-table caption.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ======= TEAM SECTION ======= */
.team {
    padding: 5rem 0;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* 3-2 Layout for team members */
.team-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.team-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.team-row-top {
    /* For the top row with 3 team members */
    margin-bottom: 1rem;
}

/* Circular team member photos */
.team-member {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: transform 0.3s, background-color 0.3s;
    width: 100%;
    max-width: 350px;
    padding-top: 30px; /* Add padding at the top */
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-photo-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 25px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: #f5f5f5;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.team-member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Focus on face area */
}

.team-member-info {
    padding: 1.5rem;
    text-align: center;
}

.team-member-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.team-member-role {
    color: var(--secondary);
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Certifications styling */
.certifications {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.certifications h4 {
    margin-bottom: 0.5rem;
    color: var(--secondary);
}

.certification-list {
    list-style-position: inside;
    text-align: left;
}

/* ======= FORM SUCCESS & ERROR FEEDBACK ======= */
.form-success-message {
    margin-top: 1rem;
    color: var(--success);
    font-weight: 500;
    text-align: center;
}

.form-error-message {
    margin-top: 1rem;
    color: var(--danger);
    font-weight: 500;
    text-align: center;
}

/* ======= CONTACT SECTION ======= */
.contact {
    padding: 5rem 0;
    background-color: var(--contact-bg);
    text-align: center;
    transition: background-color 0.3s ease;
}

.contact-form {
    background-color: var(--card-bg);
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    max-width: 600px;
    margin: 0 auto;
    transition: background-color 0.3s ease;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
}

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

/* ======= FOOTER ======= */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3rem 0;
    text-align: center;
    transition: background-color 0.3s ease;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
}

.footer-heading {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--light);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: flex-start;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4a5568;
    color: white;
    transition: background-color 0.3s;
}

.social-link:hover {
    background-color: var(--primary);
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #4a5568;
    text-align: center;
    color: var(--footer-link);
}

/* ======= RESPONSIVE STYLES ======= */
/* Large screens (992px and below) */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.25rem;
    }
    
    .feature {
        max-width: 280px;
        flex: 1 1 280px;
    }
    
    .team-member {
        max-width: 300px;
    }
}

/* Medium screens (768px and below) */
@media (max-width: 768px) {
    /* Header adjustments - compact mobile header */
    header {
        box-shadow: 0 1px 4px var(--shadow-color);
    }

    .nav-container {
        padding: 0.5rem 1rem;
        position: relative;
    }

    /* Smaller logo on mobile */
    .header-logo {
        height: 35px !important;
    }

    /* Show hamburger menu button */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile navigation */
    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--header-bg);
        box-shadow: -2px 0 10px var(--shadow-color);
        transition: right 0.3s ease;
        z-index: 100;
        overflow-y: auto;
    }

    nav.mobile-menu-open {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        margin-top: 0;
    }

    nav ul li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    nav ul li a {
        display: block;
        padding: 1rem 0;
        width: 100%;
        font-size: 1.1rem;
    }

    /* Theme toggle in mobile menu */
    nav ul li .theme-toggle {
        margin: 1rem 0;
        width: 40px;
        height: 40px;
    }

    /* Overlay for mobile menu */
    body.mobile-menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }
    
    /* Hero adjustments */
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    /* Features adjustments */
    .features-container {
        padding: 0 1rem;
        gap: 1rem;
    }

    .features-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .feature,
    .features-row-top .feature,
    .features-row-bottom .feature {
        max-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
        flex: 1 1 100%;
        min-width: auto;
        padding: 1.5rem;
        margin: 0 1rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px var(--shadow-color);
    }

    .feature h3,
    .feature h4 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .feature p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .feature-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    /* Team adjustments */
    .team-row {
        flex-direction: column;
        align-items: center;
    }
    
    .team-member {
        max-width: 100%;
        width: 100%;
    }
    
    .team-photo-container {
        width: 180px;
        height: 180px;
    }
    
    /* Form adjustments */
    .contact-form {
        padding: 2rem;
    }
    
    /* Footer adjustments for tablet */
    footer {
        padding: 2rem 0;
    }

    footer img {
        width: 120px !important;
        margin-bottom: 10px !important;
    }

    .footer-grid {
        gap: 1.5rem;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-heading {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .footer-links li {
        margin-bottom: 0.5rem;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1rem;
    }

    /* Theme toggle placement for mobile */
    .theme-toggle {
        margin: 0.5rem auto;
    }
}

/* Small screens (576px and below) */
@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    /* Button full width on small screens */
    .btn {
        width: 100%;
        margin-bottom: 1rem;
    }

    .hero .btn-container {
        flex-direction: column;
    }

    /* Even more compact features on very small screens */
    .features-container {
        padding: 0 0.75rem;
        gap: 0.75rem;
    }

    .features-row {
        gap: 0.75rem;
    }

    .feature,
    .features-row-top .feature,
    .features-row-bottom .feature {
        max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
        min-width: auto;
        padding: 1.25rem;
        margin: 0;
        border-radius: 10px;
        box-shadow: 0 1px 4px var(--shadow-color);
    }

    .feature h3,
    .feature h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .feature p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .feature-icon {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* Tighter spacing for team stats */
    .team-container {
        gap: 1.5rem;
    }
    
    /* Team photo adjustments */
    .team-photo-container {
        width: 160px;
        height: 160px;
    }
    
    /* Services table: card-style layout for mobile */
    .services-table {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    .services-table thead {
        display: none;
    }

    .services-table tbody {
        display: block;
    }

    .services-table tr {
        display: block;
        margin-bottom: 1rem;
        background-color: var(--card-bg);
        border-radius: 8px;
        box-shadow: 0 2px 8px var(--shadow-color);
        border: none;
        overflow: hidden;
    }

    .services-table tr:hover {
        background-color: var(--card-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--shadow-color);
        transition: all 0.3s ease;
    }

    .services-table td {
        display: block;
        text-align: left;
        padding: 1rem 1.25rem;
        border: none;
    }

    .services-table td:first-child {
        background-color: var(--primary);
        color: white;
        font-weight: 600;
        font-size: 1.05rem;
        padding: 1rem 1.25rem;
    }

    .services-table td:last-child {
        padding: 1.25rem;
        line-height: 1.6;
    }

    /* Improve mobile table readability */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Footer adjustments for mobile */
    footer {
        padding: 1.5rem 0;
    }

    footer img {
        width: 100px !important;
        margin-bottom: 8px !important;
    }

    footer p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .footer-grid {
        gap: 1.25rem;
    }

    .footer-heading {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .footer-links {
        font-size: 0.9rem;
    }

    .footer-links li {
        margin-bottom: 0.4rem;
    }

    .social-links {
        justify-content: center;
        margin-top: 0.75rem;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }

    .footer-bottom {
        margin-top: 1.5rem;
        padding-top: 0.75rem;
        font-size: 0.85rem;
    }

    .accessibility-badge {
        font-size: 0.8rem;
    }
}

/* ======= RISK ASSESSMENT PAGE STYLES ======= */

/* Breadcrumb Navigation */
.breadcrumb-nav {
    background-color: var(--background);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li + li::before {
    content: "/";
    padding: 0 0.75rem;
    color: var(--secondary);
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Hero Secondary (smaller variant) */
.hero-secondary {
    padding: 3rem 0 2rem;
    text-align: center;
}

.hero-secondary h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Jump Links Navigation */
.jump-links {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.jump-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.jump-links li {
    display: inline;
}

.jump-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.jump-links a:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 84, 169, 0.2);
}

/* Quick Reference Section */
.quick-reference {
    background-color: var(--card-bg);
    padding: 3rem 0;
}

.reference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.reference-card {
    background-color: var(--background);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.reference-card h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.badge-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.badge-list span {
    font-size: 0.95rem;
    color: var(--text-color);
}

/* Grade Badges */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
}

.grade-a {
    background-color: #2e8555;
}

.grade-b {
    background-color: #3182ce;
}

.grade-c {
    background-color: #f59f00;
}

.grade-d {
    background-color: #ff8c00;
}

.grade-f {
    background-color: #d32f2f;
}

/* Risk Level Badges */
.risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    color: white;
    min-width: 100px;
}

.risk-high {
    background-color: #d32f2f;
}

.risk-moderate {
    background-color: #ff8c00;
}

.risk-low {
    background-color: #3182ce;
}

/* Control Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.3rem;
    border: 2px solid;
}

.status-fully {
    color: #2e8555;
    border-color: #2e8555;
    background-color: rgba(46, 133, 85, 0.1);
}

.status-partially {
    color: #f59f00;
    border-color: #f59f00;
    background-color: rgba(245, 159, 0, 0.1);
}

.status-not {
    color: #d32f2f;
    border-color: #d32f2f;
    background-color: rgba(211, 47, 47, 0.1);
}

.status-na {
    color: #718096;
    border-color: #718096;
    background-color: rgba(113, 128, 150, 0.1);
}

/* Year Badge */
.badge-year {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background-color: var(--primary);
    color: white;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 1rem;
    vertical-align: middle;
}

/* Notice Banners */
.notice-banner {
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left: 4px solid;
}

.notice-important {
    background-color: rgba(245, 159, 0, 0.1);
    border-color: #f59f00;
    color: var(--text-color);
}

.notice-info {
    background-color: rgba(49, 130, 206, 0.1);
    border-color: #3182ce;
    color: var(--text-color);
}

.notice-success {
    background-color: rgba(46, 133, 85, 0.1);
    border-color: #2e8555;
    color: var(--text-color);
}

/* Section Backgrounds */
.section-white {
    background-color: var(--card-bg);
    padding: 3rem 0;
}

.section-gray {
    background-color: var(--background);
    padding: 3rem 0;
}

.content-section {
    margin-top: 2rem;
}

.content-section h3 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.content-section h4 {
    color: var(--text-color);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.content-section p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* Example Box */
.example-box {
    background-color: var(--background);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.scenario-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.scenario-list li {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--card-bg);
    border-radius: 6px;
    border-left: 4px solid var(--primary);
}

.scenario-list li p {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    color: var(--secondary);
}

/* Feature Number */
.feature-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Category Cards (Expandable) */
.category-cards {
    margin-top: 2rem;
}

.category-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.category-card:hover {
    box-shadow: 0 4px 12px var(--shadow-color);
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    background-color: var(--background);
    transition: background-color 0.2s ease;
}

.category-card-header:hover {
    background-color: var(--hover-bg);
}

.category-card-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.2rem;
}

.category-card-header .expand-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.category-card.expanded .expand-icon {
    transform: rotate(45deg);
}

.category-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.category-card-content > * {
    padding: 0 1.5rem 1.5rem;
}

.category-card-content p {
    margin-bottom: 1rem;
}

.category-card-content strong {
    color: var(--primary);
}

/* Risk Explanation */
.risk-explanation {
    margin-top: 2rem;
}

.simple-list {
    list-style: disc;
    padding-left: 2rem;
    margin: 1rem 0;
}

.simple-list li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Tier System Styles */
.tier-pyramid {
    margin: 2rem auto;
    max-width: 600px;
}

.tier-details {
    margin-top: 2rem;
}

.tier-box {
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
}

.tier-1a {
    background-color: rgba(211, 47, 47, 0.1);
    border-color: #d32f2f;
}

.tier-1b {
    background-color: rgba(255, 140, 0, 0.1);
    border-color: #ff8c00;
}

.tier-comp {
    background-color: rgba(49, 130, 206, 0.1);
    border-color: #3182ce;
}

.tier-box h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.tier-box p {
    margin-bottom: 0.75rem;
}

.tier-box ul {
    list-style: disc;
    padding-left: 2rem;
    margin-top: 0.5rem;
}

.tier-box ul li {
    margin-bottom: 0.5rem;
}

/* Steps Timeline */
.steps-timeline {
    margin-top: 2rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content h3 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.step-content p {
    margin: 0;
    color: var(--text-color);
}

/* FAQ Accordion */
.faq-list {
    margin-top: 2rem;
}

.faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    background-color: var(--background);
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background-color: var(--hover-bg);
}

.faq-question h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-question .expand-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item.expanded .expand-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer > * {
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    margin-bottom: 1rem;
}

.faq-answer ul {
    list-style: disc;
    padding-left: 2rem;
    margin: 0.5rem 0;
}

.faq-answer ul li {
    margin-bottom: 0.5rem;
}

/* Active navigation link */
nav a.active {
    color: var(--primary-light);
    font-weight: 600;
}

/* ======= RESPONSIVE ADJUSTMENTS FOR RISK ASSESSMENT PAGE ======= */

@media (max-width: 768px) {
    .reference-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .jump-links ul {
        flex-direction: column;
        align-items: stretch;
    }

    .jump-links a {
        text-align: center;
    }

    .hero-secondary h1 {
        font-size: 2rem;
    }

    .badge-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .features-row {
        grid-template-columns: 1fr;
    }

    .category-card-header h3 {
        font-size: 1rem;
    }

    .step-item {
        flex-direction: column;
        gap: 1rem;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .tier-pyramid {
        max-width: 100%;
    }

    .tier-pyramid svg {
        height: 250px;
    }

    .faq-question h3 {
        font-size: 1rem;
    }
}

/* ======= UX/UI IMPROVEMENTS ======= */

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--border-color);
    z-index: 1000;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    width: 0%;
    transition: width 0.1s ease;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-light);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* Enhanced Section Visual Hierarchy */
main section {
    padding: 5rem 0;
    transition: background-color 0.3s ease;
}

main section:nth-child(even) {
    background-color: var(--background);
}

main section:nth-child(odd) {
    background-color: var(--card-bg);
}

.section-title {
    font-size: 2.75rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--text-color);
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--secondary);
    margin-bottom: 2.5rem;
}

/* 3. Enhanced Accordion Affordances */
.category-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.category-card:hover {
    box-shadow: 0 6px 16px var(--shadow-color);
    transform: translateY(-2px);
}

.category-card:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    background-color: var(--background);
    transition: all 0.2s ease;
}

.category-card-header:hover {
    background-color: var(--hover-bg);
}

.category-card-header:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.category-card-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.2rem;
}

.category-card-header .expand-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card.expanded .expand-icon {
    transform: rotate(45deg);
}

.category-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--card-bg);
}

.category-card-content > * {
    padding: 0.5rem 2rem 1.5rem;
}

/* FAQ Accordion - Same improvements */
.faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 6px 16px var(--shadow-color);
    transform: translateY(-2px);
}

.faq-item:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    background-color: var(--background);
    transition: all 0.2s ease;
}

.faq-question:hover {
    background-color: var(--hover-bg);
}

.faq-question:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.faq-question .expand-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-item.expanded .expand-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--card-bg);
}

.faq-answer > * {
    padding: 1.5rem 2rem 1.5rem;
}

/* 4. Enhanced Quick Reference Cards */
.reference-card {
    background-color: var(--background);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.reference-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-left-color: var(--primary-light);
}

/* Mobile Responsive Adjustments */
@media (max-width: 1024px) {
    main section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .reference-card {
        padding: 1.5rem;
    }

    .category-card-header,
    .faq-question {
        padding: 1rem 1.5rem;
    }

    .category-card-content > *,
    .faq-answer > * {
        padding: 0 1.5rem 1rem;
    }
}