/* ================================================================
   ŅłĘŽÉē ā€” Global Navigation (Mega Nav, Single-Source)
   CSS only ā€” no framework dependencies
   Class namespace: .cn-* ("Columbia Nav")

   KEY DIFFERENCE FROM nav.css:
   The same .cn-nav / .cn-mega markup serves both desktop mega menus
   AND the mobile accordion panel. No separate .cn-mobile-panel element.

   New structural elements:
     .cn-nav-item-row   ā€” flex row wrapping .cn-nav-link + .cn-nav-expand
                          desktop: display:contents (transparent to layout)
                          mobile:  display:flex (link + chevron button row)
     .cn-nav-expand     ā€” mobile-only chevron button on each L1 item
     .cn-col-subgroup   ā€” wraps .cn-col-heading + .cn-col-content
                          desktop: transparent
                          mobile:  grid accordion container
     .cn-col-content    ā€” wraps .cn-mega-links
                          desktop: transparent
                          mobile:  min-height:0 child for grid trick
     .cn-col-expand     ā€” mobile-only chevron button in each col heading
     .cn-mob-only       ā€” .cn-mega-col visible on mobile only
   ================================================================ */

/* ---- Tokens ---- */
:root {
  --color-ink: #1A1A1A;
  --color-paper: #F2F0EB;

  --cn-wabash: #00ABC8;
  --cn-wabash-dk: #0090aa;
  /* Same color as --cn-wabash, as R,G,B components ā€” needed wherever we
     want a translucent wabash blue (rgba()) instead of the solid hex.
     Keeping this derived from the same value means there's exactly one
     blue defined in the whole file; every other blue below references
     one of these three. */
  --cn-wabash-rgb: 0, 171, 200;
  --cn-bar-bg: var(--color-ink);
  --cn-bar-h: 80px;
  --cn-font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cn-z-bar: 1000;
  --cn-z-panel: 1010;
  --cn-z-mobile: 900;
  --cn-ease: 0.18s ease;

  /* Height of any content stacked above the nav in normal document flow
     (e.g. an emergency/alert banner include). Defaults to 0 ā€” nav-single.js
     measures the real value at runtime via syncNavTop() and overrides this
     custom property, so the fixed header shifts down to clear the banner
     instead of overlapping it. */
  --cn-alert-h: 0px;
}

.cn-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1a1a1a;
  color: #fff;
  padding: 10px 16px;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.cn-skip-link:focus {
  top: 0;
}

/* ---- Box model reset scoped to nav ---- */
.cn-header *,
.cn-nav * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.cn-header a,
.cn-nav a {
  text-decoration: none;
}


/* ================================================================
   HEADER SHELL
   ================================================================ */
.cn-header {
  position: fixed;
  /* top is normally 0, but shifts down to clear an emergency/alert banner
     rendered above the nav in normal document flow ā€” see --cn-alert-h. */
  top: var(--cn-alert-h);
  left: 0;
  right: 0;
  z-index: var(--cn-z-bar);
  font-family: var(--cn-font);
}

.cn-bar {
  display: flex;
  align-items: center;
  height: var(--cn-bar-h);
  background: var(--cn-bar-bg);
  padding: 0 0 0 1.5rem;
  position: relative;
}


/* ================================================================
   BRAND / WORDMARK
   ================================================================ */
.cn-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.5rem 0;
  margin-right: 2rem;
}

.cn-brand img {
  height: 40px;
  width: auto;
  display: block;
  transition: transform var(--cn-ease);
  transform-origin: center;
  /* app.css has a sitewide "fade images on hover" rule (opacity/filter)
     that applies to any <img> inside a link, including the wordmark ā€”
     cancel it out with !important so only the scale below shows. */
  opacity: 1 !important;
  filter: none !important;
}

/* On hover, scale the wordmark up slightly instead of fading ā€” transform
   doesn't affect layout, so surrounding nav items never shift. */
.cn-brand:hover img,
.cn-brand:focus img,
.cn-brand:active img {
  transform: scale(1.02);
  opacity: 1 !important;
  filter: none !important;
}


/* ================================================================
   PRIMARY NAV ā€” desktop (in-bar flex item)
   On mobile this element becomes position:fixed and slides in.
   ================================================================ */
.cn-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1 1 auto;
}

.cn-nav-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cn-nav-item {
  display: flex;
  align-items: stretch;
  position: static;
}

/* ---- Nav item row wrapper ----
   display:contents makes this transparent on desktop:
   cn-nav-link and cn-nav-expand behave as direct flex children of cn-nav-item. */
.cn-nav-item-row {
  display: contents;
}

