/* ============================================
   CSRC Navigation System v2
   Consolidated from: parent-theme-overrides.css (nav portions),
   header-transitions.css, overrides/header.css, mobile-nav.css,
   collision-detection layout rules, and header-scaler scroll states.
   ============================================ */

/* ============================================
   DESIGN TOKENS (nav-relevant subset)
   ============================================ */
:root {
  --color-ucla-blue:      #2774AE;
  --color-ucla-blue-dark: #1e5a8a;
  --color-link:           #00598c;
  --color-link-hover:     #0079bf;
  --color-border:         #ccc;
  --color-bg-submenu:     #f2f2f2;
  --color-gold:           #ffd100;

  --header-height-mobile:  87px;
  --header-height-tablet:  87px;
  --header-height-desktop: 152px;
  --admin-bar-offset:      0px;
}

/* WP admin bar height: 46px on mobile (<783px), 32px on tablet+ (≥783px) */
@media screen and (max-width: 782px) {
  .admin-bar { --admin-bar-offset: 46px; }
}
@media screen and (min-width: 783px) {
  .admin-bar { --admin-bar-offset: 32px; }
}

/* ============================================
   PARENT THEME RESETS (ucla-lib.min.css)
   Neutralize parent theme nav rules so v2 styles don't need
   !important or high-specificity hacks throughout the file.
   ============================================ */

/* --- Mobile: hover / focus / active on links --- */
/* Parent: .ucla-main-nav__link:focus, .ucla-main-nav__link:hover { background-color:#0079bf; color:#fff } */
@media (max-width: 959px) {
  .ucla-main-nav__link:hover,
  .ucla-main-nav__link:focus,
  .ucla-main-nav__link:active {
    background-color: transparent !important;
    color: var(--color-link) !important;
  }

  /* Nested sublist link hover/focus (parent sets blue at every nesting level) */
  .ucla-main-nav__sublist .ucla-main-nav__link:hover,
  .ucla-main-nav__sublist .ucla-main-nav__link:focus,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:hover,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:focus,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:hover,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:focus {
    background-color: transparent !important;
    color: var(--color-link) !important;
  }
}

/* Restore hover only on devices with a real pointer (no touch stickiness) */
@media (max-width: 959px) and (hover: hover) {
  .ucla-main-nav__link:hover {
    background-color: var(--color-link-hover) !important;
    color: #fff !important;
  }

  .ucla-main-nav__sublist .ucla-main-nav__link:hover,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:hover,
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link:hover {
    background-color: var(--color-link-hover) !important;
    color: #fff !important;
  }
}

/* --- is-open state on links --- */
/* Parent: .is-open > .ucla-main-nav__link { background-color:#0079bf; color:#fff } */
.is-open > .ucla-main-nav__link {
  background-color: transparent !important;
  color: var(--color-link) !important;
}

/* --- is-open state on toggle SVG --- */
/* Parent: .is-open > .ucla-main-nav__toggle svg { fill:#fff; transform:rotate(180deg) } */
.is-open > .ucla-main-nav__toggle svg {
  fill: var(--color-link) !important;
  transform: none !important;
}

/* --- Sublist display from hover/focus (desktop only — keep, but reset mobile leak) --- */
/* Parent: .ucla-main-nav__item:hover > .ucla-main-nav__sublist .ucla-main-nav__sublist { display:none } */
@media (max-width: 959px) {
  .ucla-main-nav__item:hover > .ucla-main-nav__sublist .ucla-main-nav__sublist,
  .ucla-main-nav__item:focus > .ucla-main-nav__sublist .ucla-main-nav__sublist {
    display: none !important;
  }

  .is-open > .ucla-main-nav__sublist .is-open > .ucla-main-nav__sublist {
    display: block !important;
  }
}

/* --- Toggle button (parent theme element — we use .dropdown-icon instead) --- */
/* Parent: .ucla-main-nav__toggle { width:.75rem; ... } with hover/border styles */
@media (max-width: 959px) {
  .ucla-main-nav__toggle {
    display: none !important;
  }
}

