/* ==========================================================================
   Power Funnels Elements — base styles

   IMPORTANT FOR FUTURE DEVELOPERS:
   This file contains LAYOUT SCAFFOLDING ONLY (flex/grid structure,
   positioning, show/hide logic). Every visual property — colors, spacing,
   radius, blur, typography — is controlled from the Elementor Style tab
   and injected by Elementor as inline CSS scoped to each widget instance.

   Do NOT add colors or spacing values here. If a new visual property needs
   controlling, add an Elementor control for it in the widget's PHP file
   with a matching `selectors` entry. That keeps everything editable in the
   UI instead of requiring a code change.
   ========================================================================== */

/* --- Navigation Menu ---------------------------------------------------- */

.pfe-nav {
	display: flex;
	position: relative;
	/* Without these the pill grows past its share of the header and
	   overlaps the logo and buttons instead of staying within bounds. */
	max-width: 100%;
	min-width: 0;
}

.pfe-nav__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
	min-width: 0;
}

.pfe-nav__item {
	position: relative;
	list-style: none;
}

.pfe-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pfe-speed, 0.2s) ease, color var(--pfe-speed, 0.2s) ease;
}

.pfe-nav__arrow {
	flex-shrink: 0;
	transition: transform var(--pfe-speed, 0.2s) ease;
}

.pfe-nav__item--has-dropdown:hover > .pfe-nav__link .pfe-nav__arrow,
.pfe-nav__item--open > .pfe-nav__link .pfe-nav__arrow,
.pfe-nav__item--hover > .pfe-nav__link .pfe-nav__arrow {
	transform: rotate(180deg);
}

/* --- Panel wrapper ------------------------------------------------------
   THE KEY DETAIL: this transparent wrapper starts at top:100% — flush
   against the bottom of the menu item, with NO gap. The visual gap the
   user sets ("Distance From Nav") is created by padding-top INSIDE this
   wrapper, so the cursor never crosses dead space on its way to the
   panel. Earlier versions positioned the panel itself below the item,
   which left a real gap that broke hover.

   The wrapper is transparent and unstyled. All visible styling lives on
   the inner .pfe-nav__dropdown / .pfe-nav__mega boxes, which is also what
   every Elementor Style control targets.
   ----------------------------------------------------------------------- */

.pfe-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: var(--pfe-offset, 10px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--pfe-speed, 0.2s) ease,
		transform var(--pfe-speed, 0.2s) ease,
		visibility var(--pfe-speed, 0.2s);
	z-index: 9999;
}

.pfe-nav__panel--mega {
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
}

.pfe-nav__item--has-dropdown:hover > .pfe-nav__panel,
.pfe-nav__item--open > .pfe-nav__panel,
.pfe-nav__item--hover > .pfe-nav__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.pfe-nav__item--has-dropdown:hover > .pfe-nav__panel--mega,
.pfe-nav__item--open > .pfe-nav__panel--mega,
.pfe-nav__item--hover > .pfe-nav__panel--mega {
	transform: translateX(-50%) translateY(0);
}

/* Mega panel anchored to the whole nav bar instead of its trigger item.
   Making the item position:static lets the panel resolve its absolute
   position against the nav, so every mega panel lands in the same place
   regardless of which item opened it. */
.pfe-nav--mega-centered .pfe-nav__item--mega {
	position: static;
}

/* Mega panel centered on the viewport, or on a container, rather than on
   the nav. position:fixed takes the panel out of every ancestor's
   containing block, which is the only reliable way to center on something
   the panel isn't nested inside.

   NOTE: these modes deliberately do NOT use translateX(-50%) for
   centering. elements.js computes and sets the exact `left` edge instead,
   so positioning never depends on a CSS rule winning a specificity
   contest. transform is left free for the open/close slide only. */
.pfe-nav--mega-screen .pfe-nav__panel--mega,
.pfe-nav--mega-container .pfe-nav__panel--mega {
	position: fixed;
	left: 0;
	transform: translateY(-6px);
}

.pfe-nav--mega-screen .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
.pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
.pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
.pfe-nav--mega-container .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
.pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
.pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega {
	transform: translateY(0);
}

/* Keeps a mega panel from overflowing the viewport when its trigger sits
   near the right edge of the screen. Only used when panels are anchored
   to their item rather than centered on the nav. */
.pfe-nav__item--mega.pfe-nav--flip-right > .pfe-nav__panel--mega {
	left: auto;
	right: 0;
	transform: translateX(0) translateY(-6px);
}

