/* ==========================================================================
   VALLEY VIEW UNIVERSITY — MASTHEAD & NAVIGATION
   --------------------------------------------------------------------------
   A three-tier academic masthead (utility strip → brand band → main nav),
   modelled on the classic Ghanaian university structure but rebuilt with a
   modern type scale, gold ornamentation, full-bleed mega menus and a
   condensing sticky bar.

   Everything here is namespaced `vvu-` so it cannot collide with the legacy
   Bootstrap / Materialize / theme rules that ship with the old template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette — navy base (matches the site footer), gold ornament,
       ember orange reserved for calls to action. */
    --vvu-navy: #002147;
    --vvu-navy-deep: #00152e;
    --vvu-navy-soft: #0a3161;
    --vvu-navy-line: rgba(255, 255, 255, .14);

    --vvu-gold: #f0b429;
    --vvu-gold-soft: #f7d67e;
    --vvu-gold-deep: #c98a10;

    --vvu-ember: #f26838;
    --vvu-ember-deep: #e0521f;

    --vvu-ink: #12233b;
    --vvu-ink-soft: #5b6b80;
    --vvu-hair: #e4e9f0;
    --vvu-paper: #ffffff;
    --vvu-paper-warm: #fbfaf7;

    /* Rhythm — JS re-measures --vvu-scrolloff on load and resize. */
    --vvu-utility-h: 76px;
    --vvu-nav-h: 74px;
    --vvu-nav-h-stuck: 62px;
    --vvu-mobilebar-h: 64px;
    --vvu-scrolloff: 188px;

    /* Minimum width of the Search pill. Row B reserves this much space on its
       right so the contact text never runs under the button. */
    --vvu-rail-w: 96px;

    --vvu-shell: 1320px;
    --vvu-gutter: 28px;

    --vvu-ease: cubic-bezier(.4, .14, .3, 1);
    --vvu-ease-out: cubic-bezier(.16, .84, .44, 1);

    --vvu-shadow-sm: 0 2px 10px rgba(0, 33, 71, .07);
    --vvu-shadow-md: 0 14px 34px -14px rgba(0, 33, 71, .28);
    --vvu-shadow-lg: 0 30px 60px -24px rgba(0, 33, 71, .42), 0 4px 14px rgba(0, 33, 71, .08);

    /* Woven diamond motif dusted over the dark strip. */
    --vvu-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M28 0 56 28 28 56 0 28z'/%3E%3Cpath d='M28 18 38 28 28 38 18 28z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. SCAFFOLD
   -------------------------------------------------------------------------- */

/* The legacy stylesheet sets `* { font-weight: 500 }`, so every weight in the
   masthead is declared explicitly. */
.vvu-header,
.vvu-header *,
.vvu-drawer,
.vvu-drawer * {
    box-sizing: border-box;
}

.vvu-header {
    position: relative;
    z-index: 1200;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--vvu-paper);
}

/* ---------------------------------------------------------------------------
   Framework de-fanging.

   The page also loads Bootstrap 3, Materialize and the old theme stylesheet,
   all of which style bare elements. Every reset below is wrapped in :where()
   so it carries zero specificity — it neutralises the frameworks without ever
   outranking the component rules further down this file.

   What is being undone:
     Materialize  nav        → salmon background, 56px line-height, and a
                               z-depth-1 drop shadow that outlined the menu
     Materialize  nav i      → display:block, 24px, 56px tall (broke the carets)
     Materialize  nav ul a   → white text and a grey hover wash
     Materialize  button:focus → teal (#2ab7a9) background
     Theme        li         → hard-coded #203245 text
   --------------------------------------------------------------------------- */
