/**
 * Site Header Styles
 *
 * Covers: sticky positioning, backdrop-filter, nav link
 * opacity/hover, and donate button hover state.
 *
 * backdrop-filter and position:sticky cannot be set via
 * block attributes, so they live here.
 */

/* =========================================================
   Sticky header + frosted-glass backdrop
   ========================================================= */

.wp-block-group.pjcs-site-header {
	/* Layout */
	min-height: 62px;
	padding-left:  clamp( 1.5rem, 4vw, 3rem );
	padding-right: clamp( 1.5rem, 4vw, 3rem );

	/* Visual — moved out of block attrs so rgba values don't break block validation */
	background:    rgba( 255, 255, 255, 0.95 );
	border-bottom: 1px solid rgba( 39, 57, 101, 0.1 );

	/* Sticky + frosted glass */
	position: sticky;
	top: 0;
	z-index: 100;
	-webkit-backdrop-filter: blur( 6px );
	        backdrop-filter: blur( 6px );
}

/*
 * When the mobile menu is open the overlay needs to cover the full viewport.
 * Two problems fixed simultaneously:
 *
 * 1. Stacking context — the sticky header (z-index: 100) traps its children,
 *    so the overlay's z-index: 9999 can't beat elements outside the header.
 *    Fix: boost the header's own z-index to 99999.
 *
 * 2. Fixed-position containment — backdrop-filter on an ancestor makes it the
 *    containing block for position:fixed descendants (CSS spec §9.3).  That
 *    pins the overlay to the header's box (the top strip) instead of the
 *    full viewport, which is why it only appeared at the top.
 *    Fix: disable backdrop-filter on the header while the menu is open.
 *
 * :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+, FF 121+).
 */
.wp-block-group.pjcs-site-header:has( .wp-block-navigation__responsive-container.is-menu-open ) {
	z-index: 99999;
	-webkit-backdrop-filter: none;
	        backdrop-filter: none;
}

/* =========================================================
   Primary nav link styles
   ========================================================= */

/*
 * Apply navy-at-60% to all primary nav anchors.
 * The block's textColor:"navy" sets full-opacity navy via
 * .has-navy-color — we override with rgba here.
 */

/* Typography — moved out of block attrs (Navigation block ignores style.typography) */
.pjcs-primary-nav,
.pjcs-primary-nav .wp-block-navigation-item__content {
	font-family: var( --wp--preset--font-family--dm-sans, 'DM Sans', sans-serif );
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Gap between nav items — spacing comes from padding on the links themselves */
.pjcs-primary-nav .wp-block-navigation__container {
	gap: 4px;
}

/* Button-style links */
.pjcs-primary-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 2px;
	border: 1px solid transparent;        /* reserves space — no layout jump on hover */
	color: rgba( 39, 57, 101, 0.6 );      /* navy 60% */
	transition: color 0.15s ease,
	            background-color 0.15s ease,
	            border-color 0.15s ease;
}

.pjcs-primary-nav .wp-block-navigation-item__content:hover,
.pjcs-primary-nav .wp-block-navigation-item__content:focus {
	color: rgba( 39, 57, 101, 1 );                /* full navy */
	background-color: rgba( 39, 57, 101, 0.06 );  /* very subtle navy tint */
	border-color: rgba( 39, 57, 101, 0.14 );      /* ghost border appears */
	text-decoration: none;
}

/* Current/active page — filled state */
.pjcs-primary-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: rgba( 39, 57, 101, 1 );
	background-color: rgba( 39, 57, 101, 0.08 );
	border-color: rgba( 39, 57, 101, 0.16 );
}

/* =========================================================
   Donate button hover state
   ========================================================= */

/* Donate button base — padding + font moved out of block attrs */
.pjcs-donate-btn .wp-block-button__link {
	padding: 10px 20px;
	border-radius: 2px;
	font-family: var( --wp--preset--font-family--dm-sans, 'DM Sans', sans-serif );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pjcs-donate-btn .wp-block-button__link:hover,
.pjcs-donate-btn .wp-block-button__link:focus {
	filter: brightness( 0.88 );
	outline: none;
}

.pjcs-donate-btn .wp-block-button__link:focus-visible {
	outline: 2px solid #273965; /* navy focus ring */
	outline-offset: 2px;
}

/* =========================================================
   Mobile nav overlay — full-screen glass panel
   ========================================================= */

/*
 * Force the overlay to cover the full viewport regardless of
 * how the Navigation block calculates its own dimensions.
 * Glass effect: navy at 82% opacity + strong backdrop blur.
 */
.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;

	/* Frosted glass */
	background: rgba( 39, 57, 101, 0.82 ) !important;
	-webkit-backdrop-filter: blur( 24px ) saturate( 1.4 );
	        backdrop-filter: blur( 24px ) saturate( 1.4 );

	/* Stack above everything */
	z-index: 9999 !important;

	/* Centre nav items vertically + horizontally */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Nav item container — stacked, centred */
.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100%;
}

/* Nav links — large, white, centred */
.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	font-size: 22px !important;
	letter-spacing: 0.14em !important;
	padding: 14px 32px !important;
	color: rgba( 255, 255, 255, 0.85 ) !important;
	text-align: center;
	border-color: transparent !important;
	background: transparent !important;
	width: 100%;
	justify-content: center;
}

.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover,
.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus {
	color: #ffffff !important;
	background: rgba( 255, 255, 255, 0.10 ) !important;
	border-color: rgba( 255, 255, 255, 0.18 ) !important;
}

/* Thin red rule accent below each link on hover */
.pjcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
	width: 100%;
	max-width: 320px;
	text-align: center;
}

/* Close (×) button — top-right, white */
.pjcs-primary-nav .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 20px !important;
	right: 24px !important;
	color: rgba( 255, 255, 255, 0.75 ) !important;
	font-size: 28px !important;
	padding: 8px !important;
	background: transparent !important;
	border: none !important;
	z-index: 10000 !important;
}

.pjcs-primary-nav .wp-block-navigation__responsive-container-close:hover {
	color: #ffffff !important;
}

/* Hamburger icon — navy on light header */
.pjcs-primary-nav .wp-block-navigation__responsive-container-open {
	color: #273965 !important;
}