/**
 * Top Navigation Bar — Life Good Theme
 * DESKTOP (≥768px): #topnav-bar — single row
 * MOBILE  (<768px): #topnav-mobile-wrap — two rows
 *
 * IMPORTANT: All selectors inside #topnav-bar and .topnav-mobile-wrap
 * explicitly reset font/line-height so that "ul { font-size:… }"
 * in Additional CSS cannot bleed in.
 */

/* =====================================================
   COMPLETE CSS ISOLATION — resets ul/li/a inheritance
   inside both nav containers so site-wide ul{} rules
   from Additional CSS cannot affect nav text.
===================================================== */
#topnav-bar ul,
#topnav-bar li,
#topnav-bar a,
.topnav-mobile-wrap ul,
.topnav-mobile-wrap li,
.topnav-mobile-wrap a,
.topnav-mob-panel ul,
.topnav-mob-panel li,
.topnav-mob-panel a {
	font-size: unset;
	line-height: unset;
	font-family: unset;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =====================================================
   DESKTOP BAR — visible ≥ 768px only
===================================================== */
#topnav-bar {
	--topnav-h: 60px;
	background-color: #1a1a1a;
	border-top: none;
	border-bottom: 3px solid #fff551;
	position: relative;
	z-index: 9000;
	width: 100%;
	/* NOTE: intentionally no overflow-x here. Setting overflow-x without an
	   explicit overflow-y forces the browser to also clip the y-axis (per the
	   CSS overflow spec, a non-visible x paired with visible y computes to
	   auto), which was silently hiding the multi-level dropdown/flyout submenu
	   below each menu item. Nothing in this bar overflows horizontally at
	   normal desktop widths, so removing it is a safe no-op layout-wise. The
	   narrower 1024–1279px "compact" range below no longer uses overflow-x
	   either, for the same reason — it used to, and that clipped the "Bare
	   Acts" dropdown and (once already relocated) the notification/account
	   flyout panels in turn; see the 9.9.4 and 9.10.4 changelog entries and
	   the big comment on the compact-range block below. */
	scrollbar-width: none;
}
#topnav-bar::-webkit-scrollbar { display: none; }
#topnav-bar.topnav-sticky {
	position: sticky;
	top: 0;
	z-index: 9100;
}

/* =====================================================
   STICK TO BOTTOM OF SCREEN ON SCROLL (desktop only)
   Independent feature from both "Sticky" above and the separate
   Bottom Navigation Bar. JS (see wlcustom_topnav_js in enqueue.php)
   adds .topnav-stuck-bottom once the visitor scrolls past a small
   threshold, and only when the viewport is >=1024px wide. The
   @media guard here is a defensive second layer — the JS also
   never docks below 1024px — so this can never affect tablet/mobile
   even if the class is somehow present.
===================================================== */
@media (min-width: 1024px) {
	#topnav-bar.topnav-stuck-bottom {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: none;
		border-bottom: none;
		box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
		z-index: 9200;
	}
}

/* --- Equal-space layout: logo | menu | buttons — each section takes equal width ---
   The inner uses 3 equal columns so logo+name, menu, and CTA buttons all have the
   same horizontal real-estate, keeping the design perfectly balanced. */
.topnav-inner {
	display: flex;
	align-items: center;
	min-height: var(--topnav-h, 60px);
	padding: 0 20px;
	position: relative;
	min-width: 0; /* allow inner to compress as window narrows */
}

/* Brand section — takes flex:1 so it's equal width to the CTA section */
.topnav-brand-wrap {
	flex: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* logo/name stays left-aligned within its section */
	max-height: var(--topnav-h, 60px);
	overflow: visible;
	margin-right: 0;               /* no extra margin — spacing handled by flex:1 */
}

/* Navigation area — stays centred in its natural flex space */
.topnav-navigation {
	display: flex;
	align-items: center;
	flex: 0 0 auto;               /* don't grow/shrink; natural width of menu items */
	position: relative;
	min-width: 0;
	justify-content: center;
}

