/**
 * Header Layout 18 — layout only.
 *
 * Everything visual (fixed position, exclusion blend, `.scrolled` white
 * state, logo swap, CTA, hamburger, offcanvas) comes from the parent's
 * `.header-area` rules in archidex-core.css. These rules only place the
 * three parts and make the menu readable on the blended header.
 */

/* Logo | menu | button: a 1fr-auto-1fr grid keeps the menu truly centred
   whatever the logo and button widths are. */
.header-area-18__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.header-area-18 .header__logo {
	justify-self: start;
}

.header-area-18 .header__nav-2 {
	justify-self: center;
	min-width: 0;
}

.header-area-18 .header-right {
	justify-self: end;
}

/* The parent's .header-area menu links carry 21.5px vertical padding, which
   would make the bar 94px tall; the CTA (45px) + the inner's 17px margins
   give the 80px that header.php reserves above the home page content, so
   the links get the same 45px height. */
.header-area-18 .main-menu li a {
	padding-top: 14.5px;
	padding-bottom: 14.5px;
}

/* The header uses mix-blend-mode: exclusion over a black background, so
   black text is invisible until the header scrolls to its white state.
   Follow the parent's own `.date` rule: white at rest, black when scrolled.
   The --zh18-* custom properties are set by the widget's "Text & logo
   colours" control (Style › Design Layout) for solid light or dark bars. */
.header-area-18 .main-menu li a {
	color: var(--zh18-ink, var(--white));
}

.header-area-18 .main-menu > ul > li:hover > a {
	color: #999999;
}

.header-area.scrolled.header-area-18 .main-menu li a {
	color: var(--zh18-ink-scrolled, var(--black));
}

.header-area.scrolled.header-area-18 .main-menu > ul > li:hover > a {
	color: #999999;
}

/* Logo pair: "Logo" (.logo-white) at rest, "Logo (White)" (.logo-black) when
   scrolled, unless the colour scheme fixes one of them. */
.header-area-18 .header__logo .logo-white {
	display: var(--zh18-logo-rest, block);
}

.header-area-18 .header__logo .logo-black {
	display: var(--zh18-logo-scrolled, none);
}

.header-area.scrolled.header-area-18 .header__logo .logo-white {
	display: var(--zh18-logo-rest-scrolled, none);
}

.header-area.scrolled.header-area-18 .header__logo .logo-black {
	display: var(--zh18-logo-scrolled-scrolled, block);
}

.header-area-18 .header-right .side-toggle .bar-icon span {
	background: var(--zh18-burger, #DADADA);
}

/* Below the parent's desktop breakpoint (meanmenu: 1199px) the menu lives
   in the side-info offcanvas opened by the hamburger; the bar becomes
   logo | button + hamburger like the other layouts. */
@media (max-width: 1199px) {
	.header-area-18__inner {
		display: flex;
	}

	.header-area-18 .header__nav-2 {
		display: none;
	}
}