/*
 * Parkwellness — Main Stylesheet
 * Layout + component styles for the custom front page. Scoped under
 * .pw-landing — see reset.css for why.
 */

/* flex column layout keeps the footer pinned to the bottom on short
   pages — .pw-main takes up the remaining space. .pw-header is
   position:fixed (see header.css) so it's not part of this flow at
   all — it overlays the top of .pw-main/.pw-hero instead of pushing
   it down. */
/* scroll-behavior belongs on html (the actual scrolling context for the
   page), not .pw-landing/body — setting it on body is unreliable across
   browsers. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.pw-landing {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-background);
	line-height: 1.5;
}

/* Every future section (#studio, #classes, #reviews, #instructor,
   #contact) needs this so clicking its nav anchor doesn't scroll it
   in flush behind the fixed header. */
.pw-landing [id] {
	scroll-margin-top: var(--header-height);
}

.pw-footer {
	flex: 0 0 auto;
}

.pw-main {
	flex: 1;
}

.pw-container {
	width: 100%;
	max-width: 1340px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ============================================================
   SECTION — same pattern as Jersey Jump's main.css: a bare-element
   default so every <section> gets consistent vertical rhythm from one
   place, 40px mobile / 64px from 769px up — mobile-first (min-width),
   matching this project's own convention elsewhere, even though Jersey
   Jump's own version of this rule happens to be written desktop-first
   (base rule + max-width:768px override). Same two values, same
   768/769px boundary, just restructured. Sections needing something
   else (Hero's full-viewport height, the Studio wrapper whose panels
   carry their own internal padding, Contrology's deliberately larger
   96px) override this with their own class rule — a class always
   outranks this bare-element selector on specificity, so those
   overrides don't need !important.
   ============================================================ */
section {
	padding-block: 40px;
}

@media (min-width: 769px) {
	section {
		padding-block: 64px;
	}
}

/* ============================================================
   HERO
   ============================================================ */
.pw-hero {
	position: relative;
	height: 100vh; /* not min-height — the hero must never grow past one viewport, whatever its content */
	padding-block: 0; /* overrides the global `section` default above — a full-viewport hero, not a padded content section */
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* .pw-hero prefix (not just .pw-hero-bg) — needed to outrank reset.css's
   ".pw-landing img" rule, which is more specific (class + element vs.
   just a class) and would otherwise win the height cascade and leave
   the image at its own aspect-ratio height instead of filling the
   section — barely noticeable on a wide desktop viewport, but on a
   narrow mobile one the same image renders much shorter, leaving a gap
   of bare overlay below it. */
.pw-hero .pw-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* WordPress prints width/height attributes on every <img> it outputs;
	   browsers turn those into an implicit aspect-ratio that overrides the
	   height:100% above, so the image ends up sized by its own aspect
	   ratio instead of filling the section — reset it explicitly. */
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
}

/* Slideshow — multiple .pw-hero-slide images stacked on top of each
   other (position:absolute above), crossfaded by
   assets/js/hero-slideshow.js toggling .is-active. A single slide just
   sits at opacity 1 with no JS needed. */
.pw-hero-slide {
	opacity: 0;
	transition: opacity 1.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.pw-hero-slide {
		transition: none;
	}
}

.pw-hero-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--overlay-black-60);
}

.pw-hero-content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	color: var(--color-white);
}

.pw-hero-preheading {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-300);
	margin-bottom: 12px;
}

.pw-hero-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 16px;
}

.pw-hero-title-line1,
.pw-hero-title-line2 {
	display: block;
}

.pw-hero-title-line1 {
	color: var(--color-cream-200);
}

.pw-hero-title-line2 {
	color: var(--color-gold-300);
}

/* Left-aligned, not centered — margin:0 not auto — matching the rest
   of the hero content's alignment (unlike the same divider graphic
   reused centered in Studio/Contrology/Reviews).
   img. prefix (not just .pw-hero-divider) — needed to outrank
   reset.css's ".pw-landing img" rule (class + element) on max-width;
   without it max-width:100% won over any value set here and the
   divider rendered at its full ~758px natural width.
   width is a clamp(), not a fixed px, so it scales down with the
   viewport (same idea as the heading's own vw-based clamp) instead of
   staying rigid at 379px on a narrow screen where the heading itself
   has shrunk — 379px is still the ceiling on wide viewports. */
img.pw-hero-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px 0;
}

.pw-hero-paragraph {
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: var(--color-taupe-100);
	margin-bottom: 24px;
}

/* font: normal normal 600 14px/18px Jost; (per design) — written as
   longhand below instead of the `font` shorthand, since that shorthand
   also resets font-stretch/font-size-adjust to their initial values.

   This is the one shared CTA component — the header, the hero, and
   every section below that needs a button all use this same class.
   Everything here is !important on purpose: without it, whatever
   ambient "a" / "li > a" rule belongs to the section a CTA happens to
   sit inside (nav, hero, a future section) wins on specificity and
   silently overrides the button's own identity — that's exactly what
   happened with the mobile menu's nav-link styles leaking into the
   CTA nested inside it. Locking it here means a CTA looks the same
   everywhere, with no per-placement override rules to keep in sync. */
.pw-cta-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 28px !important;
	background-color: var(--color-gold-300) !important;
	color: var(--color-dark-700) !important;
	font-family: var(--font-body) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 18px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	border-radius: 0 !important;
	transition: opacity var(--transition-fast);
}

.pw-cta-button:hover {
	opacity: 0.85;
}

/* Footer's own visual styling (background, grid, typography) lives in
   assets/css/footer.css — this file only keeps the sticky-footer flex
   rule near the top (.pw-footer{flex:0 0 auto}). */