/* CTA group — takes flex:1 so it's equal width to the brand section */
.topnav-cta-group {
	flex: 1;
	display: flex; align-items: center;
	justify-content: flex-end;     /* buttons stay right-aligned within their section */
	gap: var(--topnav-cta-gap, calc(var(--topnav-menu-px, 28px) * 2)); flex-shrink: 0;
	margin-left: 0;                /* no extra margin — spacing handled by flex:1 */
}.topnav-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: #ffffff;
	max-height: var(--topnav-h, 60px);
}
.topnav-brand-img {
	display: block;
	width: auto;
	height: calc(var(--topnav-h, 60px) - 12px);
	max-height: calc(var(--topnav-h, 60px) - 12px);
	max-width: 240px;
	object-fit: contain;
	flex-shrink: 0;
}
.topnav-brand-name {
	font-size: 17px !important;
	font-weight: 700;
	letter-spacing: 0.4px;
	white-space: nowrap;
	line-height: 1.2 !important;
	padding-bottom: 2px;
	font-family: inherit;
	color: inherit;
}

/* --- Navigation area centering ---
   When centered: brand-wrap and the right spacer both take flex:1,
   so the navigation (flex:0 auto) is squeezed into the true middle.
   Without branding both spacers are absent/empty and the nav still
   centres because the right spacer mirrors whatever space the brand takes. */
#topnav-bar.topnav-centered .topnav-inner {
	display: flex;
	justify-content: center;
}
#topnav-bar.topnav-centered .topnav-brand-wrap {
	flex: 1;
	flex-shrink: 0;
}
#topnav-bar.topnav-centered .topnav-navigation {
	flex: 0 0 auto;
	position: static;
	transform: none;
	justify-content: center;
}
#topnav-bar.topnav-centered .topnav-right-spacer {
	flex: 1;
	flex-shrink: 0;
}
#topnav-bar.topnav-centered .topnav-menu-desktop { justify-content: center; }

/* --- Desktop menu --- */
.topnav-menu-desktop {
	display: flex;
	list-style: none !important;
	margin: 0 !important; padding: 0 !important;
	align-items: stretch;
	flex-wrap: wrap;
}
.topnav-menu-desktop li { position: relative; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.topnav-menu-desktop > li > a {
	display: flex; align-items: center;
	color: #ffffff; text-decoration: none;
	/* --topnav-menu-px controls spacing: each link has this padding on left AND right,
	   so the visual gap between two adjacent item texts = px * 2. Default 15px = 30px gap. */
	padding: 0 var(--topnav-menu-px, 28px) !important;
	height: var(--topnav-h, 60px);
	font-size: 16px !important; font-weight: 400;
	letter-spacing: 0.5px; text-transform: var(--topnav-text-transform, none);
	white-space: nowrap; line-height: 1 !important;
	font-family: inherit;
	transition: color 0.2s, background-color 0.2s;
}
.topnav-menu-desktop > li > a:hover,
.topnav-menu-desktop > li.current-menu-item > a,
.topnav-menu-desktop > li.current-menu-ancestor > a {
	color: #fff551;
	background-color: rgba(255,255,255,0.06);
}
/* Dropdown */
.topnav-menu-desktop ul {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	position: absolute; top: 100%; left: 0;
	background: #2a2a2a; min-width: 200px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	z-index: 10001;
}
.topnav-menu-desktop li:hover > ul,
.topnav-menu-desktop li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.topnav-menu-desktop ul li { list-style: none !important; margin: 0 !important; }
.topnav-menu-desktop ul li a {
	display: block; color: #ccc; padding: 11px 18px !important;
	font-size: 13px !important; line-height: 1.4 !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	transition: color 0.2s, background-color 0.2s;
}
.topnav-menu-desktop ul li:last-child a { border-bottom: none; }
.topnav-menu-desktop ul li a:hover { color: #fff; background: #fff551; }
.topnav-menu-desktop ul ul { top: 0; left: 100%; }

/* When the bar is docked to the bottom of the screen, first-level dropdowns
   must open UPWARD instead of downward, or they'd render past the bottom
   edge of the viewport and be inaccessible. Nested flyouts (ul ul, opening
   sideways) don't need to change — they inherit position from their now
   upward-opening parent panel and stay on-screen automatically. */
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop > li > ul {
	top: auto;
	bottom: 100%;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
	transform: translateY(-6px);
}
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop li:hover > ul,
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop li:focus-within > ul {
	transform: translateY(0);
}


/* =====================================================
   DROPDOWN INDICATOR ARROWS
   WordPress core automatically adds "menu-item-has-children"
   to any <li> that has sub-items, so this needs no PHP changes.
   Uses currentColor so the arrow always matches whatever colour
   the link currently has (normal / hover / active), including
   any customizer colour overrides applied later in the cascade.
===================================================== */
/* Top-level items: small down-chevron after the label */
.topnav-menu-desktop > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 7px;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
/* Flip to point up while the dropdown is open, for a nice affordance */
.topnav-menu-desktop > li.menu-item-has-children:hover > a::after,
.topnav-menu-desktop > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg);
}

