/*
 * Sheer header + footer ("site chrome"), site-wide.
 * Follows the brand reference (assets/brand.css + chicago.html): navy utility bar,
 * white main nav with navy 700 links, grey footer, near-black bottom bar.
 * Uses the color tokens from sheer-tokens.css.
 */

:root {
  --sheer-accent: #4338ca;        /* nav hover, per brand.css --color-accent */
  --sheer-footer-bg: #545e66;
  --sheer-footer-bg-dark: #1c1f22;
  --sheer-header-shadow: 0 2px 10px rgba(0, 21, 88, 0.06);
  --sheer-dropdown-shadow: 0 16px 30px rgba(0, 21, 88, 0.14);
}

/* =========================================================
   Utility bar (#header_meta)
   ========================================================= */

#top #header_meta {
  background-color: var(--sheer-navy);
  border-bottom: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
}

/* Flex row so the social icons and the right-hand menu share one vertical center */
#top #header_meta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  height: auto;
  padding-top: 9px;
  padding-bottom: 9px;
}

#top #header_meta .container::before,
#top #header_meta .container::after { display: none; }

/* Social icons */
#top #header_meta .social_bookmarks {
  display: flex;
  align-items: center;
  float: none;
  height: 28px;
  margin: 0;
  border: 0;
}

#top #header_meta .social_bookmarks li {
  border: 0;
  background: transparent;
  width: auto;
  margin-right: 14px;
}

#top #header_meta .social_bookmarks li a {
  width: auto;
  height: 28px;
  line-height: 28px;
  color: var(--sheer-white);
  background: transparent;
  opacity: 0.85;
  font-size: 15px;
}

#top #header_meta .social_bookmarks li a:hover { opacity: 1; background: transparent; color: var(--sheer-white); }
#top #header_meta .social_bookmarks li a svg path { fill: currentColor; }

/* Phone + ghost buttons */
/* !important below overrides old "HELLO BAR" rules in Enfold Quick CSS */
/* Enfold positions this absolutely; !important also beats an old Quick CSS "top: 4px !important" */
#top #header_meta .sub_menu {
  position: static;
  display: flex;
  align-items: center;
  float: none;
  height: 28px;
  margin: 0 0 0 auto;
  top: auto !important;
}

#top #header_meta .sub_menu > ul {
  display: flex;
  align-items: center;
  gap: 18px;
}

#top #header_meta .sub_menu > ul > li {
  float: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
}

#top #header_meta .sub_menu > ul > li > a {
  color: var(--sheer-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  text-decoration: none;
}

#top #header_meta .sub_menu .amg-hello-bar-phone { margin: 0; }

#top #header_meta .sub_menu .amg-hello-bar-button {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 4px;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.18s ease;
}

#top #header_meta .sub_menu .amg-hello-bar-button > a {
  display: block;
  padding: 7px 14px !important;
  color: var(--sheer-white) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#top #header_meta .sub_menu .amg-hello-bar-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* =========================================================
   Main nav (#header_main)
   ========================================================= */

#top #header_main {
  background-color: var(--sheer-white);
  border-bottom: 0;
}

#top #header.av_minimal_header_shadow,
#top #header {
  box-shadow: var(--sheer-header-shadow);
}

#top #header_main .container,
#top #header .av-logo-container {
  background: transparent;
  box-shadow: none;
}

#top #header .logo a {
  display: flex;
  align-items: center;
}

#top #header .logo img {
  max-height: 46px;
  width: auto;
  height: auto;
}

/* Top level links */
#top #header .main_menu .av-main-nav > li > a {
  font-family: var(--font-heading);
  color: var(--sheer-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 15px;
}

#top #header .main_menu .av-main-nav > li:last-child > a { padding-right: 0; }

#top #header .main_menu .av-main-nav > li > a:hover,
#top #header .main_menu .av-main-nav > li:hover > a,
#top #header .main_menu .av-main-nav > li.current-menu-item > a,
#top #header .main_menu .av-main-nav > li.current-menu-ancestor > a { color: var(--sheer-accent); }

/* Hide Enfold's underline/arrow effect */
#top #header .main_menu .av-main-nav > li > a .avia-menu-fx { display: none; }

/* Dropdowns */
#top #header .main_menu .av-main-nav ul.sub-menu,
#top #header .main_menu .avia_mega_div {
  background-color: var(--sheer-white);
  border: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--sheer-dropdown-shadow);
}

#top #header .main_menu .av-main-nav > li > ul.sub-menu {
  min-width: 240px;
  width: auto;
  padding: 10px 0;
  left: -1px;
}

#top #header .main_menu .av-main-nav ul.sub-menu li {
  border: 0;
  background: transparent;
}

