/* =============================================================
   Power Ray header + off-canvas menu
   - Dark bar (#1A1A1A), yellow accent (#F4C400)
   - Desktop (>=1024px): page content shifts left, panel slides in
   - Tablet (768-1023px): hide center tagline
   - Mobile (<768px): hide CTA label too; panel overlays
   ============================================================= */

:root {
	--pr-bg:        #008A27;
	--pr-fg:        #FFFFFF;
	--pr-accent:    #00C25A;
	--bt-bg: #00C25A;
	--pr-accent-fg: #111111;
	--pr-muted:     #9A9A9A;
	--pr-bar-h:     76px;
	--pr-panel-w:   420px;
	--pr-ease:      cubic-bezier(.77, 0, .175, 1);
	--pr-dur:       500ms;
}

/* Skip link */
.pr-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.pr-skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	background: var(--pr-accent);
	color: var(--pr-accent-fg);
	padding: .5rem .75rem;
	z-index: 10000;
}

/* Page-shift wrapper. Desktop translates this; mobile leaves it. */
.pr-page {
	position: relative;
	min-height: 100vh;
	will-change: transform;
}

/* When menu open: lock body scroll. */
body.pr-menu-open {
	overflow: hidden;
}

/* ---------- Header bar ---------- */
.pr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--pr-bg);
	color: var(--pr-fg);
	height: var(--pr-bar-h);
	border-bottom: 1px solid rgba(255,255,255,.04);
}
.pr-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	height: 100%;
	padding: 0 24px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
}

/* Anchor each child to its column so hiding the center on tablet/mobile
   doesn't cause the actions to auto-flow into the empty 1fr cell. */
.pr-header__logo    { grid-column: 1; justify-self: start; }
.pr-header__center  { grid-column: 2; }
.pr-header__actions { grid-column: 3; justify-self: end; margin-left: auto; }

/* Logo */
.pr-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--pr-fg);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
}
.pr-header__logo img {
	max-height: 40px;
	width: auto;
	display: block;
}
.pr-logo-text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 22px;
	text-transform: uppercase;
}
.pr-logo-text__bolt {
	display: inline-flex;
	align-items: center;
	color: var(--pr-accent);
}

/* Center tagline (desktop only) */
.pr-header__center {
	justify-self: end;
	text-align: right;
}
.pr-header__center-text,
.pr-header__center-link {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #C4C4C4;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}
.pr-header__center-link:hover {
	color: var(--pr-accent);
}

/* Right side: CTA + accents + hamburger */
.pr-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.pr-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: blue!important;
	color: #000;
	text-decoration: none;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 12px 22px;
	border-radius: 0;
	transition: filter .2s ease, transform .2s ease;
}
.pr-header__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* ---------- Hamburger ---------- */
.pr-hamburger {
	position: relative;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.pr-hamburger:hover,
.pr-hamburger:focus,
.pr-hamburger:active {
	background: transparent;
}
.pr-hamburger:focus-visible {
	outline: 2px solid var(--pr-accent);
	outline-offset: 3px;
}
.pr-hamburger__bar {
	display: block;
	width: 26px;
	height: 3px;
	background-color: #fff!important;
	border-radius: 2px;
	opacity: 1;
	transition:
		transform .35s var(--pr-ease),
		opacity .25s ease;
}
.pr-hamburger:hover .pr-hamburger__bar {
	background-color: #F4C400;
}
.pr-hamburger[aria-expanded="true"] .pr-hamburger__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.pr-hamburger[aria-expanded="true"] .pr-hamburger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}
.pr-hamburger[aria-expanded="true"] .pr-hamburger__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Off-canvas panel ---------- */
.pr-offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: var(--pr-panel-w);
	max-width: 100%;
	background: var(--pr-bg);
	color: var(--pr-fg);
	transform: translateX(100%);
	z-index: 200;
	box-shadow: -16px 0 40px rgba(0,0,0,.35);
	will-change: transform;
	display: flex;
	flex-direction: column;
}
.pr-offcanvas[aria-hidden="false"] {
	/* GSAP drives the actual transform; this is a CSS fallback if JS fails. */
	transform: translateX(0);
}

