/* .page-title never actually matched Astra's real markup (.entry-title) -- this
   went unnoticed because every page until Terms/Privacy used the full-bleed hero
   pattern, which visually covered the stray title anyway. Terms/Privacy don't use
   a hero, so the duplicate title became visible for the first time. */
.page-title,
.entry-title {
	display: none;
}

/* Clear the floating header on mobile so hero titles aren't covered by the logo.
   Excludes .a5-hero-fixed-bg -- that pattern already manages its own spacing
   (padding + justify-content, tuned per page to keep content in the photo's
   upper half) specifically so the header can float transparently on top of
   it, which is the whole point of the fixed-background hero. Stacking this
   190px on top of that pushed the homepage's logo/tagline needlessly far
   down, opening a large empty gap before the fabric photo below it. */
@media (max-width: 768px) {
	.ast-theme-transparent-header .entry-content > .wp-block-group:first-child:not(.a5-hero-fixed-bg) {
		padding-top: 190px;
	}
}

/* Plain content pages (Terms, Privacy) that don't use the hero pattern -- still
   need to clear the floating absolute-positioned header themselves, since they
   have no hero section providing that spacing incidentally. */
.page-id-3 .site-content,
.page-id-526 .site-content {
	background-color: #F3F3E8;
}
.a5-legal-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 160px 24px 96px;
	color: #151616;
}
.a5-legal-content h1 {
	font-size: 36px;
	margin-bottom: 8px;
}
.a5-legal-content h2 {
	margin-top: 40px;
	font-size: 20px;
}
@media (max-width: 768px) {
	.a5-legal-content {
		padding: 140px 20px 64px;
	}
}

/* Fixed/stationary hero background: image stays put, content scrolls over it.

   THIS IS NOT background-attachment:fixed. Real mobile Safari confirmed (via
   screenshot on an actual iPhone) that it simply does not render a
   background-image at all with background-attachment:fixed on a normal
   element -- this is a real, long-standing iOS Safari limitation, not a
   viewport-sizing issue as first assumed.

   Instead this uses a position:fixed pseudo-element for the image, with NO
   transform/filter/perspective on any ancestor. (A transform on the wrapper
   was tried previously to "scope" the fixed pseudo-element and is wrong: a
   transformed ancestor becomes the CSS containing block for position:fixed
   descendants, which makes them scroll with that ancestor instead of staying
   fixed to the viewport -- the opposite of the intended effect. Do not add
   one back.)

   Because plain position:fixed has no built-in clipping to its own element
   (unlike background-attachment:fixed), the intended design is for the
   pseudo-element to sit BEHIND normal page content via z-index:-1, with every
   section after the hero given its own opaque background-color to mask it.

   THAT DOESN'T WORK HERE: a position:fixed element with a NEGATIVE z-index
   silently fails to paint at all in this environment (confirmed directly --
   toggling it from -1 to +1 with nothing else changed made the image appear).
   This reproduced in both this session's testing tool and, apparently, the
   user's real phone, so it's being treated as a real engine limitation, not
   tooling noise. Because of this, z-index here must stay 0/positive, which
   flips the stacking problem: a non-negative positioned element paints ABOVE
   normal in-flow content (per the CSS2.1 painting-order steps, positioned
   z-index:auto/0 descendants are step 6, after step 3's normal in-flow
   content) -- so instead of the background hiding behind everything by
   default, everything that needs to be visible on top of it (the hero's own
   text/buttons AND every section after the hero) must be explicitly promoted
   with `position: relative; z-index: 1` so it wins the stacking comparison. */
