/* =========================================================================
   PF Left Sidebar Header
   Fixed vertical sidebar (desktop) → off-canvas drawer (mobile).
   All selectors are prefixed `pf-` to avoid clashing with Avada/WooCommerce.
   ========================================================================= */

:root {
	/* Fluid rail. Scales continuously with the viewport instead of jumping at
	   breakpoints, so there is no width at which the content column is left
	   awkwardly squeezed:
	     768px  → 200px (floor)   1440px → 230px   2560px → 360px (ceiling)
	     1024px → 200px (floor)   1920px → 307px   3840px → 360px (ceiling)
	   Override the floor/ceiling rather than the whole expression if you want
	   a different feel. */
	--pf-sidebar-min: 200px;
	--pf-sidebar-max: 360px;
	--pf-sidebar-w: clamp(var(--pf-sidebar-min), 16vw, var(--pf-sidebar-max));
	--pf-yellow: #FFCD04;
	--pf-yellow-deep: #E6B800;
	--pf-ink: #1d1d1f;
	--pf-ink-2: #0a0a0b;
	--pf-grey: #86868b;
	--pf-grey-2: #6e6e73;
	--pf-search-bg: #eceded;
	--pf-search-bg-hover: #e4e5e7;
	--pf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Reserve room for the fixed rail WITHOUT widening the page.
   On Astra the top-level site wrapper is #page (.hfeed.site) — NOT Avada's
   #wrapper — so we offset that. padding-left + border-box keeps #page total
   width = 100% (no overflow); Astra's centred content container (.ast-container,
   default ~1240px) stays intact and simply re-centres within the remaining
   space. overflow-x:clip contains any 100vw full-bleed / stretched section so
   it can't push a horizontal scrollbar. `clip` (not `hidden`) leaves the
   vertical axis scrollable, so position:sticky keeps working. */
#page {
	box-sizing: border-box;
	width: 100%;
	padding-left: var(--pf-sidebar-w);
	overflow-x: clip;
	transition: padding-left .3s var(--pf-ease);
}

/* =========================================================================
   Content width
   -------------------------------------------------------------------------
   The usable content column is the viewport minus the rail. Anything built to
   span "the whole screen" (Elementor stretched sections, Gutenberg .alignfull,
   hand-written 100vw) measures against the viewport and therefore runs under
   the rail and gets clipped. These rules re-base those elements onto the
   content column instead.

   Elementor also has a first-class setting for this:
     Elementor → Settings → Advanced → "Stretched Section Fit To" → #page
   Setting that is cleaner than the overrides below; the overrides exist so the
   layout is not broken while it is unset.
   ========================================================================= */
/* The content column, expressed without 100vw.

   100vw INCLUDES the vertical scrollbar, so `calc(100vw - rail)` is ~15px too
   wide whenever the page scrolls — which is exactly how a stray horizontal
   scrollbar appears. Everything below therefore works from `100%` of #page's
   own content box, which already excludes both the rail and the scrollbar. */

/* Never let the page itself become the thing that scrolls sideways.

   `clip`, NOT `hidden`: overflow-x:hidden turns the element into a scroll
   container, which silently breaks `position: sticky` on every descendant —
   including the mobile top bar. `clip` contains the overflow without creating
   a scroll container, so sticky keeps working. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

@media (min-width: 768px) {

	/* --- Full-bleed patterns, re-based onto the content column --- */

	/* Elementor stretched sections get inline `width:100vw` plus a negative
	   `left` from JS, both measured against the viewport — so they start under
	   the rail and get clipped. Setting "Stretched Section Fit To" = #page in
	   Elementor is the proper fix; this keeps the layout intact until then. */
	#page .elementor-section-stretched,
	#page .elementor-section.elementor-section-stretched,
	#page .e-con-full.e-con--stretched {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Gutenberg / Astra full-bleed blocks. */
	#page .alignfull,
	#page .alignwide {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Anything still asking for a viewport-wide box, inline or otherwise. */
	#page [style*="100vw"] {
		max-width: 100%;
	}
}

/* =========================================================================
   Overflow containment
   -------------------------------------------------------------------------
   #page uses `overflow-x: clip` so a rogue element cannot push a page-level
   scrollbar — but clipping is what makes content look "cut off". The rules
   below stop things overflowing in the first place, leaving the clip as a
   last-resort net rather than the mechanism.
   ========================================================================= */

/* Replaced elements are the usual culprits: a fixed-width image or an embed
   wider than the column will push everything sideways. `height: auto` is only
   safe on raster media — forcing it on an SVG distorts icons that rely on an
   explicit height, so those get max-width alone. */
#page img,
#page video,
#page canvas {
	max-width: 100%;
	height: auto;
}