#top #header .main_menu .av-main-nav ul.sub-menu li a {
  display: block;
  padding: 9px 22px;
  border: 0;
  background: transparent;
  color: var(--sheer-black);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}

#top #header .main_menu .av-main-nav ul.sub-menu li a:hover {
  color: var(--sheer-accent);
  background-color: var(--sheer-mist);
  text-decoration: none;
}

#top #header .main_menu .av-main-nav ul.sub-menu .avia-bullet { display: none; }

/* Mega menu (Shippers) */
#top #header .main_menu .avia_mega_div { padding: 24px 12px; }
#top #header .main_menu .avia_mega_div > ul.sub-menu { box-shadow: none; border-radius: 0; padding: 0; }
#top #header .main_menu .avia_mega_div > ul.sub-menu > li { border: 0; padding: 0 10px; }
#top #header .main_menu .avia_mega_div ul.sub-menu ul.sub-menu { box-shadow: none; border-radius: 0; padding: 0; }

#top #header .main_menu .avia_mega_div ul.sub-menu li a { padding: 7px 12px; border-radius: 4px; }

/* Column titles: the extra .av-main-nav outranks the generic dropdown link rule above */
#top #header .main_menu .av-main-nav .avia_mega_div .mega_menu_title {
  display: block;
  padding: 0;
  margin: 0 0 6px;
}

#top #header .main_menu .av-main-nav .avia_mega_div .mega_menu_title a {
  display: block;
  padding: 7px 12px;
  border-radius: 0;
  background: transparent;
  color: var(--sheer-navy);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

#top #header .main_menu .av-main-nav .avia_mega_div .mega_menu_title a:hover {
  background: transparent;
  color: var(--sheer-accent);
  text-decoration: none;
}

/* =========================================================
   Burger menu (phones + tablets, below 990px)
   Enfold settings: Main Menu > "Mobile Menu" = tablets, submenus open on click,
   linked parents cloned into their submenu.
   ========================================================= */

/* Icon stays navy, also while open (Enfold turns it white) */
#top #header .av-burger-menu-main .av-hamburger-inner,
#top #header .av-burger-menu-main .av-hamburger-inner::before,
#top #header .av-burger-menu-main .av-hamburger-inner::after,
.av-burger-overlay-active #top #header .av-hamburger-inner,
.av-burger-overlay-active #top #header .av-hamburger-inner::before,
.av-burger-overlay-active #top #header .av-hamburger-inner::after { background-color: var(--sheer-navy); }

/* Dimmed navy backdrop */
#top .av-burger-overlay-bg {
  background: var(--sheer-navy);
  opacity: 0.45;
}

/* Panel */
#top .av-burger-overlay-scroll {
  max-width: 88vw;
  background: var(--sheer-white);
  box-shadow: -16px 0 40px rgba(0, 21, 88, 0.18);
}

#top .av-burger-overlay-inner {
  display: block;
  min-height: 0;
  background: var(--sheer-white);
  text-align: left;
}

/* Enfold sets the top padding inline to the header height so the list clears the close icon; keep it, drop the matching bottom padding */
#top #av-burger-menu-ul {
  display: block;
  padding-bottom: 0 !important;
  font-family: var(--font-heading);
}

/* Selectors below go through .av-burger-overlay-scroll .av-burger-overlay-inner to outrank
   Enfold's generated burger colors (dark text, white borders, grey hover) */

