/*
Theme Name:   Lettering Child
Theme URI:    https://lettering.test/
Description:  Child theme for the Car Vinyl Lettering store. Presentation only — all builder and commerce logic lives in the car-vinyl-lettering plugin.
Author:       Milan
Version:      1.0.1
Requires PHP: 8.1
Template:     twentytwentyfive
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lettering-child
*/

/**
 * Deliberately small.
 *
 * Colour, type and spacing all live in theme.json, where the Site Editor can
 * reach them. What is left here is the handful of things theme.json has no
 * vocabulary for: focus rings, the block style variations registered in
 * functions.php, and a few commerce details.
 *
 * The visual language is borrowed wholesale from the builder's own vehicle
 * preview — dark glass with a single soft reflection, light bodywork with a
 * shut line — so the marketing pages and the designer read as one product.
 * Those values are duplicated from assets/src/components/VehiclePanel.tsx in
 * the plugin; if the panel is ever restyled, restyle these with it.
 */

/* -------------------------------------------------------------- visible focus */

/*
 * A keyboard user has to be able to see where they are. Two rings rather than
 * one, so the outline stays visible against both light panels and dark glass.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #c8102e);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--base, #fff);
}

/* On glass there is no white to halo against, so the halo goes dark. */
.is-style-glass :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--base, #fff);
	box-shadow: 0 0 0 4px var(--wp--preset--color--accent-3, #20252b);
}

/* ------------------------------------------------------------- the shut line */

/*
 * The gap between two body panels: a hairline shadow with the light catching
 * the edge below it. Used instead of a rule, because this site is about
 * bodywork and a plain grey line is about documents.
 */
.wp-block-separator.is-style-shut-line {
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--accent-5, #dfe3e8) 0 1px,
		rgb(255 255 255 / 75%) 1px 2px
	);
	border: 0;
	height: 2px;
	max-width: none;
	opacity: 1;
}

/* ----------------------------------------------------------------- surfaces */

/*
 * Dark glass. The gradient and the 4.5%-opacity reflection are the same values
 * the vehicle preview draws with, so a section and a rear window match.
 */
.wp-block-group.is-style-glass {
	background: linear-gradient(180deg, #3c434c 0%, #20252b 55%, #171b20 100%);
	color: var(--wp--preset--color--base, #fff);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/*
 * The reflection is feathered rather than hard-edged, and far weaker than the
 * 4.5% the vehicle preview uses. That figure is right for a panel a few hundred
 * pixels wide; stretched across a full-width section the same wedge reads as a
 * grey stripe rather than as light on glass.
 */
.wp-block-group.is-style-glass::before {
	background: linear-gradient(
		115deg,
		transparent 18%,
		rgb(255 255 255 / 2.2%) 34%,
		rgb(255 255 255 / 2.2%) 46%,
		transparent 62%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.wp-block-group.is-style-glass :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: inherit;
}

.wp-block-group.is-style-glass :is(p, li) {
	color: #c8ccd1;
}

/*
 * Links go light on glass rather than keeping the accent red.
 *
 * #c8102e on near-black measures about 2.9:1, which fails AA outright — the
 * accent is chosen to be read on white, and no amount of it being "the brand
 * colour" makes it legible here. The hover is a tint of the same red, which
 * clears 8:1 and still reads as the accent.
 */
.wp-block-group.is-style-glass a:where(:not(.wp-element-button)) {
	color: #ffffff;
	text-decoration-color: rgb(255 255 255 / 45%);
}

.wp-block-group.is-style-glass a:where(:not(.wp-element-button)):hover {
	color: #ff8a99;
	text-decoration-color: currentcolor;
}

/* Footer link lists are navigation, not prose, so they lose their markers. */
.wp-block-group.is-style-glass .wp-block-list {
	list-style: none;
	padding-left: 0;
}

.wp-block-group.is-style-glass .wp-block-list > li {
	margin-bottom: 0.4rem;
}

/* Bodywork: the light panel, closed off with a shut line along the bottom. */
.wp-block-group.is-style-panel {
	background: linear-gradient(180deg, #f7f8f9 0%, #eef0f3 100%);
	border-bottom: 1px solid var(--wp--preset--color--accent-5, #dfe3e8);
}

/* ------------------------------------------------------------- the tick rule */

/*
 * An inch rule. The whole argument of this shop is that it shows you the real
 * size, so a ruler is the one ornament that is actually about the product.
 */
.lettering-rule {
	background-image: repeating-linear-gradient(
		90deg,
		currentcolor 0 1px,
		transparent 1px 100%
	);
	background-size: 12px 100%;
	height: 10px;
	opacity: 0.35;
	width: 100%;
}

/* Every fourth tick runs full height, the way an inch mark does. */
.lettering-rule::after {
	background-image: repeating-linear-gradient(
		90deg,
		currentcolor 0 1px,
		transparent 1px 100%
	);
	background-size: 48px 100%;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
}

/* A list that reads as measured-off steps rather than bullets. */
.wp-block-list.is-style-ticks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-ticks > li {
	border-left: 2px solid var(--wp--preset--color--accent-1, #c8102e);
	margin-bottom: 0.75rem;
	padding-left: 1rem;
}

/* --------------------------------------------------------------- store bits */

.wp-block-button__link {
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.9rem 1.75rem;
}

/* The FAQ page reads as a list of questions, so make them look clickable. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--accent-5, #dfe3e8);
	padding: 0.5rem 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.5rem 0;
}

/* Long text is easier to read narrow; the builder needs the full width. */
.entry-content > * {
	overflow-wrap: break-word;
}

.cvl-builder-root {
	max-width: none;
}

/* ------------------------------------------------------------- commerce */

/*
 * The block cart and checkout draw their own thumbnail, and the design preview
 * is a tall thin strip rather than the square a product photo would be. Letting
 * it letterbox rather than crop keeps the whole piece of lettering visible.
 */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	background: var(--wp--preset--color--accent-2, #f4f5f7);
	border-radius: 4px;
	object-fit: contain;
}

.wc-block-components-product-name {
	font-weight: 700;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 600px) {
	.wp-block-button__link {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}