/* --- CSS Variables & Reset --- */
:root {
    /* Brand Colors (context.md) */
    --ub-purple: #592d82;
    --ub-purple-dark: #3f1d61;
    --ub-blue: #00a7e0;
    --ub-blue-hover: #008fbf;
    
    /* Neutral Colors */
    --text-main: #2c3e50;
    --text-light: #5b6a75;
    --bg-light: #f4f7f6;
    --white: #ffffff;
    
    /* Shadows & Transitions */
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
    --shadow-float: 0 15px 30px rgba(89, 45, 130, 0.2);
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── EDITABLE DESIGN TOKENS ──────────────────────────────────────────
       Everything below is settable at Appearance → Theme Design. The values
       here ARE the defaults that screen shows, and the two must not drift:
       the settings store keeps only what differs from its schema default and
       emits only that, so a value changed here but not there silently becomes
       an override on every page — and one changed there but not here becomes a
       default that never applies.
       See inc/theme-design/tokens.php, which lists the same numbers.

       These are all NEW NAMES for values the sheet already had inline. Each
       consumer below was rewritten to read its token, and each token is set to
       the literal that consumer used to carry, so nothing computes differently
       until somebody changes something.

       Motion: --transition is now composed rather than literal. All 65 of its
       consumers are unchanged; 0.3s and 300ms are the same duration.          */

    /* Typography */
    --font-display: var(--font-primary);   /* headings; falls back to the body face */
    --line-height-base: 1.6;
    --heading-weight: 800;
    --heading-tracking-scale: 1;           /* multiplies the display classes' negative tracking */
    --eyebrow-tracking: 0.2em;

    /* Motion */
    --transition-dur: 300ms;
    --transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition: all var(--transition-dur) var(--transition-ease);
    --reveal-dur: 700ms;

    /* Buttons. Padding and label size are MULTIPLIERS, not lengths: the
       button rules scale their own base padding and font size by these, so
       one setting here moves every button without fixing an absolute size. */
    /* Units on a zero, deliberately: tools/check-design-settings.php compares
       these literals against the schema defaults, and `0` against `0px` is a
       mismatch it is right to report. */
    --btn-radius: 0px;
    --btn-weight: 600;
    --btn-pad-scale: 1;
    --btn-font-scale: 1;
    --btn-transform: none;
    --btn-tracking: 0em;
    --btn-border-width: 2px;
    --btn-lift: 2px;                       /* hover rise; negated at the point of use */

    /* Vertical rhythm.
       Declared HERE because ub-elements/assets/blocks/ub-sections.css reads it,
       and that sheet loads with the section blocks on any page. Without it a
       section block would resolve var(--section-pad) to nothing, which makes
       the whole `padding` declaration invalid and collapses the section to
       zero vertical space. */
    --section-pad: 152px;
    --header-height: 85px;
}

/* The brand's section rhythm steps down with the layout: 88px at 1100, 66px at
   768. ub-sections.css declares the same steps, but this sheet prints after it
   and its unconditional 152px above won at every width, so a phone got 152px
   above and below every section. Kept in step with the `responsive` map of
   section_pad in inc/theme-design/tokens.php. */
@media (max-width: 1100px) {
    :root { --section-pad: 88px; }
}

@media (max-width: 768px) {
    :root { --section-pad: 66px; }
}

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

body {
    font-family: var(--font-primary);
    color: var(--text-main);
    line-height: var(--line-height-base);
    background-color: var(--bg-light);
    overflow: hidden;
}

/* Headings take the display face, which defaults to the body face — so with
   nothing customised this changes nothing. It is what makes a serif-over-sans
   pairing possible from the settings screen without a code change.
   The .display-* classes are restated because ub-elements.css scopes its own
   copies under `.v2` and sets size, weight and tracking there but never
   font-family, so there is nothing here to collide with. */
h1, h2, h3, h4, h5, h6,
.display-xl,
.display-lg {
    font-family: var(--font-display);
}

/* Reduced motion, honoured for everything the tokens drive.
   RE-STATED in the generated CSS as well (see inc/theme-design/css.php): that
   block prints after this sheet with the same specificity, so an unconditional
   :root there would override this one and start showing hover lifts and long
   fades to somebody who asked their operating system for neither. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-dur: 0.01ms;
        --reveal-dur: 0.01ms;
        --btn-lift: 0px;
    }
}

/* Accessibility: Screen Reader Text and Skip Link */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: var(--ub-purple);
    color: var(--white);
    clip: auto !important;
    clip-path: none !important;
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    height: auto;
    left: 12px;
    line-height: normal;
    padding: 12px 24px;
    position: fixed;
    top: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: auto;
    z-index: 100000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    outline: 3px solid var(--ub-blue);
    outline-offset: 2px;
    border-radius: 0;
}

/* Where a skip link or in-page jump lands. ub-chrome.js moves focus here so the
   next Tab continues from the target; it is a container, not a control, so it
   carries no ring (the page would otherwise be boxed in purple after the skip). */
#primary:focus,
[data-ub-anchor-target]:focus {
    outline: none;
}

.page-layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

