/*
Theme Name: Parapro
Template: twentytwentyfive
Author: interactivesites
Description: Custom block theme for Parapro paragliding & paramotoring school. Child of Twenty Twenty-Five.
Version: 1.3.3
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: parapro
*/

/* ------------------------------------------------------------------
   Supplementary CSS. The design system itself (colors, type, spacing,
   buttons) lives in theme.json — this file only covers things that
   theme.json can't express: sticky header behaviour, the logo swap
   between light/dark variants, and small nav polish.
   ------------------------------------------------------------------ */

/* Dark site header with a brand teal accent line across the very top. */
.site-header-parapro {
	background-color: #111517;
	border-top: 4px solid #24b8cf;
}

/* Stick the header. The sticky element must be the template-part WRAPPER
   (a direct child of the full-height .wp-site-blocks) — the inner header's
   own parent is only header-tall, so sticking it there scrolls away. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Logo sizing inside the header */
.site-header-parapro .wp-block-site-logo img {
	width: 150px;
	height: auto;
}

/* Navigation: white links, teal on hover/active, inside the dark header */
.site-header-parapro .wp-block-navigation {
	--wp--custom--nav-link-color: #ffffff;
}

.site-header-parapro .wp-block-navigation a.wp-block-navigation-item__content {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
}

.site-header-parapro .wp-block-navigation a.wp-block-navigation-item__content:hover,
.site-header-parapro .wp-block-navigation a.wp-block-navigation-item__content:focus {
	color: #24b8cf;
}

/* Homepage: transparent header overlaid on the hero, with thin hairline
   rules framing the logo/nav row — matches the original site's look.
   Fixed (not absolute) so it stays put and turns solid on scroll. */
body.home .site-header-parapro {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: transparent;
	transition: background-color 0.3s ease;
}

body.home .site-header-parapro .alignwide {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	transition: border-color 0.3s ease;
}

/* Once scrolled past the hero top, the homepage header goes solid dark so
   the white logo + nav stay legible over page content. Toggled by nav.js. */
body.home .site-header-parapro.is-scrolled {
	background-color: #111517;
}

body.home .site-header-parapro.is-scrolled .alignwide {
	border-color: transparent;
}

/* Close the default block-gap margin the editor adds above <main>, which
   otherwise leaves a white strip between the header and the content/hero. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Curved teal wave divider at the foot of the homepage hero. */
.parapro-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 60px;
	z-index: 2;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,20 Q720,60 1440,20 L1440,60 Z' fill='%2324b8cf'/%3E%3C/svg%3E");
}

/* Homepage hero crossfade slider. Slide 0 is the cover's own image; extra
   slides are layered in by nav.js. All sit below the dim overlay (z-index 1)
   and inner content, so the tint, wave and text stay on top. */
.parapro-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	z-index: 0;
	transition: opacity 1.2s ease-in-out;
}

.parapro-hero-slide.is-active {
	opacity: 1;
}

/* Interior pages: featured-image hero band sits flush under the header, and
   the teal title strip sits flush under the image (kill the block-gap margin). */
.parapro-page-hero {
	margin-block-start: 0;
}

/* Featured-image hero band: a cropped strip — shorter on mobile, taller on
   desktop. Height is owned here (not the block) so it can be responsive. */
.parapro-page-hero img {
	width: 100%;
	height: 340px;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.parapro-page-hero img {
		height: 560px;
	}
}

.parapro-title-band {
	margin-block-start: 0;
}

/* Interior page title band — teal. Title is set in sentence case with no
   /// prefix (the brand motif is reserved for h2-h6 now). */
.parapro-title-band .wp-block-post-title {
	margin: 0;
	/* weight intentionally not set — inherits the theme.json heading weight so
	   the band follows the global type scale instead of drifting from it. */
	letter-spacing: 0.02em;
	font-size: clamp(1.05rem, 0.85rem + 1vw, 1.55rem);
	line-height: 1.2;
}