:where(.vvu-header, .vvu-drawer) nav {
    width: auto;
    height: auto;
    line-height: normal;
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

:where(.vvu-header, .vvu-drawer) nav i {
    display: inline-block;
    height: auto;
    font-size: inherit;
    line-height: inherit;
}

:where(.vvu-header, .vvu-drawer) nav a,
:where(.vvu-header, .vvu-drawer) nav ul a {
    color: inherit;
    background-color: transparent;
    padding: 0;
}

:where(.vvu-header, .vvu-drawer) nav ul a:hover,
:where(.vvu-header, .vvu-drawer) nav ul a:focus {
    background-color: transparent;
}

:where(.vvu-header, .vvu-drawer) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.vvu-header, .vvu-drawer) li {
    list-style: none;
}

/* The theme hard-codes `p, li, a, span, label { color:#636363; font-size:15px;
   font-weight:400; line-height:24px }`. Any element in the masthead that meant
   to inherit from its component — the CTA label, the rail button labels, the
   drawer accordion labels — was silently getting grey 15px text instead. */
:where(.vvu-header, .vvu-drawer) :is(p, li, a, span, label) {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

:where(.vvu-header, .vvu-drawer) a,
:where(.vvu-header, .vvu-drawer) a:hover,
:where(.vvu-header, .vvu-drawer) a:focus {
    text-decoration: none;
}

:where(.vvu-header, .vvu-drawer) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Materialize turns any focused button teal, so this one needs the extra
   weight of a real pseudo-class to win. Buttons whose own :focus style is
   declared below override it again. */
:where(.vvu-header, .vvu-drawer) button:focus {
    background-color: transparent;
    outline-color: var(--vvu-gold);
}

.vvu-shell {
    width: 100%;
    max-width: var(--vvu-shell);
    margin: 0 auto;
    padding: 0 var(--vvu-gutter);
}

/* Visible focus ring for keyboard users only. */
.vvu-header :focus-visible,
.vvu-drawer :focus-visible {
    outline: 2px solid var(--vvu-gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Skip link */
.vvu-skip {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -140%);
    z-index: 2000;
    padding: 12px 26px;
    background: var(--vvu-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: 0 0 8px 8px;
    transition: transform .22s var(--vvu-ease-out);
}

.vvu-skip:focus {
    transform: translate(-50%, 0);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. TIER 1 — UTILITY STRIP
   -------------------------------------------------------------------------- */
/* Stacking order inside the masthead, bottom to top:
   brand (2) < nav + its mega/search panels (4) < utility + quick links (6). */
.vvu-utility {
    position: relative;
    z-index: 6;
    height: var(--vvu-utility-h);
    background:
        var(--vvu-weave),
        linear-gradient(115deg, var(--vvu-navy-deep) 0%, var(--vvu-navy) 46%, var(--vvu-navy-soft) 100%);
    color: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(240, 180, 41, .28);
}

/* The Search button is taken out of flow and pinned right, so the two content
   rows span the full padded width. That lets Row A centre on the viewport
   itself rather than on the space left beside the button — no dependency on
   how wide the button happens to render. */
.vvu-utility__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 var(--vvu-gutter);
}

.vvu-utility__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

/* Row A — the nine service links, centred */
.vvu-utility__links {
    min-width: 0;
}

.vvu-utility__links ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vvu-utility__links ul::-webkit-scrollbar {
    display: none;
}

.vvu-utility__links a {
    position: relative;
    display: block;
    padding: 7px 12px;
    color: rgba(255, 255, 255, .88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 4px;
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease);
}

.vvu-utility__links a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 1.5px;
    background: var(--vvu-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--vvu-ease-out);
}

.vvu-utility__links a:hover,
.vvu-utility__links a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.vvu-utility__links a:hover::after,
.vvu-utility__links a:focus::after {
    transform: scaleX(1);
}

/* Row B — social icons hard left, phone + address hard right.
   Right padding keeps the contact text clear of the pinned Search button. */
.vvu-utility__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
    padding-left: 4px;
    padding-right: calc(var(--vvu-rail-w) + 18px);
    min-width: 0;
}

.vvu-social {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.vvu-social a {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    border: 1px solid transparent;
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease),
        border-color .2s var(--vvu-ease), transform .2s var(--vvu-ease-out);
}

.vvu-social a:hover,
.vvu-social a:focus {
    color: var(--vvu-navy-deep);
    background: var(--vvu-gold);
    border-color: var(--vvu-gold);
    transform: translateY(-2px);
}

.vvu-utility__contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    overflow: hidden;
}

