/* ==========================================================================
   PeakPoint Webinars — Site-wide nav dropdown (avatar menu)
   Loaded on every front-end page, since the primary menu (and this item)
   appears sitewide, not only on plugin pages. Kept deliberately small.
   ========================================================================== */

.pp-nav-auth--login a {
	font-weight: 600;
}

.pp-nav-user {
	position: relative;
	display: flex;
	align-items: center;
}

.pp-nav-user__trigger {
	display: flex !important;
	align-items: center;
	gap: .5rem;
	padding: .35rem .6rem !important;
	border-radius: 999px;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .15s ease;
}
.pp-nav-user__trigger:hover,
.pp-nav-user__trigger:focus-visible {
	background-color: rgba(0, 0, 0, .05);
}

.pp-nav-user__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e10600, #8a0400);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: 0;
	flex-shrink: 0;
}

.pp-nav-user__name {
	font-size: .9rem;
	font-weight: 600;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pp-nav-user__chevron {
	width: 14px;
	height: 14px;
	opacity: .6;
	transition: transform .15s ease;
	flex-shrink: 0;
}
.pp-nav-user:hover .pp-nav-user__chevron,
.pp-nav-user.pp-nav-user--open .pp-nav-user__chevron {
	transform: rotate(180deg);
}

/* Dropdown panel — overrides the theme's default sub-menu look with a
   consistent, premium card regardless of active theme. Visibility itself is
   controlled by the theme's own menu JS (hover/click toggling the
   `.sub-menu`/`.menu-item-has-children` pattern most WP nav walkers use), so
   this only needs to restyle appearance, not add show/hide behavior. */
.pp-nav-user__menu.sub-menu {
	min-width: 200px;
	background: #fff;
	border: 1px solid #e2e4e9;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
	padding: .4rem;
	margin: 0;
	list-style: none;
	right: 0;
	left: auto;
}
.pp-nav-user__menu.sub-menu li.menu-item {
	margin: 0;
}
.pp-nav-user__menu.sub-menu li.menu-item > a {
	display: block;
	padding: .55rem .75rem;
	border-radius: 8px;
	font-size: .875rem;
	font-weight: 500;
	color: #0a0a0a;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}
.pp-nav-user__menu.sub-menu li.menu-item > a:hover,
.pp-nav-user__menu.sub-menu li.menu-item > a:focus-visible {
	background: #fdeceb;
	color: #e10600;
}
.pp-nav-user__menu-divider {
	margin-top: .3rem !important;
	padding-top: .3rem;
	border-top: 1px solid #e2e4e9;
}
.pp-nav-user__menu-divider > a {
	color: #6b7280 !important;
}
.pp-nav-user__menu-divider > a:hover {
	color: #e10600 !important;
}

/* ==========================================================================
   Sticky site header (OceanWP)
   Keeps the ENTIRE header (logo + nav + account menu + search) fixed and
   visible while scrolling. The theme header was position:absolute (a
   transparent overlay); switching to position:fixed keeps it OUT of normal
   flow exactly as before, so NO page content shifts (zero layout shift).
   It stays transparent at the very top (so the homepage hero still shows
   through unchanged) and gains a solid background + shadow once scrolled —
   toggled by the tiny .pp-is-stuck listener in Nav::enqueue_assets — so page
   content never appears over or through it.
   ========================================================================== */

/* The published height of the fixed header — the single source of truth for
   any page content that has to start below it. The sticky-header script
   overwrites this with the measured value on load/resize; this literal is the
   no-JS / pre-paint fallback and matches the header's real rendered height
   (measured 101px at every width from 390 to 1440 — the header does NOT
   shrink on mobile, so this is a constant, not a viewport-scaled value).
   Consumers must always read it through a fallback: var(--pp-header-h, 101px). */
:root {
	--pp-header-h: 101px;
}

#site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	transition: background-color .25s ease, box-shadow .25s ease;
}

/* Logo pinned to the extreme top-left with clean, responsive spacing. The
   theme centres the header inner (max-width:90%; margin:auto), which holds
   the logo well away from the edge — span it full-width so the side padding
   alone controls the gap (logo left / nav right sit near the viewport edges).
   Two ids (2,0,0) + !important to beat the theme's container + media rules. */
#site-header #site-header-inner {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: clamp(16px, 2.5vw, 40px) !important;
	padding-right: clamp(16px, 2.5vw, 40px) !important;
}

/* Solid, elevated state once the page is scrolled. The theme paints the
   transparent header via `body.has-transparent-header #site-header`
   (specificity 1,1,1); match/beat it (1,2,0) + !important so the solid
   background actually wins and content never shows through. */
#site-header.pp-is-stuck,
.has-transparent-header #site-header.pp-is-stuck {
	background-color: #f7f3ef !important; /* matches the site page background */
	box-shadow: 0 2px 14px rgba(13, 14, 18, .10) !important;
}

/* Logged-in admin bar is fixed at the very top (z-index 100000); drop the
   fixed header below it so it is never hidden behind the bar. */
body.admin-bar #site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #site-header {
		top: 46px;
	}
}

/* Mobile menu: no avatar chrome, no dropdown card — a flat highlighted
   section reads better inside an already-vertical mobile nav. */
#mobile-nav .pp-nav-user,
#mobile-dropdown .pp-nav-user {
	display: block;
}
#mobile-nav .pp-nav-user__trigger,
#mobile-dropdown .pp-nav-user__trigger {
	display: flex !important;
	padding: .5rem 0 !important;
}
#mobile-nav .pp-nav-user__menu.sub-menu,
#mobile-dropdown .pp-nav-user__menu.sub-menu {
	position: static;
	box-shadow: none;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
	border-radius: 0;
	padding: .25rem 0 .5rem 2.5rem;
}