/*
Theme Name: LivWithLuxe Editorial
Theme URI: https://livwithluxe.com/
Author: LivWithLuxe
Description: A fast editorial block theme for feminine beauty, fashion, outfit, and nail inspiration.
Version: 1.0.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: livwithluxe-editorial
*/

:root {
	--lwl-ink: #251d1c;
	--lwl-wine: #7f2434;
	--lwl-wine-dark: #5d1725;
	--lwl-blush: #ead1ce;
	--lwl-rosewater: #f7ece8;
	--lwl-ivory: #fbf7ef;
	--lwl-paper: #fffdf8;
	--lwl-sage: #8a927b;
	--lwl-line: #d9cec3;
	--lwl-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--lwl-sans: "Avenir Next", "Century Gothic", Futura, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 88% 12%, rgba(234, 209, 206, 0.46), transparent 24rem),
		var(--lwl-ivory);
	color: var(--lwl-ink);
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.wp-site-blocks {
	overflow: clip;
}

.lwl-topline {
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lwl-site-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--lwl-line);
	background: rgba(251, 247, 239, 0.94);
	backdrop-filter: blur(14px);
}

.lwl-brand-row {
	min-height: 86px;
}

.lwl-site-title a {
	text-decoration: none;
}

.lwl-primary-nav a {
	font-family: var(--lwl-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lwl-primary-nav .wp-block-navigation-item__content {
	padding: 0.45rem 0;
}

.lwl-hero {
	position: relative;
	isolation: isolate;
	min-height: min(720px, 82vh);
	border-bottom: 1px solid var(--lwl-line);
}

.lwl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(115deg, rgba(251, 247, 239, 0.98) 0 56%, rgba(234, 209, 206, 0.7) 56% 100%),
		repeating-linear-gradient(90deg, transparent 0 74px, rgba(127, 36, 52, 0.05) 74px 75px);
}

.lwl-hero::after {
	content: "";
	position: absolute;
	right: -8rem;
	top: -8rem;
	z-index: -1;
	width: 34rem;
	height: 34rem;
	border: 1px solid rgba(127, 36, 52, 0.24);
	border-radius: 50%;
	box-shadow: 0 0 0 5rem rgba(255, 253, 248, 0.24), 0 0 0 5.1rem rgba(127, 36, 52, 0.12);
}

.lwl-eyebrow {
	font-family: var(--lwl-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lwl-hero-title {
	max-width: 13ch;
	font-size: clamp(3.5rem, 8vw, 7.5rem) !important;
	letter-spacing: -0.055em;
	line-height: 0.9 !important;
}

.lwl-hero-copy {
	max-width: 37rem;
	font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.lwl-editorial-card {
	position: relative;
	min-height: 430px;
	border: 1px solid rgba(255, 253, 248, 0.85);
	background:
		linear-gradient(rgba(127, 36, 52, 0.88), rgba(93, 23, 37, 0.95)),
		repeating-linear-gradient(135deg, transparent 0 20px, rgba(255, 255, 255, 0.08) 20px 21px);
	box-shadow: 24px 24px 0 rgba(127, 36, 52, 0.1);
	color: var(--lwl-paper);
}

.lwl-editorial-mark {
	font-family: var(--lwl-display);
	font-size: clamp(10rem, 22vw, 18rem);
	font-style: italic;
	font-weight: 400;
	line-height: 0.65;
	opacity: 0.17;
}

.lwl-section-heading {
	max-width: 13ch;
	font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
	letter-spacing: -0.04em;
	line-height: 0.98 !important;
}

.lwl-category-card {
	position: relative;
	min-height: 290px;
	border: 1px solid var(--lwl-line);
	background: var(--lwl-paper);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.lwl-category-card::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: linear-gradient(135deg, transparent 47%, currentColor 48% 51%, transparent 52%);
	opacity: 0.35;
}

.lwl-category-card:hover {
	transform: translateY(-7px);
	border-color: var(--lwl-wine);
	box-shadow: 0 20px 50px rgba(37, 29, 28, 0.1);
}

.lwl-category-card.is-wine {
	background: var(--lwl-wine);
	color: var(--lwl-paper);
}

.lwl-category-card.is-blush {
	background: var(--lwl-blush);
}

.lwl-category-card.is-ink {
	background: var(--lwl-ink);
	color: var(--lwl-paper);
}

.lwl-category-card a {
	color: inherit;
}

.lwl-post-grid .wp-block-post {
	border-top: 1px solid var(--lwl-line);
	padding-top: 1rem;
}

.lwl-post-grid .wp-block-post-featured-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--lwl-rosewater);
}

.lwl-post-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.lwl-post-grid .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
}

.lwl-post-meta,
.lwl-post-meta a {
	font-family: var(--lwl-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lwl-cta {
	position: relative;
	overflow: hidden;
	background: var(--lwl-ink);
	color: var(--lwl-paper);
}

.lwl-cta::after {
	content: "LUXE";
	position: absolute;
	right: -0.08em;
	top: -0.22em;
	font-family: var(--lwl-display);
	font-size: clamp(7rem, 22vw, 19rem);
	font-style: italic;
	opacity: 0.045;
}

.lwl-article-shell {
	background: var(--lwl-paper);
	box-shadow: 0 24px 70px rgba(37, 29, 28, 0.07);
}

.lwl-article-header {
	border-bottom: 1px solid var(--lwl-line);
}

.lwl-article-content > * {
	margin-block-start: 1.4em;
}

.lwl-article-content h2 {
	margin-block-start: 2.1em;
	font-size: clamp(2rem, 4vw, 3rem);
}

.lwl-article-content h3 {
	margin-block-start: 1.8em;
}

.lwl-article-content a {
	color: var(--lwl-wine-dark);
}

.lwl-disclosure {
	border-left: 3px solid var(--lwl-wine);
	background: var(--lwl-rosewater);
}

.lwl-site-footer {
	border-top: 1px solid rgba(255, 253, 248, 0.17);
	background: var(--lwl-ink);
	color: var(--lwl-paper);
}

.lwl-site-footer a {
	color: inherit;
}

.lwl-footer-links a {
	text-decoration: none;
}

.wp-block-button__link {
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.lwl-hero {
		min-height: auto;
	}

	.lwl-hero::before {
		background: linear-gradient(165deg, rgba(251, 247, 239, 0.98) 0 68%, rgba(234, 209, 206, 0.76) 68% 100%);
	}

	.lwl-editorial-card {
		min-height: 330px;
	}
}

@media (max-width: 600px) {
	.lwl-brand-row {
		min-height: 70px;
	}

	.lwl-hero-title {
		font-size: clamp(3.25rem, 17vw, 5.2rem) !important;
	}

	.lwl-category-card {
		min-height: 230px;
	}
}

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

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}