/*
Theme Name: Paris Mountain Ride Works Landing
Description: One-page holding site for Paris Mountain Ride Works: services and pricing, with texting as the way to get in touch. No forms, plugins or scripts. Replaced by the full theme later.
Author: Icepop Studio
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pmrw-landing
*/

/* Everything theme.json can't express. Each rule is logged in docs/deviations.md (Landing). */

/* Logo lockup (full logo + tagline as real text), header and footer. One width drives the logo,
   the tagline size and, on phones, the header height the hero subtracts.
   --pmrw-tag-k: tagline font size as a fraction of the lockup width (measured so the tagline
   spans about 71–80% of the logo, as in the client's outlined artwork, Assets Figma 1:2). */
:root {
	--pmrw-tag-k: 0.026;
	--pmrw-head-w: 17rem;
	--pmrw-foot-w: min(80vw, 20rem);
}
.pmrw-lockup {
	--pmrw-lockup-w: var(--pmrw-head-w);
}
.pmrw-lockup-footer {
	--pmrw-lockup-w: var(--pmrw-foot-w);
}
.pmrw-lockup .pmrw-logo {
	margin: 0;
}
.pmrw-lockup .pmrw-logo img {
	display: block;
	width: var(--pmrw-lockup-w);
	height: auto;
}
.pmrw-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	/* 9px floor keeps it legible; at that floor it runs a little wider than the artwork. */
	font-size: max(0.5625rem, calc(var(--pmrw-lockup-w) * var(--pmrw-tag-k)));
	color: var(--wp--preset--color--base);
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Button sizes from docs/button-system.md (theme.json styles the Default size). */
.is-style-pmrw-compact .wp-block-button__link {
	font-size: 1.1875rem;
	border-width: 5px;
	padding: 0.5rem 0.875rem;
}
.is-style-pmrw-large .wp-block-button__link {
	/* Steps down to the 19px floor on phones so the number never wraps. */
	font-size: clamp(1.1875rem, 4.6vw, 1.5rem);
	white-space: nowrap;
	border-width: 7px;
	padding: 0.5625rem 1.375rem;
}

/* Amendments A9.5: the header Text button shows from 600px; below that the hero button is the CTA. */
@media (max-width: 599px) {
	.wp-block-buttons.pmrw-header-text {
		display: none;
	}
	/* Phones: the full logo lockup, centred and large. */
	:root {
		--pmrw-head-w: min(80vw, 22rem);
	}
	.pmrw-header {
		justify-content: center !important;
	}
	/* Band line: 16px so "...what your bike needs." fits one line and the break falls after it. */
	.pmrw-cta-line {
		font-size: 1rem;
	}
}

/* Focus ring is gold on purple and on the photo (brown would be 2.02:1 there). */
.has-contrast-background-color :focus-visible,
.wp-block-cover :focus-visible {
	outline-color: var(--wp--preset--color--accent-1);
}

/* Tier cards: price on its own line, cards stretch to equal height. */
.pmrw-tiers > .wp-block-column {
	display: flex;
}
.pmrw-tiers > .wp-block-column > .wp-block-group {
	flex: 1;
}

/* Decorative icons sit tight above their heading. */
.pmrw-icon {
	margin-bottom: 0;
}
.pmrw-icon img {
	width: 2.5rem;
	height: 2.5rem;
}

/* Lines that break only between whole phrases ("...SC area." | link; "...needs." | "We bring..."). */
.pmrw-keep {
	display: inline-block;
}
.pmrw-nowrap {
	white-space: nowrap;
}

/* Van-wrap social line: 24px icons, no figure margins inside the flex row. */
.pmrw-social .wp-block-image,
.pmrw-social p {
	margin: 0;
	line-height: 1.5rem;
}
.pmrw-social-icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* Photo credit: present but quiet. Neutral on purple is 9.2:1. */
.pmrw-credit,
.pmrw-credit a {
	font-size: 0.75rem;
	color: var(--wp--preset--color--neutral);
}

/* A13 van hero: the photo isn't darkened, so text gets a soft shadow for legibility. */
.pmrw-van-hero .wp-block-cover__inner-container p,
.pmrw-van-hero .wp-block-cover__inner-container a:not(.wp-element-button) {
	text-shadow: 0 1px 4px rgba(37, 25, 52, 0.7);
}
.pmrw-van-hero .pmrw-van-lettering img,
.pmrw-van-hero .pmrw-social-icon img {
	filter: drop-shadow(0 1px 4px rgba(37, 25, 52, 0.7));
}
/* The van's MOBILE / BICYCLE / SHOP lettering as the H1 (alt text carries the words). */
.pmrw-van-lettering img {
	display: block;
	width: clamp(15rem, 42vw, 28rem);
	height: auto;
}
/* A13 chevrons (Charlie's Figma revision): the left-facing van chevrons, in proportion, tip starting
   43% across on desktop at 70% opacity; on phones the tip starts near the left edge at 90%. */
.pmrw-van-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 43.4%;
	z-index: 1;
	background: url(assets/images/van-chevrons-left.svg) left top / auto 100% no-repeat;
	opacity: 0.7;
	pointer-events: none;
}
.pmrw-van-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* A9.5 / A13 phones: the hero fills the first screen under the header, lettering at the top,
   socials then the Text button bottom-centre (as in the Figma mobile hero). */
@media (max-width: 599px) {
	/* !important: the block's inline 85vh and core's content-position centring both outrank a class. */
	.wp-block-cover.pmrw-van-hero {
		/* Header height = padding (2 x 1rem) + logo (0.2482 x width) + gap (0.5rem) + tagline line. */
		min-height: calc(100svh - 2.5rem - var(--pmrw-head-w) * (0.2482 + var(--pmrw-tag-k) * 1.4)) !important;
		align-items: stretch !important;
	}
	.pmrw-van-hero::before {
		left: 6.4%;
		opacity: 0.9;
	}
	.pmrw-van-hero .wp-block-cover__inner-container,
	.pmrw-hero-stack {
		display: flex;
		flex-direction: column;
	}
	.pmrw-hero-stack {
		flex: 1;
		justify-content: space-between;
	}
	.pmrw-hero-actions {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}
	.pmrw-hero-actions > * {
		margin: 0;
	}
}

/* Short phones (e.g. 320×568): shrink the lettering and intro so the Text button stays in the first screen. */
@media (max-width: 599px) and (max-height: 700px) {
	.pmrw-van-lettering img {
		width: min(15rem, 34svh);
	}
	.pmrw-van-hero .pmrw-hero-top .has-large-font-size {
		font-size: 1.0625rem !important;
	}
}

/* Very narrow phones: if the first sentence must wrap, balance its two lines. */
.pmrw-cta-line .pmrw-keep {
	text-wrap: balance;
}