/* CSS-only fallback transition when GSAP is absent. */
.no-gsap .pr-offcanvas {
	transition: transform var(--pr-dur) var(--pr-ease);
}
.no-gsap .pr-page {
	transition: transform var(--pr-dur) var(--pr-ease);
}
.no-gsap.pr-menu-open .pr-page {
	transform: translateX(calc(var(--pr-panel-w) * -1));
}
@media (max-width: 1023px) {
	.no-gsap.pr-menu-open .pr-page { transform: none; }
}

.pr-offcanvas__inner {
	position: relative;
	padding: 88px 40px 40px;
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.pr-offcanvas__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	color: var(--pr-accent);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.pr-offcanvas__close:focus-visible {
	outline: 2px solid var(--pr-accent);
	outline-offset: 3px;
}

/* Menu list */
.pr-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pr-menu li {
	margin: 0;
	padding: 0;
}
.pr-menu a {
	display: block;
	padding: 14px 0;
	color: var(--pr-fg);
	text-decoration: none;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid rgba(255,255,255,.07);
	transition: color .2s ease, padding-left .2s ease;
}
.pr-menu a:hover,
.pr-menu .current-menu-item > a {
	color: var(--pr-accent);
	padding-left: 8px;
}
/* Submenus collapse by default. JS sets inline height/opacity via GSAP;
   this rule provides the closed initial state and CSS-fallback. */
.pr-menu .pr-menu__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 0;
	opacity: 0;
}
/* Indented submenu links — increase per nesting depth. */
.pr-menu .pr-menu__sub > li > a {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 10px 0 10px 22px;
	margin-left: 8px;
	border-left: 2px solid rgba(244,196,0,.35);
	border-bottom: 1px solid rgba(255,255,255,.05);
}
.pr-menu .pr-menu__sub .pr-menu__sub > li > a {
	padding-left: 38px;
	margin-left: 16px;
}
.pr-menu .pr-menu__sub .pr-menu__sub .pr-menu__sub > li > a {
	padding-left: 54px;
	margin-left: 24px;
}

/* Parent <li> needs to position the chevron toggle to the right of the link. */
.pr-menu .pr-menu__has-children {
	position: relative;
}
.pr-menu .pr-menu__has-children > a {
	padding-right: 56px;
}
.pr-menu .pr-menu__toggle {
	position: absolute;
	top: 4px;
	right: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--pr-accent);
	cursor: pointer;
	padding: 0;
	transition: transform .25s ease;
}
.pr-menu .pr-menu__toggle:focus-visible {
	outline: 2px solid var(--pr-accent);
	outline-offset: 2px;
}
.pr-menu .pr-menu__has-children.is-open > .pr-menu__toggle {
	transform: rotate(180deg);
}
.pr-menu .pr-menu__chevron {
	display: block;
	width: 14px;
	height: 14px;
}

/* Submenu placement under the parent: nested <ul> inside another <ul>'s <li>
   would normally sit beside; allow the indent border-left to read clean. */
.pr-menu .pr-menu__sub li {
	border-left: 0;
}

/* No-GSAP fallback path — pure CSS max-height open/close. */
.no-gsap .pr-menu .pr-menu__sub {
	height: auto;
	max-height: 0;
	transition: max-height .25s ease-out, opacity .2s ease-out;
}
.no-gsap .pr-menu .pr-menu__has-children.is-open > .pr-menu__sub {
	max-height: 1200px;
	opacity: 1;
}
.pr-menu-fallback {
	color: var(--pr-muted);
	font-size: 14px;
}
.pr-menu-fallback a { color: var(--pr-accent); }

/* Initial state for stagger-in items (JS removes this) */
.pr-menu li.is-stagger-init {
	opacity: 0;
	transform: translateX(24px);
}

/* ---------- Overlay ---------- */
.pr-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	z-index: 150;
	pointer-events: none;
	transition: opacity .35s ease;
}
.pr-overlay[hidden] { display: none; }
body.pr-menu-open .pr-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Responsive ---------- */
/* Hide center tagline on anything below desktop. */
@media (max-width: 1023px) {
	.pr-header__center { display: none; }
	.pr-offcanvas {
		width: 85vw;
		max-width: 420px;
	}
}