/* Top-level nav link */
.cn-nav-link {
  display: flex;
  align-items: center;
  padding: 0;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  /* Slightly wider letter-spacing per design feedback; margin trimmed
     from 1.25rem to 1rem so the row doesn't grow wide enough to shift
     the 1250px mobile/desktop breakpoint. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--cn-ease);
  margin: 0 1rem;
}

/* Hover/open: underline only ā€” color intentionally stays white.
   color:#fff !important is required to beat app.css's generic
   `a:hover, a:focus { color:#0078a0 }`, which would otherwise tint the
   header text blue on hover/open (the underline is the only feedback).
   Thickness matches the subhead (.cn-col-heading) underline weight (2px). */
.cn-nav-link:hover,
.cn-nav-item.is-open .cn-nav-link {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--cn-wabash);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

.cn-nav-link:focus-visible {
  outline: 2px solid var(--cn-wabash);
  outline-offset: 4px;
}

.cn-nav-item.is-active>.cn-nav-item-row>.cn-nav-link {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--cn-wabash);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

/* Underline handoff: when the mouse moves to a different header, JS adds
   .cn-handoff to the outgoing item (which keeps .is-open briefly so its
   panel stays opaque during the crossfade). Drop its underline instantly
   so two underlines never show at once ā€” the active section keeps its
   own persistent underline via the :not(.is-active) guard. */
.cn-nav-item.cn-handoff:not(.is-active)>.cn-nav-item-row>.cn-nav-link {
  text-decoration: none !important;
}

/* Mobile L1 expand button ā€” hidden on desktop */
.cn-nav-expand {
  display: none;
}


/* ================================================================
   UTILITY NAV ā€” Give / Apply / Visit / Search
   ================================================================ */
.cn-util {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.cn-util-link {
  display: flex;
  align-items: center;
  height: var(--cn-bar-h);
  padding: 0 0.9rem;
  color: #ccc;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Hover: underline instead of the previous color fade. opacity:1
   !important cancels out app.css's generic link-hover fade so these
   never dim either. color is re-declared (not just opacity) because
   app.css's `a:hover, a:focus { color:#0078a0 }` doesn't compete with
   opacity/text-decoration, so without a color here it wins the color
   property on hover. */
.cn-util-link:hover {
  color: #ccc !important;
  text-decoration: underline;
  opacity: 1 !important;
}

.cn-util-link.cn-give {
  color: var(--cn-wabash);
}

/* No color change on hover for Get Info / Apply / Visit / Give ā€” the
   shared .cn-util-link:hover underline above is the only hover feedback.
   (Previously this darkened Give's blue on hover; removed so its text
   color stays constant like the other three.) Give needs its own
   :hover rule since the generic one above would otherwise force it
   back to the default #ccc. */
.cn-util-link.cn-give:hover {
  color: var(--cn-wabash) !important;
}

.cn-util-link.cn-apply {
  background: var(--cn-wabash);
  color: var(--color-ink);
  padding: 0 1.1rem;
  transition: background var(--cn-ease);
}

.cn-util-link.cn-apply:hover {
  background: var(--cn-wabash-dk);
  color: var(--color-ink);
  opacity: 1 !important;
}

/* Search button */
.cn-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cn-bar-h);
  padding: 1.5rem;
  margin-bottom: 0;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color var(--cn-ease), background var(--cn-ease);
}

/* search-utility-icon.svg: single combined magnifying-glass + 3-dot
   glyph (designer-supplied), replacing the previous two separately
   sized/spaced svgs ā€” sized to its native 32:24 aspect ratio. */
.cn-search-btn svg.cn-search-combo-icon {
  display: block;
  width: 32px;
  height: 24px;
  flex-shrink: 0;
}

/* No tap-highlight overlay on touch devices ā€” without this, tapping the
   button on mobile leaves a translucent colored box painted over the
   whole tap target after the menu opens. */
.cn-search-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Icon-only color change signals hover/active state ā€” no background box.
   aria-expanded (JS-driven, always accurate) covers the "menu is open"
   state; :hover is scoped to hover-capable pointers (see below) so touch
   taps never leave the icon stuck blue the way a lingering :hover would
   on devices with no real mouseleave event. */
.cn-search-btn[aria-expanded="true"],
.cn-search-btn:focus-visible {
  color: var(--cn-wabash);
}

@media (hover: hover) {
  .cn-search-btn:hover {
    color: var(--cn-wabash);
  }
}

/* No ring/box on focus ā€” same treatment as the mobile expand buttons
   (see the ACCESSIBILITY section at the bottom of this file). Keyboard
   focus is still visible via the color change above. */
.cn-search-btn:focus-visible {
  outline: none;
}

/* Belt-and-suspenders: app.css ships a generic button-hover background
   that was painting a solid teal box behind this icon on hover/active ā€”
   force it transparent at every interactive state so color is the only
   thing that ever changes, exactly like the mobile hamburger button. */
.cn-search-btn:hover,
.cn-search-btn:focus,
.cn-search-btn:focus-visible,
.cn-search-btn:active,
.cn-search-btn[aria-expanded="true"] {
  background: transparent !important;
  box-shadow: none !important;
}


/* ================================================================
   MEGA MENU PANELS ā€” desktop
   ================================================================ */
.cn-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cn-bar-h);
  /* Same custom property as the header bar (was a hardcoded hex that had
     drifted slightly out of sync with --cn-bar-bg) so the two always match. */
  background: var(--cn-bar-bg);
  /* Negative spread (-12px) pulls the shadow box in on all sides so the
     blur no longer bleeds UPWARD past the panel's top edge onto the nav
     bar (which was reading as a faint seam / color difference between the
     bar and the menu). The offset + spread keep a soft shadow below the
     panel only. */
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.45);
  padding: 2rem 0;
  z-index: var(--cn-z-panel);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--cn-ease),
    transform var(--cn-ease),
    visibility 0s linear var(--cn-ease);
  pointer-events: none;
}