/* --- has-children flex layout leak --- */
/* Parent: .ucla-main-nav__sublist > .ucla-nav_sublist--has-children { display:flex } (no media query) */
@media (max-width: 959px) {
  .ucla-main-nav__sublist > .ucla-nav_sublist--has-children {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* --- Sublist nested backgrounds --- */
/* Parent: .ucla-main-nav__sublist .ucla-main-nav__sublist { background-color:#e5e5e5 }
   Parent: ... .ucla-main-nav__sublist { background-color:#d9d9d9 } */
@media (max-width: 959px) {
  .ucla-main-nav__sublist .ucla-main-nav__sublist {
    background-color: transparent !important;
  }
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__sublist {
    background-color: transparent !important;
  }
}

/* --- Sublist border-top --- */
/* Parent: .ucla-main-nav__sublist { border-top:1px solid #ccc } (mobile) */
@media (max-width: 959px) {
  .ucla-main-nav__sublist {
    border-top: none !important;
  }
}

/* --- Search field background --- */
/* Parent: .ucla-main-nav__search-field { background: url(...) ... #f2f2f2 } (compound shorthand) */
.ucla-main-nav__search-field {
  background: transparent !important;
}

/* --- Search submit hidden --- */
/* Parent: .ucla-main-nav__search-submit { display:none } */
.ucla-main-nav__search-submit {
  display: block !important;
}

/* --- Header bottom border --- */
/* Parent sets border-bottom: 1px solid #ccc; child theme style.css overrides color to #eef0f2 */

/* ============================================
   HEADER / LOGO — Supplements only
   Core header layout (position, height, z-index, border) is in style.css.
   Parent theme handles container flex, padding, logo sizing.
   We only add what's missing or nav-specific here.
   ============================================ */

/* Top border transition for scroll state */
.top-border {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header transition for scroll state */
.csrc-header {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override fixed height from style.css so nav can wrap without overflow.
   style.css sets height: 87px (mobile), 152px (desktop) for the fixed header.
   We switch to min-height so the header grows to fit the wrapped nav row. */
@media (min-width: 960px) {
  .csrc-header {
    height: auto !important;
    min-height: 0;
  }
}

/* Logo: remove parent theme's 208px width cap so text fits on one line */
@media (max-width: 767px) {
  .csrc-header--school__logo-link {
    max-width: none;
    inline-size: auto !important;
    overflow: visible;
  }
}

/* Logo transition for scroll scaling */
.csrc-header--school__logo-link {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   SECONDARY NAV (top-right links)
   ============================================ */
.ucla-secondary-nav {
  display: none;
}

@media (min-width: 960px) {
  .ucla-secondary-nav {
    display: block;
    margin-left: auto;
    align-self: center;
  }
}

.ucla-secondary-nav__list {
  margin: 0;
  list-style: none;
}

.ucla-secondary-nav__item {
  border-bottom: 1px solid var(--color-border);
  margin-top: 0;
}

@media (min-width: 960px) {
  .ucla-secondary-nav__item {
    display: inline-block;
    border: none;
  }
}

.ucla-secondary-nav__link {
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-link);
  display: block;
  padding: 0.8rem 1.5rem;
}

@media (min-width: 960px) {
  .ucla-secondary-nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    line-height: 1;
  }
}

.ucla-secondary-nav__link:hover {
  color: #fff;
  background-color: var(--color-link-hover);
}

/* ============================================
   HAMBURGER
   ============================================ */
.hamburger {
  width: 40px;
  height: 40px;
  padding: 14px 12px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.15s linear, filter 0.15s linear;
  background-color: transparent;
  border: 0;
  margin-right: 1.5rem;
  margin-left: auto;
}

@media (min-width: 960px) {
  .hamburger { display: none !important; }
}

.hamburger:hover {
  opacity: 1;
  background: var(--color-ucla-blue);
}

.hamburger:hover .hamburger__inner,
.hamburger:hover .hamburger__inner::before,
.hamburger:hover .hamburger__inner::after {
  background-color: #fff;
}

.hamburger:active {
  background-color: #003b5c;
}

.hamburger__box {
  width: 16px;
  height: 12px;
  display: block;
  position: relative;
}

.hamburger__inner {
  width: 16px;
  height: 2px;
  background: var(--color-ucla-blue);
  border-radius: 0;
  display: block;
  position: absolute;
  top: 5px;
  transition: transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger__inner::before,
.hamburger__inner::after {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-ucla-blue);
  border-radius: 0;
}

.hamburger__inner::before {
  top: -5px;
  transition: top 75ms 0.12s ease, opacity 75ms ease;
}

.hamburger__inner::after {
  top: 5px;
  transition: bottom 75ms 0.12s ease, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Hamburger open (X) state */
.is-open .hamburger .hamburger__inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.is-open .hamburger .hamburger__inner::before {
  top: 0;
  opacity: 0;
  transition: top 75ms ease, opacity 75ms 0.12s ease;
}

.is-open .hamburger .hamburger__inner::after {
  top: 0;
  transform: rotate(-90deg);
  transition: bottom 75ms ease, transform 75ms 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ============================================
   MAIN NAV — Base
   ============================================ */
.csrc-main-nav {
  display: flex;
  order: 2;
  width: 100%;
  flex-direction: column;
  z-index: 1;
  top: calc(100% + 1px);
  background-color: #fff;
}

@media (min-width: 960px) {
  .csrc-main-nav {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================
   MAIN NAV — Mobile slide-in
   ============================================ */
@media (max-width: 959px) {
  .csrc-main-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    top: var(--header-height-mobile) !important;
    z-index: 999 !important;
    max-height: calc(100vh - var(--header-height-mobile)) !important;
    overflow-y: auto !important;
    transform: translateX(100vw);
    transition: transform 0.3s ease;
    margin-top: 0 !important;
  }

  .is-open .csrc-main-nav {
    transform: translateX(0) !important;
  }

  /* Admin bar offset — reads --admin-bar-offset custom property (updated by JS on scroll) */
  .admin-bar .csrc-main-nav {
    top: calc(var(--header-height-mobile) + var(--admin-bar-offset, 0px)) !important;
    max-height: calc(100vh - var(--header-height-mobile) - var(--admin-bar-offset, 0px)) !important;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .csrc-main-nav {
    top: var(--header-height-tablet) !important;
    max-height: calc(100vh - var(--header-height-tablet)) !important;
  }

  .admin-bar .csrc-main-nav {
    top: calc(var(--header-height-tablet) + var(--admin-bar-offset, 0px)) !important;
    max-height: calc(100vh - var(--header-height-tablet) - var(--admin-bar-offset, 0px)) !important;
  }
}

/* ============================================
   NAV LIST
   ============================================ */
.ucla-main-nav__list {
  order: 2;
  margin: 0;
  padding: 0;
}

@media (max-width: 959px) {
  .ucla-main-nav__list {
    border-bottom: 1px solid var(--color-border) !important;
  }
}

@media (min-width: 960px) {
  .ucla-main-nav__list {
    display: flex !important;
    order: 1;
    white-space: nowrap;
    border-bottom: none !important;
  }
}

/* ============================================
   NAV ITEMS
   ============================================ */
.ucla-main-nav__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
}

@media (max-width: 959px) {
  .ucla-main-nav__item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }
}

@media (min-width: 960px) {
  .ucla-main-nav__item {
    display: inline-flex;
    position: relative;
    border: none !important;
  }

  .ucla-main-nav__list > .ucla-main-nav__item:not(:last-child) {
    border-bottom: none !important;
  }

  .ucla-main-nav__item > .ucla-main-nav__link {
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
  }

  .ucla-main-nav__item:hover > .ucla-main-nav__link {
    background-color: var(--color-link-hover);
    color: #fff;
  }
}

/* ============================================
   NAV LINKS
   ============================================ */
.ucla-main-nav__link {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-link);
  height: auto !important;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem 0.8rem 1.25rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  gap: 4px;
}

.ucla-main-nav__link:visited {
  color: var(--color-link);
}

.ucla-main-nav__link--current-page {
  border-color: var(--color-gold);
}

@media (max-width: 959px) {
  .ucla-main-nav__link {
    padding-right: 4px;
  }
}

@media (min-width: 960px) {
  .ucla-main-nav__link {
    padding: 0.625rem 1rem 0.5rem;
    line-height: 1.75rem;
    font-size: 1.125rem;
    border-left: 0;
    border-bottom: 4px solid transparent;
  }

  .ucla-main-nav__link--current-page {
    position: relative;
    border-bottom-color: transparent;
  }

  /* Pseudo-element overlaps the header's 1px bottom border without shifting the link.
     Scoped to top-level nav links only — sublist links use ::before for the left indicator. */
  .ucla-main-nav__list > .ucla-main-nav__item > .ucla-main-nav__link--current-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 4px;
    background-color: #f76600;
  }
}

/* ============================================
   DROPDOWN ICON (chevron SVG)
   ============================================ */
.dropdown-toggle {
  margin-left: 0.25rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  /* Reset native <button> chrome — this is the submenu disclosure control now */
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-link);
  font: inherit;
  line-height: 0;
  cursor: pointer;
}

.dropdown-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  transition: transform 0.3s ease;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}


/* Desktop: the chevron is a real <button> beside the link. Mouse clicks fall
   through (pointer-events:none) so the label still navigates; it stays
   keyboard-focusable and carries aria-expanded; hover/focus opens the panel. */
@media (min-width: 960px) {
  .dropdown-toggle {
    pointer-events: none;
  }

  .dropdown-icon {
    pointer-events: none;
  }

  /* --- Top-level parents: keep the chevron in normal flow next to the label
     (as it was before), and paint the hover/active pill on the whole <li> so it
     spans BOTH the label and the chevron — the pre-a11y look. --- */
  .ucla-main-nav__list > .ucla-main-nav__item--has-children > .ucla-main-nav__link {
    padding-right: 0.5rem;
  }

  .ucla-main-nav__list > .ucla-main-nav__item--has-children > .dropdown-toggle {
    margin-left: 0;
    padding-right: 1rem;
  }

  .ucla-main-nav__list > .ucla-main-nav__item--has-children:hover {
    background-color: var(--color-link-hover);
  }

  /* Chevron turns white wherever the item's pill turns blue (top-level + nested) */
  .ucla-main-nav__item:hover > .dropdown-toggle {
    color: #fff;
  }

  /* --- Nested flyout parents: the row is full-width, so the chevron can sit at
     the far right without overlapping the label. --- */
  .ucla-nav_sublist--has-children {
    position: relative;
  }

  .ucla-nav_sublist--has-children > .dropdown-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.5rem;
    margin: 0;
  }
}

