/*
Theme Name: The Reset by LODE WTR
Theme URI: https://thereset.lodewtr.com/
Author: LODE WTR
Author URI: https://lodewtr.com/
Description: Editorial Full Site Editing block theme for The Reset — LODE WTR's scalp-health blog. Dynamic four-story hero, query-driven sections, magazine layouts, SEO- and AI-search-friendly structure. Works with native WordPress posts, categories, featured images and menus — no plugins required.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lodewtr-reset
Tags: blog, news, full-site-editing, block-patterns, block-styles, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, custom-logo, custom-menu, accessibility-ready
*/

/* ============================================================
   THE RESET — front-end layer
   Design tokens live in theme.json (Global Styles). The rules
   below cover composed editorial components that core block
   styles do not express: the four-story hero, article cards,
   rails, bands and print-safe details.
   ============================================================ */

/* ---------- Generic helpers ---------- */
.lw-eyebrow {
	letter-spacing: 0.22em;
}

.has-lw-shadow-hover {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.has-lw-shadow-hover:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--wp--preset--color--lw-black);
}

/* Link that covers its parent card (set position:relative on the parent). */
.lw-stretched-link a::after,
a.lw-stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ============================================================
   HERO — four-story editorial grid

   Important WordPress detail: the class assigned to core/post-template
   is rendered on the <ul>. Each direct <li> is the actual story card.
   The original 1.0 rules styled the <ul> as though it were the card,
   which left the post item at its content height and caused the large
   black gap shown above the lead image. These rules deliberately style
   the list and its direct post items separately.
   ============================================================ */
.lw-hero {
	position: relative;
	overflow: hidden;
}
.lw-hero::after {
	content: "THE RESET";
	position: absolute;
	right: -2%;
	bottom: -0.12em;
	font-family: var(--wp--preset--font-family--lw-heading);
	font-weight: 700;
	font-size: clamp(90px, 16vw, 240px);
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: rgba(0, 0, 0, 0.12);
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}
.lw-hero > * {
	position: relative;
	z-index: 1;
}

/* Both columns share one predictable height on desktop. */
.lw-hero-grid {
	--lw-hero-height: clamp(560px, 48vw, 720px);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 18px;
}
.lw-hero-grid > .wp-block-query,
.lw-hero-grid > .lw-hero-side {
	min-width: 0;
	height: var(--lw-hero-height);
	box-sizing: border-box;
	align-self: stretch;
	/* WordPress flow-layout CSS adds block-gap margin to the second child.
	   That pushed the right column down by one global block gap. */
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.lw-hero-side,
.lw-hero-side > .wp-block-query {
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Reset the Post Template list. It is a list wrapper, not a card. */
.lw-hero-card {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	background: transparent;
}
.lw-hero-card > .wp-block-post,
.lw-hero-card > li {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	background: var(--wp--preset--color--lw-black);
	color: var(--wp--preset--color--lw-white);
}

/* The lead list contains one post and must make that post fill the list. */
.lw-hero-card--lead > .wp-block-post,
.lw-hero-card--lead > li {
	height: 100%;
}

/* The supporting Post Template contains three equal-height post cards. */
.lw-hero-side .lw-hero-card {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* Every wrapper between the card and image fills the complete card. */
.lw-hero-card > li > .wp-block-post-featured-image,
.lw-hero-card > .wp-block-post > .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	background: var(--wp--preset--color--lw-black);
}
.lw-hero-card .wp-block-post-featured-image > a,
.lw-hero-card .wp-block-post-featured-image picture {
	display: block;
	width: 100%;
	height: 100%;
}
.lw-hero-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

/* A separate overlay on every story preserves text contrast. */
.lw-hero-card > li::after,
.lw-hero-card > .wp-block-post::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(16, 25, 19, 0.94) 0%,
		rgba(16, 25, 19, 0.64) 34%,
		rgba(16, 25, 19, 0.20) 64%,
		rgba(16, 25, 19, 0.04) 100%
	);
}
.lw-hero-card > li:hover .wp-block-post-featured-image img,
.lw-hero-card > .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
}

/* All editorial content sits above the photograph and overlay. */
.lw-hero-card > li > :not(.wp-block-post-featured-image),
.lw-hero-card > .wp-block-post > :not(.wp-block-post-featured-image) {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

/* Category chip is anchored to the top-left regardless of inline padding. */
.lw-hero-card .lw-cat-chip {
	position: absolute !important;
	top: clamp(18px, 2vw, 28px);
	left: clamp(18px, 2vw, 28px);
	z-index: 3 !important;
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
}
.lw-cat-chip .wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: var(--wp--preset--color--lw-acid);
	color: var(--wp--preset--color--lw-black) !important;
	padding: 8px 11px;
}
.lw-cat-chip .wp-block-post-terms a {
	color: var(--wp--preset--color--lw-black) !important;
	text-decoration: none;
}
.lw-cat-chip .wp-block-post-terms__separator {
	display: none;
}