.main-content-wrapper {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

/* The default link colour is the text-safe blue: UB Blue (#00A7E0) is 2.76:1
   on white and fails AA at any size. Element-level on purpose, so it outranks
   nothing: every header, footer and dark-band component that sets its own link
   colour keeps it, and dark surfaces that relied on this default restate the
   light colour themselves (see "Links on dark surfaces" in ub-elements.css). */
a {
    text-decoration: none;
    color: var(--ub-blue-text, #0a6e8f);
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* The site's measure. ONE width for every page, deliberately.
 *
 * This lived in home-scale.css as `body.v2 .container { max-width: 1384px }`,
 * which meant the page measure depended on which stylesheet a page happened to
 * load: the homepage and program pages got 1384px, every other page 1280px.
 * The visible symptom was the header — the centennial ribbon, utility bar,
 * brand bar and nav all come from header.php on EVERY page, but their
 * .container inherited whichever width that page's sheets provided, so the
 * chrome shifted 104px between the homepage and /admissions/.
 *
 * Site chrome cannot have a width that depends on a page's block content, so
 * the measure belongs here, in the sheet that loads everywhere. home-scale.css
 * keeps the homepage's TYPE and SPACING scale; it no longer sets the width.
 */
:root {
    --measure: 1384px;
    --gutter: 32px;
}

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

@media (max-width: 1100px) {
    :root {
        --measure: 100%;
        --gutter: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 22px;
    }
}

/* --------------------------------------------------------------------------
   Centennial ribbon (sits above the utility bar)

   Site chrome: header.php renders this on EVERY page, so it is styled here in
   the sheet that loads everywhere. It used to live in home.css, which only
   loads on the homepage and program pages — everywhere else the ribbon fell
   back to unstyled markup, which is how it came to look different on
   /admissions/ from the homepage.
   -------------------------------------------------------------------------- */
.top-ribbon,
.centennial-ribbon {
    background: var(--ub-purple-deep);
    color: #EBDDF7;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    font-weight: 500;
}
.top-ribbon .container,
.centennial-ribbon .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 20px;
    text-align: center;
}
.top-ribbon .years,
.top-ribbon .ribbon-badge,
.centennial-ribbon .years,
.centennial-ribbon .ribbon-badge {
    color: var(--white);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.top-ribbon .ribbon-message,
.centennial-ribbon .ribbon-message {
    letter-spacing: 0.02em;
}
.top-ribbon .divider,
.centennial-ribbon .divider {
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.28);
}
.top-ribbon a,
.centennial-ribbon a {
    color: #7FD9F5;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(127, 217, 245, 0.45);
}
.top-ribbon a:hover,
.centennial-ribbon a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

/* Hidden on phones on every page. This was in home.css too, so the ribbon
   disappeared on a phone on the homepage and stayed visible everywhere else. */
@media (max-width: 768px) {
    .top-ribbon,
    .centennial-ribbon { display: none; }
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(10px * var(--btn-pad-scale)) calc(24px * var(--btn-pad-scale));
    border-radius: var(--btn-radius);
    font-weight: var(--btn-weight);
    font-size: calc(0.95rem * var(--btn-font-scale));
    text-transform: var(--btn-transform);
    letter-spacing: var(--btn-tracking);
    transition: var(--transition);
    cursor: pointer;
    /* Transparent, and the same width as an outlined button's visible one, so
       swapping a filled button for an outlined one does not change its size. */
    border: var(--btn-border-width) solid transparent;
}

body.v2 .btn {
    font-size: calc(1.0rem * var(--btn-font-scale));
    padding: calc(8px * var(--btn-pad-scale)) calc(10px * var(--btn-pad-scale));
}

.btn-large {
    padding: calc(14px * var(--btn-pad-scale)) calc(32px * var(--btn-pad-scale));
    font-size: calc(1.05rem * var(--btn-font-scale));
}

.btn-primary {
    background-color: var(--ub-purple);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--ub-purple-dark);
    transform: translateY(calc(var(--btn-lift) * -1));
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--ub-blue);
    color: var(--ub-ink, #1B1023);
    font-weight: 700;
}

.btn-secondary:hover {
    background-color: var(--ub-blue-hover);
    color: var(--ub-ink, #1B1023);
    transform: translateY(calc(var(--btn-lift) * -1));
    box-shadow: var(--shadow-md);
}

.btn-outline {
    border-color: var(--ub-purple);
    color: var(--ub-purple);
    background: transparent;
}

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

.btn-outline-light {
    border-color: var(--white);
    color: var(--white);
    background: transparent;
}

.btn-outline-light:hover {
    background-color: var(--white);
    color: var(--ub-purple);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(calc(var(--btn-lift) * -1));
}

.btn-ai {
    background: linear-gradient(135deg, var(--ub-purple), var(--ub-blue));
    color: var(--white);
    border: none;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(89, 45, 130, 0.2);
}

.btn-ai:hover {
    box-shadow: 0 6px 15px rgba(89, 45, 130, 0.4);
    transform: translateY(calc(var(--btn-lift) * -1));
    color: var(--white);
}

.btn-ai .ai-sparkle-icon {
    width: 20px;
    height: 20px;
}

/* --- 3-Tier Header System --- */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    flex-shrink: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

/* Tier 1: Utility Bar */
.utility-bar {
    background-color: var(--bg-light);
    border-bottom: 1px solid #eaeaea;
    font-size: 0.85rem;
    padding: 8px 0;
}
.utility-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.utility-left a, .utility-right a {
    color: var(--text-light);
    margin-right: 20px;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}
.utility-left a:hover, .utility-right a:hover {
    color: var(--ub-purple);
}
.utility-right {
    display: flex;
    align-items: center;
}
.utility-right a:last-child {
    margin-right: 0;
}
.utility-login {
    font-weight: 700 !important;
    color: var(--ub-purple) !important;
}

/* Tier 2: Brand Bar */
.brand-bar {
    padding: 15px 0;
    background: var(--white);
}
.brand-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    height: 55px;
    width: auto;
}

/* Tier 3: Navigation Bar (Mega Menu Core) */
.nav-bar {
    background-color: var(--white);
    border-top: 1px solid #eaeaea;
}
.nav-container {
    display: flex;
    justify-content: center;
    position: relative; /* Anchor for mega menu */
}
.main-nav {
    width: 100%;
}
.main-nav > ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
.main-nav > ul > li > a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 0;
    transition: var(--transition);
}
.main-nav > ul > li > a:focus-visible {
    color: var(--ub-purple);
    outline: 2px solid var(--ub-purple);
    outline-offset: 2px;
    border-radius: 2px;
}
.main-nav > ul > li > a i,
.main-nav > ul > li > .mega-toggle i {
    font-size: 0.8rem;
    color: var(--ub-purple);
    transition: transform 0.3s ease;
}

/* An item with a panel is two controls: the label links to the hub page and
   the chevron is its own button that opens the panel (see the mega-menu walker
   in functions.php). The button is 24px square - the WCAG 2.2 target minimum -
   and sits where the chevron always sat, so the bar looks the same. */
.main-nav > ul > li.has-dropdown {
    display: flex;
    align-items: center;
}
.main-nav .mega-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    /* -5px on the right keeps each item exactly as wide as the old label + 6px
       gap + 12.8px chevron: the bar is already full between 1101 and ~1200px,
       and 6 x 5px more pushed the search button out of the window at 1101. The
       glyph's own side-bearing inside the 24px box keeps the visible spacing. */
    margin: 0 -5px 0 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    border-radius: 0;
}
.main-nav .mega-toggle:focus-visible {
    outline: 2px solid var(--ub-purple);
    outline-offset: 2px;
}

