/* ============================================================
   JNAFAU — main.css
   Complete rewrite: clean, zero-conflict header + nav + footer
   ============================================================ */

/* ===========================
   1. CSS VARIABLES & RESET
=========================== */

:root {
    --clr-primary: #c0392b;
    --clr-primary-dk: #a93226;
    --clr-text: #333333;
    --clr-muted: #666666;
    --clr-light: #888888;
    --clr-border: #e0e0e0;
    --clr-hover-bg: #f4f4f4;
    --clr-footer-bg: #f5f5f5;
    --clr-white: #ffffff;
    --clr-submenu-bg: #fafafa;

    --font-main: 'Montserrat', 'Segoe UI', Arial, sans-serif;

    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.13);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.18s;
    --dur-menu: 0.26s;

    --container: 1400px;
    --submenu-width: 260px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--clr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

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

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

/* ===========================
   2. SITE HEADER (top bar)
=========================== */

.site-header {
    position: relative;
    /* anchor for absolute nav panel */
    width: 100%;
    background: var(--clr-white);
    box-shadow: var(--shadow-header);
    z-index: 1000;
}

/* Mobile-only menu item hidden on desktop */
.mobile-only-menu-item {
    display: none !important;
}

/* ---- header-top grid: logo-jnafau | title | logo-telangana | actions ---- */
.header-top {
    display: grid;
    grid-template-columns: 70px 1fr 70px auto;
    align-items: center;
    gap: 16px 20px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 8px 24px;
}

/* Left logo */
.header-logo-jnafau a {
    display: block;
}

.header-logo-jnafau img {
    width: 70px;
    height: auto;
    display: block;
}

.logo-fallback {
    display: block;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--clr-primary);
    text-align: center;
}

/* Centre title */
.header-title {
    text-align: center;
    min-width: 0;
}

.header-title h1 {
    font-size: clamp(1rem, 2.1vw, 1.85rem);
    color: var(--clr-primary);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
    white-space: nowrap;
}

.header-title h1 a {
    transition: color var(--dur-fast) var(--ease);
}

.header-title h1 a:hover {
    color: var(--clr-primary-dk);
}

.header-subtitle {
    display: block;
    margin-top: 6px;
    color: var(--clr-primary);
    font-size: 16px;
    letter-spacing: 0.3em;
    font-weight: 800;
    text-transform: uppercase;
}

/* Right logo */
.header-logo-telangana img {
    width: 70px;
    height: auto;
    display: block;
}

/* Header actions (Search + Hamburger) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search Toggle Button */
.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.search-toggle:hover {
    color: var(--clr-primary);
    background-color: var(--clr-hover-bg);
}

.search-toggle svg {
    display: block;
}

/* ======= SEARCH BAR SLIDING WRAPPER ======= */
.header-search-form-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--clr-white);
    border-top: 1px solid var(--clr-border);
    border-bottom: 2px solid var(--clr-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 998;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.site-header.search-open .header-search-form-wrapper {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.search-form-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-form-container .search-form {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--clr-border);
    border-radius: 24px;
    padding: 4px 16px;
    background-color: var(--clr-hover-bg);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.search-form-container .search-form:focus-within {
    border-color: var(--clr-primary);
    background-color: var(--clr-white);
}

.search-form-container .search-field {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--clr-text);
    outline: none;
    width: 100%;
}

.search-form-container .search-submit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-muted);
    padding: 4px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.search-form-container .search-submit:hover {
    color: var(--clr-primary);
}

.search-form-container .search-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-muted);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
    width: 38px;
    height: 38px;
}

.search-form-container .search-close:hover {
    background-color: var(--clr-hover-bg);
    color: var(--clr-primary);
}

/* ===========================
   3. HAMBURGER BUTTON
      Hidden on desktop, shown on mobile
=========================== */

.menu-toggle {
    display: none;
    /* hidden by default (desktop) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease);
    z-index: 1001;
    /* always above nav panel */
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: var(--clr-hover-bg);
    outline: none;
}

.tog-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--clr-text);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform var(--dur-menu) var(--ease),
        opacity var(--dur-fast) var(--ease);
}

/* Animate to × when open */
.menu-toggle[aria-expanded="true"] .tog-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .tog-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .tog-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===========================
   4. DESKTOP NAVIGATION
      Shown ≥ 992px
=========================== */

.main-navigation {
    background: var(--clr-white);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.nav-container {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-search-desktop {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
}

@media (max-width: 991px) {
    .nav-container {
        display: block;
        padding: 0;
    }

    .nav-search-desktop {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .header-top .search-toggle {
        display: none !important;
    }
}

/* Horizontal flex row */
.main-menu {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    /* single row on desktop */
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
}

/* Each top-level item */
.main-menu>.menu-item {
    position: relative;
    flex-shrink: 0;
}

/* Top-level links */
.main-menu>.menu-item>a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 13px;
    color: var(--clr-text);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition:
        color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease);
}

.main-menu>.menu-item>a:hover,
.main-menu>.menu-item:hover>a {
    color: var(--clr-primary);
    background-color: var(--clr-hover-bg);
}

/* Active state red bar for desktop */
@media (min-width: 992px) {

    .main-menu>.menu-item.current-menu-item>a,
    .main-menu>.menu-item.current-menu-ancestor>a,
    .main-menu>.menu-item.current-menu-parent>a {
        color: var(--clr-primary);
        background-color: transparent !important;
        position: relative;
    }

    .main-menu>.menu-item.current-menu-item>a::before,
    .main-menu>.menu-item.current-menu-ancestor>a::before,
    .main-menu>.menu-item.current-menu-parent>a::before {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 13px;
        right: 13px;
        height: 3px;
        border-radius: 15px;
        background-color: var(--clr-primary);
    }
}

/* ---- Caret arrow ---- */
/* Caret arrow using pseudo-elements */
.main-menu .menu-item-has-children>a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-menu .menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease);
}

/* Hover caret rotation for top level */
.main-menu>.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

/* ===========================
   5. DESKTOP DROPDOWN MENUS
=========================== */

.main-menu .sub-menu {
    /* Hidden state */
    position: absolute;
    top: 100%;
    left: 0;
    /* default: align to left edge of parent */
    right: auto;
    min-width: var(--submenu-width);
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-top: 2px solid var(--clr-primary);
    box-shadow: var(--shadow-dropdown);
    z-index: 500;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity var(--dur-menu) var(--ease),
        transform var(--dur-menu) var(--ease),
        visibility var(--dur-menu) var(--ease);
}

/* Open on hover */
.main-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Right-align for top-level menu items */
.main-menu>.menu-item.drop-left>.sub-menu {
    left: auto;
    right: 0;
}

/* Submenu items relative positioning for nesting */
.main-menu .sub-menu li {
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.main-menu .sub-menu li:last-child {
    border-bottom: none;
}

/* Level 2+ Submenus (desktop) */
.main-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    border-top: 2px solid var(--clr-primary);
    transform: translateX(6px) translateY(0);
}

.main-menu .sub-menu li:hover>.sub-menu {
    transform: translateX(0) translateY(0);
}

/* Level 2+ Submenus Opening Left (desktop) */
.main-menu .menu-item.drop-left .sub-menu .sub-menu,
.main-menu .sub-menu .menu-item.drop-left>.sub-menu {
    left: auto;
    right: 100%;
    transform: translateX(-6px) translateY(0);
}

.main-menu .menu-item.drop-left .sub-menu li:hover>.sub-menu,
.main-menu .sub-menu .menu-item.drop-left:hover>.sub-menu {
    transform: translateX(0) translateY(0);
}

.main-menu .sub-menu a {
    display: block;
    padding: 11px 18px;
    color: var(--clr-text);
    font-size: 0.77rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition:
        background-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        padding-left var(--dur-fast) var(--ease);
}

.main-menu .sub-menu a:hover {
    background-color: var(--clr-hover-bg);
    color: var(--clr-primary);
    padding-left: 24px;
}

/* Caret style for sub-menus with children */
.main-menu .sub-menu .menu-item-has-children>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-menu .sub-menu .menu-item-has-children>a::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    border-right: 0;
    margin-left: auto;
    transform: none;
}

/* Left pointing caret for drop-left menus */
.main-menu .menu-item.drop-left .sub-menu .menu-item-has-children>a::after,
.main-menu .sub-menu .menu-item.drop-left>a::after {
    border-left: 0;
    border-right: 5px solid currentColor;
}

/* ===========================
   6. FOOTER
=========================== */

.site-footer {
    background: var(--clr-white);
    max-width: 100%;
}

.footer-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.footer-main {
    padding: 48px 0 36px;
    border-top: 1px solid var(--clr-border);
}

.footer-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px 24px;
    margin-bottom: 40px;
}

.footer-row:last-child {
    margin-bottom: 0;
    grid-template-columns: repeat(4, 1fr);
}

.footer-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--clr-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--clr-primary);
    display: inline-block;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--clr-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    display: inline-block;
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.footer-links a:hover {
    color: var(--clr-primary);
    padding-left: 4px;
}

.footer-contact {
    font-style: normal;
    color: var(--clr-muted);
    font-size: 0.85rem;
}

.footer-contact p {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.footer-contact a {
    color: var(--clr-muted);
    transition: color var(--dur-fast) var(--ease);
}

.footer-contact a:hover {
    color: var(--clr-primary);
}

.footer-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--clr-primary);
}

.footer-social {
    margin-top: 20px;
}

.footer-social-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text);
    margin-bottom: 12px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--clr-white);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.social-icon svg {
    width: 16px;
    height: 16px;
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-facebook {
    background: #3b5998;
}

.social-twitter {
    background: #1da1f2;
}

.social-youtube {
    background: #ff0000;
}

.social-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.footer-map {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    line-height: 0;
}

.footer-map iframe {
    width: 100%;
    min-height: 180px;
}

.footer-logos {
    padding: 24px 0;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-white);
}