.vvu-utility__contact span,
.vvu-utility__contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vvu-utility__contact i {
    font-size: 10.5px;
    color: var(--vvu-gold);
}

.vvu-utility__contact a:hover,
.vvu-utility__contact a:focus {
    color: #fff;
}

/* Separates the phone from the address now that the pair sits on its own at
   the right edge — the old leading rule butted against the social icons. */
.vvu-utility__contact a+span::before {
    content: "";
    flex: 0 0 auto;
    width: 1px;
    height: 13px;
    margin-right: 4px;
    background: var(--vvu-navy-line);
}

/* Right rail — a single compact Search pill, pinned right and vertically
   centred. Kept narrow so the nine service links get the width instead. */
.vvu-utility__rail {
    position: absolute;
    top: 0;
    right: var(--vvu-gutter);
    display: flex;
    align-items: center;
    height: 100%;
}

.vvu-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--vvu-rail-w);
    padding: 7px 16px;
    color: rgba(255, 255, 255, .92);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    transition: background-color .2s var(--vvu-ease), color .2s var(--vvu-ease),
        box-shadow .2s var(--vvu-ease);
}

.vvu-rail-btn i {
    font-size: 12.5px;
    color: var(--vvu-gold);
    transition: transform .3s var(--vvu-ease-out);
}

.vvu-rail-btn:hover,
.vvu-rail-btn:focus,
.vvu-rail-btn[aria-expanded="true"] {
    color: var(--vvu-navy-deep);
    background: var(--vvu-gold);
    box-shadow: inset 0 0 0 1px var(--vvu-gold);
}

.vvu-rail-btn:hover i,
.vvu-rail-btn:focus i,
.vvu-rail-btn[aria-expanded="true"] i {
    color: var(--vvu-navy-deep);
    transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   4. SECTION TITLE (used by the drawer's Quick Links / Services groups)
   -------------------------------------------------------------------------- */
.vvu-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--vvu-navy);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vvu-panel-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--vvu-gold), rgba(240, 180, 41, 0));
}

/* --------------------------------------------------------------------------
   PRIMARY CTA — navy pill with a gold arrow chip
   The chip carries the crest's gold, so the button belongs to the masthead
   palette instead of introducing a third accent colour.
   -------------------------------------------------------------------------- */
.vvu-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 7px 7px 26px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    background: linear-gradient(135deg, #06305e 0%, var(--vvu-navy) 58%, var(--vvu-navy-deep) 100%);
    box-shadow: 0 10px 24px -12px rgba(0, 33, 71, .85);
    transition: transform .25s var(--vvu-ease-out), box-shadow .3s var(--vvu-ease-out);
}

.vvu-cta span {
    color: #fff;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.vvu-cta i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--vvu-navy);
    font-size: 12px;
    background: linear-gradient(140deg, var(--vvu-gold-soft), var(--vvu-gold));
    transition: transform .3s var(--vvu-ease-out), box-shadow .3s var(--vvu-ease-out);
}

.vvu-cta:hover,
.vvu-cta:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 3px rgba(240, 180, 41, .22),
        0 16px 30px -12px rgba(0, 33, 71, .92);
}

.vvu-cta:hover i,
.vvu-cta:focus i {
    transform: translateX(3px);
    box-shadow: 0 0 14px rgba(240, 180, 41, .55);
}

/* Condensed nav bar */
.vvu-cta--sm {
    gap: 10px;
    padding: 5px 5px 5px 18px;
    font-size: 11px;
    letter-spacing: .1em;
}

