/* ==========================================================================
	FWPN Navigation Bar (BEM: nav-bar)
	========================================================================== */

/* --- Base reset --- */
.nav-bar *,
.nav-bar *::before,
.nav-bar *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* --- Block --- */
.nav-bar {
	position: absolute;
	top: 31px;
	left: 0;
	right: 0;
	z-index: var(--z-navbar);
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 calc(var(--container-padding) - 1px);
}

/* Fixed as soon as scrolled past resting position */
.nav-bar.is-fixed {
	position: fixed;
	top: 0;
	padding-top: 16px;
}

/* Fullwidth white after scrolling past half of hero */
.nav-bar.is-scrolled {
	max-width: none;
	padding: 0;
}

/* --- Wrapper --- */
.nav-bar__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 12px 32px;
	border-radius: 40px 40px 0 40px;
	background: var(--neutral-white);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, height 0.3s ease;
}

/* Scrolled state — fullwidth white bar */
.nav-bar.is-scrolled .nav-bar__wrapper {
	border-radius: 0;
	padding: 12px 64px;
}

/* --- Top row --- */
.nav-bar__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	width: 100%;
	height: 70px;
}

/* --- Logo --- */
.nav-bar__logo {
	flex-shrink: 0;
	width: 202px;
	height: 70px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.nav-bar__logo-link {
	display: block;
	line-height: 0;
}

.nav-bar__logo-img {
	width: 202px;
	height: auto;
	display: block;
}

/* Light logo hidden on desktop (white header uses dark logo) */
.nav-bar__logo-img--light {
	display: none;
}

/* --- Scroll wrapper (injected by JS) --- */
.nav-bar__scroll-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}

/* --- Scroll arrows (injected by JS) --- */
.nav-bar__scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--neutral-white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.2s ease;
}

.nav-bar__scroll-arrow--left {
	left: 4px;
}

.nav-bar__scroll-arrow--right {
	right: 4px;
}

.nav-bar__scroll-arrow:hover {
	background-color: var(--neutral-100, #f5f5f5);
}

.nav-bar__scroll-arrow svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-dark);
}

.nav-bar__scroll-arrow.is-visible {
	display: flex;
}

/* --- Links container --- */
.nav-bar__links {
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
	flex: 1;
	min-width: 0;
	list-style: none;
	gap: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	scroll-behavior: smooth;
}

.nav-bar__links.is-dragging {
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/* --- Single link --- */
.nav-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	border-radius: var(--radius-dropdown-trigger);
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.nav-bar__link > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 4px 24px;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 28px;
	letter-spacing: 0;
	color: var(--color-dark);
	text-decoration: none;
	white-space: nowrap;
}

.nav-bar__link:hover {
	border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
	background-color: var(--color-dark);
}

.nav-bar__link:hover > a {
	color: var(--color-white-permanent);
}

/* --- Active state (current page) --- */
.nav-bar__link.is-active {
	border-radius: var(--corner-s, 12px) var(--corner-s, 12px) var(--corner-xs, 4px) var(--corner-s, 12px);
	background: var(--navy-500);
}

.nav-bar__link.is-active > a {
	color: var(--color-white-permanent);
}

/* --- Dropdown --- */
.nav-bar__dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 200px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: var(--neutral-white);
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
	z-index: 10;
	box-shadow: var(--shadow-dropdown);
	scrollbar-width: thin;
}

