/* Columbus Finance navigation integration — light Denali treatment */
:root{
  --cf-navy:#0b3e78;
  --cf-blue:#335d91;
  --cf-blue-dark:#003366;
  --cf-gold:#e8a33d;
  --cf-gold-soft:#fff3df;
  --cf-ink:#27384b;
  --cf-line:#dfe7ef;
  --cf-paper:#fffdfa;
}

/* Keep the original Columbus Finance header feel. Remove Denali's old
   bouncing/text-shadow hover, which reads as duplicate text on the wider menu. */
#cf-primary-nav .g-toplevel>li>.g-menu-item-container{
  color:var(--cf-blue);
  top:0!important;
  padding:.55rem .72rem!important;
  border-bottom:2px solid transparent;
  font-weight:600;
  letter-spacing:.055em;
  transition:color .18s ease,border-color .18s ease,background .18s ease!important;
}
#cf-primary-nav .g-toplevel>li>.g-menu-item-container .g-menu-item-title{
  text-shadow:none!important;
}
#cf-primary-nav .g-toplevel>li:hover>.g-menu-item-container,
#cf-primary-nav .g-toplevel>li.active>.g-menu-item-container,
#cf-primary-nav .g-toplevel>li.g-selected>.g-menu-item-container{
  color:var(--cf-blue-dark)!important;
  top:0!important;
  border-bottom-color:var(--cf-gold);
  background:rgba(232,163,61,.06)!important;
}
#cf-primary-nav .g-toplevel>li:hover>.g-menu-item-container .g-menu-item-title,
#cf-primary-nav .g-toplevel>li.active>.g-menu-item-container .g-menu-item-title{
  text-shadow:none!important;
}
#cf-primary-nav .g-toplevel>li.g-parent>.g-menu-item-container>.g-menu-parent-indicator{
  margin-left:.32rem;
  color:var(--cf-gold);
}

/* Desktop mega menus */
#cf-primary-nav .cf-mega-dropdown{
  background:var(--cf-paper)!important;
  border:1px solid var(--cf-line);
  border-top:4px solid var(--cf-gold);
  border-radius:0 0 8px 8px;
  box-shadow:0 18px 42px rgba(0,51,102,.16);
  padding:0!important;
  overflow:hidden;
  z-index:1100;
}
#cf-primary-nav .cf-menu-loans>.cf-mega-dropdown{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  width:min(980px,94vw);
}
#cf-primary-nav .cf-menu-locations>.cf-mega-dropdown{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  width:min(760px,92vw);
}

/* Denali's historical dropdown-column background is #0f0f0f.
   Reset every nested surface, not only the outer dropdown. */
#cf-primary-nav .cf-mega-dropdown>.g-dropdown-column,
#cf-primary-nav .cf-mega-dropdown>.g-dropdown-column>.g-grid,
#cf-primary-nav .cf-mega-dropdown .g-block,
#cf-primary-nav .cf-mega-dropdown .g-sublevel{
  background:var(--cf-paper)!important;
}
#cf-primary-nav .cf-mega-dropdown>.g-dropdown-column>.g-grid{
  display:flex;
  align-items:stretch;
}
#cf-primary-nav .cf-mega-dropdown .g-block{
  padding:.78rem .72rem .9rem!important;
  border-right:1px solid var(--cf-line);
  overflow:visible;
}
#cf-primary-nav .cf-mega-dropdown .g-block:last-child{border-right:0}

#cf-primary-nav .cf-mega-dropdown .g-sublevel>li{
  background:transparent!important;
  border-radius:4px;
}
#cf-primary-nav .cf-mega-dropdown .g-sublevel>li>.g-menu-item-container{
  padding:.48rem .66rem!important;
  font-size:.92rem!important;
  line-height:1.28!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  color:var(--cf-blue)!important;
  background:transparent!important;
  border-left:3px solid transparent;
  white-space:normal!important;
  word-break:normal!important;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease!important;
}
#cf-primary-nav .cf-mega-dropdown .g-sublevel>li:not(.cf-menu-heading):hover>.g-menu-item-container,
#cf-primary-nav .cf-mega-dropdown .g-sublevel>li.active>.g-menu-item-container{
  background:var(--cf-gold-soft)!important;
  color:var(--cf-blue-dark)!important;
  border-left-color:var(--cf-gold);
  transform:translateX(2px);
}
#cf-primary-nav .cf-menu-heading{
  margin:0 0 .22rem;
  border-radius:0!important;
}
#cf-primary-nav .cf-menu-heading>.g-menu-item-container{
  position:relative;
  padding:.44rem .66rem .5rem!important;
  color:var(--cf-blue-dark)!important;
  font-size:.76rem!important;
  font-weight:800!important;
  letter-spacing:.105em!important;
  text-transform:uppercase;
  cursor:default;
  pointer-events:none;
  border-left:0!important;
  border-bottom:1px solid #edf1f5;
}
#cf-primary-nav .cf-menu-heading>.g-menu-item-container:after{
  content:"";
  position:absolute;
  left:.66rem;
  bottom:-1px;
  width:30px;
  height:2px;
  background:var(--cf-gold);
}
#cf-primary-nav .cf-mega-dropdown .g-go-back{display:none!important}

