﻿/**
 * Footer - 2026-11 refinement.
 *
 * Two problems with the previous pass:
 *  1. The careers card asked for a "glass" effect while sitting on a flat
 *     charcoal field. Blurring a uniform colour returns that colour, so the
 *     card read as a grey slab. The footer now carries two very soft brand
 *     blooms behind the card, which the backdrop blur can actually pick up.
 *  2. The grid was declared for five columns but only four children exist, so
 *     the brand column and the card were both squeezed to ~220px.
 *
 * Loaded last, after footer.css and the brand overrides, on every page.
 */

/* ------------------------------------------------------------- surface --- */

html body.unoc-theme .unoc-site-footer {
	background-image:
		radial-gradient(58% 70% at 88% 6%, rgba(225, 0, 50, 0.2), rgba(225, 0, 50, 0) 62%),
		radial-gradient(46% 62% at 4% 96%, rgba(255, 200, 8, 0.12), rgba(255, 200, 8, 0) 66%),
		linear-gradient(125deg, #3b3a3d 0%, #313134 62%, #383737 100%) !important;
	background-color: #313134 !important;
	padding: clamp(3.25rem, 5.5vw, 4.5rem) 0 1.5rem !important;
}

/* ---------------------------------------------------------------- grid --- */

html body.unoc-theme .unoc-site-footer .footer-top {
	display: grid !important;
	grid-template-columns:
		minmax(0, 1.28fr)
		minmax(0, 1fr)
		minmax(0, 1.02fr)
		minmax(0, 1.34fr) !important;
	gap: clamp(32px, 3.4vw, 56px) !important;
	align-items: start !important;
}

html body.unoc-theme .unoc-site-footer .footer-brand-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	height: 100%;
	max-width: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-brand-block p {
	margin: 0 !important;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.68) !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
}

html body.unoc-theme .unoc-site-footer .social-row {
	margin-top: auto !important;
	padding-top: 10px;
}

/* --------------------------------------------------------- contact block --- */

html body.unoc-theme .unoc-site-footer .footer-addr {
	margin: 0 !important;
	padding: 0 0 0 14px !important;
	border: 0 !important;
	border-left: 2px solid #ffc808 !important;
	border-radius: 0 !important;
	background: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 13.5px !important;
	line-height: 1.75 !important;
}

html body.unoc-theme .unoc-site-footer .footer-addr strong {
	margin-bottom: 8px !important;
	color: #ffc808 !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
}

