/*
Theme Name: Lume
Theme URI: https://example.com/lume
Author: Your Studio Name
Author URI: https://example.com
Description: A botanical-luxury WooCommerce block theme for Lume by Hareem Fatima. Clean beauty, soft gold accents, and serene whitespace, built on theme.json with a lightweight, jQuery-free front end.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lume
Tags: e-commerce, full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, editor-style, style-variations, translation-ready, wide-blocks
*/

/*
 * style.css holds only what theme.json cannot express: focus states,
 * motion, sticky/transparent header behaviour, and small utilities.
 * Larger component CSS lives in /assets/css and loads per block/template.
 * Enqueue this file from functions.php (Step 2).
 */

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

::selection {
	background: var(--wp--preset--color--sage-mist);
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-deep);
	outline-offset: 3px;
}

img {
	height: auto;
	max-width: 100%;
}

/* ---------- Interaction ---------- */
:where(.wp-element-button, .wp-block-button__link, a) {
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Brand mark (header + footer) ---------- */
/* Header and footer both render the real lockup artwork (wordmark + "by
 * Hareem Fatima" + leaf) as a plain image, hardcoded from theme assets —
 * never WordPress's Site Logo setting and never typed Site Title/Tagline
 * text standing in for it. That typed-text fallback is what let the header
 * show plain "by Hareem Fatima" text instead of the client's actual logo. */
.lume-brand__logo {
	margin: 0;
}

/* The header is the brand's main stage, so its logo is deliberately the
 * larger of the two: sized off the header bar itself (112–168px tall across
 * viewports) rather than a flat value, so it always fills the taller header
 * introduced below without ever exceeding it (which would otherwise create
 * a gap under the transparent header variant, whose negative margin is
 * calculated from this same header-height token). */
.lume-brand__logo img {
	width: auto !important;
	height: auto;
	max-height: calc(var(--wp--custom--header--height) - 32px);
	max-width: 100%;
}

.lume-brand__logo a {
	display: inline-block;
}

/* The footer logo is a normal sign-off mark, not a second hero moment —
 * noticeably smaller than the header's, on purpose. */
.lume-footer__lockup {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.lume-footer__lockup img {
	width: auto !important;
	height: auto;
	max-height: 100px;
}

.lume-footer__lockup a {
	display: inline-block;
}

/* ---------- Brand story ---------- */
.lume-story > * {
	margin-block: 0;
}

.lume-story > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.lume-story .is-style-lume-script {
	margin-block-end: -0.25em;
}

/* ---------- Announcement bar ---------- */
.lume-announcement {
	padding: 0.6rem var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.lume-announcement__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	text-align: center;
}

/* ---------- Header ---------- */
/*
 * The sticky element is the template-part wrapper (<header class="wp-block-template-part">),
 * not .lume-header: sticky only works inside a tall parent, and the wrapper's
 * parent is the whole page. Templates must call the part with tagName "header".
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--z-index--header);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Transparent variant: pull the page up under the header so the hero sits behind it. */
.wp-site-blocks > header.wp-block-template-part:has(.lume-header--transparent) {
	margin-block-end: calc(var(--wp--custom--header--height) * -1);
}

/* Kill the root blockGap between top-level template parts: it was leaving a
 * visible white strip between the announcement bar and the header. !important
 * because WordPress can apply this spacing as an inline style on the block
 * wrapper, which a plain rule can't out-specificity. */
.wp-site-blocks > :is(header, main, footer) {
	margin-block-start: 0 !important;
}

.lume-header {
	padding-inline: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.lume-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Three columns keep the logo optically centred whatever sits either side. */
.lume-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: 1440px;
	min-height: var(--wp--custom--header--height);
	margin-inline: auto;
}

.lume-header__start,
.lume-header__end {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.lume-header__end {
	justify-content: flex-end;
}

/* Groups use flow layout, whose block gap would push flex/grid children out of line. */
.lume-header .lume-header__inner > *,
.lume-header .lume-header__start > *,
.lume-header .lume-header__end > *,
.lume-header .lume-brand > *,
.lume-footer .lume-footer__grid > * {
	margin-block: 0;
}

/* Brand lockup wrapper: centers the logo image within the header's middle column. */
.lume-brand {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Search: a bordered pill, not a faint underline — the client flagged the old
 * version as hard to notice, so this needs to read clearly in both header
 * states (over a photo and on a solid scrolled bar), not just be present. */
.lume-search--desktop {
	width: min(22rem, 100%);
}

.lume-search--mobile {
	display: none;
}

.lume-search .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	padding-inline-start: var(--wp--preset--spacing--30);
	overflow: hidden;
	transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

.lume-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--deep-sage);
	box-shadow: 0 0 0 3px rgb(82 99 77 / 0.12);
}

.lume-search .wp-block-search__input {
	padding: 0.6rem 0.25rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.lume-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.lume-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 0.85rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--deep-sage);
	color: var(--wp--preset--color--base);
}

.lume-search .wp-block-search__button svg {
	width: 1.05rem;
	height: 1.05rem;
}

.lume-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* The mobile control is button-only (no visible wrapper until tapped), so it
 * needs its own rounded shape rather than the pill wrapper's radius. */
.lume-search--mobile .wp-block-search__button {
	border-radius: var(--wp--custom--radius--pill);
}

.lume-cart .wc-block-mini-cart__button {
	color: inherit;
}

@media (max-width: 959px) {
	.lume-search--desktop {
		display: none;
	}

	.lume-search--mobile {
		display: block;
	}
}

/* Transparent variant: white over the hero until the page scrolls. */
.lume-header--transparent {
	background: transparent;
	color: var(--wp--preset--color--base);
}

.lume-header--transparent:not(.is-scrolled) a {
	color: inherit;
}

.lume-header--transparent:not(.is-scrolled) .lume-brand__logo img {
	filter: brightness(0) invert(1);
}

.lume-header--transparent.is-scrolled {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Footer ---------- */
.lume-footer {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--cream);
}

.lume-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	max-width: 1440px;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.lume-footer__grid {
		grid-template-columns: 1fr;
	}
}