/* Open state (JS-driven). Opacity/transform are instant (0s) here so
   hovering a heading opens its menu immediately instead of fading in;
   the fade is kept only on close (see the base .cn-mega rule above),
   which is what mega-nav-v2.js's handoff timing (MEGA_TRANSITION_MS) expects. */
.cn-nav-item.is-open>.cn-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0s,
    transform 0s,
    visibility 0s linear;
  pointer-events: auto;
}

/* CSS hover fallback ā€” same instant-open behavior as the JS-driven rule above. */
@media (min-width: 1250px) {

  .cn-nav-item.cn-has-mega:hover>.cn-mega,
  .cn-nav-item.cn-has-mega:focus-within>.cn-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0s,
      transform 0s,
      visibility 0s linear;
    pointer-events: auto;
  }
}

/* Inner layout: 4 equal columns */
.cn-mega-inner {
  display: flex;
  gap: 3rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.cn-mega-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Mobile-only columns: hidden on desktop */
.cn-mega-col.cn-mob-only {
  display: none;
}

/* ---- Column subgroup: transparent wrapper on desktop ---- */
.cn-col-subgroup {
  /* no desktop styles needed ā€” transparent */
}

/* Column heading ā€” white text with a blue underline; font size bumped
   ~2px per design feedback (was 0.68rem). */
.cn-col-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  margin-top: 0;
  border-bottom: 2px solid var(--cn-wabash);
}

.cn-col-heading a {
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: inherit;
  display: block;
}

/* Linked subheads: turn blue on hover instead of adding an extra
   underline (the border-bottom above already reads as the underline). */
.cn-col-heading a:hover {
  color: var(--cn-wabash);
  text-decoration: none;
}

/* Secondary heading within a column */
.cn-col-heading.cn-col-heading-sub {
  margin-top: 1.6rem;
}

/* Mobile L2 expand button ā€” hidden on desktop */
.cn-col-expand {
  display: none;
}

/* ---- Column content: transparent wrapper on desktop ---- */
.cn-col-content {
  /* no desktop styles needed ā€” transparent */
}

/* Link list */
.cn-mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cn-mega-links li {
  margin: 0;
}

.cn-mega-links a {
  display: block;
  padding: 0.38rem 0;
  color: #F2F0EB;
  font-size: 0.93rem;
  line-height: 1.45;
  transition: color 0.12s;
}

.cn-mega-col.cn-no-heading .cn-mega-links:first-child a:first-child {
  padding-top: 0;
}

/* Hover/focus: underline only ā€” color intentionally never changes here. */
.cn-mega-links a:hover,
.cn-mega-links a:focus {
  text-decoration: underline;
}

.cn-mega-links a:focus-visible {
  outline: 2px solid var(--cn-wabash);
  outline-offset: 2px;
}


/* ================================================================
   DESKTOP SEARCH PANEL
   ================================================================ */
.cn-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cn-bar-h);
  /* Same custom property as the header bar / mega menu ā€” keeps all three
     backgrounds in sync (see .cn-mega above). */
  background: var(--cn-bar-bg);
  /* Same downward-only shadow as .cn-mega ā€” no upward bleed onto the bar. */
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.45);
  padding: 2rem 0;
  z-index: var(--cn-z-panel);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--cn-ease),
    transform var(--cn-ease),
    visibility 0s linear var(--cn-ease);
}

.cn-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--cn-ease),
    transform var(--cn-ease),
    visibility 0s linear;
}

.cn-search-panel-inner {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* White bar (matching the mobile search drawer's treatment) so the
   search icon reads as part of the bar rather than floating on the
   dark panel. No border/shadow ā€” including on focus ā€” per design
   feedback (the previous transparent version picked up a faint gray
   border + focus glow from the site's base form styles). */
.cn-search-form {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  /* !important + min/max-height pins: app.css ships a default <form>
     height/padding with enough specificity to win over a plain height
     declaration, which is what left this bar roughly double the size of
     the field actually inside it. */
  height: 48px !important;
  min-height: 0 !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin-bottom: 0.75rem;
  background: #fff;
  border: none !important;
  border-radius: 3px;
  box-shadow: none !important;
  overflow: hidden !important;
}

.cn-search-form:focus-within {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* appearance:none + explicit border/shadow removal, all !important ā€”
   app.css ships default text-input styling (border, focus glow) with
   enough specificity to otherwise peek through around this seamless
   white bar. */
.cn-search-input {
  flex: 1;
  height: 48px !important;
  min-height: 0 !important;
  max-height: 48px !important;
  box-sizing: border-box;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  margin: 0 !important;
  padding: 0 1.25rem;
  font-size: 1.2rem;
  font-family: var(--cn-font);
  color: #1A1A1A;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.cn-search-input::placeholder {
  color: #767676;
}

.cn-search-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cn-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px !important;
  min-height: 0 !important;
  max-height: 48px !important;
  margin: 0 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cn-wabash);
  padding: 0 1.25rem;
  cursor: pointer;
  transition: color var(--cn-ease);
}

/* app.css ships a generic `button:hover, button:focus { background-color:
   #036776; }` rule that was painting a dark teal box over this button ā€”
   force the white bar background to hold at every interactive state.
   With the background staying white, the icon just darkens slightly for
   hover feedback (matching it to white would make it disappear). */
.cn-search-submit:hover,
.cn-search-submit:focus,
.cn-search-submit:active {
  background-color: #fff !important;
  color: var(--cn-wabash-dk);
}

/* Sized up along with the taller/tighter search bar so it doesn't look
   small relative to the button's now-full 48px height. */
.cn-search-submit svg {
  width: 26px;
  height: 26px;
}

.cn-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-top: 2rem;
}

.cn-search-links .cn-mega-col {
  flex: 1 1 150px;
}


/* ================================================================
   MOBILE TOGGLE BUTTON
   ================================================================ */
.cn-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: var(--cn-bar-h);
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}

