/*
 * GCS Header & Navigation Styles
 * Goodrich Caroling — gcs.withavoicelikethis.com
 * Replicates ivory-heirloom-logo-block and ivory-heirloom-nav-block
 * from Goodrich Caroling Child (Powder-based) v1.8.20
 * Per Brand Guidelines v3.5 — March 2026
 */

/* ============================================================
   LOGO BLOCK — Ivory bookplate treatment
   ============================================================ */

.ivory-heirloom-logo-block {
	position: relative;
	background: var(--wp--preset--color--base);
	padding: 0.85rem 1rem 1.5rem;
	border-radius: 12px;
	box-shadow:
		inset 0 2px 8px rgba(42, 24, 16, 0.08),
		0 4px 16px rgba(42, 24, 16, 0.12);
	margin-bottom: 0.5rem;
}

/* Dimensional highlight — radial gradient at 30% 30% */
.ivory-heirloom-logo-block::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 30% 30%,
		rgba(255, 255, 255, 0.4) 0%,
		transparent 50%
	);
	border-radius: 12px;
	pointer-events: none;
}

/* Subtle edge darkening */
.ivory-heirloom-logo-block::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		transparent 0%,
		transparent 70%,
		rgba(42, 24, 16, 0.15) 100%
	);
	border-radius: 12px;
	pointer-events: none;
}

/* Logo image sizing */
.ivory-heirloom-logo-block .wp-block-site-logo img,
.ivory-heirloom-logo-block .custom-logo {
	width: auto !important;
	max-width: none !important;
	max-height: 160px !important;
	height: auto !important;
	object-fit: contain;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	filter: drop-shadow(0 2px 8px rgba(42, 24, 16, 0.12));
}

@media (max-width: 768px) {
	.ivory-heirloom-logo-block {
		padding: 1.5rem;
	}
	.ivory-heirloom-logo-block .wp-block-site-logo img,
	.ivory-heirloom-logo-block .custom-logo {
		max-height: 120px !important;
		max-width: 100% !important;
	}
}

/* ============================================================
   NAVIGATION BLOCK — Desktop only (min-width: 783px)
   ============================================================ */

@media (min-width: 783px) {

	.ivory-heirloom-nav-block {
		position: relative;
		background: var(--wp--preset--color--base);
		padding: 0.25rem 0;
		box-shadow: 0 2px 8px rgba(42, 24, 16, 0.06);
		border-bottom: 2px solid var(--wp--preset--color--border-base);
	}

	.ivory-heirloom-nav-block .wp-block-navigation {
		position: relative;
		z-index: 1;
		background: transparent !important;
		border: none !important;
	}

	/* Navigation links */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content {
		position: relative;
		padding: 0.75rem 1.5rem !important;
		font-family: 'IM Fell DW Pica', Georgia, serif !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--brand-alt) !important;
		text-decoration: none !important;
		transition: color 0.3s ease;
		min-height: 48px;
		min-width: 48px;
		display: inline-flex;
		align-items: center;
		background: transparent !important;
	}

	/* Royal Purple gradient underline on hover — via ::after */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content::after {
		content: '';
		position: absolute;
		bottom: 0.5rem;
		left: 1.5rem;
		right: 1.5rem;
		height: 1px;
		background: linear-gradient(
			to right,
			transparent,
			var(--wp--preset--color--brand-alt) 20%,
			var(--wp--preset--color--brand-alt) 80%,
			transparent
		);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.ivory-heirloom-nav-block .wp-block-navigation-item__content:hover::after {
		opacity: 0.6;
	}

	/* Hover color — Hunter Green */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--brand) !important;
	}

	/* Focus state — WCAG 2.4.7 compliant */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content:focus {
		outline: 3px solid var(--wp--preset--color--border-base);
		outline-offset: 4px;
	}

	/* Diamond separators — animated Victorian Gold */
	@keyframes sparkle {
		0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
		50%       { opacity: 1;   transform: scale(1.1) rotate(180deg); }
	}

	.ivory-heirloom-nav-block .wp-block-navigation-item:not(:last-child) {
		position: relative;
	}

	.ivory-heirloom-nav-block .wp-block-navigation-item:not(:last-child)::after {
		content: '\25C6';
		position: absolute;
		right: -0.5rem;
		top: 35%;
		transform: translateY(-50%);
		color: var(--wp--preset--color--border-base);
		font-size: 8px;
		opacity: 0.6;
		animation: sparkle 3s ease-in-out infinite;
		pointer-events: none;
	}

	/* Current page — Deep Purple with underline */
	.ivory-heirloom-nav-block .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
	.ivory-heirloom-nav-block .wp-block-navigation-item[aria-current="page"] .wp-block-navigation-item__content {
		color: var(--wp--preset--color--brand-alt) !important;
		font-weight: 600 !important;
	}

	.ivory-heirloom-nav-block .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
	.ivory-heirloom-nav-block .wp-block-navigation-item[aria-current="page"] .wp-block-navigation-item__content::after {
		opacity: 1;
		background: linear-gradient(
			to right,
			transparent,
			var(--wp--preset--color--brand-alt) 20%,
			var(--wp--preset--color--brand-alt) 80%,
			transparent
		);
	}

} /* end desktop media query */

/* ============================================================
   MOBILE NAVIGATION — hamburger pattern
   WordPress core breakpoint: 782px
   ============================================================ */

/* Mobile: hamburger visible, overlay hidden by default */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: flex !important;
}

.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

@media (max-width: 782px) {
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		display: flex !important;
	}
}

/* Desktop: hamburger hidden, horizontal nav visible */
@media (min-width: 783px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		pointer-events: auto !important;
	}
	.wp-block-navigation__responsive-container-content {
		display: flex !important;
	}
}

/* ============================================================
   LOGO CENTERING — v1.0.5
   The Site Logo block renders left-aligned by default within
   the constrained layout group. margin: auto on a flex child
   centers it correctly without fighting the block editor.
   CSS is the correct tool — this is a theme-level layout
   concern, not a per-block content decision.
   ============================================================ */

.ivory-heirloom-logo-block .wp-block-site-logo {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
}

.ivory-heirloom-logo-block .wp-block-site-logo a {
	display: flex;
	justify-content: center;
}