/**
 * Inner-page header € one row, sticky, brand-aligned.
 *
 * Scope: every rule is limited to inner pages. The homepage (front page and
 * page 473) is deliberately excluded by `:not(.home):not(.page-id-473)`, so it
 * keeps its own dark-hero header treatment untouched.
 *
 * Layout: [logo] [menu] [search] [Follow] in a single 80px bar that compacts to
 * 64px once the page is scrolled (body.unoc-scrolled, set by assets/js/site.js).
 *
 * Colours follow the brand guide: charcoal #414042 for text, red #E10032 for
 * interaction, white surface with the full-colour logo (logo is never
 * monochrome in UI). The black/yellow/red rule on the menu panel is the guide's
 * own divider device and is intentionally preserved.
 */

/* 1. Sticky needs a non-scrolling body. `overflow-x: hidden` turns <body> into
 *    a scroll container, which silently disables position: sticky; `clip`
 *    clips the same way without doing that. Scoped to inner pages only. */
html body:not(.home):not(.page-id-473) {
	overflow-x: clip;
}

/* 2. The dark "Follow UNOC" strip moves into the header as a Follow control. */
html body:not(.home):not(.page-id-473) .unoc-header-utility {
	display: none !important;
}

/* 3. The bar itself. */
html body:not(.home):not(.page-id-473) .unoc-site-header {
	position: sticky !important;
	top: 0 !important;
	display: flex !important;
	align-items: center !important;
	height: 80px !important;
	padding: 0 !important;
	background: #ffffff !important;
	color: #414042 !important;
	border-top: 0 !important;
	border-bottom: 1px solid #e4e2df !important;
	box-shadow: 0 1px 2px rgba(65, 64, 66, 0.04) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	z-index: 900;
	transition: height 0.2s ease, box-shadow 0.2s ease;
}

