/*
Theme Name: SEDTI Theme
Theme URI: 
Author: SEDTI uOttawa
Description: Custom theme for School of Engineering Design and Teaching Innovation
Version: 1.0
*/

/* =====================
   CSS VARIABLES
   ===================== */
:root {
    --color-primary: #8B0000;
    --color-primary-dark: #6a0000;
    --color-white: #FFFFFF;
    --color-light-gray: #EAEAEA;
    --color-dark: #1F1F1F;
    --color-text: #333333;
    --color-text-light: #666666;
    --font-main: 'Segoe UI', Arial, sans-serif;
    --font-heading: 'Georgia', serif;
    --transition: all 0.3s ease;
    --shadow: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.15);
    --border-radius: 6px;
    --container-width: 1200px;
    --nav-height: 80px;
    --topbar-height: 48px;
}

/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    color: var(--color-dark);
    background: var(--color-white);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    color: var(--color-dark);
}

/* =====================
   UTILITY CLASSES
   ===================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 80px 0;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
    border: 2px solid var(--color-primary);
    cursor: pointer;
}

.btn:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

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

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

.section-title {
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin-top: 10px;
}

.read-more {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.read-more::after {
    content: '→';
    transition: var(--transition);
}

.read-more:hover {
    gap: 10px;
    color: var(--color-primary-dark);
}

/* =====================
   TOP BAR
   ===================== */
.top-bar {
    background: var(--color-primary);
    height: var(--topbar-height);
    position: relative;
    z-index: 1100;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar-menu-label {
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: var(--font-main);
}

.top-bar-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

.top-bar-logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}

.top-bar-logo-text {
    color: var(--color-white);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    font-family: var(--font-main);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-white);
    transition: var(--transition);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
}

.lang-switcher a {
    color: var(--color-white);
    padding: 2px 6px;
    border-radius: 3px;
    transition: var(--transition);
    font-weight: 600;
}

.lang-switcher a.active,
.lang-switcher a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lang-switcher span {
    opacity: 0.5;
    color: var(--color-white);
}

.nav-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.nav-search:hover {
    opacity: 0.75;
}

/* =====================
   MAIN NAVBAR
   =====================
   NOTE (mobile-overlap fix): height was previously a hard `height:
   var(--nav-height)` with no overflow handling. Since the nav-logo
   text is a fixed English/French string with baked-in <br> line
   breaks, a longer translation (e.g. French) needing more lines than
   the fixed 80px box would simply overflow past it and visually sit
   on top of the content below (the menu row, breadcrumb, etc.) — this
   is what caused the French logo text to overlap the nav menu.
   Switching to min-height lets the navbar grow to fit whatever the
   content needs in any language, so it can never overlap anything;
   worst case it's a few pixels taller. ===== */
.navbar {
    background: var(--color-white);
    min-height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.navbar.scrolled {
    min-height: 65px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-height);
    /* a little extra width so the logo text block (below) has room
       to breathe without squeezing the menu items onto multiple rows */
    max-width: calc(var(--container-width) + 100px);
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar.scrolled .container {
    min-height: 65px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    /* never let the browser shrink the logo block to make room for
       the menu — the menu items are the ones that should compress
       first if space runs out */
    flex-shrink: 0;
}

.nav-logo img {
    height: 55px;
    width: auto;
}

.nav-logo-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-dark);
    font-weight: 500;
    font-family: var(--font-main);
    /* fixed width so this block reserves a consistent, predictable
       amount of horizontal space regardless of how long the current
       language's translation is, instead of being crushed down to
       near single-word-per-line by the nav menu next to it */
    width: 230px;
    flex-shrink: 0;
}

.nav-logo-text strong {
    font-weight: 700;
    display: block;
    font-size: 1rem;
}

/* French logo text/menu run longer than English — trim them down a
   touch so they need less extra width in the first place. Polylang
   sets lang="fr-FR" (or similar) on <html>, so this only affects the
   French version of the site. */
html[lang^="fr"] .nav-logo-text {
    font-size: 0.85rem;
}

html[lang^="fr"] .nav-menu li a {
    padding: 8px 9px;
    font-size: 0.82rem;
}

/* uOttawa shield logo */
.uottawa-logo {
    height: 52px;
    width: auto;
    display: block;
    flex-shrink: 0;
    mix-blend-mode: multiply;
}