.vvu-cta--sm i {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

/* Full-width in the drawer: label left, chip right. */
.vvu-drawer__cta .vvu-cta {
    justify-content: space-between;
    padding-left: 24px;
}

/* --------------------------------------------------------------------------
   6. TIER 3 — MAIN NAVIGATION
   -------------------------------------------------------------------------- */
/* Single band: crest and wordmark on the left, menu pushed to the right —
   the compact layout from the original header. */
.vvu-nav {
    position: relative;
    z-index: 4;
    height: var(--vvu-nav-h);
    background: var(--vvu-paper);
    border-bottom: 1px solid var(--vvu-hair);
    box-shadow: 0 1px 0 rgba(0, 33, 71, .04);
    transition: height .3s var(--vvu-ease), box-shadow .3s var(--vvu-ease);
}

/* Full width with the same gutter as the utility strip, so the crest lines up
   with the social icons above it. A centred 1320px shell left the logo and the
   ~1000px menu fighting for room and clipped the wordmark. */
.vvu-nav__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    padding: 0 var(--vvu-gutter);
}

.vvu-nav__mini {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.vvu-nav__mini img {
    width: auto;
    height: 52px;
    flex: 0 0 auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: height .3s var(--vvu-ease);
}

.vvu-nav__mini span {
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(15px, 1.35vw, 21px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .03em;
    color: var(--vvu-navy);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu */
/* `align-self: stretch` is what gives the items full band height — without it
   they collapse to the text box and the hover underline lands mid-word. */
.vvu-nav__menu {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-self: stretch;
    justify-content: flex-end;
    margin-left: auto;
}

.vvu-nav__menu>ul {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.vvu-nav__item {
    display: flex;
    align-items: stretch;
}

.vvu-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 clamp(11px, 1.15vw, 20px);
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--vvu-navy);
    transition: color .22s var(--vvu-ease);
}

/* Gold underline that grows from the centre */
.vvu-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--vvu-gold-deep), var(--vvu-gold), var(--vvu-gold-deep));
    border-radius: 2px;
    transition: left .3s var(--vvu-ease-out), right .3s var(--vvu-ease-out);
}

.vvu-nav__link .vvu-caret {
    font-size: 9px;
    opacity: .55;
    transition: transform .28s var(--vvu-ease-out), opacity .22s var(--vvu-ease);
}

.vvu-nav__item:hover>.vvu-nav__link,
.vvu-nav__link:focus,
.vvu-nav__item.is-open>.vvu-nav__link,
.vvu-nav__link.is-active {
    color: var(--vvu-ember-deep);
}

.vvu-nav__item:hover>.vvu-nav__link::after,
.vvu-nav__link:focus::after,
.vvu-nav__item.is-open>.vvu-nav__link::after,
.vvu-nav__link.is-active::after {
    left: clamp(11px, 1.15vw, 20px);
    right: clamp(11px, 1.15vw, 20px);
}

.vvu-nav__item.is-open>.vvu-nav__link .vvu-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* Right-hand tools */
.vvu-nav__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .38s var(--vvu-ease), opacity .24s var(--vvu-ease);
}

.vvu-icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--vvu-navy);
    font-size: 15px;
    background: var(--vvu-paper-warm);
    border: 1px solid var(--vvu-hair);
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease),
        border-color .2s var(--vvu-ease), transform .2s var(--vvu-ease-out);
}

