/* ---------------------------------------------------------------------------
   Allumee brand layer.
   Colors/typography come from theme.json presets; this file only carries
   structure that block attributes cannot express cleanly.
   Palette rules enforced here (brand/Brand-Identity.md section 2):
     - Forge Smoke is structural only (borders/dividers), never text.
     - Lamp Glow is a highlight, never a large field, never on limestone text.
------------------------------------------------------------------------- */

:root {
	--allumee-border: var(--wp--preset--color--forge-smoke, #3A3A35);
	--allumee-glow: var(--wp--preset--color--lamp-glow, #C9922E);
	--allumee-limestone: var(--wp--preset--color--warm-limestone, #EDE6D8);
	--allumee-ash: var(--wp--preset--color--ash, #8C887E);
	--allumee-night: var(--wp--preset--color--night, #12120F);
	--allumee-iron: var(--wp--preset--color--wrought-iron, #1A1A18);
}

body {
	background-color: var(--allumee-night);
	color: var(--allumee-limestone);
	-webkit-font-smoothing: antialiased;
}

/* ---- Eyebrow / label type step ---- */
.allumee-eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--allumee-glow);
	margin-bottom: 0.75rem;
}

.allumee-meta {
	color: var(--allumee-ash);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
}

/* ---- Header ------------------------------------------------------------ */
.allumee-header {
	border-bottom: 1px solid var(--allumee-border);
	position: relative;
	z-index: 20;
}

.allumee-header .wp-block-site-logo img {
	height: auto;
	max-width: 260px;
	width: 100%;
	min-width: 180px; /* logo-horizontal.svg minimum legible width */
	display: block;
}

.allumee-header__bar {
	gap: var(--wp--preset--spacing--40);
}

.allumee-header__utility {
	gap: var(--wp--preset--spacing--30);
}

.allumee-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-start;
}

.allumee-header .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}

.allumee-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--allumee-glow);
}

.allumee-header .wp-block-search__inside-wrapper {
	border: 1px solid var(--allumee-border);
	border-radius: 2px;
	background: var(--allumee-iron);
	padding: 2px;
}

.allumee-header .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--allumee-limestone);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	padding: 0.45rem 0.6rem;
	min-width: 0;
}

.allumee-header .wp-block-search__input::placeholder {
	color: var(--allumee-ash);
	opacity: 1;
}

.allumee-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--allumee-glow);
	padding: 0.35rem 0.5rem;
}

.allumee-header .wp-block-search__button svg {
	fill: currentColor;
}

.allumee-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
	border: 1px solid var(--allumee-border);
	border-radius: 2px;
	padding: 0.5rem 0.85rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--allumee-limestone);
}

.allumee-cart-link:hover,
.allumee-cart-link:focus {
	border-color: var(--allumee-glow);
	color: var(--allumee-glow);
	text-decoration: none;
}

/* ---- Hero -------------------------------------------------------------- */
.allumee-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--allumee-border);
}

.allumee-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 140%;
	background: radial-gradient(ellipse at 50% 18%, rgba(201, 146, 46, 0.20) 0%, rgba(201, 146, 46, 0.05) 45%, rgba(18, 18, 15, 0) 72%);
	pointer-events: none;
}

.allumee-hero > * {
	position: relative;
	z-index: 1;
}

.allumee-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-weight: 400;
	max-width: 16ch;
}

.allumee-hero__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	max-width: 58ch;
	color: var(--allumee-limestone);
}

.allumee-hero__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: 0.875rem;
	color: var(--allumee-ash);
}

.allumee-hero__points li::before {
	content: "\2014";
	color: var(--allumee-glow);
	margin-right: 0.5rem;
}

/* ---- Section scaffolding ---------------------------------------------- */
.allumee-section {
	border-top: 1px solid var(--allumee-border);
}

.allumee-section__head {
	max-width: 62ch;
}