/* When the bar is docked to the bottom, the dropdown opens UPWARD (see the
   .topnav-stuck-bottom override further down), so the top-level arrow should
   match that direction: point up at rest, and flip down while open —
   the exact mirror of the normal top-docked behaviour above. */
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop > li.menu-item-has-children > a::after {
	transform: rotate(-135deg);
	position: relative;
	top: 3px; /* optical centering: the ^ shape sits visually high within its box */
}
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop > li.menu-item-has-children:hover > a::after,
#topnav-bar.topnav-stuck-bottom .topnav-menu-desktop > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(45deg);
}

/* Nested items with their own flyout: small right-chevron, right-aligned */
.topnav-menu-desktop ul li.menu-item-has-children > a {
	position: relative;
	padding-right: 30px !important;
}
.topnav-menu-desktop ul li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%; right: 14px;
	width: 6px; height: 6px;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-50%) rotate(-45deg);
}

/* CTA group styles handled above in equal-space layout */
.topnav-cta-btn {
	display: inline-flex; align-items: center;
	text-decoration: none; padding: 10px 16px;
	border-radius: 5px; font-size: 13px !important; font-weight: 700;
	letter-spacing: 0.3px; white-space: nowrap; line-height: 1 !important;
	transition: filter 0.2s, transform 0.15s;
}
.topnav-cta-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Prevent the normal menu hover/active colour rules from overriding button text colour */
.topnav-menu-desktop > li.menu-item-is-btn > a:hover,
.topnav-menu-desktop > li.menu-item-is-btn.current-menu-item > a,
.topnav-menu-desktop > li.menu-item-is-btn.current-menu-ancestor > a {
	color: inherit;
	background-color: transparent;
}
/* Button items stay full-height like all menu links but align-self centres the
   pill shape within the bar — padding controls how tall/wide the pill looks. */
.topnav-menu-desktop > li.menu-item-is-btn {
	display: flex;
	align-items: center;
}
.topnav-menu-desktop > li.menu-item-is-btn > a {
	height: auto !important;
	align-self: center !important;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Gap before button items in desktop menu — mirrors brand-to-menu spacing */
.topnav-menu-desktop > li.menu-item-is-btn + li.menu-item-is-btn,
.topnav-menu-desktop > li:not(.menu-item-is-btn) + li.menu-item-is-btn {
	margin-left: 24px !important;
}

/* Prevent mobile row 2 hover from overriding button text colour */
.topnav-mob-row2-menu > li.menu-item-is-btn > a:hover,
.topnav-mob-row2-menu > li.menu-item-is-btn.current-menu-item > a {
	color: inherit;
}

/* =====================================================
   MOBILE TWO-ROW WRAP — hidden by default, shown on phones
===================================================== */
.topnav-mobile-wrap {
	display: none;
	width: 100%;
	z-index: 9000;
	color-scheme: light; /* prevent browser dark mode inverting nav contents */
}
/* shown via media queries in RESPONSIVE SHOW/HIDE section below */

.topnav-mobile-row {
	width: 100%;
	background-color: #1a1a1a;
	position: relative;
	color-scheme: light; /* belt-and-braces at row level too */
	/* NOTE: sticky is intentionally NOT used here — the wrap parent is only as tall
	   as its children, so sticky can never activate. Fixed is used instead via JS. */
}

/* When sticky is enabled via JS, rows become position:fixed.
   A spacer div (.topnav-mobile-spacer) is injected by JS to push content down. */
.topnav-mobile-row.is-fixed {
	position: fixed !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9100;
}
.topnav-mobile-row1.is-fixed { top: 0; z-index: 9101; }
/* Row2 top is set by JS = row1.offsetHeight */
.topnav-mobile-row2.is-fixed { z-index: 9100; }

/* --- Row 1 --- */
.topnav-mobile-row1-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--mob-row1-h, 52px);
	padding: 0 14px;
}