/* Submenu polish: dark surface, teal hover, subtle shadow */
.site-header-parapro .wp-block-navigation__submenu-container {
	background-color: #1b2124;
	border-radius: 4px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
	padding: 0.4em 0;
}

.site-header-parapro .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	color: #ffffff;
	padding: 0.6em 1.2em;
}

.site-header-parapro .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
	color: #24b8cf;
}

/* Footer links */
.site-footer-parapro a {
	color: #ffffff;
}

.site-footer-parapro a:hover {
	color: #24b8cf;
}

.site-footer-parapro .wp-block-social-links a {
	color: #ffffff;
}

/* Hero: ensure the cover block's inner content sits comfortably tall
   and centered even on very short viewports */
.parapro-hero.wp-block-cover {
	min-height: 85vh;
}

@media (max-width: 600px) {
	.parapro-hero.wp-block-cover {
		min-height: 70vh;
	}
}

/* ------------------------------------------------------------------
   WPForms — bring the plugin's form chrome onto the Parapro design
   system. Driven by theme.json custom properties, so Global Styles
   changes flow through automatically.

   SPECIFICITY NOTE: wpforms-full.min.css ships selectors of the shape
   `div.wpforms-container-full .wpforms-form input[type=email]` (0,3,2).
   The theme stylesheet loads *after* it, so matching that specificity
   is enough to win — hence the verbose prefix on every rule below
   rather than a pile of !important. Class names are identical in
   WPForms Lite and Pro, so this survives an edition swap.
   ------------------------------------------------------------------ */

div.wpforms-container-full {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow);
}

div.wpforms-container-full .wpforms-form {
	max-width: none;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0 0 var(--wp--preset--spacing--20, 1.25rem) 0;
}

/* Labels: the brand's small uppercase treatment. */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
	display: block;
	margin-bottom: 0.45em;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--wp--preset--color--primary);
	border: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

/* Inputs: flat, full-width, teal focus ring. */
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	/* The plugin pins fields to a 38px box; with 0.75em padding the text
	   overflows and visibly clips inside <select>. Let padding +
	   line-height size the field instead. */
	height: auto;
	padding: 0.75em 0.9em;
	background-color: var(--wp--preset--color--off-white);
	border: 1px solid #d7dedf;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The plugin sizes fields with .wpforms-field-{small,medium,large}
   — e.g. `select.wpforms-field-medium{max-width:60%}` at (0,3,2). The
   element qualifier below is required to match that; a bare class
   selector (0,3,1) loses and the field stays 60% wide. */
div.wpforms-container-full .wpforms-form input.wpforms-field-small,
div.wpforms-container-full .wpforms-form select.wpforms-field-small,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-small,
div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium,
div.wpforms-container-full .wpforms-form input.wpforms-field-large,
div.wpforms-container-full .wpforms-form select.wpforms-field-large,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
	max-width: 100%;
	width: 100%;
}

/* The same size classes also land on the multi-column row wrapper used by
   the Name field (`.wpforms-field-row.wpforms-field-medium{max-width:60%}`),
   which squeezes First/Last to ~29% each. Release the row too. */
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-small,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
	max-width: 100%;
}

div.wpforms-container-full .wpforms-form textarea {
	min-height: 150px;
	resize: vertical;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(36, 184, 207, 0.22);
}

div.wpforms-container-full .wpforms-form ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.75;
}