.main-nav > ul > li:hover > a,
.main-nav > ul > li.is-open > a,
.main-nav > ul > li:has(.mega-menu:focus-within) > a {
    color: var(--ub-purple);
}
.main-nav > ul > li.is-open > a i,
.main-nav > ul > li:has(.mega-menu:focus-within) > a i,
.main-nav > ul > li.is-open > .mega-toggle i,
.main-nav > ul > li:has(.mega-menu:focus-within) > .mega-toggle i {
    transform: rotate(180deg);
}

/* Mega Menu Panels */
.mega-menu-trigger {
    position: static; /* Let the mega menu span the full nav-container width */
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-top: 3px solid var(--ub-purple);
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 40px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}
.has-dropdown.is-open .mega-menu,
.has-dropdown:has(.mega-menu:focus-within) .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Athletics mega-menu feature panel

   Site chrome: header.php puts this in the primary nav on EVERY page. It used
   to live in home3.css, which loads only where section blocks appear, so off
   the homepage the panel rendered with no background, no column width and the
   wrong gap — the same failure the centennial ribbon had.

   MUST STAY AFTER the base .mega-menu rules above. `.mega-menu` sets
   gap: 80px for three link columns and `.mega-menu--athletics` is a
   single-class selector too, so this only wins on source order. Placed before
   them, the 52px gap is silently discarded and the fourth column pushes the
   panel off the container edge.
   -------------------------------------------------------------------------- */
.mega-menu--athletics {
  /* style.css sets gap: 80px for three link columns. A fourth, wider child
     needs that pulled in or the panel is forced off the container edge. */
  gap: 52px;
  align-items: flex-start;
}
.mega-menu--athletics .mega-feature {
  flex: 0 0 288px;
  background: var(--ub-purple-deep);
  border-top: 3px solid var(--ub-blue);
  padding: 20px 22px 24px;
}
.mega-feature .mf-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.mega-feature .mf-title {
  margin-top: 10px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
}
.mega-feature .mf-meta {
  margin-top: 7px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.74);
}
.mega-feature .btn { margin-top: 16px; }
.mega-feature .mf-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.66);
}

@media (max-width: 1100px) {
    /* The mega menu becomes a stacked accordion here. Both of these must be
       re-stated rather than inherited from the mobile block above:
       `.mega-menu` is (0,1,0) and `.mega-menu--athletics` is (0,2,0), so the
       desktop rule outranks it regardless of the media query. Left alone, the
       feature panel would be locked to a 288px HEIGHT (flex-basis follows the
       column axis) with 52px gaps in a drawer. */
    .mega-menu--athletics { gap: 18px; align-items: stretch; }
    .mega-menu--athletics .mega-feature { flex: 0 0 auto; }
}

.mega-column h4,
.mega-column .mega-column-heading {
    color: var(--ub-purple);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 10px;
    display: block;
}
.mega-column ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mega-menu a {
    transition-property: color, background-color, border-color, padding, transform;
}
.mega-column ul li a {
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-dur) var(--transition-ease), padding-left var(--transition-dur) var(--transition-ease);
    display: block;
}
.mega-column ul li a:hover,
.mega-column ul li a:focus-visible {
    color: var(--ub-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 5px;
    outline: 2px solid var(--ub-purple);
    outline-offset: 2px;
}

/* Academics mega: three dense columns (aligned with legacy nav breadth) */
.mega-menu--three-col {
    gap: 48px;
    flex-wrap: nowrap;
    justify-content: center;
}

@media (min-width: 1101px) {
    .mega-menu--three-col {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Search / quick links: compact panel, right-aligned under trigger */
.mega-menu--narrow {
    width: auto;
    min-width: 260px;
    max-width: 320px;
    left: auto;
    right: 0;
    gap: 0;
    padding: 28px 24px;
    justify-content: flex-start;
}

.main-nav > ul > li.mega-menu-trigger--search {
    position: relative;
    display: flex;
    align-items: center;
}

.main-nav > ul > li.mega-menu-trigger--search > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--ub-purple, #592D82);
    border: 2px solid var(--ub-purple, #592D82);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(89, 45, 130, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.main-nav .nav-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.main-nav > ul > li.mega-menu-trigger--search > a i {
    font-size: 0.95rem;
    color: #FFFFFF;
    line-height: 1;
    margin: 0;
    transition: transform 0.2s ease;
}

.main-nav > ul > li.mega-menu-trigger--search:hover > a,
.main-nav > ul > li.mega-menu-trigger--search.is-open > a,
.main-nav > ul > li.mega-menu-trigger--search > a:focus-visible {
    background: #462266;
    border-color: #462266;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(89, 45, 130, 0.40);
    transform: translateY(-1px) scale(1.06);
    outline: none;
}

.main-nav > ul > li.mega-menu-trigger--search:hover > a i,
.main-nav > ul > li.mega-menu-trigger--search.is-open > a i,
.main-nav > ul > li.mega-menu-trigger--search > a:focus-visible i {
    color: #FFFFFF;
}

/* The state change above is a purple shade of a purple button (about 1.3:1), so
   it cannot be the only focus cue: the site's standard ring, as the other nav
   links carry. */
.main-nav > ul > li.mega-menu-trigger--search > a:focus-visible {
    outline: 2px solid var(--ub-purple, #592D82);
    outline-offset: 3px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions .btn {
    line-height: 1.25;
    white-space: nowrap;
}

/* Moved mobile-menu-toggle to media queries section to avoid conflict */

/* --- Refined Geometric Mask Hero Carousel --- */
.hero-geo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
    background: #1b0c38; /* Prevents underneath slide bleed-through */
}

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

.geo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.geo-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.geo-dot.active {
    width: 35px;
    border-radius: 20px;
    background: #c084fc;
    border-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .hero-geo-slide {
        position: relative;
        top: auto; left: auto;
        width: 100%; height: auto;
        display: none;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        background: #1b0c38;
    }
    .hero-geo-slide.active {
        display: flex;
    }
}

.split-image {
    flex: 1 1 50%;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.split-content {
    flex: 1 1 50%;
    padding: 8% 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-light);
}

.split-content h2 {
    font-size: 2.5rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 20px;
}

.split-content p {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 30px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .split-image, .split-content {
        flex: 1 1 100%;
    }
}

.program-card {
    background: var(--white);
    border-radius: 0;
    border-top: 5px solid var(--ub-blue);
    padding: 50px 40px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.program-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ub-purple);
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.program-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--ub-purple-dark);
}

.program-card:hover::after {
    transform: scaleY(1);
}

.program-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 167, 224, 0.1);
    color: var(--ub-blue);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: var(--transition);
}