.nav-logo-divider {
    width: 1px;
    height: 40px;
    background: var(--color-light-gray);
    flex-shrink: 0;
}

/* Nav links */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
}

.nav-menu li a {
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-dark);
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    display: block;
    white-space: nowrap;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.nav-menu li a:hover::after,
.nav-menu li a.active::after,
.nav-menu li.current-menu-item > a::after,
.nav-menu li.current-menu-ancestor > a::after,
.nav-menu li.current_page_item > a::after,
.nav-menu li.current_page_ancestor > a::after,
.nav-menu li.current-post-ancestor > a::after {
    transform: scaleX(1);
}

.nav-menu li a:hover,
.nav-menu li a.active,
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current_page_item > a,
.nav-menu li.current_page_ancestor > a,
.nav-menu li.current-post-ancestor > a {
    color: var(--color-primary);
}

/* =====================
   DROPDOWN MENUS
   ===================== */
.nav-menu li.has-dropdown {
    position: relative;
}

.nav-menu li.has-dropdown > a.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-menu li.has-dropdown:hover .dropdown-arrow,
.nav-menu li.has-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    /* FIX: the gap between the trigger and the visible box now lives
       INSIDE this element as padding-top, instead of as a
       `top: calc(100% + 8px)` offset. That offset left a strip of
       empty, un-hoverable space between the link and the box below
       it — moving the mouse straight down passed through that dead
       zone, triggering mouseleave and closing the dropdown before it
       was reached. Keeping the gap inside the hoverable element keeps
       the hover state continuous all the way down. */
    padding-top: 8px;
    transform: translateX(-50%) translateY(6px);
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 2000;
    pointer-events: none;
}

.nav-menu li.has-dropdown:hover .dropdown-menu,
.nav-menu li.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-inner {
    position: relative;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.dropdown-inner::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: var(--color-white);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.06));
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 4px;
    border-left: 3px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
    text-decoration: none;
    color: var(--color-dark);
}

.dropdown-item:hover {
    background: rgba(139, 0, 0, 0.06);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

.dropdown-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-main);
    color: inherit;
    transition: color 0.18s ease;
    line-height: 1.3;
}

.dropdown-item-desc {
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-family: var(--font-main);
    line-height: 1.4;
}

.dropdown-item:hover .dropdown-item-title {
    color: var(--color-primary);
}

/* =====================
   SEARCH OVERLAY
   ===================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay form {
    width: 60%;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-overlay input {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    border: none;
    border-bottom: 2px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    outline: none;
    font-family: var(--font-main);
}

.search-overlay input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--transition);
}

.search-close:hover {
    opacity: 1;
}

/* =====================
   MOBILE MENU
   NOTE: this early block is superseded by the "Mobile Menu Redesign"
   block further down this file (same selector, later in the cascade
   wins). Left in place only because other rules in the theme may still
   reference it; the active, in-use rules are the ones near the bottom
   under "Mobile Menu Redesign".
   ===================== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    z-index: 1500;
    padding: 5rem 2rem 2rem;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    display: block;
    font-family: var(--font-main);
}

.mobile-menu a:hover {
    color: var(--color-primary);
    padding-left: 8px;
}

.mobile-menu-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-lang {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* =====================
   MOBILE ACCORDION
   ===================== */
.mobile-accordion {
    border-bottom: 1px solid var(--color-light-gray);
}

.mobile-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    font-family: var(--font-main);
    text-align: left;
    transition: color 0.2s ease;
}

.mobile-accordion-trigger:hover {
    color: var(--color-primary);
}

.mobile-accordion-trigger svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mobile-accordion.open .mobile-accordion-trigger {
    color: var(--color-primary);
}

.mobile-accordion.open .mobile-accordion-trigger svg {
    transform: rotate(180deg);
}

.mobile-accordion-content {
    display: none;
    flex-direction: column;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    gap: 0;
}

.mobile-accordion.open .mobile-accordion-content {
    display: flex;
}

.mobile-accordion-content a {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(234, 234, 234, 0.6) !important;
    display: block !important;
    transition: color 0.18s ease, padding-left 0.18s ease !important;
}

.mobile-accordion-content a:last-child {
    border-bottom: none !important;
}

.mobile-accordion-content a:hover {
    color: var(--color-primary) !important;
    padding-left: 8px !important;
}

/* =====================
   HERO SECTION
   ===================== */