/* Make the title the first element in the bottom content stack. */
.lw-hero-card .wp-block-post-title {
	margin-top: auto;
	margin-bottom: 8px;
	padding-top: 92px;
	text-wrap: balance;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.48);
}
.lw-hero-card .wp-block-post-title,
.lw-hero-card .wp-block-post-title a {
	color: var(--wp--preset--color--lw-white) !important;
	text-decoration: none;
}
.lw-hero-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--lw-acid) !important;
}
.lw-hero-card .wp-block-post-excerpt {
	margin-top: 0;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.lw-hero-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.lw-hero-card .wp-block-post-date {
	margin-top: 0;
	color: rgba(255, 255, 255, 0.78) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.lw-hero-card .wp-block-post-date a {
	color: inherit !important;
	text-decoration: none;
}

/* Supporting cards need compact titles but must never hide them. */
.lw-hero-side .wp-block-post-title {
	margin-bottom: 5px;
	padding-top: 76px;
	font-size: clamp(17px, 1.45vw, 22px) !important;
	line-height: 1.08;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.lw-hero-side .wp-block-post-date {
	margin-bottom: 0;
}

/* A post without a featured image remains an intentional branded card. */
.lw-hero-card > li:not(.has-post-thumbnail)::before,
.lw-hero-card > .wp-block-post:not(.has-post-thumbnail)::before {
	content: "THE RESET";
	position: absolute;
	inset: auto 5% 6% auto;
	z-index: 0;
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: clamp(54px, 8vw, 120px);
	font-weight: 700;
	line-height: 0.8;
	color: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.lw-topic-spotlight-empty {
	display: none !important;
}

/* The topic spotlight only appears once it has a complete four-post set. */
.lw-topic-spotlight .lw-topic-lead-query,
.lw-topic-spotlight .lw-topic-lead-query .lw-hero-card,
.lw-topic-spotlight .lw-topic-lead-query .lw-hero-card > .wp-block-post,
.lw-topic-spotlight .lw-topic-lead-query .lw-hero-card > li {
	min-height: 420px;
}
.lw-topic-spotlight .lw-topic-lead-query,
.lw-topic-spotlight .lw-topic-lead-query .lw-hero-card {
	height: 100%;
}

/* ============================================================
   POST CARDS (Latest intelligence, archives, related)
   ============================================================ */
.lw-card {
	background: var(--wp--preset--color--lw-cream);
	border: 1px solid var(--wp--preset--color--lw-line);
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lw-card:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--wp--preset--color--lw-black);
}
.lw-card .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--lw-black);
	margin: 0;
}
.lw-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.lw-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.lw-card .wp-block-post-title a { text-decoration: none; }
.lw-card .wp-block-post-title a:hover { color: var(--wp--preset--color--lw-red); }

.lw-read-more {
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--wp--preset--color--lw-red);
	padding-bottom: 2px;
	text-decoration: none;
}
.lw-read-more:hover { color: var(--wp--preset--color--lw-red); }

/* Section heading rule */
.lw-section-head {
	border-bottom: 3px solid var(--wp--preset--color--lw-black);
	padding-bottom: 14px;
}

/* ============================================================
   SCALP STATUS — category cards
   ============================================================ */
.lw-status-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.lw-status-card {
	background: var(--wp--preset--color--lw-black);
	border: 2px solid var(--wp--preset--color--lw-black);
	color: var(--wp--preset--color--lw-white);
	padding: 26px 20px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.lw-status-card:hover {
	background: var(--wp--preset--color--lw-red);
	border-color: var(--wp--preset--color--lw-red);
}
.lw-status-card a { text-decoration: none; color: inherit; }
.lw-status-card .lw-status-num {
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--lw-acid);
}
.lw-status-card:hover .lw-status-num { color: var(--wp--preset--color--lw-white); }

/* ============================================================
   PRODUCT BAND / BRIDGE CARDS / NEWSLETTER
   ============================================================ */
.lw-product-band { position: relative; overflow: hidden; }

.lw-bridge-card {
	border: 2px solid var(--wp--preset--color--lw-black);
	background: var(--wp--preset--color--lw-cream);
	transition: background 0.18s ease, color 0.18s ease;
	height: 100%;
}
.lw-bridge-card:hover {
	background: var(--wp--preset--color--lw-black);
	color: var(--wp--preset--color--lw-white);
}
.lw-bridge-card:hover .has-lw-red-color { color: var(--wp--preset--color--lw-acid) !important; }
.lw-bridge-card a { text-decoration: none; }

