/*
Theme Name: Fronts
Theme URI: https://example.com/
Author: Digital Blocks
Author URI: https://digitalblocks.example
Description: Bespoke block theme for the Fronts directory of custom fronts for IKEA kitchens. Built from the Digital Blocks starter; theme.json is the design system.
Version: 0.1.0
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fronts-theme
*/

/*
 * Justified overrides only (theme CLAUDE.md). Each rule says why theme.json couldn't do it.
 */

/*
 * Footer sits flush against whatever comes before it. WordPress spaces the top-level template
 * parts with the root block gap, which shows as a paper strip whenever the last section has its
 * own background (home page bands, the directory's related band). Every template's main area
 * carries its own bottom spacing, so the gap isn't needed; theme.json can't remove it for one part.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Header: sticky (no theme.json position for template-part wrappers). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Logo and title together: hide the title once a logo renders (the logo's alt is the name). */
.fronts-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/*
 * Zero-JS mobile menu (factory STARTER-UPSTREAM fix): inline Navigation on desktop, the same
 * menu in a native <details> under the tablet breakpoint. theme.json can't target <summary>
 * or swap visibility by viewport for a block.
 */
.fronts-nav-mobile {
	display: none;
}

.fronts-nav-mobile > summary {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	cursor: pointer;
	list-style: none;
}

.fronts-nav-mobile > summary::-webkit-details-marker {
	display: none;
}

.fronts-nav-mobile > summary::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / 22px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.fronts-nav-mobile[open] > summary::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.fronts-nav-mobile[open] > .wp-block-navigation {
	position: absolute;
	inset: 100% 0 auto 0;
	z-index: 50;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right, 1rem) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--large);
}

/* The FAQ border style must not leak into the mobile menu (STARTER-UPSTREAM). */
.wp-block-details.fronts-nav-mobile {
	border: 0;
	padding: 0;
}

@media (max-width: 781px) {
	.fronts-nav-desktop {
		display: none !important;
	}

	.fronts-nav-mobile {
		display: block;
	}

	.fronts-site-header .wp-block-group.alignwide {
		position: relative;
	}
}

/* Hero eyebrow and step numbers: letter-spacing/uppercase and tabular figures aren't presets. */
.fronts-eyebrow {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.fronts-step__n {
	font-family: var(--wp--preset--font-family--display);
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Long-form guides: serif reading text at a comfortable measure (no per-block font for children). */
.fronts-prose > p,
.fronts-prose > ul,
.fronts-prose > ol {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	line-height: 1.65;
	max-width: var(--wp--custom--measure);
}

/* Outline buttons on light grounds. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

/* FAQ summary weight: theme.json has no element for <summary>. */
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

/* Disclaimer readable on forest. */
.fronts-disclaimer {
	max-width: 80ch;
	opacity: 0.9;
}

/*
 * Full-width photo hero (home-hero pattern). On a phone the text spans the whole photo, so the
 * left-to-right scrim becomes an even one; theme.json can't change one cover's overlay by viewport.
 * Over the photo the eyebrow takes the light wood tone, the main button turns paper-light and the
 * outline button white (graphite on a dark scrim doesn't read).
 */
.fronts-hero .fronts-eyebrow {
	color: var(--wp--preset--color--wood);
}

.fronts-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.fronts-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
}

.fronts-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgb(255 255 255 / 0.7);
	color: var(--wp--preset--color--white);
	backdrop-filter: blur(6px);
}

.fronts-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.fronts-hero :is(h1, p) {
	text-shadow: 0 1px 14px rgb(0 0 0 / 0.3);
}

/* The "illustration" note sits small in the hero's bottom corner, out of the reading line. */
.fronts-hero .fronts-hero__credit {
	position: absolute;
	right: var(--wp--style--root--padding-right, 1.5rem);
	bottom: var(--wp--preset--spacing--40);
	margin: 0;
	opacity: 0.75;
	text-shadow: none;
}

@media (max-width: 782px) {
	.fronts-hero .wp-block-cover__background {
		background: rgb(28 28 26 / 0.66);
	}

	.fronts-hero .fronts-hero__credit {
		position: static;
		margin-top: var(--wp--preset--spacing--50);
	}
}

/*
 * Header on scroll, every page: a soft shadow arrives over the first 120px. Home page with the
 * photo hero first: the header sits over the photo, transparent with light text and a paper
 * button, and eases to the solid paper header over the first 160px. Zero JS: CSS scroll-driven
 * animations on registered custom properties. Browsers without scroll timelines skip it all and
 * keep the plain sticky header. The header group's background and border come from preset
 * classes and inline styles, hence two !important declarations.
 */
@property --fronts-header-ink {
	syntax: "<color>";
	inherits: true;
	initial-value: #1c1c1a;
}