.program-card:hover .program-icon {
    background-color: var(--ub-blue);
    color: var(--white);
}

.program-card h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--ub-purple);
    font-weight: 800;
    transition: color 0.3s ease;
}

.program-card p {
    color: var(--text-main);
    margin-bottom: 30px;
    font-size: 1.05rem;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.program-link {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ub-blue);
    margin-top: auto;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.program-card:hover h3,
.program-card:hover p,
.program-card:hover .program-link,
.program-card:hover .program-icon {
    color: var(--white);
}

.program-card:hover .program-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

.program-link i {
    transition: transform 0.3s ease;
}

.program-card:hover .program-link i {
    transform: translateX(5px);
}

/* --- CTA — program variant -------------------------------------------------
   `ub/cta-band` with variant=program renders `class="cta-section pg-cta"`.
   Appended, never substituted: every `.cta-section` rule in the plugin's
   ub-sections.css still applies, so the two variants cannot drift apart on
   anything they share, and no existing page styling `.cta-section` changes.

   These rules are the mockup's `.pg-cta` block (program.css § 13) re-pointed at
   the class names the block actually emits — `.cta-container` for the flex row
   and `.cta-buttons` for the actions, instead of `.pg-cta-inner` / `.pg-cta-acts`.
   They live here rather than in program.css because cta-band is generic and
   program.css only loads when a program block is on the page.

   Rationale and the rejected alternatives: docs/programs-plugin-plan.md §5.4.
   --------------------------------------------------------------------------- */
.cta-section.pg-cta {
    position: relative;
    background: var(--ub-purple);
    padding: 96px 0;
    overflow: hidden;
}

/* The diagonal wash on the right. Decorative and pointer-transparent, so it
   never intercepts a click meant for the buttons underneath it. */
.cta-section.pg-cta::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46%;
    background: linear-gradient(150deg, rgba(42, 18, 64, 0.85) 0%, rgba(42, 18, 64, 0) 78%);
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.cta-section.pg-cta > .container {
    position: relative;
    z-index: 2;
}

.cta-section.pg-cta .cta-container {
    gap: 48px;
}

.cta-section.pg-cta .cta-text h2 {
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.028em;
    max-width: 30rem;
    margin-bottom: 0;
}

.cta-section.pg-cta .cta-text p {
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    margin-top: 16px;
    max-width: 32rem;
}

.cta-section.pg-cta .cta-buttons {
    flex-wrap: nowrap;
    gap: 16px;
    flex-shrink: 0;
}

/* --- Labs & Facilities Section (dark band & light variant) --- */
.pg-labs:not(.pg-labs--light) h2,
.pg-labs:not(.pg-labs--light) .display-lg,
.v2 .pg-labs:not(.pg-labs--light) h2,
.v2 .pg-labs:not(.pg-labs--light) .display-lg,
.v2 .pg-labs:not(.pg-labs--light) .pg-head h2 {
    color: var(--white);
}
.pg-labs:not(.pg-labs--light) .eyebrow-rule,
.v2 .pg-labs:not(.pg-labs--light) .eyebrow-rule,
.ub-formpanel-copy .eyebrow-rule,
.v2 .ub-formpanel-copy .eyebrow-rule,
.ub-formpanel--split .eyebrow-rule,
.v2 .ub-formpanel--split .eyebrow-rule {
    color: #7FD9F5;
}
.pg-labs:not(.pg-labs--light) .eyebrow-rule::before,
.v2 .pg-labs:not(.pg-labs--light) .eyebrow-rule::before,
.ub-formpanel-copy .eyebrow-rule::before,
.v2 .ub-formpanel-copy .eyebrow-rule::before,
.ub-formpanel--split .eyebrow-rule::before,
.v2 .ub-formpanel--split .eyebrow-rule::before {
    background: #7FD9F5;
}
.pg-labs:not(.pg-labs--light) .section-lede,
.v2 .pg-labs:not(.pg-labs--light) .section-lede {
    color: rgba(255, 255, 255, 0.88);
}
.pg-labs--white {
    background: #ffffff !important;
}
.pg-labs--white::before {
    display: none !important;
}
.pg-labs--white .pg-lab {
    background: var(--bg-light, #f8f9fc) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid var(--ub-purple, #4b1d6b) !important;
    border-radius: 0 !important;
}
.pg-labs--white .pg-lab:hover {
    background: #ffffff !important;
    border-color: rgba(75, 29, 107, 0.4) !important;
    box-shadow: 0 16px 36px -8px rgba(18, 8, 38, 0.12), 0 0 20px rgba(75, 29, 107, 0.06) !important;
}
.proof-num {
    font-size: clamp(2rem, 2.7vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--ub-purple);
}
.proof-label {
    letter-spacing: 0.015em;
}
.proof-note {
    letter-spacing: 0.015em;
}

/* --- Footer --- */
/* Ink, not neutral charcoal: every page ends on the purple CTA band, and the
   footer continues it in the brand's darkest purple. The hairline on top is
   the purple-to-blue pairing the site uses for its accent rules. */
.site-footer {
    position: relative;
    background: var(--ink, #1B1023);
    color: rgba(255,255,255,0.72);
    padding: 72px 0 28px;
    font-size: 0.95rem;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ub-purple) 0%, var(--ub-blue) 100%);
}

/* The brand column takes the slack; the three link lists size to their
   content and sit together against the right edge, so the gutters between
   short lists stay even instead of stretching across the measure. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr repeat(3, max-content);
    gap: 48px clamp(48px, 5.5vw, 88px);
    padding-bottom: 48px;
}

.footer-logo {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    margin-bottom: 28px;
}

.brand-col p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

.brand-col i {
    color: var(--ub-blue);
    width: 16px;
    margin-top: 5px;
    text-align: center;
}

/* The switchboard number is a tel: link so a phone can dial it; it keeps the
   column's text colour rather than the default link blue, which is unreadable
   on the dark footer. */
.brand-col .footer-phone a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.35);
    text-underline-offset: 3px;
}
.brand-col .footer-phone a:hover { color: var(--white); text-decoration-color: currentColor; }