/* Mobile: the button is the tap target */
@media (max-width: 959px) {
  .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    z-index: 10;
  }

  .dropdown-toggle:active {
    background-color: rgba(0, 121, 191, 0.15);
  }

  .dropdown-toggle:hover {
    background-color: rgba(0, 121, 191, 0.08);
  }

  /* Rotate when open */
  .is-open > .dropdown-toggle .dropdown-icon {
    transform: rotate(90deg);
  }
}

/* Desktop: rotate when open (hover for mouse, .is-open for keyboard) — top-level
   only; nested chevrons stay pointing right. Focus alone no longer rotates. */
@media (min-width: 960px) {
  .ucla-main-nav__item--has-children:hover > .dropdown-toggle .dropdown-icon,
  .ucla-main-nav__item--has-children.is-open > .dropdown-toggle .dropdown-icon,
  .menu-item-has-children:hover > .dropdown-toggle .dropdown-icon,
  .menu-item-has-children.is-open > .dropdown-toggle .dropdown-icon {
    transform: rotate(90deg) !important;
  }

  .ucla-main-nav__sublist .menu-item-has-children:hover > .dropdown-toggle .dropdown-icon,
  .ucla-main-nav__sublist .menu-item-has-children.is-open > .dropdown-toggle .dropdown-icon,
  .ucla-main-nav__sublist .ucla-nav_sublist--has-children:hover > .dropdown-toggle .dropdown-icon,
  .ucla-main-nav__sublist .ucla-nav_sublist--has-children.is-open > .dropdown-toggle .dropdown-icon {
    transform: none !important;
  }
}