html body:not(.home):not(.page-id-473).unoc-scrolled .unoc-site-header {
	height: 64px !important;
	box-shadow: 0 10px 28px rgba(65, 64, 66, 0.1) !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px;
	width: min(1200px, calc(100% - 48px)) !important;
	height: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

/* 4. Logo: 44px at rest, 34px compact. Full-colour mark on white. */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-logo img {
	height: 44px !important;
	width: auto !important;
	transition: height 0.2s ease;
}

html body:not(.home):not(.page-id-473).unoc-scrolled .unoc-site-header .unoc-header-logo img {
	height: 34px !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-logo-dark {
	display: none !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-logo-light {
	display: block !important;
}

/* 5. Menu and tools share one row. */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-cluster {
	display: flex !important;
	align-items: center !important;
	gap: 24px;
	margin-left: auto;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a {
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	color: #414042 !important;
	-webkit-text-fill-color: #414042 !important;
	padding: 11px 12px !important;
	border-radius: 8px !important;
	white-space: nowrap !important;
	background: transparent !important;
	transition: background 0.15s ease, color 0.15s ease;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li:hover > a,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li:focus-within > a {
	background: #f9f7f2 !important;
	color: #e10032 !important;
	-webkit-text-fill-color: #e10032 !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a[aria-current="page"] {
	color: #e10032 !important;
	-webkit-text-fill-color: #e10032 !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a:focus-visible {
	outline: 2px solid #e10032 !important;
	outline-offset: 2px;
}

/* 6. Tools: search stays, the language globe is non-functional and hidden. */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-tools {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-tools > button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: #414042 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-tools > button:hover,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-tools > button:focus-visible {
	background: #f9f7f2 !important;
	color: #e10032 !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-tools > button[aria-label="Language"] {
	display: none !important;
}

/* 7. Follow control (replaces the dark social strip). */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid #e4e2df;
	border-radius: 999px;
	background: #ffffff;
	color: #414042;
	font-family: Poppins, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow:hover,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow:focus-visible,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow[aria-expanded="true"] {
	border-color: #e10032 !important;
	color: #e10032 !important;
	outline: none;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-wrap {
	position: relative;
	display: inline-flex;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: 236px;
	padding: 8px;
	background: #ffffff;
	color: #414042;
	border: 1px solid #e4e2df;
	border-radius: 12px;
	box-shadow: 0 18px 42px rgba(65, 64, 66, 0.16);
	z-index: 5;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel[hidden] {
	display: none !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel h3 {
	margin: 0 0 6px;
	padding: 8px 10px 4px;
	font-family: Poppins, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7c7a7d;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	color: #414042 !important;
	-webkit-text-fill-color: #414042 !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel a:hover,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel a:focus-visible {
	background: #f9f7f2 !important;
	color: #e10032 !important;
	-webkit-text-fill-color: #e10032 !important;
	outline: none;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel a svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: none;
}

/* Font Awesome brand glyphs (the panel uses standard FA classes). The
 * Customizer's per-network colours and a script-set inline display:none both
 * target these anchors, so colour and display are pinned here. */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel a i {
	flex: none;
	display: inline-block !important;
	width: 18px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

/* 8. Menu panel: one white sheet on the brand rule. */
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu {
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid #e4e2df !important;
	border-top: 0 !important;
	border-radius: 0 0 12px 12px !important;
	box-shadow: 0 18px 40px rgba(65, 64, 66, 0.14) !important;
	padding: 10px !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu h4 {
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: #7c7a7d !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu a {
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414042 !important;
	-webkit-text-fill-color: #414042 !important;
	padding: 9px 12px !important;
	border-radius: 6px !important;
}

html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu a:hover,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu a:focus-visible,
html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-submenu a[aria-current="page"] {
	background: #f9f7f2 !important;
	color: #e10032 !important;
	-webkit-text-fill-color: #e10032 !important;
}

/* 9. Tablet: same row, tighter type. The Follow control needs ~110px that the
 *    six long labels do not have at this width, so it waits until 1200px. */
@media (min-width: 1024px) and (max-width: 1199px) {
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a {
		font-size: 13px !important;
		padding: 10px 9px !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-cluster {
		gap: 10px;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-bar {
		gap: 12px;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-wrap {
		display: none !important;
	}
}

/* 10. Mobile: logo, search, burger. Menu lives in the existing drawer. */
@media (max-width: 1023px) {
	html body:not(.home):not(.page-id-473) .unoc-site-header {
		height: 64px !important;
	}

	html body:not(.home):not(.page-id-473).unoc-scrolled .unoc-site-header {
		height: 60px !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-bar {
		width: calc(100% - 32px) !important;
		gap: 8px;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-logo img {
		height: 36px !important;
	}

	html body:not(.home):not(.page-id-473).unoc-scrolled .unoc-site-header .unoc-header-logo img {
		height: 32px !important;
	}

	/* Keep the tools row visible; the desktop menu is replaced by the drawer. */
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-cluster {
		display: flex !important;
		gap: 2px;
		margin-left: auto;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-main-menu,
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow,
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel {
		display: none !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-mobile-burger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		margin-left: 2px;
		color: #e10032 !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-mobile-burger svg {
		stroke: #e10032 !important;
		width: 26px;
		height: 26px;
	}

	/* Drawer sits directly under the sticky bar instead of the old 104px offset. */
	html body:not(.home):not(.page-id-473) .unoc-mobile-drawer {
		top: 76px !important;
		max-height: calc(100dvh - 92px) !important;
	}
}

/* 11. Anchor targets clear the sticky bar. */
html body:not(.home):not(.page-id-473) main [id] {
	scroll-margin-top: 88px;
}

/* 12. Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html body:not(.home):not(.page-id-473) .unoc-site-header,
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-header-logo img {
		transition: none !important;
	}
}

/* ======================================================= follow availability === */

/* The Follow control was hidden below 1200px, so notebooks and phones lost the
 * only entry point to the social channels. Keep it at every width: full pill
 * from 1024px up, compact icon below that. */
@media (min-width: 1024px) and (max-width: 1199px) {
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-wrap {
		display: block !important;
	}
}

@media (max-width: 1023px) {
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-wrap {
		display: block !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow span {
		display: none !important;
	}

	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel {
		left: auto !important;
		right: 0 !important;
		max-width: calc(100vw - 32px);
	}
}

/* Below 1024px the stylesheet hides the Follow panel outright, so the button
 * toggled aria-expanded and hidden but nothing appeared. Show it when open. */
@media (max-width: 1023px) {
	html body:not(.home):not(.page-id-473) .unoc-site-header .unoc-inner-follow-panel:not([hidden]) {
		display: block !important;
		position: absolute !important;
		top: calc(100% + 10px) !important;
		right: 0 !important;
		left: auto !important;
		width: min(272px, calc(100vw - 32px)) !important;
		z-index: 130 !important;
	}
}