/* =========================================================
   JUNETEENTH PBC — HEADER COMPONENT

   Depends on global style.css for:
   - colors, fonts, radii, shadows and transitions
   - .jpbc-site-header foundation and sticky positioning
   - .jpbc-main-nav link typography and active states
   - global .jpbc-button variants
   ========================================================= */

/* ---------- Header structure ---------- */

.jpbc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: min(
		calc(100% - (var(--jpbc-content-gutter) * 2)),
		var(--jpbc-content-width)
	);
	min-height: 88px;
	margin-inline: auto;
}

.jpbc-header__brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.jpbc-header__logo {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	object-fit: contain;
}

.jpbc-header__brand-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1;
}

.jpbc-header__brand-name {
	font-family: var(--jpbc-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.jpbc-header__brand-location {
	margin-top: 5px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.72;
	white-space: nowrap;
}

/* ---------- Desktop navigation ---------- */

.jpbc-main-nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.jpbc-main-nav ul,
.jpbc-main-nav .menu,
.jpbc-main-nav .elementor-nav-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 1.7vw, 28px);
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jpbc-main-nav li,
.jpbc-main-nav .menu-item {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.jpbc-main-nav li > a,
.jpbc-main-nav .menu-item > a,
.jpbc-main-nav .elementor-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 0;
	white-space: nowrap;
}

.jpbc-main-nav li > a::after,
.jpbc-main-nav .menu-item > a::after,
.jpbc-main-nav .elementor-item::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 5px;
	left: 0;
	height: 2px;
	border-radius: var(--jpbc-radius-pill);
	background: var(--jpbc-lemon);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--jpbc-transition-fast);
}

.jpbc-main-nav li > a:hover::after,
.jpbc-main-nav li > a:focus-visible::after,
.jpbc-main-nav .current-menu-item > a::after,
.jpbc-main-nav .current_page_item > a::after,
.jpbc-main-nav .elementor-item:hover::after,
.jpbc-main-nav .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* ---------- Header actions ---------- */

.jpbc-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.jpbc-header__actions .jpbc-button,
.jpbc-header__actions .elementor-button {
	min-height: 42px;
	padding: 10px 17px;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

.jpbc-header__tickets .elementor-button,
.jpbc-header__tickets.jpbc-button {
	color: var(--jpbc-white);
	border-color: rgba(255, 255, 255, 0.55);
	background: transparent;
}

.jpbc-header__tickets .elementor-button:hover,
.jpbc-header__tickets.jpbc-button:hover {
	color: var(--jpbc-charcoal);
	border-color: var(--jpbc-white);
	background: var(--jpbc-white);
}

.jpbc-header__donate .elementor-button,
.jpbc-header__donate.jpbc-button {
	color: var(--jpbc-white);
	border-color: var(--jpbc-pink);
	background: var(--jpbc-pink);
}

.jpbc-header__donate .elementor-button:hover,
.jpbc-header__donate.jpbc-button:hover {
	border-color: #d9368d;
	background: #d9368d;
}

/* ---------- Sticky transition ---------- */

.jpbc-site-header {
	transition:
		background-color var(--jpbc-transition),
		box-shadow var(--jpbc-transition),
		transform var(--jpbc-transition);
}

.jpbc-site-header.is-sticky,
.elementor-sticky--active.jpbc-site-header {
	background: rgba(31, 31, 31, 0.96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

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

.jpbc-menu-toggle {
	display: none;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--jpbc-radius-sm);
	color: var(--jpbc-white);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	transition:
		color var(--jpbc-transition-fast),
		background-color var(--jpbc-transition-fast),
		border-color var(--jpbc-transition-fast);
}

.jpbc-menu-toggle:hover,
.jpbc-menu-toggle:focus-visible,
.jpbc-menu-toggle[aria-expanded="true"] {
	color: var(--jpbc-charcoal);
	border-color: var(--jpbc-lemon);
	background: var(--jpbc-lemon);
}

.jpbc-menu-toggle svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ---------- Mobile flyout ---------- */

.jpbc-mobile-menu__backdrop {
	position: fixed;
	z-index: 9998;
	inset: 0;
	visibility: hidden;
	background: rgba(31, 31, 31, 0.72);
	opacity: 0;
	transition:
		opacity var(--jpbc-transition),
		visibility var(--jpbc-transition);
}

.jpbc-mobile-menu {
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 90vw);
	padding: 28px;
	overflow-x: hidden;
	overflow-y: auto;
	color: var(--jpbc-charcoal);
	background: var(--jpbc-white);
	box-shadow: -18px 0 50px rgba(31, 31, 31, 0.2);
	transform: translateX(102%);
	transition: transform 320ms ease;
}

.jpbc-mobile-menu.is-open,
.jpbc-site-header.is-menu-open .jpbc-mobile-menu {
	transform: translateX(0);
}

.jpbc-mobile-menu__backdrop.is-open,
.jpbc-site-header.is-menu-open + .jpbc-mobile-menu__backdrop {
	visibility: visible;
	opacity: 1;
}

.jpbc-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--jpbc-border);
}