.hero {
    position: relative;
    height: 90vh;
    height: 90dvh; /* real visible viewport height on mobile browsers; older browsers ignore this line and keep 90vh above */
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-dark); /* fills any letterbox gap if the image doesn't cover the full box */
}

.hero-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-dark);
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* desktop/landscape: fill the frame edge-to-edge, same look as before */
    object-position: center;
    display: block;
    will-change: transform;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.38) 55%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

.hero .container,
.hero-content {
    display: none !important;
}

.hero-title-wrap {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 2;
    max-width: 600px;
}

.hero-title-wrap h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    color: var(--color-white);
    font-weight: 400;
    margin: 0;
}

.hero-about-btn {
    display: block;
    width: fit-content;
    margin-top: -22px;
    margin-left: auto;
    margin-right: 2rem;
    position: relative;
    z-index: 10;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 12px 32px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: var(--transition);
    border: 2px solid var(--color-primary);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(139,0,0,0.3);
}

.hero-about-btn:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139,0,0,0.4);
}

/* =====================
   STATS SECTION
   ===================== */
.stats-section {
    display: none;
}

/* =====================
   PROGRAMS SECTION
   ===================== */
.programs-section {
    position: relative;
    background: var(--color-white);
    padding: 80px 0;
}

.programs-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100vw - var(--container-width)) / 2 + 2rem + 300px);
    height: 100%;
    background: #EAEAEA;
    z-index: 0;
    pointer-events: none;
}

.programs-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--color-primary);
    z-index: 3;
    pointer-events: none;
}

.programs-section .container {
    position: relative;
    z-index: 1;
}

.programs-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

.programs-left {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    background: transparent;
}

.programs-left .section-title {
    margin-bottom: 2rem;
}

.programs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.programs-nav a {
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    border-left: 3px solid transparent;
    transition: var(--transition);
    border-radius: 0;
    font-family: var(--font-main);
    background: transparent;
}

.programs-nav a:hover,
.programs-nav a.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: transparent;
    padding-left: 20px;
}

.programs-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 0.5rem;
}

.program-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    background: #D9D9D9;
    border: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    scroll-margin-top: calc(var(--topbar-height) + var(--nav-height) + 20px);
}

.program-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.program-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.program-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.program-card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
}

.program-card-content p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* =====================
   NEWS SECTION
   ===================== */
.news-section {
    background: var(--color-light-gray);
    padding: 80px 0;
    border-top: 2px solid #1F1F1F;
}

.news-section .section-title {
    margin-bottom: 2.5rem;
}

.news-carousel-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.news-carousel {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s ease;
}

.news-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-card-content {
    padding: 1.25rem;
}

.news-card-content .date {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card-content h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.carousel-controls {
    display: none;
}

.carousel-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.carousel-btn:hover {
    opacity: 1;
    color: var(--color-primary);
    background: transparent;
}

.news-prev-btn,
.news-next-btn,
.events-prev-btn,
.events-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border: none;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: var(--transition);
}

.news-prev-btn,
.events-prev-btn {
    left: 0;
}

.news-next-btn,
.events-next-btn {
    right: 0;
}

.news-prev-btn:hover,
.news-next-btn:hover,
.events-prev-btn:hover,
.events-next-btn:hover {
    opacity: 1;
    color: var(--color-primary);
}

.news-section,
.events-section {
    position: relative;
}

/* =====================
   EVENTS SECTION
   ===================== */
.events-section {
    background: var(--color-light-gray);
    padding: 80px 0;
    border-top: 2px solid #1F1F1F;
}

.events-section .section-title {
    margin-bottom: 2.5rem;
}

.events-carousel-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.events-carousel {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s ease;
}

.event-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
}

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

.event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.event-card-content {
    padding: 1.25rem;
}

.event-card-content .date {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-card-content h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* =====================
   RESEARCH SECTION
   ===================== */
.research-section {
    position: relative;
    background: var(--color-white);
    padding: 80px 0;
	border-top: 2px solid #1F1F1F;
}

.research-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100vw - var(--container-width)) / 2 + 2rem + 300px);
    height: 100%;
    background: #EAEAEA;
    z-index: 0;
    pointer-events: none;
}

.research-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--color-primary);
    z-index: 3;
    pointer-events: none;
}

.research-section .container {
    position: relative;
    z-index: 1;
}

.research-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