html body.unoc-theme .unoc-site-footer .footer-addr a {
	color: rgba(255, 255, 255, 0.86) !important;
	text-decoration: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-addr a:hover,
html body.unoc-theme .unoc-site-footer .footer-addr a:focus-visible {
	color: #ffc808 !important;
}

/* One icon per contact row: location, post, phone, email. */
html body.unoc-theme .unoc-site-footer .footer-addr-list {
	display: grid !important;
	gap: 9px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-addr-list li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 9px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

html body.unoc-theme .unoc-site-footer .footer-addr-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	color: #ffc808;
}

html body.unoc-theme .unoc-site-footer .footer-addr-icon svg {
	display: block;
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
}

/* -------------------------------------------------------------- columns --- */

html body.unoc-theme .unoc-site-footer .footer-col h5 {
	margin: 0 0 18px !important;
	color: #ffc808 !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

html body.unoc-theme .unoc-site-footer .footer-col ul {
	display: grid !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-col li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

/* The arrow used to be a generated " -> " glyph. Rebuilt as a right-aligned arrow that
 * only appears on hover, so long partner names stop wrapping onto a stray arrow. */
html body.unoc-theme .unoc-site-footer .footer-col li a {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
	color: rgba(255, 255, 255, 0.76) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	transform: none !important;
	transition: color 0.15s ease;
}

html body.unoc-theme .unoc-site-footer .footer-col li a::after {
	content: "\2192" !important;
	flex: 0 0 auto;
	color: #ffc808 !important;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

html body.unoc-theme .unoc-site-footer .footer-col li a:hover,
html body.unoc-theme .unoc-site-footer .footer-col li a:focus-visible {
	color: #fff !important;
	transform: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-col li a:hover::after,
html body.unoc-theme .unoc-site-footer .footer-col li a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* ---------------------------------------------------------- careers card --- */

html body.unoc-theme .unoc-site-footer .footer-careers-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 14px !important;
	padding: 26px 24px 22px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 18px !important;
	background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.055)) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 22px 44px rgba(0, 0, 0, 0.26) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
	overflow: hidden !important;
}

/* Brand divider device, as used on the menu panel and mobile drawer. */
html body.unoc-theme .unoc-site-footer .footer-careers-card::before {
	content: "" !important;
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, #000 0 33%, #ffc808 33% 66%, #e10032 66% 100%);
}

html body.unoc-theme .unoc-site-footer .footer-careers-card h5 {
	margin: 6px 0 0 !important;
	color: #ffc808 !important;
}

html body.unoc-theme .unoc-site-footer .footer-careers-card .footer-careers-copy {
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	text-wrap: pretty;
}

html body.unoc-theme .unoc-site-footer .footer-careers-card .unoc-footer-careers-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 8px 0 0 !important;
	padding: 0 16px !important;
	height: 44px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #ffc808 !important;
	color: #1a191a !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

html body.unoc-theme .unoc-site-footer .footer-careers-card .unoc-footer-careers-btn span {
	margin-left: auto;
	font-size: 15px;
	line-height: 1;
}

html body.unoc-theme .unoc-site-footer .footer-careers-card .unoc-footer-careers-btn:hover,
html body.unoc-theme .unoc-site-footer .footer-careers-card .unoc-footer-careers-btn:focus-visible {
	background: #fff !important;
	color: #1a191a !important;
}

html body.unoc-theme .unoc-site-footer .footer-careers-secondary {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 2px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

html body.unoc-theme .unoc-site-footer .footer-careers-secondary span {
	margin-left: auto !important;
	color: #ffc808 !important;
	font-size: 15px;
}

html body.unoc-theme .unoc-site-footer .footer-careers-secondary:hover,
html body.unoc-theme .unoc-site-footer .footer-careers-secondary:focus-visible {
	color: #ffc808 !important;
}

/* ------------------------------------------------------------ bottom bar --- */

html body.unoc-theme .unoc-site-footer .footer-bottom {
	margin-top: clamp(40px, 5vw, 64px) !important;
	padding-top: 22px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
	gap: 18px 24px !important;
}

html body.unoc-theme .unoc-site-footer .footer-legal {
	gap: 6px 20px !important;
	color: rgba(255, 255, 255, 0.58) !important;
	font-size: 12.5px !important;
}

html body.unoc-theme .unoc-site-footer .footer-legal a {
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none !important;
}

html body.unoc-theme .unoc-site-footer .footer-legal a:hover,
html body.unoc-theme .unoc-site-footer .footer-legal a:focus-visible {
	color: #ffc808 !important;
}

html body.unoc-theme .unoc-site-footer .footer-right {
	gap: 10px !important;
}

html body.unoc-theme .unoc-site-footer .gov-badge,
html body.unoc-theme .unoc-site-footer .lang-select {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.74) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

html body.unoc-theme .unoc-site-footer .gov-badge svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

html body.unoc-theme .unoc-site-footer .footer-right .totop {
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
}

html body.unoc-theme .unoc-site-footer .footer-right .totop:hover,
html body.unoc-theme .unoc-site-footer .footer-right .totop:focus-visible {
	background: #ffc808 !important;
	border-color: #ffc808 !important;
	color: #1a191a !important;
}

/* ---------------------------------------------------------------- mobile --- */

@media (max-width: 1040px) {
	html body.unoc-theme .unoc-site-footer .footer-top {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 36px !important;
	}

	html body.unoc-theme .unoc-site-footer .footer-brand-block {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	html body.unoc-theme .unoc-site-footer .footer-top {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	html body.unoc-theme .unoc-site-footer .footer-brand-block {
		grid-column: auto;
	}

	html body.unoc-theme .unoc-site-footer .footer-bottom {
		flex-direction: column;
		align-items: flex-start !important;
	}

	html body.unoc-theme .unoc-site-footer .footer-careers-card {
		padding: 24px 20px 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.unoc-theme .unoc-site-footer .footer-col li a::after {
		transition: none;
	}
}

/* ================================================================ hygiene === */

/* Equal-height footer columns: the careers card and link lists should share a
 * single baseline rather than ending at their own content length. */
.unoc-site-footer .footer-top {
	align-items: stretch !important;
}

.unoc-site-footer .footer-top > * {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.unoc-site-footer .footer-careers-card {
	height: 100%;
}

.unoc-site-footer .footer-brand-block .social-row {
	margin-top: auto;
}

.unoc-site-footer .footer-col ul {
	margin-bottom: 0;
}

/* ========================================================= footer separators === */

/* The link columns were a plain stack. Hairline rules give each item an edge to
 * sit on without turning the footer into a table. */
.unoc-site-footer .footer-col ul {
	display: block !important;
	gap: 0 !important;
}

.unoc-site-footer .footer-col li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-bottom: 0 !important;
}

.unoc-site-footer .footer-col li > a {
	display: block;
	padding: 11px 0 !important;
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.unoc-site-footer .footer-col li:first-child > a {
	padding-top: 2px !important;
}

.unoc-site-footer .footer-col li:last-child > a {
	padding-bottom: 2px !important;
}

.unoc-site-footer .footer-col li > a:hover,
.unoc-site-footer .footer-col li > a:focus-visible {
	color: #ffc808;
	padding-left: 6px;
}