#page iframe,
#page embed,
#page object,
#page svg {
	max-width: 100%;
}

/* Long words, URLs and code blocks. */
#page p,
#page li,
#page h1,
#page h2,
#page h3,
#page h4,
#page dd,
#page dt,
#page figcaption {
	overflow-wrap: break-word;
}

#page pre {
	max-width: 100%;
	overflow-x: auto;
}

/* Tables get their own scroller instead of widening the page.

   Scoped to post/page content only. `display: block` is what makes overflow-x
   work on a table, but it also drops table layout semantics — applying it to
   every table in #page would break builder rows and WooCommerce cart/checkout
   tables, which are laid out as real tables. */
#page .entry-content > table,
#page .entry-content > figure.wp-block-table > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Everything else just stays inside the column. */
#page table {
	max-width: 100%;
}

/* A flex or grid child defaults to min-width:auto, which refuses to shrink
   below its content and is the most common silent cause of overflow inside
   builder rows. */
#page .elementor-row > .elementor-column,
#page .elementor-container > .elementor-column,
#page .e-con > .e-con-inner,
#page .ast-container > .ast-row > [class*="ast-col"] {
	min-width: 0;
}

/* On very wide displays cap the reading column so lines stay legible, and
   centre it in the space left over beside the rail. Astra's own container
   width (Customizer → Global → Container) still applies below this. */
@media (min-width: 1920px) {
	#page .ast-container,
	#page .elementor-section-boxed > .elementor-container {
		max-width: min(var(--pf-content-max, 1600px), 100%);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 2560px) {
	:root {
		--pf-content-max: 1900px;
	}
}

@media (min-width: 3840px) {
	:root {
		--pf-content-max: 2400px;
	}
}

/* ----- Sidebar shell ----- */
.pf-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--pf-sidebar-w);
	z-index: 9000;
	display: flex;
	flex-direction: column;
	padding: 22px 14px 16px;
	overflow-y: auto;
	background: rgba(249, 249, 251, .85);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	border-right: 1px solid rgba(0, 0, 0, .08);
}

/* Keep clear of the WP admin bar for logged-in users. */
.admin-bar .pf-sidebar {
	top: 32px;
}

/* ----- Brand / logo ----- */
.pf-sb-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 20px;
}

.pf-sb-logo {
	height: 38px;
	width: auto;
	display: block;
}

.pf-sb-logo-text {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pf-ink);
}

/* ----- Search ----- */

/* Astra ships .screen-reader-text, but scope a copy here so the visually
   hidden label can never render as visible text inside the pill if the
   parent stylesheet loads late or is dequeued. */
.pf-sb-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pf-sb-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--pf-search-bg);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 0 14px;
	height: 44px;
	margin-bottom: 18px;
	color: var(--pf-grey-2);
	transition: background .18s var(--pf-ease), border-color .18s var(--pf-ease), box-shadow .18s var(--pf-ease);
}

.pf-sb-search .pf-ico {
	width: 17px;
	height: 17px;
	flex: none;
	stroke: var(--pf-grey-2);
	stroke-width: 2;
}

.pf-sb-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	color: var(--pf-ink);
	-webkit-appearance: none;
	appearance: none;
}

.pf-sb-search input::placeholder {
	color: var(--pf-grey);
	opacity: 1;
}

/* Hide the browser's native "clear" affordance so the pill stays symmetrical. */
.pf-sb-search input::-webkit-search-cancel-button,
.pf-sb-search input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.pf-sb-search:hover {
	background: var(--pf-search-bg-hover);
}

/* `outline: none` on the input removes the focus indicator, so the wrapper
   takes it over — keyboard users still get a visible focus state. */
.pf-sb-search:focus-within {
	background: #fff;
	border-color: rgba(0, 0, 0, .12);
	box-shadow: 0 0 0 3px rgba(255, 205, 4, .35);
}

.pf-sb-search:focus-within .pf-ico {
	stroke: var(--pf-ink);
}

/* ----- Search suggestions (AJAX) — floating card ----- */
.pf-sb-searchwrap {
	position: relative;
}

.pf-sb-results {
	display: none;
	position: absolute;
	top: calc(100% - 6px);
	left: 0;
	right: 0;
	z-index: 60;
	padding: 6px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .05);
	max-height: 60vh;
	overflow-y: auto;
}

.pf-sb-results.pf-show {
	display: block;
}

.pf-sb-result {
	display: block;
	padding: 11px 12px;
	border-radius: 10px;
	text-decoration: none;
}

.pf-sb-result + .pf-sb-result {
	border-top: 1px solid rgba(0, 0, 0, .05);
}

.pf-sb-result:hover {
	background: rgba(0, 0, 0, .04);
	border-color: transparent;
}

