:root {
    /* --- COLORS --- */
    /*core*/
    --ndm-dark-blue:#0D3B61;   
    --ndm-medium-blue: #056cb5;  
    --ndm-gold:#f4b223;
    /*secondary*/
    --ndm-light-blue: #9cc4e6;
    --ndm-pale-blue: #EBF3FA;
    --ndm-orange: #ff5c36;
    --ndm-red:#a6192e;
    --ndm-light-yellow:#ffd9a7;
    --ndm-pale-yellow:#FFF8EC;

    --ndm-sasb-green:#008578;
    --ndm-soe-red:#991E66;
    --ndm-son:#FF8674;
    --ndm-soih:#6F5091;
    --ndm-sophp:#789D4A;
 
    --text-muted: #6c757d;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --black: #000000;
    --alert: #FFD793;

    /* --- TYPOGRAPHY --- */
    /* If using Google Fonts, import them at the top of this file first */
    --font-main: 'Avenir LT Std', Arial, sans-serif;
    --font-heading: 'Knockout 69', sans-serif;
    --font-heading-secondary:'Tiempos', sans-serif;

    --base-font-size: 16px;
    --h1-size: 4rem;
    --h2-size: 3rem;
    --h3-size: 1.5rem;
    --body-line-height: 1.6;
    --heading-line-height: 1.2;

    /* --- BUTTONS --- */
    --btn-border-radius: 0px;
    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-font-weight: 500;
    --btn-transition: all 0.3s ease-in-out;



}

/* ---------------------------------------------------------
   GLOBAL RESET / MAPPING
--------------------------------------------------------- */
body {
    font-family: var(--font-main);
    font-size: var(--base-font-size);
    line-height: var(--body-line-height);
    color: var(--black);
    background-color: var(--white);
}
.numbers{font-family: var(--font-heading-secondary);}

.fa-duotone {
--fa-primary-color: var(--ndm-medium-blue);
--fa-secondary-color: var(--ndm-light-blue);
}

/* Control the Customizer Logo Size */
.custom-logo-link { padding-top: 5px; padding-bottom: 5px; display: block; }
.custom-logo-link img {max-height: 70px; width: auto; display: block; transition: transform 0.3s ease; }
/* Ensure the logo doesn't hug the mobile toggle */

h1, h2, h3, h4, h5, h6 {font-family: var(--font-heading); line-height: var(--heading-line-height); font-weight: 500; text-transform: lowercase;}
/* Specific Sizes */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
.hero-wrapper h2.h3, h3 { font-size: var(--h3-size);font-family: var(--font-heading-secondary)!important; font-style: italic !important;}

.bg-blue{background-color: var(--ndm-medium-blue) !important;}
.bg-dark-blue{background-color: var(--ndm-dark-blue) !important;}

/* Buttons */
.btn{padding: var(--btn-padding-y) var(--btn-padding-x) !important; border-radius: var(--btn-border-radius) !important; font-weight: var(--btn-font-weight) !important; transition: var(--btn-transition) !important;text-transform: lowercase;}
.btn-primary {background-color: var(--ndm-medium-blue) !important; color: var(--white) !important; border-color: var(--ndm-medium-blue) !important; }
.btn-secondary {background-color: var(--ndm-gold) !important; color: var(--black) !important; border-color: var(--ndm-gold) !important; }
.btn-tertiary {background-color: var(--white) !important; color: var(--ndm-medium-blue) !important; border-color: var(--white) !important; }
.btn-quaternary {background-color: var(--ndm-red) !important; color: var(--white) !important; border-color: var(--ndm-red) !important; }
.btn-outline-primary {background-color: var(--white) !important; color: var(--ndm-medium-blue) !important; border-color: var(--ndm-medium-blue) !important; }
.btn-outline-quaternary {background-color: var(--white) !important; color: var(--ndm-red) !important; border-color: var(--ndm-red) !important; }

.btn-outline-secondary {--bs-btn-color: var(--ndm-gold) !important; --bs-btn-border-color: var(--ndm-gold) !important; --bs-btn-hover-color: var(--white) !important; --bs-btn-hover-bg: var(--ndm-light-blue) !important; --bs-btn-hover-border-color: var(--ndm-red) !important; }

a.btn.btn-primary:hover {color: var(--ndm-medium-blue) !important; background: var(--white) !important; border-color: var(--ndm-medium-blue) !important; }
a.btn.btn-secondary:hover {color: var(--black) !important; background: var(--white) !important; border-color: var(--ndm-gold) !important; }
a.btn.btn-tertiary:hover {color: var(--white) !important; background: var(--ndm-medium-blue) !important; border-color: var(--ndm-medium-blue) !important; }
a.btn.btn-quaternary:hover {color: var(--ndm-red) !important; background: var(--white) !important; border-color: var(--ndm-red) !important; }
a.btn.btn-outline-quaternary:hover {color: var(--white) !important; background: var(--ndm-red) !important; border-color: var(--ndm-red) !important; }


