/**
 * Pantocrator Vision
 * Frontend Header
 *
 * @package PantocratorVision
 * @version 1.1.0
 *
 * Responsive contract:
 * - Desktop: Elegant Soul
 * - Tablet: Elegant Soul preserved
 * - Mobile: fixed compact header, straight gold separator,
 *   stronger center glow, content scrolling underneath
 */

/* ==========================================================
   1. HEADER ROOT
   ========================================================== */

.pantocrator-vision-header {
	position: relative;
	z-index: 1000;
	width: 100%;
	margin: 0;
	padding: 0;
	background:
		linear-gradient(
			180deg,
			rgba(8, 20, 38, 0.98) 0%,
			rgba(10, 25, 47, 0.96) 100%
		);
	color: #ffffff;
}


/* ==========================================================
   2. TOP BAR
   Optional Header level.
   If it is not rendered by PHP, it occupies no space.
   ========================================================== */

.pantocrator-vision-header-top-bar {
	position: relative;
	z-index: 3;
	width: 100%;
	min-height: 34px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.16);
	background: rgba(4, 14, 28, 0.42);
}

.pantocrator-vision-header-top-bar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 40px, 1440px);
	min-height: 34px;
	margin-inline: auto;
	gap: 20px;
}


/* ==========================================================
   3. MAIN HEADER
   Permanent Header level.
   ========================================================== */

.pantocrator-vision-header-main {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 92px;
	background: transparent;
}

.pantocrator-vision-header-container {
	display: flex;
	align-items: center;
	width: min(100% - 48px, 1440px);
	min-height: 92px;
	margin-inline: auto;
	gap: 28px;
}


/* ==========================================================
   4. IDENTITY
   ========================================================== */

.pantocrator-vision-header .pantocrator-vision-identity {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	gap: 14px;
}

.pantocrator-vision-header .pantocrator-vision-logo,
.pantocrator-vision-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.pantocrator-vision-header .custom-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 68px;
}

.pantocrator-vision-header .pantocrator-vision-site-name {
	margin: 0;
	color: #d4af37;
	font-size: clamp(1.1rem, 1.4vw, 1.55rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-decoration: none;
}


/* ==========================================================
   5. SLOGAN
   ========================================================== */

.pantocrator-vision-header .pantocrator-vision-slogan {
	min-width: 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(0.76rem, 0.9vw, 0.95rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
}




/* ==========================================================
   6. MAIN NAVIGATION

   Desktop / Tablet:
   - Primary menu lives between Identity/Slogan and future actions.
   - Elegant Soul uses restrained gold accents.
   - Submenus remain keyboard-accessible through :focus-within.

   Mobile:
   - Primary navigation is hidden in the compact Header.
   - It will be exposed by the dedicated Hamburger component
     in the next development stage.
   ========================================================== */

.pantocrator-vision-header .pantocrator-vision-header-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	margin-left: auto;
}

.pantocrator-vision-header .pantocrator-vision-header-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: clamp(16px, 1.8vw, 30px);
	list-style: none;
}

.pantocrator-vision-header .pantocrator-vision-header-menu > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pantocrator-vision-header .pantocrator-vision-header-menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(0.82rem, 0.9vw, 0.96rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition:
		color 180ms ease,
		text-shadow 180ms ease;
}

.pantocrator-vision-header .pantocrator-vision-header-menu > li > a::after {
	position: absolute;
	right: 50%;
	bottom: 3px;
	left: 50%;
	height: 1px;
	background: #d4af37;
	box-shadow: 0 0 7px rgba(212, 175, 55, 0.32);
	content: "";
	opacity: 0;
	transition:
		right 180ms ease,
		left 180ms ease,
		opacity 180ms ease;
}

.pantocrator-vision-header .pantocrator-vision-header-menu a:hover,
.pantocrator-vision-header .pantocrator-vision-header-menu a:focus-visible,
.pantocrator-vision-header .pantocrator-vision-header-menu .current-menu-item > a,
.pantocrator-vision-header .pantocrator-vision-header-menu .current-menu-ancestor > a {
	color: #e4c45c;
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.16);
}