/* Mobile branding — #4 centre option via class */
.topnav-mob-brand-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}
/* centred: fill full row, absolute-centre the link */
.topnav-mob-brand-wrap.is-centered {
	position: absolute;
	left: 0; right: 0;
	justify-content: center;
	pointer-events: none;
}
.topnav-mob-brand-wrap.is-centered .topnav-mob-brand {
	pointer-events: auto;
}
.topnav-mob-brand {
	display: inline-flex; align-items: center;
	gap: 8px; text-decoration: none;
	color: #ffffff; max-width: 100%;
}
.topnav-mob-brand-img {
	display: block; width: auto;
	height: calc(var(--mob-row1-h, 52px) - 12px);
	max-height: 40px; max-width: 140px;
	object-fit: contain; flex-shrink: 0;
}
.topnav-mob-brand-name {
	font-size: 16px !important; font-weight: 700;
	letter-spacing: 0.3px; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
	color: inherit; line-height: 1.2 !important;
	padding-bottom: 2px;
	font-family: inherit;
}

/* Hamburger — now on the LEFT */
.topnav-mob-hamburger {
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; cursor: pointer;
	padding: 6px 8px; margin-left: auto; margin-right: 0; flex-shrink: 0;
	color-scheme: light;
	transition: opacity 0.2s;
	position: relative; z-index: 1;
}
.topnav-mob-hamburger:hover { opacity: 0.75; }
/* If a search icon or dark mode toggle already precedes it, they handle the
   auto-margin push — the hamburger just sits directly after them. */
.topnav-mob-search-icon ~ .topnav-mob-hamburger,
.wlcustom-dm-toggle-mobile ~ .topnav-mob-hamburger {
	margin-left: 0;
}

/* SVG hamburger — stroke set as HTML attribute so dark mode cannot touch it */
.topnav-mob-ham-svg {
	display: block;
	overflow: visible;
	color-scheme: light;
}
.topnav-ham-line {
	transition: transform 0.25s ease, opacity 0.25s ease;
	transform-origin: center;
	transform-box: fill-box;
}
/* Open state: animate into X */
.topnav-mob-hamburger[aria-expanded="true"] .topnav-ham-line-1 {
	transform: translateY(6px) rotate(45deg);
}
.topnav-mob-hamburger[aria-expanded="true"] .topnav-ham-line-2 {
	transform: translateY(-6px) rotate(-45deg);
}

/* Search icon — mobile (top right of row 1) */
.topnav-mob-search-icon {
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; cursor: pointer;
	color: #ffffff !important;
	text-decoration: none;
	padding: 6px 8px; flex-shrink: 0; margin-left: auto;
	transition: opacity 0.2s;
}
.topnav-mob-search-icon:hover { opacity: 0.75; }
.topnav-mob-search-icon svg { display: block; }

/* Search icon — desktop bar */
.topnav-desk-search-icon {
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; cursor: pointer;
	color: #ffffff !important;
	text-decoration: none;
	padding: 0 14px 0 29px;
	height: var(--topnav-h, 60px);
	flex-shrink: 0;
	transition: opacity 0.2s;
}
.topnav-desk-search-icon:hover { opacity: 0.75; }
.topnav-desk-search-icon svg { display: block; }