.pfe-nav__item--mega.pfe-nav--flip-right:hover > .pfe-nav__panel--mega,
.pfe-nav__item--mega.pfe-nav--flip-right.pfe-nav__item--open > .pfe-nav__panel--mega,
.pfe-nav__item--mega.pfe-nav--flip-right.pfe-nav__item--hover > .pfe-nav__panel--mega {
	transform: translateX(0) translateY(0);
}

/* --- Panel contents ----------------------------------------------------- */

/* Blur alone reads as "soft dark box," not glass — it's the saturation
   boost that pulls color/contrast from whatever sits behind the panel
   through the blur, which is what actually sells the frosted-glass look.
   Both values come from Elementor controls (Dropdown Panel style
   section) via custom properties, so tuning either one live-updates the
   combined backdrop-filter below without the two controls fighting over
   the same CSS property. Falls back to the same values as the default
   controls if a var is ever unset. */
.pfe-nav__dropdown,
.pfe-nav__mega {
	-webkit-backdrop-filter: blur(var(--pfe-dropdown-blur, 18px)) saturate(var(--pfe-dropdown-saturate, 180%));
	backdrop-filter: blur(var(--pfe-dropdown-blur, 18px)) saturate(var(--pfe-dropdown-saturate, 180%));
}

/* A faint inner top highlight is the other half of the glass illusion —
   real glass catches a thin line of light along its top edge. Kept subtle
   and fixed (not a control) since it's a finishing touch, not a design
   decision that varies per site. */
.pfe-nav__dropdown,
.pfe-nav__mega {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pfe-nav__dropdown {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.pfe-nav__dropdown a {
	display: block;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 20px;
	transition: background-color var(--pfe-speed, 0.2s) ease, color var(--pfe-speed, 0.2s) ease;
}

.pfe-nav__mega-grid {
	display: grid;
}

.pfe-nav__mega-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	transition: background-color var(--pfe-speed, 0.2s) ease;
}

/* Divider color/width/spacing are all set by Elementor controls — see the
   "View All Link" group in widgets/class-nav-menu-widget.php. Nothing
   visual is hardcoded here. */
.pfe-nav__view-all {
	display: block;
	text-decoration: none;
}

.pfe-nav__view-all--has-divider {
	border-top-style: solid;
}

/* --- Mobile toggle ------------------------------------------------------ */

.pfe-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.pfe-nav__toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	transition: transform var(--pfe-speed, 0.2s) ease, opacity var(--pfe-speed, 0.2s) ease;
}

.pfe-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pfe-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.pfe-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Collapsed (hamburger) mode ----------------------------------------
   Two paths drive the same rules:

   1. The .pfe-nav--mobile class, set by elements.js. This is also the
      hook the "Collapsed Menu" style controls target.
   2. Real CSS media queries keyed on the widget's chosen breakpoint,
      written to the nav as data-breakpoint.

   The media queries exist because JS viewport detection is unreliable
   inside Elementor's editor preview — an emulated viewport does not
   always report its width to scripts, so a JS-only approach fails
   exactly where the layout is most often previewed. The media query
   path needs no JS at all.

   The blocks below are mechanically duplicated from the class-based
   rules. If you change one, change all of them.
   ----------------------------------------------------------------------- */

.pfe-nav--mobile .pfe-nav__toggle {
	display: flex;
}

.pfe-nav--mobile .pfe-nav__list {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	flex-direction: column;
	align-items: stretch;
	z-index: 9999;
}

/* Alignment of the stacked menu relative to the hamburger. Set by the
   "Menu Alignment" control via a wrapper class. */
.pfe-collapsed-align-left .pfe-nav--mobile .pfe-nav__list {
	left: 0;
	right: auto;
}

.pfe-collapsed-align-right .pfe-nav--mobile .pfe-nav__list {
	right: 0;
	left: auto;
}

/* Centred on the header rather than on the hamburger. position:fixed
   detaches the menu from the nav widget; elements.js then measures where
   left:0 actually lands and offsets from there, so this stays correct
   even when an ancestor's filter or transform forms the containing
   block. */
.pfe-collapsed-align-center .pfe-nav--mobile .pfe-nav__list {
	position: fixed;
	left: 0;
	right: auto;
	transform: none;
}

.pfe-nav--mobile.pfe-nav--open .pfe-nav__list {
	display: flex;
}

