/*
Theme Name: ELORA
Theme URI: https://elora.local
Author: ELORA
Description: Custom block theme for the ELORA candles, flowers & gifts store. Editorial, luxury, warm.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 6.8
Text Domain: elora
*/

/* Base reset — without this, custom form elements (textarea, input) that set
   width:100% plus padding/border overflow their container, since the
   browser default box-sizing is content-box. Caught this via a real
   horizontal-overflow bug on the Build Your Gift message textarea. */
*, *::before, *::after {
	box-sizing: border-box;
}
img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Canonical aliases of the editor presets: existing palette slugs remain valid. */
:root {
	color-scheme: only light;
	--elora-navy: var(--wp--preset--color--navy-deep, #0A1225);
	--elora-navy-secondary: var(--wp--preset--color--navy, #16203B);
	--elora-blue-muted: var(--wp--preset--color--navy-light, #2D3E5E);
	--elora-bronze: var(--wp--preset--color--gold-dark, #8C6A3D);
	--elora-gold: var(--wp--preset--color--gold, #C9A96A);
	--elora-gold-light: var(--wp--preset--color--gold-light, #E9D7A5);
	/* Keep the canvas token literal: it must not depend on a generated preset. */
	--elora-ivory: #F7F5F1;
	--elora-font-display: var(--wp--preset--font-family--heading);
	--elora-font-body: var(--wp--preset--font-family--body);
	--elora-text-body: var(--wp--preset--font-size--body);
	--elora-text-display: var(--wp--preset--font-size--display);
	--elora-text-editorial: var(--wp--preset--font-size--editorial);
	--elora-text-section: var(--wp--preset--font-size--section);
	--elora-text-eyebrow: .625rem;
	--elora-tracking-eyebrow: .3em;
	--elora-tracking-ui: .16em;
	--elora-space-xs: var(--wp--preset--spacing--xs);
	--elora-space-sm: var(--wp--preset--spacing--sm);
	--elora-space-md: var(--wp--preset--spacing--md);
	--elora-space-lg: var(--wp--preset--spacing--lg);
	--elora-space-xl: var(--wp--preset--spacing--xl);
	--elora-space-section: var(--wp--preset--spacing--section);
	--elora-container: 82.5rem;
	--elora-container-reading: 58.75rem;
	--elora-gutter: clamp(1rem, 0.45rem + 2.5vw, 2.5rem);
	--elora-rule: color-mix(in srgb, var(--elora-gold) 38%, transparent);
	--elora-rule-subtle: color-mix(in srgb, var(--elora-gold) 25%, transparent);
	--elora-border: 1px solid var(--elora-rule);
	--elora-radius: 0;
	--elora-focus: var(--elora-navy);
	--elora-focus-halo: var(--elora-ivory);
}

/* ELORA uses one fixed brand palette. Keep the document canvas and native
   controls in that light scheme even when the OS prefers dark colors. */
html,
body,
.wp-site-blocks {
	background-color: #F7F5F1;
	color: #16203B;
}

/* Major light surfaces own their paint instead of exposing a transparent
   document canvas. Component styles loaded after this retain ELORA's explicit
   navy sections (header/footer, heroes, gifting story and gift wizard). */
:where(
	.wp-site-blocks > .wp-block-post-content,
	main:not(.elora-gift-wizard),
	main:not(.elora-gift-wizard) > .wp-block-post-content,
	main:not(.elora-gift-wizard) > .wp-block-group,
	main:not(.elora-gift-wizard) > section.wp-block-group,
	main:not(.elora-gift-wizard) > .wp-block-post-content > .wp-block-group,
	main:not(.elora-gift-wizard) > .wp-block-post-content > section.wp-block-group,
	.elora-home,
	.elora-catalog,
	.elora-product-page,
	.elora-commerce-page,
	.elora-account-page,
	.elora-about
) {
	background-color: #F7F5F1;
	color: #16203B;
}

/* Gutenberg's three legacy ELORA light aliases all represent the same exact
   surface. Repeat the authored values here rather than relying only on the
   generated global-styles sheet. */
:where(
	.has-off-white-background-color,
	.has-cream-background-color,
	.has-sand-background-color
) {
	background-color: #F7F5F1;
	color: #16203B;
}

/* Native controls do not consistently inherit the page canvas. This low-
   specificity default covers light pages; component rules still own special
   white, cream, gold and navy controls. The dark gift wizard is excluded. */
:where(main:not(.elora-gift-wizard)) :where(
	input:not([type="button"]):not([type="submit"]):not([type="reset"]),
	select,
	textarea
) {
	background-color: #F7F5F1;
	color: #16203B;
}

/* Opt-in primitives avoid rewriting the layouts of later implementation phases. */
.elora-container {
	width: min(100%, var(--elora-container));
	margin-inline: auto;
	padding-inline: var(--elora-gutter);
}
.elora-container--reading { --elora-container: var(--elora-container-reading); }
.elora-section { padding-block: var(--elora-space-section); }
.elora-stack > * + * { margin-block-start: var(--elora-space-md); }
.elora-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--elora-space-lg);
}
.elora-grid > * { min-width: 0; }
.elora-prose { max-width: 65ch; }
:where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; text-wrap: balance; }
:where(h1, h2, h3, h4, h5, h6) em { color: var(--elora-bronze); font-weight: 300; }
:where(input, select, textarea, button) { font-family: var(--elora-font-body); }
::selection { background: var(--elora-gold-light); color: var(--elora-navy); }
.elora-title { font-size: var(--elora-text-display); line-height: 1.06; }
.elora-editorial-title { font-size: var(--elora-text-editorial); line-height: 1.12; }
.elora-section-title { font-size: var(--elora-text-section); line-height: 1.15; }

/* Phase 1 compatibility: this legacy control sizes its gaps in em. Preserve
   its previous inherited metrics until the separate gift-layout phase. */
.elora-progress-bar { font-size: 15px; font-weight: 300; line-height: 1.9; }