/* The Locations menu gets a slight visual split without becoming a new theme. */
#cf-primary-nav .cf-locations-dropdown .g-block:first-child{
  background:#fffaf1!important;
}

/* Mobile: the old Denali off-canvas was 10rem wide and orange. That was fine
   for five items but not for the expanded product architecture. Use a usable,
   brand-consistent light drawer instead. */
@media only all and (max-width:50.938rem){
  #g-offcanvas{
    width:19rem!important;
    background:#fff!important;
    color:var(--cf-ink)!important;
    border-right:1px solid var(--cf-line);
    box-shadow:14px 0 34px rgba(0,51,102,.16);
  }
  .g-offcanvas-open .g-offcanvas-left #g-page-surround{left:19rem!important}
  #g-offcanvas a{color:var(--cf-blue)!important}
  #g-offcanvas #g-mobilemenu-container{margin:.65rem .7rem 1rem!important;font-weight:600!important}
  #g-offcanvas #g-mobilemenu-container ul,
  #g-mobilemenu-container .cf-mega-dropdown,
  #g-mobilemenu-container .cf-mega-dropdown .g-dropdown-column,
  #g-mobilemenu-container .cf-mega-dropdown .g-grid,
  #g-mobilemenu-container .cf-mega-dropdown .g-block,
  #g-mobilemenu-container .cf-mega-dropdown .g-sublevel{
    background:#fff!important;
  }
  #g-offcanvas #g-mobilemenu-container .g-toplevel>li>.g-menu-item-container{
    padding:.72rem .55rem!important;
    border-bottom:1px solid #edf1f5;
  }
  #g-offcanvas #g-mobilemenu-container .g-toplevel>li>.g-menu-item-container>.g-menu-item-content{
    padding-left:0!important;
    color:var(--cf-blue-dark)!important;
  }
  #g-offcanvas #g-mobilemenu-container .g-toplevel>li>.g-menu-item-container .g-menu-parent-indicator:after{
    color:var(--cf-gold)!important;
  }
  #g-offcanvas #g-mobilemenu-container ul>li>.g-menu-item-container{
    color:var(--cf-blue)!important;
    padding:.68rem .72rem!important;
    border-radius:4px;
    font-size:.94rem!important;
    line-height:1.25!important;
  }
  #g-offcanvas #g-mobilemenu-container ul>li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover{
    background:var(--cf-gold-soft)!important;
  }
  #g-offcanvas #g-mobilemenu-container ul>li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover>.g-menu-item-container{
    color:var(--cf-blue-dark)!important;
  }
  #g-mobilemenu-container .cf-menu-heading>.g-menu-item-container{
    color:var(--cf-blue-dark)!important;
    font-size:.72rem!important;
    font-weight:800!important;
    letter-spacing:.1em!important;
    text-transform:uppercase;
    padding:.8rem .72rem .35rem!important;
    border-radius:0!important;
    border-bottom:1px solid var(--cf-line);
    pointer-events:none;
  }
  #g-mobilemenu-container .cf-mega-dropdown .g-block{border:0!important;padding:0!important}
  #g-mobilemenu-container .cf-mega-dropdown .g-sublevel>li>.g-menu-item-container{padding:.68rem .72rem!important}
  .g-offcanvas-toggle{color:var(--cf-blue-dark)!important}
}
@media only all and (max-width:50.938rem){
  #g-offcanvas,#g-mobilemenu-container{overflow-x:hidden!important}
  #g-mobilemenu-container{position:relative!important}
  #g-mobilemenu-container .g-toplevel .g-dropdown:not(.g-active){visibility:hidden!important;pointer-events:none!important}
  #g-mobilemenu-container .g-toplevel .g-dropdown.g-active{visibility:visible!important;pointer-events:auto!important}
}