.brand-col .footer-cta {
    margin-top: 16px;
    padding: 11px 20px;
    font-size: 0.9rem;
    border-color: rgba(255,255,255,0.55);
}

/* Column headings take the eyebrow treatment used across the site: small,
   tracked capitals in sky, so they label the lists without outshouting them. */
.footer-heading {
    margin: 0 0 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7FD9F5;
}

.links-col ul li {
    margin-bottom: 12px;
}

.links-col a {
    color: rgba(255,255,255,0.78);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.links-col a:hover,
.links-col a:focus-visible {
    color: var(--white);
    text-decoration-color: rgba(255,255,255,0.6);
}

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

.social-links .social-svg {
    width: 1rem;
    height: 1rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95rem;
}

.social-links a:hover,
.social-links a:focus-visible {
    background: var(--ub-purple);
    border-color: var(--ub-purple);
}


.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.footer-bottom p { margin: 0; }

.footer-bottom .footer-sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom .footer-cookie-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    cursor: pointer;
}

.footer-bottom .footer-cookie-link:hover,
.footer-bottom .footer-cookie-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .footer-grid { gap: 40px 44px; }
    .footer-logo { width: 180px; }
}
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: repeat(3, max-content); }
    .footer-grid .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* The short audience list runs in two columns under the other two. */
    .footer-grid .links-col:last-child { grid-column: 1 / -1; }
    .footer-grid .links-col:last-child ul { columns: 2; column-gap: 24px; }
    .footer-grid .links-col:last-child li { break-inside: avoid; }
}

/* Shared by the header's Ask AI button and the brand guide's component
   sample. The chat panel this once belonged to is gone; the icon is not. */
.ai-sparkle-icon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
}

.mobile-toggles {
    display: none;
    align-items: center;
    gap: 15px;
}

.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--ub-purple);
    cursor: pointer;
}

/* --- Landing Page Specific Overrides --- */
.landing-header .brand-bar {
    border-bottom: 2px solid var(--ub-purple);
}
.landing-header .phone-link {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ub-purple);
    text-decoration: none;
    margin-right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Landing page: disclaimer and split rows */
.disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
}

.split-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}
.split-row:last-child {
    margin-bottom: 0;
}
.split-content, .split-image {
    flex: 1;
}
.split-content h2 {
    color: var(--ub-purple);
    font-size: 2.2rem;
    margin-bottom: 20px;
}
.split-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.split-content ul {
    list-style: none;
    margin-bottom: 30px;
}
.split-content ul li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.split-content ul li i {
    color: var(--ub-blue);
}
/* --- Media Queries (Mobile Readiness) --- */
@media (max-width: 1100px) {
    .utility-bar { display: none; } /* Save vertical space on mobile */
    .header-actions { display: none; }
    
    .main-nav { 
        display: none; 
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 0;
        z-index: 900;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .main-nav.active {
        display: flex;
    }
    
    .main-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
    
    .main-nav > ul > li {
        width: 100%;
        border-bottom: 1px solid #eaeaea;
    }
    
    .main-nav > ul > li > a {
        padding: 20px;
        justify-content: space-between;
    }
    
    /* Mobile Mega Menu Accordion */
    .mega-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 20px;
        display: none; /* JS will toggle this */
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    .has-dropdown:hover .mega-menu {
        display: none; /* Disable CSS hover on mobile */
    }
    
    .has-dropdown.active .mega-menu {
        display: flex;
    }

    .has-dropdown.active > a i,
    .has-dropdown.active > .mega-toggle i {
        transform: rotate(180deg);
    }

    /* Drawer row: the label link fills the row and the chevron button holds a
       56px column at its right edge (44px+ tap target); the panel wraps onto
       its own full-width line below them. */
    .main-nav > ul > li.has-dropdown {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .main-nav > ul > li.has-dropdown > a {
        flex: 1 1 auto;
        min-width: 0;
    }
    .main-nav > ul > li.has-dropdown > .mega-toggle {
        flex: 0 0 56px;
        width: 56px;
        height: auto;
        min-height: 44px;
        margin: 0;
    }
    .main-nav > ul > li.has-dropdown > .mega-toggle:focus-visible {
        outline-offset: -4px;
    }
    .main-nav > ul > li.has-dropdown > .mega-menu {
        flex-basis: 100%;
    }

    /* Search: the desktop icon circle becomes a search-field row at the top
       of the drawer, on the same 20px gutter as the menu rows. */
    .main-nav > ul > li.mega-menu-trigger--search {
        order: -1;
        padding: 16px 20px;
        background: var(--bg-light, #f8f9fa);
    }

    .main-nav > ul > li.mega-menu-trigger--search > a {
        width: 100%;
        height: 48px;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 16px !important;
        border-radius: 0;
        border: 1px solid #cbd5e1;
        background: #FFFFFF;
        box-shadow: none;
        color: #64748b;
        font-size: 1rem;
        font-weight: 500;
    }

    .main-nav > ul > li.mega-menu-trigger--search > a i,
    .main-nav > ul > li.mega-menu-trigger--search:hover > a i,
    .main-nav > ul > li.mega-menu-trigger--search > a:focus-visible i {
        color: var(--ub-purple, #592D82);
        font-size: 1.05rem;
    }

    .main-nav > ul > li.mega-menu-trigger--search:hover > a,
    .main-nav > ul > li.mega-menu-trigger--search.is-open > a,
    .main-nav > ul > li.mega-menu-trigger--search > a:focus-visible {
        background: #FFFFFF;
        border-color: var(--ub-purple, #592D82);
        color: var(--navy, #120826);
        box-shadow: 0 0 0 3px rgba(89, 45, 130, 0.18);
        transform: none;
    }

    .main-nav .nav-search-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
    
    .mobile-toggles { display: flex; }
}

@media (max-width: 1180px) {
    .cta-section.pg-cta .cta-text h2,
    .cta-section.pg-cta .cta-text p {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .cta-section.pg-cta { padding: 70px 0; }
    .site-footer { padding-top: 56px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 36px; }
    .footer-logo { width: 180px; margin-bottom: 22px; }
    .links-col ul li { margin-bottom: 10px; }
    .links-col a { font-size: 0.88rem; }
    .footer-bottom { justify-content: flex-start; }
    /* Ten accounts: two even rows of five rather than a row and a stray. */
    .social-links { display: grid; grid-template-columns: repeat(5, 40px); gap: 12px 14px; }
    .social-links a { width: 40px; height: 40px; }
}

/* Landing Page Mobile Fixes */
@media (max-width: 768px) {
    .split-row { flex-direction: column; gap: 30px; }
    .split-image img { margin-top: 20px; }
    
    .landing-header .brand-container { flex-wrap: wrap; }
    .landing-header .header-actions { display: none; } /* Hide desktop actions to prevent overlap */
}

/* --- Utility: section background --- */
.bg-light {
    background-color: var(--bg-light);
}

/* --- Academics / Programs page --- */
.page-academics {
    display: block;
    width: 100%;
}

.academics-anchor-section {
    scroll-margin-top: 140px;
}

.academics-page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 0 64px;
    background-color: var(--ub-purple);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.academics-page-hero > .container {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.academics-page-hero .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.9) 0%, rgba(0, 167, 224, 0.58) 100%);
}

.academics-page-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 720px;
    width: 100%;
}

.academics-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 16px;
    opacity: 0.95;
}

.academics-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
}

.academics-breadcrumb a:hover {
    text-decoration: underline;
}

.academics-breadcrumb-sep {
    margin: 0 8px;
    opacity: 0.7;
}

.academics-breadcrumb-current {
    font-weight: 600;
}

.academics-page-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.academics-page-lead {
    font-size: 1.15rem;
    line-height: 1.65;
    margin-bottom: 28px;
    opacity: 0.95;
    max-width: 640px;
}

.academics-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.academics-toolbar-section {
    padding: 0 0 16px;
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.card-elevated {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--ub-purple);
}

.academics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 22px 28px;
}

.academics-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ub-purple);
    font-size: 1rem;
}

