/* ===== TOP HEADER BAR ===== */
/* Divi's inline CSS handles #top-header layout via floats + clearfix.
   .et_fullwidth_secondary_nav #top-header .container{width:100%;max-width:100%;padding:0 30px}
   #et-info floats left, #et-secondary-menu floats right.
   Do NOT use display:flex on .container — it breaks the clearfix::after pseudo-element. */

/* Review fix 2026-07-13: banner uses the site's light-blue accent (#2ea3f2)
   instead of Divi's #024e7a (set via et-critical-inline-css, hence !important). */
#top-header {
  background-color: #2ea3f2 !important;
}

#top-header a {
  color: #fff !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

#top-header a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ===== MAIN HEADER ===== */
/* Divi's critical inline CSS handles the header layout:
   - .et_fixed_nav #main-header { position:fixed }
   - .et_header_style_left .logo_container { position:absolute; height:100%; width:100% }
   - .et_header_style_left #et-top-navigation { padding-top:33px }
   - #et-top-navigation { float:right }
   - #top-menu li { display:inline-block; padding-right:22px }
   - Divi's et-critical-inline-css handles font-family, colors, widths on live pages
   Do NOT add et-divi-customizer-global.min.css — it is NOT on the live site (only 404 page).
   Do NOT override container display, top-menu display, or nav float here. */

/* Review fix 2026-07-20: TradeCopier pages' preserved Divi CSS swaps the header
   logo via img#logo{content:url(Trade-Copier-Logo-Dark-min.png);} — a square mark
   that renders distorted. The build now sets the combined ETP+TradeCopier logo
   directly in the markup for those pages, so kill the CSS content swap. */
img#logo {
  content: normal !important;
}

/* Review fix 2026-07-20: pre-scroll, Divi's max-height:70% renders the combined
   TC logo at 214x71 — the old site showed it at 162x54. Hard-cap the height;
   the scrolled (shrunk-header) size ~113x38 stays below the cap and is unaffected. */
img#logo[src*="ETP-Trade-Copier-Logo"] {
  max-height: 54px;
}

/* When scrolled (shrunk header), match the size the percentage sizing used to
   produce (~113x38) — explicit px, since the % base shifts with the px cap above. */
#main-header.et-fixed-header img#logo[src*="ETP-Trade-Copier-Logo"] {
  max-height: 38px;
}

/* Review fix 2026-07-13: the old site widened the header only on the home page
   (.home header#main-header .container{width:88%;max-width:88%} in its custom CSS),
   leaving inner pages at the 1080px default — menu looked "more centered" off-home.
   Apply the home width everywhere for a consistent menu position. */
header#main-header .container {
  width: 88%;
  max-width: 88%;
}

/* Review fix 2026-07-13: Divi reserves padding-right:20px on parent items for its
   absolutely-positioned arrow; our arrow is inline-block, so the 20px is dead space
   (visible as a too-wide gap after TRADE COPIER). Top-level items only. */
#top-menu > li.menu-item-has-children > a:first-child {
  padding-right: 0;
}

/* ===== DROPDOWN ARROW OVERRIDES ===== */
/* Divi's inline CSS sets:
   #top-menu .menu-item-has-children>a:first-child:after{font-family:'ETmodules';content:"3";position:absolute;right:0;top:0}
   We match Divi's selector (same specificity) and load after, so we win. */
#top-menu .menu-item-has-children > a:first-child::after {
  font-family: inherit;
  content: '';
  font-size: 0;
  font-weight: normal;
  position: static;
  right: auto;
  top: auto;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.6);
}

/* ===== DROPDOWN MENUS ===== */
/* Divi handles most dropdown positioning via .nav li ul rules.
   We add visibility/opacity for our hover effect. */
#top-menu > li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.sub-menu li.menu-item-has-children:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Nested submenu arrow - must override Divi's:
   #top-menu li .menu-item-has-children>a:first-child:after{right:20px;top:6px} */
#top-menu li .menu-item-has-children > a:first-child::after {
  content: '';
  font-family: inherit;
  font-size: 0;
  font-weight: normal;
  position: static;
  right: auto;
  top: auto;
  display: inline-block;
  width: 0;
  height: 0;
  float: right;
  margin-top: 6px;
  margin-left: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #999;
  border-right: none;
}