@property --fronts-header-bg {
	syntax: "<color>";
	inherits: true;
	initial-value: #f7f4ee;
}

@property --fronts-header-line {
	syntax: "<color>";
	inherits: true;
	initial-value: #cfc7ba;
}

@property --fronts-header-cta-bg {
	syntax: "<color>";
	inherits: true;
	initial-value: #1c1c1a;
}

@property --fronts-header-cta-ink {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --fronts-header-shadow {
	syntax: "<color>";
	inherits: true;
	initial-value: rgb(28 28 26 / 0);
}

@keyframes fronts-header-lift {
	to {
		--fronts-header-shadow: rgb(28 28 26 / 0.08);
	}
}

@keyframes fronts-header-solid {
	from {
		--fronts-header-ink: #fff;
		--fronts-header-bg: rgb(247 244 238 / 0);
		--fronts-header-line: rgb(255 255 255 / 0.18);
		--fronts-header-cta-bg: var(--wp--preset--color--base);
		--fronts-header-cta-ink: var(--wp--preset--color--contrast);
		--fronts-header-shadow: rgb(28 28 26 / 0);
	}

	to {
		--fronts-header-ink: var(--wp--preset--color--contrast);
		--fronts-header-bg: var(--wp--preset--color--base);
		--fronts-header-line: var(--wp--preset--color--line);
		--fronts-header-cta-bg: var(--wp--preset--color--contrast);
		--fronts-header-cta-ink: var(--wp--preset--color--white);
		--fronts-header-shadow: rgb(28 28 26 / 0.08);
	}
}

@supports (animation-timeline: scroll()) {
	header.wp-block-template-part {
		animation: fronts-header-lift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	.fronts-site-header {
		box-shadow: 0 10px 30px -12px var(--fronts-header-shadow);
	}

	.home:has(.entry-content > .fronts-hero:first-child) header.wp-block-template-part {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		left: 0;
		animation-name: fronts-header-solid;
		animation-range: 0 160px;
	}

	.home:has(.entry-content > .fronts-hero:first-child) .fronts-site-header {
		background-color: var(--fronts-header-bg) !important;
		border-bottom-color: var(--fronts-header-line) !important;
		color: var(--fronts-header-ink);
	}

	.home:has(.entry-content > .fronts-hero:first-child) .fronts-site-header :is(.wp-block-site-title a, .fronts-nav-desktop a, .fronts-nav-mobile > summary) {
		color: var(--fronts-header-ink);
	}

	.home:has(.entry-content > .fronts-hero:first-child) .fronts-header-cta .wp-block-button__link {
		background: var(--fronts-header-cta-bg);
		color: var(--fronts-header-cta-ink);
	}

	.home:has(.entry-content > .fronts-hero:first-child) .fronts-nav-mobile > summary {
		border-color: var(--fronts-header-line);
	}

	/* An open mobile menu makes the header solid at once (the panel below it is paper). */
	.home:has(.entry-content > .fronts-hero:first-child) .fronts-site-header:has(.fronts-nav-mobile[open]) {
		--fronts-header-ink: var(--wp--preset--color--contrast);
		--fronts-header-bg: var(--wp--preset--color--base);
		--fronts-header-line: var(--wp--preset--color--line);
		--fronts-header-cta-bg: var(--wp--preset--color--contrast);
		--fronts-header-cta-ink: var(--wp--preset--color--white);
	}

	/* The hero's text clears the header, and a dark band keeps the menu legible on the photo. */
	.home .entry-content > .fronts-hero:first-child {
		padding-top: 5.5rem;
	}

	.home .entry-content > .fronts-hero:first-child::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		z-index: 1;
		height: 12rem;
		background: linear-gradient(rgb(28 28 26 / 0.55), rgb(28 28 26 / 0));
		pointer-events: none;
	}
}

/*
 * Micro-interactions. All the motion sits behind prefers-reduced-motion; the scroll reveals
 * also need view timelines and are skipped where unsupported (content then simply shows).
 * theme.json has transitions and keyframes for none of this.
 */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Door style cards: the whole card is the link; it lifts, the drawing eases and an arrow slides in. */
.fronts-style-card {
	position: relative;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.fronts-style-card h3 a {
	text-decoration: none;
}

.fronts-style-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.fronts-style-card__art img {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fronts-style-card__cta {
	margin-top: auto;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fronts-style-card__cta::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fronts-style-card:hover,
.fronts-style-card:focus-within {
	border-color: var(--wp--preset--color--contrast) !important;
	box-shadow: 0 18px 40px -22px rgb(28 28 26 / 0.35);
}

.fronts-style-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.fronts-style-card h3 a:focus-visible {
	outline: none;
}

/* Looks gallery and section photos: a slow, slight zoom on hover inside a fixed frame. */
.fronts-looks .wp-block-image,
.fronts-inside .wp-block-image {
	overflow: hidden;
	border-radius: 3px;
}

.fronts-looks .wp-block-image img,
.fronts-inside .wp-block-image img {
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fronts-looks figcaption a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.4s ease;
}

.fronts-looks .wp-block-image:hover figcaption a,
.fronts-looks figcaption a:focus-visible {
	background-size: 100% 1px;
}

/* The pantry photo stays in view while the text and drawer photo scroll past. */
@media (min-width: 783px) {
	.fronts-inside__media .wp-block-image {
		position: sticky;
		top: 7rem;
	}
}

/* The postal-code box sits white on the oat band. */
.fronts-find-band .fronts-find {
	background: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	.fronts-style-card:hover {
		transform: translateY(-4px);
	}

	.fronts-style-card:hover .fronts-style-card__art img {
		transform: scale(1.06);
	}

	.fronts-style-card:hover .fronts-style-card__cta::after {
		transform: translateX(4px);
	}

	.fronts-looks .wp-block-image:hover img,
	.fronts-inside .wp-block-image:hover img {
		transform: scale(1.035);
	}

	/* Hero: the photo settles from a slight zoom and the copy rises in, once, on load. */
	.fronts-hero .wp-block-cover__image-background {
		animation: fronts-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.fronts-hero .wp-block-cover__inner-container > .wp-block-group > * {
		animation: fronts-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.fronts-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.fronts-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.fronts-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(4) {
		animation-delay: 0.24s;
	}

	/* Sections reveal as they scroll into view. */
	@supports (animation-timeline: view()) {
		:is(.fronts-step, .fronts-style-card, .fronts-looks .wp-block-image, .fronts-inside .wp-block-column:not(.fronts-inside__media) > *, .fronts-find-band .wp-block-column, .fronts-guides .wp-block-post) {
			animation: fronts-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes fronts-settle {
	from {
		transform: scale(1.06);
	}

	to {
		transform: scale(1);
	}
}

@keyframes fronts-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Footer details theme.json can't express: the statement in the display serif, uppercase column
 * labels, plain link lists with an underline that draws in on hover, and a light button on forest.
 */
.fronts-footer__statement {
	max-width: 15em;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 350;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.fronts-footer__label {
	color: var(--wp--preset--color--sage-light);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

.fronts-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fronts-footer__links li + li {
	margin-top: 0.45rem;
}

.fronts-site-footer .fronts-footer__links a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.fronts-site-footer .fronts-footer__links a:hover,
.fronts-site-footer .fronts-footer__links a:focus-visible {
	background-size: 100% 1px;
}

.fronts-footer__button .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.fronts-footer__button .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.fronts-site-footer .fronts-disclaimer {
	opacity: 0.8;
}

/* Glossary: jump links as a quiet row, terms with a hairline between them. */
.fronts-glossary__jump {
	font-size: var(--wp--preset--font-size--small);
}

.fronts-glossary h2 {
	margin-top: var(--wp--preset--spacing--70);
	scroll-margin-top: 7rem;
}

.fronts-glossary h3 {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
	scroll-margin-top: 7rem;
}

.fronts-glossary h3 + p {
	margin-top: var(--wp--preset--spacing--20);
}

/* Guide cards: image zoom and title underline on hover. */
.fronts-guides .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 3px;
}

.fronts-guides .wp-block-post-featured-image img {
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fronts-guides .wp-block-post-title a {
	text-decoration: none;
}

.fronts-guides .wp-block-post:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
	.fronts-guides .wp-block-post:hover .wp-block-post-featured-image img {
		transform: scale(1.04);
	}
}

/*
 * Maker plans (mock-up): plan names as small capitals, prices in the display serif, ticked lists,
 * the recommended plan outlined in graphite with a lift, and buttons held at the card's foot.
 */
.fronts-plan__name {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.fronts-plan__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 350;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.fronts-plan__list {
	padding-left: 0;
	list-style: none;
}

.fronts-plan__list li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.fronts-plan__list li::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 0;
	width: 0.95rem;
	height: 0.95rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fronts-plan__cta {
	margin-top: auto !important;
}

.fronts-plan.is-recommended {
	border-color: var(--wp--preset--color--contrast) !important;
	box-shadow: 0 24px 50px -30px rgb(28 28 26 / 0.45);
}

.fronts-plan:not(.is-recommended) .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

.fronts-plan:not(.is-recommended) .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.fronts-plans .wp-block-group.alignwide:has(> .fronts-plan) {
	align-items: stretch;
}

/* Full-width sections sit flush: each has its own padding, and the 16px gap between them showed as
   a paper strip above tinted bands (under the home hero, for one). */
.entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Quote requests closed: the header button is "Find makers", so the desktop menu's own link hides. */
.fronts-site-header--find .fronts-nav-desktop .wp-block-navigation-item:has(> a[href$="/makers/"]) {
	display: none;
}