.academics-jump-select {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 0;
    border: 2px solid #eaeaea;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ub-purple);
    background: #f9fbfd;
    cursor: pointer;
    transition: var(--transition);
}

.academics-jump-select:focus {
    outline: none;
    border-color: var(--ub-purple);
    box-shadow: 0 0 0 3px rgba(89, 45, 130, 0.12);
}

.academics-quick-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
}

.academics-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--white);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid #eaeaea;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.academics-level-pill:hover {
    border-color: var(--ub-blue);
    color: var(--ub-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.academics-level-pill i {
    color: var(--ub-blue);
}

.academics-intro-block {
    padding: 56px 0 40px;
}

.academics-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.academics-intro-copy h2 {
    font-size: 2rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.academics-intro-copy p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
}

.academics-intro-stats {
    display: grid;
    gap: 16px;
}

.academics-mini-stat {
    background: var(--white);
    border-radius: 0;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--ub-blue);
}

.academics-mini-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ub-purple);
    line-height: 1;
}

.academics-mini-stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 600;
}

.academics-schools-section {
    padding: 72px 0 80px;
}

.academics-schools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
    align-items: stretch;
}

.academics-school-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-bottom: 4px solid transparent;
}

.academics-school-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-bottom-color: var(--ub-blue);
}

.academics-school-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-light);
    flex-shrink: 0;
}

.academics-school-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.academics-school-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 28px 28px 32px;
}

.academics-school-icon {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: rgba(0, 167, 224, 0.12);
    color: var(--ub-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
}

.academics-school-card h3 {
    font-size: 1.25rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

.academics-school-card p {
    color: var(--text-light);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.academics-school-card .program-link {
    margin-top: auto;
    color: var(--ub-purple);
    padding-top: 4px;
}

.academics-school-card .program-link:hover {
    color: var(--ub-blue);
}

.academics-focus-section {
    padding: 64px 0;
}

.academics-focus-header {
    max-width: 720px;
    margin-bottom: 28px;
}

.academics-focus-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ub-blue);
    margin-bottom: 10px;
}

.academics-focus-eyebrow--on-dark {
    color: rgba(255, 255, 255, 0.95);
}

.academics-focus-header h2 {
    font-size: 1.85rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
}

.academics-focus-header p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.65;
}

.academics-program-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.academics-program-chip {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 0;
    background: var(--white);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border: 2px solid #eaeaea;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.academics-program-chip:hover {
    border-color: var(--ub-purple);
    color: var(--ub-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.academics-focus-section.bg-light .academics-program-chip {
    background: var(--white);
}

.academics-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    width: 100%;
    align-items: stretch;
}

.academics-program-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    border: 2px solid #eaeaea;
    transition: var(--transition);
}

.academics-focus-section.bg-light .academics-program-card {
    background: var(--white);
}

.academics-program-card:hover {
    border-color: var(--ub-purple);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.academics-program-card:hover .academics-program-card__media img {
    transform: scale(1.03);
}

.academics-program-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8eef3;
}

.academics-program-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.academics-program-card__title {
    padding: 14px 16px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-main);
    flex: 1;
    display: flex;
    align-items: center;
}

.academics-grad-highlight {
    padding: 72px 0;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
}

.academics-grad-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.academics-grad-inner h2 {
    font-size: 2rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 14px;
}

.academics-grad-inner > div:first-child p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 20px;
}

.academics-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.academics-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-main);
}

.academics-checklist i {
    color: var(--ub-blue);
}

.academics-grad-card {
    padding: 32px;
    text-align: center;
}

.academics-grad-card h3 {
    color: var(--ub-purple);
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.academics-grad-card p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 0.98rem;
}

.academics-online-band {
    padding: 64px 0;
    background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-dark) 100%);
    color: var(--white);
}

.academics-online-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.academics-online-copy h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--white);
}

.academics-online-copy p {
    opacity: 0.92;
    max-width: 520px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.academics-online-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.academics-resources {
    padding: 48px 0 64px;
}

.academics-resources-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.academics-resource-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    border-radius: 0;
    background: var(--white);
    text-decoration: none;
    color: var(--ub-purple);
    font-weight: 700;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
}

.academics-resource-tile i {
    font-size: 1.75rem;
    color: var(--ub-blue);
}

.academics-resource-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 167, 224, 0.35);
}

/* --- College landing pages (schools & colleges mockups) --- */
.page-college {
    display: block;
    width: 100%;
}

/* Dead modifiers: no renderer emits .college-hero--*, and the images are named
   relative to this sheet. The block's rules moved to content-blocks.css. */
.college-page-hero.college-hero--science {
    background-image: url("../assets/images/legacy/majors-biology2.jpg");
}

.college-page-hero.college-hero--ebe {
    background-image: url("../assets/images/legacy/CNC-Lab-hero.jpg");
}