.pf-sb-result b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--pf-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pf-sb-result span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--pf-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pf-sb-noresult {
	padding: 12px;
	font-size: 13px;
	color: var(--pf-grey);
}

/* ----- Nav ----- */
.pf-sb-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pf-grey);
	padding: 14px 12px 4px;
}

.pf-sb-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pf-sb-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 500;
	color: var(--pf-ink);
	text-decoration: none;
	transition: background .18s var(--pf-ease);
}

.pf-sb-item .pf-ico {
	width: 21px;
	height: 21px;
	flex: none;
	stroke: var(--pf-grey-2);
}

/* Uploaded icons are images, not strokable SVG — size and centre them the same. */
.pf-sb-item .pf-ico--img,
.pf-tab .pf-ico--img {
	object-fit: contain;
	stroke: none;
}

/* An item with no icon keeps its label aligned with the icon column. */
.pf-sb-item--no-icon {
	padding-left: 45px;
}

/* Sub-items sit slightly inset under their parent. */
.pf-sb-item--child {
	padding-left: 24px;
	font-size: 14px;
}

.pf-sb-item--child.pf-sb-item--no-icon {
	padding-left: 57px;
}

.pf-sb-item__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pf-sb-item__label {
	display: block;
}

.pf-sb-item__desc {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--pf-grey);
}

.pf-sb-item:hover {
	background: rgba(0, 0, 0, .05);
}

.pf-sb-item.pf-active {
	background: var(--pf-yellow);
	color: var(--pf-ink-2);
	font-weight: 600;
}

.pf-sb-item.pf-active .pf-ico {
	stroke: var(--pf-ink-2);
}

.pf-sb-item.pf-active .pf-sb-item__desc {
	color: var(--pf-ink-2);
	opacity: .75;
}

/* The first group has no heading above it, so it needs no extra top padding. */
.pf-sb-nav:first-of-type {
	margin-top: 4px;
}

.pf-sb-empty {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pf-grey-2);
	padding: 10px 12px;
}

/* ----- Bottom CTA card ----- */
.pf-sb-spacer {
	flex: 1 1 auto;
	min-height: 16px;
}

.pf-sb-foot {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px;
	border-radius: 13px;
	background: rgba(0, 0, 0, .04);
	text-decoration: none;
	color: var(--pf-ink);
}

.pf-av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--pf-yellow), var(--pf-yellow-deep));
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 800;
	color: var(--pf-ink-2);
	flex: none;
}