/* Submit: mirrors the theme.json button element exactly. */
div.wpforms-container-full .wpforms-form button[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	padding: 0.8em 1.8em;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form button[type="submit"]:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

div.wpforms-container-full .wpforms-form button[type="submit"][disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Validation + confirmation states. */
div.wpforms-container-full .wpforms-form label.wpforms-error {
	display: block;
	margin-top: 0.4em;
	font-size: 0.82rem;
	color: #c0392b;
}

div.wpforms-container-full .wpforms-form input.wpforms-error,
div.wpforms-container-full .wpforms-form select.wpforms-error,
div.wpforms-container-full .wpforms-form textarea.wpforms-error {
	border-color: #c0392b;
}

div.wpforms-confirmation-container-full {
	background-color: var(--wp--preset--color--primary-light);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	padding: 1.1em 1.3em;
	color: var(--wp--preset--color--contrast);
}

/* CAPTCHA widget: room to breathe, no overflow in narrow columns. */
div.wpforms-container-full .wpforms-form .wpforms-field-captcha,
div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container,
div.wpforms-container-full .wpforms-form .h-captcha {
	padding-top: 0.25em;
	padding-bottom: var(--wp--preset--spacing--20, 1.25rem);
	max-width: 100%;
	overflow-x: auto;
}

/* Blog listing entries. The child theme ships its own home.html because the
   TT5 parent's home.html renders full post bodies with align:full, which lets
   aligned/cover blocks inside a post escape the content column entirely. */
/* core/post-template wraps each post in its own <li class="wp-block-post">,
   so the cards are never adjacent siblings — the separator has to hang off
   the list items, not the cards. */
.wp-block-post + .wp-block-post .parapro-post-card {
	border-top: 1px solid #e2e8ea;
	padding-top: var(--wp--preset--spacing--60, 60px);
}

.parapro-post-card .wp-block-post-title { margin: 0 0 0.25em; }
.parapro-post-card .wp-block-post-date { color: var(--wp--preset--color--muted); margin: 0 0 0.75em; }
.parapro-post-card .wp-block-post-featured-image img { width: 100%; object-fit: cover; }

/* ==================================================================
   TRIAL DESIGN DIRECTION — "pm" (Full Paramotor Course pattern)
   ------------------------------------------------------------------
   A second visual language: Big Shoulders Display / Inter / Space Mono
   on navy + amber, versus the site's Barlow + teal. Everything here is
   scoped under .pm-page so it cannot leak into the rest of the site.

   Colours resolve from theme.json presets (ink / ink-soft / sky / wind /
   amber / line), so the palette stays editable in Global Styles rather
   than being hardcoded twice.
   ================================================================== */

.pm-page {
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--sky: var(--wp--preset--color--sky);
	--cloud: var(--wp--preset--color--base);
	--wind: var(--wp--preset--color--wind);
	--amber: var(--wp--preset--color--amber);
	--line: var(--wp--preset--color--line);
	--pm-radius: 2px;

	/* Layout scale. --pm-max is the one dial to turn if the column should be
	   wider or narrower; everything else is fluid off the viewport. */
	--pm-max: 1320px;
	--pm-gutter: clamp(20px, 4vw, 48px);
	--pm-rhythm: clamp(48px, 6.5vw, 96px);
	--pm-rhythm-tight: clamp(36px, 4vw, 62px);
	--pm-measure: min(100%, 72ch);
	--pm-measure-tight: min(100%, 60ch);

	font-family: var(--wp--preset--font-family--inter);
	color: var(--ink);
	background: var(--sky);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.pm-page * { box-sizing: border-box; }
.pm-page a { color: inherit; }
.pm-page img { max-width: 100%; display: block; }

/* Sections own their own width/padding, so the groups that carry this
   class use the default (unconstrained) layout. */
.pm-page .pm-section {
	width: min(100%, var(--pm-max));
	margin-inline: auto;
	padding: var(--pm-rhythm) var(--pm-gutter);
}

.pm-page .pm-section--tight {
	padding-top: var(--pm-rhythm-tight);
	padding-bottom: var(--pm-rhythm-tight);
}

.pm-page .pm-eyebrow {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wind);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}

.pm-page .pm-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--amber);
	display: inline-block;
	flex-shrink: 0;
}

.pm-page h1,
.pm-page h2 {
	font-family: var(--wp--preset--font-family--big-shoulders);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.02;
	margin: 0 0 20px;
	color: var(--ink);
}