/* =====================================================
   SEARCH OVERLAY — small floating dropdown under icon
===================================================== */
.topnav-search-overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999999;
	pointer-events: none;
	height: 0;
	overflow: visible;
}
.topnav-search-overlay.is-open {
	pointer-events: auto;
}
.topnav-search-overlay-backdrop {
	display: none;
}
.topnav-search-overlay-box {
	position: absolute;
	top: 60px;
	right: 16px;
	left: auto;
	width: 400px;
	background: transparent;
	border-radius: 12px;
	box-shadow: none;
	overflow: visible;
	transform: translateY(-8px) scale(0.97);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease, visibility 0s linear 0.22s;
	transform-origin: top right;
	pointer-events: none;
}
.topnav-search-overlay.is-open .topnav-search-overlay-box {
	transform: translateY(0) scale(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease, visibility 0s linear 0s;
}
.topnav-search-hint { display: none; }

.topnav-search-form {
	display: flex;
	align-items: stretch;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: none;
	box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
	position: relative;
	z-index: 2;
}
.topnav-search-input {
	flex: 1;
	border: none;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	padding: 32px 20px !important;
	height: auto !important;
	min-height: 80px !important;
	font-size: 16px !important;
	font-family: inherit;
	color: #1a1a1a;
	background: transparent;
	line-height: 1.3 !important;
	min-width: 0;
}
.topnav-search-input::placeholder { color: #aaa; font-weight: 400; }
.topnav-search-input:focus,
.topnav-search-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}
/* Empty search shake animation */
@keyframes topnav-search-shake {
	0%   { transform: translateX(0); }
	15%  { transform: translateX(-8px); }
	35%  { transform: translateX(7px); }
	55%  { transform: translateX(-5px); }
	75%  { transform: translateX(3px); }
	90%  { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}
.topnav-search-shake {
	animation: topnav-search-shake 0.4s ease forwards;
}
.topnav-search-submit {
	display: flex; align-items: center; justify-content: center;
	background: #f5c842; border: none; cursor: pointer;
	color: #1a1a1a; padding: 0 24px;
	flex-shrink: 0;
	transition: background 0.2s;
	border-radius: 0 12px 12px 0;
	margin: 0;
}
.topnav-search-submit:hover { background: #e6b800; }
.topnav-search-submit svg { width: 18px; height: 18px; display: block; }

.topnav-search-close { display: none; }

/* Mobile: full-width with side padding, anchored to top */
@media (max-width: 600px) {
	.topnav-search-overlay-box {
		right: 12px; left: 12px;
		width: auto;
		border-radius: 12px;
		top: 96px;
		transform-origin: top center;
	}
}

/* Hide logo on mobile — class added to img in topnav.php */
@media (max-width: 1023px) {
	.topnav-mob-logo-hide { display: none !important; }
}

/* --- Row 2 — #6 horizontal scroll so buttons never overlap --- */
.topnav-mobile-row2 {
	border-top: 1px solid rgba(255,255,255,0.08);
}
.topnav-mobile-row2-inner {
	display: flex;
	align-items: center;
	min-height: var(--mob-row2-h, 44px);
	padding: 0 6px;
	overflow-x: auto;          /* horizontal scroll when items overflow */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;     /* hide scrollbar but keep scrollable */
}
/* Centre all items — set when topnav_mobile_row2_center is enabled */
.topnav-mobile-row2-inner.row2-centered {
	justify-content: center;
	overflow-x: hidden;        /* hide scroll when centered; items wrap if needed */
	flex-wrap: wrap;
}
.topnav-mobile-row2-inner::-webkit-scrollbar { display: none; }

.topnav-mob-row2-nav { display: contents; } /* let items flow inline */
.topnav-mob-row2-menu {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	display: flex; align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
}
.topnav-mob-row2-menu > li {
	flex-shrink: 0;
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
/* Button items need flex+center so height:auto pill sits vertically centred */
.topnav-mob-row2-menu > li.menu-item-is-btn {
	display: flex;
	align-items: center;
	height: var(--mob-row2-h, 44px);
}
/* Gap between consecutive button items — matches regular item spacing (10px + 10px) */
.topnav-mob-row2-menu > li.menu-item-is-btn + li.menu-item-is-btn,
.topnav-mob-row2-menu > li:not(.menu-item-is-btn) + li.menu-item-is-btn {
	margin-left: 10px !important;
}
.topnav-mob-row2-menu > li > a {
	display: flex; align-items: center;
	color: #ffffff; text-decoration: none;
	padding: 0 10px !important;
	height: var(--mob-row2-h, 44px);
	font-size: 14px !important; font-weight: 600;
	text-transform: var(--topnav-text-transform, none); letter-spacing: 0.3px;
	white-space: nowrap; line-height: 1 !important;
	font-family: inherit;
	transition: color 0.2s;
}
.topnav-mob-row2-menu > li > a:hover,
.topnav-mob-row2-menu > li.current-menu-item > a { color: #fff551; }
.topnav-mob-row2-menu ul { display: none !important; }

/* Row2 CTA buttons — #6 flex-shrink:0 so they never get squished */
.topnav-mob-row2-cta {
	display: flex; align-items: center;
	gap: 6px; margin-left: 8px; flex-shrink: 0;
}
.topnav-mob-cta-btn {
	height: auto !important;
	padding-top: 5px;
	padding-bottom: 5px;
	white-space: nowrap; flex-shrink: 0;
}

/* =====================================================
   TOP NAV PANEL — full-screen overlay
===================================================== */
.topnav-mob-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: var(--bottomnav-h, 0px);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	/* Hidden state — same pattern as search overlay and bottomnav menu overlay */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.topnav-mob-panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s ease, visibility 0s linear 0s;
}

/* Overlay backdrop */
.topnav-mob-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.72);
}

/* Panel inner — full screen scrollable card, no translateY */
.topnav-mob-panel-inner {
	position: absolute;
	inset: 0;
	background: #006666;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* No drag handle pill — removed as it serves no practical purpose */

/* Header row */
.topnav-mob-panel-header {
	display: flex; align-items: center;
	justify-content: space-between;
	padding: 12px 20px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	flex-shrink: 0;
}

/* Title */
.topnav-mob-panel-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	line-height: 1;
}

.topnav-mob-panel-close {
	background: none; border: none;
	color: rgba(255,255,255,0.5);
	cursor: pointer;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	transition: color 0.2s, background 0.2s;
	flex-shrink: 0;
}
.topnav-mob-panel-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.topnav-mob-panel-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1; padding: 0;
}

/* Panel menu */
.topnav-mob-panel-menu {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.topnav-mob-panel-menu > li { margin: 0 !important; list-style: none !important; }
.topnav-mob-panel-menu > li > a {
	display: flex; align-items: center;
	gap: 14px;
	color: #ffffff; text-decoration: none;
	padding: 13px 22px !important; font-size: 15px !important;
	font-weight: 500; line-height: 1.3 !important;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	transition: background 0.15s, color 0.15s;
}
.topnav-mob-panel-menu > li:last-child > a { border-bottom: none; }
.topnav-mob-panel-menu > li > a:hover,
.topnav-mob-panel-menu > li.current-menu-item > a { color: #ffdd00; background: rgba(255,255,255,0.08); }
.topnav-mob-panel-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.topnav-mob-panel-menu ul li { list-style: none !important; margin: 0 !important; }
.topnav-mob-panel-menu ul li a {
	display: block; color: rgba(255,255,255,0.65);
	text-decoration: none; padding: 10px 22px 10px 40px !important;
	font-size: 13px !important; line-height: 1.3 !important;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	transition: background 0.15s, color 0.15s;
}
.topnav-mob-panel-menu ul li a:hover { color: #fff; background: rgba(255,255,255,0.04); }

/* =====================================================
   MENU OVERLAY FOOTER BUTTONS (WhatsApp + PDFs)
   Shared by both topnav panel and bottomnav overlay.
   Always pinned at the bottom — menu items scroll above.
===================================================== */
.menu-overlay-footer {
	display: flex;
	flex-direction: row;
	gap: 12px;
	justify-content: center;
	align-items: center;
	padding: 14px 20px;
	flex-shrink: 0;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.menu-overlay-footer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: rgba(255,255,255,0.12);
	color: #ffffff;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
}
.menu-overlay-footer-btn:hover {
	background: rgba(255,255,255,0.22);
	color: #fff551;
}
.menu-overlay-footer-btn svg {
	width: 26px;
	height: 26px;
	display: block;
	fill: currentColor;
	transition: fill 0.2s;
}
.menu-overlay-footer-btn:hover svg {
	fill: #fff551;
}

/* =====================================================
   RESPONSIVE SHOW/HIDE
   MOBILE = phones in portrait OR landscape (max 767px portrait width,
            OR touch device narrower than 1024px that is not a tablet).
   We use 767px for portrait phones. For landscape phones (like iPhone 15
   Pro Max at 932px landscape), we additionally check orientation + width.
   Tablets (iPad ≥ 768px portrait) get the desktop bar.

   NOTE: The default show/hide state (#topnav-bar visible, .topnav-mobile-wrap
   hidden) is set by an inline <style> in header.php that loads BEFORE this
   stylesheet. Do NOT add bare (non-media-query) defaults here — they load
   after the inline style and cause a flash of the desktop bar on mobile.
===================================================== */

/* Portrait phones: width ≤ 767px */
@media (max-width: 1023px) {
	#topnav-bar         { display: none !important; }
	.topnav-mobile-wrap { display: block !important; }
	.topnav-mob-panel   { display: flex !important; }
}

/* Landscape phones: touch devices in landscape with height ≤ 500px
   (phones landscape have short height; tablets in landscape are taller) */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
	#topnav-bar         { display: none !important; }
	.topnav-mobile-wrap { display: block !important; }
	.topnav-mob-panel   { display: flex !important; }
}

/* Force desktop for tablets (min-width 768px portrait, coarse touch — e.g. iPad) */
@media (min-width: 1024px) {
	#topnav-bar         { display: block !important; }
	.topnav-mobile-wrap { display: none !important; }
	.topnav-mob-panel   { display: none !important; }
}

/* =====================================================
   BRAND INLINE WITH MENU — desktop only
   Brand is now inside <nav> in the PHP, so it flows
   naturally with menu items. We just need to make it
   display inline (flex row) alongside the menu.
   topnav-navigation is already flex; brand-wrap sits
   before the ul and aligns with it automatically.
===================================================== */
@media (min-width: 1024px) {
	/* Centre the entire nav group (logo + menu items) in the bar */
	#topnav-bar .topnav-inner {
		justify-content: center !important;
	}
	/* Brand sits inline before menu items — no stretching */
	#topnav-bar .topnav-navigation {
		flex: 0 0 auto;
		align-items: center;
	}
	.topnav-navigation .topnav-brand-wrap {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		margin-right: 24px;
	}
	/* Right spacer must not push things — remove it */
	#topnav-bar .topnav-right-spacer {
		display: none !important;
	}
	/* Remove the absolute positioning we added — keep button in normal flow
	   so it never overflows the bar when the window shrinks */
	#topnav-bar .topnav-cta-group {
		position: static !important;
		flex: none !important;
	}

}