/* ---- Category tiles ---------------------------------------------------- */
.allumee-tiles {
	display: grid;
	/* 280px min => 4 columns at the 1280px content width, so seven tiles land
	   4 + 3 instead of a 5 + 2 rag. Still collapses to one column on phones. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--allumee-border);
	border: 1px solid var(--allumee-border);
}

.allumee-tile {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	min-height: 210px;
	padding: 1.5rem;
	background: var(--allumee-iron);
	color: var(--allumee-limestone);
	text-decoration: none;
	transition: background-color 120ms ease-out;
}

.allumee-tile:hover,
.allumee-tile:focus {
	background: #232320;
	text-decoration: none;
	color: var(--allumee-limestone);
}

.allumee-tile__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.563rem;
	line-height: 1.25;
	font-weight: 500;
}

.allumee-tile__note {
	font-size: 0.8rem;
	color: var(--allumee-ash);
	letter-spacing: 0.01em;
}

.allumee-tile__cue {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--allumee-glow);
}

.allumee-tile--feature {
	background: linear-gradient(180deg, #1F1D17 0%, var(--allumee-iron) 100%);
}

/* ---- Trust row --------------------------------------------------------- */
.allumee-trust {
	display: grid;
	/* 340px min => 3 columns at the 1280px content width: the three-item kit
	   grid fills one clean row and the six-item trust grid fills two. */
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.5rem;
}

.allumee-trust__item {
	border-top: 2px solid var(--allumee-glow);
	padding-top: 1rem;
}

.allumee-trust__title {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin: 0 0 0.4rem;
	color: var(--allumee-limestone);
}

.allumee-trust__body {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--allumee-ash);
	margin: 0;
}

/* ---- Kits -------------------------------------------------------------- */
.allumee-kits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.allumee-kit {
	border: 1px solid var(--allumee-border);
	background: var(--allumee-iron);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.allumee-kit__frame {
	aspect-ratio: 4 / 3;
	border: 1px dashed var(--allumee-border);
	background: linear-gradient(180deg, #16160F 0%, #1A1A18 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--allumee-ash);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

.allumee-kit__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.563rem;
	line-height: 1.25;
	font-weight: 500;
	margin: 0;
}

.allumee-kit__spec {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--allumee-ash);
}

.allumee-kit__spec li::before {
	content: "\00B7";
	color: var(--allumee-glow);
	margin-right: 0.5rem;
}

.allumee-kit__price {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.25rem;
	color: var(--allumee-glow);
	margin: auto 0 0;
	padding-top: 0.5rem;
}

/* ---- Reviews ----------------------------------------------------------- */
.allumee-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.allumee-review {
	border-left: 2px solid var(--allumee-border);
	padding-left: 1.25rem;
}

.allumee-review__stars {
	color: var(--allumee-glow);
	letter-spacing: 0.2em;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.allumee-review__quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--allumee-limestone);
	margin: 0 0 0.6rem;
}

.allumee-review__by {
	font-size: 0.8rem;
	color: var(--allumee-ash);
	margin: 0;
}

/* ---- Footer ------------------------------------------------------------ */
.allumee-footer {
	border-top: 1px solid var(--allumee-border);
	background: var(--allumee-iron);
}

.allumee-footer__grid {
	display: grid;
	grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
	gap: 2.5rem;
	align-items: start;
}

.allumee-footer .wp-block-site-logo img {
	max-width: 240px;
	min-width: 180px;
	height: auto;
	display: block;
	margin-bottom: 1.25rem;
}

.allumee-footer__heading {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--allumee-glow);
	margin: 0 0 1rem;
}

.allumee-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 2;
}

.allumee-footer__list a {
	color: var(--allumee-limestone);
	text-decoration: none;
}

.allumee-footer__list a:hover,
.allumee-footer__list a:focus {
	color: var(--allumee-glow);
	text-decoration: underline;
}

.allumee-footer address {
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--allumee-limestone);
	margin: 0 0 0.75rem;
}

.allumee-footer address a {
	color: var(--allumee-limestone);
	text-decoration: none;
}

.allumee-footer address a:hover {
	color: var(--allumee-glow);
}

.allumee-footer__legal-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--allumee-limestone);
	margin: 0 0 0.5rem;
}

.allumee-footer__bottom {
	border-top: 1px solid var(--allumee-border);
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--allumee-ash);
}

/* ---- Utility ----------------------------------------------------------- */
.allumee-placeholder {
	color: var(--allumee-ash);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	letter-spacing: 0;
}