.nav-bar__dropdown-item {
	display: block;
	padding: 12px 24px;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 25.2px;
	letter-spacing: 0;
	color: var(--color-black);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-bar__dropdown-item:hover {
	color: var(--color-primary-dark);
}

/* ==========================================================================
   Expanded menu state (desktop mega-menu)
   ========================================================================== */

/* Hidden elements until expanded */
.nav-bar__separator,
.nav-bar__submenu-row {
	display: none;
}

/* Wrapper becomes vertical when expanded */
.nav-bar.is-expanded .nav-bar__wrapper {
	flex-direction: column;
	align-items: stretch;
	height: auto;
	background: var(--neutral-white);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	position: relative;
}

/* Separator */
.nav-bar.is-expanded .nav-bar__separator {
	display: block;
	width: 100%;
	height: 1px;
	border: none;
	border-top: 1px dashed var(--color-border);
	margin: 16px 0 0;
}

/* Submenu row */
.nav-bar.is-expanded .nav-bar__submenu-row {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	overflow-x: hidden;
	scroll-behavior: smooth;
	padding-bottom: 5px;
}

.nav-bar__submenu-row.is-dragging {
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/* Submenu link item */
.nav-bar__submenu-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	cursor: pointer;
}

.nav-bar__submenu-link a {
	display: flex;
	align-items: center;
	padding: 4px 24px;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 25px;
	color: var(--color-black);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.nav-bar__submenu-link:hover,
.nav-bar__submenu-link.is-active {
	background-color: var(--color-gray);
	border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
}

.nav-bar__submenu-link.is-active {
	background: var(--navy-500);
}

.nav-bar__submenu-link:hover a,
.nav-bar__submenu-link.is-active a {
	color: var(--color-white-permanent);
}

/* Hide dropdowns in expanded mode (submenu row replaces them) */
.nav-bar.is-expanded .nav-bar__dropdown {
	display: none !important;
}

/* Active parent link styling */
.nav-bar.is-expanded .nav-bar__link.is-expanded-active {
	background-color: var(--color-dark);
	border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
}

/* Current-page active in expanded menu overrides hover-based active */
.nav-bar.is-expanded .nav-bar__link.is-active {
	background: var(--navy-500);
	border-radius: var(--corner-s, 12px) var(--corner-s, 12px) var(--corner-xs, 4px) var(--corner-s, 12px);
}

.nav-bar.is-expanded .nav-bar__link.is-active > a {
	color: var(--color-white-permanent);
}

.nav-bar.is-expanded .nav-bar__link.is-expanded-active > a {
	color: var(--color-white-permanent);
}

/* --- Controls (search, language, mode) --- */
.nav-bar__controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	height: 48px;
}

/* Search button */
.nav-bar__search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	flex-shrink: 0;
	border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
	transition: background-color 0.2s ease;
}

.nav-bar__search:hover {
	background-color: var(--color-dark);
}

.nav-bar__search img {
	width: 18px;
	height: 18px;
	display: block;
}

/* Icon transition for smooth state changes */
.nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
	transition: filter 0.3s ease;
}


/* White icons on hover for search, lang, mode (all states) */
.nav-bar__search:hover img,
.nav-bar__lang:hover img:not(.nav-bar__lang-flag),
.nav-bar__lang.is-open img:not(.nav-bar__lang-flag),
.nav-bar__mode:hover img,
.nav-bar__mode.is-open img,
.nav-bar__link:hover img {
	filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   Search field (replaces nav links when active)
   ========================================================================== */

.nav-bar__search-field {
	display: none;
	flex: 1;
	min-width: 0;
	height: 48px;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: var(--neutral-white);
	border-radius: 4px;
	border: 1px solid var(--color-border);
}

.nav-bar.is-search-open .nav-bar__search-field {
	display: flex;
}

.nav-bar.is-search-open .nav-bar__links,
.nav-bar.is-search-open .nav-bar__links--fallback,
.nav-bar.is-search-open .nav-bar__scroll-wrap {
	display: none;
}

/* Hide the search toggle button when search is open */
.nav-bar.is-search-open .nav-bar__search {
	display: none;
}

.nav-bar__search-field-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-bar__search-field-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	filter: none !important;
}

.nav-bar__search-field-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none;
	background: none;
	outline: none;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-black);
}

.nav-bar__search-field-input::placeholder {
	color: var(--color-gray);
}

.nav-bar__search-field-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-bar__search-field-close img {
	width: 24px;
	height: 24px;
	filter: none !important;
	transition: opacity 0.2s ease;
}

.nav-bar__search-field-close:hover img {
	opacity: 1;
}

/* Search field icons & text always dark when open */
.nav-bar.is-search-open .nav-bar__search-field-icon,
.nav-bar.is-search-open .nav-bar__search-field-close img {
	filter: none !important;
}

.nav-bar.is-search-open .nav-bar__search-field-input {
	color: var(--color-black);
}

/* Mobile-only search (hidden on desktop) */
.nav-bar__search--mobile {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-dark);
}

