/*
Theme Name: Hero
Description: Block theme for Hero Hovenier & Klussenbedrijf.
Version: 0.4.3
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: hero
*/

/* Most styling lives in theme.json; this file covers what theme.json can't express. */

/* --- Hover animations ------------------------------------------------------------------
   Kept small and quick. Everything that moves sits in the no-preference block, so visitors
   who asked their device for less motion only get the colour changes. */

a,
.wp-element-button {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.hero-card:hover {
	box-shadow: 0 10px 24px rgb(22 53 36 / 0.12);
}
.wp-element-button:hover {
	box-shadow: 0 6px 14px rgb(22 53 36 / 0.18);
}
.wp-element-button:active {
	box-shadow: none;
}

/* Header menu: a lime line under the item. */
.hero-header .wp-block-navigation-item__label {
	padding-bottom: 3px;
	background: linear-gradient(var(--wp--preset--color--lime), var(--wp--preset--color--lime)) 0 100% / 0 2px no-repeat;
}
.hero-header .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.hero-header .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
	background-size: 100% 2px;
}

.hero-card .wp-block-post-featured-image {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	/* Text links: the underline drops a little. */
	a {
		text-underline-offset: 0.14em;
		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, text-underline-offset 0.2s ease;
	}
	a:hover {
		text-underline-offset: 0.32em;
	}

	/* Buttons and cards lift slightly. */
	.wp-element-button {
		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	}
	.wp-element-button:hover {
		transform: translateY(-1px);
	}
	.wp-element-button:active {
		transform: none;
	}
	.hero-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.hero-card:hover {
		transform: translateY(-2px);
	}

	/* Header menu: the line grows in from the left. */
	.hero-header .wp-block-navigation-item__label {
		transition: background-size 0.25s ease;
	}

	/* Project cards: the photo zooms in a touch. */
	.hero-card .wp-block-post-featured-image img {
		transition: transform 0.4s ease;
	}
	.hero-card:hover .wp-block-post-featured-image img {
		transform: scale(1.04);
	}
}

.hero-install-cta {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--leaf);
	background: var(--wp--preset--color--mist);
	border-radius: 6px;
}
.hero-install-cta a {
	font-weight: 600;
}

.hero-concept {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--forest-deep);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Header navigation sits on dark green: keep the submenu readable. */
.hero-header .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--ink);
}

.hero-header a {
	text-decoration: none;
}

/* Sections stack edge to edge; spacing comes from their own padding. */
.wp-site-blocks > main .wp-block-post-content > .alignfull,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Header CTA: a button on desktop, a menu item inside the mobile menu. */
.hero-nav-cta {
	display: none !important;
}
@media (max-width: 599px) {
	.hero-header-cta {
		display: none !important;
	}
	.hero-nav-cta {
		display: flex !important;
		font-weight: 700;
	}
}

/* --- Brand mark ------------------------------------------------------------------------ */

.hero-brand figure {
	margin: 0;
}
.hero-brand img {
	display: block;
	height: auto;
}
/* Fixed size: WordPress would otherwise scale a block-level size down fluidly on phones. */
.hero-brand__name {
	font-size: 1.45rem;
}
@media (max-width: 599px) {
	.hero-brand__mark img {
		width: 30px !important;
	}
	.hero-brand__name {
		font-size: 1.25rem;
	}
}

/* Homepage banner: project photo under a green overlay that fades to the right, so the text
   on the left stays readable. On narrow screens the text spans the full width, so the overlay
   is even there (!important because the block sets its gradient inline). */
@media (max-width: 781px) {
	.hero-banner > .wp-block-cover__background {
		background: rgba(22, 53, 36, 0.84) !important;
	}
}

/* Photo placeholders (Projecten): the mark until real photos arrive. */
.hero-photo-placeholder {
	position: relative;
}
.hero-photo-placeholder::after {
	content: "";
	position: absolute;
	inset: 22% 0;
	background: var(--wp--preset--color--lime);
	-webkit-mask: url(assets/images/hero-mark-mono.svg) center / contain no-repeat;
	mask: url(assets/images/hero-mark-mono.svg) center / contain no-repeat;
	opacity: 0.22;
}

/* Leaf bullets: lists in cards, the footer and product descriptions. */
.hero-card .wp-block-list,
.wp-site-blocks > footer .wp-block-list,
.woocommerce-Tabs-panel--description ul {
	list-style: none;
	padding-left: 0;
}
.hero-card .wp-block-list > li,
.wp-site-blocks > footer .wp-block-list > li,
.woocommerce-Tabs-panel--description ul > li {
	position: relative;
	padding-left: 1.5em;
}
.hero-card .wp-block-list > li::before,
.wp-site-blocks > footer .wp-block-list > li::before,
.woocommerce-Tabs-panel--description ul > li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.3em;
	width: 0.7em;
	height: 1.05em;
	background: var(--wp--preset--color--leaf);
	-webkit-mask: url(assets/images/hero-leaf.svg) center / contain no-repeat;
	mask: url(assets/images/hero-leaf.svg) center / contain no-repeat;
	transform: rotate(40deg);
}
.wp-site-blocks > footer .wp-block-list > li::before {
	background: var(--wp--preset--color--lime);
}
.hero-card > .hero-photo-placeholder,
.hero-card > .wp-block-image,
.hero-card > .wp-block-post-featured-image {
	align-self: stretch;
}

/* Project cards on the Projecten page: the whole title is the link, without underline. */
.hero-card .wp-block-post-title a {
	text-decoration: none;
}
.hero-card .wp-block-post-excerpt__more-link {
	font-weight: 700;
}
.hero-back a {
	text-decoration: none;
}

/* Project pages: text lines up with the title and the photos instead of sitting in a centred
   column (!important because the layout sets its auto margins that way). */
.hero-project .wp-block-post-content > :not(.alignwide):not(.alignfull) {
	margin-left: 0 !important;
}