/* Weekend Warrior Hero
   Colors/fonts matched to AutomobileBrand.com (MagNow theme):
   body bg #0a0b0d, body text #e8eaed, accent #0d7bff, font "Source Sans Pro" */

body.weekend-warrior-post .entry-header .entry-title,
body.weekend-warrior-post h1.entry-title {
	display: none;
}

/* The post date/edit line (.entry-meta) has no home once the title above it
   is hidden -- it was left floating in the gap between the nav and the
   hero. The hero's own details line already carries the info that matters,
   so hide it here rather than leave orphaned text above the hero. */
body.weekend-warrior-post .entry-meta {
	display: none;
}

/* The theme reserves ~100px of standing space before the content column
   (40px margin under the secondary nav row + 20px content padding) to make
   room for a normal post's title. With the title hidden and the hero
   handling that role instead, that space just reads as a gap above the
   hero. Tightened here, scoped to Weekend Warrior posts only -- every
   other page keeps the theme's normal spacing untouched. */
body.weekend-warrior-post #primary-bar {
	margin-bottom: 0;
}

body.weekend-warrior-post #primary {
	padding-top: 0;
}

/* Best-effort guard against a theme-rendered featured image immediately
   above/inside the content on singular posts, so it doesn't duplicate the
   hero image. Harmless no-op if the theme has no such element. */
body.weekend-warrior-post .entry-content > .wp-post-image:first-child,
body.weekend-warrior-post .post-thumbnail,
body.weekend-warrior-post .single-featured-image {
	display: none;
}

/* The theme's sidebar (#secondary) is `position: sticky; top: 20px` by
   default, so it "follows" the page as you scroll. weekend-warrior-hero.js
   pushes the sidebar down with a one-time margin-top on load, to clear the
   full-width hero -- but sticky positioning can re-engage mid-scroll and
   pull the sidebar back toward the top of its container, undoing that
   push and letting it drift back over the hero. Disabling sticky here
   removes that whole class of bug: the sidebar simply stays in normal
   document flow below the hero, at the cost of no longer "following"
   scroll on these posts specifically. Scoped to Weekend Warrior posts only
   -- every other page keeps its normal sticky sidebar behavior. */
body.weekend-warrior-post #secondary {
	position: static;
}

/* The theme/editor's default heading color (a near-black rgb(50,50,50),
   meant for a light background) is left unset against this dark-mode
   design, so H2/H3 section headings in the article body -- e.g. "Jake's
   Four Must-Have Jeep Upgrades" and each numbered upgrade title -- render
   nearly invisible against the near-black content background. Overridden
   here to the site's actual dark-theme palette: white for section
   headings, the hero's blue accent for each numbered product title so
   they stand out and tie back to the hero. */
body.weekend-warrior-post .entry-content h2 {
	color: #ffffff;
}

body.weekend-warrior-post .entry-content h3 {
	color: #4fa2ff;
}

/* Each product's "Check current price" CTA is a default WP button block,
   which inherits the theme's generic dark-gray fill (rgb(50,55,60)) -- a
   color meant to sit on a light editor background, not this near-black
   page. It read as almost invisible/low-contrast against the surrounding
   content. The site's blue accent (#0d7bff) is already used everywhere
   else nearby -- H3 product titles, the hero ribbon, nav -- so a blue
   button blended in as more "content" rather than reading as a distinct,
   clickable action. Restyled to a warm orange, blue's complement on the
   color wheel, so each CTA visually separates itself from the
   informational blue around it and reads clearly as "click here." */
body.weekend-warrior-post .entry-content .wp-block-button__link {
	background-color: #ff6b35;
	color: #ffffff;
}

body.weekend-warrior-post .entry-content .wp-block-button__link:hover,
body.weekend-warrior-post .entry-content .wp-block-button__link:focus {
	background-color: #e04f1a;
	color: #ffffff;
}

/* The button wrapper block has no bottom margin by default, so each CTA
   sits flush against the next product's H3 heading right below it.
   Scoped to the buttons-wrapper inside Weekend Warrior article bodies so
   the sections read as visually distinct instead of running together. */
body.weekend-warrior-post .entry-content .wp-block-buttons {
	margin-bottom: 32px;
}

.weekend-warrior-hero {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 0;
	margin-bottom: 32px;
	background: #0a0b0d;
	font-family: "Source Sans Pro", sans-serif;
	/* Full page width. The sidebar (e.g. the newsletter signup widget) is
	   pushed down below the hero at runtime instead -- see
	   weekend-warrior-hero.js -- rather than the hero being narrowed to
	   avoid it. The fixed-height image/overlay/content block used to live
	   directly on this element, but now lives on .weekend-warrior-hero__visual
	   instead (see below) so the optional quote bar can sit as a second,
	   normal-flow block underneath it without being clipped by
	   overflow:hidden or squeezed by the aspect-ratio sizing. */
}

/* Everything that makes up the fixed-aspect-ratio image block: the photo,
   the gradient overlay, and the label/headline/summary/badges content. */
.weekend-warrior-hero__visual {
	position: relative;
	/* Sized by aspect ratio (~2:1, matching the reference mockup) rather
	   than viewport height. The previous vh-based min-height produced a
	   much shorter, more letterboxed crop on common screen heights (closer
	   to 3:1), which cut off more of the vehicle vertically and made the
	   framing feel off-balance even though the image itself is centered.
	   min/max-height keep it sane on very short or very tall viewports. */
	aspect-ratio: 2 / 1;
	min-height: 460px;
	max-height: 760px;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	isolation: isolate;
}

