/* ============================================================
   GoPokerPro — the Divi Theme Builder header, on every page
   (2026-10-27, PROGRESS-header-dropdown-2026-10-27.md).
   The header is the founder's Theme Builder layout; its menu
   modules keep their settings. This file only (1) stacks the
   header above the page content and (2) draws the dropdown
   panel on brand. Tokens: gpp-brand-tokens.css (loaded first).
   No module index is named: the rules reach every menu module
   in the header (.et-l--header), logged-in or logged-out. The two
   ids (#page-container #et-boc) beat Divi's own ".et-db #et-boc
   .et-l" prefixes, which it adds on archive pages like /courses.
   ============================================================ */

/* 1. The header and its open dropdown sit above the page.
   Divi gives the header's .et_builder_inner_content z-index 2; the start
   page's hero art is z-index 2 too and comes later in the DOM, so it painted
   over the open dropdown (his screenshot, 2026-10-27). His Divi custom CSS of
   2026-10-23 raised it to 10 at <=980px on the start page (the phone menu);
   this is the same, for every width and every page. gpp-site's sign-up popup
   (z-index 100001) and Divi's stuck header (10010) stay above it. */
body #page-container .et-l--header .et_builder_inner_content {
	position: relative;
	z-index: 10 !important;
}

/* 2. The dropdown panel: a compact navy box that fits its items, square,
   --gpp-line edges, one 2px orange rule on top (the family of the unlock
   box's gold top line), flat. Divi's defaults were 240px wide with 20px
   padding, a half-white border on every side and a shadow; the module
   settings colour it with !important, hence the !important here. */
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu {
	/* A calm 12px gap under the parent's text. Divi hangs the panel from the li's
	   bottom, into the text's descenders; and the li's height differs by page (the
	   text's own height on "/", the logo's on /courses), with the text centred in
	   it. So the panel hangs from the li's middle: half the 20px line box + 12px. */
	top: calc(50% + 22px);
	width: auto;
	min-width: 100%;
	padding: 6px 0;
	background-color: var(--gpp-card) !important;
	border: 1px solid var(--gpp-line) !important;
	border-top: 2px solid var(--gpp-orange) !important;
	border-radius: 0;
	box-shadow: none;
	white-space: nowrap;
}

/* 2b. The gap stays hoverable: an invisible bridge above the panel, so the
   mouse can cross from the parent's text to the first item without the panel
   closing (the panel is a child of the parent li, so hovering the bridge keeps
   li:hover true). The parent link keeps Divi's 20px of room for its chevron
   (his custom CSS zeroes every menu link's padding with !important). */
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
}
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li.menu-item-has-children > a:first-child {
	padding-right: 20px !important;
}

/* 3. The items, one under the other (Divi's menu li is inline-block; the
   panel's nowrap would line them up sideways): Lexend, white on navy, the
   text lined up with the parent link's text (the parent li has 11px of side
   padding in Divi; the panel starts at the li's left edge: 1px border + 10px). */
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu li a {
	display: block;
	width: auto;
	padding: 9px 20px 9px 10px !important; /* his Divi custom CSS zeroes .custom-menu a's padding with !important */
	font-family: var(--gpp-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--gpp-white) !important;
	background-color: transparent;
	opacity: 1;
}

/* 4. Hover and keyboard focus look the same: the raised navy behind the
   item, orange text. Keyboard focus adds one thin orange bar on the item's
   left edge (inside its padding), never a second box or ring. The panel also
   opens for the keyboard (focus inside the parent item), as it does for the mouse. */
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu li a:hover,
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu li a:focus-visible {
	background-color: var(--gpp-card-2);
	color: var(--gpp-orange) !important;
	opacity: 1;
}
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li ul.sub-menu li a:focus-visible {
	outline: none;
	box-shadow: inset 3px 0 0 var(--gpp-orange);
}
#page-container #et-boc .et-l--header .et_pb_menu .et-menu-nav li.menu-item-has-children:focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
}