/* =====================================================
   COMPACT DESKTOP — 1024px to 1279px
   13"+ laptops (≥1280px) get full spacing (base styles).
   Screens 1024–1279px get compact mode: smaller font,
   tighter padding, and horizontal scroll as a fallback
   so content is never clipped.
   This block MUST stay at end of file — it overrides the
   justify-content:center set in the min-width:1024px block above.

   BUG FIX (12.9" iPad Pro portrait = exactly 1024px wide): this used
   to put `overflow-x:auto` on #topnav-bar itself. Per the CSS overflow
   spec (see the big comment on the base #topnav-bar rule above), a
   non-visible overflow-x with no explicit overflow-y forces overflow-y
   to compute to auto too — turning the whole 60px-tall bar into a
   clipping box. #topnav-bar is also the DOM parent of the notification
   bell's and profile avatar's flyout panels (.wlm-notif-panel /
   .wlm-account-panel — see My Membership's includes/notifications.php
   and includes/account-ui.php), which are `position:fixed` but are
   still clipped by an ancestor's overflow since nothing between them
   and #topnav-bar establishes a new containing block. Net effect: on
   a 1024–1279px-wide touch screen, tapping the bell/avatar DID open
   the panel (the tap itself worked fine — that's the button's normal
   tap-highlight you'd see), it just rendered clipped down to ~0px of
   visible height, i.e. invisible, which looked exactly like the tap
   doing nothing.

   A first attempt just moved `overflow-x:auto` down onto
   `.topnav-navigation` instead of `#topnav-bar`, on the theory that
   the bell/avatar panels are siblings of `.topnav-navigation`, not
   descendants, so they'd escape the clipping box. That part worked —
   but the "Bare Acts" flyout submenu (.topnav-menu-desktop ul,
   `position:absolute; top:100%`) IS a descendant of
   `.topnav-navigation`, so it started getting clipped by the exact
   same mechanism instead. Same bug, different victim — because ANY
   box with `overflow-x:auto` clips its other axis too; there is no
   plain-CSS way to scroll horizontally on a box without also clipping
   whatever opens below it on that box.

   Real fix: drop the scroll+clip approach entirely for this
   breakpoint. `.topnav-menu-desktop`'s base rule already has
   `flex-wrap: wrap`, so if the menu is ever too wide for the reduced
   10px item padding below, it wraps to a second line instead of
   needing to scroll — no overflow/clipping property anywhere in this
   block, so nothing positioned below the row (submenus, the
   notification panel, the account panel) can ever be cut off again. */
@media (min-width: 1024px) and (max-width: 1279px) {
	#topnav-bar {
		--topnav-menu-px: 10px;
	}
	#topnav-bar .topnav-inner {
		/* centering inherited from min-width:1024px block above — no override needed.
		   min-width:max-content intentionally removed: it caused the inner to expand
		   beyond viewport width, making justify-content:center push items apart. */
	}
	.topnav-navigation {
		flex: 1 1 auto;   /* allow this section to shrink instead of forcing the row wider */
		min-width: 0;
	}
	.topnav-menu-desktop > li > a {
		padding: 0 var(--topnav-menu-px, 10px) !important;
	}
}