.college-page-hero.college-hero--chs {
    background-image: url("../assets/images/legacy/integrative-care-hero.jpg");
}

.college-dean {
    display: grid;
    /* Photo column only when there is a photo. ub/profile-card omits
       .college-dean__photo entirely when no image is set, and a fixed
       220px first column then leaves that space empty beside the text. */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 48px;
    padding: 36px;
    background: var(--bg-light);
    border-radius: 0;
    border: 1px solid #eaeaea;
}

.college-dean:has(.college-dean__photo) {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

.college-dean__photo {
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 1;
    max-width: 220px;
}

.college-dean__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.college-dean__content h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--ub-purple);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.2;
}

/* The body is split into one <p> per paragraph, and the global reset leaves
   them touching: a three-paragraph bio read as one block. */
.college-dean__content p + p {
    margin-top: 0.9rem;
}

.college-dean__content .dean-sig {
    margin-top: 20px;
    font-weight: 700;
    color: var(--ub-purple);
}

@media (max-width: 1100px) {
    .academics-intro-grid {
        grid-template-columns: 1fr;
    }

    .academics-schools-grid {
        grid-template-columns: 1fr;
    }

    .academics-program-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .academics-grad-inner {
        grid-template-columns: 1fr;
    }

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

    .academics-page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .academics-page-hero {
        min-height: 360px;
        padding: 36px 0 44px;
    }

    .academics-page-title {
        font-size: 2rem;
    }

    .academics-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .academics-jump-select {
        max-width: none;
    }

    .academics-toolbar-section {
        margin-top: -20px;
    }

    .academics-anchor-section {
        scroll-margin-top: 100px;
    }

    .academics-resources-grid {
        grid-template-columns: 1fr;
    }

    .academics-hero-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .academics-program-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .academics-program-card__title {
        padding: 12px 14px 16px;
        font-size: 0.92rem;
    }

    .pg-labs {
        padding: var(--section-pad) 0 !important;
    }

    .pg-labs > .container {
        padding-left: var(--gutter) !important;
        padding-right: var(--gutter) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pg-labs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .pg-lab {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 24px 20px 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .academics-program-card:hover {
        transform: none;
    }

    .academics-program-card:hover .academics-program-card__media img {
        transform: none;
    }
}

/* --- Program detail mockups (e.g. MS Artificial Intelligence + child pages) --- */
/* The measure now lives on the children (see .college-hero-inner above), so the
   program override has to target them too or it would have no effect. */
.page-program .college-hero-inner > * {
    max-width: 820px;
}

.program-ms-ai-hero {
    min-height: 400px;
}

.program-subpage-hero {
    min-height: 340px;
}

.program-catalog-placeholder {
    background: linear-gradient(90deg, rgba(0, 167, 224, 0.12) 0%, rgba(89, 45, 130, 0.06) 100%);
    border: 1px solid rgba(0, 167, 224, 0.35);
    border-radius: 0;
    padding: 18px 22px;
    margin: 28px 0 36px;
    max-width: 52rem;
}

.program-catalog-placeholder h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    color: var(--ub-purple);
}

.program-catalog-placeholder p:last-of-type {
    margin-bottom: 0;
}

.program-callout-notice {
    margin: 20px 0 28px;
    padding: 18px 22px;
    background: rgba(89, 45, 130, 0.08);
    border-left: 4px solid var(--ub-purple);
    border-radius: 0;
}

.program-callout-notice p {
    margin: 0;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.55;
}

.program-callout-notice a {
    font-weight: 700;
}

.program-media-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 36px;
}

/* Program block JPGs from bridgeport.edu are 800×519; match box ratio so tiles align without square cropping */
.program-media-strip figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #e8e4ef;
    aspect-ratio: 800 / 519;
    position: relative;
}

.program-media-strip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.program-lede-wide {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 52rem;
    margin-bottom: 20px;
}

.program-dyk {
    text-align: center;
    padding: 32px 24px 36px;
    margin: 32px 0;
    background: var(--white);
    border-radius: 0;
    border: 1px solid #eaeaea;
    box-shadow: var(--shadow-sm);
}

.program-dyk__title {
    font-size: 1.15rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
}

.program-dyk p {
    font-size: 1.08rem;
    color: var(--text-light);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.65;
}

.program-award-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 32px;
    margin: 36px 0;
}

.program-award-inline img {
    flex-shrink: 0;
    border-radius: 0;
    background: var(--white);
    padding: 8px;
    box-shadow: var(--shadow-sm);
}

.program-award-inline h2 {
    margin-top: 0;
}

.program-footnote {
    font-size: 0.88rem;
    color: var(--text-light);
    margin-top: 10px;
}

.program-checklist {
    list-style: none;
    margin: 16px 0 28px;
    padding: 0;
    max-width: 52rem;
}

.program-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.program-checklist i {
    color: var(--ub-blue);
    margin-top: 3px;
}

.program-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 32px;
}

.program-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--white);
    border: 2px solid #eaeaea;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ub-purple);
    box-shadow: var(--shadow-sm);
}

.program-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 28px 0 8px;
    max-width: 52rem;
}

.program-two-col h3 {
    color: var(--ub-purple);
    margin-bottom: 10px;
}

.program-quote {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
    margin: 36px 0;
    padding: 28px;
    background: var(--bg-light);
    border-radius: 0;
    border: 1px solid #eaeaea;
    max-width: 52rem;
}

.program-quote--alt {
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.program-quote__avatar img {
    border-radius: 50%;
    display: block;
    box-shadow: var(--shadow-md);
}

.program-quote blockquote {
    margin: 0;
}

.program-quote blockquote p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-main);
    margin-bottom: 12px;
}

.program-quote cite {
    font-style: normal;
    font-weight: 700;
    color: var(--ub-purple);
}

.program-video-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
    margin: 48px 0 8px;
    max-width: 56rem;
}

.program-video-split h2 {
    margin-top: 0;
    color: var(--ub-purple);
}

