/*
 * FC Header V2 - phones (below the breakpoint).
 * Loaded with <link media="(max-width: N-1px)">, N being the breakpoint setting,
 * so these rules need no @media of their own.
 */

.fchdr2-nav,
.fchdr2-ic-l,
.fchdr2 .is-hide-m {
	display: none !important;
}

.fchdr2-row {
	position: relative;
	gap: 6px;
	min-height: var(--fchdr2-h-m);
	padding: 0 8px;
}

/* Each side at least as wide as its icons: with more icons at the end (five, with the
 * quotation icon) the logo moves aside instead of sliding under them. */
.fchdr2-logo-center .fchdr2-row {
	grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
}

/* On a phone the burger always opens the row; a "start" logo then sits next to it. */
.fchdr2-logo-start .fchdr2-row {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "s l e";
}

.fchdr2-logo-start .fchdr2-logo {
	justify-content: flex-start;
}

.fchdr2-start {
	gap: 0;
}

.fchdr2-end {
	gap: 0;
}

.fchdr2-logo img {
	height: var(--fchdr2-logo-h-m);
}

/* Icons are bigger on a phone: a 44px touch target, as accessibility guidance asks. */
.fchdr2-ic {
	padding: 10px;
	border-radius: 14px;
}

.fchdr2-svg {
	width: 24px;
	height: 24px;
}

.fchdr2-ic .fchdr2-svg {
	width: var(--fchdr2-ic-m, 24px);
	height: var(--fchdr2-ic-m, 24px);
}

.fchdr2-ic .fchdr2-emo {
	font-size: calc(var(--fchdr2-ic-m, 24px) * .88);
}

.fchdr2-ic .fcw1-ico {
	width: var(--fchdr2-ic-m, 24px);
	height: var(--fchdr2-ic-m, 24px);
}

.fchdr2-count {
	min-width: 18px;
	height: 18px;
	font-size: 10.5px;
}

/* The search box folds into an icon and opens under the row. */
.fchdr2-search {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline: 8px;
	z-index: 5;
	display: none;
	max-width: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.fchdr2-search.is-open {
	display: flex;
	animation: fchdr2-pop .18s var(--ease);
}

.fchdr2-search input[type="search"] {
	padding: 12px;
	font-size: 16px; /* 16px stops iOS from zooming in on focus */
}

.fchdr2-results {
	min-width: 0;
}

.fchdr2-bar {
	padding-inline: 12px 38px;
	font-size: var(--fchdr2-bar-fs-m);
}

.fchdr2-lang-pop {
	inset-inline-end: -6px;
}

/* Narrow phones (360-400px): a little less padding so five icons and the logo still fit. */
@media (max-width: 400px) {
	.fchdr2-ic {
		padding: 8px;
	}

	.fchdr2-svg,
	.fchdr2-ic .fchdr2-svg {
		width: calc(var(--fchdr2-ic-m, 24px) - 2px);
		height: calc(var(--fchdr2-ic-m, 24px) - 2px);
	}
}

/* The smallest phones (320px): five icons, the burger, search and the logo in one row.
 * After the 400px block, so it wins where both apply. */
@media (max-width: 340px) {
	.fchdr2-ic {
		padding: 6px;
	}

	.fchdr2-svg,
	.fchdr2-ic .fchdr2-svg {
		width: calc(var(--fchdr2-ic-m, 24px) - 4px);
		height: calc(var(--fchdr2-ic-m, 24px) - 4px);
	}
}