.vvu-icon-btn:hover,
.vvu-icon-btn:focus {
    color: var(--vvu-navy-deep);
    background: var(--vvu-gold);
    border-color: var(--vvu-gold);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. MEGA MENU — the original four-column dropdown

   Its appearance still comes from css/custom-fixes.css (`.m-menu`, `.mm1-com`,
   `.ed-course-in` …), which is the original styling and uses `!important`
   throughout. Only the bits that assume the old `.main-menu ul li` wrapper are
   re-pointed here, so the two files don't fight:

     - visibility, which the old CSS drove from `.main-menu ul li:hover`
     - the flyout's anchor, now the flex nav item
     - a height cap, so a long menu can't run off a short screen
   -------------------------------------------------------------------------- */
/* The menu sits on the right of the bar, so a ~950px panel anchored to its own
   item would run off screen for the leftmost items. The items stay `static`
   and the panel is positioned against the menu instead, so every dropdown
   lines up with the right edge of the bar. */
.vvu-nav__menu {
    position: relative;
}

.vvu-nav__item--mega {
    position: static;
}

/* The legacy rule is `.mm-pos { display: none }`, revealed only by a selector
   that no longer exists — hence the explicit re-show here. */
.vvu-header .mm-pos {
    display: block;
    left: auto !important;
    right: 0 !important;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .22s var(--vvu-ease-out), transform .22s var(--vvu-ease-out),
        visibility .22s;
}

.vvu-nav__item--mega:hover>.mm-pos,
.vvu-nav__item--mega.is-open>.mm-pos {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* The four columns are floated (`.mm1-com { float: left }` in the theme) and
   `.m-menu-inn` has no clearfix of its own, so it collapsed to zero height
   outside its old Bootstrap row. */
.vvu-header .m-menu-inn::after {
    content: "";
    display: table;
    clear: both;
}

/* Never taller than the room below the bar — JS sets the exact value. */
.vvu-header .m-menu {
    max-height: var(--vvu-mega-max, calc(100vh - 200px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   8. SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.vvu-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(180deg, #fff 0%, var(--vvu-paper-warm) 100%);
    border-top: 3px solid var(--vvu-gold);
    box-shadow: var(--vvu-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .28s var(--vvu-ease-out), transform .28s var(--vvu-ease-out), visibility .28s;
}

.vvu-search.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vvu-search__inner {
    max-width: min(880px, 100%);
    margin: 0 auto;
    padding: 34px var(--vvu-gutter) 32px;
}

.vvu-search__field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 6px 6px 22px;
    background: #fff;
    border: 1.5px solid var(--vvu-hair);
    border-radius: 999px;
    box-shadow: var(--vvu-shadow-sm);
    transition: border-color .25s var(--vvu-ease), box-shadow .25s var(--vvu-ease);
}

.vvu-search__field:focus-within {
    border-color: var(--vvu-gold);
    box-shadow: 0 0 0 4px rgba(240, 180, 41, .18);
}

.vvu-search__field>i {
    font-size: 17px;
    color: var(--vvu-gold-deep);
}

/* Materialize styles bare inputs aggressively — reset everything explicitly. */
.vvu-search__field .vvu-search__input,
.vvu-header .vvu-search__input,
.vvu-drawer .vvu-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--vvu-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 46px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
}

.vvu-search__field .vvu-search__input::placeholder {
    color: #9aa7b8;
    font-weight: 400;
}

/* Chrome's search widget adds its own clear button and inner padding. */
.vvu-search__field .vvu-search__input::-webkit-search-decoration,
.vvu-search__field .vvu-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.vvu-search__submit {
    flex: 0 0 auto;
    padding: 13px 30px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--vvu-navy);
    border-radius: 999px;
    transition: background-color .25s var(--vvu-ease), transform .2s var(--vvu-ease-out);
}

.vvu-search__submit:hover,
.vvu-search__submit:focus {
    background: var(--vvu-ember-deep);
    transform: translateY(-1px);
}

.vvu-search__hints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.vvu-search__hints span {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vvu-ink-soft);
}

.vvu-search__hints a {
    padding: 7px 15px;
    color: var(--vvu-navy);
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--vvu-hair);
    border-radius: 999px;
    transition: color .2s var(--vvu-ease), border-color .2s var(--vvu-ease),
        background-color .2s var(--vvu-ease);
}

.vvu-search__hints a:hover,
.vvu-search__hints a:focus {
    color: var(--vvu-navy-deep);
    background: rgba(240, 180, 41, .18);
    border-color: var(--vvu-gold);
}

.vvu-search__close {
    position: absolute;
    top: 14px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--vvu-ink-soft);
    font-size: 15px;
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease);
}

