/*
Theme Name: Platen Landing
Theme URI: https://github.com/shemaiahCox/my-business
Author: Shemaiah Cox
Author URI: https://github.com/shemaiahCox
Description: Landing theme for Platen. Brand name is set with PLATEN_BRAND and the header string.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.43
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: platen
*/

/*
 * Front-end CSS. WordPress also needs the header above: that is how it
 * discovers Theme Name, Version, and that this folder is a theme.
 *
 * Layout classes used in patterns/parts (platen-hero, platen-card, …)
 * live here. theme.json only sets editor/global tokens (colours, fonts).
 */

:root {
	--platen-bg: #f4efe6;
	--platen-bg-deep: #ebe4d6;
	--platen-ink: #1b1916;
	--platen-muted: #5c564c;
	--platen-line: #d8cfc0;
	--platen-paper: #fffdf8;
	--platen-accent: #134e4a;
	--platen-accent-hover: #0f3d3a;
	--platen-accent-soft: #dce8e5;
	--platen-max: 68rem;
	--platen-narrow: 42rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	background: var(--platen-bg);
	color: var(--platen-ink);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.125rem;
	font-synthesis: none;
	line-height: 1.65;
	margin: 0;
}

a {
	color: var(--platen-accent);
}

a:hover {
	color: var(--platen-accent-hover);
}

.platen-skip {
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: 100;
	padding: 0.5rem 0.75rem;
	background: var(--platen-ink);
	color: var(--platen-paper);
	text-decoration: none;
}

.platen-skip:focus {
	top: 1rem;
}

/* Site chrome — classes used in parts/header.html and parts/footer.html */
.platen-header,
.platen-footer {
	padding: 1.25rem 1.5rem;
}

.platen-header__inner,
.platen-footer__inner,
.platen-wrap,
.platen-narrow {
	margin: 0 auto;
	max-width: var(--platen-max);
}

.platen-narrow {
	max-width: var(--platen-narrow);
}

.platen-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.platen-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.platen-mark {
	display: block;
	width: auto;
	height: 1.45rem;
	flex-shrink: 0;
}

.platen-mark__lower {
	fill: var(--platen-accent);
	fill-opacity: 0.82;
}

.platen-mark__upper {
	fill: color-mix(in srgb, var(--platen-accent) 32%, var(--platen-accent-soft));
	fill-opacity: 0.8;
}

.platen-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.95rem;
}

.platen-nav a {
	color: var(--platen-ink);
	text-decoration: none;
	white-space: nowrap;
}

.platen-nav a:hover {
	color: var(--platen-accent);
}

/* iPhone 16 is 393px wide. The five links need about 520px beside the wordmark, so on a phone they sit on their own row. */
@media (max-width: 40rem) {
	.platen-header__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.platen-nav {
		width: 100%;
		gap: 0.65rem 0.85rem;
	}
}

.platen-section {
	padding: 4.5rem 1.5rem;
}

.platen-section--alt {
	background: var(--platen-bg-deep);
}

.platen-kicker {
	margin: 0 0 0.75rem;
	color: var(--platen-accent);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.platen-hero h1,
.platen-section h2,
.platen-card h3 {
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

/* Homepage sections — class names match the HTML in /patterns */
.platen-hero {
	padding-top: 5.5rem;
	padding-bottom: 5.5rem;
}

.platen-hero h1 {
	margin: 0 0 1.25rem;
	max-width: 16ch;
	font-size: clamp(2.4rem, 6vw, 4.15rem);
}

/* Isometric stacks beside the hero copy. Hidden until the two-column layout. */
.platen-hero__copy {
	min-width: 0;
}

.platen-hero__art {
	display: none;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.platen-hero__plane {
	stroke-width: 1.35;
	stroke-linejoin: round;
}

.platen-hero__plane--accent {
	fill: var(--platen-accent);
	stroke: var(--platen-paper);
}

.platen-hero__plane--soft {
	fill: var(--platen-accent-soft);
	stroke: var(--platen-accent);
}

.platen-hero__plane--ink {
	fill: var(--platen-ink);
	stroke: var(--platen-accent-soft);
}

@media (min-width: 800px) {
	.platen-hero .platen-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
		align-items: center;
		column-gap: 2.5rem;
	}

	.platen-hero__art {
		display: block;
		justify-self: end;
		max-width: 28rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.platen-hero__plane {
		animation-name: platen-float;
		animation-duration: 7.5s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		transform-box: fill-box;
		transform-origin: center;
	}

	.platen-hero__plane:nth-child(2) {
		animation-duration: 8.6s;
		animation-delay: -2.2s;
	}

	.platen-hero__plane:nth-child(3) {
		animation-duration: 6.8s;
		animation-delay: -3.5s;
	}

	.platen-hero__plane:nth-child(4) {
		animation-duration: 9s;
		animation-delay: -1.3s;
	}
}

@keyframes platen-float {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-11px);
	}
}

.platen-lede {
	margin: 0 0 0.85rem;
	max-width: 38rem;
	color: var(--platen-muted);
	font-size: 1.25rem;
}

.platen-price {
	margin: 0 0 2rem;
	font-weight: 600;
}

.platen-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.25rem;
	align-items: center;
}