/*Links*/
main a{color: var(--ndm-medium-blue) !important; text-decoration:none;}
main a:not(.btn):not(.nav-link):not(.ui-link):not(.page-numbers)::after{content:'➝';display: inline-block;transition: transform 0.3s ease;padding-left:3px;}
main a:hover::after{transform: translateX(5px); }
main a:not(.btn):not(.nav-link):not(.ui-link):not(.page-numbers):hover{color:var(--ndm-red) !important}

/* Quick-links icon grid */
.qs-link i { transition: transform .2s; }
.qs-link span { transition: color .2s; }
.qs-link:hover i {
    --fa-primary-color: var(--ndm-light-blue);
    --fa-secondary-color: var(--ndm-dark-blue);
    --fa-secondary-opacity: 1;
    transform: scale(1.1);
}
.qs-link:hover span { color: var(--ndm-dark-blue) !important; }

/* Top Bar Alert — global announcement above masthead. Rendered by header.php
   only when ACF `top_alert_active` is on. */
.ndm-top-alert {
    background: var(--ndm-light-yellow);
    color: #000;
    padding: 0.55rem 0;
    font-size: 0.9rem;
    font-family: var(--font-main);
    text-align: center;
    line-height: 1.35;
}
.ndm-top-alert p { margin: 0; color: inherit; }
.ndm-top-alert a,
.ndm-top-alert .ndm-top-alert-link {
    color: #000;
    text-decoration: underline;
    transition: color 0.15s;
}
.ndm-top-alert a:hover,
.ndm-top-alert .ndm-top-alert-link:hover { color: var(--ndm-red); }
.ndm-top-alert .ndm-top-alert-link { display: block; text-decoration: none; }
.ndm-top-alert .ndm-top-alert-link:hover { text-decoration: underline; }

/*Header*/
.site-header #nav-main { padding-top: 0; padding-bottom: 0; }
.site-header .header-actions {
    align-self: stretch;
    align-items: stretch !important;
    padding: 0;
}
.site-header .nav-toggler { align-self: center; margin: 0 0 0 0.5rem; }
.navbar-nav a{color: var(--white); text-decoration:none;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{ color: var(--ndm-gold);}
.navbar-nav a:hover{color: var(--ndm-medium-blue);}
ul.dropdown-menu.depth_0 li a{ text-decoration:none;}

/* Hide dropdown chevrons in main nav */
#nav-main .dropdown-toggle::after { display: none !important; }

/* ── Nav dropdown style (matches breadcrumb dropdown) ── */
#nav-main .dropdown-menu {
    border-top: 3px solid var(--ndm-medium-blue);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    min-width: 240px;
    overflow: visible;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    padding: 0.4rem 0;
    background: #fff;
}
#nav-main .dropdown-menu .dropdown-item {
    font-size: 0.875rem;
    color: var(--ndm-dark-blue) !important;
    padding: 0.45rem 1rem;
    text-decoration: none;
}
#nav-main .dropdown-menu .dropdown-item:hover {
    background: var(--ndm-pale-blue);
    color: var(--ndm-dark-blue) !important;
}
#nav-main .dropdown-menu .dropdown-item::after { display: none !important; }

/* Enable hover dropdowns even when parent link is clickable */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    /* Nested dropdown (grandchildren) — triggered by hovering the li */
    #nav-main .dropdown-menu li.dropdown:hover > .dropdown-menu,
    #nav-main .dropdown-menu li.menu-item-has-children:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        top: 0;
        left: 100%;
        margin-top: 0;
    }
    /* Nested dropdown styling */
    #nav-main .dropdown-menu .dropdown-menu {
        border-top: 3px solid var(--ndm-gold);
        box-shadow: 4px 6px 20px rgba(0,0,0,0.12);
    }
}

/* ── Accordion: plus/minus toggle instead of Bootstrap chevron ── */
.accordion-button::after {
    background-image: none !important;
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    width: auto;
    height: auto;
    transform: none !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: none !important;
    content: '−';
    transform: none !important;
}