.research-left {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    background: transparent;
}

.research-left .section-title {
    margin-bottom: 2rem;
}

.research-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.research-nav a {
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    border-left: 3px solid transparent;
    transition: var(--transition);
    font-family: var(--font-main);
    background: transparent;
}

.research-nav a:hover,
.research-nav a.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    padding-left: 20px;
}

.research-left p {
    color: var(--color-text-light);
    margin: 0 0 2rem;
    line-height: 1.7;
    font-size: 0.95rem;
}

.research-right {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
}

.research-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid #D0D0D0;
    transition: var(--transition);
}

.research-item:first-child {
    border-top: 1px solid #D0D0D0;
}

.research-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.research-item p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .research-section {
        background: #EAEAEA;
    }
    .research-section::before {
        display: none;
    }
    .research-layout {
        grid-template-columns: 1fr;
    }
    .research-left {
        position: static;
    }
    .research-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* =====================
   FOOTER
   ===================== */
.footer {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand img {
    height: 50px;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}

.footer-brand p {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.7;
}

.footer-col h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    color: var(--color-white);
    font-family: var(--font-main);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
}

.footer-col ul li a {
    font-size: 0.9rem;
    opacity: 0.75;
    transition: var(--transition);
    color: var(--color-white);
    font-family: var(--font-main);
}

.footer-col ul li a:hover {
    opacity: 1;
    padding-left: 5px;
    color: var(--color-white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.7;
    font-family: var(--font-main);
}

/* =====================
   BACK TO TOP
   ===================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.back-to-top:hover {
    background: var(--color-primary-dark);
    transform: translateY(-3px);
}

/* =====================
   AOS ANIMATIONS
   ===================== */
[data-aos] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0);
}

/* =====================
   RESPONSIVE — TABLET
   ===================== */
@media (max-width: 1024px) {
    .programs-layout,
    .research-layout {
        grid-template-columns: 1fr;
    }

    .programs-left,
    .research-left {
        position: static;
    }

    .programs-section {
        background: #EAEAEA;
    }

    .programs-section::before {
        display: none;
    }

    .programs-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-menu li a {
        padding: 8px 9px;
        font-size: 0.82rem;
    }

    .uottawa-logo {
        height: 42px;
    }

    .news-card,
    .event-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

/* =====================
   RESPONSIVE — MOBILE
   ===================== */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .top-bar-logo {
        display: none;
    }

    .uottawa-logo {
        height: 36px;
    }

    .nav-logo-divider {
        height: 30px;
    }

    .hero-title-wrap {
        bottom: 1.5rem;
        left: 1.25rem;
        right: 1.25rem;
        max-width: 100%;
    }

    .hero-title-wrap h1 {
        font-size: 1.8rem;
    }

    .hero-about-btn {
        margin-top: -18px;
        margin-right: 1.25rem;
        padding: 10px 22px;
        font-size: 0.88rem;
    }

    .news-card {
        flex: 0 0 100%;
    }

    .event-card {
        flex: 0 0 100%;
    }

    .program-card {
        grid-template-columns: 1fr;
    }

    .program-card img {
        height: 180px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stat-number {
        font-size: 2.2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

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

    .search-overlay form {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1.25rem;
    }

    .hero-title-wrap h1 {
        font-size: 1.6rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================
   ABOUT PAGE STYLES
   ===================== */

.about-hero {
    padding: 0;
    background: var(--color-white);
    overflow: hidden;
}

.about-hero-inner {
    display: flex;
    align-items: stretch;
    min-height: 120px;
}

.about-hero-title-block {
    background: #b07070;
    padding: 2rem 2.5rem 2rem 2.5rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 280px;
    position: relative;
    z-index: 1;
}

.about-hero-title-block h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    font-family: var(--font-heading);
    white-space: nowrap;
}

.about-hero-line {
    flex: 1;
    border-bottom: 3px solid var(--color-dark);
    align-self: flex-end;
    margin-bottom: 0;
    height: 3px;
    background: var(--color-dark);
}

.about-intro {
    padding: 60px 0;
    background: var(--color-white);
}

.about-intro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.about-intro-text p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.about-intro-text p:last-child {
    margin-bottom: 0;
}

.about-quick-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.about-quick-links a {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-main);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.about-quick-links a:hover {
    color: var(--color-primary-dark);
    padding-left: 6px;
}

.about-director {
    background: #EAEAEA;
    padding: 60px 0;
    border-left: 6px solid var(--color-primary);
}

.about-director-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

.about-director-photo {
    flex-shrink: 0;
}

.about-director-photo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    display: block;
}

.about-director-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

.about-quote-mark {
    font-size: 3.5rem;
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.5;
    font-family: Georgia, serif;
    letter-spacing: -4px;
    margin-bottom: -0.5rem;
}

.about-director-content blockquote {
    font-size: 1.35rem;
    font-family: var(--font-heading);
    color: var(--color-dark);
    line-height: 1.5;
    margin: 0;
    font-style: normal;
    border: none;
    padding: 0;
}

.about-director-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.about-director-info strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-dark);
    font-family: var(--font-main);
}