.platen-cards + .platen-actions {
	margin-top: 3rem;
}

@media (min-width: 800px) {
	.platen-cards + .platen-actions {
		margin-top: 2rem;
	}
}

.platen-actions .wp-block-button__link,
.platen-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--platen-accent);
	color: var(--platen-paper);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	height: auto;
	line-height: 1.2;
}

.platen-actions .wp-block-button__link:hover,
.platen-button:hover {
	background: var(--platen-accent-hover);
	color: var(--platen-paper);
}

/* .platen-button is also the block wrapper around the link. Paint the link only, or the ghost outline is drawn twice. */
.platen-actions .wp-block-button.platen-button,
.platen-actions .wp-block-button.platen-button:hover {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
}

.platen-actions .platen-button--ghost .wp-block-button__link {
	background: transparent;
	color: var(--platen-ink);
	border: 1px solid var(--platen-line);
	box-shadow: none;
	padding: calc(0.85rem - 1px) calc(1.2rem - 1px);
}

.platen-actions .platen-button--ghost .wp-block-button__link:hover {
	background: var(--platen-paper);
	color: var(--platen-ink);
}

.platen-reassure {
	margin: 1.15rem 0 0;
	max-width: 36rem;
	color: var(--platen-muted);
}

.platen-tips {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* Phone and single-column widths. Desktop keeps the larger section padding. */
@media (max-width: 799px) {
	.platen-main {
		margin-top: 0;
	}

	.platen-section {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.platen-hero {
		padding-top: 1.25rem;
	}

	.platen-tips {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

.platen-tips__card {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: var(--platen-paper);
	border: 1px solid var(--platen-line);
	border-radius: 1rem;
}

.platen-tips__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

.platen-tips__list li,
.platen-tips__list p {
	margin: 0;
	color: var(--platen-muted);
}

.platen-tips__controls {
	display: none;
}

.platen-tips.is-rotating .platen-tips__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.platen-tips.is-rotating .platen-tips__list li {
	transition: opacity 400ms ease;
}

.platen-tips.is-rotating .platen-tips__list li.is-fading {
	opacity: 0;
}

.platen-tips__button {
	padding: 0.45rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--platen-line);
	color: var(--platen-ink);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.platen-tips__button:hover {
	background: var(--platen-bg);
}

.platen-cards {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
	align-items: stretch;
}

/*
 * Block flow adds margin-top to every card after the first. In a grid that
 * margin sits inside the cell, so the first card in a row is taller than
 * the one beside it. The gap above already separates the rows.
 */
.wp-block-group.platen-cards > .platen-card,
.wp-block-group.platen-process > .platen-step {
	margin-block: 0;
	height: 100%;
}

@media (min-width: 800px) {
	.platen-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.platen-process {
		grid-template-columns: repeat(4, 1fr);
	}
}

.platen-card,
.platen-step {
	padding: 1.5rem;
	background: var(--platen-paper);
	border: 1px solid var(--platen-line);
	border-radius: 1rem;
}

.platen-card h3,
.platen-step h3 {
	margin: 0 0 0.65rem;
	font-size: 1.45rem;
}

.platen-card .platen-card__price {
	margin: 0 0 0.65rem;
	color: var(--platen-ink);
	font-weight: 600;
}

.platen-card p,
.platen-step p {
	margin: 0;
	color: var(--platen-muted);
}

.platen-card .platen-card__situation {
	margin-bottom: 0.85rem;
}

.platen-card ul {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--platen-muted);
}

.platen-card li + li {
	margin-top: 0.55rem;
}

.platen-follow {
	margin-top: 1.5rem;
	color: var(--platen-ink);
	font-size: 0.95rem;
}

.platen-follow p {
	margin: 0;
}

.platen-follow p + p {
	margin-top: 0.65rem;
}

.platen-follow__prefix,
.platen-follow strong {
	font-weight: 600;
}

.platen-faqs {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.platen-faqs > .wp-block-details {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var(--platen-paper);
	border: 1px solid var(--platen-line);
	border-radius: 1rem;
}

.platen-faqs summary {
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
	cursor: pointer;
}

.platen-faqs .wp-block-details[open] summary {
	margin-bottom: 1rem;
}

.platen-faqs .wp-block-details p {
	margin: 0;
	color: var(--platen-muted);
}

.platen-faqs .wp-block-details p + p {
	margin-top: 0.85rem;
}

.platen-faqs .wp-block-details strong {
	color: var(--platen-ink);
	font-weight: 600;
}

.platen-launch-line {
	margin: 2.5rem 0 0;
	max-width: 40rem;
	font-size: 1.125rem;
}

.platen-launch-line + .platen-launch-line {
	margin-top: 0.85rem;
}

.platen-card--lead {
	box-shadow: inset 4px 0 0 var(--platen-accent);
}

.platen-process {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
	align-items: stretch;
}

.platen-step span,
.platen-step__num {
	display: block;
	margin: 0 0 0.85rem;
	color: var(--platen-accent);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.platen-about {
	display: grid;
	gap: 2rem;
}

/* Same isometric stacks as the hero, under the about heading. Hidden until the two-column layout. */
.platen-about__art {
	display: none;
	width: 100%;
	height: auto;
	margin-top: 1.75rem;
	pointer-events: none;
}

@media (min-width: 800px) {
	.platen-about {
		grid-template-columns: 1fr 1.2fr;
		align-items: start;
	}

	.platen-about__art {
		display: block;
		max-width: 22rem;
	}
}

/* Contact form from [platen_contact] in functions.php */
.platen-form {
	display: grid;
	gap: 0.9rem;
	max-width: var(--platen-narrow);
	margin: 1.75rem auto 0;
}

.platen-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.platen-form .platen-form__note {
	margin: 0;
	font-weight: 400;
}

.platen-form__required {
	color: var(--platen-accent);
}

.platen-form input,
.platen-form select,
.platen-form textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--platen-line);
	border-radius: 0.6rem;
	background: var(--platen-paper);
	color: var(--platen-ink);
	font: inherit;
}

.platen-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.platen-form input::placeholder,
.platen-form textarea::placeholder {
	color: #a89f93;
	opacity: 1;
}

.platen-form__note,
.platen-notice {
	max-width: var(--platen-narrow);
	margin-left: auto;
	margin-right: auto;
	color: var(--platen-muted);
	font-size: 0.95rem;
}

.platen-notice--ok {
	padding: 0.9rem 1rem;
	border-radius: 0.7rem;
	background: var(--platen-accent-soft);
	color: var(--platen-accent);
}

.platen-notice--error {
	padding: 0.9rem 1rem;
	border-radius: 0.7rem;
	background: #f3d6d0;
	color: #7a2619;
}

.platen-footer {
	border-top: 1px solid var(--platen-line);
	color: var(--platen-muted);
	font-size: 0.95rem;
}

.platen-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.platen-footer__copy {
	flex: 1 1 16rem;
}

.platen-footer__copy p {
	margin: 0;
}

.platen-footer__aside {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.platen-footer__aside a {
	color: inherit;
	text-decoration: none;
}

.platen-footer__aside a:hover {
	color: var(--platen-accent);
}

.platen-footer__linkedin {
	display: inline-flex;
	flex-shrink: 0;
}

.platen-footer__linkedin-mark {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

@media (max-width: 40rem) {
	.platen-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.platen-footer__copy {
		flex: none;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}