.lume-footer .lume-brand {
	align-items: flex-start;
	text-align: left;
}

.lume-footer__blurb {
	max-width: 28ch;
	color: var(--wp--preset--color--muted);
}

.lume-footer .lume-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--wp--preset--color--gold-deep);
}

.lume-footer__nav {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-social-links.lume-social.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--contrast);
}

.wp-block-social-links.lume-social.is-style-logos-only .wp-social-link:hover {
	color: var(--wp--preset--color--deep-sage);
}

.lume-footer__bottom {
	max-width: 1440px;
	margin: var(--wp--preset--spacing--70) auto 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid;
	border-image: var(--wp--preset--gradient--gold-rule) 1;
}

.lume-footer__bottom p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Gold rule (separator block) ---------- */
.wp-block-separator.lume-gold-rule {
	width: 4rem;
	height: 1px;
	margin-inline: auto;
	border: 0;
	background: var(--wp--preset--gradient--gold-rule);
	opacity: 1;
}

/* ---------- Hero ---------- */
/* Charcoal shows only if the image fails to load, so the white text stays legible. */
.lume-hero.wp-block-cover {
	padding-inline: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--contrast);
}

.lume-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-block:
		calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--60))
		var(--wp--preset--spacing--70);
}

.lume-hero .wp-block-cover__inner-container > .wp-block-group > * {
	margin-block: 0;
}

.lume-hero .wp-block-cover__inner-container > .wp-block-group > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* The script line is the hero's one headline now (no separate serif H1
 * beside it), so it needs to carry more visual weight than the shared
 * script-lg token gives it elsewhere (e.g. the brand-story byline). */
.lume-hero__statement {
	margin: 0;
	font-size: clamp(3rem, 2.1rem + 3.6vw, 5.75rem);
}

/* Hero links must stay readable on the image: outline button already sets its own colour. */
.lume-hero .wp-block-button__link:hover {
	background: var(--wp--preset--color--deep-sage);
	border-color: var(--wp--preset--color--deep-sage);
	color: var(--wp--preset--color--base);
}

/* ---------- Featured categories ---------- */
.lume-categories .wp-block-separator {
	margin-block: var(--wp--preset--spacing--40) 0;
}

/* Full-bleed viewport so the strip can run edge to edge, independent of the
 * section's own constrained/wide content width. */
.lume-cat-marquee {
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--50);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* The track holds the card set twice back to back; animating it exactly -50%
 * of its own width loops seamlessly from the second copy back to the first. */
.lume-categories .lume-cat-grid {
	display: flex;
	width: max-content;
	gap: var(--wp--preset--spacing--50);
	animation: lume-marquee 42s linear infinite;
}

.lume-categories .lume-cat-grid > * {
	flex: 0 0 min(78vw, 360px);
	margin-block: 0;
}

/* Pausing on hover/focus is what makes a moving strip usable: it gives
 * someone time to actually read a card or click its link. */
.lume-cat-marquee:hover .lume-cat-grid,
.lume-cat-marquee:focus-within .lume-cat-grid {
	animation-play-state: paused;
}

@keyframes lume-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lume-categories .lume-cat-grid {
		animation: none;
	}

	.lume-cat-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.lume-cat-card.wp-block-cover {
	padding: 0;
	background: var(--wp--preset--color--sage);
}

/* Text pinned to the bottom; the link's ::after stretches over the whole card. */
.lume-cat-card .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
}

.lume-cat-card .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.lume-cat-card .wp-block-heading {
	margin-block-end: 0.25em;
}

.lume-cat-card__link {
	margin-block-start: var(--wp--preset--spacing--30);
}

.lume-cat-card a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.lume-cat-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lume-cat-card a:focus-visible {
	outline: 0;
}

.lume-cat-card a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -8px;
}

.lume-cat-card .wp-block-cover__image-background {
	transition: transform var(--wp--custom--transition--slow);
}

.lume-cat-card:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* ---------- Utilities ---------- */
.lume-script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--script);
	line-height: 1.1;
	color: var(--wp--preset--color--gold-deep);
}

.lume-gold-rule {
	width: 4rem;
	height: 1px;
	margin-inline: auto;
	border: 0;
	background: var(--wp--preset--gradient--gold-rule);
}

.lume-surface-cream {
	background: var(--wp--preset--color--cream);
}

.lume-surface-wash {
	background: var(--wp--preset--gradient--watercolor-wash);
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}