/* ==========================================================================
	Shared dropdown styles (language & mode)
	========================================================================== */

/* Shared trigger base */
.nav-bar__lang,
.nav-bar__mode {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 4px;
	cursor: pointer;
	position: relative;
	user-select: none;
	border-radius: var(--radius-dropdown-trigger);
	color: var(--color-dark);
}

/* Shared trigger hover & open */
.nav-bar__lang:hover,
.nav-bar__mode:hover,
.nav-bar__lang.is-open,
.nav-bar__mode.is-open {
	background-color: var(--color-dark);
	border-radius: var(--radius-dropdown-trigger);
	color: var(--color-white-permanent);
}

/* Shared dropdown panel */
.nav-bar__lang-dropdown,
.nav-bar__mode-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--color-dark);
	border-radius: var(--radius-dropdown-panel);
	display: flex;
	padding: 4px;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
	z-index: 10;
}

/* Shared dropdown open state */
.nav-bar__lang.is-open .nav-bar__lang-dropdown,
.nav-bar__mode.is-open .nav-bar__mode-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ==========================================================================
	Language selector
	========================================================================== */

.nav-bar__lang {
	gap: 4px;
	width: 64px;
}

.nav-bar__lang-label {
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 28px;
	color: currentColor;
	transition: opacity 0.2s ease;
}

.nav-bar__lang.is-open .nav-bar__lang-label {
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

/* Chevron icons */
.nav-bar__lang-chevron {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

.nav-bar__lang-chevron--up {
	display: none;
}

.nav-bar__lang.is-open .nav-bar__lang-chevron--down {
	display: none;
}

.nav-bar__lang.is-open .nav-bar__lang-chevron--up {
	display: block;
}

/* Language option */
.nav-bar__lang-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--radius-option-default);
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 25px;
	color: var(--color-white-permanent);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Shared dropdown option hover & active */
.nav-bar__lang-option:hover,
.nav-bar__mode-option:hover {
	border-radius: var(--radius-option-active);
	background-color: var(--color-gray);
}

.nav-bar__lang-option.is-active,
.nav-bar__mode-option.is-active {
	border-radius: var(--radius-option-active);
	background-color: var(--color-primary-dark);
}


/* Flag icon */
.nav-bar__lang-flag {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ==========================================================================
	Mode / Contrast toggle
	========================================================================== */

.nav-bar__mode {
	width: 36px;
}

.nav-bar__mode-icon {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

/* Icon swap: dots visible by default, chevron when open */
.nav-bar__mode-icon--chevron {
	display: none;
}

.nav-bar__mode.is-open .nav-bar__mode-icon--dots {
	display: none;
}

.nav-bar__mode.is-open .nav-bar__mode-icon--chevron {
	display: block;
}

/* Mode dropdown specifics */
.nav-bar__mode-dropdown {
	min-width: 168px;
	width: auto;
	gap: 16px;
	white-space: nowrap;
}

.nav-bar__mode-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.nav-bar__mode-heading {
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 25px;
	color: var(--color-white-permanent);
	padding: 4px 8px;
	align-self: flex-end;
}

.nav-bar__mode-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: flex-end;
	padding: 4px 8px;
	background: none;
	border: none;
	border-radius: var(--radius-option-active);
	cursor: pointer;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 25px;
	color: var(--color-white-permanent);
	transition: background-color 0.2s ease;
}

/* hover & active handled by shared dropdown option styles above */

/* Font size controls */
.nav-bar__mode-fontsize {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

.nav-bar__mode-fontsize-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 32px;
	padding: 4px 8px;
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nav-bar__mode-fontsize-btn:hover {
	background-color: var(--color-white-alpha-10);
}

.nav-bar__mode-fontsize-btn img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.nav-bar__mode-fontsize-value {
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 25px;
	color: var(--color-white-permanent);
	min-width: 50px;
	text-align: center;
	padding: 4px 8px;
}

/* --- Hamburger button (mobile only, hidden on desktop) --- */
.nav-bar__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	color: var(--color-white-permanent);
}

/* --- Mobile close button --- */
.nav-bar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	flex-shrink: 0;
}

/* ==========================================================================
	Mobile menu overlay
	========================================================================== */

.nav-bar__mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	z-index: var(--z-mobile-menu);
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.nav-bar__mobile-menu.is-open {
	display: flex;
}

.nav-bar__mobile-menu.is-closing {
	display: flex;
	pointer-events: none;
	opacity: 0.5;
	transform: translateY(-100%);
	transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

.nav-bar__mobile-menu.is-closing > * {
	visibility: hidden;
}

/* Mobile menu icons white (dark purple bg) */
.nav-bar__mobile-menu img:not(.nav-bar__logo-img):not(.nav-bar__mobile-pill-flag) {
	filter: brightness(0) invert(1);
}

/* --- Mobile top bar --- */
.nav-bar__mobile-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	height: 68px;
	flex-shrink: 0;
}

.nav-bar__mobile-top .nav-bar__logo-img {
	width: 160px;
	height: 39px;
}

.nav-bar__mobile-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.nav-bar__mobile-actions .nav-bar__search {
	width: 44px;
	height: 44px;
	padding: 0;
}

/* --- Mobile accordion nav --- */
.nav-bar__mobile-nav {
	flex: 1;
	padding: 0 16px;
}

.nav-bar__mobile-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.nav-bar__mobile-item {
	border-bottom: 1px solid var(--color-white-permanent);
}

.nav-bar__mobile-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 10px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--color-white-permanent);
	text-decoration: none;
}

