/* Logo bookplate treatment, desktop navigation, mobile navigation
   hamburger and overlay, site logo centering, nav radius override. */

/* 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;
}

.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;
}

.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;
}

.ivory-heirloom-logo-block .wp-block-site-logo img,
.ivory-heirloom-logo-block .custom-logo {
	width: auto;
	max-width: none;
	max-height: 160px;
	height: auto;
	object-fit: contain;
	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;
		max-width: 100%;
	}
}

/* Navigation block, desktop only
--------------------------------------------- */

@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;
		border: none;
	}

	/* Color comes from the Navigation block's text color setting
	   !important: the global link rule outranks this selector, and Ollie
	   underlines the current item */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content {
		position: relative;
		padding: 0.75rem 1rem;
		font-family: 'IM Fell DW Pica', Georgia, serif;
		font-size: 1.125rem;
		font-weight: 400 !important;
		text-decoration: none !important;
		transition: color 0.3s ease;
		min-height: 48px;
		min-width: 48px;
		display: inline-flex;
		align-items: center;
		background: transparent;
	}

	/* Restores link padding, core zeroes it at higher specificity */
	.ivory-heirloom-nav-block .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
		padding-left: 1rem;
	}

	/* Chevron sits outside the button, clearance moves to the item */
	.ivory-heirloom-nav-block .wp-block-navigation-item.open-on-click {
		padding-right: 1rem;
	}

	.ivory-heirloom-nav-block .wp-block-navigation-item__content::after {
		content: '';
		position: absolute;
		bottom: 0.5rem;
		left: 1rem;
		right: 1rem;
		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;
	}

	/* Item class outranks core's color: inherit, loaded later for guests */
	.ivory-heirloom-nav-block .wp-block-navigation-item .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--brand);
	}

	/* Focus ring, WCAG 2.4.7, do not remove */
	.ivory-heirloom-nav-block .wp-block-navigation-item__content:focus {
		outline: var(--gcs-focus-width) var(--gcs-focus-style) var(--gcs-color-focus);
		outline-offset: var(--gcs-focus-offset);
	}

	/* 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;
	}

	.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);
		font-weight: 400;
	}

	.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 visible, overlay hidden by default. 782px is WordPress
   core's breakpoint, not a choice. */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: flex;
}

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

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

@media (min-width: 783px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
		visibility: visible;
		opacity: 1;
		position: relative;
		pointer-events: auto;
	}
}

/* Centered via margin auto on the flex child; rationale in Notion Standards */
.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;
}

/* Overrides Ollie's 5px/3px nav radius. Victorian standard is 2px. Scoped to
   the nav block because Ollie's inline block styles load after the LiteSpeed
   combined file on the guest path, so an unscoped tie loses on order. */
.ivory-heirloom-nav-block .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
.ivory-heirloom-nav-block .wp-block-navigation__responsive-container-close,
.ivory-heirloom-nav-block .wp-block-navigation__responsive-container-open {
	border-radius: 2px;
}

/* Native buttons show the arrow cursor; a trigger must read as clickable */
.open-contact-popup,
.open-contact-popup button {
	cursor: pointer;
}