.pm-page h1 { font-size: clamp(40px, 7vw, 76px); }
.pm-page h2 { font-size: clamp(30px, 4.4vw, 46px); }

.pm-page h3,
.pm-page h4 {
	font-family: var(--wp--preset--font-family--big-shoulders);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
	color: var(--ink);
}

.pm-page .pm-lede {
	font-size: clamp(17px, 1.15vw + 12px, 20px);
	color: var(--ink-soft);
	max-width: var(--pm-measure-tight);
	margin: 0 0 30px;
}

.pm-page .pm-body {
	font-size: clamp(15px, 0.5vw + 13px, 17px);
	color: var(--ink-soft);
	max-width: var(--pm-measure);
}

.pm-page .pm-statement {
	font-family: var(--wp--preset--font-family--big-shoulders);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 30px);
	text-transform: none;
	color: var(--ink);
	border-left: 3px solid var(--amber);
	padding-left: 22px;
	margin: 36px 0 0;
	max-width: var(--pm-measure-tight);
	line-height: 1.2;
}

/* --- buttons (core/buttons; the pm class sits on the wrapper) --- */
.pm-page .pm-btns { margin-top: 34px; gap: 14px; }

.pm-page .wp-block-button__link {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 28px;
	border-radius: var(--pm-radius);
	border: 1px solid var(--ink);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pm-page .pm-btn--primary .wp-block-button__link {
	background: var(--ink);
	color: var(--cloud);
}

.pm-page .pm-btn--primary .wp-block-button__link:hover {
	background: var(--wind);
	border-color: var(--wind);
}

.pm-page .pm-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--ink);
}

.pm-page .pm-btn--ghost .wp-block-button__link:hover { background: var(--cloud); }

/* --- hero --- */
.pm-page .pm-hero { padding: 0; }

.pm-page .pm-hero-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pm-page .pm-hero-content {
	width: min(100%, var(--pm-max));
	margin-inline: auto;
	padding: var(--pm-rhythm-tight) var(--pm-gutter) 20px;
}

.pm-page .pm-hero-strip {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.pm-page .pm-hero-strip p { margin: 0; }
.pm-page .pm-hero-strip p::before { content: "— "; color: var(--amber); }
.pm-page .pm-hero-strip p:first-child::before { content: ""; }

/* --- checklists --- */
.pm-page .pm-check-grid { margin-top: 36px; }
.pm-page .pm-check-grid h3 { font-size: 14px; letter-spacing: 0.08em; color: var(--wind); }

.pm-page .pm-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pm-page .pm-check-list li {
	padding: 12px 0 12px 26px;
	border-bottom: 1px solid var(--line);
	position: relative;
	font-size: 15px;
	color: var(--ink-soft);
}

.pm-page .pm-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 19px;
	width: 8px;
	height: 8px;
	border: 1px solid var(--wind);
	transform: rotate(45deg);
}

.pm-page .pm-check-list.is-need li::before {
	background: var(--amber);
	border-color: var(--amber);
}