@media (max-width: 767px) {
	.pr-header__inner { padding: 0 16px; gap: 12px; }
	.pr-header__cta {
		padding: 10px 14px;
		font-size: 14px;
	}
	.pr-header__cta-label {
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	.pr-logo-text { font-size: 18px; }
	.pr-offcanvas__inner { padding: 80px 24px 24px; }
	.pr-menu a { font-size: 18px; }
}

/* Reduced motion: disable transforms */
@media (prefers-reduced-motion: reduce) {
	.pr-page,
	.pr-offcanvas,
	.pr-hamburger__bar,
	.pr-overlay {
		transition: none !important;
	}
}

/* =============================================================
   FORCED OVERRIDES
   Counters Elementor / Hello Elementor / Elementor-Kit globals
   that win on specificity or run later in cascade. Every rule is
   scoped under .pr-header so nothing leaks outside the header.
   ============================================================= */

/* ---- Tagline alignment + typography ---------------------------
   Common conflicts:
   - body.elementor-default .elementor-kit-{id}  (sets body font + color)
   - .elementor-section-boxed .elementor-container  (centers children)
   - hello-elementor body { font-family: 'Roboto', ...; color: #54595F }
   ----------------------------------------------------------------*/
.pr-header .pr-header__center {
	justify-self: end !important;
	text-align: right !important;
	width: 100%;          /* prevents shrink-wrap inside the grid cell */
	display: block;
}
.pr-header .pr-header__center .pr-header__center-text,
.pr-header .pr-header__center .pr-header__center-link,
.pr-header .pr-header__center a,
.pr-header .pr-header__center span {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 3px !important;
	color: #C4C4C4 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

/* ---- Hamburger button: kill all background / border / shadow ---
   Common conflicts:
   - body.elementor-page button { background-color: ...; border: ... }
   - hello-elementor button reset (gives buttons a brand bg + 1px border)
   - global :focus { outline + box-shadow } from theme/Elementor Pro forms
   ----------------------------------------------------------------*/
.pr-header .pr-hamburger,
.pr-header button.pr-hamburger,
.pr-header .pr-hamburger:hover,
.pr-header .pr-hamburger:focus,
.pr-header .pr-hamburger:active,
.pr-header button.pr-hamburger:hover,
.pr-header button.pr-hamburger:focus,
.pr-header button.pr-hamburger:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit;
}
/* Keep the visible keyboard focus ring (a11y) — not the theme's default. */
.pr-header .pr-hamburger:focus-visible {
	outline: 2px solid #F4C400 !important;
	outline-offset: 3px !important;
}

/* ---- Hamburger bars: yellow, 3px, opaque -----------------------
   Common conflicts:
   - body.elementor-page span { color/background inherited from kit }
   - reduced-opacity transitions from prior CSS
   Note: actual class is .pr-hamburger__bar (not .pr-header__toggle-bar).
   ----------------------------------------------------------------*/
.pr-header .pr-hamburger .pr-hamburger__bar,
.pr-header .pr-hamburger > span,
.pr-header button.pr-hamburger > span {
	background-color: #F4C400 !important;
	background-image: none !important;
	height: 3px !important;
	opacity: 1 !important;
	border-radius: 2px !important;
}

/* ---- CTA button: force every spec property --------------------
   Common conflicts:
   - .elementor-button, .elementor-button-link  (brand bg + radius + padding)
   - body.elementor-page a { color: var(--e-global-color-...) }
   - hello-elementor a { text-decoration: underline; color: ... }
   - elementor-kit body { font-family: ...; letter-spacing: ... }
   ----------------------------------------------------------------*/
.pr-header .pr-header__cta,
.pr-header a.pr-header__cta,
.pr-header .pr-header__actions a.pr-header__cta {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: #000000 !important;
	background-color: #F4C400 !important;
	background-image: none !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	border: 0 !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	padding: 12px 22px !important;
	display: inline-flex !important;
	align-items: center !important;
	box-shadow: none !important;
}
.pr-header .pr-header__cta:hover,
.pr-header a.pr-header__cta:hover,
.pr-header .pr-header__cta:focus,
.pr-header a.pr-header__cta:focus,
.pr-header .pr-header__cta:active {
	background-color: #F4C400 !important;
	color: #000000 !important;
	text-decoration: none !important;
	border-color: transparent !important;
	/* keep the existing micro-lift hover from earlier rules */
}
/* The label span inherits from the anchor — block any kit overrides. */
.pr-header .pr-header__cta .pr-header__cta-label,
.pr-header a.pr-header__cta > span {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	line-height: inherit !important;
	background: transparent !important;
}

/* ---- Mobile (<768px): logo left, hamburger right, hide CTA + tagline.
   Switch to flex space-between so we don't inherit desktop grid columns. */
@media (max-width: 767px) {
	.pr-header .pr-header__inner {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		grid-template-columns: none !important;
	}
	.pr-header .pr-header__logo {
		grid-column: auto !important;
		justify-self: auto !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}
	.pr-header .pr-header__center,
	.pr-header .pr-header__cta,
	.pr-header a.pr-header__cta,
	.pr-header .pr-header__actions .pr-header__cta,
	.pr-header .pr-header__actions a.pr-header__cta,
	.pr-header__actions a.pr-header__cta,
	.pr-header .pr-header__inner a.pr-header__cta {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}
	.pr-header .pr-header__actions {
		grid-column: auto !important;
		justify-self: auto !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
		gap: 0 !important;
	}
}

/* ---- Hamburger bars: identical dimensions across all three.
   Counters Elementor span resets / theme line-height jitters that
   render the middle bar visibly thinner. ----------------------------*/
.pr-header .pr-hamburger .pr-hamburger__bar,
.pr-header .pr-hamburger > span,
.pr-header button.pr-hamburger > span,
.pr-header .pr-hamburger > span:first-child,
.pr-header .pr-hamburger > span:nth-child(2),
.pr-header .pr-hamburger > span:last-child {
	display: block !important;
	width: 26px !important;
	min-width: 26px !important;
	height: 3px !important;
	min-height: 3px !important;
	max-height: 3px !important;
	flex: 0 0 3px !important;
	background-color: #F4C400 !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 2px !important;
	opacity: 1 !important;
	line-height: 0 !important;
	font-size: 0 !important;
}

/* ---- Off-canvas close button: kill Elementor hover, force white, larger.
   Markup uses an inline SVG with two stroke="currentColor" lines. -----*/
.pr-offcanvas .pr-offcanvas__close,
.pr-offcanvas button.pr-offcanvas__close,
.pr-offcanvas .pr-offcanvas__close:hover,
.pr-offcanvas .pr-offcanvas__close:focus,
.pr-offcanvas .pr-offcanvas__close:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	transform: none !important;
	filter: none !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}