.program-video-frame {
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

.program-video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.program-sidebar-conc .college-sidebar-nav li {
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.92rem;
    padding-left: 2px;
}

.page-program .college-main h2,
.page-program .college-main h3 {
    color: var(--ub-purple);
}

.page-program .college-main h2 {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .program-media-strip {
        grid-template-columns: 1fr;
    }

    .program-two-col,
    .program-video-split {
        grid-template-columns: 1fr;
    }

    .program-quote {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .program-quote__avatar {
        margin: 0 auto;
    }
}

/* ==========================================================================
   Phase 4 Premium Additions
   ========================================================================== */

.kicker {
    display: inline-block;
    color: var(--ub-blue);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Search Modal Dialog & Mobile Search Toggle
 * ───────────────────────────────────────────────────────────────────────────── */
body.has-search-modal-open {
    overflow: hidden !important;
}

dialog.ub-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 680px;
    margin: 10vh auto auto;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    overflow: visible;
    z-index: 999999;
    box-shadow: none;
}

dialog.ub-search-modal:not([open]) {
    display: none;
}

dialog.ub-search-modal::backdrop {
    background: rgba(18, 8, 38, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ubSearchFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ubSearchFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ub-search-modal__inner {
    background: #ffffff;
    border-top: 4px solid var(--ub-purple, #592D82);
    border-radius: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 32px 32px 28px;
    animation: ubSearchSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ubSearchSlideIn {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ub-search-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.ub-search-modal__title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--navy, #120826);
    margin: 0 0 4px;
    line-height: 1.25;
}

.ub-search-modal__subtitle {
    font-size: 0.92rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.ub-search-modal__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none !important;
    border-radius: 0 !important;
    color: #475569;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ub-search-modal__close:hover,
.ub-search-modal__close:focus-visible {
    background: #e2e8f0;
    color: var(--navy, #120826);
    outline: none;
}

/* Input Form Row */
.ub-search-modal__form {
    margin: 0;
}

.ub-search-modal__input-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 2px solid var(--ub-purple, #592D82);
    border-radius: 0 !important;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(89, 45, 130, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ub-search-modal__input-bar:focus-within {
    box-shadow: 0 0 0 4px rgba(89, 45, 130, 0.18);
}

.ub-search-modal__search-icon {
    display: inline-flex;
    align-items: center;
    padding-left: 18px;
    color: var(--ub-purple, #592D82);
    font-size: 1.15rem;
    pointer-events: none;
}

.ub-search-modal__input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 12px 14px;
    border: none !important;
    border-radius: 0 !important;
    font-size: 1.05rem;
    color: #1e293b;
    background: transparent;
    font-family: inherit;
}

.ub-search-modal__input:focus {
    outline: none;
}

.ub-search-modal__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: transparent;
    border: none !important;
    color: #94a3b8;
    font-size: 1.05rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.ub-search-modal__clear:hover {
    color: #475569;
}

.ub-search-modal__submit {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 22px !important;
    height: auto !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    background-color: var(--ub-purple, #592D82) !important;
    border-color: var(--ub-purple, #592D82) !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.15s ease !important;
}

.ub-search-modal__submit:hover {
    background-color: #431f63 !important;
}

/* Popular Searches */
.ub-search-modal__popular {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.ub-search-modal__popular-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    margin-bottom: 10px;
}

.ub-search-modal__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ub-search-modal__pills .ub-search-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: all 0.15s ease;
}

.ub-search-modal__pills .ub-search-pill:hover,
.ub-search-modal__pills .ub-search-pill:focus-visible {
    background: #f5f3ff;
    border-color: var(--ub-purple, #592D82);
    color: var(--ub-purple, #592D82);
    outline: none;
}

/* Mobile Search Toggle in Header */
.mobile-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    color: var(--navy, #120826);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-search-toggle:hover,
.mobile-search-toggle:focus-visible {
    background: #f1f5f9;
    border-color: var(--ub-purple, #592D82);
    color: var(--ub-purple, #592D82);
    outline: none;
}

@media (max-width: 1100px) {
    .mobile-toggles {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-search-toggle {
        display: inline-flex;
    }
    dialog.ub-search-modal {
        width: calc(100% - 24px);
        margin: 16px auto auto;
    }
    .ub-search-modal__inner {
        padding: 22px 16px 20px;
    }
    .ub-search-modal__title {
        font-size: 1.25rem;
    }
    .ub-search-modal__input {
        height: 46px;
        font-size: 0.96rem;
    }
    .ub-search-modal__submit span {
        display: none;
    }
    .ub-search-modal__submit {
        padding: 0 16px !important;
    }
}





/* --------------------------------------------------------------------------
   Buttons go full width at 768 (brand: Breakpoints). One rule set for the
   content blocks' action rows, here because this sheet loads after every block
   sheet. Listed by row rather than a blanket `main .btn`, so the jump bar, tab
   controls, filters and toolbars keep their compact buttons. `main`, not
   .site-main: program pages render into main.page-program-detail.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .main-content-wrapper main :is(.hero-v3-actions, .hero-v2-actions, .pg-hero-ctas, .college-hero-actions,
        .college-callout__actions, .pg-admit-card, .pg-opt, .pg-labs-cta, .pg-path-foot,
        .ad-acts, .ad-cost-acts, .ad-visit-acts, .outcomes-action, .cta-buttons,
        .sound-actions, .pathways-foot, .ub-split-sec, .impact, .centennial2, .apply2,
        .whatson .subscribe, .ub-countdown-actions, .ub-giving-banner-actions) {
        flex-wrap: wrap;
        /* The CTA band centres its column, which shrank the button row to
           its content. */
        width: 100%;
    }

    .main-content-wrapper main :is(.hero-v3-actions, .hero-v2-actions, .pg-hero-ctas, .college-hero-actions,
        .college-callout__actions, .pg-admit-card, .pg-opt, .pg-labs-cta, .pg-path-foot,
        .ad-acts, .ad-cost-acts, .ad-visit-acts, .outcomes-action, .cta-buttons,
        .sound-actions, .pathways-foot, .ub-split-sec, .impact, .centennial2, .apply2,
        .whatson .subscribe, .ub-countdown-actions, .ub-giving-banner-actions) :is(.btn, .btn-ghost) {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Core gallery captions sit over the photo in a box capped at the photo's height
   with overflow:auto, so on a phone a long caption is cut off and only a mouse or
   touch can scroll it. Up to 640px let the caption sit under the photo and wrap. */
@media (max-width: 640px) {
    .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
        display: none;
    }
    .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 8px 2px 0;
        color: var(--text-main);
        text-shadow: none;
        text-align: left;
        background: none;
    }
    /* The cropped gallery sizes each image to 100% of its figure; with the
       caption out of the overlay that height collapses and lazy images never load. */
    .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
        flex: none;
        height: auto;
    }
}