.footer-logos-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.gov-logo {
    flex: 1;
    min-width: 160px;
    text-align: center;
    padding: 12px 16px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.gov-logo:hover {
    border-color: var(--clr-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gov-logo-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-bottom {
    background: var(--clr-footer-bg);
    padding: 16px 0;
}

.footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px 24px;
}

.footer-copyright,
.footer-credit,
.footer-policies {
    font-size: 0.78rem;
    color: var(--clr-light);
}

.footer-credit .heart {
    color: var(--clr-primary);
}

.footer-policies a {
    color: var(--clr-light);
    transition: color var(--dur-fast) var(--ease);
}

.footer-policies a:hover {
    color: var(--clr-primary);
}

.policy-sep {
    margin: 0 6px;
    color: #ccc;
}

/* ===========================
   7. RESPONSIVE — TABLET / MOBILE
      ≤ 991px: switch to mobile nav
=========================== */

@media (max-width: 991px) {

    /* Hide accessibility bar on mobile */
    .accessibility-bar {
        display: none !important;
    }

    /* Show mobile-only menu item */
    .mobile-only-menu-item {
        display: block !important;
    }

    /* ---- Header top: 4-column layout on mobile ---- */
    .header-top {
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        padding: 6px 16px;
        gap: 4px 12px;
        align-items: center;
    }

    .header-logo-jnafau {
        grid-column: 1;
        grid-row: 1;
    }

    .header-logo-telangana {
        grid-column: 2;
        grid-row: 1;
    }

    .header-title {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 2px;
        text-align: center;
    }

    .header-actions {
        grid-column: 4;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        justify-self: end;
    }

    /* Shrink logos on mobile */
    .header-logo-jnafau img,
    .header-logo-telangana img {
        width: 48px;
    }

    /* Mobile title text (allows wrapping up to two lines) */
    .header-title h1 {
        font-size: clamp(0.85rem, 3.6vw, 1.15rem);
        line-height: 1.25;
        letter-spacing: 0.01em;
        white-space: normal;
    }

    .header-subtitle {
        font-size: clamp(0.48rem, 2vw, 0.6rem);
        letter-spacing: 0.12em;
        margin-top: 2px;
        font-weight: 700;
    }

    /* Show hamburger */
    .menu-toggle {
        display: flex;
        width: 40px;
        height: 40px;
    }

    /* --------------------------------------------------------
       MOBILE NAV PANEL
       Positioned absolute below the header so it overlays
       page content. No page-push shifting.
    -------------------------------------------------------- */
    .main-navigation {
        position: fixed;
        top: 100%;
        /* flush below .site-header */
        left: 0;
        width: 100%;
        background: var(--clr-white);
        border-top: 2px solid var(--clr-primary);
        border-bottom: 1px solid var(--clr-border);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
        z-index: 999;

        /* Closed state — slide up + fade */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition:
            max-height 0.38s var(--ease),
            opacity 0.22s var(--ease),
            visibility 0.22s var(--ease);
    }

    /* Open state — triggered by JS adding .is-open to nav */
    .main-navigation.is-open {
        max-height: none;
        /* enough for all 11 items + sub-menus */
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 1;
        visibility: visible;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
        height: 100vh !important;
    }

    body.mobile-menu-open .site-header {
        position: fixed;
        left: 0;
    }

    /* ---- Mobile menu list ---- */
    .main-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    /* Each top-level item — full width, bordered */
    .main-menu>.menu-item {
        width: 100%;
        border-bottom: 1px solid #ebebeb;
        position: static;
        /* sub-menus are inline, not absolute */
    }

    .main-menu>.menu-item:last-child {
        border-bottom: none;
    }

    /* Top-level link — full-width row with arrow on right */
    .main-menu>.menu-item>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 14px 18px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--clr-text);
        white-space: nowrap;
        background: none;
        transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    /* Highlight active / hovered */
    .main-menu>.menu-item>a:hover,
    .main-menu>.menu-item.is-open>a,
    .main-menu>.menu-item.current-menu-item>a,
    .main-menu>.menu-item.current-menu-ancestor>a,
    .main-menu>.menu-item.current-menu-parent>a {
        color: var(--clr-primary);
        background-color: var(--clr-hover-bg);
    }

    /* Rotate arrow when sub-menu is open */
    .main-menu>.menu-item.is-open>a .nav-arrow {
        transform: rotate(180deg);
        color: var(--clr-primary);
    }

    /* ---- Mobile sub-menu accordion ---- */
    /* Override desktop absolute positioning completely */
    .main-menu .sub-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100%;
        background: #f7f8f9;
        border: none !important;
        box-shadow: none;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        /* Accordion: closed */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s var(--ease);
    }

    /* Accordion: open — JS adds .is-open to the parent <li> */
    .main-menu li.is-open>.sub-menu {
        max-height: 1200px;
        /* large enough for nested sub-menus */
        border-top: 1px solid #e8e8e8 !important;
    }

    /* Sub-menu links */
    .main-menu .sub-menu li {
        border-bottom: 1px solid #ececec;
    }

    .main-menu .sub-menu li:last-child {
        border-bottom: none;
    }

    .main-menu .sub-menu a {
        display: block;
        padding: 11px 18px 11px 32px;
        font-size: 0.74rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--clr-muted);
        white-space: normal;
        transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    /* Indent level-3 links */
    .main-menu .sub-menu .sub-menu a {
        padding-left: 48px;
    }

    /* Indent level-4 links */
    .main-menu .sub-menu .sub-menu .sub-menu a {
        padding-left: 64px;
    }

    .main-menu .sub-menu a:hover {
        background-color: #eef0f2;
        color: var(--clr-primary);
    }

    /* Disable desktop hover-open on mobile */
    .main-menu .menu-item-has-children:hover>.sub-menu,
    .main-menu .menu-item-has-children:focus-within>.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Reset caret orientation on mobile: all point down */
    .main-menu .sub-menu .menu-item-has-children>a::after {
        margin-left: 6px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        border-bottom: 0;
        transform: none !important;
    }

    .main-menu li.is-open>a::after {
        transform: rotate(180deg) !important;
    }

    .main-menu .sub-menu li.is-open>a::after {
        transform: rotate(180deg) !important;
    }

    /* Footer tweaks */
    .footer-row,
    .footer-row:last-child {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }

    .footer-bottom-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ===========================
   8. RESPONSIVE — SMALL MOBILE
      ≤ 576px
=========================== */

@media (max-width: 576px) {
    .header-top {
        padding: 8px 12px;
        gap: 6px 10px;
    }

    .header-logo-jnafau img,
    .header-logo-telangana img {
        width: 54px;
    }

    .header-title h1 {
        font-size: clamp(0.78rem, 3.4vw, 0.95rem);
    }

    .header-subtitle {
        font-size: clamp(0.5rem, 2vw, 0.65rem);
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .main-navigation.is-open {
        max-height: 78vh;
        /* full-screen friendly */
    }

    .footer-container {
        padding: 0 14px;
    }

    .footer-main {
        padding: 28px 0 20px;
    }

    .footer-row,
    .footer-row:last-child {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-logos-inner {
        flex-direction: column;
    }

    .gov-logo {
        width: 100%;
        min-width: 0;
    }

    .footer-bottom-inner {
        gap: 8px;
    }
}

/* ===========================
   9. REDUCED MOTION
=========================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   10. HERO SLIDER STYLE
   ============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    aspect-ratio: 2.73;
    min-height: 220px;
}

@media (max-width: 991px) {
    .hero-slider {
        aspect-ratio: 2.2;
    }
}

@media (max-width: 576px) {
    .hero-slider {
        aspect-ratio: 1.8;
    }
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--clr-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider-dot.active {
    background-color: var(--clr-white);
    transform: scale(1.2);
}

.slider-dot:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   11. CUSTOM GENERAL UTILITIES & LAYOUTS
   ============================================================ */

.container-custom {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

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

.section-subtitle {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clr-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

/* ============================================================
   12. GENERAL HOMEPAGE DESIGN SYSTEM UTILITIES
   ============================================================ */

.section-title-ref {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.section-title-ref h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8A1F11;
    /* Dark maroon red */
    text-transform: uppercase;
    position: relative;
    padding-left: 14px;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin: 0;
}

.section-title-ref h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #000000;
    /* Black vertical bar */
}

/* Custom scroll bar for containers that scroll if there are many items */
.scroll-container-ref {
    overflow-y: auto;
}

.scroll-container-ref::-webkit-scrollbar {
    width: 6px;
}

.scroll-container-ref::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.scroll-container-ref::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
}

.scroll-container-ref::-webkit-scrollbar-thumb:hover {
    background: #b1b1b1;
}

/* ============================================================
   13. NOTIFICATIONS SECTION ref-style (Pink box layout)
   ============================================================ */

.notifications-section-wrapper {
    padding: 30px 0;
    background-color: #ffffff;
}

.notifications-pink-box {
    background-color: #FAF0EF;
    border-radius: 4px;
    padding: 24px 30px;
    box-shadow: 0 2px 8px rgba(138, 31, 17, 0.04);
}

.notifications-list-ref {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notifications-list-ref li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(138, 31, 17, 0.15);
}

.notifications-list-ref li:last-child {
    border-bottom: none;
}

.notifications-list-ref a {
    font-size: 1.15rem;
    font-weight: 700;
    color: #8A1F11;
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.2s ease;
    flex-grow: 1;
}

.notifications-list-ref a:hover {
    color: #000000;
}

.badge-new-ref,
.new-badge-ref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #8A1F11;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.05em;
    line-height: 1;
    border: 1px solid #8A1F11;
    animation: subtle-blink 1.5s infinite ease-in-out;
}

@keyframes subtle-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.95);
    }
}

/* ============================================================
   14. ABOUT SECTION ref-style (Left text/images, Right VC message)
   ============================================================ */

.about-section-wrapper {
    padding: 50px 0;
    background-color: #ffffff;
}