@media (max-width: 781px) {
	.allumee-header__bar {
		row-gap: var(--wp--preset--spacing--30);
	}

	.allumee-hero__title {
		max-width: 100%;
	}

	.allumee-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.allumee-tile {
		min-height: 160px;
	}
}

/* ---------------------------------------------------------------------------
   Full-bleed reconciliation.
   Measured on the live render: .wp-site-blocks and body both compute to
   padding 0, and <main> already sits at x=0 across the full viewport, so
   header and footer need their own gutter and NO negative margin (a negative
   margin here pushed the footer 24px past both viewport edges).
------------------------------------------------------------------------- */
.allumee-header,
.allumee-footer {
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--wp--preset--spacing--40, 1.5rem);
	padding-right: var(--wp--preset--spacing--40, 1.5rem);
}

/* Core's flow layout injects margin-block-start on every child; the CSS grids
   above supply their own gap, so neutralise it on the grid containers. */
.allumee-footer__grid > *,
.allumee-tiles > *,
.allumee-trust > *,
.allumee-kits > *,
.allumee-reviews > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.allumee-section > .wp-block-group,
.allumee-hero > * {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.allumee-section > .wp-block-html,
.allumee-section > .allumee-tiles,
.allumee-section > .allumee-trust,
.allumee-section > .allumee-kits,
.allumee-section > .allumee-reviews,
.allumee-section > .wp-block-buttons {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.allumee-hero__points,
.allumee-footer__bottom {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.allumee-footer__grid,
.allumee-footer__bottom {
	max-width: 1280px;
}

/* ---- Header: two-row lockup (brand row, then the category silo nav) ---- */
.allumee-header__nav {
	border-top: 1px solid var(--allumee-border);
	margin-top: 0.75rem;
	padding-top: 0.5rem;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.allumee-header__nav > * {
	margin-block-start: 0;
}

.allumee-header__utility .wp-block-search {
	margin-bottom: 0;
}

.allumee-header .wp-block-navigation .wp-block-navigation__responsive-container-open,
.allumee-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
	color: var(--allumee-limestone);
}

.allumee-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--allumee-night);
	color: var(--allumee-limestone);
}

/* ---- Corrections after first render pass ------------------------------- */

/* Tiles: hairline grid without a Forge Smoke slab where the last row is
   short. Overlapping 1px box-shadows meet exactly in the 1px gap. */
.allumee-tiles {
	background: transparent;
	border: 0;
	gap: 1px;
}

.allumee-tile {
	box-shadow: 0 0 0 1px var(--allumee-border);
}

/* Footer bottom bar: keep the mailto on-palette instead of UA blue. */
.allumee-footer__bottom a {
	color: var(--allumee-limestone);
	text-decoration: none;
}

.allumee-footer__bottom a:hover,
.allumee-footer__bottom a:focus {
	color: var(--allumee-glow);
	text-decoration: underline;
}

/* Keep the whole primary nav (plus WooCommerce's customer-account icon)
   on one row at desktop width. */
.allumee-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 0.78125rem;
	letter-spacing: 0.07em;
}

@media (min-width: 1200px) {
	.allumee-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
	}
}

/* Mobile: the search field must not push the cart off the row. */
@media (max-width: 781px) {
	.allumee-header__bar {
		justify-content: flex-start;
	}

	.allumee-header__utility {
		flex: 1 1 100%;
	}

	.allumee-header__utility .wp-block-search {
		flex: 1 1 auto;
		width: auto !important;
	}

	.allumee-header .wp-block-search__input {
		width: 100%;
	}

	.allumee-header__nav {
		margin-top: 0.5rem;
	}
}

/* WooCommerce injects its customer-account block as a SIBLING immediately
   after </nav> inside this group, so the group has to be a row or the icon
   lands on a line of its own. */
.allumee-header__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.allumee-header__nav > .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

.allumee-header__nav .wp-block-woocommerce-customer-account {
	flex: 0 0 auto;
	color: var(--allumee-limestone);
}

.allumee-header__nav .wc-block-customer-account__link {
	color: var(--allumee-limestone);
}

.allumee-header__nav .wc-block-customer-account__link:hover,
.allumee-header__nav .wc-block-customer-account__link:focus {
	color: var(--allumee-glow);
	text-decoration: none;
}