/* --- hairline grids: progression, readout --- */
.pm-page .pm-progress,
.pm-page .pm-readout {
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

/* Core's grid layout uses auto-FILL, which leaves phantom empty tracks when
   the item count doesn't fill the row (the 4-step path rendered as 5 columns
   on wide screens, breaking the hairline block). auto-FIT collapses those.
   The min() guard stops a track being wider than the viewport on phones. */
.pm-page .pm-progress {
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.pm-page .pm-readout {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.pm-page .pm-skills {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* The training path is a 4-step sequence, so auto-fit's 3-then-1 orphan at
   mid widths reads badly. Force a 2x2 there — same intent as the source
   demo's 820px breakpoint. */
@media (min-width: 561px) and (max-width: 1100px) {
	.pm-page .pm-progress {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pm-page .pm-progress { margin-top: 44px; }
.pm-page .pm-readout { margin-top: 40px; }

.pm-page .pm-progress-step,
.pm-page .pm-readout-cell {
	background: var(--cloud);
	padding: 30px 22px;
	margin: 0;
}

.pm-page .pm-readout-cell { padding: 28px 24px; }

.pm-page .pm-progress-num {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 13px;
	color: var(--amber);
	display: block;
	margin: 0 0 18px;
}

.pm-page .pm-progress-step p:last-child { font-size: 14px; color: var(--ink-soft); margin: 0; }

.pm-page .pm-readout-value {
	font-family: var(--wp--preset--font-family--space-mono);
	font-weight: 700;
	font-size: 34px;
	color: var(--ink);
	display: block;
	margin: 0;
	line-height: 1.1;
}

.pm-page .pm-readout-label {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wind);
	display: block;
	margin: 6px 0 0;
}

.pm-page .pm-readout-sub { font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; }

/* --- notes --- */
.pm-page .pm-note {
	margin-top: 28px;
	padding: 20px 24px;
	border-left: 3px solid var(--wind);
	background: var(--cloud);
	font-size: 14px;
	color: var(--ink-soft);
	max-width: var(--pm-measure);
}

.pm-page .pm-note p { margin: 0 0 10px; font-size: 14px; color: inherit; }
.pm-page .pm-note p:last-child { margin-bottom: 0; }
.pm-page .pm-note--warn { border-left-color: var(--amber); }

/* --- image slot --- */
.pm-page .pm-image-slot img {
	width: 100%;
	min-height: 260px;
	object-fit: cover;
}

/* --- skills --- */
.pm-page .pm-skills { margin-top: 40px; }

.pm-page .pm-skill {
	border-top: 1px solid var(--line);
	padding-top: 16px;
	margin: 0;
}

.pm-page .pm-skill p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* --- pricing --- */
.pm-page .pm-price-box {
	background: var(--ink);
	color: var(--cloud);
	padding: clamp(24px, 3.5vw, 48px);
	margin-top: 40px;
}

.pm-page .pm-price-box h3,
.pm-page .pm-price-box h4 { color: var(--cloud); }

.pm-page .pm-price-top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 26px;
	gap: 12px;
}

.pm-page .pm-price-name {
	font-family: var(--wp--preset--font-family--big-shoulders);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
	margin: 0;
	color: var(--cloud);
}

.pm-page .pm-price-amount {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 38px;
	font-weight: 700;
	color: var(--amber);
	margin: 0;
	line-height: 1;
}

.pm-page .pm-price-sub { font-size: 13px; color: #b7c7cf; margin: 4px 0 0; }

.pm-page .pm-price-box .pm-note {
	background: transparent;
	color: #dce6ea;
	margin-top: 24px;
}

.pm-page .pm-price-cols { margin-top: 28px; }

.pm-page .pm-price-cols h4 {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amber);
	margin: 0 0 14px;
	font-weight: 700;
}

.pm-page .pm-price-cols ul { list-style: none; margin: 0; padding: 0; }

.pm-page .pm-price-cols li {
	font-size: 14px;
	color: #dce6ea;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- FAQ (core/details) --- */
.pm-page .pm-faq { margin-top: 36px; border-top: 1px solid var(--line); }

.pm-page .pm-faq .wp-block-details {
	border-bottom: 1px solid var(--line);
	padding: 20px 0;
	margin: 0;
}

.pm-page .pm-faq summary {
	font-family: var(--wp--preset--font-family--big-shoulders);
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	color: var(--ink);
}

.pm-page .pm-faq summary::-webkit-details-marker { display: none; }

.pm-page .pm-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 20px;
	color: var(--amber);
	flex-shrink: 0;
}

.pm-page .pm-faq .wp-block-details[open] summary::after { content: "–"; }

.pm-page .pm-faq .wp-block-details p {
	font-size: 15px;
	color: var(--ink-soft);
	margin: 14px 0 0;
	max-width: var(--pm-measure);
}

/* --- final CTA --- */
.pm-page .pm-final { border-top: 1px solid var(--line); }