.cn-mobile-toggle:focus-visible {
  outline: none;
}

.cn-mobile-toggle {
  -webkit-tap-highlight-color: transparent;
}

.cn-mobile-toggle svg.cn-toggle-svg {
  width: 32px;
  height: 32px;
  display: block;
  transition: color var(--cn-ease);
}

/* aria-expanded (JS-driven, always accurate) covers "menu is open";
   :hover is scoped to hover-capable pointers (see below) so a touch tap
   doesn't leave the icon stuck blue after the menu closes ā€” touch
   devices simulate :hover on tap but never fire a real mouseleave. */
.cn-mobile-toggle[aria-expanded="true"] svg.cn-toggle-svg {
  color: var(--cn-wabash);
}

@media (hover: hover) {
  .cn-mobile-toggle:hover svg.cn-toggle-svg {
    color: var(--cn-wabash);
  }
}


/* ================================================================
   MOBILE ELEMENTS INSIDE .cn-nav (hidden on desktop)
   These are included in the single <nav> element and revealed
   when the nav acts as the mobile panel.
   ================================================================ */

/* cn-nav-inner: transparent on desktop ā€” display:contents makes its
   children participate directly in cn-nav's flex row layout. On mobile
   it becomes the sliding drawer (see mobile breakpoint below). */
.cn-nav-inner {
  display: contents;
}

/* cn-search-drawer: transparent by default (and explicitly on desktop ā€”
   see the ā‰„1250px breakpoint) ā€” display:contents makes its children,
   .cn-search-panel and .cn-util, participate directly in .cn-bar's flex
   row exactly as if this wrapper didn't exist. On mobile it becomes the
   right-sliding drawer (see mobile breakpoint below), and .cn-search-panel
   / .cn-util get mobile-specific layout overrides there too. */
.cn-search-drawer {
  display: contents;
}

/* cn-nav-utils: mobile-only utility links repeated at the bottom of the
   nav drawer (see the HTML comment above it) ā€” hidden on desktop, where
   .cn-util already provides the persistent Get Info/Apply/Visit/Give row. */
.cn-nav-utils {
  display: none;
}

/* Arrow icons used by mobile expand buttons.
   cn-arr-up is hidden by default; swapped in when the item is open. */
.cn-arr-down,
.cn-arr-up {
  display: none;
  /* hidden everywhere; mobile breakpoint reveals them */
  flex-shrink: 0;
}


/* ================================================================
   BREAKPOINTS
   ================================================================ */