a.nav-bar__mobile-link {
	text-decoration: none;
}

.nav-bar__mobile-chevron {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.nav-bar__mobile-item.is-expanded .nav-bar__mobile-chevron {
	transform: rotate(180deg);
}

/* Sub-items */
.nav-bar__mobile-sub {
	list-style: none;
	padding: 0 0 16px 16px;
	margin: 0;
	display: none;
	flex-direction: column;
	gap: 0;
}

.nav-bar__mobile-item.is-expanded .nav-bar__mobile-sub {
	display: flex;
}

.nav-bar__mobile-sub li a {
	display: block;
	padding: 8px 0;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-white-permanent);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.nav-bar__mobile-sub li a:hover {
	opacity: 0.75;
}

/* --- Mobile options (language, mode, font size) --- */
.nav-bar__mobile-options {
	padding: 0 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
	flex-shrink: 0;
}

.nav-bar__mobile-option {
	display: flex;
	flex-direction: column;
}

/* Toggle row (clickable header for accordion) */
.nav-bar__mobile-option-toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 10px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.nav-bar__mobile-option-toggle--static {
	cursor: default;
}

.nav-bar__mobile-option-label {
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--color-white-permanent);
}

/* Chevron rotation on expanded */
.nav-bar__mobile-option.is-expanded .nav-bar__mobile-chevron {
	transform: rotate(180deg);
}

/* Expandable content (hidden by default) */
.nav-bar__mobile-option-content {
	display: none;
	padding-bottom: 8px;
}

.nav-bar__mobile-option.is-expanded .nav-bar__mobile-option-content {
	display: block;
}

/* Pills row */
.nav-bar__mobile-pills {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	min-height: 44px;
}