.a5-hero-fixed-bg {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	padding: 0 24px 64px;
	box-sizing: border-box;
}
.a5-hero-fixed-bg::before {
	content: '';
	position: fixed;
	/* -40px/+80px bleed on top of the exact viewport fit below -- initParallax()
	   in a5-motion/motion.js shifts this box up to 40px (MAX_OFFSET_PX) via the
	   --a5-parallax-y transform. Without this margin, a box sized to exactly
	   100vh has nothing left to give at either edge once shifted, so the
	   fallback background-color peeks out from under the photo at the top or
	   bottom while scrolling. The extra height/negative top keeps a photo edge
	   there instead, at the maximum possible shift in either direction. */
	top: -40px;
	left: 0;
	right: 0;
	/* Explicit height instead of bottom:0 -- mobile browsers resize the live
	   viewport as their address bar shows/hides on scroll, and bottom:0 forces
	   this box to recompute (and its cover-sized background to rescale) on
	   every one of those toolbar animation frames, which reads as the
	   background "skipping"/jumping during scroll. Deliberately plain 100vh,
	   NOT 100dvh -- dvh is the "dynamic" viewport unit, meaning it's defined
	   to keep tracking the toolbar exactly like bottom:0 did (same jitter,
	   different property). Plain vh resolves once against the large/stable
	   viewport size and stays put as the toolbar animates. */
	height: calc(100vh + 80px);
	z-index: 0;
	background-color: #F3F3E8;
	background-image: url('https://after5athletics.com/wp-content/uploads/2026/07/PHD-Wallpaper-WhiteFabric-scaled.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Subtle parallax drift -- see initParallax() in a5-motion/motion.js for
	   why this is a CSS var rather than a JS-set transform directly. */
	transform: translateY(var(--a5-parallax-y, 0px));
}
/* Fallback fill color shows for the instant before the background photo has
   finished downloading -- without this, dark-hero pages (Services, Contact)
   flash white first. */
.a5-hero-fixed-bg--on-dark::before {
	background-color: #151616;
}
/* Per-page hero background image, same fixed pseudo-element mechanism as Home. */
.page-id-227 .a5-hero-fixed-bg::before {
	background-image: url('https://after5athletics.com/wp-content/uploads/2026/07/PHD-Wallpaper09-scaled.png');
}
.page-id-228 .a5-hero-fixed-bg::before {
	background-image: url('https://after5athletics.com/wp-content/uploads/2026/07/PHD-Wallpaper08-scaled.png');
}
.page-id-229 .a5-hero-fixed-bg::before {
	background-image: url('https://after5athletics.com/wp-content/uploads/2026/07/PHD-Wallpaper08-scaled.png');
}
.a5-hero-fixed-bg > * {
	position: relative;
	z-index: 1;
}
.a5-hero-fixed-bg .wp-block-image,
.a5-hero-fixed-bg h1,
.a5-hero-fixed-bg h2,
.a5-hero-fixed-bg p,
.a5-hero-fixed-bg .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.a5-hero-fixed-bg .wp-block-buttons {
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: 12px;
	column-gap: 16px;
	margin-top: 8px !important;
}
@media (max-width: 768px) {
	/* Astra's own theme CSS carries a same-breakpoint rule targeting every
	   top-level block generically (.entry-content > .wp-block-group, among
	   others) that also sets all four padding sides, at higher specificity
	   (two classes) than a plain ".a5-hero-fixed-bg" selector (one class) --
	   it was silently winning over every padding value declared here,
	   including padding-top, which is why edits to that number kept not
	   visibly taking effect. Matching the three-class prefix the original
	   (pre-audit) rule used for this exact purpose reliably beats it. */
	.ast-theme-transparent-header .entry-content > .a5-hero-fixed-bg {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 56px;
		/* 190px, matching what this hero pattern used successfully for a
		   long time before the audit pass touched it -- 96px and 140px were
		   both tried and confirmed too tight on a real device for About's
		   larger bold H1 in particular. */
		padding-top: 190px;
		/* Keep the logo/tagline in the upper half, off the busier fabric-fold area lower in the photo */
		justify-content: flex-start;
	}
	.a5-hero-fixed-bg::before {
		/* Crop toward the right side on narrow screens so key subject matter isn't cut off */
		background-position: right center;
	}
	/* About's photo (Wallpaper09) is a tight crop of a shadow falling across a
	   wall -- on this narrow-viewport cover crop the image never crops
	   vertically (it's always scaled to fill the full height), so plain
	   "right center" lands the visible slice almost entirely inside the dark
	   shadow, right behind the intro text. Shifted left just enough to keep
	   the shadow clear of the text while still showing the curved edge. */
	.page-id-227 .a5-hero-fixed-bg::before {
		background-position: 55% center;
	}
}

/* Dark-hero variant: light text/heading colors so copy stays legible over dark
   background photos (Services, Contact). Pair with .a5-header--on-dark. */
.a5-hero-fixed-bg--on-dark h1,
.a5-hero-fixed-bg--on-dark h2,
.a5-hero-fixed-bg--on-dark p {
	color: #f3f3e8;
}
.a5-hero-fixed-bg--on-dark .wp-block-button__link {
	background-color: #f3f3e8;
	color: #151616;
}
.a5-hero-fixed-bg--on-dark .wp-block-button__link:hover {
	background-color: #ffffff;
}

/* Cream fill below the hero, sampled from the fabric photo, so the page doesn't jump to stark white.
   .a5-post-hero-fill is a dedicated align:full wrapper (same full-bleed mechanism as the hero
   itself) around everything after the hero, specifically so this background can span the true
   full viewport width -- .entry-content/.site-main/etc are all constrained to a narrower centered
   column, so giving THEM the background left visible gaps on either side where the hero's fixed
   image showed through. position:relative + z-index:1 wins the stacking comparison against the
   hero's background pseudo-element -- see the long comment above the hero rule for why that's
   needed at all. */
.a5-about-photo img {
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.page-id-226 .site-content {
	background-color: #F3F3E8;
}
.a5-post-hero-fill {
	position: relative;
	z-index: 1;
	background-color: #F3F3E8;
}
/* Wallpaper09 (About's hero photo) is a cooler, more neutral light grey than the warm
   fabric texture Home uses -- the shared #F3F3E8 cream didn't match it. User-specified
   override tuned to this photo instead. */
.page-id-227 .a5-post-hero-fill {
	background-color: #EBEBE6;
}

/* Dark variant: page content below the hero stays dark/on-brand instead of switching
   to the cream fill, for pages whose hero photo is also dark (currently just Contact). */
.a5-post-hero-fill--on-dark {
	background-color: #151616;
}
.a5-post-hero-fill--on-dark h1,
.a5-post-hero-fill--on-dark h2,
.a5-post-hero-fill--on-dark h3,
.a5-post-hero-fill--on-dark p {
	color: #f3f3e8;
}
.a5-post-hero-fill--on-dark .wp-block-separator {
	border-color: rgba(243, 243, 232, 0.2);
}
.a5-post-hero-fill--on-dark .wp-block-button__link {
	background-color: #f3f3e8;
	color: #151616;
}
.a5-post-hero-fill--on-dark .wp-block-button__link:hover {
	background-color: #ffffff;
}

/* Section divider lines: sit closer to the content instead of floating with a big empty gap */
.wp-block-separator {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}