.about-director-info span {
    font-size: 0.88rem;
    color: var(--color-text-light);
    font-family: var(--font-main);
    line-height: 1.5;
}

.about-director-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-dark);
    font-family: var(--font-main);
    font-weight: 500;
    transition: var(--transition);
    margin-top: 0.5rem;
}

.about-director-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-dark);
    border-radius: 50%;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.about-director-link:hover {
    color: var(--color-primary);
}

.about-director-link:hover .about-director-link-icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.about-stats {
    position: relative;
    overflow: hidden;
}

.about-stats-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

.about-stats-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.about-stats-bg .container {
    position: relative;
    z-index: 1;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.about-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.about-stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFD700;
    font-family: var(--font-heading);
    line-height: 1;
}

.about-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-main);
}

.about-overview {
    padding: 80px 0;
    background: var(--color-white);
}

.about-overview-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

.about-overview-right p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .about-hero-title-block {
        min-width: 0;
        padding: 1.5rem;
    }

    .about-hero-title-block h1 {
        font-size: 1.8rem;
    }

    .about-intro-layout,
    .about-director-layout,
    .about-overview-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-director-photo img {
        height: 220px;
    }

    .about-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .about-stat-number {
        font-size: 2.2rem;
    }

    .about-quick-links {
        padding-top: 0;
    }
}

/* =====================
   FOOTER BOTTOM BAR
   ===================== */

.footer-bottom-bar {
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
}

.footer-bottom-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.03) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.03) 50%,
        rgba(255,255,255,0.03) 75%,
        transparent 75%
    );
    background-size: 60px 60px;
    pointer-events: none;
}

.footer-bottom-bar-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 56px;
    position: relative;
    z-index: 1;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.footer-bottom-links a {
    color: var(--color-white);
    font-size: 0.82rem;
    font-family: var(--font-main);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.5);
    transition: var(--transition);
    white-space: nowrap;
}

.footer-bottom-links a:hover {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
    opacity: 0.85;
}

@media (max-width: 480px) {
    .footer-bottom-bar-inner {
        justify-content: center;
    }

    .footer-bottom-links {
        gap: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.75rem 0;
    }
}

/* ── Mobile Menu Redesign ── */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 360px;
    /* FIX: 100vh is the *layout* viewport height, which stays taller than
       what's actually visible once the mobile browser's address bar (and,
       on some Android browsers, a bottom toolbar) is showing on screen.
       That gap is the "black thing" hiding the bottom menu items — it's
       the browser's own UI sitting on top of the page, not a bug in the
       page itself. 100dvh (dynamic viewport height) tracks the real
       visible viewport and shrinks/grows with it as that chrome shows or
       hides. Browsers that don't understand `dvh` simply ignore that
       second declaration and fall back to the 100vh line above it. */
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    /* FIX: reserves room at the bottom for the home-indicator / gesture
       bar on notched phones, so the last link isn't flush against
       (or partially under) it. Falls back to 0 on devices/browsers
       that don't report a safe-area inset. */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.mobile-menu.is-open { left: 0; }

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    /* FIX: also respect the top safe-area (notch / status bar) so the
       close button never sits under it on devices with a top inset. */
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mobile-menu-logo {
    font-size: 12px;
    font-weight: 700;
    color: #8B0000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: var(--font-main);
}
.mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.mobile-menu-close:hover { color: #8B0000; }

.mobile-lang {
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 16px;
    margin-bottom: 0 !important;
}
.mobile-lang a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #888;
    font-family: var(--font-main);
    padding-bottom: 2px;
    transition: color 0.2s;
}
.mobile-lang a.active,
.mobile-lang a:hover { color: #8B0000; border-bottom: 2px solid #8B0000; }

.mobile-menu > a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--font-main);
    transition: color 0.15s, padding-left 0.15s, background 0.15s;
}
.mobile-menu > a:hover {
    color: #8B0000;
    padding-left: 26px;
    background: rgba(139,0,0,0.03);
}
.mobile-menu > a.current-menu-item {
    color: #8B0000;
    border-left: 3px solid #8B0000;
    padding-left: 17px;
}