/* ---- Mobile (<1250px) ---- */
@media (max-width: 1249px) {

  /* Bar: fixed-height, 3-column grid (hamburger | centered wordmark |
     search icon), and raised above the two drawers so they always slide
     in underneath it. A fixed height (rather than height:auto) means
     every grid item centers against the SAME known row height instead
     of an auto height derived from whichever child happens to be
     tallest ā€” more robust against app.css's generic button/nav resets
     bleeding in unpredictable padding/line-height (same reason other
     mobile rules in this file use !important ā€” see the .cn-nav-item-row
     comment below). Each button additionally centers its own icon
     internally via display:flex, so alignment doesn't depend on the
     grid alone.

     --cn-bar-h is redefined here (64px vs. the desktop 80px) so that
     .cn-nav / .cn-search-drawer's `top: calc(var(--cn-alert-h) +
     var(--cn-bar-h))` CSS fallback already matches the real mobile bar
     height before mega-nav-v2.js's syncNavTop() runs and sets the
     precise inline value ā€” avoids a brief mispositioned flash. */
  :root {
    --cn-bar-h: 72px;
  }

  .cn-bar {
    height: var(--cn-bar-h) !important;
    position: relative;
    z-index: 901;
    /* above cn-nav / cn-search-drawer, both z-index 900 */
    display: grid !important;
    grid-template-columns: var(--cn-bar-h) 1fr var(--cn-bar-h) !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* Left button: opens .cn-nav */
  .cn-mobile-toggle {
    grid-column: 1;
    grid-row: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Centered wordmark, flanked by the two buttons */
  .cn-brand {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sized to read as the dominant element in the bar, the way the
     ualberta wordmark dominates its two flanking icons (roughly a 2:1
     height ratio to the 24px icons below). */
  .cn-brand img {
    width: auto;
    max-width: 55vw;
    max-height: 46px;
    height: auto;
    display: block;
  }

  /* Right button: opens .cn-search-drawer. v1 hid this entirely on
     mobile (folded into .cn-util, which was also hidden); v2 keeps it
     as the dedicated mobile search trigger. */
  .cn-search-btn {
    grid-column: 3;
    grid-row: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sized to each icon's native aspect ratio (hamburger 24:20, search
     combo icon 32:24) rather than forcing both to a 24x24 square. */
  .cn-mobile-toggle svg.cn-toggle-svg {
    width: 24px;
    height: 20px;
    display: block;
  }

  .cn-search-btn svg.cn-search-combo-icon {
    width: 32px;
    height: 24px;
    display: block;
  }

  /* .cn-nav and .cn-search-drawer are position:fixed below (see each
     section), so they're removed from this grid's flow automatically ā€”
     no explicit grid-column needed for either. */


  /* ------------------------------------------------------------------
     cn-nav: CLIP CONTAINER (stays fixed below the bar, never overlaps header)
     v2: slides in from the LEFT, full width (matching the ualberta
     reference) instead of down from the bar.
  ------------------------------------------------------------------ */
  .cn-nav {
    position: fixed;
    top: calc(var(--cn-alert-h) + var(--cn-bar-h));
    /* anchored to bar bottom ā€” never overlaps header or an alert banner above it */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--cn-z-mobile);
    overflow: hidden;
    /* clips cn-nav-inner during slide animation */
    /* Black fill behind the sliding drawer so that when the drawer is
       scrolled to the top and pulled down, the rubber-band overscroll
       reveals black ā€” not the light page behind the fixed header. */
    background: var(--cn-bar-bg);
    padding-top: 2rem;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
    flex-direction: column;
    align-items: stretch;
  }

  .cn-nav.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear;
  }

  /* cn-nav-inner: SLIDING DRAWER ā€” animates inside the clipped cn-nav.
     Full width, matching the ualberta reference. */
  .cn-nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    background: var(--cn-bar-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Extra bottom breathing room so the last item/utility links are
       reachable even when several accordions are expanded ā€” previously
       the drawer's content could end flush with the viewport edge,
       making the bottom effectively unreachable while scrolled. */
    padding-bottom: 2rem;
    /* Closed: shifted fully off-screen to the left */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cn-nav.is-open .cn-nav-inner {
    transform: translateX(0);
  }


  /* ------------------------------------------------------------------
     cn-search-drawer: RIGHT-SIDE SLIDING DRAWER
     Same idea as .cn-nav, mirrored: fixed below the bar, slides in from
     the right, full width (matching the ualberta reference). Unlike
     .cn-nav it's a single layer (no separate clip + inner drawer) ā€”
     since the slide is purely horizontal and the drawer's top edge
     already sits at the bar's bottom edge, there's no risk of it
     visually poking up over the bar during the transit, so the extra
     clipping layer .cn-nav needs for its vertical slide isn't necessary
     here.
  ------------------------------------------------------------------ */
  .cn-search-drawer {
    display: block;
    position: fixed;
    top: calc(var(--cn-alert-h) + var(--cn-bar-h));
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cn-bar-bg);
    z-index: var(--cn-z-mobile);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    visibility: hidden;
    /* Closed: shifted fully off-screen to the right */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.3s;
  }

  .cn-search-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear;
  }

  /* .cn-search-panel: desktop uses position:absolute + opacity fade for
     its click-to-open dropdown. On mobile, .cn-search-drawer (the parent)
     owns all the show/hide behavior via transform + visibility, so the
     panel itself just needs to render as normal in-flow drawer content ā€”
     same override technique used for .cn-mega below. */
  .cn-search-drawer .cn-search-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 1.75rem 0 0.5rem;
  }

  .cn-search-drawer .cn-search-panel-inner {
    max-width: none;
    padding: 0 1.5rem;
  }

  /* Forced to exactly the input's own height, !important throughout:
     app.css ships generic <form>/<input> spacing (margins, padding,
     line-height) that otherwise inflates this into a much taller white
     block than the field itself ā€” the same class of override needed
     for the bar buttons above. */
  .cn-search-drawer .cn-search-form {
    height: 44px !important;
    margin: 0 0 1.75rem !important;
    padding: 0 !important;
    background: #fff;
    border: none !important;
    border-radius: 3px;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  .cn-search-drawer .cn-search-form:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .cn-search-drawer .cn-search-input {
    height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    line-height: 44px !important;
    color: #1a1a1a;
    font-size: 1rem;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
  }

  .cn-search-drawer .cn-search-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .cn-search-drawer .cn-search-input::placeholder {
    color: #767676;
  }

  .cn-search-drawer .cn-search-submit {
    height: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 2-column grid of link groups (Quick Links / Information For / News &
     Events / Get Connected), matching the ualberta reference. */
  .cn-search-drawer .cn-search-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
  }

  .cn-search-drawer .cn-search-links .cn-mega-col {
    flex: none;
  }

  /* Column headings (Quick Links / Information For / etc.): the mobile
     accordion's .cn-col-heading rule (below) adds display:flex + a
     2.5rem left padding to line headings up with the L1 arrow icons in
     the left nav drawer. These headings have no icon and aren't part of
     that accordion, so reset to a plain flush-left block. */
  /* Restore the same blue underline the desktop subheads have ā€” the
     general mobile accordion rule for .cn-col-heading (further below)
     resets border-bottom to none for the nav drawer's accordion triggers,
     and since it ties this rule's specificity it wins unless re-declared
     here explicitly. */
  /* inline-block so the underline hugs the heading text width instead of
     stretching full-width across the column. */
  .cn-search-drawer .cn-col-heading {
    display: inline-block;
    padding: 0 0 0.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--cn-wabash);
  }

  /* Flat lists (no accordion nesting like the left nav drawer has), so
     the 3rem left indent .cn-mega-links a normally carries for that
     hierarchy doesn't belong here. */
  .cn-search-drawer .cn-mega-links {
    padding: 0;
  }

  .cn-search-drawer .cn-mega-links a {
    padding: 0.4rem 0;
    border-bottom: none;
  }

  /* The nav-drawer accordion's hover treatment (further below) adds a
     light gray background box ā€” flat link lists here don't need that
     affordance, so cancel it back out to a plain underline. */
  .cn-search-drawer .cn-mega-links a:hover {
    background: transparent;
  }

  /* .cn-util: persistent top-right link row on desktop; becomes the
     drawer's footer strip on mobile ā€” single source, not duplicated. */
  /* Border matches the same blue, 2px divider style used between L1
     sections in the hamburger nav drawer (see .cn-nav-item::after below)
     instead of the previous plain gray line. */
  /* Top spacing matches .cn-nav-utils' rhythm (the same row's other
     copy, in the hamburger drawer) ā€” was 1.5rem/0.5rem-top-margin, which
     read as a noticeably bigger gap than that version. */
  .cn-search-drawer .cn-util {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    height: auto;
    margin: 1.5rem 1.5rem 2.5rem;
    padding-top: .5rem;
    border-top: 2px solid var(--cn-wabash);
  }

  .cn-search-drawer .cn-util-link {
    height: auto;
    padding: 0.35rem 0;
    font-size: 0.9rem;
  }

  .cn-search-drawer .cn-util-link.cn-apply {
    padding: 0.35rem 0.75rem;
    border-radius: 3px;
  }


  /* ------------------------------------------------------------------
     NAV LIST ā€” vertical
  ------------------------------------------------------------------ */
  .cn-nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  /* Each nav item: block, with a faint wabash-blue divider between L1
     sections (ŅłĘŽÉē / Admissions / Student Experience / About) ā€”
     omitted after the last item so the drawer doesn't end on a line.
     Inset to ~88% width and centered (a ::after line rather than a
     full-bleed border-bottom), matching the ualberta reference. */
  .cn-nav-item {
    display: block;
    position: static;
  }

  /* Inset to match the same 1.5rem side padding used by .cn-nav-item-row
     and .cn-nav-utils above/below, instead of the previous 88%-centered
     width ā€” so every divider (including the one above the utility links)
     lines up flush with the same edges. */
  .cn-nav-item:not(:last-child)::after {
    content: '';
    display: block;
    margin: 0 1.5rem;
    /* Full-opacity wabash, matching the subhead underlines in the mobile
       search menu (was rgba(...,0.25), which read as washed-out). */
    border-bottom: 2px solid var(--cn-wabash);
  }

  /* Divider above the first L1 item (ŅłĘŽÉē) so the top of the list
     is bracketed by a line the same way the items between are. */
  .cn-nav-item:first-child::before {
    content: '';
    display: block;
    margin: 0 1.5rem;
    border-bottom: 2px solid var(--cn-wabash);
  }

  /* cn-nav-utils: Get Info / Apply / Visit / Give, repeated at the
     bottom of the nav drawer ā€” see the HTML comment above it. Styled to
     match .cn-mega-links' dark-drawer footer treatment: wabash-blue
     links on a top border, same faint divider color as the L1 sections
     above. */
  .cn-nav-utils {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    /* Top spacing reduced to match the rhythm of the L1 item dividers above
       (About, the last item, has no ::after divider of its own ā€” see
       .cn-nav-item:not(:last-child)::after ā€” so without this the gap before
       this section's border-top read as an oversized blank space below
       About instead of a normal item-to-item gap). */
    /* Generous breathing room below (and a little above) the Get Info /
       Apply / Visit / Give links ā€” they were previously tight to the
       drawer bottom. */
    margin: 0 1.5rem 4rem;
    padding-top: 1.5rem;
    /* 2px, full-opacity wabash to match the L1 item dividers above
       (.cn-nav-item::after) and the mobile search-menu subhead underlines. */
    border-top: 2px solid var(--cn-wabash);
  }

  .cn-nav-utils-link {
    color: var(--cn-wabash);
    font-size: 1rem;
    font-weight: 700;
  }

  /* No color/opacity change on hover ā€” matches the desktop/search-drawer
     treatment of these same Get Info/Apply/Visit/Give links.
     color is re-declared here (not just opacity) because app.css's
     generic `a:hover, a:focus { color:#0078a0 }` doesn't compete with
     opacity/text-decoration, so it was winning the color property on
     hover with nothing here to out-specify it. */
  .cn-nav-utils-link:hover {
    color: var(--cn-wabash) !important;
    text-decoration: underline;
    opacity: 1 !important;
  }

  /* Nav item row: flex row containing link + expand button */
  .cn-nav-item-row {
    display: flex;
    align-items: center !important;
    /* !important: beats app.css align-items overrides */
    gap: 0.5rem;
    padding: 0 1.5rem;
    min-height: 44px;
  }

  /* Top-level link on mobile */
  .cn-nav-link {
    flex: 0 0 auto !important;
    /* prevent app.css from stretching to full width */
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    white-space: normal;
  }

  /* No underline on mobile L1 headers ā€” the desktop hover/open/active
     underline rules apply at every width unless overridden here. */
  .cn-nav-link:hover,
  .cn-nav-item.is-open .cn-nav-link,
  .cn-nav-item.is-active>.cn-nav-item-row>.cn-nav-link {
    text-decoration: none !important;
  }

  /* Mobile L1 expand button: explicit height:44px makes top:50% on the
     absolutely-positioned arrows always resolve to exactly 22px ā€” no
     dependence on flex-stretch or browser percentage-height quirks. */
  .cn-nav-expand {
    flex: 1;
    position: relative;
    display: block !important;
    align-self: center !important;
    height: 44px;
    background: transparent !important;
    border: none !important;
    /* Blue in both orientations (down and up) per design feedback. */
    color: var(--cn-wabash);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    box-shadow: none !important;
  }

  .cn-nav-item.is-open .cn-nav-expand {
    color: var(--cn-wabash);
  }

  /* L1 arrows: position:absolute + top:50% + translateY(-50%) centers them
     reliably because the parent has an explicit height:44px. */
  .cn-nav-expand .cn-arr-down,
  .cn-nav-expand .cn-arr-up {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(50%);
    width: 10px;
    height: 9px;
  }

  .cn-nav-expand .cn-arr-up {
    display: none;
  }

  .cn-nav-item.is-open .cn-nav-expand .cn-arr-down {
    display: none;
  }

  .cn-nav-item.is-open .cn-nav-expand .cn-arr-up {
    display: block;
  }


  /* ------------------------------------------------------------------
     MEGA PANELS ā†’ inline accordion content
     Override all desktop absolute-positioning / opacity animation.
  ------------------------------------------------------------------ */
  .cn-mega {
    /* Remove desktop absolute positioning */
    position: static !important;
    /* Remove desktop fade/slide animation */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: auto !important;
    background: transparent !important;

    /* Grid-rows accordion: 0fr = collapsed, 1fr = expanded */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
  }

  .cn-nav-item.is-open>.cn-mega {
    grid-template-rows: 1fr;
  }

  /* mega-inner: grid trick child needs min-height:0 */
  .cn-mega-inner {
    min-height: 0;
    /* Stack columns vertically */
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  /* Each column becomes a full-width block */
  .cn-mega-col {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  /* Show mobile-only columns */
  .cn-mega-col.cn-mob-only {
    display: block;
  }


  /* ------------------------------------------------------------------
     COLUMN SUBGROUPS ā†’ L2 accordion
  ------------------------------------------------------------------ */
  /* cn-col-subgroup: plain block ā€” no grid here.
     The animation lives entirely on cn-col-content (mirrors how L1 works:
     cn-mega is the grid container, cn-mega-inner is the min-height:0 child).
     Using the auto+0fr pattern on the parent caused "bounce" because browsers
     can't smoothly interpolate the auto row during the transition. */
  .cn-col-subgroup {
    display: block;
    border-bottom: 1px solid #1c1c1c;
  }

  /* Col heading: becomes flex trigger row.
     align-items:center (not stretch) is the key ā€” it visually centers both
     <a> children AND anonymous text nodes (e.g. "Why Choose Columbia?") in
     the row. align-self:stretch on each child then overrides this
     where needed (the expand button must fill the full height for its tap target).
     min-height:26px ā‰ˆ 40% reduction from the previous 44px. */
  .cn-col-heading {
    display: flex;
    justify-content: flex-start;
    gap: 0.4rem;
    align-items: center;
    min-height: 26px;
    /* Reset desktop underline + spacing */
    border-bottom: none;
    margin: 0;
    padding: 0 1.5rem 0 2.5rem;
    cursor: pointer;
  }

  .cn-col-heading.cn-col-heading-sub {
    margin-top: 0;
    /* reset desktop offset; border handles separation */
  }

  .cn-col-heading a {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    /* Reduced from 0.6rem to keep <a> natural height ā‰¤ 26px row target */
    padding: 0.3rem 0;
    font-size: inherit;
  }

  /* Mobile L2 expand button: explicit height:26px gives the absolutely-
     positioned arrows a definite containing-block height so top:50% always
     resolves reliably ā€” regardless of whether the sibling is an <a> or a
     plain text node, and regardless of any flex-stretch percentage quirks.
     26px ā‰ˆ 40% reduction from the previous 44px. */
  .cn-col-expand {
    flex: 1;
    position: relative;
    display: block !important;
    align-self: stretch !important;
    height: 26px;
    background: transparent !important;
    border: none !important;
    /* Blue in both orientations (down and up) per design feedback. */
    color: var(--cn-wabash);
    cursor: pointer;
    padding: 0;
    /* Extend hit area past cn-col-heading's right padding to the viewport edge */
    margin-right: -1.5rem;
    min-height: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    box-shadow: none !important;
  }

  .cn-col-subgroup.is-open .cn-col-expand {
    color: var(--cn-wabash);
  }

  /* Keep the L1 and L2 arrows blue at ALL times, including after a tap.
     app.css ships generic button :hover/:focus/:active color rules that
     were otherwise repainting the arrow white once the button held focus
     after being clicked ā€” pin currentColor (and the SVG fill, which uses
     currentColor) to wabash across every interactive state. */
  .cn-nav-expand,
  .cn-nav-expand:hover,
  .cn-nav-expand:focus,
  .cn-nav-expand:focus-visible,
  .cn-nav-expand:active,
  .cn-col-expand,
  .cn-col-expand:hover,
  .cn-col-expand:focus,
  .cn-col-expand:focus-visible,
  .cn-col-expand:active {
    color: var(--cn-wabash) !important;
  }

  .cn-nav-expand svg path,
  .cn-col-expand svg path {
    fill: currentColor !important;
  }

  /* L2 arrows: same absolute-centering technique as L1 ā€” reliable because
     the parent now has an explicit height:26px. */
  .cn-col-expand .cn-arr-down,
  .cn-col-expand .cn-arr-up {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(50%);
    width: 10px;
    height: 9px;
  }

  .cn-col-expand .cn-arr-up {
    display: none;
  }

  .cn-col-subgroup.is-open .cn-col-expand .cn-arr-down {
    display: none;
  }

  .cn-col-subgroup.is-open .cn-col-expand .cn-arr-up {
    display: block;
  }

  /* cn-col-content: grid accordion container (same trick as cn-mega for L1).
     0fr = collapsed; 1fr = expanded. Transition matches L1 exactly.
     The direct child (.cn-mega-links) must have min-height:0 for the trick. */
  .cn-col-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cn-col-subgroup.is-open .cn-col-content {
    grid-template-rows: 1fr;
  }

  /* Direct grid child: min-height:0 required for 0fr to collapse to 0px */
  .cn-col-content>* {
    min-height: 0;
  }

  /* Links inside column content.
     padding MUST be 0 ā€” any bottom padding on a 0fr grid child prevents full
     collapse (the track resolves to the item's min-contribution which includes
     padding), leaving a sliver of the first link visible when the row is closed. */
  .cn-mega-links {
    padding: 0;
    overflow: hidden;
    /* belt-and-suspenders: clip any content that escapes */
  }

  .cn-mega-links a {
    display: block;
    padding: 0.55rem 1.5rem 0.55rem 3rem;
    /* Was #c0c0c0 (read as gray) ā€” full white per design feedback. */
    color: #fff;
    font-size: 0.9rem;
    border-bottom: 1px solid #1a1a1a;
    transition: color var(--cn-ease), background var(--cn-ease);
  }

  .cn-mega-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
  }

  /* Override: mega nav-item open state selector (not applicable on mobile) */
  .cn-nav-item.cn-has-mega:hover>.cn-mega,
  .cn-nav-item.cn-has-mega:focus-within>.cn-mega {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}


/* ---- Desktop (ā‰„1250px) ---- */
@media (min-width: 1250px) {

  /* Hide all mobile-only elements */
  .cn-mobile-toggle {
    display: none !important;
  }

  /* Search panel: hidden until toggled */
  .cn-search-panel {
    display: block;
  }

  /* cn-search-drawer: invisible to desktop layout ā€” .cn-search-panel and
     .cn-util participate directly in .cn-bar's flex row, exactly as if
     this wrapper didn't exist (same technique as .cn-nav-inner below). */
  .cn-search-drawer {
    display: contents;
  }

  /* cn-nav is always visible in the bar ā€” remove any transform.
     IMPORTANT: position must be static (not relative) so that .cn-mega
     with position:absolute anchors to .cn-bar (position:relative) and
     spans the full viewport width, not just the width of .cn-nav. */
  .cn-nav {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static;
    flex-direction: row;
    overflow: visible;
    background: transparent;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    height: 100%;
  }

  /* cn-nav-inner: invisible to desktop layout (children participate
     directly in cn-nav's flex row, same as before the wrapper existed) */
  .cn-nav-inner {
    display: contents;
    transform: none;
    height: auto;
    overflow: visible;
    background: transparent;
  }
}


/* ================================================================
   PUSHDOWN (body offset so content clears the fixed header)
   ================================================================ */
.cn-pushdown {
  height: var(--cn-bar-h);
}


/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.cn-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring: links only. .cn-search-btn is deliberately excluded ā€” like
   the mobile expand buttons below, it signals focus/hover/active purely
   through the icon's own color (see .cn-search-btn[aria-expanded="true"],
   :hover, :focus-visible near the top of this file), never a ring or box. */
.cn-header a:focus-visible,
.cn-nav a:focus-visible {
  outline: 2px solid var(--cn-wabash);
  outline-offset: 2px;
}

/* Suppress all outline/shadow on mobile interaction buttons across every
   interactive state. Using !important to beat any app.css overrides. */
.cn-mobile-toggle:focus,
.cn-mobile-toggle:focus-visible,
.cn-mobile-toggle:hover,
.cn-mobile-toggle:active,
.cn-nav-expand:focus,
.cn-nav-expand:focus-visible,
.cn-nav-expand:hover,
.cn-nav-expand:active,
.cn-col-expand:focus,
.cn-col-expand:focus-visible,
.cn-col-expand:hover,
.cn-col-expand:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}