.pr-offcanvas .pr-offcanvas__close:focus-visible {
	outline: 2px solid #F4C400 !important;
	outline-offset: 2px !important;
}
.pr-offcanvas .pr-offcanvas__close .pr-offcanvas__close-icon,
.pr-offcanvas .pr-offcanvas__close svg {
	width: 32px !important;
	height: 32px !important;
	display: block !important;
}
.pr-offcanvas .pr-offcanvas__close svg line,
.pr-offcanvas .pr-offcanvas__close svg path {
	stroke: #FFFFFF !important;
	fill: none !important;
}

/* ---- Submenu chevron toggle button: defang Elementor button styles. */
.pr-offcanvas .pr-menu__toggle,
.pr-offcanvas button.pr-menu__toggle,
.pr-offcanvas .pr-menu__toggle:hover,
.pr-offcanvas .pr-menu__toggle:focus,
.pr-offcanvas .pr-menu__toggle:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #F4C400 !important;
	width: 36px !important;
	height: 36px !important;
	padding: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* Re-anchor the absolute position after the size shrinks so the
   chevron stays vertically centered with the link's text. */
.pr-offcanvas .pr-menu .pr-menu__has-children > .pr-menu__toggle {
	top: 8px !important;
	right: 0 !important;
}
.pr-offcanvas .pr-menu__toggle svg,
.pr-offcanvas .pr-menu__toggle .pr-menu__chevron {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
}
.pr-offcanvas .pr-menu__toggle svg path {
	fill: currentColor !important;
}
/* Ensure the rotation hook still resolves at the new size. */
.pr-offcanvas .pr-menu .pr-menu__has-children.is-open > .pr-menu__toggle {
	transform: rotate(180deg) !important;
}