.vvu-search__close:hover,
.vvu-search__close:focus {
    color: var(--vvu-navy);
    background: var(--vvu-hair);
}

/* --------------------------------------------------------------------------
   9. STICKY / CONDENSED STATE
   Negative sticky offset: the masthead scrolls up until only the nav band
   remains, which then pins to the top. No JS layout maths, no content jump.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .vvu-header {
        position: sticky;
        top: calc(-1 * var(--vvu-scrolloff));
    }

    .vvu-header.is-stuck .vvu-nav {
        height: var(--vvu-nav-h-stuck);
        box-shadow: 0 10px 30px -14px rgba(0, 33, 71, .38);
    }

    .vvu-header.is-stuck .vvu-nav__mini img {
        height: 42px;
    }

    /* The utility strip has scrolled away by now, so Search folds into the
       bar to stay reachable. */
    .vvu-header.is-stuck .vvu-nav__tools {
        max-width: 60px;
        opacity: 1;
        margin-left: 6px;
    }
}

/* The university name stays beside the crest at every desktop width. Between
   1024px and 1379px the crest, name and eight menu items only fit if the menu
   gives ground, so the link padding and tracking tighten rather than the name
   being dropped. */
@media (min-width: 1024px) and (max-width: 1379px) {
    .vvu-nav__inner {
        gap: 12px;
    }

    .vvu-nav__mini {
        gap: 10px;
    }

    .vvu-nav__mini img {
        height: 44px;
    }

    .vvu-nav__mini span {
        font-size: 14px;
        letter-spacing: .015em;
    }

    .vvu-nav__link {
        padding: 0 9px;
        font-size: 11.5px;
        letter-spacing: .03em;
    }

    .vvu-nav__link .vvu-caret {
        font-size: 8px;
    }

    .vvu-nav__link::after {
        bottom: 10px;
    }

    .vvu-nav__item:hover>.vvu-nav__link::after,
    .vvu-nav__link:focus::after,
    .vvu-nav__item.is-open>.vvu-nav__link::after,
    .vvu-nav__link.is-active::after {
        left: 9px;
        right: 9px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {

    /* Nine service links plus the button no longer fit on one line, so the
       button collapses to a circular icon and the links tighten up.
       (The nav link sizing is inherited from the 1379px block above — it must
       not be re-widened here or the university name loses its room.) */
    :root {
        --vvu-gutter: 18px;
        --vvu-rail-w: 34px;
    }

    /* Last step down: the name shrinks a little further so it still reads in
       full at 1024px instead of ending in an ellipsis. */
    .vvu-nav__mini img {
        height: 40px;
    }

    .vvu-nav__mini span {
        font-size: 12.5px;
    }

    .vvu-nav__link {
        padding: 0 7px;
        font-size: 11px;
        letter-spacing: .02em;
    }

    .vvu-nav__item:hover>.vvu-nav__link::after,
    .vvu-nav__link:focus::after,
    .vvu-nav__item.is-open>.vvu-nav__link::after,
    .vvu-nav__link.is-active::after {
        left: 7px;
        right: 7px;
    }

    .vvu-rail-btn {
        gap: 0;
        min-width: 34px;
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
    }

    .vvu-rail-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .vvu-utility__links a {
        padding: 7px 8px;
        font-size: 10.5px;
        letter-spacing: .05em;
    }

    .vvu-utility__links ul {
        gap: 0;
    }
}

/* --------------------------------------------------------------------------
   10. MOBILE BAR + DRAWER
   -------------------------------------------------------------------------- */
.vvu-mobilebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    height: var(--vvu-mobilebar-h);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--vvu-hair);
    box-shadow: 0 2px 14px rgba(0, 33, 71, .07);
}

