/* ===================================================================
        PROGRESSIVE DISCLOSURE WIDGET - CSS DOCUMENTATION
        ===================================================================

        This CSS implements a responsive progressive disclosure pattern for
        navigation. The widget behaves differently based on viewport:

        DESKTOP (>768px): Always expanded, horizontal layout
        - Navigation is always visible (space permits)
        - Summary acts as a header/status bar
        - Toggle functionality is disabled via pointer-events: none

        MOBILE (≤768px): Collapsible, vertical layout
        - Navigation collapses to save precious screen space
        - Summary acts as a clickable toggle button
        - Full expand/collapse functionality enabled

        SEMANTIC FOUNDATION:
        Uses <details>/<summary> elements for:
        - Native keyboard support (Enter/Space to toggle)
        - Screen reader compatibility
        - Works without JavaScript
        - Progressive enhancement ready

        =================================================================== */

/* ===================================================================
        CSS CUSTOM PROPERTIES - DESIGN SYSTEM
        ===================================================================

        University of Southampton brand colours organised for consistent
        application across the interface. Properties are named semantically
        to support maintainability and accessibility compliance.

        Brand colours chosen for sufficient contrast with both light and
        dark backgrounds, ensuring WCAG 2.2 AA compliance throughout.

        =================================================================== */
:root {
    /* Brand Colours - High contrast with white backgrounds */
    --uni-blue: #005c84; /* Primary university brand colour */
    --rich-black: #00131d; /* Deep black for high contrast */
    --plain-black: #231f20; /* Standard text black */
    --neutral-one: #495961; /* Medium grey for secondary text */
    --prussian: #002e3b; /* Dark blue for emphasis */
    --horizon-four: #d5007f; /* Brand accent pink */
    --horizon-five: #8d3970; /* Brand accent purple */
    /* Light colours - High contrast with dark backgrounds */
    --white: #ffffff; /* Pure white for backgrounds */
    --neutral-two: #758d9a; /* Light grey for borders */
    --neutral-three: #9fb1bd; /* Lighter grey for subtle borders */
    --neutral-four: #e1e8ec; /* Very light grey for section backgrounds */
    --marine-two: #74c9e5; /* Light blue for active states */
    --marine-three: #3cbac6; /* Teal for hover states */
    --marine-four: #b3dbd2; /* Sage green for completed backgrounds */
    --shamrock: #1e8765; /* Green for completion indicators - updated from marine-green */
    --marine-lime: #c1d100; /* Bright green accent */
    --horizon-one: #fcbc00; /* Yellow accent */
    --horizon-two: #ef7d00; /* Orange for focus indicators */
    /* Semantic colour assignments for our progress widget */
    --accessibility-progress-complete: var( --shamrock ); /* Completed steps - better contrast */
    --accessibility-progress-complete-bg: var( --marine-four ); /* Completed background */
    --accessibility-progress-active: var(--uni-blue); /* Current step */
    --accessibility-progress-active-bg: var( --horizon-one ); /* Current background */
    --accessibility-progress-active-hover: var( --marine-three ); /* Current hover state */
    --accessibility-progress-pending: var( --neutral-one ); /* Incomplete steps */
    --accessibility-progress-pending-bg: var( --neutral-four ); /* Incomplete background */
    --accessibility-border-light: var( --neutral-three ); /* General borders */
    --focus-colour: var(--horizon-two); /* Focus indicators */
    --text-dark: var(--plain-black); /* Primary text */
    --text-medium: var(--neutral-one); /* Secondary text */

    --colour-primary: #1a5a96;
    --colour-primary-hover: #0d3a5f;
    --colour-text: #0b0c0c;
    --colour-background: #ffffff;
    --colour-focus: #ffdd00;
    --colour-focus-text: #0b0c0c;
    --colour-border: #b1b4b6;
    --colour-code-bg: #f3f2f1;
    --spacing-unit: 0.5rem;
    --bs-body-bg: #fffdf9;
    --bs-body-color: #00131D;
}
 
/* ===================================================================
        BASE STYLES
        ===================================================================

        Foundation styles establishing consistent box-sizing, typography,
        and colour scheme. Uses system font stack for optimal performance
        and native appearance across platforms.

        =================================================================== */
* {
    box-sizing: border-box; /* Consistent box model for predictable layouts */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6; /* Optimal line height for readability */
}


/* ===================================================================
        HEADER STYLES
        ===================================================================

        University branding header with responsive layout adjustments.
        Mobile version simplifies to conserve vertical space.

        =================================================================== */
.header {
    background-color: var(--uni-blue);
    color: var(--white);
    padding: 1rem;
    display: flex; /* Flexible layout for responsive adjustments */
    justify-content: space-between;
    align-items: center;
}

    .header h1 {
        margin: 0;
        font-size: 1.5rem;
    }