.pantocrator-vision-header .pantocrator-vision-header-menu > li > a:hover::after,
.pantocrator-vision-header .pantocrator-vision-header-menu > li > a:focus-visible::after,
.pantocrator-vision-header .pantocrator-vision-header-menu > .current-menu-item > a::after,
.pantocrator-vision-header .pantocrator-vision-header-menu > .current-menu-ancestor > a::after {
	right: 0;
	left: 0;
	opacity: 1;
}

.pantocrator-vision-header .pantocrator-vision-header-menu a:focus-visible {
	outline: 1px solid rgba(228, 196, 92, 0.72);
	outline-offset: 4px;
}

/*
 * Level 2 submenu.
 * Hidden visually until hover/focus enters its parent item.
 */
.pantocrator-vision-header .pantocrator-vision-header-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 20;
	display: block;
	min-width: 210px;
	margin: 0;
	padding: 9px;
	border: 1px solid rgba(212, 175, 55, 0.18);
	border-radius: 10px;
	background: rgba(6, 17, 33, 0.98);
	box-shadow:
		0 16px 36px rgba(0, 0, 0, 0.28),
		0 0 18px rgba(212, 175, 55, 0.06);
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.pantocrator-vision-header .pantocrator-vision-header-menu .sub-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pantocrator-vision-header .pantocrator-vision-header-menu .sub-menu a {
	display: flex;
	width: 100%;
	min-height: 36px;
	padding: 8px 10px;
	border-radius: 6px;
	white-space: nowrap;
}

.pantocrator-vision-header .pantocrator-vision-header-menu .sub-menu a:hover,
.pantocrator-vision-header .pantocrator-vision-header-menu .sub-menu a:focus-visible {
	background: rgba(212, 175, 55, 0.08);
}

.pantocrator-vision-header .pantocrator-vision-header-menu li:hover > .sub-menu,
.pantocrator-vision-header .pantocrator-vision-header-menu li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}


/* ==========================================================
   7. ELEGANT SOUL — DESKTOP SEPARATOR

   Frontend vector geometry is drawn with CSS only at this
   stage. The Builder's inline SVG remains independent.

   This separator follows the visual language of Elegant Soul
   without coupling frontend rendering to Administrator CSS.
   ========================================================== */

.pantocrator-vision-header-main::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 5;
	display: block;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.10) 0%,
			rgba(212, 175, 55, 0.55) 18%,
			rgba(240, 203, 91, 0.92) 50%,
			rgba(212, 175, 55, 0.55) 82%,
			rgba(212, 175, 55, 0.10) 100%
		);
	box-shadow:
		0 0 8px rgba(212, 175, 55, 0.20);
	content: "";
	pointer-events: none;
}


/* ==========================================================
   8. TABLET
   Elegant Soul remains visually intact.
   ========================================================== */

@media (min-width: 783px) and (max-width: 1100px) {

	.pantocrator-vision-header-top-bar-container {
		width: min(100% - 32px, 1000px);
	}

	.pantocrator-vision-header-container {
		width: min(100% - 32px, 1000px);
		min-height: 84px;
		gap: 20px;
	}

	.pantocrator-vision-header-main {
		min-height: 84px;
	}

	.pantocrator-vision-header .custom-logo {
		max-height: 60px;
	}

	.pantocrator-vision-header .pantocrator-vision-site-name {
		font-size: clamp(1rem, 2vw, 1.35rem);
	}

	.pantocrator-vision-header .pantocrator-vision-slogan {
		font-size: clamp(0.72rem, 1.4vw, 0.88rem);
	}

	.pantocrator-vision-header .pantocrator-vision-header-menu {
		gap: 14px;
	}

	.pantocrator-vision-header .pantocrator-vision-header-menu a {
		font-size: 0.82rem;
	}

}


/* ==========================================================
   9. MOBILE — APPROVED VISUAL CONTRACT

   - Header stays fixed.
   - Page scrolls underneath.
   - Top Bar disappears from the compact mobile presentation.
   - Main Header becomes compact.
   - Elegant Soul curve is replaced by a thin straight line.
   - Gold glow is stronger around the center.
   ========================================================== */