.vvu-mobilebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--vvu-navy), var(--vvu-gold), var(--vvu-ember));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--vvu-ease-out);
}

.vvu-mobilebar.is-stuck::after {
    transform: scaleX(1);
}

.vvu-mobilebar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
    padding: 0 12px;
}

.vvu-burger {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: var(--vvu-navy);
    background: var(--vvu-paper-warm);
    border: 1px solid var(--vvu-hair);
}

.vvu-burger:focus,
.vvu-burger:hover {
    background: var(--vvu-paper-warm);
}

.vvu-burger span {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s var(--vvu-ease-out), opacity .2s var(--vvu-ease), width .3s var(--vvu-ease-out);
}

.vvu-burger span:nth-child(1) {
    transform: translateY(-6px);
}

.vvu-burger span:nth-child(3) {
    width: 12px;
    transform: translateY(6px);
}

/* `min-width: 0` on both the row and the label is what lets the university
   name shrink instead of shoving the search button off the bar. */
.vvu-mobilebar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
}

.vvu-mobilebar__brand img {
    width: auto;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.vvu-mobilebar__brand span {
    min-width: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(10.5px, 3.1vw, 15px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--vvu-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Narrow phones: let the name take two lines rather than truncating it. */
@media (max-width: 400px) {
    .vvu-mobilebar__brand {
        gap: 8px;
    }

    .vvu-mobilebar__brand img {
        height: 34px;
    }

    .vvu-mobilebar__brand span {
        white-space: normal;
        font-size: 10.5px;
        line-height: 1.12;
    }
}

.vvu-mobilebar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.vvu-mobilebar .vvu-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

/* Scrim */
.vvu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 21, 46, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s var(--vvu-ease), visibility .32s;
}

.vvu-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

/* Drawer */
.vvu-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    width: min(400px, 90vw);
    background: var(--vvu-paper);
    box-shadow: 30px 0 60px -30px rgba(0, 21, 46, .55);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .38s var(--vvu-ease-out), visibility .38s;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vvu-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.vvu-drawer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vvu-drawer li {
    list-style: none;
}

.vvu-drawer a {
    text-decoration: none;
}

.vvu-drawer button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.vvu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 16px 16px 20px;
    background:
        var(--vvu-weave),
        linear-gradient(120deg, var(--vvu-navy-deep), var(--vvu-navy-soft));
    color: #fff;
}

.vvu-drawer__head .vvu-drawer__lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vvu-drawer__head img {
    width: auto;
    height: 46px;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
}

.vvu-drawer__head strong {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.vvu-drawer__head em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vvu-gold-soft);
}

.vvu-drawer__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    background: rgba(255, 255, 255, .12);
    transition: background-color .2s var(--vvu-ease);
}

.vvu-drawer__close:hover,
.vvu-drawer__close:focus {
    background: var(--vvu-ember);
}

.vvu-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.vvu-drawer__search {
    padding: 16px 18px;
    border-bottom: 1px solid var(--vvu-hair);
    background: var(--vvu-paper-warm);
}

.vvu-drawer__search .vvu-search__field {
    padding: 4px 4px 4px 16px;
    gap: 10px;
}

.vvu-drawer .vvu-search__input {
    height: 40px !important;
    line-height: 40px;
    font-size: 15px;
}

.vvu-drawer__search .vvu-search__submit {
    padding: 11px 18px;
    font-size: 11px;
}

/* Accordion nav */
.vvu-acc>li {
    border-bottom: 1px solid var(--vvu-hair);
}

.vvu-acc__row {
    display: flex;
    align-items: center;
}

.vvu-acc__row>a,
.vvu-acc__row>button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vvu-navy);
    text-align: left;
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease);
}

.vvu-acc__row>a:hover,
.vvu-acc__row>button:hover {
    color: var(--vvu-ember-deep);
    background: var(--vvu-paper-warm);
}

.vvu-acc__row i {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--vvu-gold-deep);
    transition: transform .3s var(--vvu-ease-out);
}