.lw-newsletter {
	position: relative;
	overflow: hidden;
}
.lw-newsletter::before {
	content: "?";
	position: absolute;
	right: 4%;
	top: -0.35em;
	font-family: var(--wp--preset--font-family--lw-heading);
	font-weight: 700;
	font-size: clamp(200px, 30vw, 420px);
	color: rgba(0, 0, 0, 0.14);
	line-height: 1;
	pointer-events: none;
}
.lw-newsletter > * { position: relative; }

/* ============================================================
   RAIL (Ingredient edit — horizontal scroll)
   ============================================================ */
.lw-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 320px);
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 16px;
	scroll-snap-type: x mandatory;
}
.lw-rail > * { scroll-snap-align: start; }
.lw-rail .wp-block-post-featured-image { aspect-ratio: 1 / 1; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.lw-article-meta {
	border-top: 1px solid var(--wp--preset--color--lw-line);
	border-bottom: 1px solid var(--wp--preset--color--lw-line);
}
.lw-article-hero-img img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}
.lw-reading-time { white-space: nowrap; }

/* Content patterns */
.lw-answer-box,
.lw-takeaways,
.lw-tip-box {
	border: 2px solid var(--wp--preset--color--lw-black);
}
.lw-myth { border-left: 4px solid var(--wp--preset--color--lw-red); }
.lw-fact { border-left: 4px solid var(--wp--preset--color--lw-acid); }

.lw-share a {
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--lw-black);
	padding: 8px 16px;
	text-decoration: none;
}
.lw-share a:hover {
	background: var(--wp--preset--color--lw-black);
	color: var(--wp--preset--color--lw-white);
}

.lw-author-box {
	background: var(--wp--preset--color--lw-cream);
	border: 1px solid var(--wp--preset--color--lw-line);
}

.lw-post-cta {
	background: var(--wp--preset--color--lw-black);
	color: var(--wp--preset--color--lw-white);
}

/* ============================================================
   HEADER / NAV polish
   ============================================================ */
.lw-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .lw-header { top: 32px; }
.lw-announce a:hover { color: var(--wp--preset--color--lw-white); }

.lw-header .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.lw-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--lw-red);
}

/* ============================================================
   ACCESSIBILITY / MOTION / MISC
   ============================================================ */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--lw-red);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.lw-status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.lw-hero-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.lw-hero-grid > .wp-block-query {
		height: clamp(440px, 72vw, 600px);
	}
	.lw-hero-grid > .lw-hero-side,
	.lw-hero-side,
	.lw-hero-side > .wp-block-query {
		height: auto;
	}
	.lw-hero-side .lw-hero-card {
		grid-template-rows: none;
		grid-auto-rows: minmax(230px, 34vw);
	}
}
@media (max-width: 620px) {
	.lw-status-grid { grid-template-columns: 1fr 1fr; }
	.lw-hero::after { font-size: 30vw; }
	.lw-hero-grid > .wp-block-query {
		height: clamp(440px, 125vw, 540px);
	}
	.lw-hero-side .lw-hero-card {
		grid-auto-rows: minmax(250px, 72vw);
		gap: 14px;
	}
	.lw-hero-card .lw-cat-chip {
		top: 16px;
		left: 16px;
	}
	.lw-hero-card .wp-block-post-title {
		padding-top: 78px;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.lw-hero-card .wp-block-post-excerpt {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.lw-hero-card .wp-block-post-date {
		padding-left: 18px !important;
		padding-bottom: 18px !important;
	}
	.lw-hero-side .wp-block-post-title {
		font-size: clamp(19px, 5.5vw, 24px) !important;
	}
}
@media (max-width: 380px) {
	.lw-hero-grid > .wp-block-query {
		height: 430px;
	}
	.lw-hero-side .lw-hero-card {
		grid-auto-rows: 245px;
	}
}

/* ---------- Footer lists / breadcrumbs / details ---------- */
.lw-footer-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lw-footer-list a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.lw-footer-list a:hover { color: var(--wp--preset--color--lw-acid); }

.lw-breadcrumbs a { color: inherit; text-decoration: none; }
.lw-breadcrumbs a:hover { color: var(--wp--preset--color--lw-red); }

.wp-block-details {
	border: 1px solid var(--wp--preset--color--lw-line);
	background: var(--wp--preset--color--lw-cream);
	padding: 16px 20px;
	margin-bottom: 8px;
}
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--lw-heading);
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}