.pfe-nav--mobile .pfe-nav__link {
	justify-content: space-between;
	width: 100%;
}

.pfe-nav--mobile .pfe-nav__panel {
	position: static;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	padding-top: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: max-height 0.25s ease;
}

/* Screen- and container-centered mega panels use position:fixed on
   desktop, with `top` and `left` set inline by elements.js. Stacked mode
   must override all of that, including the hover transforms, which carry
   higher specificity. */
.pfe-nav--mobile.pfe-nav--mega-screen .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-screen .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-container .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-container .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
.pfe-nav--mobile.pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega {
	position: static;
	left: auto !important;
	top: auto !important;
	transform: none;
}

.pfe-nav--mobile .pfe-nav__item--open > .pfe-nav__panel {
	max-height: 1200px;
	transform: none;
}

.pfe-nav--mobile .pfe-nav__mega {
	width: 100% !important;
}

.pfe-nav--mobile .pfe-nav__mega .pfe-nav__mega-grid {
	grid-template-columns: 1fr;
}

/* Optionally drop the card descriptions when collapsed — two columns of
   body copy on a narrow screen reads as a wall of text. Set by the
   "Hide Descriptions When Collapsed" control. */
.pfe-hide-collapsed-desc-yes .pfe-nav--mobile .pfe-nav__mega-desc {
	display: none;
}

