/* =========================================================================
   ESA Education — 2026 brand header and footer.

   Loaded only where esa_base_brand_2026() is on (every VIP environment
   since 0.4.43), and every rule is scoped to body.esa-brand-2026.

   Sources: ESA Brand Guidelines 2026 (brand.esa.int) and ESA's header/footer
   component designs. Values sampled from those designs:
     header gradient   #003247 at 30% -> #00202E at 100%, left to right
                       (guidelines p.22: Deep Space; gradient for backgrounds)
     row divider       1px, white at 10% over the gradient (~#134053)
     footer background #001219
   Guideline rules applied:
     - white logotype on dark backgrounds (p.12), at least ~90px wide (p.11);
     - Notes ESA only, labels in Bold capitals (pp.27-28);
     - the slogan is left out (ESA's choice, 12 Oct).
   ========================================================================= */

body.esa-brand-2026 {
	--brand-deep:        #003247;
	--brand-deep-end:    #00202E;
	--brand-footer:      #001219;
	--brand-line:        rgba(255, 255, 255, 0.1);
	--brand-muted:       #8197A6;
	--brand-gutter:      40px;
	/* 72px row, 36px logo: 18px above and below = half the symbol height,
	   the clear space the guidelines allow on banner formats (p.14). */
	--brand-row-1:       72px;
	--brand-row-2:       64px;
}

@media (max-width: 899px) {
	body.esa-brand-2026 {
		--brand-gutter: 16px;
		--brand-row-1:  64px; /* 32px logo: 16px clear space */
		--brand-row-2:  56px;
	}
}

/* The header now takes its own place in the page (sticky, not fixed), so
   the offsets the old 64px fixed bar needed go. `clip` instead of `hidden`
   keeps the horizontal clipping without breaking position: sticky. */
body.esa-brand-2026 .wrapper {
	overflow-x: clip;
}

body.esa-brand-2026 .feature--article {
	margin-top: 0;
	height: 50vh;
}

/* POSTS get fixed lead-image heights per breakpoint (ESA, 13 Oct 2026): 200px
   mobile, 300px tablet, 400px desktop. 50vh with the 400px floor from
   style.css gave a phone 422px of picture and a 1080px-high desktop 540px, so
   under the two-row header, with a title that wraps, the article text began
   below the fold. Pages (page.php, a featured image) keep 50vh — ESA asked for
   posts only. */
body.esa-brand-2026.single .feature--article {
	height: 200px;
	min-height: 0;
}

@media (min-width: 768px) {
	body.esa-brand-2026.single .feature--article {
		height: 300px;
	}
}

@media (min-width: 1024px) {
	body.esa-brand-2026.single .feature--article {
		height: 400px;
	}
}

/* Tablet posts: the article's top padding drops to the mobile 64px (ESA,
   14 Oct 2026). style.css gives 128px from 768px up, which suits the 400px
   desktop lead image but read as a large blank band under the 300px tablet
   one. Top only: the bottom padding and pages keep style.css's values. */
@media (min-width: 768px) and (max-width: 1023px) {
	body.esa-brand-2026.single .article {
		padding-top: 64px;
	}
}

body.esa-brand-2026 .page-header {
	padding-top: 10rem;
}

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

/* Row 1 scrolls away; row 2 (label, menu, search) stays pinned. */
body.esa-brand-2026 .esa-header.esa-header--2026 {
	position: sticky;
	top: calc(-1 * var(--brand-row-1));
	display: block;
	height: auto;
	padding: 0;
	background: var(--brand-deep);
	background: linear-gradient(90deg, var(--brand-deep) 30%, var(--brand-deep-end) 100%);
	border-bottom: 0;
	color: #fff;
	z-index: 99999;
}

body.esa-brand-2026 .esa-header__brand,
body.esa-brand-2026 .esa-header__bar {
	display: flex;
	align-items: center;
	padding: 0 var(--brand-gutter);
}