/* Pill button */
.nav-bar__mobile-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--corner-s, 12px) 2px var(--corner-s, 12px) var(--corner-s, 12px);
	background: transparent;
	border: none;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-white-permanent);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nav-bar__mobile-pill.is-active {
	background-color: var(--color-accent, #7666BC);
}

/* Flag icon inside pill */
.nav-bar__mobile-pill-flag {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Font size controls */
.nav-bar__mobile-font-size {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.nav-bar__mobile-font-size .nav-bar__mobile-pill {
	border-radius: var(--corner-s, 12px) var(--corner-s, 12px) 2px var(--corner-s, 12px);
	padding: 4px 8px;
	min-width: 40px;
	min-height: 32px;
}

.nav-bar__mobile-font-value {
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-white-permanent);
	min-width: 48px;
	text-align: center;
}

/* ==========================================================================
	Responsive — mobile breakpoint
	========================================================================== */

@media (max-width: 768px) {

	/* Switch header to white bg on mobile */
	.nav-bar__wrapper {
		height: 68px;
		padding: 12px 16px;
		background: var(--neutral-white);
		border-radius: 0;
		box-shadow: none;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		max-width: none;
		padding: 0;
		border-bottom: 1.5px solid var(--neutral-200, #D3D6DA);
		background: var(--neutral-white, #FFF);
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	}

	/* Neutralise all scroll-triggered changes on mobile — navbar stays the same */
	.nav-bar.is-fixed,
	.nav-bar.is-scrolled {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		max-width: none;
		padding: 0;
		border-bottom: 1.5px solid var(--neutral-200, #D3D6DA);
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	}

	.nav-bar__wrapper,
	.nav-bar.is-scrolled .nav-bar__wrapper,
	.nav-bar.is-fixed .nav-bar__wrapper {
		height: 68px;
		padding: 12px 16px;
		border-radius: 0;
		box-shadow: none;
	}

	/* Smaller logo */
	.nav-bar__logo {
		width: 160px;
		height: 39px;
	}

	.nav-bar__logo-img {
		width: 160px;
		height: 39px;
	}

	/* Swap to dark logo on mobile (white bg header) */
	.nav-bar__logo-img--light {
		display: none;
	}

	.nav-bar__logo-img--dark {
		display: block;
	}

	/* Hide desktop nav, controls, search field and expanded menu */
	.nav-bar__links,
	.nav-bar__links--fallback,
	.nav-bar__controls,
	.nav-bar__separator,
	.nav-bar__submenu-row {
		display: none !important;
	}

	.nav-bar__search-field {
		display: none !important;
	}

	/* Mobile search open state */
	.nav-bar.is-search-open .nav-bar__search-field {
		display: flex !important;
		flex: 1;
		min-width: 0;
		height: 48px;
		align-items: center;
		gap: 0;
		padding: 0 4px 0 0;
		background: var(--neutral-white);
		border: 1px solid var(--neutral-200, #D3D6DA);
		border-radius: 4px;
	}

	.nav-bar.is-search-open .nav-bar__search-field-icon {
		width: 24px;
		height: 24px;
		margin: 0 12px;
		filter: none !important;
	}

	.nav-bar.is-search-open .nav-bar__search-field-input {
		font-size: 0.875rem;
		color: var(--color-dark);
	}

	.nav-bar.is-search-open .nav-bar__search-field-close {
		width: 48px;
		height: 48px;
		flex-shrink: 0;
	}

	.nav-bar.is-search-open .nav-bar__search-field-close img {
		filter: none !important;
	}

	.nav-bar.is-search-open .nav-bar__logo,
	.nav-bar.is-search-open .nav-bar__search--mobile,
	.nav-bar.is-search-open .nav-bar__hamburger {
		display: none !important;
	}

	/* Disable expanded state on mobile */
	.nav-bar.is-expanded .nav-bar__wrapper {
		flex-direction: row;
		height: 68px;
	}

	/* Top row: logo left, icons right */
	.nav-bar__top {
		height: auto;
		align-items: center;
		gap: 0;
	}

	/* Reset icon filter for mobile header (white bg = dark icons) */
	.nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
		filter: none;
	}

	/* Show mobile search + hamburger — push to the right, 28px gap */
	.nav-bar__search--mobile {
		display: flex;
		margin-left: auto;
	}

	.nav-bar__hamburger {
		display: flex;
		color: var(--color-dark);
		margin-left: 8px;
	}

	/* Body scroll lock when menu open */
	body.nav-is-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   Subpages — navbar always in scrolled (white, fixed, fullwidth) state
   ========================================================================== */

body:not(.home) .nav-bar {
	position: fixed;
	top: 0;
	max-width: none;
	padding: 0;
}

body:not(.home) .nav-bar .nav-bar__wrapper {
	border-radius: 0;
	padding: 12px 64px;
}

/* Offset page content below fixed navbar on subpages */
body:not(.home) #main {
	padding-top: 80px;
}

@media (max-width: 768px) {
	body:not(.home) #main {
		padding-top: 68px;
	}

	body:not(.home) .nav-bar .nav-bar__wrapper {
		padding: 12px 16px;
	}
}

/* ==========================================================================
   Dark mode — in dark mode --neutral-white becomes dark, so text & icons
   must flip.
   ========================================================================== */

/* --- Text color: links --- */
html.mode-dark .nav-bar__link > a {
	color: var(--neutral-black);
}

/* --- Text color: lang & mode triggers --- */
html.mode-dark .nav-bar__lang,
html.mode-dark .nav-bar__mode {
	color: var(--neutral-black);
}

/* --- Text color: expanded submenu links --- */
html.mode-dark .nav-bar__submenu-link a {
	color: var(--neutral-black);
}

/* --- Search-open state --- */
html.mode-dark .nav-bar.is-search-open .nav-bar__lang,
html.mode-dark .nav-bar.is-search-open .nav-bar__mode {
	color: var(--neutral-black);
}

html.mode-dark .nav-bar.is-search-open .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
	filter: brightness(0) invert(1);
}

html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-icon,
html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-close img {
	filter: none !important;
}

html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-input {
	color: var(--neutral-black);
}

html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-input::placeholder {
	color: var(--neutral-600);
}

html.mode-dark .nav-bar.is-search-open .nav-bar__logo-img--dark {
	display: none;
}

html.mode-dark .nav-bar.is-search-open .nav-bar__logo-img--light {
	display: block;
}

/* --- Link hover: --neutral-white text --- */
html.mode-dark .nav-bar__link:hover > a,
html.mode-dark .nav-bar__link.is-expanded-active > a {
	color: var(--neutral-white);
}

/* --- Active link: keep white on navy bg --- */
html.mode-dark .nav-bar__link.is-active > a {
	color: var(--color-white-permanent);
}

/* --- Lang/mode hover & open --- */
html.mode-dark .nav-bar__lang:hover,
html.mode-dark .nav-bar__lang.is-open,
html.mode-dark .nav-bar__mode:hover,
html.mode-dark .nav-bar__mode.is-open {
	color: var(--neutral-white);
}

/* --- Link hover bg --- */
html.mode-dark .nav-bar__link:hover {
	background-color: var(--color-dark);
}

html.mode-dark .nav-bar__link.is-active,
html.mode-dark .nav-bar__link.is-active:hover {
	background: var(--navy-500);
}

/* --- Search hover bg --- */
html.mode-dark .nav-bar__search:hover {
	background-color: var(--color-dark);
}

/* --- Submenu hover/active --- */
html.mode-dark .nav-bar__submenu-link:hover a,
html.mode-dark .nav-bar__submenu-link.is-active a {
	color: var(--neutral-white);
}

/* --- Submenu hover/active bg --- */
html.mode-dark .nav-bar__submenu-link:hover,
html.mode-dark .nav-bar__submenu-link.is-active {
	background-color: var(--color-dark);
}

/* --- Icons on hover: remove white filter --- */
html.mode-dark .nav-bar__search:hover img,
html.mode-dark .nav-bar__lang:hover img:not(.nav-bar__lang-flag),
html.mode-dark .nav-bar__lang.is-open img:not(.nav-bar__lang-flag),
html.mode-dark .nav-bar__mode:hover img,
html.mode-dark .nav-bar__mode.is-open img,
html.mode-dark .nav-bar__link:hover img {
	filter: none !important;
}

/* --- Logo: swap back to light (white) version on dark bg --- */
html.mode-dark .nav-bar__logo-img--dark {
	display: none;
}

html.mode-dark .nav-bar__logo-img--light {
	display: block;
}

/* --- Icons: invert back to white on dark bg --- */
html.mode-dark .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
	filter: brightness(0) invert(1);
}

/* --- Mobile: icons & text on dark bg --- */
@media (max-width: 768px) {
	html.mode-dark .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
		filter: brightness(0) invert(1);
	}

	html.mode-dark .nav-bar__hamburger {
		color: var(--neutral-black);
	}

	html.mode-dark .nav-bar__logo-img--dark {
		display: none;
	}

	html.mode-dark .nav-bar__logo-img--light {
		display: block;
	}
}

/* --- Fallback navigation --- */
.nav-bar__links--fallback {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}

.nav-bar__links--fallback a {
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 28px;
	color: var(--color-white-permanent);
	text-decoration: none;
	padding: 4px 24px;
}