/* Roomier tap targets and breathing room between cards when stacked. */
.pfe-nav--mobile .pfe-nav__mega-card {
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 767px) {
	.pfe-nav[data-breakpoint="767"] .pfe-nav__toggle {
		display: flex;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__list {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: auto;
		flex-direction: column;
		align-items: stretch;
		z-index: 9999;
	}

	/* Alignment of the stacked menu relative to the hamburger. Set by the
	   "Menu Alignment" control via a wrapper class. */
	.pfe-collapsed-align-left .pfe-nav[data-breakpoint="767"] .pfe-nav__list {
		left: 0;
		right: auto;
	}

	.pfe-collapsed-align-right .pfe-nav[data-breakpoint="767"] .pfe-nav__list {
		right: 0;
		left: auto;
	}

	/* Centred on the header rather than on the hamburger. position:fixed
	   detaches the menu from the nav widget; elements.js then measures where
	   left:0 actually lands and offsets from there, so this stays correct
	   even when an ancestor's filter or transform forms the containing
	   block. */
	.pfe-collapsed-align-center .pfe-nav[data-breakpoint="767"] .pfe-nav__list {
		position: fixed;
		left: 0;
		right: auto;
		transform: none;
	}

	.pfe-nav[data-breakpoint="767"].pfe-nav--open .pfe-nav__list {
		display: flex;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__link {
		justify-content: space-between;
		width: 100%;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__panel {
		position: static;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: max-height 0.25s ease;
	}

	/* Screen- and container-centered mega panels use position:fixed on
	   desktop, with `top` and `left` set inline by elements.js. Stacked mode
	   must override all of that, including the hover transforms, which carry
	   higher specificity. */
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-screen .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-screen .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-container .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-container .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="767"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega {
		position: static;
		left: auto !important;
		top: auto !important;
		transform: none;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__item--open > .pfe-nav__panel {
		max-height: 1200px;
		transform: none;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__mega {
		width: 100% !important;
	}

	.pfe-nav[data-breakpoint="767"] .pfe-nav__mega .pfe-nav__mega-grid {
		grid-template-columns: 1fr;
	}

	/* Optionally drop the card descriptions when collapsed — two columns of
	   body copy on a narrow screen reads as a wall of text. Set by the
	   "Hide Descriptions When Collapsed" control. */
	.pfe-hide-collapsed-desc-yes .pfe-nav[data-breakpoint="767"] .pfe-nav__mega-desc {
		display: none;
	}

	/* Roomier tap targets and breathing room between cards when stacked. */
	.pfe-nav[data-breakpoint="767"] .pfe-nav__mega-card {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media (max-width: 1024px) {
	.pfe-nav[data-breakpoint="1024"] .pfe-nav__toggle {
		display: flex;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__list {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: auto;
		flex-direction: column;
		align-items: stretch;
		z-index: 9999;
	}

	/* Alignment of the stacked menu relative to the hamburger. Set by the
	   "Menu Alignment" control via a wrapper class. */
	.pfe-collapsed-align-left .pfe-nav[data-breakpoint="1024"] .pfe-nav__list {
		left: 0;
		right: auto;
	}

	.pfe-collapsed-align-right .pfe-nav[data-breakpoint="1024"] .pfe-nav__list {
		right: 0;
		left: auto;
	}

	/* Centred on the header rather than on the hamburger. position:fixed
	   detaches the menu from the nav widget; elements.js then measures where
	   left:0 actually lands and offsets from there, so this stays correct
	   even when an ancestor's filter or transform forms the containing
	   block. */
	.pfe-collapsed-align-center .pfe-nav[data-breakpoint="1024"] .pfe-nav__list {
		position: fixed;
		left: 0;
		right: auto;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1024"].pfe-nav--open .pfe-nav__list {
		display: flex;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__link {
		justify-content: space-between;
		width: 100%;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__panel {
		position: static;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: max-height 0.25s ease;
	}

	/* Screen- and container-centered mega panels use position:fixed on
	   desktop, with `top` and `left` set inline by elements.js. Stacked mode
	   must override all of that, including the hover transforms, which carry
	   higher specificity. */
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-screen .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-screen .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-container .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-container .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1024"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega {
		position: static;
		left: auto !important;
		top: auto !important;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__item--open > .pfe-nav__panel {
		max-height: 1200px;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__mega {
		width: 100% !important;
	}

	.pfe-nav[data-breakpoint="1024"] .pfe-nav__mega .pfe-nav__mega-grid {
		grid-template-columns: 1fr;
	}

	/* Optionally drop the card descriptions when collapsed — two columns of
	   body copy on a narrow screen reads as a wall of text. Set by the
	   "Hide Descriptions When Collapsed" control. */
	.pfe-hide-collapsed-desc-yes .pfe-nav[data-breakpoint="1024"] .pfe-nav__mega-desc {
		display: none;
	}

	/* Roomier tap targets and breathing room between cards when stacked. */
	.pfe-nav[data-breakpoint="1024"] .pfe-nav__mega-card {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media (max-width: 1366px) {
	.pfe-nav[data-breakpoint="1366"] .pfe-nav__toggle {
		display: flex;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__list {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: auto;
		flex-direction: column;
		align-items: stretch;
		z-index: 9999;
	}

	/* Alignment of the stacked menu relative to the hamburger. Set by the
	   "Menu Alignment" control via a wrapper class. */
	.pfe-collapsed-align-left .pfe-nav[data-breakpoint="1366"] .pfe-nav__list {
		left: 0;
		right: auto;
	}

	.pfe-collapsed-align-right .pfe-nav[data-breakpoint="1366"] .pfe-nav__list {
		right: 0;
		left: auto;
	}

	/* Centred on the header rather than on the hamburger. position:fixed
	   detaches the menu from the nav widget; elements.js then measures where
	   left:0 actually lands and offsets from there, so this stays correct
	   even when an ancestor's filter or transform forms the containing
	   block. */
	.pfe-collapsed-align-center .pfe-nav[data-breakpoint="1366"] .pfe-nav__list {
		position: fixed;
		left: 0;
		right: auto;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1366"].pfe-nav--open .pfe-nav__list {
		display: flex;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__link {
		justify-content: space-between;
		width: 100%;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__panel {
		position: static;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: max-height 0.25s ease;
	}

	/* Screen- and container-centered mega panels use position:fixed on
	   desktop, with `top` and `left` set inline by elements.js. Stacked mode
	   must override all of that, including the hover transforms, which carry
	   higher specificity. */
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-screen .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-screen .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-screen .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-container .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-container .pfe-nav__item--mega:hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--hover > .pfe-nav__panel--mega,
	.pfe-nav[data-breakpoint="1366"].pfe-nav--mega-container .pfe-nav__item--mega.pfe-nav__item--open > .pfe-nav__panel--mega {
		position: static;
		left: auto !important;
		top: auto !important;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__item--open > .pfe-nav__panel {
		max-height: 1200px;
		transform: none;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__mega {
		width: 100% !important;
	}

	.pfe-nav[data-breakpoint="1366"] .pfe-nav__mega .pfe-nav__mega-grid {
		grid-template-columns: 1fr;
	}

	/* Optionally drop the card descriptions when collapsed — two columns of
	   body copy on a narrow screen reads as a wall of text. Set by the
	   "Hide Descriptions When Collapsed" control. */
	.pfe-hide-collapsed-desc-yes .pfe-nav[data-breakpoint="1366"] .pfe-nav__mega-desc {
		display: none;
	}

	/* Roomier tap targets and breathing room between cards when stacked. */
	.pfe-nav[data-breakpoint="1366"] .pfe-nav__mega-card {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* --- Pill Button -------------------------------------------------------- */

.pfe-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	/* Themes (Astra among them) apply their own box-shadow "glow" to links
	   and buttons on hover. Resetting it here means the Box Shadow control
	   in the Style tab is the only thing that can produce a shadow. The
	   control's own output has higher specificity, so it still works. */
	box-shadow: none;
	transition: background-color var(--pfe-speed, 0.2s) ease,
		color var(--pfe-speed, 0.2s) ease,
		transform var(--pfe-speed, 0.2s) ease,
		box-shadow var(--pfe-speed, 0.2s) ease;
}

.pfe-pill:hover,
.pfe-pill:active {
	box-shadow: none;
}

/* Keyboard focus must stay visible — this only removes the mouse-hover
   glow, not the accessibility outline. */
.pfe-pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Icon-only mode: a perfect circle. Width/height come from the "Circle
   Size" control; aspect-ratio keeps it round if only one is set. */
.pfe-pill--icon-only {
	aspect-ratio: 1;
	flex-shrink: 0;
}

/* Icon before text rather than after. */
.pfe-pill--icon-first {
	flex-direction: row-reverse;
}

.pfe-pill__text {
	display: inline-block;
}

.pfe-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color var(--pfe-speed, 0.2s) ease, color var(--pfe-speed, 0.2s) ease;
}

.pfe-pill__icon svg {
	display: block;
}

/* The circular badge behind the icon. */
.pfe-pill__icon--badge {
	border-radius: 50%;
	aspect-ratio: 1;
}

/* --- Language Switcher -------------------------------------------------- */

.pfe-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.pfe-lang__current {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1;
	font: inherit;
	color: inherit;
	transition: color var(--pfe-speed, 0.2s) ease, background-color var(--pfe-speed, 0.2s) ease;
}

.pfe-lang__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pfe-lang__icon svg {
	display: block;
}

.pfe-lang__arrow {
	flex-shrink: 0;
	transition: transform var(--pfe-speed, 0.2s) ease;
}

.pfe-lang:hover .pfe-lang__arrow,
.pfe-lang--open .pfe-lang__arrow {
	transform: rotate(180deg);
}

/* Same gapless wrapper pattern as the nav dropdowns — the panel starts
   flush against the trigger and the visual gap comes from padding inside,
   so hover never crosses dead space. */
.pfe-lang__panel {
	position: absolute;
	top: 100%;
	left: 50%;
	padding-top: var(--pfe-offset, 8px);
	transform: translateX(-50%) translateY(-6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--pfe-speed, 0.2s) ease,
		transform var(--pfe-speed, 0.2s) ease,
		visibility var(--pfe-speed, 0.2s);
	z-index: 9999;
}

.pfe-lang:hover .pfe-lang__panel,
.pfe-lang--open .pfe-lang__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.pfe-lang__list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	min-width: 90px;
}

.pfe-lang__list a {
	display: block;
	padding: 8px 16px;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	transition: background-color var(--pfe-speed, 0.2s) ease, color var(--pfe-speed, 0.2s) ease;
}

.pfe-lang__inline-list {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfe-lang__inline-list a {
	text-decoration: none;
	opacity: 0.6;
	transition: opacity var(--pfe-speed, 0.2s) ease, color var(--pfe-speed, 0.2s) ease;
}

.pfe-lang__inline-list a:hover,
.pfe-lang__label--active {
	opacity: 1;
}

/* --- Submenu bullets ----------------------------------------------------
   Optional markers on submenu links and mega-menu card titles. Rendered
   as a pseudo-element so no extra markup is needed and the choice can be
   changed without re-rendering the menu.
   ----------------------------------------------------------------------- */

.pfe-nav__dropdown a,
.pfe-nav__mega-title {
	position: relative;
}

[class*="pfe-bullets-"]:not(.pfe-bullets-none) .pfe-nav__dropdown a,
[class*="pfe-bullets-"]:not(.pfe-bullets-none) .pfe-nav__mega-title {
	display: flex;
	align-items: baseline;
	gap: var(--pfe-bullet-gap, 10px);
}

[class*="pfe-bullets-"]:not(.pfe-bullets-none) .pfe-nav__dropdown a::before,
[class*="pfe-bullets-"]:not(.pfe-bullets-none) .pfe-nav__mega-title::before {
	flex-shrink: 0;
	color: var(--pfe-bullet-color, currentColor);
	font-size: var(--pfe-bullet-size, 1em);
	line-height: 1;
	transition: transform var(--pfe-speed, 0.2s) ease;
}

.pfe-bullets-dot .pfe-nav__dropdown a::before,
.pfe-bullets-dot .pfe-nav__mega-title::before {
	content: '\2022';
}

.pfe-bullets-dash .pfe-nav__dropdown a::before,
.pfe-bullets-dash .pfe-nav__mega-title::before {
	content: '\2014';
}

.pfe-bullets-chevron .pfe-nav__dropdown a::before,
.pfe-bullets-chevron .pfe-nav__mega-title::before {
	content: '\203A';
}

.pfe-bullets-arrow .pfe-nav__dropdown a::before,
.pfe-bullets-arrow .pfe-nav__mega-title::before {
	content: '\2192';
}

.pfe-bullets-diamond .pfe-nav__dropdown a::before,
.pfe-bullets-diamond .pfe-nav__mega-title::before {
	content: '\25C6';
}

.pfe-bullets-square .pfe-nav__dropdown a::before,
.pfe-bullets-square .pfe-nav__mega-title::before {
	content: '\25AA';
}

.pfe-bullets-slash .pfe-nav__dropdown a::before,
.pfe-bullets-slash .pfe-nav__mega-title::before {
	content: '\2044';
}

/* Nudge the marker on hover — subtle, and only where hover exists. */
.pfe-can-hover .pfe-bullets-chevron .pfe-nav__dropdown a:hover::before,
.pfe-can-hover .pfe-bullets-arrow .pfe-nav__dropdown a:hover::before,
.pfe-can-hover .pfe-bullets-chevron .pfe-nav__mega-card:hover .pfe-nav__mega-title::before,
.pfe-can-hover .pfe-bullets-arrow .pfe-nav__mega-card:hover .pfe-nav__mega-title::before {
	transform: translateX(3px);
}

/* --- Footer Link Columns ------------------------------------------------ */

.pfe-footer-links__heading {
	/* Typography, color and spacing all come from the Style tab. */
	display: block;
}

.pfe-footer-links__list--stack {
	display: grid;
	/* grid-template-columns is set by the responsive "Columns" control so
	   the count can differ per device. One column is the fallback for the
	   brief moment before Elementor's generated CSS applies. */
	grid-template-columns: minmax(0, 1fr);
}

/* The bottom-bar legal row: links flow horizontally and wrap on narrow
   screens rather than sitting in fixed grid tracks. */
.pfe-footer-links__list--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pfe-footer-links__link {
	text-decoration: none;
	/* Keeps the hover hit area to the text itself rather than the full
	   width of the grid track, which felt wrong to click. */
	width: fit-content;
	/* Astra applies its own hover glow to links; the Style tab should be
	   the only source of a shadow here. */
	box-shadow: none;
	transition: color var(--pfe-speed, 0.16s) ease;
}

.pfe-footer-links__link:hover {
	box-shadow: none;
}

.pfe-footer-links__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Contact Info ------------------------------------------------------- */

.pfe-contact-info__heading {
	display: block;
}

.pfe-contact-info__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pfe-contact-info__line {
	display: flex;
	align-items: center;
	text-decoration: none;
	box-shadow: none;
}

.pfe-contact-info__line:hover {
	box-shadow: none;
}

.pfe-contact-info__line:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Badge colors are set per repeater row as an inline style — see the note
   in class-contact-info-widget.php. Size and radius come from controls. */
.pfe-contact-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pfe-contact-info__icon svg {
	display: block;
}

.pfe-contact-info__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pfe-contact-info__kicker {
	display: block;
}

.pfe-contact-info__value {
	display: block;
	transition: color var(--pfe-speed, 0.16s) ease;
	/* Long email addresses should wrap rather than push the column wide. */
	overflow-wrap: anywhere;
}

.pfe-contact-info__hours {
	display: flex;
	/* Top rather than center: the text wraps to two lines on narrow
	   columns and a centered icon then floats oddly beside it. */
	align-items: flex-start;
}

.pfe-contact-info__hours-icon {
	display: inline-flex;
	flex-shrink: 0;
	/* Optically aligns the small icon with the first line of text. */
	margin-top: 0.15em;
}

.pfe-contact-info__hours-icon svg {
	display: block;
}

/* --- Social Icons ------------------------------------------------------- */

.pfe-social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pfe-social-icons__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
	border-style: solid;
	box-shadow: none;
	transition-property: background-color, border-color, color, transform, box-shadow;
	transition-timing-function: ease;
	/* Duration is driven by the Animation Speed control. */
	transition-duration: 180ms;
}

.pfe-social-icons__link svg {
	display: block;
	/* Inherits the tile's icon color unless the control overrides it. */
	fill: currentColor;
}

.pfe-social-icons__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Section Intro ------------------------------------------------------ */

/* A flex column so the Alignment control can position the max-width'd
   heading and subtext as blocks, not just align their text. The control
   emits `start`/`center`/`end`, which are valid values for BOTH
   `align-items` and `text-align` — so one value drives both. */
.pfe-section-intro {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.pfe-section-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	/* Gap between dash and label comes from the Style tab. */
}

.pfe-section-intro__dash {
	display: inline-block;
	flex-shrink: 0;
}

.pfe-section-intro__heading {
	/* Themes set their own heading margins; the Style tab owns this one. */
	margin-top: 0;
}

.pfe-section-intro__sub {
	margin-top: 0;
	margin-bottom: 0;
}


/* --- Glow utility ------------------------------------------------------- */

/* A soft radial "pool of light" behind a section, as used on the footer CTA
   band. Elementor's own radial gradient only offers preset positions and
   cannot place the circle partly off-canvas, which is what gives this its
   shape — hence a utility class rather than a background setting.
   
   This is a deliberate exception to the "no visuals in this file" rule at
   the top: it applies to CONTAINERS, which have no Power Funnels widget and
   therefore no Elementor controls to hang the values off. Every value is a
   CSS variable so it stays adjustable per section without editing code.

   USAGE — add to a container's Advanced > CSS Classes:
       pfe-glow                       (default: gold, top right)
       pfe-glow pfe-glow--top-left
       pfe-glow pfe-glow--bottom-right
       pfe-glow pfe-glow--bottom-left
       pfe-glow pfe-glow--center

   To change it on one section, set variables in that container's
   Advanced > Custom CSS:
       selector { --pfe-glow-size: 720px; --pfe-glow-opacity: 0.22; }

   COLOUR is an "R, G, B" triplet, not a hex — the opacity is applied
   separately so the gradient can fade to fully transparent in the SAME hue.
   Fading to `transparent` instead means fading toward transparent BLACK,
   which several browsers interpolate through grey, producing a dirty haze. */

.pfe-glow {
	--pfe-glow-color: 242, 183, 5;
	--pfe-glow-opacity: 0.16;
	--pfe-glow-size: 560px;
	--pfe-glow-fade: 66%;
	--pfe-glow-offset-x: -6%;
	--pfe-glow-offset-y: -40%;

	position: relative;
	/* Stops the circle spilling out and creating horizontal scroll. */
	overflow: hidden;
	/* Creates a stacking context so the glow can sit at z-index -1: above
	   this container's own background, but below all of its content. That
	   avoids having to force position/z-index onto every child, which would
	   break any child a future layout needs to absolutely position. */
	isolation: isolate;
}

/* ::after, NOT ::before. Elementor containers already use ::before for
   their Background Overlay layer, declaring `content: var(--background-
   overlay)`. With no overlay configured that variable is empty, `content`
   becomes invalid, and the pseudo-element is never generated — which
   silently killed this rule when it used ::before. The class is doubled
   (.pfe-glow.pfe-glow) purely to raise specificity above Elementor's
   container rules regardless of stylesheet load order. */
.pfe-glow.pfe-glow::after {
	content: "";
	position: absolute;
	top: var(--pfe-glow-offset-y);
	right: var(--pfe-glow-offset-x);
	width: var(--pfe-glow-size);
	height: var(--pfe-glow-size);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(var(--pfe-glow-color), var(--pfe-glow-opacity)) 0%,
		rgba(var(--pfe-glow-color), 0) var(--pfe-glow-fade)
	);
	pointer-events: none;
	z-index: -1;
}

/* Position variants. Each resets the edge it is moving away from, so the
   offset variables keep meaning "distance from my own corner". */

.pfe-glow.pfe-glow--top-left::after {
	right: auto;
	left: var(--pfe-glow-offset-x);
}

.pfe-glow.pfe-glow--bottom-right::after {
	top: auto;
	bottom: var(--pfe-glow-offset-y);
}

.pfe-glow.pfe-glow--bottom-left::after {
	top: auto;
	right: auto;
	bottom: var(--pfe-glow-offset-y);
	left: var(--pfe-glow-offset-x);
}

/* Vertically centred variants — for anchoring the glow behind something
   sitting mid-band, such as a row of CTA buttons, rather than against the
   top or bottom edge. --pfe-glow-offset-y is ignored by these. */

.pfe-glow.pfe-glow--right::after {
	top: 50%;
	right: var(--pfe-glow-offset-x);
	transform: translateY(-50%);
}

.pfe-glow.pfe-glow--left::after {
	top: 50%;
	right: auto;
	left: var(--pfe-glow-offset-x);
	transform: translateY(-50%);
}

.pfe-glow.pfe-glow--center::after {
	top: 50%;
	right: auto;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* --- Rating Badge --------------------------------------------------------
   A small inline pill: icon + rating number + review count. All colors,
   sizing and spacing come from Elementor controls — this just lays the
   pieces out in a row and keeps a link version from picking up underline/
   pointer defaults. */

.pfe-rating-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	text-decoration: none;
	cursor: default;
}

a.pfe-rating-badge {
	cursor: pointer;
}

.pfe-rating-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pfe-rating-badge__icon svg {
	display: block;
}

.pfe-rating-badge__rating,
.pfe-rating-badge__reviews {
	white-space: nowrap;
}

/* --- Pill Filter Group ---------------------------------------------------
   A label above a wrapping row of chip links. Each chip is a flex row so
   the optional dot sits inline with the text regardless of label length. */

.pfe-pill-filter__label {
	width: fit-content;
}

.pfe-pill-filter__list {
	display: flex;
	flex-wrap: wrap;
}

.pfe-pill-filter__pill {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
}

.pfe-pill-filter__dot {
	flex: none;
	display: block;
}

/* --- Hero Banner ----------------------------------------------------------
   Composite hero: background image + optional gradient overlay, rating
   badge, headline/subtext, filter pills, a two-button row, and bottom
   links. Colors/spacing/typography come from Elementor controls (see the
   widget file) — this only lays out the structure and the overlay
   pseudo-element. Note: unlike Elementor *containers*, a widget's own
   wrapper doesn't claim ::before for anything else, so it's safe to use
   here (contrast with the ::after trick pfe-glow needs). */

.pfe-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}

.pfe-hero__bg {
	position: relative;
	z-index: 0;
	flex: 1;
	display: flex;
	width: 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.pfe-hero__bg--overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		var(--pfe-hero-overlay-angle, 100deg),
		var(--pfe-hero-overlay-color, rgba(10, 10, 10, 0.85)) 0%,
		transparent var(--pfe-hero-overlay-fade, 80%)
	);
	pointer-events: none;
	z-index: 1;
}

.pfe-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

/* -- Rating badge -- */
.pfe-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	text-decoration: none;
}

.pfe-hero__rating-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pfe-hero__rating-icon svg {
	display: block;
}

.pfe-hero__rating-number,
.pfe-hero__rating-reviews {
	white-space: nowrap;
}

/* -- Eyebrow / heading / sub -- */
.pfe-hero__eyebrow {
	width: fit-content;
}

.pfe-hero__heading,
.pfe-hero__sub {
	margin: 0;
}

/* -- Filter pills -- */
.pfe-hero__pills {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pfe-hero__pills-list {
	display: flex;
	flex-wrap: wrap;
}

.pfe-hero__pill {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.pfe-hero__pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfe-hero__pill-dot {
	flex: none;
	display: block;
}

/* -- Button row -- */
.pfe-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.pfe-hero__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pfe-hero__whatsapp:focus-visible,
.pfe-hero__cta:focus-visible,
.pfe-hero__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfe-hero__whatsapp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.pfe-hero__whatsapp-icon svg {
	width: 55%;
	height: 55%;
}

.pfe-hero__whatsapp-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pfe-hero__whatsapp-kicker {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1;
}

.pfe-hero__whatsapp-value {
	line-height: 1;
}

.pfe-hero__cta {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* -- Bottom links -- */
.pfe-hero__links {
	display: flex;
	flex-wrap: wrap;
}

.pfe-hero__link {
	text-decoration: none;
	white-space: nowrap;
}