/* Top level rows: 56px tall tap targets */
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li:not(.sheer-burger-actions) > a {
  padding: var(--space-2) 56px var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid #e1e6eb;
  color: var(--sheer-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background: transparent;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li:first-child > a { border-top: 1px solid #e1e6eb; }

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li:not(.sheer-burger-actions) > a:hover,
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.av-show-submenu > a {
  color: var(--sheer-accent);
  background: var(--sheer-mist);
}

/* Chevron: navy, rotates when the submenu opens */
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul .av-submenu-indicator {
  right: var(--space-3);
  padding: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  opacity: 1;
  color: var(--sheer-navy);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* Submenus: tinted, indented, lighter weight.
   Mega menu columns (Shippers) arrive as several sibling lists, so padding/divider go on the first/last one only */
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul ul.sub-menu {
  background: var(--sheer-mist);
  border: 0;
  padding: 0;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li > ul.sub-menu:first-of-type { padding-top: var(--space-1); }

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li > ul.sub-menu:last-child {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid #e1e6eb;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul li li a {
  padding: 12px 56px 12px var(--space-3);
  border: 0;
  color: var(--sheer-black);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  background: transparent;
}

/* Third level (e.g. Shippers > Managed Transportation > Network Design) */
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul li li li a {
  padding-left: calc(var(--space-3) + var(--space-2));
  font-size: 14px;
  font-weight: 400;
  color: var(--sheer-medium-grey);
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul li li a:hover,
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul li li.av-show-submenu > a {
  color: var(--sheer-accent);
  background: transparent;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul li li.av-show-submenu > a { font-weight: 700; }

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul .avia-bullet { display: none; }

/* Quick actions appended by js/sheer-burger.js */
#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions {
  padding: var(--space-3);
  border: 0;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a {
  display: block;
  padding: 12px var(--space-2);
  border: 1px solid var(--sheer-navy);
  border-radius: 4px;
  margin: 0 0 var(--space-2);
  color: var(--sheer-navy);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
  background: transparent;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a:hover { background: var(--sheer-mist); }

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a.sheer-burger-primary {
  border-color: var(--sheer-cta-green);
  background: var(--sheer-cta-green);
  color: var(--sheer-white);
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a.sheer-burger-primary:hover { background: #009c1a; }

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a.sheer-burger-phone {
  border: 0;
  margin: 0;
  padding: var(--space-1) 0 0;
  font-size: 16px;
  letter-spacing: 0;
}

#top #wrap_all .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul > li.sheer-burger-actions > a.sheer-burger-phone:hover { background: transparent; color: var(--sheer-accent); }

/* =========================================================
   Footer (#footer)
   ========================================================= */

#top #footer {
  background-color: var(--sheer-footer-bg);
  border-top: 0;
  padding: 60px 0 40px;
  font-family: var(--font-body);
}

#top #footer,
#top #footer p,
#top #footer li,
#top #footer .textwidget {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px !important;  /* some widget paragraphs carry inline font sizes */
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#top #footer p { margin: 0 0 10px; }
#top #footer strong { color: var(--sheer-white); }

#top #footer a {
  color: rgba(255, 255, 255, 0.85);
  font-size: inherit;
  text-decoration: none;
}

#top #footer a:hover { color: var(--sheer-white); text-decoration: none; }

/* #wrap_all beats Enfold's typography setting for .footer_color h3 */
#top #wrap_all #footer .widgettitle {
  color: var(--sheer-white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

#top #footer .widget {
  margin: 0 0 30px;
  padding: 0;
}

#top #footer .seperator { display: none; }

/* Logo column */
#top #footer .widget_media_image:first-child img {
  height: 40px !important;  /* WordPress puts height:auto inline on widget images */
  width: auto !important;
  max-width: none;
  margin-bottom: 8px;
}

#top #footer .flex_column:first-child .widget_text p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7);
}

#top #footer .flex_column:first-child .widget_text a { color: rgba(255, 255, 255, 0.7); }
#top #footer .flex_column:first-child .widget_text a:hover { color: var(--sheer-white); }

/* CargoNet badge */
#top #footer .widget_media_image a img { max-width: 110px; height: auto; }

/* Phone + email in Resources column */
#top #footer .telephone {
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 700;
}

#top #wrap_all #footer .telephone,
#top #wrap_all #footer .telephone a { color: var(--sheer-white); font-size: 16px; font-weight: 700; }

/* Our Company block inside the Solutions column */
#top #footer .widget_text + .widget_text .widgettitle { margin-top: 10px; }

/* =========================================================
   Bottom bar (#socket)
   ========================================================= */

#top #socket {
  background-color: var(--sheer-footer-bg-dark);
  border-top: 0;
  font-family: var(--font-body);
}

#top #socket .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
}

#top #socket .container::before,
#top #socket .container::after { display: none; }

#top #socket .copyright {
  float: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

#top #socket .sub_menu_socket {
  float: none;
  height: auto;
  margin: 0;
}

#top #socket .sub_menu_socket ul,
#top #socket .sub_menu_socket li { float: none; display: inline-block; margin: 0; padding: 0; border: 0; }

#top #socket .sub_menu_socket li a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin-left: 16px;
  padding: 0;
  line-height: 1;
}

#top #socket .sub_menu_socket li a:hover { color: var(--sheer-white); text-decoration: none; }
#top #socket .sub_menu_socket .avia-menu-fx,
#top #socket .sub_menu_socket .avia-bullet { display: none; }

/* =========================================================
   Responsive
   ========================================================= */

@media only screen and (max-width: 989px) {
  #top #footer .flex_column { margin-bottom: 10px; }
}

@media only screen and (max-width: 767px) {
  /* brand.css hides social + ghost buttons on phones, keeps the phone number */
  #top #header_meta .social_bookmarks,
  #top #header_meta .sub_menu .amg-hello-bar-button { display: none; }

  #top #header_meta .sub_menu {
    justify-content: center;
    width: 100%;
    margin: 0;
  }

  #top #header_meta .container { padding-top: 6px; padding-bottom: 6px; }

  #top #socket .container { justify-content: center; text-align: center; }
  #top #socket .sub_menu_socket li:first-child a { margin-left: 0; }
}