.about-grid-ref {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 991px) {
    .about-grid-ref {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.about-text-ref p {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.75;
    margin-bottom: 12px;
    text-align: justify;
}

.about-text-ref .highlight-orange {
    color: #d35400;
    /* Darker premium orange */
    font-weight: 600;
}

.about-text-ref .read-more-link {
    color: #d35400;
    font-weight: 600;
    transition: text-decoration 0.2s ease;
}

.about-text-ref .read-more-link:hover {
    text-decoration: underline;
}

.about-images-row {
    display: flex;
    gap: 20px;
}

@media (max-width: 576px) {
    .about-images-row {
        flex-direction: column;
        gap: 16px;
    }
}

.about-image-item {
    flex: 1;
    border: 1px solid #dddddd;
    padding: 0;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.about-image-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 4px 4px 0 0;
}

.about-card-content {
    padding: 18px 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #333333;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding: 8px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    letter-spacing: 0.03em;
}

.about-card-desc {
    font-size: 0.78rem;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 18px;
    text-align: center;
}

.btn-learn-more {
    display: inline-block;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 3px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease;
}

.btn-learn-more:hover {
    background-color: #000000;
}

/* About slider layout */
.about-slider-container {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.about-slides {
    position: relative;
    width: 100%;
    min-height: 480px;
}

.about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.about-slide.active {
    position: relative;
    opacity: 1;
    z-index: 2;
    visibility: visible;
}

.about-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.about-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cccccc;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.about-slider-dot.active {
    background-color: #666666;
    transform: scale(1.2);
}

/* VC Card card layout */
.vc-card-ref {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 24px 20px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.vc-avatar-wrapper {
    width: 156px;
    height: 156px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 24px;
    border: 4px double #8a8a8a;
    padding: 4px;
    background-color: #ffffff;
}

.vc-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.vc-info-ref h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 6px;
}

.vc-info-ref .vc-title {
    font-size: 0.85rem;
    color: #666666;
    margin-bottom: 4px;
}

.vc-info-ref .vc-org {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 24px;
}

.vc-info-ref .vc-quote {
    font-size: 0.85rem;
    font-style: italic;
    color: #555555;
    margin: 14px 0 20px;
    line-height: 1.6;
    font-family: Georgia, serif;
}

.vc-info-ref {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vc-button-wrapper {
    margin-top: auto;
    margin-bottom: 8px;
}

.btn-vc-readmore {
    display: inline-block;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-vc-readmore:hover {
    background-color: #000000;
}

/* ============================================================
   15. COURSES SECTION ref-style
   ============================================================ */
.courses-section-ref {
    padding: 50px 0;
    background-color: #ffffff;
}

.courses-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    /* anchor for the full-width dropdown list */
}

/* ------------------------------------------------------------------
   COURSES CUSTOM DROPDOWN
   The <ul> list is a direct child of .courses-header-row which has
   position:relative — so left:0/right:0 on the list = full row width.
   ------------------------------------------------------------------ */

/* Hidden native select (keeps existing JS filter working) */
.course-select-hidden {
    display: none !important;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

/* Wrapper — position:static so the list escapes to .courses-header-row */
.courses-dropdown-wrapper {
    position: static;
    box-sizing: border-box;
}

/* ---- Trigger button ---- */
.course-custom-select {
    position: relative;
    /* keeps the arrow icon placed correctly */
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 10px 40px 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444444;
    cursor: pointer;
    min-width: 220px;
    max-width: 340px;
    width: auto;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-custom-select:focus,
.course-custom-select[aria-expanded="true"] {
    border-color: #8A1F11;
    box-shadow: 0 0 0 3px rgba(138, 31, 17, 0.15);
}

/* Selected label — wraps if it's a long course name */
.course-custom-select__selected {
    display: block;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    padding-right: 4px;
}

/* Chevron arrow */
.course-custom-select__arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #666666;
    pointer-events: none;
    transition: transform 0.25s ease;
}

.course-custom-select__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.course-custom-select[aria-expanded="true"] .course-custom-select__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ---- Dropdown list ----
   Anchored to .courses-header-row (position:relative).
   left:0 / right:0 = full width of the courses header row.
*/
.course-custom-select__list {
    display: none;
    position: absolute;
    top: 100%;
    /* flush below the header row bottom edge */
    left: 0;
    right: 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    max-height: 340px;
    overflow-y: auto;
    box-sizing: border-box;
}

.course-custom-select__list.is-open {
    display: block;
}

/* ---- Option items ---- */
.course-custom-select__item {
    padding: 11px 16px;
    font-size: 0.83rem;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    line-height: 1.45;
    white-space: normal;
    /* allow text to wrap */
    word-break: break-word;
    border-bottom: 1px solid #e8e8e8;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.course-custom-select__item:last-child {
    border-bottom: none;
}

/* Alternating background for easy differentiation */
.course-custom-select__item:nth-child(odd) {
    background-color: #ffffff;
}

.course-custom-select__item:nth-child(even) {
    background-color: #faf6f5;
    /* extremely light maroon/grey tint */
}

/* First "Select Course" placeholder */
.course-custom-select__item:first-child {
    background-color: #f6ebea;
    color: #666666;
    font-style: italic;
    border-bottom: 2px solid #eaccba;
}

.course-custom-select__item:hover {
    background-color: #8A1F11 !important;
    color: #ffffff !important;
}

.course-custom-select__item[aria-selected="true"]:not([data-value="all"]) {
    background-color: #5d140b !important;
    /* darker maroon for selected state */
    color: #ffffff !important;
    font-weight: 700;
}

/* ---- Mobile: trigger goes full width ---- */
@media (max-width: 575px) {
    .courses-dropdown-wrapper {
        width: 100%;
    }

    .course-custom-select {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        font-size: 0.82rem;
    }

    .course-custom-select__item {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}

.courses-grid-ref {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}

@media (max-width: 1199px) {
    .courses-grid-ref {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .courses-grid-ref {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .courses-grid-ref {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .courses-grid-ref {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.course-card-ref {
    background-color: #ffffff;
    border: 1px solid #8A1F11;
    border-radius: 4px;
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 220px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.course-card-ref.hidden {
    display: none !important;
}

.course-card-ref:hover {
    box-shadow: 0 6px 18px rgba(127, 168, 143, 0.15);
    transform: translateY(-2px);
}

.course-icon-wrapper {
    width: 44px;
    height: 44px;
    color: #444444;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.course-title-ref {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-readmore-ref {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8A1F11 !important;
    /* Maroon red */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.course-readmore-ref:hover {
    color: #000000 !important;
}

/* Pagination Dots */
.courses-pagination-ref {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.courses-pagination-ref .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dddddd;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.courses-pagination-ref .dot.active {
    background-color: #333333;
    transform: scale(1.2);
}

/* ============================================================
   16. LATEST NEWS & EVENTS columns side-by-side
   ============================================================ */

.latest-section-wrapper {
    padding: 50px 0;
    background-color: #ffffff;
}

.news-events-grid-ref {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

@media (max-width: 767px) {
    .news-events-grid-ref {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.latest-column-ref {
    display: flex;
    flex-direction: column;
}

/* Scrollable area - scrolls only if container has many items */
.column-list-scrollable {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 12px;
    margin-bottom: 24px;
}

.list-item-ref {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px dashed #e0e0e0;
}

.list-item-ref:last-child {
    border-bottom: none;
}

/* News red badge style */
.date-badge-news {
    width: 56px;
    height: 56px;
    background-color: #c0392b;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.1);
}

.date-badge-news .day {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.date-badge-news .month {
    font-size: 0.65rem;
    font-weight: 600;
}

/* Event grey badge style */
.date-badge-event {
    width: 56px;
    height: 56px;
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-top: 3px solid #333333;
    color: #333333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.date-badge-event .day {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.date-badge-event .month {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.item-content-ref {
    flex-grow: 1;
}

.item-link-ref {
    font-size: 0.88rem;
    font-weight: 600;
    color: #333333;
    line-height: 1.45;
    margin-bottom: 6px;
    display: block;
    transition: color 0.2s ease;
}

.item-link-ref:hover {
    color: #8A1F11;
}

.item-meta-ref {
    font-size: 0.74rem;
    color: #777777;
    display: flex;
    gap: 12px;
}

.column-btn-wrapper {
    margin-top: auto;
}

.btn-viewmore-ref {
    display: inline-block;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-viewmore-ref:hover {
    background-color: #000000;
}

/* ============================================================
   17. ANNOUNCEMENTS SECTION ref-style (Vertical tab container)
   ============================================================ */

.announcements-section-wrapper {
    padding: 50px 0;
    background-color: #ffffff;
}

.announcements-tab-box-ref {
    background-color: #EFEFEF;
    border-radius: 4px;
    padding: 24px;
}

.announcements-tab-grid {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    gap: 24px;
}

@media (max-width: 767px) {
    .announcements-tab-grid {
        grid-template-columns: 1fr;
    }
}

.announcements-tabs-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 767px) {
    .announcements-tabs-left {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
}

.tab-item-btn {
    background-color: #bbbbbb;
    color: #ffffff;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 16px 20px;
    text-align: left;
    cursor: pointer;
    position: relative;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 767px) {
    .tab-item-btn {
        flex: 1;
        min-width: 120px;
        text-align: center;
        padding: 12px 10px;
    }
}

.tab-item-btn.active {
    background-color: #c0392b;
    color: #ffffff;
}

.tab-item-btn .tab-pointer {
    display: none;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #c0392b;
    z-index: 10;
}

.tab-item-btn.active .tab-pointer {
    display: block;
}

@media (max-width: 767px) {
    .tab-item-btn.active .tab-pointer {
        display: none;
    }
}

.announcements-content-right {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.announcements-panel {
    display: none;
}

.announcements-panel.active {
    display: block;
}

.panel-scroll-container {
    height: 340px;
    overflow-y: auto;
    padding-right: 12px;
    margin-bottom: 20px;
}

.panel-list-ref {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-list-ref li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eeeeee;
}

.panel-list-ref li:last-child {
    border-bottom: none;
}

.blue-bullet {
    width: 4px;
    height: 18px;
    border-radius: 0;
    margin-right: 14px;
    flex-shrink: 0;
}

.panel-list-ref li:nth-child(4n+1) .blue-bullet {
    background-color: #0022ff;
}

.panel-list-ref li:nth-child(4n+2) .blue-bullet {
    background-color: #2e7d32;
}

.panel-list-ref li:nth-child(4n+3) .blue-bullet {
    background-color: #00b0ff;
}

.panel-list-ref li:nth-child(4n+4) .blue-bullet {
    background-color: #d32f2f;
}

.panel-list-ref a {
    font-size: 0.88rem;
    font-weight: 500;
    color: #333333;
    line-height: 1.45;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.2s ease;
}

.panel-list-ref a:hover {
    color: #c0392b;
}

.new-badge-ref {
    background-color: #c0392b;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 12px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.panel-bottom-btn {
    margin-top: auto;
    text-align: right;
}

.btn-announcements-viewmore {
    display: inline-block;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-announcements-viewmore:hover {
    background-color: #000000;
}

/* ============================================================
   18. GALLERY SECTION ref-style (Dropdown filter + slider arrow overlay)
   ============================================================ */

.gallery-section-wrapper {
    padding: 50px 0;
    background-color: #ffffff;
}

.gallery-header-ref {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 16px;
}

.gallery-header-ref .section-title-ref {
    margin-bottom: 0;
}

.gallery-actions-ref {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gallery-select-ref {
    padding: 8px 16px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    min-width: 140px;
    color: #333333;
}

.btn-gallery-viewmore {
    display: inline-block;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-gallery-viewmore:hover {
    background-color: #000000;
}

@media (max-width: 767px) {
    .gallery-header-ref {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .gallery-actions-ref {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .gallery-actions-ref {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .gallery-select-ref {
        width: 100%;
    }

    .btn-gallery-viewmore {
        text-align: center;
    }
}

.gallery-carousel-wrapper {
    position: relative;
    width: 100%;
}

.gallery-slider-window {
    overflow: hidden;
    width: 100%;
    border-radius: 4px;
}

.gallery-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease-in-out;
}

.gallery-slide-item {
    flex: 0 0 calc(33.333% - 13.333px);
    aspect-ratio: 1.5;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

@media (max-width: 991px) {
    .gallery-slide-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 575px) {
    .gallery-slide-item {
        flex: 0 0 100%;
    }
}

.gallery-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #c0392b;
    /* Red circle arrows matching screenshot */
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 20;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.carousel-arrow:hover {
    background-color: #a93226;
    transform: translateY(-50%) scale(1.05);
}

.carousel-arrow.prev {
    left: -22px;
}

.carousel-arrow.next {
    right: -22px;
}

@media (max-width: 1239px) {
    .carousel-arrow.prev {
        left: 10px;
    }

    .carousel-arrow.next {
        right: 10px;
    }
}

/* ============================================================
   19. FACULTY PAGE — banner + profile + PA section
   Shared by:  single-faculty.php  &  pages/page-faculty.php
   ============================================================ */

/* ---- Banner ---- */
.faculty-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    /* fallback colour while image loads */
    aspect-ratio: 3.4;
    min-height: 180px;
}

.faculty-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.faculty-banner__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c2c2c 0%, #444 100%);
}

/* Dark gradient overlay so title is always readable */
.faculty-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.55) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 28px 40px;
    gap: 10px;
}

.faculty-banner__title {
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.faculty-banner__role-badge {
    background-color: var(--clr-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin-top: 4px;
}

@media (max-width: 767px) {
    .faculty-banner {
        aspect-ratio: 2.2;
    }

    .faculty-banner__overlay {
        padding: 18px 20px;
    }
}

@media (max-width: 480px) {
    .faculty-banner {
        aspect-ratio: 1.8;
    }
}

/* ---- Content wrapper ---- */
.faculty-content-wrapper {
    padding: 48px 0 64px;
    background-color: #ffffff;
}

/* ---- Section heading (re-uses existing .section-title-ref style) ---- */
.faculty-section-heading {
    margin-bottom: 22px;
}

/* ---- Profile two-column grid ---- */
.faculty-profile-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
    margin-bottom: 48px;
}

@media (max-width: 991px) {
    .faculty-profile-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Photo rises above text on mobile */
    .faculty-profile-photo {
        order: -1;
    }

    .faculty-profile-text {
        order: 1;
    }
}

/* ---- Left column: text ---- */
.faculty-profile-text {
    /* nothing extra — inherits body font */
}

/* Faculty name & role tags shown above the WYSIWYG */
.faculty-meta {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--clr-border);
}

.faculty-meta__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 4px;
}

.faculty-meta__role {
    font-size: 0.88rem;
    color: var(--clr-muted);
    font-style: italic;
}

.faculty-meta__email a,
.faculty-meta__phone a,
.faculty-photo-card__email,
.faculty-photo-card__phone {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.faculty-meta__email a:hover,
.faculty-meta__phone a:hover {
    color: var(--clr-accent);
}

/* WYSIWYG content styling */
.faculty-wysiwyg {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.78;
    text-align: justify;
}

.faculty-wysiwyg p {
    margin-bottom: 14px;
}

.faculty-wysiwyg p:last-child {
    margin-bottom: 0;
}

.faculty-wysiwyg strong {
    color: var(--clr-text);
    font-weight: 700;
}

.faculty-wysiwyg a {
    color: var(--clr-primary);
    text-decoration: underline;
    transition: color var(--dur-fast) var(--ease);
}

.faculty-wysiwyg a:hover {
    color: var(--clr-primary-dk);
}

.faculty-wysiwyg ul,
.faculty-wysiwyg ol {
    margin: 0 0 14px 20px;
    padding: 0;
}

.faculty-wysiwyg ul {
    list-style: disc;
}

.faculty-wysiwyg ol {
    list-style: decimal;
}

.faculty-wysiwyg li {
    margin-bottom: 6px;
}

.faculty-wysiwyg h3,
.faculty-wysiwyg h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 20px 0 8px;
}

/* ---- Right column: photo card ---- */
.faculty-profile-photo {
    /* sticky on desktop so it stays visible while text scrolls */
    position: sticky;
    top: 24px;
}

.faculty-photo-card {
    background-color: #fcfcfc;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.faculty-photo-card__img {
    width: 100%;
    height: 300px;
    aspect-ratio: 0.85;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.faculty-photo-card__caption {
    padding: 16px 14px 18px;
    border-top: 2px solid var(--clr-primary);
    background-color: #ffffff;
}

.faculty-photo-card__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 4px;
}

.faculty-photo-card__role {
    font-size: 0.78rem;
    color: var(--clr-muted);
    font-style: italic;
}

@media (max-width: 991px) {
    .faculty-profile-photo {
        position: static;
        max-width: 100%;
        /* full width on mobile */
        margin: 0;
    }

    /* Switch photo to landscape / horizontal crop on mobile */
    .faculty-photo-card__img {
        aspect-ratio: 16 / 9;
        /* wide & horizontal */
        object-position: center top;
    }

    /* Caption sits in a row beside the image on mobile (optional enhancement) */
    .faculty-photo-card__caption {
        padding: 12px 16px;
    }
}

/* ---- PA Section ---- */
.faculty-pa-section {
    padding-top: 36px;
    border-top: 1px solid var(--clr-border);
    margin-top: 16px;
}

/* 2-column grid — wraps at 2 per row for any number of PAs */
.faculty-pa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 600px) {
    .faculty-pa-grid {
        grid-template-columns: 1fr;
        /* single column on small phones */
    }
}

/* Individual PA card */
.faculty-pa-card {
    background-color: #fafafa;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

/* Coloured header bar inside each card */
.faculty-pa-card__header {
    background-color: var(--clr-primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 10px 16px;
}

/* Each data row inside a card */
.faculty-pa-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    padding: 11px 16px;
    border-bottom: 1px solid #eeeeee;
    gap: 10px;
}

.faculty-pa-row--with-label {
    grid-template-columns: 1fr;
}

.faculty-pa-row:last-child {
    border-bottom: none;
}

.faculty-pa-row:nth-child(even) {
    background-color: #f5f5f5;
}

.faculty-pa-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.faculty-pa-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text);
}

.faculty-pa-link {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.faculty-pa-link:hover {
    color: var(--clr-primary-dk);
    text-decoration: underline;
}

@media (max-width: 576px) {

    .faculty-pa-row,
    .faculty-pa-row--with-label {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px 14px;
    }

    .faculty-pa-label {
        font-size: 0.68rem;
    }
}

/* ============================================================
   20. ABOUT SIDEBAR PAGE
   ============================================================ */

.about-sidebar-content-wrapper {
    padding: 48px 0 64px;
    background-color: #ffffff;
}

.about-sidebar-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}

.about-sidebar-card {
    background-color: #ffffff;
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Sidebar card heading (e.g. "About", "Quick Links") */
.about-sidebar-card-title {
    padding: 16px 20px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-left: 4px solid var(--clr-primary, #c0392b);
    border-bottom: 1px solid var(--clr-border, #e0e0e0);
    background-color: #ffffff;
    line-height: 1.2;
    /* ensure title is never confused with active menu items */
    pointer-events: none;
    user-select: none;
}

/* Dynamic Sidebar Navigation Menu */
.about-sidebar-menu,
.about-sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-sidebar-menu>li {
    border-bottom: 1px solid var(--clr-border, #eeeeee);
    position: relative;
}

.about-sidebar-menu>li:last-child {
    border-bottom: none;
}

.about-sidebar-menu li a {
    display: block;
    padding: 14px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #444444;
    text-decoration: none;
    transition: all 0.2s ease;
}

.about-sidebar-menu li a:hover {
    color: var(--clr-primary, #8A1F11);
    background-color: #fafafa;
}

/* Active trails — red text + subtle background only; NO left border (that belongs to the title) */
.about-sidebar-menu li.current-menu-item>a,
.about-sidebar-menu li.current-menu-ancestor>a,
.about-sidebar-menu li.current-menu-parent>a {
    color: var(--clr-primary, #8A1F11);
    font-weight: 700;
    background-color: #fdf8f8;
}

.about-sidebar-menu>li.current-menu-item>a,
.about-sidebar-menu>li.current-menu-ancestor>a {
    /* Active items: distinguished by color alone — no border-left so they don't clash with the card title's red bar */
    padding-left: 20px;
}

/* Submenu Lists */
.about-sidebar-menu .sub-menu {
    background-color: #fafafa;
    border-top: 1px solid #f2f2f2;
    display: none;
}

/* Auto open for active page trail */
.about-sidebar-menu li.current-menu-ancestor>.sub-menu,
.about-sidebar-menu li.current-menu-parent>.sub-menu,
.about-sidebar-menu li.is-expanded>.sub-menu {
    display: block;
}

/* Submenu link spacing and typography */
.about-sidebar-menu .sub-menu li {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
}

.about-sidebar-menu .sub-menu li:last-child {
    border-bottom: none;
}

.about-sidebar-menu .sub-menu a {
    padding: 11px 20px 11px 35px;
    font-size: 0.86rem;
    font-weight: 500;
    color: #666666;
}

.about-sidebar-menu .sub-menu .sub-menu a {
    padding-left: 50px;
    font-size: 0.82rem;
}

/* Submenu Accordion Toggle Buttons */
.sidebar-menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    z-index: 10;
    transition: transform 0.2s ease, color 0.2s ease;
}

.about-sidebar-menu .sub-menu .sidebar-menu-toggle {
    height: 40px;
    width: 40px;
}

.sidebar-menu-toggle:hover {
    color: var(--clr-primary, #8A1F11);
}

.sidebar-menu-toggle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.25s ease;
}

.about-sidebar-menu li.is-expanded>.sidebar-menu-toggle::after,
.about-sidebar-menu li.current-menu-ancestor>.sidebar-menu-toggle::after,
.about-sidebar-menu li.current-menu-parent>.sidebar-menu-toggle::after {
    transform: rotate(45deg);
}

/* Right Content styling */
.about-sidebar-content {
    /* aligns with left sidebar top padding */
}

.about-content-header {
    margin-bottom: 24px;
}

.about-content-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--clr-primary, #8A1F11);
    line-height: 1.15;
}

.about-wysiwyg {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.78;
    text-align: justify;
}

.about-wysiwyg p {
    margin-bottom: 14px;
}

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

.about-wysiwyg strong {
    color: var(--clr-text, #333333);
    font-weight: 700;
}

.about-wysiwyg a {
    color: var(--clr-primary, #8A1F11);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.about-wysiwyg a:hover {
    color: var(--clr-primary-dk, #63140a);
}

.about-wysiwyg ul,
.about-wysiwyg ol {
    margin: 0 0 14px 20px;
    padding: 0;
}

.about-wysiwyg ul {
    list-style: disc;
}

.about-wysiwyg ol {
    list-style: decimal;
}

.about-wysiwyg li {
    margin-bottom: 6px;
}

.about-wysiwyg h3,
.about-wysiwyg h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    margin: 24px 0 12px;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .about-sidebar-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-sidebar-left {
        order: -1;
    }

    .about-sidebar-card {
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    }

    .about-sidebar-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 20px;
        background-color: #fafafa;
        border: none;
        border-top: 1px solid #eeeeee;
        cursor: pointer;
        outline: none;
        text-align: left;
    }

    .mobile-toggle-label {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--clr-text, #333333);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mobile-toggle-chevron {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-right: 2px solid #555555;
        border-bottom: 2px solid #555555;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }

    .about-sidebar-mobile-toggle[aria-expanded="true"] .mobile-toggle-chevron {
        transform: rotate(-135deg);
    }

    .about-sidebar-menu-container {
        display: none;
        border-top: 1px solid #eeeeee;
        background-color: #ffffff;
    }

    .about-sidebar-menu-container.is-active {
        display: block;
    }
}

@media (min-width: 992px) {
    .about-sidebar-mobile-toggle {
        display: none !important;
    }

    .about-sidebar-menu-container {
        display: block !important;
    }
}

/* ============================================================
   21. SINGLE COURSE PAGE
   ============================================================ */

.course-banner__overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.course-banner__title {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 0;
    width: 100%;
    max-width: 900px;
}

.course-banner__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.85);
}

.course-content-wrapper {
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.course-detail-content {
    margin: 0;
}

.course-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    margin-bottom: 24px;
    line-height: 1.3;
}

.course-wysiwyg {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.78;
    text-align: justify;
}

.course-wysiwyg p {
    margin-bottom: 20px;
}

.course-wysiwyg p:last-child {
    margin-bottom: 0;
}

.course-wysiwyg ul,
.course-wysiwyg ol {
    margin: 0 0 20px 24px;
    padding: 0;
}

.course-wysiwyg ul {
    list-style: disc;
}

.course-wysiwyg ol {
    list-style: decimal;
}

.course-wysiwyg li {
    margin-bottom: 10px;
    padding-left: 4px;
}

@media (max-width: 767px) {
    .course-banner__overlay {
        padding: 20px;
    }

    .course-banner__title::after {
        max-width: 90%;
    }

    .course-detail-title {
        font-size: 1.4rem;
        margin-bottom: 18px;
    }

    .course-content-wrapper {
        padding: 40px 0 60px;
    }
}

/* ============================================================
   22. ABOUT US PAGE TEMPLATE (page-about.php)
   ============================================================ */

.about-page-main {
    background-color: #ffffff;
    padding-bottom: 80px;
}

/* Force container-custom to behave block-like for our custom layout grids */
.about-sidebar-content-wrapper .container-custom,
.courses-section-ref .container-custom,
.about-tour-section .container-custom,
.about-alumni-contact-section .container-custom,
.announcements-section-wrapper .container-custom,
.announcements-section-ref .container-custom,
.gallery-section-wrapper .container-custom,
.gallery-section-ref .container-custom,
.fm-content-wrapper .container-custom,
.gallery-content-wrapper .container-custom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.about-sidebar-grid,
.about-tour-grid,
.about-alumni-contact-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Tour Section */
.about-tour-section {
    padding: 60px 0;
    background-color: #fdfdfd;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.about-tour-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 991px) {
    .about-tour-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.about-tour-image {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.about-tour-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

.about-tour-placeholder {
    width: 100%;
    height: 300px;
    background-color: #eee;
}

.about-tour-content {
    display: flex;
    flex-direction: column;
}

.about-tour-desc p {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.75;
    margin-bottom: 16px;
    text-align: justify;
}

.about-tour-link-wrapper {
    margin-top: 15px;
}

.about-tour-more-btn {
    font-size: 0.85rem;
    font-weight: 700;
    color: #8A1F11;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.about-tour-more-btn:hover {
    color: #000000;
}

/* 5-Column Courses Grid Layout */
.courses-section-ref .courses-grid-ref {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1199px) {
    .courses-section-ref .courses-grid-ref {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

@media (max-width: 991px) {
    .courses-section-ref .courses-grid-ref {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .courses-section-ref .courses-grid-ref {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .courses-section-ref .courses-grid-ref {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Alumni & Contact Columns Section */
.about-alumni-contact-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.about-alumni-contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
}

@media (max-width: 991px) {
    .about-alumni-contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Alumni Column */
.alumni-connect-column {
    display: flex;
    flex-direction: column;
}

.alumni-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.alumni-image-item {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    aspect-ratio: 4/3;
    border: 1px solid #ddd;
}

.alumni-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.alumni-bottom-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333333;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Alumni Form */
.alumni-form {
    background: #fdfdfd;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 30px 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .alumni-form {
        padding: 20px 16px;
    }
}

.alumni-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    min-width: 0;
}

@media (max-width: 575px) {
    .alumni-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
}

.alumni-form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alumni-form-field.full-width {
    grid-column: span 2;
}

@media (max-width: 575px) {
    .alumni-form-field.full-width {
        grid-column: span 1;
    }
}

.alumni-input,
.alumni-select {
    width: 100%;
    padding: 12px 16px;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alumni-input::placeholder {
    color: #888888;
}

.alumni-input:focus,
.alumni-select:focus {
    border-color: #8A1F11;
    box-shadow: 0 0 0 3px rgba(138, 31, 17, 0.15);
    background-color: #ffffff;
}

/* File upload customizations with min-width constraints */
.alumni-file-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
    min-width: 0;
    width: 100%;
}

.alumni-file-wrapper:focus-within {
    border-color: #8A1F11;
}

.alumni-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.alumni-file-label-text {
    flex-grow: 1;
    padding: 12px 16px;
    font-size: 0.88rem;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    min-width: 0;
}

.alumni-file-btn {
    background-color: #2ecc71;
    /* Accent green for browse button */
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 20px;
    border: none;
    height: 100%;
    cursor: pointer;
    pointer-events: none;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.alumni-file-wrapper:hover .alumni-file-btn {
    background-color: #27ae60;
}

.alumni-form-submit-container {
    text-align: center;
    margin-top: 24px;
}

.alumni-submit-btn {
    background-color: #f0f0f0;
    color: #333333;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 12px 36px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.alumni-submit-btn:hover {
    background-color: #e2e2e2;
    border-color: #bbb;
    color: #000000;
}

/* Contact Column */
.contact-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.contact-wysiwyg {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.75;
    word-break: break-word;
}

.contact-wysiwyg p {
    margin-bottom: 20px;
}

.contact-wysiwyg strong,
.contact-wysiwyg b {
    color: #333333;
    font-weight: 700;
}

/* ============================================================
   PEOPLE PAGE (page-people.php)
   3-column faculty card grid grouped by Faculty Category taxonomy
   ============================================================ */

/* ── Content area overrides ─────────────────────────────────── */
.people-page .about-sidebar-content {
    min-width: 0;
}

/* ── Header row: title + filter dropdown ──────────────────── */
.people-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--clr-border);
}

.people-content-header .about-content-title {
    margin-bottom: 0;
    flex: 1 1 auto;
}

/* ── Category Filter Dropdown ─────────────────────────────── */
.people-filter-wrap {
    flex-shrink: 0;
}

.people-filter-form {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.people-cat-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 8px 38px 8px 14px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--clr-text);
    cursor: pointer;
    min-width: 200px;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    outline: none;
}

.people-cat-select:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.people-cat-select:hover {
    border-color: #bbb;
}

.people-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.65rem;
    color: var(--clr-muted);
}

/* ── Category Section ─────────────────────────────────────── */
.people-category-section {
    margin-bottom: 44px;
}

.people-category-section:last-child {
    margin-bottom: 0;
}

.people-category-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--clr-border);
}

.people-category-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.people-category-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    background: var(--clr-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Faculty Grid — 3 columns ─────────────────────────────── */
.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Faculty Card ─────────────────────────────────────────── */
.people-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.people-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

/* Photo wrapper — fixed-height so all cards align */
.people-card__photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.people-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s var(--ease);
}

.people-card:hover .people-card__photo {
    transform: scale(1.04);
}

/* Placeholder when no photo */
.people-card__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    color: #ccc;
}

.people-card__photo-placeholder svg {
    width: 56px;
    height: 56px;
}

/* Info section */
.people-card__info {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.people-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.35;
    margin: 0 0 2px;
}

.people-card__designation {
    font-size: 0.8rem;
    color: var(--clr-primary);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.people-card__meta {
    font-size: 0.76rem;
    color: var(--clr-muted);
    line-height: 1.45;
    margin: 0;
}

.people-card__meta-label {
    font-weight: 600;
    color: var(--clr-text);
    margin-right: 3px;
}

/* Email link */
.people-card__contact {
    margin-top: 4px;
}

.people-card__email-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--clr-primary);
    font-size: 0.76rem;
    font-weight: 500;
    word-break: break-all;
    transition: color var(--dur-fast) var(--ease);
    text-decoration: none;
}

.people-card__email-link:hover {
    color: var(--clr-primary-dk);
    text-decoration: underline;
}

.people-card__email-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* No results */
.people-no-results {
    color: var(--clr-muted);
    font-size: 0.9rem;
    padding: 24px 0;
}

/* ── RESPONSIVE — TABLET (≤ 1100px): 2 columns ───────────── */
@media (max-width: 1100px) {
    .people-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── RESPONSIVE — at sidebar breakpoint (≤ 900px): full width right col ── */
@media (max-width: 900px) {
    .people-content-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .people-filter-wrap {
        width: 100%;
    }

    .people-cat-select {
        width: 100%;
        min-width: 0;
    }

    .people-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ── RESPONSIVE — MOBILE (≤ 600px): 1 column ─────────────── */
@media (max-width: 600px) {
    .people-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .people-card__photo-wrap {
        aspect-ratio: 1 / 1;
    }

    .people-category-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 420px) {
    .people-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   23. FACULTY MEMBERS PAGE (page-faculty.php)
   Modern accordion: toolbar (select + search) above accordion
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────── */
.fm-page {
    background: #f7f8fa;
}

.fm-content-wrapper {
    padding: 48px 0 72px;
    background: #f7f8fa;
}

/* ── Toolbar: Title | Controls (select + search) ──────── */
.fm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 32px;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.fm-toolbar__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text, #1a1a2e);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fm-toolbar__title-bar {
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: var(--clr-primary, #c0392b);
    border-radius: 3px;
    flex-shrink: 0;
}

.fm-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* ── Dropdown ─────────────────────────────────────────── */
.fm-select-wrap {
    position: relative;
}

.fm-select {
    appearance: none;
    -webkit-appearance: none;
    background: #f8f9fb;
    border: 1.5px solid #d8dce3;
    border-radius: 8px;
    padding: 10px 42px 10px 16px;
    font-family: var(--font-main, inherit);
    font-size: 0.875rem;
    font-weight: 500;
    color: #2d2d2d;
    cursor: pointer;
    min-width: 190px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    line-height: 1.4;
}

.fm-select:hover {
    border-color: #b0b8c8;
    background: #ffffff;
}

.fm-select:focus {
    border-color: var(--clr-primary, #c0392b);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.fm-select__arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.55rem;
    color: #8a8fa8;
    line-height: 1;
}

/* ── Search bar ───────────────────────────────────────── */
.fm-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #d8dce3;
    background: #f8f9fb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fm-search-wrap:focus-within {
    border-color: var(--clr-primary, #c0392b);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.fm-search {
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #2d2d2d;
    outline: none;
    min-width: 200px;
    font-family: var(--font-main, inherit);
}

.fm-search::placeholder {
    color: #a8adb8;
}

.fm-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-primary, #c0392b);
    border: none;
    color: #ffffff;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.fm-search__btn:hover {
    background: var(--clr-primary-dk, #a93226);
}

.fm-search__btn svg {
    width: 15px;
    height: 15px;
}

/* ── No-results / empty messages ──────────────────────── */
.fm-no-results {
    text-align: center;
    color: #6b7280;
    font-size: 0.92rem;
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    margin-top: 0;
}

.fm-empty {
    color: #6b7280;
    font-size: 0.92rem;
    padding: 32px 24px;
    text-align: center;
}

/* ── Accordion container ──────────────────────────────── */
.fm-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Accordion section card ───────────────────────────── */
.fm-accordion__section {
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease;
}

.fm-accordion__section.is-open {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── Accordion header / toggle ────────────────────────── */
.fm-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
    outline: none;
    gap: 12px;
}

.fm-accordion__header:hover {
    background: #fafbfc;
}

.fm-accordion__section.is-open>.fm-accordion__header {
    background: #fff8f7;
    border-bottom: 1px solid #fce4e1;
}

.fm-accordion__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: 0.02em;
    flex: 1;
}

.fm-accordion__section.is-open>.fm-accordion__header .fm-accordion__title {
    color: var(--clr-primary, #c0392b);
}

/* Animated chevron icon */
.fm-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f3f6;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.3s ease;
    position: relative;
}

.fm-accordion__section.is-open>.fm-accordion__header .fm-accordion__icon {
    background: rgba(192, 57, 43, 0.1);
    transform: rotate(45deg);
}

.fm-accordion__icon::before,
.fm-accordion__icon::after {
    content: '';
    position: absolute;
    background: #6b7280;
    border-radius: 1.5px;
    transition: background 0.2s ease, transform 0.3s ease, opacity 0.3s ease;
}

.fm-accordion__icon::before {
    width: 11px;
    height: 2px;
}

.fm-accordion__icon::after {
    width: 2px;
    height: 11px;
}

.fm-accordion__section.is-open>.fm-accordion__header .fm-accordion__icon::before,
.fm-accordion__section.is-open>.fm-accordion__header .fm-accordion__icon::after {
    background: var(--clr-primary, #c0392b);
}

.fm-accordion__section.is-open>.fm-accordion__header .fm-accordion__icon::after {
    opacity: 0;
    transform: scaleY(0);
}

/* ── Accordion body ───────────────────────────────────── */
.fm-accordion__body {
    background: #ffffff;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}

.fm-accordion__body-inner {
    overflow: hidden;
}

.fm-accordion__section.is-open>.fm-accordion__body {
    grid-template-rows: 1fr;
    visibility: visible;
}

/* ── Faculty member row ───────────────────────────────── */
.fm-member {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #f2f4f7;
    transition: background-color 0.18s ease;
}

.fm-member:last-child {
    border-bottom: none;
}

.fm-member:hover {
    background-color: #fdfeff;
}

/* Photo */
.fm-member__photo-wrap {
    flex-shrink: 0;
    width: 140px;
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f2f5;
    border: 1px solid #e5e8ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.fm-member__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.fm-member__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8cdd8;
}

.fm-member__photo-placeholder svg {
    width: 38px;
    height: 38px;
}

/* Info */
.fm-member__info {
    flex: 1;
    min-width: 0;
}

.fm-member__name {
    font-size: 0.97rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* Details list */
.fm-member__details {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fm-member__row {
    display: flex;
    align-items: baseline;
    font-size: 0.825rem;
    line-height: 1.55;
    flex-wrap: wrap;
    gap: 0;
}

.fm-member__label {
    color: #6b7280;
    min-width: 148px;
    flex-shrink: 0;
    font-weight: 400;
}

.fm-member__label::after {
    content: ' :';
    color: #9ca3af;
}

.fm-member__value {
    color: #374151;
    margin: 0;
    padding-left: 6px;
}

.fm-member__value strong {
    font-weight: 700;
    color: #111827;
}

.fm-member__email {
    color: var(--clr-primary, #c0392b);
    text-decoration: none;
    transition: color 0.2s ease;
    word-break: break-all;
}

.fm-member__email:hover {
    text-decoration: underline;
    color: var(--clr-primary-dk, #a93226);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
    .fm-toolbar {
        padding: 18px 20px;
        gap: 14px;
    }
}

@media (max-width: 767px) {
    .fm-content-wrapper {
        padding: 32px 0 48px;
    }

    .fm-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
        gap: 12px;
        border-radius: 10px;
    }

    .fm-toolbar__controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .fm-select {
        min-width: 0;
        width: 100%;
    }

    .fm-search-wrap {
        width: 100%;
    }

    .fm-search {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .fm-accordion__header {
        padding: 16px 18px;
    }

    .fm-accordion__title {
        font-size: 0.9rem;
    }

    .fm-member {
        padding: 16px 18px;
        gap: 14px;
    }

    .fm-member__photo-wrap {
        width: 110px;
        height: 138px;
    }

    .fm-member__label {
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .fm-toolbar {
        border-radius: 8px;
    }

    .fm-accordion__section {
        border-radius: 10px;
    }

    .fm-member {
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    .fm-member__photo-wrap {
        width: 120px;
        height: 150px;
    }

    .fm-member__label {
        min-width: 108px;
    }
}

/* ============================================================
   24. GALLERY PAGE (page-gallery.php)
   ============================================================ */

.gallery-page {
    background: #f7f8fa;
}

.gallery-content-wrapper {
    padding: 48px 0 72px;
    background: #f7f8fa;
}

/* ── Gallery Toolbar ── */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 32px;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.gallery-toolbar__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text, #1a1a2e);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-toolbar__title-bar {
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: var(--clr-primary, #c0392b);
    border-radius: 3px;
    flex-shrink: 0;
}

.gallery-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* ── Category Dropdown ── */
.gallery-select-wrap {
    position: relative;
}

.gallery-select {
    appearance: none;
    -webkit-appearance: none;
    background: #f8f9fb;
    border: 1.5px solid #d8dce3;
    border-radius: 8px;
    padding: 10px 42px 10px 16px;
    font-family: var(--font-main, inherit);
    font-size: 0.875rem;
    font-weight: 500;
    color: #2d2d2d;
    cursor: pointer;
    min-width: 190px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    line-height: 1.4;
}

.gallery-select:hover {
    border-color: #b0b8c8;
    background: #ffffff;
}

.gallery-select:focus {
    border-color: var(--clr-primary, #c0392b);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.gallery-select__arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.55rem;
    color: #8a8fa8;
    line-height: 1;
}

/* ── Search Bar ── */
.gallery-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #d8dce3;
    background: #f8f9fb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gallery-search-wrap:focus-within {
    border-color: var(--clr-primary, #c0392b);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.gallery-search {
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #2d2d2d;
    outline: none;
    min-width: 200px;
    font-family: var(--font-main, inherit);
}

.gallery-search::placeholder {
    color: #a8adb8;
}

.gallery-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-primary, #c0392b);
    border: none;
    color: #ffffff;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.gallery-search__btn:hover {
    background: var(--clr-primary-dk, #a93226);
}

.gallery-search__btn svg {
    width: 15px;
    height: 15px;
}

/* ── No Results / Empty ── */
.gallery-no-results {
    text-align: center;
    color: #6b7280;
    font-size: 0.92rem;
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    margin-top: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.gallery-empty-grid {
    grid-column: 1 / -1;
    color: #6b7280;
    font-size: 0.92rem;
    padding: 48px 24px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8eaed;
}

/* ── Gallery Grid ── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ── Gallery Card ── */
.gallery-card {
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    cursor: pointer;
    outline: none;
}

.gallery-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3), 0 4px 16px rgba(0, 0, 0, 0.03);
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.gallery-card__image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eaecef;
    position: relative;
}

.gallery-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-card:hover .gallery-card__img {
    transform: scale(1.05);
}

/* Hover Overlay */
.gallery-card__hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-card__hover-overlay {
    opacity: 1;
}

.gallery-card__action-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery-card__action-icon svg {
    width: 20px;
    height: 20px;
}

.gallery-card:hover .gallery-card__action-icon {
    transform: scale(1);
}

/* Card Info Box */
.gallery-card__info-box {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    border-top: 1px solid #f2f4f7;
    background: #ffffff;
    text-align: center;
}

.gallery-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.45;
    margin: 0;
    font-family: var(--font-main, inherit);
    transition: color 0.25s ease;
}

.gallery-card:hover .gallery-card__title {
    color: var(--clr-primary, #c0392b);
}

/* ── Premium Lightbox ── */
body.gallery-lightbox-open {
    overflow: hidden !important;
}

.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.gallery-lightbox__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 11, 15, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Lightbox Main Frame */
.gallery-lightbox__main {
    position: relative;
    width: auto;
    max-width: 85vw;
    height: auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.gallery-lightbox__img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-lightbox__img.is-loaded {
    opacity: 1;
    transform: scale(1);
}

/* Loader / Spinner */
.gallery-lightbox__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gallery-lightbox__spinner-inner {
    width: 44px;
    height: 44px;
    border: 3.5px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--clr-primary, #c0392b);
    border-radius: 50%;
    animation: gallery-spin 0.8s linear infinite;
}

@keyframes gallery-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Close & Navigation Buttons */
.gallery-lightbox__close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.2s;
    z-index: 10;
    outline: none;
}

.gallery-lightbox__close-btn:hover,
.gallery-lightbox__close-btn:focus {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.05);
}

.gallery-lightbox__close-btn svg {
    width: 22px;
    height: 22px;
}

.gallery-lightbox__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.2s, opacity 0.25s;
    z-index: 10;
    outline: none;
}

.gallery-lightbox__nav-btn:hover,
.gallery-lightbox__nav-btn:focus {
    background: rgba(255, 255, 255, 0.18);
}

.gallery-lightbox__nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.gallery-lightbox__nav-btn--prev {
    left: 32px;
}

.gallery-lightbox__nav-btn--next {
    right: 32px;
}

.gallery-lightbox__nav-btn svg {
    width: 24px;
    height: 24px;
}

/* Lightbox Metadata (Caption + Counter) */
.gallery-lightbox__meta {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #ffffff;
    font-family: var(--font-main, inherit);
    gap: 24px;
}

.gallery-lightbox__caption {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.gallery-lightbox__counter {
    font-size: 0.825rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Gallery Responsive Adjustments ── */
@media (max-width: 1100px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .gallery-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
        gap: 14px;
    }

    .gallery-toolbar__controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .gallery-select {
        width: 100%;
        min-width: 0;
    }

    .gallery-search-wrap {
        width: 100%;
    }

    .gallery-search {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .gallery-lightbox__nav-btn {
        width: 46px;
        height: 46px;
    }

    .gallery-lightbox__nav-btn--prev {
        left: 16px;
    }

    .gallery-lightbox__nav-btn--next {
        right: 16px;
    }

    .gallery-lightbox__close-btn {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-card__image-container {
        aspect-ratio: 16 / 10;
    }

    .gallery-lightbox__main {
        max-width: 90vw;
    }

    .gallery-lightbox__img {
        max-height: 60vh;
    }

    .gallery-lightbox__nav-btn {
        width: 40px;
        height: 40px;
    }

    .gallery-lightbox__nav-btn svg {
        width: 20px;
        height: 20px;
    }

    .gallery-lightbox__nav-btn--prev {
        left: 8px;
    }

    .gallery-lightbox__nav-btn--next {
        right: 8px;
    }
}

/* ============================================================
   25. BASIC PAGE TEMPLATE (page-basic.php)
   ============================================================ */

.basic-content-wrapper {
    padding: 48px 0 72px;
    background-color: #ffffff;
}

.basic-page-content {
    width: 100%;
    margin: 0;
}

.basic-content-header {
    margin-bottom: 28px;
}

.basic-content-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--clr-primary, #c0392b);
    line-height: 1.15;
}

.basic-wysiwyg {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.78;
    text-align: justify;
}

.basic-wysiwyg p {
    margin-bottom: 16px;
}

.basic-wysiwyg p:last-child {
    margin-bottom: 0;
}

.basic-wysiwyg strong {
    color: var(--clr-text, #333333);
    font-weight: 700;
}

.basic-wysiwyg a {
    color: var(--clr-primary, #c0392b);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.basic-wysiwyg a:hover {
    color: var(--clr-primary-dk, #a93226);
}

.basic-wysiwyg ul,
.basic-wysiwyg ol {
    margin: 0 0 20px 24px;
    padding: 0;
}

.basic-wysiwyg ul {
    list-style: disc;
}

.basic-wysiwyg ol {
    list-style: decimal;
}

.basic-wysiwyg li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.basic-wysiwyg h3,
.basic-wysiwyg h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text, #333333);
    margin: 28px 0 14px;
}

/* ============================================================
   8. EVENTS TEMPLATE & SINGLE EVENT DETAIL STYLING
   ============================================================ */

.events-content-wrapper,
.single-event-wrapper {
    padding: 60px 0;
    background-color: #fafafa;
}

.events-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-primary, #c0392b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.events-section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--clr-primary, #c0392b);
}

/* --- Filter Bar --- */
.events-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.events-filter-left {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.events-filter-left .date-filter-group input {
    font-family: var(--font-main, inherit);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 12px 18px;
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 4px;
    min-width: 170px;
    color: var(--clr-text, #333);
    background-color: var(--clr-white, #fff);
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.events-filter-left .date-filter-group input:focus {
    border-color: var(--clr-primary, #c0392b);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.events-filter-right .events-search-wrap {
    position: relative;
    min-width: 250px;
}

.events-filter-right .events-search-wrap input {
    width: 100%;
    font-family: var(--font-main, inherit);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 12px 45px 12px 18px;
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 4px;
    color: var(--clr-text, #333);
    background-color: var(--clr-white, #fff);
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.events-filter-right .events-search-wrap input:focus {
    border-color: var(--clr-primary, #c0392b);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.events-filter-right .events-search-wrap .search-icon-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-light, #888);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.events-filter-right .events-search-wrap .search-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* --- Events Grid --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.events-no-results {
    font-size: 1.05rem;
    color: var(--clr-muted, #666);
    margin: 40px 0;
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    border: 1px dashed var(--clr-border, #e0e0e0);
    grid-column: 1 / -1;
}

/* --- Event Card --- */
.event-card {
    display: flex;
    flex-direction: column;
    background-color: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform var(--dur-fast, 0.2s) var(--ease, ease), box-shadow var(--dur-fast, 0.2s) var(--ease, ease);
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.event-card__image-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #eee;
}

.event-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.event-card:hover .event-card__img {
    transform: scale(1.04);
}

.event-card__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e5e5e5;
    color: #888888;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid var(--clr-border, #e0e0e0);
}

.event-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 12px;
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card__title a {
    color: var(--clr-text, #333);
    transition: color var(--dur-fast, 0.2s) ease;
}

.event-card__title a:hover {
    color: var(--clr-primary, #c0392b);
}

.event-card__excerpt {
    font-size: 0.88rem;
    color: var(--clr-muted, #666);
    line-height: 1.6;
    margin-bottom: 16px;
    min-height: 4.8em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card__meta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 16px;
}

.event-card__date {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-light, #888);
    letter-spacing: 0.05em;
}

.event-card__footer {
    display: flex;
    align-items: center;
}

.event-card__btn {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-primary, #c0392b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--dur-fast, 0.2s) ease;
}

.event-card__btn:hover {
    color: var(--clr-primary-dk, #a93226);
}

.event-card__btn .arrow {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform var(--dur-fast, 0.2s) ease;
}

.event-card__btn:hover .arrow {
    transform: translateX(4px);
}

/* --- Single Event Page Layout --- */
.single-event-layout {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 40px;
    align-items: start;
}

.single-event-main {
    background-color: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 6px;
    padding: 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.single-event-main__title {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--clr-text, #333);
    line-height: 1.3;
    margin-bottom: 12px;
}

.single-event-main__date {
    display: block;
    font-size: 0.9rem;
    color: var(--clr-muted, #666);
    font-weight: 600;
    margin-bottom: 24px;
}

.single-event-main__image {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 4px;
    overflow: hidden;
}

.single-event-main__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.single-event-main__content {
    margin-bottom: 35px;
}

.single-event-main__share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--clr-border, #e0e0e0);
}

.single-event-main__share-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-text, #333);
    margin-right: 8px;
    letter-spacing: 0.05em;
}

.single-event-main__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--clr-white, #fff);
    transition: transform var(--dur-fast, 0.2s) ease, filter var(--dur-fast, 0.2s) ease;
}

.single-event-main__share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.single-event-main__share-btn--facebook {
    background-color: #3b5998;
}

.single-event-main__share-btn--twitter {
    background-color: #1da1f2;
}

/* --- Single Event Sidebar --- */
.single-event-sidebar {
    position: sticky;
    top: 30px;
}

.sidebar-heading {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-text, #333);
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--clr-primary, #c0392b);
    display: inline-block;
}

.latest-events-card {
    background-color: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.latest-event-item {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.latest-event-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.latest-event-item__image-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eee;
}

.latest-event-item__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-event-item__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e5e5e5;
    color: #888;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

.latest-event-item__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.latest-event-item__title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-event-item__title a {
    color: var(--clr-text, #333);
    transition: color var(--dur-fast, 0.2s) ease;
}

.latest-event-item__title a:hover {
    color: var(--clr-primary, #c0392b);
}

.latest-event-item__date {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-light, #888);
    letter-spacing: 0.02em;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1200px) {
    .events-grid {
        gap: 20px;
    }
}

@media (max-width: 991px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-event-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .single-event-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .events-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .events-filter-left {
        flex-direction: column;
        align-items: stretch;
    }

    .events-filter-left .date-filter-group input {
        width: 100%;
    }

    .events-filter-right .events-search-wrap {
        width: 100%;
    }

    .single-event-main {
        padding: 24px;
    }
}

@media (max-width: 600px) {
    .events-grid {
        grid-template-columns: 1fr;
    }

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

    .single-event-main__title {
        font-size: 1.5rem;
    }
}

/* ============================================================
   21. PLACEMENTS PAGE
   ============================================================ */

.placements-page {
    background-color: #f5f6f7;
}

/* ---- Placements Banner Slider ---- */
.placements-banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    aspect-ratio: 3.4;
    height: 500px;
}

@media (max-width: 767px) {
    .placements-banner-slider {
        height: 300px;
        aspect-ratio: auto;
    }
}

.placements-banner-slider .faculty-banner__overlay {
    z-index: 5;
    pointer-events: none;
}

.placements-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.placements-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.placements-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 1;
}

.placements-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.placements-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.placements-banner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c2c2c 0%, #444 100%);
}

.placements-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.placements-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.placements-slider-dot.active {
    background-color: #ffffff;
}

/* ---- Info Section: Campus Tour & Placement Officer ---- */
.placements-sections-wrapper {
    padding: 48px 0;
    background-color: #f5f6f7;
}

.placements-cols-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch;
}

@media (max-width: 991px) {
    .placements-cols-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.placements-col-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.placements-col-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333333;
    text-transform: uppercase;
    position: relative;
    padding-left: 15px;
    margin: 0 0 20px 0;
    letter-spacing: 0.03em;
}

.placements-col-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background-color: #c0392b;
}

.placements-col-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.placements-col-img-wrap {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 2px;
}

.placements-col-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.placements-col-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #555555;
    flex-grow: 1;
}

.placements-col-desc p {
    margin-bottom: 12px;
}

.placements-col-desc p:last-child {
    margin-bottom: 0;
}


.placements-col-more-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c0392b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.placements-col-more-link:hover {
    color: #333333;
}

/* ---- Companies Section ---- */
.placements-companies-section {
    padding: 24px 0 48px;
    background-color: #f5f6f7;
}

.companies-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px 24px;
    margin-bottom: 30px;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
    .companies-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
}

.companies-filter-left {
    display: flex;
    align-items: center;
}

.btn-spa-registration {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #333333;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 0.05em;
    text-align: center;
}

@media (max-width: 768px) {
    .btn-spa-registration {
        width: 100%;
    }
}

.btn-spa-registration:hover {
    background-color: #c0392b;
    color: #ffffff;
    border-color: #c0392b;
}

.companies-filter-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .companies-filter-right {
        flex-direction: column;
        align-items: stretch;
    }
}

.company-select-wrap {
    position: relative;
    display: inline-block;
}

.company-category-dropdown {
    padding: 10px 35px 10px 15px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    font-size: 0.8rem;
    color: #333333;
    cursor: pointer;
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 180px;
}

.company-select-wrap::after {
    content: "▼";
    font-size: 0.55rem;
    position: absolute;
    right: 12px;
    top: 52%;
    transform: translateY(-50%);
    color: #666666;
    pointer-events: none;
}

.company-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.company-search-field {
    padding: 10px 40px 10px 15px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    font-size: 0.8rem;
    color: #333333;
    outline: none;
    min-width: 220px;
    border-radius: 0;
}

@media (max-width: 768px) {

    .company-category-dropdown,
    .company-search-field {
        width: 100%;
    }

    .company-select-wrap,
    .company-search-wrap {
        width: 100%;
    }
}

.company-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: none;
    border: none;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.company-search-btn:hover {
    color: #c0392b;
}

.search-icon-svg {
    fill: none;
}

.search-icon-svg path {
    fill: currentColor;
}

.search-icon-svg path[fill="none"] {
    fill: none;
}

.companies-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .companies-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .companies-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .companies-cards-grid {
        grid-template-columns: 1fr;
    }
}

.company-grid-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.company-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: #c2c2c2;
}

.company-card-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.fallback-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: #666666;
    text-transform: uppercase;
}

.companies-no-results,
.companies-no-data {
    text-align: center;
    padding: 40px 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #666666;
    font-size: 0.9rem;
    width: 100%;
    grid-column: 1 / -1;
}

.companies-load-more-wrap {
    text-align: right;
    margin-top: 24px;
}

.btn-companies-loadmore {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 12px;
    text-transform: uppercase;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-companies-loadmore:hover {
    color: #333333;
    transform: translateX(-3px);
}

/* ---- Contact Section ---- */
.placements-contact-section {
    padding: 48px 0 80px;
    background-color: #f5f6f7;
}

.placements-contact-header {
    margin-bottom: 24px;
}

.placements-contact-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333333;
    text-transform: uppercase;
    position: relative;
    padding-left: 15px;
    margin: 0;
    letter-spacing: 0.03em;
}

.placements-contact-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background-color: #c0392b;
}

.placements-contact-body {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
    .placements-contact-body {
        padding: 20px;
    }
}

.placements-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.placements-form-row.row-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .placements-form-row.row-3-cols {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .placements-form-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }
}

.placements-form-group {
    display: flex;
    flex-direction: column;
}

.placements-form-group.full-width {
    width: 100%;
}

.placements-input,
.placements-select,
.placements-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    color: #333333;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.placements-input::placeholder,
.placements-textarea::placeholder {
    color: #999999;
}

.placements-input:focus,
.placements-select:focus,
.placements-textarea:focus {
    border-color: #c0392b;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.placements-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23666666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.placements-textarea {
    resize: vertical;
}

.placements-form-submit-row {
    text-align: right;
    margin-top: 10px;
}

.btn-placements-submit {
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    color: #333333;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 12px 36px;
    cursor: pointer;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.btn-placements-submit:hover {
    background-color: #c0392b;
    color: #ffffff;
    border-color: #c0392b;
}

/* ---- Feedback box ---- */
.form-feedback-box {
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    border-radius: 2px;
}

.form-feedback-box.info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-left: 4px solid #1976d2;
}

.form-feedback-box.success {
    background-color: #e8f5e9;
    color: #1b5e20;
    border-left: 4px solid #2e7d32;
}

.form-feedback-box.error {
    background-color: #ffebee;
    color: #b71c1c;
    border-left: 4px solid #c62828;
}

/* ============================================================
   LIBRARY PAGE CUSTOM FIELDS (PDFs & Gallery)
   ============================================================ */

.library-pdfs-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.library-pdfs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

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

.library-pdf-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fdfdfd;
    border: 1px solid #e8eaed;
    border-radius: 4px;
    padding: 24px 28px;
    text-decoration: none !important;
    color: #333333;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.library-pdf-card:hover {
    background: #ffffff;
    border-color: #c0392b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.library-pdf-card__title {
    flex-grow: 1;
    margin-right: 16px;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.library-pdf-card:hover .library-pdf-card__title {
    color: #c0392b;
}

.library-pdf-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    transition: color 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.library-pdf-card:hover .library-pdf-card__icon {
    color: #c0392b;
    transform: translateY(2px);
}

.library-pdf-icon-svg {
    width: 32px;
    height: 32px;
}

/* Library Gallery Section */
.library-gallery-section {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #e8eaed;
    padding-top: 40px;
}

.library-gallery-header {
    margin-bottom: 24px;
}

.library-gallery-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text, #1a1a2e);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.library-gallery-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: var(--clr-primary, #c0392b);
    border-radius: 3px;
    flex-shrink: 0;
}

/* Lightbox Body Open helper */
body.gallery-lightbox-open {
    overflow: hidden !important;
}

/* Custom footer logo & credit styles */
.gov-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    /* fixed height for alignment */
    padding: 10px !important;
}

.gov-logo img {
    max-height: 48px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.fsi-logo {
    display: inline-block;
    height: 18px;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
    margin-left: 2px;
}

.highlight-fsi {
    color: #e67e22 !important;
    /* slightly orangish */
    font-weight: normal !important;
    /* remove bold */
    transition: color var(--dur-fast) var(--ease);
}

.highlight-fsi:hover {
    color: #d35400 !important;
    /* slightly darker orange on hover */
    text-decoration: underline;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.25);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.25);
    }

    70% {
        transform: scale(1);
    }
}

.heart {
    color: #ff0000 !important;
    /* red */
    display: inline-block;
    font-size: 1.25em;
    /* increased size a little */
    animation: heartbeat 1.4s infinite ease-in-out;
}

/* ======= AJAX LIVE SEARCH RESULTS ======= */
.ajax-search-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    background: var(--clr-white, #ffffff);
    border: 1px solid var(--clr-border, #e0e0e0);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    border-radius: 0 0 6px 6px;
    text-align: left;
}

@media (max-width: 991px) {
    .ajax-search-results {
        max-width: calc(100% - 32px);
    }
}

/* Loading Spinner */
.ajax-search-loading {
    padding: 24px;
    text-align: center;
    color: #777;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ajax-search-loading .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--clr-primary, #c0392b);
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
}

@keyframes ajax-spin {
    to {
        transform: rotate(360deg);
    }
}

/* No results and Error */
.ajax-search-no-results,
.ajax-search-error {
    padding: 24px;
    text-align: center;
    color: #333;
    font-size: 0.9rem;
}

.ajax-search-no-results strong {
    color: var(--clr-primary, #c0392b);
}

/* Results List */
.ajax-search-items-list {
    display: flex;
    flex-direction: column;
}

.ajax-search-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--clr-border, #f0f0f0);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    color: #333333 !important;
}

.ajax-search-item:last-child {
    border-bottom: none;
}

.ajax-search-item:hover {
    background-color: var(--clr-hover-bg, #f9f9f9);
}

/* Thumbnail and Placeholder */
.ajax-search-item-thumb,
.ajax-search-item-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 16px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajax-search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ajax-search-item-thumb-placeholder svg {
    color: #aaa;
    width: 20px;
    height: 20px;
}

/* Content Area */
.ajax-search-item-content {
    flex-grow: 1;
    min-width: 0;
}

.ajax-search-item-meta {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
}

.ajax-search-item-type {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-primary, #c0392b);
    background-color: rgba(192, 57, 43, 0.08);
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

.ajax-search-item-title {
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 3px 0;
    color: #2c3e50;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajax-search-item:hover .ajax-search-item-title {
    color: var(--clr-primary, #c0392b);
}

.ajax-search-item-excerpt {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer link */
.ajax-search-footer {
    padding: 10px 20px;
    background-color: #fdfdfd;
    border-top: 1px solid var(--clr-border, #f0f0f0);
    text-align: center;
}

.ajax-search-view-all {
    background: none;
    border: none;
    color: var(--clr-primary, #c0392b);
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    display: inline-block;
}

.ajax-search-view-all:hover {
    text-decoration: underline;
}

/* ======= STANDARD SEARCH RESULTS PAGE ======= */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

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

.search-result-card {
    background-color: var(--clr-white, #ffffff);
    border: 1px solid var(--clr-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

.search-result-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #f5f5f5;
}

.search-result-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.search-result-card:hover .search-result-card__image img {
    transform: scale(1.04);
}

.search-result-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.search-result-card__meta {
    margin-bottom: 10px;
}

.search-result-card__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-primary, #c0392b);
    background-color: rgba(192, 57, 43, 0.06);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.search-result-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.search-result-card__title a {
    color: var(--clr-text, #2c3e50);
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-result-card__title a:hover {
    color: var(--clr-primary, #c0392b);
}

.search-result-card__excerpt {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

.search-result-card__readmore {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-primary, #c0392b);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.search-result-card__readmore:hover {
    color: #333333;
}

/* Search Pagination */
.search-pagination .navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.search-pagination .nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
}

.search-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background-color: #ffffff;
    border: 1px solid var(--clr-border, #e0e0e0);
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.search-pagination .page-numbers.current,
.search-pagination .page-numbers:hover {
    background-color: var(--clr-primary, #c0392b);
    color: #ffffff;
    border-color: var(--clr-primary, #c0392b);
}

/* ============================================================
   22. DYNAMIC CONTACT FORMS (CONTACT FORM 7 STYLE OVERRIDES)
   ============================================================ */

/* Simple grid fallback for Contact Form 7 Bootstrap rows/columns */
.wpcf7-form .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.wpcf7-form .col-md-6,
.wpcf7-form .col-md-4,
.wpcf7-form .col-md-12 {
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.wpcf7-form .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.wpcf7-form .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.wpcf7-form .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.wpcf7-form .text-center {
    text-align: center;
}

.wpcf7-form .text-end {
    text-align: right;
}

@media (max-width: 768px) {

    .wpcf7-form .col-md-6,
    .wpcf7-form .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Adjust wrapper spacing */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
    width: 100%;
}

/* Alumni Form CF7 overrides */
.alumni-form-container .wpcf7-text,
.alumni-form-container .wpcf7-select,
.alumni-form-container .wpcf7-date,
.alumni-form-container .wpcf7-file {
    width: 100%;
    padding: 12px 16px;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.alumni-form-container .wpcf7-text:focus,
.alumni-form-container .wpcf7-select:focus,
.alumni-form-container .wpcf7-date:focus,
.alumni-form-container .wpcf7-file:focus {
    border-color: #8A1F11;
    box-shadow: 0 0 0 3px rgba(138, 31, 17, 0.15);
    background-color: #ffffff;
}

.alumni-form-container .wpcf7-file {
    color: transparent;
    /* Hide native "No file chosen" text */
    background-color: #f7f7f7;
    padding: 10px 14px;
}

.alumni-form-container .wpcf7-form-control-wrap[data-name="photo"],
.alumni-form-container .wpcf7-form-control-wrap[data-name="graduation-certificate"],
.alumni-form-container .wpcf7-form-control-wrap[data-name="dob"] {
    position: relative;
    display: block;
}

.alumni-form-container .wpcf7-form-control-wrap[data-name="photo"]::after {
    content: "Upload Your Photo";
    position: absolute;
    left: 145px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.88rem;
    color: #888888;
    pointer-events: none;
}

.alumni-form-container .wpcf7-form-control-wrap[data-name="graduation-certificate"]::after {
    content: "Upload Your Graduation Certificate (JPG, PNG & PDF)";
    position: absolute;
    left: 145px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.88rem;
    color: #888888;
    pointer-events: none;
}

.alumni-form-container .wpcf7-form-control-wrap.has-file::after {
    content: attr(data-file-name) !important;
    color: #333333 !important;
}

.alumni-form-container .wpcf7-file::file-selector-button {
    background-color: #8A1F11;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    transition: background-color 0.2s ease;
}

.alumni-form-container .wpcf7-file::file-selector-button:hover {
    background-color: #c0392b;
}

/* Date of birth custom styling override */
.alumni-form-container input[type="date"] {
    position: relative;
    color: transparent;
    /* hide native format */
}

.alumni-form-container input[type="date"]:focus,
.alumni-form-container input[type="date"].has-value {
    color: #333333;
}

.alumni-form-container .wpcf7-form-control-wrap[data-name="dob"]::after {
    content: "Date of Birth";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.88rem;
    color: #888888;
    pointer-events: none;
}

.alumni-form-container .wpcf7-form-control-wrap[data-name="dob"].date-active::after {
    display: none !important;
}

.alumni-form-container .wpcf7-submit,
.alumni-form-container input[type="submit"] {
    background-color: #8A1F11 !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 12px 40px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 6px rgba(138, 31, 17, 0.15) !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.alumni-form-container .wpcf7-submit:hover,
.alumni-form-container input[type="submit"]:hover {
    background-color: #c0392b !important;
    color: #ffffff !important;
}

/* Get In Touch CF7 overrides */
.get-in-touch-form-container .wpcf7-text,
.get-in-touch-form-container .wpcf7-textarea,
.placements-contact-body .wpcf7-text,
.placements-contact-body .wpcf7-textarea {
    width: 100%;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.get-in-touch-form-container .wpcf7-select,
.placements-contact-body .wpcf7-select,
.alumni-form-container .wpcf7-select {
    width: 100%;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    /* Premium custom dropdown arrow matching theme accents */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%238A1F11' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px !important;
}

.alumni-form-container .wpcf7-select {
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
}

.alumni-form-container .wpcf7-select:focus {
    background-color: #ffffff;
}

.get-in-touch-form-container .wpcf7-text:focus,
.get-in-touch-form-container .wpcf7-select:focus,
.get-in-touch-form-container .wpcf7-textarea:focus,
.placements-contact-body .wpcf7-text:focus,
.placements-contact-body .wpcf7-select:focus,
.placements-contact-body .wpcf7-textarea:focus {
    border-color: #8A1F11;
    box-shadow: 0 0 0 3px rgba(138, 31, 17, 0.12);
}

.get-in-touch-form-container .wpcf7-textarea,
.placements-contact-body .wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

.get-in-touch-form-container .wpcf7-submit,
.get-in-touch-form-container input[type="submit"],
.placements-contact-body .wpcf7-submit,
.placements-contact-body input[type="submit"] {
    background-color: #8A1F11 !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 12px 40px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 6px rgba(138, 31, 17, 0.15) !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.get-in-touch-form-container .wpcf7-submit:hover,
.get-in-touch-form-container input[type="submit"]:hover,
.placements-contact-body .wpcf7-submit:hover,
.placements-contact-body input[type="submit"]:hover {
    background-color: #c0392b !important;
    color: #ffffff !important;
}

/* Hide standard CF7 response message text since we show a popup */
.wpcf7-response-output {
    display: none !important;
}

/* Custom CSS honeypot hide to make sure CF7 honeypot works silently */
.wpcf7-honeypot {
    display: none !important;
}

/* ============================================================
   24. CONTACT PAGE
   ============================================================ */

.contact-page {
    background-color: #fcfcfc;
    padding-bottom: 0px;
}

/* Map Banner */
.contact-map-banner {
    position: relative;
    height: 480px;
    width: 100%;
    overflow: hidden;
    background-color: #eaeaea;
}

.contact-map-banner__map-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.contact-map-banner__map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.55) contrast(1.1) brightness(0.75);
}

.contact-map-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.contact-map-banner__overlay:hover {
    background: rgba(0, 0, 0, 0.28);
}

.contact-map-banner__logo-container {
    text-align: center;
    max-width: 650px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-map-banner__logo {
    max-height: 110px;
    width: auto;
    margin: 0 auto;
    display: block;
    animation: fadeInDown 0.8s ease forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sections General */
.contact-section-title-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.contact-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #c0392b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    margin: 0;
}

.contact-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--clr-text);
}

/* Contact Details Block */
.contact-details-section {
    padding: 60px 0;
}

.contact-details__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.contact-details__card {
    flex: 0 1 380px;
    min-width: 290px;
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.contact-details__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #c0392b;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.contact-details__card:hover::before {
    transform: scaleX(1);
}

.contact-details__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
    border-color: rgba(192, 57, 43, 0.15);
}

.contact-details__card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #f4f4f4;
}

.contact-details__info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
}

.contact-details__info-item:last-child {
    margin-bottom: 0;
}

.contact-details__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(192, 57, 43, 0.06);
    border-radius: 50%;
    color: #c0392b;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-details__card:hover .contact-details__icon {
    background-color: #c0392b;
    color: var(--clr-white);
}

.contact-details__text {
    font-size: 0.92rem;
    color: var(--clr-muted);
    line-height: 1.6;
    flex-grow: 1;
}

.contact-details__text a {
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

.contact-details__text a:hover {
    color: #c0392b;
}

.contact-details__text p {
    margin: 0 0 6px;
}

.contact-details__text p:last-child {
    margin-bottom: 0;
}

/* Contact Form Section */
.contact-form-section {
    padding: 60px 0 80px;
    background-color: #f7f9fa;
    border-top: 1px solid var(--clr-border);
}

.contact-form-container {
    max-width: 900px;
    margin: 40px auto 0;
    background: #ffffff;
    padding: 45px 40px;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--clr-border);
}

.contact-form-container .wpcf7-text,
.contact-form-container .wpcf7-textarea {
    width: 100%;
    padding: 14px 18px;
    background-color: #fafafa;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 0.92rem;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.contact-form-container .wpcf7-text:focus,
.contact-form-container .wpcf7-textarea:focus {
    border-color: #8A1F11;
    box-shadow: 0 0 0 4px rgba(138, 31, 17, 0.1);
    background-color: #ffffff;
}

.contact-form-container .wpcf7-textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form-container .submit-btn {
    text-align: center;
    margin-top: 20px;
}

.contact-form-container .wpcf7-submit,
.contact-form-container input[type="submit"] {
    background-color: #8A1F11 !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 15px 55px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    box-shadow: 0 4px 12px rgba(138, 31, 17, 0.2) !important;
    transition: all 0.3s ease !important;
}

.contact-form-container .wpcf7-submit:hover,
.contact-form-container input[type="submit"]:hover {
    background-color: #a93226 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 31, 17, 0.3) !important;
}

@media (max-width: 768px) {
    .contact-map-banner {
        height: 320px;
    }

    .contact-form-container {
        padding: 30px 20px;
    }
}

/* ====================================================
   ACCESSIBILITY & CONTACT BAR STYLES
   ==================================================== */
html {
    transition: font-size 0.25s ease, filter 0.4s ease;
}

.accessibility-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0;
    font-family: var(--font-main), 'Montserrat', sans-serif;
    position: relative;
    z-index: 1005;
}

.accessibility-bar-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Right side: Contact Us Link + Button Controls Group */
.accessibility-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 14px;
}

.accessibility-right .contact-us-link {
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    transition: color 0.2s ease;
    padding-right: 14px;
    border-right: 1px solid #cccccc;
    line-height: 1;
}

.accessibility-right .contact-us-link:hover {
    color: #c0392b;
}

/* Header Marquee Styles */
.header-marquee-container {
    flex: 1;
    margin: 0 40px 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
}

.header-marquee-container.mobile-only {
    display: none !important;
}

@media (max-width: 991px) {
    .header-marquee-container.desktop-only {
        display: none !important;
    }

    .header-marquee-container.mobile-only {
        display: flex !important;
        margin: 12px auto 0;
        width: 100%;
        max-width: 600px;
        background-color: #fdfdfd;
        border: 1px solid #e8eaed;
        border-radius: 4px;
        padding: 5px 12px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.01);
        box-sizing: border-box;
        height: 28px;
    }

    .header-marquee-container.mobile-only .header-marquee-item {
        font-size: 0.8rem;
    }
}

.header-marquee-text-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.header-marquee-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: header-marquee-scroll 35s linear infinite;
}

.header-marquee-container:hover .header-marquee-text {
    animation-play-state: paused;
}

.header-marquee-item {
    font-size: 0.88rem;
    font-weight: 700;
    color: #8A1F11;
    /* Theme maroon */
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.header-marquee-item:hover {
    color: #1a3b5c;
    /* Hover color */
    text-decoration: underline;
}

.header-marquee-separator {
    margin: 0 20px;
    color: #cccccc;
    font-weight: normal;
    display: inline-block;
}

@keyframes header-marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Right side: Button Controls Group */
.accessibility-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.accessibility-buttons-group {
    display: flex;
    align-items: center;
    border: 1px solid #a0a0a0;
    border-radius: 2px;
    overflow: hidden;
    background-color: #dddddd;
}

.access-btn {
    background-color: #dddddd;
    /* Standard grey background */
    color: #444444;
    border: none;
    border-right: 1px solid #a0a0a0;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 40px;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
    outline: none;
    font-family: inherit;
}

.access-btn:last-child {
    border-right: none;
}

.access-btn:hover {
    background-color: #d2d2d2;
    color: #111111;
}

.access-btn svg {
    display: block;
    fill: currentColor;
    transition: fill 0.2s ease;
}

.access-btn.access-wheelchair {
    padding: 6px 10px;
}

.access-btn sup {
    font-size: 0.6rem;
    margin-left: 1px;
}

/* White A Button: standard mode (reset monochrome) */
.access-btn.access-mono-reset {
    background-color: #ffffff;
    color: #1a3b5c;
    /* Blue color A */
}

.access-btn.access-mono-reset:hover {
    background-color: #f5f5f5;
}

/* Grey/Black A Button: monochrome mode toggle */
.access-btn.access-mono-set {
    background-color: #333333;
    color: #ffffff;
}

.access-btn.access-mono-set:hover {
    background-color: #222222;
}

/* Grayscale Monochrome Filter Mode */
html.monochrome-mode {
    filter: grayscale(100%) !important;
}

/* Accessibility Focus Helper Outlines */
html.accessibility-focus-helper *:focus {
    outline: 3px dashed #c0392b !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(192, 57, 43, 0.4) !important;
}

/* Screen Reader Notification Toast */
.accessibility-toast {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
    border-left: 4px solid #c0392b;
}

/* Responsive Scaling */
@media (max-width: 576px) {
    .accessibility-bar-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px;
    }

    .accessibility-right .contact-us-link {
        font-size: 0.75rem;
    }


    .access-btn {
        padding: 4px 10px;
        min-width: 34px;
        height: 28px;
        font-size: 0.78rem;
    }
}

@media (max-width: 380px) {
    .accessibility-bar-container {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}

/* ====================================================
   STICKY HEADER & NAVIGATION ON SCROLL
   ==================================================== */

/* --- Desktop Sticky Navigation --- */
@media (min-width: 992px) {

    /* Prevent content jump by adding padding-bottom to site-header */
    body.is-scrolled .site-header {
        padding-bottom: var(--nav-height, 52px);
    }

    body.is-scrolled .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1010;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-top: none;
        animation: navSlideDown 0.3s var(--ease);
        background: var(--clr-white);
    }

    /* Keep search form wrapper fixed and below the sticky nav bar */
    body.is-scrolled .header-search-form-wrapper {
        position: fixed;
        top: var(--nav-height, 52px);
        z-index: 1009;
    }

    /* WP Admin Bar adjustments for desktop sticky navigation */
    body.admin-bar.is-scrolled .main-navigation {
        top: 32px;
    }

    body.admin-bar.is-scrolled .header-search-form-wrapper {
        top: calc(32px + var(--nav-height, 52px));
    }
}

/* Slide down animation for sticky desktop navigation */
@keyframes navSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* --- Mobile Sticky Header --- */
@media (max-width: 991px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1010;
        background: var(--clr-white);
        transition: box-shadow 0.3s var(--ease);
    }

    /* Add shadow when scrolled */
    body.is-scrolled .site-header {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Transition for header title height collapse */
    .header-title {
        transition: max-height 0.25s var(--ease), opacity 0.2s var(--ease), padding-top 0.25s var(--ease), margin-top 0.25s var(--ease);
        max-height: 120px;
        opacity: 1;
        overflow: hidden;
    }

    /* Collapse row 2 on mobile scroll */
    body.is-scrolled .header-title {
        max-height: 0;
        opacity: 0;
        padding-top: 0 !important;
        margin-top: 0 !important;
        pointer-events: none;
    }

    body.is-scrolled .header-top {
        grid-template-rows: auto;
        row-gap: 0;
        padding-bottom: 6px;
    }

    /* WP Admin Bar adjustments for mobile sticky header */
    body.admin-bar .site-header {
        top: 32px;
    }

    @media (max-width: 782px) {
        body.admin-bar .site-header {
            top: 46px;
        }
    }
}

.library-item {
    border-bottom: 1px solid #e6e6e6;
}

.library-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5px 0px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    transition: .3s;
}

.library-title:hover {
    color: #b53a2d;
}

.library-content {
    display: none;
    padding: 0 10px 10px;
    line-height: 1.9;
    color: #555;
    font-size: 14px;
}

.library-item.active .library-content {
    display: block;
}

.icon {
    width: 18px;
    height: 18px;
    position: relative;
}

.icon::before,
.icon::after {
    content: '';
    position: absolute;
    background: #b53a2d;
    transition: .3s;
}

.icon::before {
    width: 2px;
    height: 16px;
    left: 8px;
    top: 1px;
}

.icon::after {
    width: 16px;
    height: 2px;
    left: 1px;
    top: 8px;
}

.library-item.active .icon::before {
    transform: scaleY(0);
}
/* Contact Form 7 Honeypot */
.cf7-honeypot{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}