/* Nested submenu tap target (smaller) */

@media (max-width: 959px) {
  .ucla-main-nav__sublist .dropdown-toggle {
    flex: 0 0 40px;
  }
}

/* ============================================
   SUBLISTS (dropdown menus)
   ============================================ */
.ucla-main-nav__sublist {
  display: none;
  flex-grow: 1;
  width: 100%;
  background-color: var(--color-bg-submenu);
  margin: 0;
  padding: 0;
}

@media (max-width: 959px) {
  /* Sublist is always display:block on mobile (not display:none) so that
     max-height transitions work. Hidden via max-height:0 + overflow:hidden. */
  .ucla-main-nav__sublist {
    display: block !important;
    max-height: 0;
    overflow: hidden !important;
    position: static !important;
    width: 100% !important;
    /* Collapsed: visibility:hidden takes the sub-links out of the tab order and
       the accessibility tree. max-height:0 + overflow:hidden only clips them
       visually, so without this they stay focusable and keyboard users tab into
       a collapsed submenu. The 0.35s delay holds the hide until the collapse
       animation finishes. */
    visibility: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    /* Limit layout recalc scope — the sublist's internals don't affect
       siblings or ancestors while animating. */
    contain: layout style;
    /* max-height is set by JS via scrollHeight for smooth open/close */
  }

  /* Expanded: reveal immediately (no delay) so links join the tab order as the
     panel opens. Direct-child scope keeps nested submenus hidden until their own
     item is expanded. */
  .is-open > .ucla-main-nav__sublist {
    visibility: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  /* ---- Level 2 (first sublist) ---- */
  .ucla-main-nav__sublist {
    background-color: #f8f9fa;
  }

  .ucla-main-nav__sublist .ucla-main-nav__link {
    padding-left: 1.75rem;
    font-size: 0.9375rem;
    border-left: 3px solid transparent;
  }

  .ucla-main-nav__sublist .ucla-main-nav__item:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  /* ---- Level 3 (nested sublist) ---- */
  .ucla-main-nav__sublist .ucla-main-nav__sublist {
    background-color: #fff;
  }

  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link {
    padding-left: 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-left: 3px solid transparent;
  }

  /* ---- Level 4 ---- */
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link {
    padding-left: 3.25rem;
  }

  /* ---- Current page / ancestor indicator (all levels) ----
     Only gold is used for the left border. Open state uses background only. */
  .ucla-main-nav__link--current-page {
    border-left-color: var(--color-gold) !important;
  }

  /* ---- Active/open state for menu items ----
     Parent theme blue is neutralized in the reset block above.
     V2 uses a subtle background tint instead. */
  /* Open-state tint sits on the whole row (the <li>), not just the link, so the
     chevron button cell shares the same background as the adjacent link instead
     of staying white. The link keeps its color/weight but drops its own tint to
     avoid stacking a second layer over the row. */
  .ucla-main-nav__list > .ucla-main-nav__item.is-open {
    background-color: rgba(0, 89, 140, 0.04) !important;
  }

  .ucla-main-nav__sublist .is-open {
    background-color: rgba(0, 89, 140, 0.06) !important;
  }

  .is-open > .ucla-main-nav__link {
    background-color: transparent !important;
    color: var(--color-link) !important;
    font-weight: 600;
  }

  .ucla-main-nav__sublist .is-open > .ucla-main-nav__link {
    background-color: transparent !important;
  }

  /* Link text remains navigable */
  .ucla-main-nav__item--has-children > .ucla-main-nav__link > span {
    flex: 1;
    pointer-events: auto;
  }
}

@media (min-width: 960px) {
  .ucla-main-nav__sublist {
    position: absolute;
    top: 100%;
    background-color: #fff;
    min-width: 227px;
    width: min-content;
    border: 1px solid #dde1e5;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Left-align first-level dropdowns under their parent item.
     The parent theme sets an unscoped `.ucla-main-nav__sublist { right: 0 }`,
     which pins every panel's right edge to its parent's right edge. For wide
     items that coincidentally looks left-aligned, but for a narrow item with a
     narrow panel (e.g. News > Newsletters) it visibly shifts the panel left of
     its parent. Scoped to direct children of top-level items so nested flyouts
     (which use left: 100%) are unaffected. */
  .ucla-main-nav__item--has-children > .ucla-main-nav__sublist {
    left: 0;
    right: auto;
  }

  .ucla-main-nav__sublist .ucla-main-nav__item {
    display: block !important;
  }

  .ucla-main-nav__sublist .ucla-main-nav__item:not(:last-child) > .ucla-main-nav__link {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #eef0f2 !important;
  }

  .ucla-main-nav__sublist .ucla-main-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-left: none;
    padding: 0.8rem 1.5rem 0.8rem 0.75rem;
    max-width: 350px;
    white-space: normal !important;
    line-height: 1.4;
    font-size: 1rem;
    margin-left: -1px;
    padding-left: calc(0.75rem + 1px);
  }

  /* Current-page indicator — pseudo-element avoids 45° miter with bottom border */
  .ucla-main-nav__sublist .ucla-main-nav__link--current-page::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #f76600;
  }


  /* Reset parent theme nested padding — flyouts are independent panels, not indented */
  .ucla-main-nav__sublist .ucla-main-nav__sublist .ucla-main-nav__link {
    padding-left: calc(0.75rem + 1px);
  }

  .ucla-main-nav__sublist .ucla-main-nav__link:hover {
    background-color: var(--color-link-hover);
    color: #fff;
  }

  /* Mouse hover opens; keyboard opens via the chevron button (JS adds .is-open).
     Focus alone no longer opens, so the chevron is the single, predictable
     control (SC 4.1.2 / clearer disclosure). */
  .ucla-main-nav__item--has-children:hover > .ucla-main-nav__sublist,
  .ucla-main-nav__item--has-children.is-open > .ucla-main-nav__sublist {
    display: unset;
  }

  /* Escape sets .nav-dismissed to force a hover-opened panel closed without
     moving the pointer (SC 1.4.13 Dismissible). Higher specificity than the rule
     above, so it wins on source order without !important. Keyboard-opened panels
     are closed by removing .is-open directly. The flag is cleared by JS once the
     pointer leaves or focus exits the item. */
  .ucla-main-nav__item--has-children.nav-dismissed:hover > .ucla-main-nav__sublist {
    display: none;
  }

  /* Nested submenus fly out right */
  .ucla-main-nav__sublist li.ucla-nav_sublist--has-children {
    position: relative;
  }

  .ucla-main-nav__sublist li.ucla-nav_sublist--has-children:hover > .ucla-main-nav__sublist,
  .ucla-main-nav__sublist li.ucla-nav_sublist--has-children.is-open > .ucla-main-nav__sublist {
    display: block;
    position: absolute;
    left: 100%;
    top: -1px;
    background-color: #fff;
  }

  /* Collision detection reversal */
  .ucla-main-nav__sublist--reverse {
    left: auto;
    right: 0;
  }
}

