/* ============================================================
   Dark front page. All rules scoped to body.home so interior pages
   are untouched. Clears the theme's white surfaces so the fixed orb
   field (#mlx-orbs, z-index:0) shows through, and flips text + nav to
   light. Colours mirror the hero intro palette.
   ============================================================ */

:root {
	--mlx-ink: #f4ede4;    /* headings / strong text */
	--mlx-body: #cfc6ba;   /* body copy */
	--mlx-tan: #d9b487;    /* accents / eyebrows */
	--mlx-red: #c0392b;    /* brand red */
	--mlx-field: #0a0b14;  /* dark field base */
}

/* Base: dark page, so any gap always reads dark, never white. */
body.home {
	background: var(--mlx-field) !important;
	color: var(--mlx-body);
}

/* Clear the theme's opaque wrappers so the orb field shows behind content. */
body.home .container-wrap,
body.home #ajax-content-wrap,
body.home #page-container,
body.home main {
	background: transparent !important;
}

/* Lift the content above the fixed orb field (which is z-index:0). */
body.home .container-wrap,
body.home #ajax-content-wrap {
	position: relative;
	z-index: 1;
}

/* Text: headings bright, body warm-grey. Body colour cascades by
   inheritance; headings usually set their own colour in the theme, so
   they get an explicit rule. */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6 {
	color: var(--mlx-ink);
}
body.home p,
body.home li,
body.home blockquote {
	color: var(--mlx-body);
}

/* Links: warm red tint, but leave real buttons alone (handled by their
   own block styles / the red callout). */
body.home a:not(.nectar-button):not(.wp-block-button__link):not(.button) {
	color: #e0857a;
}
body.home a:not(.nectar-button):not(.wp-block-button__link):not(.button):hover {
	color: var(--mlx-tan);
}

/* Header / nav: the Nectar bar paints white (and a white "scrolled" state) by
   default. Replace it with a translucent dark tint so the parked globe, cream
   wordmark, and menu all read on it over the orb field. */
body.home #header-outer,
body.home #page-header-bg,
body.home header#top {
	background: transparent !important;
	box-shadow: none !important;
}
body.home #nectar-nav,
body.home #nectar-nav.small-nav,
body.home #nectar-nav.scrolled-down {
	background: rgba(10, 11, 20, 0.55) !important;
	box-shadow: none !important;
}

/* Taller header, everything vertically centred. #top is a <header> wrapping a
   single .container; flex-centre both so the logo, wordmark and menu sit in the
   middle of the 110px bar. */
body.home #top {
	min-height: 110px;
	display: flex !important;
	align-items: center;
}
body.home #top > .container {
	display: flex;
	align-items: center;
	width: 100%;
}
/* Keep the row full-width so Nectar's logo-left / menu-right layout holds
   (a flex child shrinks to content by default, which pulled the menu in). */
body.home #top > .container > .row {
	flex: 1 1 auto;
	width: 100%;
}
body.home #nectar-nav a,
body.home header#top a,
body.home #header-outer .sf-menu > li > a {
	color: var(--mlx-ink) !important;
}

/* Search: place the open search box cleanly over the logo. The globe overlay
   (#mlx-hero, z 100000) is a sibling of the header (#nectar-nav, z 9999) and the
   hero script rewrites the globe's opacity every frame, so we can't just hide it.
   Instead, while search is open (html.mlx-search-open, set by dark-home.js) we
   lift the header above the globe overlay so the opaque search bar covers the
   logo. Scoped to the open state, so the parked globe is untouched otherwise. */
html.mlx-search-open #nectar-nav {
	z-index: 100001 !important;
}
body.home #search-outer {
	background: #0a0b14 !important;
}
body.home #search-outer input,
body.home #search-outer input[type="search"],
body.home #search-outer #s {
	color: #f4ede4 !important;
	border-color: rgba(244, 237, 228, 0.25) !important;
}
body.home #search-outer input::placeholder,
body.home #search-outer #s::placeholder {
	color: #cfc6ba !important;
}

/* Footer: drop the light panel, go transparent over the field with light text. */
body.home #footer-outer,
body.home #footer-outer .row,
body.home #footer-widgets,
body.home #copyright {
	background: transparent !important;
}
body.home #footer-outer,
body.home #footer-outer p,
body.home #footer-outer li,
body.home #footer-outer span {
	color: var(--mlx-body) !important;
}
body.home #footer-outer a {
	color: #e0857a !important;
}