body.esa-brand-2026 .esa-header__brand {
	justify-content: space-between;
	height: var(--brand-row-1);
	border-bottom: 1px solid var(--brand-line);
}

body.esa-brand-2026 .esa-header--2026 .esa-header__link {
	display: block;
	line-height: 0;
}

body.esa-brand-2026 .esa-header--2026 .esa-header__logo {
	height: 36px;
	width: auto;
}

body.esa-brand-2026 .esa-header__descriptor,
body.esa-brand-2026 .esa-header__label {
	font-family: 'NotesESAbold', sans-serif;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

body.esa-brand-2026 .esa-header__bar {
	gap: 3.2rem;
	height: var(--brand-row-2);
}

body.esa-brand-2026 .esa-header__label {
	flex: 0 0 auto;
	font-size: 1.4rem;
	text-decoration: none;
}

body.esa-brand-2026 .esa-header__label:hover,
body.esa-brand-2026 .esa-header__label:focus-visible {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Menu: left-aligned, straight after the label (Adrian, 12 Oct); the tools
   stay at the right edge. The -12px takes back the menu links' own padding,
   so the gap from the label to the first item's text is the bar's 3.2rem. */
body.esa-brand-2026 .esa-header--2026 .esa-nav {
	flex: 1 1 auto;
	justify-content: flex-start;
	margin: 0 0 0 -12px;
}

@media (min-width: 900px) {
	body.esa-brand-2026 .esa-header--2026 .esa-nav {
		display: flex;
	}
}

/* Max Mega Menu paints its bar and top-level links #003247 from its own
   settings; on the gradient that shows as a flat box, so the bar is made
   transparent here (dropdowns keep the plugin's colours). */
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
	background: transparent;
}

body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	padding: 0 12px;
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	transition: text-decoration-color .2s ease;
}

body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
body.esa-brand-2026 .esa-header--2026 #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor > a.mega-menu-link {
	text-decoration-color: #fff;
}

/* Search and menu buttons. */
body.esa-brand-2026 .esa-header__tools {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex: 0 0 auto;
	margin-left: auto;
}

body.esa-brand-2026 .esa-header--2026 .esa-header__toggle {
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 2px;
	box-shadow: none;
}

body.esa-brand-2026 .esa-header--2026 .menu-toggle {
	border-color: rgba(255, 255, 255, 0.6);
}

body.esa-brand-2026 .esa-header--2026 .esa-header__toggle:hover,
body.esa-brand-2026 .esa-header--2026 .esa-header__toggle:focus-visible {
	border-color: #fff;
}

/* Search flyout hangs from the header's bottom edge, under the search icon. */
body.esa-brand-2026 .esa-header--2026 .quick-search {
	top: 100%;
	left: auto;
	right: 0;
	background: var(--brand-deep-end);
}

/* Overlay menu (narrow screens) opens below the header. */
body.esa-brand-2026 #overlay-menu {
	padding-top: calc(var(--brand-row-1) + var(--brand-row-2) + 3.2rem);
	background: var(--brand-footer);
}

/* Inside the overlay, show the menu itself, expanded. Max Mega Menu renders
   its own collapsed toggle bar there below 769px (so one tap on the menu
   button showed only that bar, and a second tap the links), and a
   horizontal bar from 769px. Here it is one vertical list: sections in
   Notes ESA Bold, their pages below them. */