.vvu-acc>li.is-open>.vvu-acc__row>button {
    color: var(--vvu-ember-deep);
    background: var(--vvu-paper-warm);
}

.vvu-acc>li.is-open>.vvu-acc__row i {
    transform: rotate(180deg);
}

.vvu-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    background: var(--vvu-paper-warm);
    transition: grid-template-rows .34s var(--vvu-ease-out);
}

.vvu-acc>li.is-open>.vvu-acc__panel {
    grid-template-rows: 1fr;
}

.vvu-acc__panel>div {
    overflow: hidden;
}

.vvu-acc__panel-inner {
    padding: 4px 20px 18px;
}

.vvu-acc__group+.vvu-acc__group {
    margin-top: 16px;
}

.vvu-acc__group h4 {
    margin: 0 0 8px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 10.5px;
    font-weight: 700 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vvu-gold-deep);
}

.vvu-acc__group a {
    display: block;
    padding: 9px 0 9px 16px;
    color: var(--vvu-ink);
    font-size: 14px;
    font-weight: 500;
    border-left: 2px solid var(--vvu-hair);
    transition: color .2s var(--vvu-ease), border-color .2s var(--vvu-ease),
        padding-left .2s var(--vvu-ease-out);
}

.vvu-acc__group a:hover {
    color: var(--vvu-ember-deep);
    border-color: var(--vvu-gold);
    padding-left: 22px;
}

/* Drawer extras */
.vvu-drawer__section {
    padding: 20px;
    border-bottom: 1px solid var(--vvu-hair);
}

.vvu-drawer__section .vvu-panel-title {
    margin-bottom: 14px;
    font-size: 11px;
}

.vvu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vvu-chips a {
    padding: 9px 14px;
    color: var(--vvu-navy);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--vvu-paper-warm);
    border: 1px solid var(--vvu-hair);
    border-radius: 999px;
    transition: color .2s var(--vvu-ease), background-color .2s var(--vvu-ease),
        border-color .2s var(--vvu-ease);
}

.vvu-chips a:hover {
    color: var(--vvu-navy-deep);
    background: rgba(240, 180, 41, .2);
    border-color: var(--vvu-gold);
}

.vvu-drawer__cta {
    padding: 20px;
}

.vvu-drawer__cta .vvu-cta {
    display: flex;
    width: 100%;
}

.vvu-drawer__foot {
    flex: 0 0 auto;
    padding: 18px 20px;
    background: var(--vvu-navy-deep);
    color: rgba(255, 255, 255, .72);
}

.vvu-drawer__foot .vvu-social {
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.vvu-drawer__foot .vvu-social a {
    width: 34px;
    height: 34px;
    font-size: 14px;
    background: rgba(255, 255, 255, .08);
}

.vvu-drawer__contact {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.vvu-drawer__contact a,
.vvu-drawer__contact span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: inherit;
}

.vvu-drawer__contact i {
    font-size: 11px;
    color: var(--vvu-gold);
}

.vvu-drawer__contact a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   11. BREAKPOINT SWITCH
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    .vvu-utility,
    .vvu-nav {
        display: none;
    }

    .vvu-mobilebar {
        display: block;
    }

    body {
        padding-top: var(--vvu-mobilebar-h);
    }
}

@media (min-width: 1024px) {
    .vvu-drawer,
    .vvu-scrim,
    .vvu-mobilebar {
        display: none;
    }
}

/* Drawer open — freeze the page behind it. */
html.vvu-locked,
html.vvu-locked body {
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   12. MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .vvu-header *,
    .vvu-drawer *,
    .vvu-scrim {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

@media print {

    .vvu-utility,
    .vvu-nav,
    .vvu-mobilebar,
    .vvu-drawer,
    .vvu-scrim,
    .vvu-search {
        display: none !important;
    }

    .vvu-header {
        position: static !important;
    }

    body {
        padding-top: 0 !important;
    }
}