/* ============================================
   MOBILE SECONDARY NAV (inside mobile panel)
   ============================================ */
.csrc-main-nav .ucla-secondary-nav__list--mobile {
  display: block;
  order: 3;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 960px) {
  .csrc-main-nav .ucla-secondary-nav__list--mobile {
    display: none;
  }
}

.ucla-secondary-nav__list--mobile .ucla-secondary-nav__item {
  display: block;
}

.ucla-secondary-nav__list--mobile .ucla-secondary-nav__link {
  display: block;
  padding: 0.8rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-link);
}

/* ============================================
   SEARCH (desktop)
   ============================================ */
.ucla-main-nav__search-desktop {
  order: 1;
}

@media (min-width: 960px) {
  .ucla-main-nav__search-desktop {
    order: 3;
    line-height: 0;
  }
}

.ucla-main-nav__search-desktop-button {
  display: none;
}

@media (min-width: 960px) {
  .ucla-main-nav__search-desktop-button {
    display: revert;
    height: 44px;
    width: 56px;
    text-align: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .ucla-main-nav__search-desktop-button:hover {
    background-color: var(--color-link-hover);
  }

  .ucla-main-nav__search-desktop-button:hover svg path {
    fill: #fff;
  }
}

/* ============================================
   SEARCH FORM (inside nav)
   ============================================ */

/* Mobile: search form always visible inside nav panel */
@media (max-width: 959px) {
  .ucla-main-nav__search-block-form {
    display: block !important;
    order: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: #f8f8f8;
  }
}

/* Desktop: absolutely positioned dropdown (parent theme behavior) */
@media (min-width: 960px) {
  .ucla-main-nav__search-desktop .ucla-main-nav__search-block-form {
    position: absolute;
    width: 100%;
    left: 0;
    padding: 1.5rem 0;
    background-color: #fff;
    margin-top: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .is-open .ucla-main-nav__search-desktop .ucla-main-nav__search-block-form,
  .ucla-main-nav__search-desktop.is-open .ucla-main-nav__search-block-form {
    display: block;
  }
}

/* Search form layout */
.ucla-main-nav__search-form {
  display: flex;
  align-items: center;
  max-width: 76.5rem;
  margin: 0 auto;
  padding: 0 0 0 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ucla-main-nav__search-form:focus-within {
  border-color: var(--color-ucla-blue);
  box-shadow: 0 0 0 1px var(--color-ucla-blue);
}

@media (min-width: 960px) {
  .ucla-main-nav__search-form {
    padding: 0 0 0 1.5rem;
  }
}

/* Label needs to fill space */
.ucla-main-nav__search-form > label {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Search input — reset parent theme styles
   Parent sets: background with SVG + #f2f2f2, border-bottom, border (960px+)
   Must use !important to override the compound background shorthand */
.ucla-main-nav__search-field {
  flex: 1;
  padding: 0.75rem 0.75rem 0.75rem 0 !important;
  font-size: 1rem;
  min-width: 0;
  width: 100%;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}

.ucla-main-nav__search-field:focus {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.ucla-main-nav__search-field::placeholder {
  color: #999;
  line-height: normal;
}

/* Search icon (CSS pseudo-element replaces parent's background-image icon) */
.ucla-main-nav__search-form > label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 0.625rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background 0.15s;
}

.ucla-main-nav__search-form:focus-within > label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232774AE' d='M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z'/%3E%3C/svg%3E");
}

/* Submit button — override parent's display:none default and display:revert at 960px */
.ucla-main-nav__search-submit {
  display: block !important;
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  margin: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-link) !important;
  border: none !important;
  border-radius: 3px !important;
  cursor: pointer;
  transition: background-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}

.ucla-main-nav__search-submit:hover {
  background-color: var(--color-link-hover) !important;
}

.ucla-main-nav__search-submit:active {
  background-color: var(--color-ucla-blue-dark) !important;
}

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

/* ============================================
   SCROLLED STATE (desktop)
   ============================================ */
@media (min-width: 960px) {
  .csrc-header--scrolled {
    min-height: auto;
  }

  .csrc-header--scrolled .csrc-header--school__logo-link {
    transform: scale(0.95);
  }

  .csrc-header--scrolled .csrc-main-nav {
    margin-top: 0.25rem !important;
  }

  .csrc-header--scrolled .top-border {
    height: 0;
  }
}

/* ============================================
   KEYBOARD ACCESS TO SUBMENUS
   WCAG 2.1.1 Keyboard (A) + 4.1.2 Name, Role, Value (A)

   Desktop keyboard users open submenus by activating the chevron <button>
   (JS toggles .is-open), NOT merely by focusing the parent link. This makes the
   chevron the single, predictable disclosure control and keeps its announced
   expanded/collapsed state matched to what's on screen. The .is-open display and
   flyout positioning are defined alongside the :hover rules above, so mouse and
   keyboard share one code path.
   ============================================ */

/* Visible keyboard focus indicator. !important + the `.ucla-main-nav` prefix are
   required to override the global `[href]:focus { outline: none !important }`
   reset in style.css. */
.ucla-main-nav .ucla-main-nav__link:focus-visible {
  outline: 2px solid #002b49 !important;
  outline-offset: -2px;
}

/* Mobile: the chevron disclosure button sits at the panel's right edge, where the
   nav's overflow (overflow-y:auto forces overflow-x to clip) would cut off an
   outward focus ring. Draw it INSET so it stays within the 44px button — same
   treatment as the links above. */
@media (max-width: 959px) {
  .ucla-main-nav .dropdown-toggle:focus-visible {
    outline: 2px solid #002b49 !important;
    outline-offset: -3px;
  }
}