/* ==========================================================================
   CLOUDWRAITH - HEADER AND FOOTER
   Styling for the Elementor Theme Builder header and footer templates.
   Elementor owns the layout; every colour and measure comes from tokens.css.
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */

.cw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: rgba(5, 8, 10, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: border-color var(--cw-dur) var(--cw-ease),
	            background var(--cw-dur) var(--cw-ease);
}

/* The hairline only appears once the page has moved. */
.cw-header.is-scrolled {
	background: rgba(5, 8, 10, 0.92);
	border-bottom-color: var(--cw-hairline);
}

.cw-header__inner { min-height: var(--cw-header-h); }

.cw-header__logo img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

/* --- Navigation ----------------------------------------------------------- */

.cw-header__nav .elementor-item {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-text-muted);
	padding: 0.6em 0.9em;
	transition: color var(--cw-dur-fast) var(--cw-ease);
}

.cw-header__nav .elementor-item:hover,
.cw-header__nav .elementor-item:focus-visible,
.cw-header__nav .elementor-item.elementor-item-active {
	color: var(--cw-teal-bright);
}

/* Underline that grows from the left on hover. */
.cw-header__nav .elementor-item::after {
	content: '';
	position: absolute;
	left: 0.9em;
	right: 0.9em;
	bottom: 0.25em;
	height: 1px;
	background: var(--cw-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cw-dur) var(--cw-ease);
}

.cw-header__nav .elementor-item:hover::after,
.cw-header__nav .elementor-item.elementor-item-active::after { transform: scaleX(1); }

/* Archive dropdown. */
.cw-header__nav .sub-menu,
.cw-header__nav .elementor-nav-menu--dropdown {
	background: var(--cw-panel) !important;
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), var(--cw-glow-soft);
	overflow: hidden;
	padding: var(--cw-space-2xs) 0;
}

.cw-header__nav .sub-menu .elementor-sub-item {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--cw-text-muted);
	padding: 0.65em 1.1em;
}

.cw-header__nav .sub-menu .elementor-sub-item:hover,
.cw-header__nav .sub-menu .elementor-sub-item:focus-visible {
	color: var(--cw-teal-bright);
	background: var(--cw-panel-raised);
}

/* Mobile drawer: full height, teal on black. */
.cw-header__nav .elementor-nav-menu--dropdown {
	border-radius: 0;
	border-inline: 0;
	min-height: calc(100vh - var(--cw-header-h));
	padding-top: var(--cw-space-m);
}

.cw-header__nav .elementor-nav-menu--dropdown a {
	font-family: var(--cw-font-mono);
	font-size: 1rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-text);
	padding: var(--cw-space-m) var(--cw-space-l);
	border-bottom: 1px solid var(--cw-hairline);
}

.cw-header__nav .elementor-nav-menu--dropdown a:hover { color: var(--cw-teal-bright); }

/* Burger toggle. */
.cw-header__nav .elementor-menu-toggle {
	color: var(--cw-teal);
	background: transparent;
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-s);
	padding: 0.5em;
}

.cw-header__nav .elementor-menu-toggle:hover,
.cw-header__nav .elementor-menu-toggle:focus-visible {
	color: var(--cw-teal-bright);
	border-color: var(--cw-teal);
}

/* --- Header search -------------------------------------------------------- */

.cw-header__search .elementor-search-form__toggle {
	color: var(--cw-text-muted);
	transition: color var(--cw-dur-fast) var(--cw-ease);
}

.cw-header__search .elementor-search-form__toggle:hover,
.cw-header__search .elementor-search-form__toggle:focus-visible {
	color: var(--cw-teal-bright);
}

/* Full-screen overlay search. */
.cw-header__search .elementor-search-form--skin-full_screen .elementor-search-form__container {
	background: rgba(5, 8, 10, 0.97);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.cw-header__search .elementor-search-form--skin-full_screen input[type="search"] {
	font-family: var(--cw-font-display);
	font-size: var(--cw-step-3);
	color: var(--cw-text);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cw-hairline-strong);
	border-radius: 0;
	box-shadow: none;
}

.cw-header__search .elementor-search-form--skin-full_screen input[type="search"]:focus {
	border-bottom-color: var(--cw-teal);
	box-shadow: 0 1px 0 0 var(--cw-teal);
}

.cw-header__search .elementor-search-form__toggle,
.cw-header__search .dialog-lightbox-close-button { outline-offset: 4px; }

/* --- Footer --------------------------------------------------------------- */

.cw-footer {
	border-top: 1px solid var(--cw-hairline);
	background: var(--cw-void);
}

.cw-footer__blurb {
	color: var(--cw-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 38ch;
}

.cw-footer__logo img {
	max-width: 220px;
	height: auto;
	opacity: 0.9;
}

.cw-footer__heading {
	font-family: var(--cw-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	margin-bottom: var(--cw-space-s);
}

.cw-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-2xs);
}

.cw-footer__list a {
	color: var(--cw-text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.cw-footer__list a:hover,
.cw-footer__list a:focus-visible { color: var(--cw-teal-bright); }

.cw-footer__bar {
	border-top: 1px solid var(--cw-hairline);
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cw-text-muted);
}

.cw-footer__bar a { color: var(--cw-text-muted); text-decoration: none; }
.cw-footer__bar a:hover { color: var(--cw-teal-bright); }

/* --- Elementor wrapper resets --------------------------------------------- */

/* Elementor wraps widget output; stop that wrapper adding stray margins. */
.cw-header .elementor-widget-container,
.cw-footer .elementor-widget-container { margin: 0; }

.cw-header .elementor-widget:not(:last-child),
.cw-footer .elementor-widget:not(:last-child) { margin-bottom: 0; }


/* --- Logotype compositing -------------------------------------------------
 * The supplied logotype WebPs are flattened onto pure black rather than
 * carrying an alpha channel. Screen blending drops that black against the
 * near-black surfaces so only the glow reads, with no visible plate.
 * Marker: cw-logotype-blend
 */

.cw-header__logo img,
.cw-footer__logo img,
.cw-hero__logo {
	mix-blend-mode: screen;
}