@media (max-width: 782px) {

	.pantocrator-vision-header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		background:
			linear-gradient(
				180deg,
				rgba(6, 17, 33, 0.97) 0%,
				rgba(8, 22, 42, 0.94) 100%
			);
		box-shadow:
			0 8px 28px rgba(0, 0, 0, 0.16);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	/*
	 * Mobile compact mode.
	 * Top Bar configuration remains untouched in PHP.
	 * It is hidden only in the mobile visual presentation.
	 */
	.pantocrator-vision-header-top-bar {
		display: none;
	}

	.pantocrator-vision-header-main {
		position: relative;
		min-height: 68px;
		background: transparent;
	}

	.pantocrator-vision-header-container {
		display: flex;
		align-items: center;
		width: calc(100% - 28px);
		min-height: 68px;
		margin-inline: auto;
		padding: 7px 0;
		gap: 10px;
	}

	.pantocrator-vision-header .pantocrator-vision-identity {
		flex: 1 1 auto;
		min-width: 0;
		gap: 9px;
	}

	.pantocrator-vision-header .pantocrator-vision-logo,
	.pantocrator-vision-header .custom-logo-link {
		flex: 0 0 auto;
	}

	.pantocrator-vision-header .custom-logo {
		width: auto;
		max-width: 52px;
		max-height: 52px;
		object-fit: contain;
	}

	.pantocrator-vision-header .pantocrator-vision-site-name {
		overflow: hidden;
		max-width: 180px;
		color: #e0bd4d;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pantocrator-vision-header .pantocrator-vision-slogan {
		display: none;
	}

	/*
	 * Desktop Navigation is intentionally hidden in compact mobile mode.
	 * The next Header component will expose navigation through Hamburger.
	 */
	.pantocrator-vision-header .pantocrator-vision-header-navigation {
		display: none;
	}

	/*
	 * Elegant Soul Mobile Separator.
	 *
	 * Thin at the sides, brighter toward the center.
	 */
	.pantocrator-vision-header-main::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 6;
		display: block;
		width: 100%;
		height: 1px;
		background:
			linear-gradient(
				90deg,
				rgba(212, 175, 55, 0.12) 0%,
				rgba(212, 175, 55, 0.42) 24%,
				rgba(245, 207, 94, 0.98) 50%,
				rgba(212, 175, 55, 0.42) 76%,
				rgba(212, 175, 55, 0.12) 100%
			);
		box-shadow:
			0 0 5px rgba(212, 175, 55, 0.34),
			0 0 12px rgba(212, 175, 55, 0.20);
		content: "";
		pointer-events: none;
	}

	/*
	 * Controlled center glow.
	 * Separate from the 1px separator so the line itself
	 * remains visually thin.
	 */
	.pantocrator-vision-header-main::before {
		position: absolute;
		bottom: -1px;
		left: 50%;
		z-index: 5;
		width: min(34vw, 150px);
		height: 5px;
		background:
			radial-gradient(
				ellipse at center,
				rgba(242, 202, 80, 0.50) 0%,
				rgba(212, 175, 55, 0.18) 42%,
				rgba(212, 175, 55, 0) 74%
			);
		content: "";
		filter: blur(2px);
		pointer-events: none;
		transform: translateX(-50%);
	}

}


/* ==========================================================
   10. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

	.pantocrator-vision-header-main,
	.pantocrator-vision-header-container {
		min-height: 64px;
	}

	.pantocrator-vision-header-container {
		width: calc(100% - 22px);
		padding: 6px 0;
	}

	.pantocrator-vision-header .custom-logo {
		max-width: 48px;
		max-height: 48px;
	}

	.pantocrator-vision-header .pantocrator-vision-site-name {
		max-width: 150px;
		font-size: 0.94rem;
	}

}


/* ==========================================================
   11. WORDPRESS ADMIN BAR COMPATIBILITY
   Keeps the fixed mobile Header below the WP Admin Bar
   while an authenticated administrator is testing frontend.
   ========================================================== */

@media (max-width: 782px) {

	body.admin-bar .pantocrator-vision-header {
		top: 46px;
	}

}

@media (min-width: 783px) {

	body.admin-bar .pantocrator-vision-header {
		top: auto;
	}

}


/* ==========================================================
   12. ACCESSIBILITY / REDUCED TRANSPARENCY SUPPORT
   ========================================================== */

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

	.pantocrator-vision-header {
		background: #08162a;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

}