.mobile-accordion { border-bottom: 1px solid #f0f0f0; }
.mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    text-align: left;
    transition: color 0.15s, padding-left 0.15s, background 0.15s;
}
.mobile-accordion-trigger svg {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.22s ease, opacity 0.2s;
}
.mobile-accordion-trigger:hover {
    color: #8B0000;
    padding-left: 26px;
    background: rgba(139,0,0,0.03);
}
.mobile-accordion.is-open .mobile-accordion-trigger {
    color: #8B0000;
    border-left: 3px solid #8B0000;
    padding-left: 17px;
    background: rgba(139,0,0,0.04);
}
.mobile-accordion.is-open .mobile-accordion-trigger svg {
    transform: rotate(180deg);
    opacity: 1;
}

.mobile-accordion-content {
    display: none;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}
.mobile-accordion.is-open .mobile-accordion-content { display: block; }
.mobile-accordion-content a {
    display: block;
    padding: 10px 20px 10px 32px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    font-family: var(--font-main);
    font-weight: 400;
    transition: color 0.15s, padding-left 0.15s, background 0.15s;
    position: relative;
}
.mobile-accordion-content a::before {
    content: '–';
    position: absolute;
    left: 20px;
    color: #ccc;
    font-size: 11px;
    transition: color 0.15s;
}
.mobile-accordion-content a:last-child { border-bottom: none; }
.mobile-accordion-content a:hover {
    color: #8B0000;
    padding-left: 36px;
    background: #fff;
}
.mobile-accordion-content a:hover::before { color: #8B0000; }

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
}
.mobile-overlay.is-open { display: block; }

/* =====================
   ADDITIONAL MOBILE REFINEMENTS
   ===================== */

@media (max-width: 768px) {
    .navbar .container { flex-wrap: nowrap; }
    .nav-logo { gap: 8px; }
    .nav-logo img { height: 42px; }
    /* width: auto — .nav-menu is hidden at this width, so nav-logo-text
       has no competition for space and can size itself naturally
       instead of using the fixed desktop width. */
    .nav-logo-text { font-size: 0.78rem; line-height: 1.3; width: auto; }
    .nav-logo-text strong { font-size: 0.85rem; }
    .nav-logo-divider { height: 30px; }
}

@media (max-width: 480px) {
    /* min-height (not height) — keeps the same overflow-safety as the
       main .navbar rule above on small phones */
    .navbar { min-height: 64px; }
    .nav-logo { gap: 6px; }
    .nav-logo img { height: 36px; }
    .uottawa-logo { height: 30px; }
    .nav-logo-divider { height: 24px; }
    .nav-logo-text { font-size: 0.7rem; }
    .nav-logo-text strong { font-size: 0.78rem; }

    .top-bar-menu-label { font-size: 0.85rem; }
    .lang-switcher { font-size: 0.8rem; gap: 4px; }
}

@media (max-width: 480px) {
    .search-overlay form {
        width: 92%;
        flex-direction: column;
        gap: 0.75rem;
    }
    .search-overlay input {
        font-size: 1rem;
        padding: 0.75rem 1rem;
        width: 100%;
    }
    .search-close {
        top: 1.25rem;
        right: 1.25rem;
    }
}

@media (max-width: 768px) {
    .footer-brand img { height: 40px; }
}
@media (max-width: 480px) {
    .footer-brand img { height: 34px; }
    .footer-brand p { font-size: 0.85rem; }
}

@media (max-width: 768px) {
    .research-nav { gap: 0.5rem 1rem; }
    .research-left p { font-size: 0.9rem; margin-bottom: 1.5rem; }
}
@media (max-width: 480px) {
    .research-nav { flex-direction: column; }
    .research-item { padding: 1.15rem 0; }
    .research-item h3 { font-size: 1rem; }
    .research-item p { font-size: 0.88rem; }
}