/* ===================================================================
        MAIN NAVIGATION STYLES
        ===================================================================

        Site-level navigation with consistent styling and focus management.
        Uses university brand colours and provides clear interactive states.

        =================================================================== */
.main-nav {
    background-color: var(--neutral-four);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--accessibility-border-light);
}

    .main-nav a {
        display: inline-block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        color: var(--text-dark);
        background: var(--white);
        border: 1px solid var(--accessibility-border-light);
        margin-right: 0.5rem;
    }

        /*
                        Custom focus styling using box-shadow for better visibility
                        Provides multiple visual layers for users with different visual needs
                    */
        .main-nav a:hover,
        .main-nav a:focus-visible {
            background-color: var(--accessibility-progress-active-bg);
            outline: 2px transparent solid; /* Remove default outline */
            /* Multi-layered focus indicator for maximum visibility */
            box-shadow: 0 0 0 2px white, 0 0 0 4px #002e3b, 0 0 4px 8px white;
        }


/* =====================================================
   1. WCAG 2.2 BASE + REFLOW SAFETY
   ===================================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Media must never cause horizontal scroll */
img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Bootstrap row negative margin fix */
.row {
    margin-left: 0;
    margin-right: 0;
}

.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* =====================================================
   2. ACCESSIBILITY UTILITIES
   ===================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Global focus indicator */
:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 10px;
}

a:hover {
    color: var(--colour-primary-hover);
    text-decoration-thickness: 0.1875rem;
}

a:focus {
    outline: 3px solid var(--colour-focus);
    outline-offset: 0;
    background-color: var(--colour-focus);
    color: var(--colour-focus-text);
    text-decoration: none;
}


/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 1000;
    text-decoration: none;
    font-weight: bold;
}

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

/* =====================================================
   3. HEADER + NAVIGATION
   ===================================================== */
/*
.header {
    background-color: #005c84;
    color: #fff;
    padding: 1rem;
}*/

.header {
    background-color: var(--uni-blue);
    color: var(--white);
    padding: 1rem;
    display: flex; /* Flexible layout for responsive adjustments */
    justify-content: space-between;
    align-items: center;
}

    .header h1 {
        margin: 0;
        font-size: 1.5rem;
    }

.user-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.main-nav {
    background: #f2f2f2;
    padding: 0.5rem 1rem;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.main-nav .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    text-decoration: none;
    color: #333;
    /* Transparent outline is invisible in standard mode but is 
       overridden by the system highlight colour in Forced Colours mode */
    outline: 2px solid transparent;
    /* Three-layer box-shadow: white → dark → white 
       ensures visibility against any adjacent background colour */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #002e3b, 0 0 4px 8px #ffffff;
}
    .main-nav .nav-link:focus {
        outline: 2px solid transparent;
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #002e3b, 0 0 4px 8px #ffffff;
    }

    .main-nav .nav-link:not(:focus-visible) {
        /* Remove for mouse/pointer focus if desired */
        box-shadow: none;
        outline: none;
    } 

    /*.main-nav .nav-link:hover,
    .main-nav .nav-link:focus-visible {
        background-color: #e0e0e0;
    }

    .main-nav .nav-link.active,
    .main-nav .nav-link[aria-current="page"] {
        background-color: #006ee5;
        color: #fff;
        font-weight: 600;
    }*/

/* =====================================================
   4. FOOTER
   ===================================================== */

.site-footer {
    background-color: #f2f2f2;
    color: #333;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    text-align: center;
}

    .site-footer nav ul {
        list-style: none;
        display: flex;
        gap: 1rem;
        justify-content: center;
        padding: 0;
        margin: 0 0 0.5rem 0;
    }

    .site-footer a {
        color: #333;
        text-decoration: underline;
    }

        .site-footer a:hover,
        .site-footer a:focus-visible {
            text-decoration: none;
            outline: 2px solid #000;
        }

/* =====================================================
   5. TABLES (NORMAL + DATATABLES)
   ===================================================== */

table {
    width: 100%;
}

    table:not(.dataTable) th,
    table:not(.dataTable) td {
        padding: 0.5rem 0.75rem;
        vertical-align: middle;
    }

.table-responsive {
    overflow-x: auto;
}

table.dataTable {
    table-layout: fixed;
    min-width: 100%;
}

    table.dataTable th,
    table.dataTable td {
        white-space: normal;
        word-break: break-word;
    }

/* =====================================================
   6. MODALS
   ===================================================== */

.modal-content {
    border-radius: 0.75rem;
    border: none;
}

.modal button:focus-visible {
    box-shadow: 0 0 0 3px rgba(13,110,253,.5);
}

/* =====================================================
   7. OVERLAY
   ===================================================== */

#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   8. RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .nav-list {
        flex-wrap: wrap;
    }
}