/* =========================================================================
   "Your nationality" -- the type-ahead, shared.

   Used by the opportunity directory ([befello_discovery]) and the homepage
   showcase ([befello_home_opportunities]); pairs with
   public/js/nationality-picker.js. Every selector starts with .bfd-nat, so
   nothing here reaches the theme or another component.

   The tokens are declared on .bfd-nat itself, from the theme's --bf-* layer
   with fallbacks, so the picker looks the same inside the directory's .bfd
   root and on the homepage, where there is no .bfd root at all.
   ========================================================================= */

.bfd-nat {
	--bfd-nat-blue: var(--bf-cta, #0069c7);
	--bfd-nat-ink: var(--bf-ink, #252a27);
	--bfd-nat-muted: var(--bf-ink-muted, #545b57);
	--bfd-nat-surface: var(--bf-surface, #fff);
	--bfd-nat-border: var(--bf-border, #e4e8e6);
	--bfd-nat-radius: var(--bf-radius-btn, 8px);
	--bfd-nat-ring: var(--befello-focus-ring, #0069c7);
	--bfd-nat-set: var(--bf-surface-yellow, #fff8d8);
	--bfd-nat-h: 3.25rem;   /* 52px; 48px on a phone */

	position: relative;
	min-width: 0;
}

.bfd-nat,
.bfd-nat *,
.bfd-nat *::before,
.bfd-nat *::after {
	box-sizing: border-box;
}

/* --- Before the script ----------------------------------------------------
   The field is the same text box with or without the script; only the
   controls that need it (the clear button, "add a second nationality")
   wait for it. The browser's own <datalist> suggestions cover the gap. */

.bfd-nat:not(.is-enhanced) .bfd-nat__clear,
.bfd-nat:not(.is-enhanced) .bfd-nat__add {
	display: none;
}

/* --- The field ------------------------------------------------------------ */

.bfd-nat__slot {
	position: relative;
}

.bfd-nat__slot + .bfd-nat__slot {
	margin-top: 0.5rem;
}

.bfd-nat__slot[hidden] {
	display: none;
}

.bfd-nat__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--bfd-nat-h);
	background: var(--bfd-nat-surface);
	border: 1px solid var(--bfd-nat-blue);
	border-radius: var(--bfd-nat-radius);
	transition: background-color 0.12s ease;
}

/* Focus thickens the field's one border instead of drawing a second ring
   2px outside it (which read as two overlapping borders). Lit only while the
   text input has focus, so tabbing to the clear button shows that button's
   ring alone. The fallback covers browsers without :has(). */
.bfd-nat__box:has(.bfd-nat__input:focus) {
	border-color: #087fe4;
	box-shadow: 0 0 0 1px #087fe4;
}

@supports not selector(:has(*)) {
	.bfd-nat__box:focus-within {
		border-color: #087fe4;
		box-shadow: 0 0 0 1px #087fe4;
	}
}

/* Forced-colours mode drops box-shadow; keep a visible focus there. */
@media (forced-colors: active) {
	.bfd-nat__box:focus-within {
		outline: 2px solid CanvasText;
	}
}

/*
 * A chosen nationality is the reader's own fact, so the field takes the
 * warm brand tint and the name its weight: at a glance, "this is set, and
 * it is about me". The blue border stays -- it is what keeps the field's
 * edge at 3:1 against the page, which a yellow edge on white would not.
 */
.bfd-nat__box.is-set {
	background: var(--bfd-nat-set);
}

.bfd-nat__icon {
	display: inline-flex;
	flex: none;
	padding-left: 1rem;
	color: var(--bfd-nat-blue);
}

/* (0,2,0) to settle GeneratePress's input[type] rules. 16px text, never
   less: iOS zooms the page on focus below that. */
.bfd-nat .bfd-nat__input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	align-self: stretch;
	height: auto;
	margin: 0;
	padding: 0 0.75rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bfd-nat-ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.bfd-nat .bfd-nat__input:focus {
	background: transparent;
	color: var(--bfd-nat-ink);
	border: 0;
	box-shadow: none;
	outline: none;   /* the box carries the ring */
}

.bfd-nat .bfd-nat__input::placeholder {
	color: var(--bfd-nat-muted);
	opacity: 1;
}

.bfd-nat .bfd-nat__box.is-set .bfd-nat__input {
	font-weight: 600;
}

/* One clear control, labelled by the script with the country it removes. */
.bfd-nat .bfd-nat__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--bfd-nat-radius);
	background: none;
	color: var(--bfd-nat-muted);
	cursor: pointer;
}

.bfd-nat .bfd-nat__clear:hover,
.bfd-nat .bfd-nat__clear:focus {
	background: none;
	color: var(--bfd-nat-ink);
}

.bfd-nat .bfd-nat__clear:focus-visible {
	outline: 2px solid var(--bfd-nat-ring);
	outline-offset: -2px;
}

.bfd-nat .bfd-nat__clear[hidden] {
	display: none;
}

/* --- Suggestions -----------------------------------------------------------
   Six at most, so the list never needs to scroll; it floats over the page
   rather than pushing the content below down and back up on every
   keystroke. */

.bfd-nat__list {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--bfd-nat-surface);
	border: 1px solid var(--bfd-nat-border);
	border-radius: var(--bfd-nat-radius);
	box-shadow: 0 8px 24px rgba(14, 16, 20, 0.12);
}

.bfd-nat__list[hidden] {
	display: none;
}

.bfd-nat .bfd-nat__option {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 0.75rem;
	border-radius: calc(var(--bfd-nat-radius) - 2px);
	color: var(--bfd-nat-ink);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.bfd-nat .bfd-nat__option::before {
	content: none;   /* themes that bullet <li> */
}

.bfd-nat__option strong {
	font-weight: 700;
}

.bfd-nat__option:hover,
.bfd-nat__option.is-active {
	background: var(--bf-primary-soft, #e8f4fe);
}

.bfd-nat__empty {
	margin: 0;
	padding: 0.75rem;
	color: var(--bfd-nat-muted);
	font-size: 0.875rem;
}

/* --- Under the field ------------------------------------------------------- */

.bfd-nat__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.75rem;
	margin: 0.25rem 0 0;
	color: var(--bfd-nat-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

.bfd-nat__meta:not(:has(> :not([hidden]))) {
	display: none;
}

.bfd-nat__note[hidden],
.bfd-nat__add[hidden] {
	display: none;
}

.bfd-nat .bfd-nat__add {
	min-height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bfd-nat-blue);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bfd-nat .bfd-nat__add:hover,
.bfd-nat .bfd-nat__add:focus {
	background: none;
	color: var(--bf-primary-hover, #005baf);
}

.bfd-nat .bfd-nat__add:focus-visible {
	outline: 2px solid var(--bfd-nat-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bfd-nat__box {
		transition: none;
	}
}

@media (max-width: 640px) {
	.bfd-nat {
		--bfd-nat-h: 3rem;
	}

	/* Brought to the top of the screen when focused, so the suggestions
	   open above the keyboard; this keeps the label in view too. */
	.bfd-nat__slot {
		scroll-margin-top: 2.5rem;
	}

	.bfd-nat .bfd-nat__add {
		min-height: 2.75rem;
	}
}