.pf-sb-foot-txt b {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.pf-sb-foot-txt span {
	display: block;
	font-size: 12px;
	color: var(--pf-grey);
}

/* ----- Mobile chrome (hidden on desktop) ----- */
.pf-topbar,
.pf-scrim,
.pf-tabbar {
	display: none;
}

/* =========================================================================
   Responsive
   -------------------------------------------------------------------------
   The rail scales with the viewport rather than sitting at one fixed width,
   so the remaining content column never gets squeezed on small laptops and
   never looks lost on very large displays.

     ≤767      drawer + top bar + tab bar (no rail)
     768–1023  200px rail
     1024–1299 220px rail
     1300–1439 240px rail  (base)
     1440–1599 256px rail
     1600–1919 272px rail
     ≥1920     288px rail  (HD/2K)
     ≥2560     312px rail  (QHD)
     ≥3840     360px rail  (4K/8K)
   ========================================================================= */

/* The rail WIDTH is fluid (see the clamp in :root), so these tiers only scale
   type and spacing to suit the physical size of the display. */

/* Small laptops / large tablets — the rail is at its 200px floor here, so keep
   the type compact to stop labels wrapping. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.pf-sb-item {
		font-size: 14px;
		padding: 8px 10px;
	}

	.pf-sb-item--no-icon {
		padding-left: 41px;
	}

	.pf-sb-search {
		height: 40px;
		padding: 0 12px;
	}

	.pf-sb-search input {
		font-size: 14px;
	}
}

@media (min-width: 1024px) and (max-width: 1299.98px) {
	.pf-sb-item {
		font-size: 14px;
	}
}

/* HD / 2K */
@media (min-width: 1920px) {
	.pf-sb-item {
		font-size: 16px;
		padding: 10px 13px;
	}

	.pf-sb-search {
		height: 46px;
	}
}

/* QHD */
@media (min-width: 2560px) {
	.pf-sidebar {
		padding: 26px 18px 20px;
	}

	.pf-sb-item {
		font-size: 17px;
	}

	.pf-sb-item .pf-ico {
		width: 23px;
		height: 23px;
	}
}

/* 4K and above (8K inherits this) */
@media (min-width: 3840px) {
	.pf-sb-item {
		font-size: 19px;
		padding: 12px 15px;
	}

	.pf-sb-item .pf-ico {
		width: 26px;
		height: 26px;
	}

	.pf-sb-label {
		font-size: 13px;
	}

	.pf-sb-search {
		height: 52px;
		border-radius: 14px;
	}

	.pf-sb-search input {
		font-size: 17px;
	}

	.pf-sb-logo {
		height: 48px;
	}
}

/* Mobile — off-canvas drawer + sticky top bar + bottom tab-bar */
@media (max-width: 767.98px) {
	#page {
		padding-left: 0;
		/* clear the fixed bottom tab-bar */
		padding-bottom: 84px;
	}

	.pf-sidebar {
		/* Never wider than the phone: 320px on a large handset, but on a 320px
		   device it backs off to 86vw so the scrim stays tappable. */
		width: min(86vw, 320px);
		z-index: 9100;
		transform: translateX(-100%);
		transition: transform .38s var(--pf-ease);
		background: rgba(249, 249, 251, .98);
		box-shadow: 0 0 60px rgba(0, 0, 0, .25);
	}

	/* On mobile the drawer overlays the screen, so don't offset for admin bar. */
	.admin-bar .pf-sidebar {
		top: 0;
	}

	body.pf-menu-open .pf-sidebar {
		transform: none;
	}

	.pf-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .35);
		z-index: 9050;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
	}

	body.pf-menu-open .pf-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	/* Three equal-weight columns keep the logo optically centred no matter how
	   wide the hamburger or the badge are. `space-between` on a flex row put
	   the brand off-centre whenever the two side elements differed in width. */
	.pf-topbar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 8000;
		height: 58px;
		padding: 0 14px;
		background: rgba(242, 242, 247, .9);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border-bottom: 1px solid rgba(0, 0, 0, .06);
	}

	.admin-bar .pf-topbar {
		top: 46px;
	}

	.pf-topbar .pf-menu-btn {
		justify-self: start;
	}

	.pf-topbar .pf-av {
		justify-self: end;
	}

	.pf-topbar-brand {
		justify-self: center;
		display: flex;
		align-items: center;
		min-width: 0;
		text-decoration: none;
		line-height: 0;
	}

	.pf-topbar-brand .pf-sb-logo {
		height: 32px;
		width: auto;
		max-width: 100%;
		display: block;
	}

	/* Fallback when the site has no logo set. */
	.pf-topbar-brand .pf-sb-logo-text {
		font-size: 17px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--pf-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pf-menu-btn {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background: rgba(0, 0, 0, .05);
		border: none;
		cursor: pointer;
		color: var(--pf-ink);
		flex: none;
	}

	.pf-menu-btn svg {
		width: 20px;
		height: 20px;
	}

	/* ----- Bottom tab-bar ----- */
	.pf-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 8500;
		height: 78px;
		padding: 9px 12px calc(env(safe-area-inset-bottom, 0px) / 2);
		align-items: flex-start;
		justify-content: center;
		background: rgba(249, 249, 251, .86);
		-webkit-backdrop-filter: saturate(180%) blur(22px);
		backdrop-filter: saturate(180%) blur(22px);
		border-top: 1px solid rgba(0, 0, 0, .08);
	}

	.pf-tabbar-inner {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 2px;
		width: 100%;
		max-width: 560px;
	}

	.pf-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 4px;
		min-width: 0;
		padding: 0 2px;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--pf-grey);
		text-decoration: none;
		text-align: center;
	}

	/* Labels were butting into each other because each tab filled its track
	   edge to edge. Constrain the text box, allow a second line, then clamp —
	   "Coaching Programs" now wraps instead of colliding with its neighbour. */
	.pf-tab span {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		max-width: 100%;
		overflow: hidden;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.pf-tab .pf-ico {
		width: 26px;
		height: 26px;
		stroke: var(--pf-grey);
	}

	.pf-tab.pf-active {
		color: var(--pf-ink-2);
	}

	.pf-tab.pf-active .pf-ico {
		stroke: var(--pf-ink-2);
	}
}

/* Narrow phones — five tabs in ~340px needs tighter metrics. */
@media (max-width: 400px) {
	.pf-tabbar {
		height: 74px;
		padding-left: 6px;
		padding-right: 6px;
	}

	.pf-tab {
		font-size: 9px;
		gap: 3px;
		padding: 0 1px;
	}

	.pf-tab .pf-ico {
		width: 23px;
		height: 23px;
	}

	.pf-topbar {
		height: 54px;
		padding: 0 10px;
	}

	.pf-topbar-brand .pf-sb-logo {
		height: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {

	#page,
	.pf-sidebar,
	.pf-scrim {
		transition: none;
	}
}