body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary,
body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary {
	background: transparent;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary .mega-menu-toggle {
	display: none;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary,
body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	visibility: visible;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
	display: block;
	width: 100%;
	margin: 0;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu {
	display: block;
	position: static;
	visibility: visible;
	opacity: 1;
	width: auto;
	margin: 0.8rem 0 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
	transform: none;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	display: block;
	height: auto;
	padding: 0;
	background: transparent;
	color: #fff;
	font-family: 'NotesESAbold', sans-serif;
	font-weight: bold;
	font-size: 2.6rem;
	line-height: 1.2;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	display: block;
	height: auto;
	padding: 0.6rem 0;
	background: transparent;
	color: var(--brand-muted);
	font-family: 'NotesESAregular', sans-serif;
	font-size: 1.8rem;
	line-height: 1.3;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	color: #fff;
}

body.esa-brand-2026 #overlay-menu #mega-menu-wrap-primary #mega-menu-primary .mega-indicator {
	display: none;
}

@media (max-width: 599px) {
	body.esa-brand-2026 .esa-header__descriptor {
		font-size: 1.1rem;
	}
	body.esa-brand-2026 .esa-header--2026 .esa-header__logo {
		height: 32px;
	}
}

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

body.esa-brand-2026 #footer.esa-footer {
	display: block;
	padding: 4rem var(--brand-gutter) 3.2rem;
	background: var(--brand-footer);
	color: #fff;
	font-family: 'NotesESAregular', sans-serif;
}

body.esa-brand-2026 .esa-footer a {
	color: #fff;
}

body.esa-brand-2026 .esa-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4rem;
	padding-bottom: 4rem;
}

/* Logo and descriptor. */
body.esa-brand-2026 .esa-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body.esa-brand-2026 .esa-footer__logo {
	height: 44px;
	width: auto;
}

body.esa-brand-2026 .esa-footer__descriptor {
	font-family: 'NotesESAbold', sans-serif;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.esa-brand-2026 .esa-footer__descriptor {
	margin-top: 1.2rem;
}

/* Link block ("Footer 1"): underlined, with › (this site) or ↗ (elsewhere). */
body.esa-brand-2026 .esa-footer__links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 3.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.esa-brand-2026 .esa-footer__links-list a {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	min-width: 14rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	font-size: 1.4rem;
	line-height: 1.4;
	transition: border-color .2s ease;
}

body.esa-brand-2026 .esa-footer__links-list a::after {
	content: '';
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--brand-arrow) center / contain no-repeat;
	mask: var(--brand-arrow) center / contain no-repeat;
}

body.esa-brand-2026 .esa-footer__links-list a.is-internal {
	--brand-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

body.esa-brand-2026 .esa-footer__links-list a.is-external {
	--brand-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

body.esa-brand-2026 .esa-footer__links-list a:hover,
body.esa-brand-2026 .esa-footer__links-list a:focus-visible {
	border-bottom-color: #fff;
}

/* Bottom row: legal links ("Footer 2") left, social icons right. */
body.esa-brand-2026 .esa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--brand-line);
}

body.esa-brand-2026 .esa-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 3.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.esa-brand-2026 .esa-footer__legal-list a {
	font-size: 1.3rem;
	color: var(--brand-muted);
	transition: color .2s ease;
}

body.esa-brand-2026 .esa-footer__legal-list a:hover,
body.esa-brand-2026 .esa-footer__legal-list a:focus-visible {
	color: #fff;
}

body.esa-brand-2026 .esa-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

body.esa-brand-2026 .esa-footer__social a {
	display: block;
	width: 20px;
	height: 20px;
	color: #fff;
	opacity: 0.85;
	transition: opacity .2s ease;
}

body.esa-brand-2026 .esa-footer__social a:hover,
body.esa-brand-2026 .esa-footer__social a:focus-visible {
	opacity: 1;
}

body.esa-brand-2026 .esa-footer__social svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Phone: everything stacked, social icons centred (as the brand mobile
   footer), legal links last. */
@media (max-width: 767px) {
	body.esa-brand-2026 .esa-footer__links-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	body.esa-brand-2026 .esa-footer__links-list a {
		min-width: 0;
		width: 100%;
	}
	body.esa-brand-2026 .esa-footer__bottom {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	body.esa-brand-2026 .esa-footer__social {
		justify-content: center;
		gap: 2.4rem 3.2rem;
		padding: 0 2rem 1.6rem;
	}
	body.esa-brand-2026 .esa-footer__social a {
		width: 24px;
		height: 24px;
	}
}