/* ==========================================================================
           TABLE OF CONTENTS
           1. CSS Variables (Custom Properties)
           2. Base Styles
           3. Typography
           4. Layout Components
           5. Color Themes
           6. Components
               6.1 Header
               6.2 Navigation (Desktop & Mobile)
               6.3 Hero Section
               6.4 Main Content (Cards, Prose, News)
               6.5 Footer
           7. Utilities
           8. Media Queries
           9. Accessibility
           ========================================================================== */

        /* ==========================================================================
           1. CSS Variables (Custom Properties)
           ========================================================================== */
        :root {
            /* Colors */
            --ias-blue: #003366; /* Deep blue */
            --ias-light-blue: #f0f0f0; /* Light gray for backgrounds */
            --ias-teal: #008080; /* Teal for accents and hover states */
            --ias-gold: #8a6100; /* Darker gold for text, WCAG AA on white */
            --white: #ffffff;
            --black: #000000;
            --gray-100: #f8f9fa; /* Slightly off-white for body background */
            --gray-200: #e9ecef; /* Light gray for borders, dividers */
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd; /* Medium gray for secondary text */
            --gray-600: #6c757d; /* Darker gray for text */
            --gray-700: #495057; /* Even darker gray */
            --gray-800: #343a40; /* Primary text color */
            --gray-900: #212529; /* Very dark gray / soft black */
            --red-600: #dc2626;

            /* Typography */
            --font-primary: 'Lora', Georgia, serif;
            --font-heading: 'Playfair Display', 'Times New Roman', serif;
            --font-size-xs: 0.75rem;   /* 12px */
            --font-size-sm: 0.875rem; /* 14px */
            --font-size-base: 1rem;    /* 16px */
            --font-size-lg: 1.125rem;  /* 18px */
            --font-size-xl: 1.25rem;  /* 20px */
            --font-size-2xl: 1.5rem;  /* 24px */
            --font-size-3xl: 1.875rem; /* 30px */
            --font-size-4xl: 2.25rem; /* 36px */

            /* Spacing Scale (based on 4px grid) */
            --spacing-0: 0;
            --spacing-px: 1px;
            --spacing-0-5: 0.125rem; /* 2px */
            --spacing-1: 0.25rem;   /* 4px */
            --spacing-1-5: 0.375rem; /* 6px */
            --spacing-2: 0.5rem;    /* 8px */
            --spacing-2-5: 0.625rem; /* 10px */
            --spacing-3: 0.75rem;   /* 12px */
            --spacing-3-5: 0.875rem; /* 14px */
            --spacing-4: 1rem;      /* 16px */
            --spacing-5: 1.25rem;   /* 20px */
            --spacing-6: 1.5rem;    /* 24px */
            --spacing-8: 2rem;      /* 32px */
            --spacing-10: 2.5rem;   /* 40px */
            --spacing-12: 3rem;     /* 48px */
            --spacing-16: 4rem;     /* 64px */
            --spacing-20: 5rem;     /* 80px */
            --spacing-24: 6rem;     /* 96px */

            /* Layout */
            --container-max-width: 1200px;
            --border-radius-sm: 0.25rem; /* 4px */
            --border-radius-md: 0.5rem;  /* 8px */
            --border-radius-lg: 1rem;    /* 16px */
            --border-radius-full: 9999px;

            /* Transitions */
            --transition-fast: 0.15s ease-in-out;
            --transition-medium: 0.3s ease-in-out;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-text: 1px 1px 3px rgba(0, 0, 0, 0.3);

            /* Z-index Scale */
            --z-base: 1;
            --z-dropdown: 1000; /* Ensure dropdowns are above other content */
            --z-sticky: 1020;
            --z-fixed: 1030;
            --z-modal-backdrop: 1040;
            --z-modal: 1050;
            --z-tooltip: 1070;
        }

        /* ==========================================================================
           2. Base Styles
           ========================================================================== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            font-size: 100%; /* Base font size for rem calculation */
            line-height: 1.5; /* Default line height */
        }

        body {
            font-family: var(--font-primary);
            color: var(--gray-800);
            background-color: var(--gray-100);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden; /* Prevent horizontal scrollbars */
        }

        img, svg, video, canvas, audio, iframe, embed, object {
            max-width: 100%;
            height: auto;
            display: block;
        }

        button {
            background: none;
            color: inherit;
            border: none;
            padding: 0;
            font: inherit;
            cursor: pointer;
            outline: inherit;
        }

        /* ==========================================================================
           3. Typography
           ========================================================================== */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 700; /* Bolder headings */
            line-height: 1.3; /* Tighter line height for headings */
            margin-bottom: var(--spacing-4); /* Default bottom margin for headings */
            color: var(--ias-blue); /* Default heading color */
        }

        h1 { font-size: var(--font-size-4xl); } /* ~36px */
        h2 { font-size: var(--font-size-3xl); } /* ~30px */
        h3 { font-size: var(--font-size-2xl); } /* ~24px */
        h4 { font-size: var(--font-size-xl); }  /* ~20px */
        h5 { font-size: var(--font-size-lg); }  /* ~18px */
        h6 { font-size: var(--font-size-base); }/* ~16px */

        p {
            margin-bottom: var(--spacing-4); /* Consistent paragraph spacing */
        }

        /* General link styles */
        a {
            color: var(--ias-blue);
            text-decoration: none; /* Remove default underline */
            transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
        }

        /* Add underline back only on hover/focus for general links */
        a:hover, a:focus-visible {
            color: var(--ias-teal);
            text-decoration: underline;
            text-decoration-color: var(--ias-teal);
        }

        /* Ensure text elements inside clickable cards do NOT get underline on hover/focus */
        /* Added more specific selectors and targeted the card link itself */
        .content-card:hover h3,
        .content-card:hover p,
        .content-card:hover span,
        .content-card:focus-visible h3,
        .content-card:focus-visible p,
        .content-card:focus-visible span,
        .event-card:hover h3,
        .event-card:hover p,
        .event-card:focus-visible h3,
        .event-card:focus-visible p {
             text-decoration: none !important; /* Use !important to override potential inherited styles */
        }

         /* Ensure the card link itself doesn't get an underline */
         .content-card:hover,
         .content-card:focus-visible,
         .event-card:hover,
         .event-card:focus-visible {
             text-decoration: none !important;
         }


         /* Re-add underline for specific elements inside if needed, like 'Apply now' span */
        .content-card span.text-ias-teal:hover,
        .content-card span.text-ias-teal:focus-visible {
            text-decoration: underline !important; /* Use !important to ensure it applies */
        }


        /* ==========================================================================
           4. Layout Components
           ========================================================================== */
        .container {
            width: 100%;
            max-width: var(--container-max-width);
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--spacing-4);  /* Default horizontal padding */
            padding-right: var(--spacing-4);
        }

        /* Grid utilities (simple version, can be expanded) */
        .grid { display: grid; }
        .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
        .gap-8 { gap: var(--spacing-8); }


        /* ==========================================================================
           5. Color Themes & Backgrounds
           ========================================================================== */
        .ias-blue-bg {
            background-color: var(--ias-blue);
            color: var(--white);
        }
        .ias-blue-bg a { color: var(--gray-200); } /* Lighter links on dark blue bg */
        .ias-blue-bg a:hover, .ias-blue-bg a:focus-visible { color: var(--white); text-decoration-color: var(--white); }


        .ias-light-blue-bg {
            background-color: var(--ias-light-blue);
            color: var(--gray-800);
        }

        .ias-teal-bg {
            background-color: var(--ias-teal);
            color: var(--white);
        }
        .ias-teal-bg:hover { background-color: #006666; } /* Darken teal on hover for buttons */


        .ias-gold-text { color: var(--ias-gold); }

        /* ==========================================================================
           6. Components
           ========================================================================== */

        /* --------------------------------------------------------------------------
           6.1 Header
           -------------------------------------------------------------------------- */
        .site-header {
            background-color: var(--white);
            color: var(--gray-800);
            padding: var(--spacing-5) 0;
            position: sticky;
            top: 0;
            z-index: var(--z-sticky);
            box-shadow: var(--shadow-md);
        }

        .site-header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .site-branding {
            display: flex;
            align-items: center;
            gap: var(--spacing-3);
        }

        .site-logo-link {
             display: flex;
             align-items: center;
             text-decoration: none;
             color: inherit;
        }
        .site-logo-link:hover, .site-logo-link:focus-visible {
            text-decoration: none;
            opacity: 0.9;
        }

        .site-logo-img {
            width: var(--spacing-12);
            height: var(--spacing-12);
            border-radius: var(--border-radius-full);
            background-color: var(--white);
            padding: var(--spacing-0-5);
        }

        .site-title {
            font-size: var(--font-size-xl);
            font-weight: 700;
            white-space: nowrap;
        }

        /* Style for the university name in the header */
        .university-name {
            font-size: var(--font-size-sm); /* Slightly smaller font size */
            font-weight: normal; /* Less bold than department name */
            color: var(--gray-700); /* Slightly muted color */
            margin-bottom: 0; /* Remove default paragraph margin */
            line-height: 1.2; /* Adjust line height */
        }

        /* Style for the university name link */
        .university-name-link {
            color: inherit; /* Inherit color from parent (.university-name) */
            text-decoration: none; /* Remove default underline */
        }
         .university-name-link:hover,
         .university-name-link:focus-visible {
             text-decoration: underline; /* Add underline on hover/focus */
             text-decoration-color: var(--gray-700); /* Underline color matches text */
         }


        .dept-title {
            font-size: var(--font-size-lg);
            white-space: nowrap;
            color: var(--ias-blue);
            margin-top: 0; /* Remove default paragraph margin */
            line-height: 1.2; /* Adjust line height */
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: var(--spacing-3);
        }

        /* Search Form in Header */
        /* Removed search form styles as the form is removed */


        /* --------------------------------------------------------------------------
           6.2 Navigation (Desktop & Mobile)
           -------------------------------------------------------------------------- */

        /* Desktop Navigation */
        .main-nav {
             /* Allow flex to manage width, but control inner spacing */
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            gap: var(--spacing-2); /* Further reduced gap for a smaller navigation bar */
            padding: 0;
            margin: 0;
        }

        .main-nav a { /* Applies to top-level links */
            color: var(--ias-blue);
            text-decoration: none;
            padding: var(--spacing-2) var(--spacing-3);
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-sm);
            font-weight: 500;
            display: block;
            white-space: nowrap;
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .main-nav a:hover,
        .main-nav a:focus-visible,
        .main-nav li.relative.dropdown > a[aria-expanded="true"] {
            background-color: var(--ias-light-blue);
            color: var(--ias-blue);
            text-decoration: none;
        }

        /* Desktop Dropdown Menu */
        .main-nav .dropdown-menu {
            position: absolute;
            left: 0;
            /* Adjusted top to remove the gap */
            top: 100%;
            background-color: var(--white);
            color: var(--gray-800);
            min-width: 220px;
            z-index: var(--z-dropdown);
            border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
            padding: var(--spacing-2) 0;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(var(--spacing-2));
            transition: opacity var(--transition-medium) ease-out,
                        visibility var(--transition-medium) ease-out,
                        transform var(--transition-medium) ease-out;
            pointer-events: none; /* Initially not clickable */
            display: block; /* Keep block display for vertical items */
        }

        /* Show dropdown on hover of the parent li */
        .main-nav .dropdown:hover .dropdown-menu,
        .main-nav .dropdown:focus-within .dropdown-menu { /* Also show on focus-within for accessibility */
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto; /* Make clickable on hover/focus */
        }

        .main-nav .dropdown-menu li {
            display: block; /* Ensure list items are block for vertical layout */
        }

        .main-nav .dropdown-menu li a {
            padding: var(--spacing-2) var(--spacing-4);
            display: block;
            color: var(--gray-800);
            white-space: nowrap;
            font-size: var(--font-size-sm);
            font-weight: normal;
            border-radius: 0;
        }

        .main-nav .dropdown-menu li a:hover,
        .main-nav .dropdown-menu li a:focus-visible {
            background-color: var(--ias-light-blue);
            color: var(--ias-blue);
        }

        /* Mobile Menu Button */
        .mobile-menu-button {
            color: var(--ias-blue);
            padding: var(--spacing-2);
            border-radius: var(--border-radius-sm);
            transition: background-color var(--transition-fast);
        }
        .mobile-menu-button:hover, .mobile-menu-button:focus-visible {
            background-color: var(--ias-light-blue);
        }
        .mobile-menu-button svg {
            width: var(--spacing-6);
            height: var(--spacing-6);
        }


        /* Mobile Navigation Panel */
        .mobile-nav {
            background-color: var(--white);
            color: var(--gray-800);
            padding-top: var(--spacing-4);
            padding-bottom: var(--spacing-4);
            border-top: 1px solid var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .mobile-nav.mobile-menu-hidden {
            display: none;
        }
        .mobile-nav.mobile-menu-visible {
            display: block;
        }

        .mobile-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .mobile-nav ul li a { /* Top level mobile nav links */
            display: block;
            padding: var(--spacing-3) var(--spacing-4);
            color: var(--ias-blue);
            font-size: var(--font-size-base);
            font-weight: 500;
            border-bottom: 1px solid var(--gray-200);
            transition: background-color var(--transition-fast);
        }
        .mobile-nav ul li:last-child a {
            border-bottom: none;
        }
        .mobile-nav ul li a:hover,
        .mobile-nav ul li a:focus-visible {
            background-color: var(--ias-light-blue);
            text-decoration: none;
        }

        /* Mobile Navigation Dropdowns (already vertical) */
        .mobile-nav .mobile-dropdown > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-nav .mobile-dropdown > ul {
            display: none; /* Hidden by default */
            list-style: none;
            padding-left: 0;
            background-color: var(--ias-light-blue);
            margin-top: 0;
        }

        .mobile-nav .mobile-dropdown.open > ul {
            display: block; /* Shown when the parent LI has the 'open' class */
        }

        .mobile-nav .mobile-dropdown ul li {
             display: block; /* Ensure list items are block for vertical layout */
        }

        .mobile-nav .mobile-dropdown ul li a {
            padding: var(--spacing-2-5) var(--spacing-4) var(--spacing-2-5) var(--spacing-8);
            font-size: var(--font-size-sm);
            font-weight: normal;
            border-bottom: 1px solid var(--gray-200);
        }
        .mobile-nav .mobile-dropdown ul li:last-child a {
            border-bottom: none;
        }


        /* --------------------------------------------------------------------------
           6.3 Hero Section
           -------------------------------------------------------------------------- */
        .hero-section {
            /* Removed linear gradient overlay */
            background-image: url('images/MathDepartment.jpg');
            background-size: cover;
            background-position: center;
            color: var(--white);
            padding: var(--spacing-10) 0;
            text-align: center;
            min-height: 250px;
        }

        .hero-dept-name {
            font-family: var(--font-heading);
            font-size: var(--font-size-4xl);
            font-weight: 700;
            text-shadow: var(--shadow-text);
        }


        /* --------------------------------------------------------------------------
           6.4 Main Content
           -------------------------------------------------------------------------- */
        .main-content {
            padding-top: var(--spacing-8);
            padding-bottom: var(--spacing-8);
        }

        /* Custom styles for column separators */
        /* Removed border-right rules for columns */
        @media (min-width: 768px) { /* md breakpoint */
            .md\:block { display: block !important; }
            .md\:hidden { display: none !important; }
            .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .md\:col-span-1 { grid-column: span 1 / span 1; }
            .md\:col-span-2 { grid-column: span 2 / span 2; }

            .hero-dept-name {
                font-size: 3.5rem;
            }
            /* Adjusted padding for symmetry after removing borders */
            .main-content > .grid > div:nth-child(1) {
                padding-right: var(--spacing-4);
            }
             .main-content > .grid > div:nth-child(2) {
                 padding-left: var(--spacing-4);
                 padding-right: var(--spacing-4);
             }
             .main-content > .grid > div:nth-child(3) {
                 padding-left: var(--spacing-4);
             }
        }

        /* Small screens (mobile) */
        @media (max-width: 767px) { /* Styles for screens smaller than md breakpoint */
            .dept-title {
                white-space: normal; /* Allow text to wrap */
                font-size: var(--font-size-base); /* Adjust font size for smaller screens */
                line-height: 1.3; /* Adjust line height */
            }
            .site-branding {
                 align-items: flex-start; /* Align items to the top */
            }
        }


        /* Event Cards and Content Cards (clickable boxes) */
        .content-card,
        .event-card {
            background-color: var(--white);
            padding: var(--spacing-4);
            border-radius: var(--border-radius-md);
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition-medium);
            margin-bottom: var(--spacing-4);
            display: block; /* Ensure the entire box is a block link */
            text-decoration: none; /* Remove underline from the box itself */
            color: inherit; /* Inherit text color */
        }
        .content-card:hover,
        .event-card:hover {
            box-shadow: var(--shadow-md);
            text-decoration: none; /* Ensure no underline on hover of the box */
        }

        /* Ensure text elements inside clickable cards do NOT get underline on hover/focus */
        .content-card h3,
        .content-card p,
        .content-card span, /* Also target spans like 'Apply now' */
        .event-card h3,
        .event-card p {
            text-decoration: none !important; /* Use !important to override potential inherited styles */
        }

         /* Re-add underline for specific elements inside if needed, like 'Apply now' span */
        .content-card span.text-ias-teal:hover,
        .content-card span.text-ias-teal:focus-visible {
            text-decoration: underline !important; /* Use !important to ensure it applies */
        }

        /* Style for the collapsible content within cards */
        .content-card .collapsible-extra,
        .event-card .collapsible-extra {
            display: none; /* Hidden by default */
            /* Add transitions for smoother expand/collapse if desired */
            /* transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; */
            /* max-height: 0; */
            /* opacity: 0; */
            overflow: hidden; /* Hide overflow during transition */
        }

        .content-card:hover .collapsible-extra,
        .content-card:focus-within .collapsible-extra, /* Expand on focus within the card */
        .event-card:hover .collapsible-extra,
        .event-card:focus-within .collapsible-extra { /* Expand on focus within the card */
            display: block; /* Show on hover/focus */
            /* If using transitions, set max-height and opacity here */
            /* max-height: 500px; */ /* Or a value large enough to contain content */
            /* opacity: 1; */
        }


        .event-title {
            font-size: var(--font-size-lg);
            color: var(--ias-blue);
            margin-bottom: var(--spacing-1);
        }
        .event-card p {
            margin-bottom: var(--spacing-1);
            font-size: var(--font-size-sm);
        }
        .event-card .text-gray-600 { color: var(--gray-600); }
        .event-card .text-gray-700 { color: var(--gray-700); }

        /* Prose for article content */
        .prose h2 { margin-top: var(--spacing-8); }
        .prose p { line-height: 1.7; font-size: var(--font-size-base); }
        .prose a { text-decoration: underline; }
        .prose a:hover { color: var(--ias-teal); }

        /* News Items */
        .news-item {
            background-color: var(--white);
            border: 1px solid var(--gray-200);
        }
        .news-item h3 { font-size: var(--font-size-xl); }

        /* Slideshow Container */
        .slideshow-container {
            position: relative;
            width: 100%; /* Take full width of parent */
            height: 200px; /* Fixed height for the slideshow */
            overflow: hidden; /* Hide overflowing images */
            margin-bottom: var(--spacing-4); /* Space below the slideshow */
            border-radius: var(--border-radius-md); /* Rounded corners */
            box-shadow: var(--shadow-sm); /* Subtle shadow */
        }

        /* Individual Slideshow Images */
        .slideshow-container .msc-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cover the container while maintaining aspect ratio */
            object-position: center; /* Center the image */
            opacity: 0; /* Hidden by default */
            transition: opacity 1s ease-in-out; /* Fade transition */
        }

        /* Style for the active slide */
        .slideshow-container .msc-slide.active {
            opacity: 1; /* Show the active slide */
        }

        /* Style for search highlights */
        /* Removed highlight style as search is removed */


        /* --------------------------------------------------------------------------
           6.5 Footer
           -------------------------------------------------------------------------- */
        .site-footer {
            padding: var(--spacing-8) 0;
            font-size: var(--font-size-sm);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-8);
            margin-bottom: var(--spacing-8);
        }

        .site-footer h4 {
            font-family: var(--font-heading);
            font-size: var(--font-size-lg);
            color: var(--gray-300);
            margin-bottom: var(--spacing-3);
        }

        .site-footer p, .site-footer ul li {
            margin-bottom: var(--spacing-2);
        }

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

        .footer-bottom {
            text-align: center;
            padding-top: var(--spacing-4);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--gray-400);
        }


        /* ==========================================================================
           7. Utilities
           ========================================================================== */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
            z-index: -999;
            background-color: var(--ias-teal);
            color: var(--white);
            padding: var(--spacing-3);
            border-radius: var(--border-radius-sm);
            text-decoration: none;
        }
        .skip-link:focus {
            left: var(--spacing-4);
            top: var(--spacing-4);
            width: auto;
            height: auto;
            overflow: auto;
            z-index: var(--z-modal);
        }

        .hidden { display: none !important; }
        .relative { position: relative; }
        .text-sm { font-size: var(--font-size-sm); }
        .text-lg { font-size: var(--font-size-lg); }
        .font-medium { font-weight: 500; }
        .space-y-2 > * + * { margin-top: var(--spacing-2); }
        .space-y-4 > * + * { margin-top: var(--spacing-4); }
        .mt-8 { margin-top: var(--spacing-8); }
        .p-4 { padding: var(--spacing-4); }
        .border { border-width: 1px; }
        .border-gray-200 { border-color: var(--gray-200); }
        .rounded-md { border-radius: var(--border-radius-md); }
        .shadow-sm { box-shadow: var(--shadow-sm); }
        .shadow-md { box-shadow: var(--shadow-md); }
        .transition-shadow { transition-property: box-shadow; transition-timing-function: ease-in-out; transition-duration: var(--transition-medium); }


        /* Basic button styling (can be extended) */
        .button {
            display: inline-block;
            padding: var(--spacing-2-5) var(--spacing-4);
            font-size: var(--font-size-sm);
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            border-radius: var(--border-radius-sm);
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
            cursor: pointer;
        }


        /* ==========================================================================
           8. Media Queries
           ========================================================================== */

        /* Medium screens and up (tablets, small desktops) */
        @media (min-width: 768px) { /* md breakpoint */
            .md\:block { display: block !important; }
            .md\:hidden { display: none !important; }
            .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .md\:col-span-1 { grid-column: span 1 / span 1; }
            .md\:col-span-2 { grid-column: span 2 / span 2; }

            .hero-dept-name {
                font-size: 3.5rem;
            }
            /* Adjusted gap for desktop nav items */
            .main-nav ul { gap: var(--spacing-2); } /* Further reduced gap */
        }

        /* Small screens (mobile) */
        @media (max-width: 767px) { /* Styles for screens smaller than md breakpoint */
            .dept-title {
                white-space: normal; /* Allow text to wrap */
                font-size: var(--font-size-base); /* Adjust font size for smaller screens */
                line-height: 1.3; /* Adjust line height */
            }
            .site-branding {
                 align-items: flex-start; /* Align items to the top */
            }
        }


        /* Large screens (desktops) */
        @media (min-width: 1024px) { /* lg breakpoint */
            .lg\:text-4xl { font-size: var(--font-size-4xl); }
        }


        /* ==========================================================================
           9. Accessibility & Print
           ========================================================================== */
        /* Focus visible polyfill or ensure outlines are clear */
        *:focus-visible {
            outline: 2px solid var(--ias-teal);
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.3);
        }
        /* Remove default outline if using custom focus-visible */
        *:focus {
            outline: none;
        }


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

        /* Print styles */
        @media print {
            body {
                background-color: var(--white);
                color: var(--black);
                font-size: 12pt;
            }
            .site-header,
            .mobile-menu-button,
            .search-form, /* Also hide search form in print */
            .hero-section, /* Often not needed in print */
            .site-footer {
                display: none !important;
            }
            .main-content {
                padding-top: 0;
                padding-bottom: 0;
            }
            .container {
                max-width: 100%;
                padding: 0;
            }
            a {
                color: var(--black);
                text-decoration: underline;
            }
            h1, h2, h3, h4, h5, h6 {
                color: var(--black);
                page-break-after: avoid;
            }
            .event-card, .news-item {
                box-shadow: none;
                border: 1px solid var(--gray-300);
                page-break-inside: avoid;
            }
            img {
                max-width: 300px !important;
            }
        }