.weekend-warrior-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.weekend-warrior-hero__media img,
.weekend-warrior-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--wwh-object-position, center);
	display: block;
}

.weekend-warrior-hero__media-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1a1c20 0%, #0a0b0d 100%);
}

.weekend-warrior-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.9) 0%,
			rgba(0, 0, 0, 0.72) 22%,
			rgba(0, 0, 0, 0.28) 40%,
			rgba(0, 0, 0, 0) 55%
		),
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.55) 0%,
			transparent 45%
		);
}

.weekend-warrior-hero__content {
	width: var(--wwh-content-width, min(1060px, calc(100% - 40px)));
	margin-left: var(--wwh-content-left, auto);
	margin-right: auto;
	padding: 56px 0 48px;
	color: #e8eaed;
	/* Label/headline/summary stack naturally at the top; the divider below
	   picks up margin-top: auto to absorb any remaining vertical space and
	   pin the badge row + details line to the bottom of the image. When
	   there's enough text to fill the hero, the auto margin just collapses
	   to nothing and the two groups sit close together. */
	display: flex;
	flex-direction: column;
}

/* Ribbon-style badge, closer to the mockup's angled banner */
.weekend-warrior-hero__label {
	position: relative;
	display: inline-block;
	padding: 10px 22px 10px 16px;
	margin-bottom: 4px;
	background: #0d7bff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.weekend-warrior-hero h1 {
	max-width: 480px;
	margin: 14px 0 14px;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 900;
	font-size: clamp(1.6rem, 2.6vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.weekend-warrior-hero__summary {
	max-width: 420px;
	margin: 0;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

/* Thin rule closing out the summary before the badge row. margin-top:auto
   pushes this (and the badge row + details line that follow it) down to
   the bottom of the hero, absorbing whatever vertical space is left over
   once the label/headline/summary are laid out at the top -- collapsing to
   just the fixed 18px bottom margin when there's enough text to already
   fill the hero. */
.weekend-warrior-hero__divider {
	width: 100%;
	max-width: 420px;
	height: 1px;
	margin-top: auto;
	margin-bottom: 18px;
	border: none;
	background: rgba(255, 255, 255, 0.22);
}

/* Decorative badge row, e.g. Trails / Camping / Adventure */
.weekend-warrior-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0;
}

.weekend-warrior-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(2px);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.weekend-warrior-hero__badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #0d7bff;
}

.weekend-warrior-hero__details {
	margin-top: 14px;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.weekend-warrior-hero__details-vehicle {
	color: #4fa2ff;
	font-weight: 900;
}

.weekend-warrior-hero__details-dot {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

/* Optional caption bar across the bottom edge of the hero, e.g. an owner
   quote -- only rendered when the "Hero Quote" ACF field is filled in.
   Sits as a normal-flow block directly below .weekend-warrior-hero__visual
   (not absolutely positioned over the image), so it reads as an attached
   footer strip flush against the bottom of the photo, matching the
   reference mockup, without disturbing the fixed-height image above it. */
.weekend-warrior-hero__quote {
	background: #000000;
}

/* The hero's full-bleed breakout (left: 50%; width: 100vw; margin-left:
   -50vw on .weekend-warrior-hero) doesn't line up exactly with the
   viewport on this theme's two-column layout -- the box itself ends up
   offset by a theme-dependent amount (verified ~178px on this site). The
   headline/badge content already corrects for this via the
   --wwh-content-left/--wwh-content-width custom properties JS sets on the
   hero element (see alignContent() in weekend-warrior-hero.js), which line
   the text up with the site header's container. This wrapper applies the
   same correction to the quote's text, or it would just use fixed padding
   from the (offset, off-screen-to-the-left) edge of the breakout box and
   get visibly clipped by the browser viewport instead of sitting at a
   sensible left margin. */
.weekend-warrior-hero__quote-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	width: var(--wwh-content-width, min(1060px, calc(100% - 40px)));
	margin-left: var(--wwh-content-left, auto);
	margin-right: auto;
	padding: 16px 0;
}

.weekend-warrior-hero__quote-text {
	margin: 0;
	max-width: 720px;
	font-size: 0.95rem;
	font-style: italic;
	line-height: 1.4;
	color: #e8eaed;
}

.weekend-warrior-hero__quote-cite {
	flex-shrink: 0;
	font-size: 0.85rem;
	font-weight: 700;
	font-style: normal;
	color: #4fa2ff;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.weekend-warrior-hero__visual {
		/* The 2:1 desktop aspect ratio would be far too short at phone
		   widths (e.g. ~195px tall at 390px wide) -- cancel it and fall
		   back to a fixed floor instead, as before. */
		aspect-ratio: auto;
		min-height: 560px;
		max-height: none;
	}

	.weekend-warrior-hero__quote-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: var(--wwh-content-width, min(100% - 28px, 1060px));
		margin-left: var(--wwh-content-left, auto);
		padding: 14px 0;
	}

	.weekend-warrior-hero__overlay {
		background:
			linear-gradient(
				0deg,
				rgba(0, 0, 0, 0.96) 0%,
				rgba(0, 0, 0, 0.6) 65%,
				rgba(0, 0, 0, 0.12) 100%
			);
	}

	.weekend-warrior-hero__content {
		width: var(--wwh-content-width, min(100% - 28px, 1060px));
		margin-left: var(--wwh-content-left, auto);
		padding: 60px 0 34px;
	}

	.weekend-warrior-hero__divider {
		max-width: 100%;
		margin-bottom: 14px;
	}
}