.jpbc-mobile-menu__title {
	font-family: var(--jpbc-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.jpbc-mobile-menu__close {
	display: grid;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--jpbc-border);
	border-radius: var(--jpbc-radius-sm);
	color: var(--jpbc-charcoal);
	background: var(--jpbc-offwhite);
}

.jpbc-mobile-menu__close:hover,
.jpbc-mobile-menu__close:focus-visible {
	color: var(--jpbc-white);
	border-color: var(--jpbc-pink);
	background: var(--jpbc-pink);
}

.jpbc-mobile-menu nav {
	margin-top: 28px;
}

.jpbc-mobile-menu nav ul,
.jpbc-mobile-menu .menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jpbc-mobile-menu nav a,
.jpbc-mobile-menu .menu-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 14px 0;
	border-bottom: 1px solid var(--jpbc-border);
	color: var(--jpbc-charcoal);
	font-family: var(--jpbc-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.jpbc-mobile-menu nav a:hover,
.jpbc-mobile-menu nav a:focus-visible,
.jpbc-mobile-menu .current-menu-item > a,
.jpbc-mobile-menu .current_page_item > a {
	color: var(--jpbc-pink);
}

.jpbc-mobile-menu__actions {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}

.jpbc-mobile-menu__actions .jpbc-button,
.jpbc-mobile-menu__actions .elementor-button {
	width: 100%;
}

body.jpbc-menu-open {
	overflow: hidden;
}

/* ---------- Elementor Nav Menu support ---------- */

.jpbc-site-header .elementor-nav-menu--dropdown {
	border-radius: 0 0 var(--jpbc-radius-lg) var(--jpbc-radius-lg);
	background: var(--jpbc-white);
	box-shadow: var(--jpbc-shadow-lift);
}

.jpbc-site-header .elementor-nav-menu--dropdown a {
	color: var(--jpbc-charcoal);
	background: transparent;
}

.jpbc-site-header .elementor-nav-menu--dropdown a:hover,
.jpbc-site-header .elementor-nav-menu--dropdown a.elementor-item-active {
	color: var(--jpbc-pink);
	background: var(--jpbc-offwhite);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
	.jpbc-header__inner {
		gap: 18px;
	}

	.jpbc-main-nav ul,
	.jpbc-main-nav .menu,
	.jpbc-main-nav .elementor-nav-menu {
		gap: 16px;
	}

	.jpbc-main-nav li > a,
	.jpbc-main-nav .menu-item > a,
	.jpbc-main-nav .elementor-item {
		font-size: 13px;
	}

	.jpbc-header__actions .jpbc-button,
	.jpbc-header__actions .elementor-button {
		padding-inline: 14px;
	}
}

@media (max-width: 1024px) {
	.jpbc-header__inner {
		min-height: 80px;
	}

	.jpbc-main-nav,
	.jpbc-header__desktop-actions {
		display: none;
	}

	.jpbc-header__actions {
		margin-left: auto;
	}

	.jpbc-menu-toggle {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	.jpbc-header__inner {
		gap: 12px;
		min-height: 72px;
	}

	.jpbc-header__logo {
		width: 44px;
		height: 44px;
	}

	.jpbc-header__brand-name {
		font-size: 17px;
	}

	.jpbc-header__brand-location {
		font-size: 9px;
		letter-spacing: 0.12em;
	}

	.jpbc-header__mobile-donate {
		display: none;
	}

	.jpbc-mobile-menu {
		width: min(380px, 92vw);
		padding: 24px;
	}
}

@media (max-width: 430px) {
	.jpbc-header__brand-location {
		display: none;
	}

	.jpbc-mobile-menu {
		width: 100%;
	}
}

/* Site header overlays the page; scrolling controls its surface. */
body:has(.jpbc-site-header) .elementor .jpbc-site-header {
 position: fixed;
 inset: 0 0 auto;
 width: 100%;
 max-width: none;
 background: transparent !important;
 box-shadow: none;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header {
 background: rgba(255, 255, 255, 0.88) !important;
 box-shadow: 0 8px 30px rgba(31, 31, 31, 0.14);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}
body:has(.jpbc-site-header) .elementor .jpbc-site-header .softlite-dynamic-card-box-text-1,
body:has(.jpbc-site-header) .elementor .jpbc-site-header .sdyo5jbt,
body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-menu-item {
 color: #fff !important;
}
body:has(.jpbc-site-header) { --jpbc-toolbar-offset: 0px; }
body:has(.jpbc-site-header).admin-bar { --jpbc-toolbar-offset: 32px; }
body:has(.jpbc-site-header) .elementor .jpbc-site-header { top: var(--jpbc-toolbar-offset); }
@media (max-width: 782px) {
 body:has(.jpbc-site-header).admin-bar { --jpbc-toolbar-offset: 46px; }
}
@media (max-width: 1024px) {
 body:has(.jpbc-site-header) .elementor .jpbc-site-header { padding: 0 !important; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header > .e-con {
  width: 100% !important;
  padding: 16px 16px 16px 24px !important;
  margin: 0 !important;
  justify-content: space-between;
  gap: 8px;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .softlite-dynamic-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .softlite-dynamic-card-box { gap: 12px; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .softlite-dynamic-card-box-text-1 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .sdyo5jbt {
  margin-top: 3px;
  font-size: clamp(8px, 2.93vw, 11px);
  letter-spacing: 0.2em;
  white-space: nowrap;
 }
 /* The imported wrapper hid the toggle along with the desktop links. */
 body:has(.jpbc-site-header) .elementor .jpbc-site-header [data-id="46714412"] {
  display: flex;
  width: auto;
  margin-left: auto;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header [data-id="6ec0132b"] { display: none; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu__toggle {
  margin: 0;
  padding: 8px;
  color: #fff;
  background: transparent;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-dropdown .hfe-menu-item { color: #1f1f1f !important; }
}

body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header .softlite-dynamic-card-box-text-1,
body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header .sdyo5jbt,
body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header .hfe-menu-item {
 color: #1f1f1f !important;
}
@media (max-width: 1024px) {
 body:has(.jpbc-site-header) .elementor .jpbc-site-header {
  top: var(--jpbc-toolbar-offset) !important;
  margin: 0 !important;
  transform: none !important;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header > .e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 68px;
  min-height: 68px;
  padding: 12px 20px !important;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header [data-id="57bf7d15"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header [data-id="46714412"],
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .elementor-widget-navigation-menu {
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 0;
  padding: 0;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  color: white;
 }
 body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header .hfe-nav-menu__toggle { color: #1f1f1f; }
 /* Draw the reference's three strokes and plain X, independent of HFE icons. */
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu-icon {
  position: relative;
  width: 18px;
  height: 16px;
  border-block: 2px solid currentColor;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu-icon svg { display: none; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu-icon::before,
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-nav-menu-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-active-menu .hfe-nav-menu-icon { border-color: transparent; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-active-menu .hfe-nav-menu-icon::before { transform: rotate(45deg); }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header .hfe-active-menu .hfe-nav-menu-icon::after { transform: rotate(-45deg); }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header nav.hfe-dropdown {
  flex-direction: column;
  align-items: stretch;
  position: fixed !important;
  top: calc(68px + var(--jpbc-toolbar-offset)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: calc(100dvh - 68px - var(--jpbc-toolbar-offset));
  overflow-y: auto;
  background: #fff;
  padding: 12px 20px 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header nav.hfe-dropdown > ul { width: 100%; }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header nav.hfe-dropdown li.menu-item {
  border: 0 !important;
  border-bottom: 1px solid #e2e2e2 !important;
 }
 body:has(.jpbc-site-header) .elementor .jpbc-site-header nav.hfe-dropdown a.hfe-menu-item {
  min-height: 49px;
  padding: 12px 0 !important;
  color: #1f1f1f !important;
  background: #fff;
  font-family: var(--jpbc-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
 }
 body:has(.jpbc-site-header) .jpbc-dropdown-actions { display: flex; gap: 12px; margin-top: 16px; }
 body:has(.jpbc-site-header) .jpbc-dropdown-actions a {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px;
  border: 2px solid #1f1f1f;
  border-radius: 999px;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
 }
 body:has(.jpbc-site-header) .jpbc-dropdown-actions a:last-child { color: #fff; background: #ee4ca2; border-color: #ee4ca2; }
}
@media (min-width: 1025px) { .jpbc-dropdown-actions { display: none; } }

/* Desktop ticket action follows the header's transparent/scrolled states. */
@media (min-width: 1025px) {
 body:has(.jpbc-site-header) .elementor .jpbc-site-header [data-id="27e1eabd"] .elementor-button {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
  transition: color 250ms ease, border-color 250ms ease;
 }
 body:has(.jpbc-site-header).jpbc-header-scrolled .elementor .jpbc-site-header [data-id="27e1eabd"] .elementor-button {
  color: #000;
  border-color: #000;
 }
}

/* Compact desktop navigation keeps the larger labels on a single row. */
@media (min-width: 1025px) {
 body .elementor .jpbc-site-header .hfe-nav-menu > .menu-item > .hfe-menu-item {
  font-size: 14px;
  padding-inline: clamp(9px, calc(9px + (100vw - 1100px) * 0.01), 12px) !important;
  white-space: nowrap;
 }
 body .elementor .jpbc-site-header nav > ul.hfe-nav-menu {
  flex-wrap: nowrap;
 }
}