/*slider*/
.swiper-pagination {position: relative !important; bottom: 0 !important; left: 0 !important; text-align: center !important; margin-top: 30px; display: block !important; width: auto !important; z-index: 10; }
.swiper-pagination-bullet {width: .75rem !important; height: .75rem !important;margin:0 .4rem !important; background-color: #ccc !important; opacity: 1 !important; }
.swiper-pagination-bullet-active {background-color: var(--ndm-gold) !important; }


.list-cols-2 { column-count: 2; column-gap: 30px; }
.list-cols-3 { column-count: 3; column-gap: 20px; }

/* Basic Content template — imported Drupal pages */
.ndm-content-banner { background: var(--ndm-pale-blue); padding: 3.5rem 0 0; position: relative; }
.ndm-content-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--ndm-medium-blue); }
.ndm-content-banner h1 { color: var(--ndm-dark-blue) !important; }
.ndm-content-banner-text { padding-bottom: 3.5rem; }
.ndm-content-breadcrumb { font-size: 0.82rem; color: var(--ndm-medium-blue); margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; }
.ndm-content-breadcrumb a { color: var(--ndm-medium-blue); text-decoration: none; transition: color 0.15s; }
.ndm-content-breadcrumb a:hover { color: var(--ndm-dark-blue); text-decoration: underline; }
.ndm-content-breadcrumb a::after { display: none !important; }
.ndm-content-breadcrumb .sep { color: rgba(13,59,97,0.3); }
.ndm-flex-breadcrumb { font-size: 0.78rem; color: var(--text-muted); padding: 0.5rem 0; border-bottom: 1px solid #e8eef3; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; }
.ndm-flex-breadcrumb .container { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; }
.ndm-flex-breadcrumb a { color: var(--ndm-medium-blue); text-decoration: none; transition: color 0.15s; }
.ndm-flex-breadcrumb a:hover { color: var(--ndm-dark-blue); text-decoration: underline; }
.ndm-flex-breadcrumb a::after { display: none !important; }
.ndm-flex-breadcrumb .sep { color: #bbb; }
.ndm-bc-group { display: inline-flex; align-items: center; gap: 0.2rem; position: relative; }
.ndm-bc-link { color: var(--ndm-medium-blue) !important; text-decoration: none !important; transition: color 0.15s; }
.ndm-bc-link:hover { color: var(--ndm-dark-blue) !important; text-decoration: underline !important; }
.ndm-bc-toggle { all: unset; cursor: pointer; color: rgba(13,59,97,0.45); font-size: 0.6rem; line-height: 1; margin-left: 0.15rem; vertical-align: middle; transition: color 0.15s; }
.ndm-bc-toggle:hover, .ndm-bc-toggle[aria-expanded="true"] { color: var(--ndm-dark-blue); }
.ndm-bc-menu { border-top: 3px solid var(--ndm-medium-blue); border-radius: 0; min-width: 240px; box-shadow: 0 6px 20px rgba(0,0,0,0.2); padding: 0.4rem 0; }
.ndm-bc-menu .dropdown-item { font-size: 0.78rem; color: var(--ndm-dark-blue); padding: 0.35rem 1rem; }
.ndm-bc-menu .dropdown-item:hover { background: var(--ndm-pale-blue); color: var(--ndm-dark-blue); }
.ndm-bc-menu .dropdown-item::after { display: none !important; }

/* Desktop: open breadcrumb dropdowns on hover — mirrors the main-nav pattern.
   Click via data-bs-toggle still works, so mobile/touch users are unaffected.
   Explicit `top: 100%; left: 0` because Popper isn't invoked on hover — without
   it Bootstrap's `.dropdown-menu` is `position: absolute` with no offset and
   renders at top-left of the group, covering the breadcrumb text. */
@media (min-width: 992px) {
    .ndm-bc-group:hover > .ndm-bc-menu,
    .ndm-bc-group:focus-within > .ndm-bc-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.25rem;
    }
}
.ndm-content-banner-sub { color: rgba(13,59,97,0.65); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; }
.ndm-content-banner-img { aspect-ratio: 16/9; overflow: hidden; margin-bottom: 3.5rem; }
.ndm-content-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Search fallback in the banner right column when the page has no featured image */
.ndm-content-banner-search { max-width: 560px; margin-bottom: 3.5rem; }
.ndm-content-banner-search-label { font-size: 1rem; font-weight: 600; color: var(--ndm-dark-blue); margin-bottom: 0.75rem; }
.ndm-content-banner-search-wrap { position: relative; }
.ndm-content-banner-search-wrap i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ndm-dark-blue); opacity: 0.55; pointer-events: none; font-size: 0.9rem; }
.ndm-content-banner-search-wrap input[type="search"] { width: 100%; background: #fff; border: 1.5px solid rgba(13,59,97,0.25); border-radius: 0; color: var(--ndm-dark-blue); padding: 0.65rem 5.5rem 0.65rem 2.4rem; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.ndm-content-banner-search-wrap input[type="search"]:focus { border-color: var(--ndm-dark-blue); box-shadow: 0 0 0 3px rgba(13,59,97,0.1); }
.ndm-content-banner-search-wrap input[type="search"]::placeholder { color: rgba(0,0,0,0.35); }
.ndm-content-banner-search-wrap button[type="submit"] { position: absolute; right: 0; top: 0; bottom: 0; background: var(--ndm-dark-blue); border: none; color: #fff; padding: 0 1.25rem; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; }
.ndm-content-banner-search-wrap button[type="submit"]:hover { background: var(--ndm-medium-blue); }
.ndm-drupal-content img { max-width: 100%; height: auto; margin: 1rem 0; }
.ndm-drupal-content h2 { margin-top: 2rem; margin-bottom: 1rem; position: relative; display: block; }
.ndm-drupal-content h2::after { content: ''; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 8px; background: var(--ndm-gold); clip-path: polygon(0 100%, 100% 0, calc(100% - 8px) 100%); z-index: -1; }
.ndm-drupal-content h3 { margin-top: 1.5rem; }
.ndm-drupal-content a { color: var(--ndm-medium-blue); }
.ndm-drupal-content a:hover { color: var(--ndm-gold); }
.ndm-drupal-content table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.ndm-drupal-content table td, .ndm-drupal-content table th { padding: .5rem .75rem; border: 1px solid #dee2e6; }
.ndm-drupal-content .ndm-raw-accordions { display: none; }

/*Footer*/
/*.footer-image{background-image:url('/wp-content/uploads/2026/04/2024-Fall-Photoshoot-Selects-18.jpg');background-repeat:no-repeat;background-position: center;height: 1280px;width: 100%;}*/

@media (max-width: 991px) {
    .custom-logo-link img {max-height: 50px; }
    .navbar-nav a{color: var(--ndm-dark-blue); }
    .collage-stack {display: none !important;} 
    .fullwidth-bottom-images .bg-wrapper{background:var(--ndm-dark-blue) !important;}
    .fullwidth-bottom-images .bg-wrapper::before{height:100% !important;}
}


/* ── Next event nav chip ── */
.ndm-nav-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    text-decoration: none !important;
    background: var(--ndm-medium-blue);
    padding: 0 0.75rem;
    margin-left: 0.5rem;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.ndm-nav-event:hover { background: var(--ndm-pale-blue); }
.ndm-nav-event:hover .ndm-nav-event-month { color: var(--ndm-dark-blue); }
.ndm-nav-event:hover .ndm-nav-event-day   { color: var(--ndm-dark-blue); }
.ndm-nav-event:hover .ndm-nav-event-label { color: var(--ndm-dark-blue); }
.ndm-nav-event-date {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.2rem;
}
.ndm-nav-event-month {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.2s;
}
.ndm-nav-event-day {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.2s;
}
.ndm-nav-event-label {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--ndm-pale-blue);
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

/* Injected FA icon for imported Drupal contact blocks (see the_content filter) */
.contact-icon .ndm-contact-icon,
.contact-icon .fa-duotone {
    font-size: 1.5rem;
    --fa-primary-color: var(--ndm-medium-blue);
    --fa-secondary-color: var(--ndm-light-blue);
    display: block;
    text-align: center;
    line-height: 1;
}


.fifty-fifty .swirl::before {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 130%;
    background-image: url(/wp-content/uploads/2026/04/Group-75174.png);
    pointer-events: none;
    background-repeat: no-repeat;
    z-index: 10;
    background-size: cover;
    transform: scale(1.3) !important;
}
/* Mirror the swirl on this specific demo section only */
#lorem-ipsum-2-swirl .swirl::before { transform: scale(1.3) scaleX(-1) !important; }

/* ── Section spacing — set via ACF "Section Spacing" field ────────────── */
/* Default when no class is set: py-5 (3rem top + bottom), added in section-header.php */

/* Both sides equal */
.section-wrapper.gap-none { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.section-wrapper.gap-xs   { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.section-wrapper.gap-sm   { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.section-wrapper.gap-md   { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.section-wrapper.gap-lg   { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.section-wrapper.gap-xl   { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* One side removed — other side preserved at default (3rem) */
.section-wrapper.gap-top-none    { padding-top: 0 !important; margin-top: 0 !important;    padding-bottom: 3rem !important; }
.section-wrapper.gap-bottom-none { padding-bottom: 0 !important; margin-bottom: 0 !important; padding-top: 3rem !important; }

/* flush-* aliases — same behaviour as gap-*-none / gap-none */
.section-wrapper.flush-top    { padding-top: 0 !important; margin-top: 0 !important;    padding-bottom: 3rem !important; }
.section-wrapper.flush-bottom { padding-bottom: 0 !important; margin-bottom: 0 !important; padding-top: 3rem !important; }
.section-wrapper.flush        { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

/* ── Footer hidden while community-vibes is in view ── */
#ndm-footer { transition: opacity 0.25s ease; }
#ndm-footer.cv-offscreen { opacity: 0; pointer-events: none; }

/* ── Tables ── */
.entry-content table,
main .wp-block-table table,
main table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-main);
    font-size: 0.92rem;
    margin-bottom: 2rem;
}
.entry-content table thead th,
main .wp-block-table table thead th,
main table thead th {
    background: var(--ndm-dark-blue);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid var(--ndm-gold);
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: var(--font-main);
}
.entry-content table tbody tr:nth-child(odd),
main .wp-block-table table tbody tr:nth-child(odd),
main table tbody tr:nth-child(odd) {
    background: #fff;
}
.entry-content table tbody tr:nth-child(even),
main .wp-block-table table tbody tr:nth-child(even),
main table tbody tr:nth-child(even) {
    background: var(--ndm-pale-blue, #edf3f8);
}
.entry-content table tbody tr:hover,
main .wp-block-table table tbody tr:hover,
main table tbody tr:hover {
    background: #FFF8EC;
}
.entry-content table td,
main .wp-block-table table td,
main table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e0e8ef;
    vertical-align: top;
    color: var(--ndm-dark-blue);
    line-height: 1.4;
}
.entry-content table th,
main .wp-block-table table th,
main table th {
    padding: 0.65rem 1rem;
    vertical-align: top;
}
@media (max-width: 767px) {
    .entry-content table,
    main .wp-block-table table,
    main table { font-size: 0.82rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Publication type cards (used on pub archive + news-events page) ── */
.pub-type-card { position: relative; display: block; overflow: hidden; text-decoration: none; border-bottom: none !important; aspect-ratio: 16/9; }
.pub-type-card::after { display: none !important; }
.pub-type-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.pub-type-card:hover .pub-type-card-bg { transform: scale(1.05); }
.pub-type-card-overlay { display: none; }
.pub-type-card-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.pub-type-card-inner { position: relative; z-index: 1; padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.pub-type-card-name { display: none; }
.pub-type-card-count { font-size: 0.78rem; color: #89c4e1; letter-spacing: 0.03em; transition: color 0.2s; }
.pub-type-card-arrow { position: absolute; top: 1rem; right: 1rem; color: #89c4e1; font-size: 0.85rem; transition: transform 0.2s, color 0.2s; }
.pub-type-card:hover .pub-type-card-count { color: var(--ndm-gold); }
.pub-type-card:hover .pub-type-card-arrow { transform: translate(3px,-3px); color: var(--ndm-gold); }

/* ── Reading progress bar (school pages only) ── */
#ndm-progress-bar {
    position: fixed;
    top: var(--nav-h, 80px);
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--school-color, var(--ndm-medium-blue));
    z-index: 1; /* very low, ensures nav dropdowns always render above */
    transition: width 80ms linear;
    pointer-events: none;
}

/* Ensure nav dropdowns always render above the progress bar and other page content */
#nav-main .dropdown-menu,
#bootscore-navbar .dropdown-menu {
    z-index: 1050 !important;
}
/* Responsive YouTube / Vimeo iframes pasted into content WYSIWYG areas.
   Scoped to content wrappers so it doesn't clash with .mc-yt-wrap flex layouts. */
.entry-content iframe[src*="youtu"],
.entry-content iframe[src*="vimeo"],
.section-content iframe[src*="youtu"],
.section-content iframe[src*="vimeo"],
.ndm-drupal-content iframe[src*="youtu"],
.ndm-drupal-content iframe[src*="vimeo"],
.wysiwyg iframe[src*="youtu"],
.wysiwyg iframe[src*="vimeo"] {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* Content sections sit above hero swoosh overflow.
   Heroes' ::after swooshes render at z-index 2 and can extend below the hero
   when hero-wrapper has no overflow:hidden. Section content otherwise had no
   z-index, so it disappeared behind the swoosh. */
.section-wrapper { position: relative; z-index: 5; }

/* Intro paragraph style — italic serif lede, dark blue.
   Editors apply via <p class="ndm-intro"> in the WYSIWYG.
   No max-width so it flows to match the body content underneath it. */
.ndm-intro {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ndm-dark-blue);
}



/* Mobile-menu-only markup lives inside the off-canvas element which Bootstrap
   reuses as the desktop inline nav on lg+. Hide these elements by default so
   they don't leak into the desktop nav. mobile-menu.css (which only loads on
   viewports <= 991.98px) overrides display back on for mobile. */
.ndm-mm-search,
.ndm-mm-quick,
.ndm-mm-event,
.ndm-recent-viewed,
.ndm-mm-utility,
.ndm-mm-contact { display: none; }

/* Hide the off-canvas +/− toggle buttons on desktop. This rule MUST live in
   ndm-theme.css (loaded at every viewport), not in mobile-menu.css (which is
   media-scoped to mobile only). Otherwise toggles injected by JS during a
   mobile session persist as visible artifacts after a resize to desktop. */
.ndm-mm-toggle { display: none; }
@media (max-width: 991.98px) {
    .ndm-mm-toggle { display: flex; }
}

/* ─────────────────────────────────────────────────────────────
   Utility nav — sits above the main menu inside #nav-main. Site-wide, desktop only.
   ───────────────────────────────────────────────────────────── */
.ndm-util-bar { width: 100%; padding: 0.4rem 0 0.5rem; }

/* Desktop: turn the offcanvas into a flex-column so the util-bar sits on top,
   main menu below — both right-aligned within the middle column between the
   logo and the event chip. */
@media (min-width: 992px) {
    /* CRITICAL: `top: 0 !important` overrides Bootstrap's
       `.logged-in.admin-bar .offcanvas { top: 32px }` which — combined with
       our `position: relative` for the search dropdown — was shoving the
       whole nav group 32px down on desktop when logged in. */
    #offcanvas-navbar { flex-direction: column !important; align-items: stretch !important; justify-content: center !important; padding: 0 0 4px 0 !important; position: relative; top: 0 !important; }
    #offcanvas-navbar .ndm-util-bar { padding: 0.35rem 0 0; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease; overflow: hidden; max-height: 2rem; opacity: 1; }
    /* Compensate for the last main-nav link's own right padding (~8px) so the
       "b" in Gator Hub visually aligns with the "y" in Community. */
    #offcanvas-navbar .ndm-util-bar .ndm-util-nav { justify-content: flex-end; padding-right: 8px; }
    #offcanvas-navbar .offcanvas-body { justify-content: flex-end !important; padding: 0 !important; flex: 0 0 auto !important; }
    #masthead.is-scrolled #offcanvas-navbar .ndm-util-bar { max-height: 0; opacity: 0; padding: 0; }
}

.ndm-util-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.55rem;
}
.ndm-util-nav li {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
}
.ndm-util-nav li:not(:last-child)::after {
    content: '/';
    color: var(--ndm-pale-yellow);
    opacity: 0.55;
    font-family: var(--font-main);
    font-size: 0.78rem;
    line-height: 1;
}
.ndm-util-nav a {
    color: var(--ndm-pale-yellow);
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1;
    transition: color 0.2s;
}
.ndm-util-nav a::after { display: none !important; }
.ndm-util-nav a:hover { color: #fff; }
.ndm-util-search { display: inline-flex; align-items: center; }
.ndm-util-search-toggle,
button.ndm-util-search-toggle {
    background: transparent; border: none; padding: 0; margin: 0 0 0 0.25rem;
    color: var(--ndm-pale-yellow) !important; cursor: pointer !important; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.ndm-util-search-toggle:hover { color: #fff !important; }
.ndm-util-search-toggle svg {
    display: block; pointer-events: none;
    transform: scaleX(-1);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* When the dropdown is open, tilt the magnifier ~45° so it feels "active" */
.ndm-util-search-toggle[aria-expanded="true"] svg { transform: scaleX(-1) rotate(-45deg) scale(1.15); }

/* ─── Search dropdown — sits INSIDE the middle nav column (between logo and
       event chip). Fills the util+main nav rows with even padding around a
       centered input. No backdrop, no chips. ────────────────────────────── */
.ndm-search-dropdown { position: absolute; inset: 0; z-index: 10; }
.ndm-search-dropdown[hidden] { display: none; }
.ndm-search-dropdown[hidden] { display: none; }
/* Hide the leftover backdrop node — kept in DOM but never visible */
.ndm-search-dropdown-backdrop { display: none; }
.ndm-search-dropdown-panel {
    position: absolute; inset: 0;
    background: var(--ndm-dark-blue); color: #fff;
    display: flex; align-items: center;
    padding: 0.5rem 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ndm-search-dropdown.is-open .ndm-search-dropdown-panel { opacity: 1; }
.ndm-search-dropdown-panel > .container { max-width: none; padding: 0; width: 100%; }
/* Search form — matches the .dp-search-form pattern from degrees-programs:
   left icon inside input, white bar with muted-blue border, dark-blue "go"
   button on the right. */
.ndm-search-dropdown-form { position: relative; display: flex; width: 100%; }
.ndm-search-dropdown-icon {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--ndm-medium-blue); opacity: 0.55; pointer-events: none;
    font-size: 0.9rem; z-index: 1;
}
.ndm-search-dropdown-input {
    flex: 1; background: #fff;
    border: 1.5px solid rgba(13, 59, 97, 0.25); border-right: none;
    border-radius: 0; color: var(--ndm-dark-blue);
    padding: 0.65rem 0.75rem 0.65rem 2.4rem;
    font-size: 0.9rem; font-family: var(--font-main);
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ndm-search-dropdown-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.ndm-search-dropdown-input:focus {
    border-color: var(--ndm-light-blue);
    /* Light-blue halo — visible on dark navy without the yellow harshness */
    box-shadow: 0 0 0 3px rgba(156, 196, 230, 0.35);
}
.ndm-search-dropdown-submit {
    flex-shrink: 0; background: var(--ndm-medium-blue); border: none;
    color: #fff; padding: 0 1.25rem; cursor: pointer; font-size: 0.85rem;
    font-family: var(--font-main); transition: background 0.15s;
}
.ndm-search-dropdown-submit:hover,
.ndm-search-dropdown-submit:active { background: var(--ndm-red); }
.ndm-search-dropdown-close {
    flex-shrink: 0; background: transparent; border: none;
    color: rgba(255, 255, 255, 0.7); font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 0 0.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.ndm-search-dropdown-close:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────
   Gravity Forms — NDMU brand skin
   Targets the Orbital theme markup emitted by GF. Neutral defaults,
   gold focus states, primary-blue submit button, hairline dividers.
   ───────────────────────────────────────────────────────────── */
form[id^="gform_"] form,
form[id^="gform_"] {
    font-family: var(--font-main);
    background: #fff;
    padding: 1.75rem;
    border: 1px solid #e5e9ef;
    border-left: 4px solid var(--ndm-gold);
    color: var(--ndm-dark-blue);
    max-width: 100%;
}

form[id^="gform_"] .gform_fields,
.gform-theme--foundation .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    column-gap: 0 !important;
}

/* Force checkbox fieldsets (opt-ins, consent boxes) to span the whole row.
   Prefixed with .gform-theme--foundation to beat GF's own grid rules on
   `.gform-theme--foundation .gform_fields` which otherwise apply a
   half/third column span to fields. `1 / -1` = full row regardless of
   whether the grid is 1-col (our skin) or 12-col (GF Foundation default). */
form[id^="gform_"] .gfield--type-checkbox,
.gform-theme--foundation .gfield--type-checkbox {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

/* Field labels */
form[id^="gform_"] .gfield_label,
form[id^="gform_"] legend.gfield_label {
    display: block;
    margin: 0 0 0.35rem;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ndm-dark-blue);
    text-transform: none;
    letter-spacing: 0;
}
form[id^="gform_"] .gfield_required,
form[id^="gform_"] .gfield_required_text {
    color: var(--ndm-red, #b02a37);
    font-weight: 600;
    font-size: 0.82rem;
    margin-left: 0.35rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Sub-labels (First / Last on the name field) */
form[id^="gform_"] .gform-field-label--type-sub {
    font-weight: 500;
    color: rgba(13, 59, 97, 0.65);
    font-size: 0.82rem;
    margin-top: 0.35rem;
    display: block;
}

/* Descriptions + validation copy */
form[id^="gform_"] .gfield_description {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    margin: 0.15rem 0 0.5rem;
    line-height: 1.4;
}

/* Text-style inputs — matches the 404 search bar pattern (no border radius,
   dark-blue border on focus with a soft blue halo). */
form[id^="gform_"] input[type="text"],
form[id^="gform_"] input[type="email"],
form[id^="gform_"] input[type="url"],
form[id^="gform_"] input[type="tel"],
form[id^="gform_"] input[type="number"],
form[id^="gform_"] input[type="password"],
form[id^="gform_"] input[type="date"],
form[id^="gform_"] input[type="file"],
form[id^="gform_"] select,
form[id^="gform_"] textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1.5px solid rgba(13, 59, 97, 0.25);
    border-radius: 0;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--ndm-dark-blue);
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
form[id^="gform_"] input[type="text"]:hover,
form[id^="gform_"] input[type="email"]:hover,
form[id^="gform_"] input[type="url"]:hover,
form[id^="gform_"] input[type="tel"]:hover,
form[id^="gform_"] textarea:hover,
form[id^="gform_"] select:hover { border-color: rgba(13, 59, 97, 0.55); }
form[id^="gform_"] input[type="text"]:focus,
form[id^="gform_"] input[type="email"]:focus,
form[id^="gform_"] input[type="url"]:focus,
form[id^="gform_"] input[type="tel"]:focus,
form[id^="gform_"] input[type="number"]:focus,
form[id^="gform_"] input[type="password"]:focus,
form[id^="gform_"] input[type="date"]:focus,
form[id^="gform_"] textarea:focus,
form[id^="gform_"] select:focus {
    border-color: var(--ndm-dark-blue);
    box-shadow: 0 0 0 3px rgba(13, 59, 97, 0.1);
}
form[id^="gform_"] textarea { min-height: 8rem; resize: vertical; }
/* line-height: 0.9 fights native <select> rendering — browsers position the OS-drawn
   glyph by baseline instead of the inflated text-line-box, so descenders (g,p,q) get
   full room in the padding instead of being clipped by the box edge. */
form[id^="gform_"] select { appearance: none; -webkit-appearance: none; line-height: 0.9; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--ndm-dark-blue) 50%), linear-gradient(-45deg, transparent 50%, var(--ndm-dark-blue) 50%); background-position: calc(100% - 15px) center, calc(100% - 10px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* Placeholders */
form[id^="gform_"] input::placeholder,
form[id^="gform_"] textarea::placeholder { color: rgba(0, 0, 0, 0.35); }

/* Two-column name field */
form[id^="gform_"] .ginput_container_name.gform-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 575px) { form[id^="gform_"] .ginput_container_name.gform-grid-row { grid-template-columns: 1fr; } }

/* Checkbox + radio choices */
form[id^="gform_"] .gfield_checkbox,
form[id^="gform_"] .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
form[id^="gform_"] .gchoice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(13, 59, 97, 0.15);
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
form[id^="gform_"] .gchoice:hover { border-color: var(--ndm-gold); background: rgba(244, 178, 35, 0.06); }
form[id^="gform_"] .gchoice input[type="checkbox"],
form[id^="gform_"] .gchoice input[type="radio"] {
    accent-color: var(--ndm-medium-blue);
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
}
form[id^="gform_"] .gchoice label {
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--ndm-dark-blue);
    margin: 0;
}

/* File upload — subtle framed drop zone */
form[id^="gform_"] .ginput_container_fileupload input[type="file"] {
    padding: 0.55rem 0.75rem;
    background: rgba(13, 59, 97, 0.03);
    border-style: dashed;
    font-size: 0.9rem;
}
form[id^="gform_"] .gform_fileupload_rules { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: rgba(0, 0, 0, 0.55); }

/* Inline HTML fields (intro copy, section h2 breaks) */
form[id^="gform_"] .gfield_html { color: var(--ndm-dark-blue); font-size: 0.95rem; line-height: 1.55; }
form[id^="gform_"] .gfield_html h2 {
    font-family: var(--font-heading-secondary);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    color: var(--ndm-medium-blue);
    margin: 1.5rem 0 0.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(13, 59, 97, 0.12);
    text-transform: none;
    letter-spacing: 0;
}

/* Footer + submit */
form[id^="gform_"] .gform_footer {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Mobile: fifty-fifty template bakes in `pe-5` / `ps-5` (3rem inner gutter)
   on both columns. On mobile the columns stack full-width, so those paddings
   just shove text inward from the container gutter. Zero them site-wide. */
@media (max-width: 991.98px) {
    .fifty-fifty .col-lg-6.pe-5 { padding-right: 0 !important; }
    .fifty-fifty .col-lg-6.ps-5 { padding-left: 0 !important; }
    /* Vertical breathing room between the stacked halves. */
    .fifty-fifty .col-lg-6 + .col-lg-6 { margin-top: 2rem; }
    /* Contact Us / 404 only: reverse the row so contact info shows above the form. */
    body:is(.page-id-5637, .error404) .fifty-fifty .row.g-0.align-items-top { flex-direction: column-reverse; }
}
form[id^="gform_"] .gform_button {
    background: var(--ndm-medium-blue) !important;
    color: #fff !important;
    border: 1.5px solid var(--ndm-medium-blue) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.75rem !important;
    font-family: var(--font-main) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: lowercase !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    box-shadow: none !important;
}
form[id^="gform_"] .gform_button:hover,
form[id^="gform_"] .gform_button:focus {
    background: #fff !important;
    color: var(--ndm-medium-blue) !important;
    border-color: var(--ndm-medium-blue) !important;
}

/* Validation errors */
form[id^="gform_"] .gfield_error input,
form[id^="gform_"] .gfield_error select,
form[id^="gform_"] .gfield_error textarea { border-color: var(--ndm-red, #b02a37) !important; }
form[id^="gform_"] .gfield_validation_message,
form[id^="gform_"] .validation_message { color: var(--ndm-red, #b02a37); font-size: 0.85rem; margin-top: 0.35rem; }
form[id^="gform_"] .validation_error,
form[id^="gform_"] .gform_validation_errors {
    background: rgba(176, 42, 55, 0.06);
    border: 1px solid rgba(176, 42, 55, 0.2);
    border-left: 4px solid var(--ndm-red, #b02a37);
    color: var(--ndm-red, #b02a37);
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

/* Confirmation message after submit */
.gform_confirmation_wrapper .gform_confirmation_message {
    background: rgba(6, 108, 181, 0.06);
    border: 1px solid rgba(6, 108, 181, 0.2);
    border-left: 4px solid var(--ndm-medium-blue);
    padding: 1rem 1.25rem;
    color: var(--ndm-dark-blue);
    font-size: 1rem;
}