/* Project-specific styles — compiled from SCSS or written directly */

/* ==========================================================================
   Header: light glass-bar override
   Parent SCSS forces dark overlay + white text + logo inversion on
   .site-header--transparent. The Parcel brand uses a colored logo on a
   light background, so we override those rules here.
   ========================================================================== */

.site-header--transparent {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Preserve original logo colors — parent inverts to white */
.site-header--transparent .wp-block-site-logo img {
	filter: none;
}

/* Dark text on light background — parent forces white */
.site-header--transparent .wp-block-navigation-item__content,
.site-header--transparent .wp-block-social-link a {
	color: var(--wp--preset--color--primary);
}

.site-header--transparent .wp-block-navigation-item__content:hover,
.site-header--transparent .wp-block-social-link a:hover {
	color: var(--wp--preset--color--accent);
}

/* Dark hamburger icon on light bar */
.site-header--transparent .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Mobile nav overlay — expand fixed header to full viewport when menu is open
   The overlay is a child of the fixed header, so the header must grow to
   full screen height to allow the menu items to be visible.
   ========================================================================== */

.site-header--transparent:has(
	.wp-block-navigation__responsive-container.is-menu-open
) {
	height: 100dvh;
	overflow-y: auto;
	border-radius: 0;
}

.site-header--transparent
	.wp-block-navigation__responsive-container.is-menu-open {
	height: 100dvh;
	overflow-y: auto;
}

/* ==========================================================================
   Clickable cards
   Heading link stretches over the entire card via ::after pseudo-element.
   ========================================================================== */

.clickable-card {
	position: relative;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	border-top: 3px solid transparent;
}

.clickable-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-top-color: var(--wp--preset--color--accent);
}

.clickable-card .features-grid__number,
.clickable-card h3,
.clickable-card h4 {
	transition: color 0.2s ease;
}

.clickable-card:hover .features-grid__number,
.clickable-card:hover h3,
.clickable-card:hover h4 {
	color: var(--wp--preset--color--accent);
}

.clickable-card .wp-block-heading a {
	text-decoration: none;
	color: inherit;
}

.clickable-card h3 a::after,
.clickable-card h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.clickable-card,
	.clickable-card .features-grid__number,
	.clickable-card h3,
	.clickable-card h4 {
		transition: none;
	}
	.clickable-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Mobile overrides (< 600px)
   ========================================================================== */

@media (max-width: 599px) {

	/* -- Header offset ---------------------------------------------------- */
	/* 0.5rem top + 1rem pad-top + 3rem logo + 1rem pad-bottom = 5.5rem.
	   Section padding below provides the remaining breathing room. */
	:root {
		--header-transparent-offset: 5.5rem;
	}

	/* -- Spacing scale compression ---------------------------------------- */
	/* Tighten the upper end of the spacing scale so every pattern using
	   lg / xl / 2xl tokens automatically gets compact mobile spacing
	   without per-selector overrides. */
	:root {
		--wp--preset--spacing--lg: 1.5rem;
		--wp--preset--spacing--xl: 2rem;
		--wp--preset--spacing--2-xl: 2.5rem;
	}

	/* -- Hero heading sizes ----------------------------------------------- */
	header:has(.site-header--transparent) + main > :first-child h1 {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	header:has(.site-header--transparent) + main > :first-child h2 {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	/* -- Content-centered block ------------------------------------------- */
	/* Thinner decorative side bars */
	.content-centered::before,
	.content-centered::after {
		width: 0.5rem;
		top: var(--wp--preset--spacing--md);
		bottom: var(--wp--preset--spacing--md);
	}

	.content-centered {
		padding: var(--wp--preset--spacing--md) !important;
	}

	/* Left-align text on small screens */
	.content-centered .has-text-align-center {
		text-align: left !important;
	}

	/* -- Features grid cards ---------------------------------------------- */
	/* Stacked columns lose their visual gap — WP core resets margin to 0 */
	.features-grid .clickable-card {
		margin-bottom: var(--wp--preset--spacing--sm) !important;
	}
}