/* Headers, Footers & Menus 1.17.0: the desktop mega menus of the header (hfd-mm-*), one component for all eight.
   Every value is a custom property printed by HFD_MM::print_vars() on the wrapper [data-mm]. Nothing here is measured
   by script: positions, the pointer, the animation, the close delay and "one menu at a time" are CSS. Desktop only. */
@media (max-width: 991.98px) {
	/* Phones and tablets have their own menus (the phone bar and panels): the desktop panels are not drawn there at all. */
	.hfd-mm__panel, .hfd-mm-bar { display: none !important; }
}
@media (min-width: 992px) {
	#top_menu_wrp { position: relative; }
	#top_menu_wrp .hfd-mm { position: relative; }
	/* Wide panels are placed by #top_menu_wrp (centred under the whole header), so their wrappers must not be positioned. */
	#top_menu_wrp .hfd-mm[data-mm-w="wide"] { position: static !important; }
	/* The theme's entrance animation leaves transform: translateY(0) scale(1) on the logo wrapper, which would make it the containing block of its panel. */
	#top_menu_wrp .hfd-mm.header-anim.header-anim-visible { transform: none !important; }
	/* The theme's old pointers on the wrappers (Additional CSS) are not drawn; the component has its own. */
	.hfd-mm.site-header-logo::before, .hfd-mm > a::before { display: none !important; }

	/* The logo link's hover box (Additional CSS: .custom-logo-link(-alt):after) is sized by the nearest positioned ancestor; with the
	   logo wrapper unpositioned (wide panel) it covered the whole header and page, so the link itself is positioned. */
	#top_menu_wrp .site-header-logo :is(.custom-logo-link, .custom-logo-link-alt) { position: relative; }
	/* The hover box behind every header icon (theme / Additional CSS: .icon-tooltip-animation::after and the logo link's ::after, grey
	   rgba(0,0,0,.26) with a shadow): colour, opacity and shadow come from settings icon_hl_* ; default transparent = no box. */
	#top_menu_wrp .hfd-mm.icon-tooltip-animation::after, #top_menu_wrp .hfd-mm > .icon-tooltip-animation::after, #top_menu_wrp .hfd-mm > .icon-tooltip-animation *::after, #top_menu_wrp .translate-reset-button-desktop::after,
	#top_menu_wrp .site-header-logo :is(.custom-logo-link, .custom-logo-link-alt)::after { background: var(--mm-ihl) !important; box-shadow: var(--mm-ihl-sh) !important; border-radius: var(--mm-ihl-r) !important; }
	/* 1.19.11: on the home page with the header not scrolled (blue header, theme: body.home without body.sticky-header) the box takes the home tint; everywhere else the inner pages tint (--mm-ihl). */
	body.home:not(.sticky-header) #top_menu_wrp .hfd-mm.icon-tooltip-animation::after, body.home:not(.sticky-header) #top_menu_wrp .hfd-mm > .icon-tooltip-animation::after, body.home:not(.sticky-header) #top_menu_wrp .hfd-mm > .icon-tooltip-animation *::after, body.home:not(.sticky-header) #top_menu_wrp .translate-reset-button-desktop::after,
	body.home:not(.sticky-header) #top_menu_wrp .site-header-logo :is(.custom-logo-link, .custom-logo-link-alt)::after { background: var(--mm-ihl-home) !important; }
	/* Size: the slot's width (or icon_hl_w), from the top of the header (below the admin bar; --mm-hdr from hfd-mm.js) down to the top
	   of the open-menu bar, like the phone bar's highlight (top of the bar to its bottom); icon_hl_h overrides. Never over the bar. */
	#top_menu_wrp .hfd-mm.icon-tooltip-animation:not(.site-header-logo)::after, #top_menu_wrp .hfd-mm > .icon-tooltip-animation::after, #top_menu_wrp .translate-reset-button-desktop::after {
		inset: auto auto calc(-1 * var(--mm-bdy)) calc(50% - var(--mm-ihl-w, 100%) / 2) !important; width: var(--mm-ihl-w, 100%) !important;
		height: var(--mm-ihl-h, calc(var(--mm-hdr, 100%) + var(--mm-bdy))) !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
	}
	#top_menu_wrp .site-header-logo :is(.custom-logo-link, .custom-logo-link-alt)::after { top: auto !important; bottom: calc(-1 * var(--mm-bdy) - var(--mm-logo-lift, 0px)) !important; height: var(--mm-ihl-h, calc(var(--mm-hdr, 105%) + var(--mm-bdy))) !important; padding: 0 !important; }

	/* ---- equal icon slots (body.hfd-mm-slots, setting icon_slot_mode = equal): the six menu icons get one width and height, the
	   picture (or the video / globe and its caption) is fitted inside, centred, standing on the bottom; the logo keeps its width,
	   same height. Slots give way (flex-shrink) when the header row is too narrow. The bar and the hover box take the slot's size. ---- */
	body.hfd-mm-slots #top_menu_wrp > .hfd-mm:not(.site-header-logo), body.hfd-mm-slots #translate_wrp { flex: 0 1 var(--mm-slot-w); width: var(--mm-slot-w); min-width: 0; }
	/* Translate / English buttons keep the display the theme switches (one of the two is hidden per language); only their box is sized. */
	body.hfd-mm-slots #translate_wrp > .icon-tooltip-animation { width: 100% !important; min-width: 0 !important; height: var(--mm-slot-h) !important; box-sizing: border-box; text-align: center; align-content: end; }
	body.hfd-mm-slots #top_menu_wrp > .hfd-mm:not(.site-header-logo) > .icon-tooltip-animation {
		display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; width: 100% !important; min-width: 0 !important; height: var(--mm-slot-h) !important; box-sizing: border-box; margin: 0 !important;
	}
	body.hfd-mm-slots #top_menu_wrp > .hfd-mm:not(.site-header-logo) > .icon-tooltip-animation > :is(img, video) { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; flex: 0 1 auto; min-height: 0; }
	body.hfd-mm-slots #top_menu_wrp > .site-header-logo { height: var(--mm-slot-h); width: var(--mm-logo-w, auto); flex: none; display: flex; flex-direction: column; justify-content: flex-end; }

	/* ---- open-menu bar: ONE bar under the icons that slides to the hovered icon (hfd-mm.js sets --bx / --bw / --by), grows in and out
	   with the panel. Home page with the header not scrolled: blue (white icons on the photo); everywhere else the icons' purple. ---- */
	.hfd-mm-bar {
		position: absolute; left: 0; top: calc(var(--by, 100%) + var(--mm-bdy)); width: var(--bw, 0); height: var(--mm-ind-h); /* 1.19.1: its bottom edge is the header's bottom edge (--mm-hb from hfd-mm.js, lifted by ind_gap), the box starts right there */
		translate: var(--bx, 0) 0; scale: 0 1; transform-origin: 0 50%; background: var(--mm-ind-c); pointer-events: none; z-index: 51;
		/* Hidden = scaleX(0) from the left edge (no fade): it grows in from the left in bar_in_ms (ease-out)
		   and shrinks back to the left as fast as a panel closes (switch_ms); between icons it slides (translate + width, bar_ms). */
		transition: translate var(--mm-bar-ms) ease, width var(--mm-bar-ms) ease, scale var(--mm-switch-ms) ease-out var(--mm-delay);
	}
	/* While the page loads (the header's icons still slide in), no panel, no bar and no transition at all (class set in <head>, removed by hfd-mm.js). */
	html.hfd-mm-wait .hfd-mm > .hfd-mm__panel { visibility: hidden !important; transition: none !important; }
	html.hfd-mm-wait .hfd-mm > .hfd-mm__panel > .hfd-mm__box { opacity: 0 !important; transform: translateY(var(--mm-anim-y)) scale(var(--mm-anim-s)) !important; transition: none !important; }
	html.hfd-mm-wait .hfd-mm-bar { scale: 0 1 !important; transition: none !important; }
	/* Until the mouse really moves on the page (html.hfd-mm-still, see hfd-mm.js) hover opens nothing: no panel, no bar, no icon box.
	   Keyboard focus still opens its menu. */
	html.hfd-mm-still .hfd-mm:not(:has(:focus-visible)) > .hfd-mm__panel { visibility: hidden !important; transition: none !important; }
	html.hfd-mm-still .hfd-mm:not(:has(:focus-visible)) > .hfd-mm__panel > .hfd-mm__box { opacity: 0 !important; transform: translateY(var(--mm-anim-y)) scale(var(--mm-anim-s)) !important; transition: none !important; }
	html.hfd-mm-still #top_menu_wrp:not(:has(:focus-visible)) .hfd-mm-bar { scale: 0 1 !important; transition: none !important; }
	html.hfd-mm-still #top_menu_wrp .icon-tooltip-animation::after, html.hfd-mm-still #top_menu_wrp .icon-tooltip-animation *::after { opacity: 0 !important; visibility: hidden !important; transition: none !important; } /* held in the closed state, so the first open after loading animates normally */
	html.hfd-mm-wait #top_menu_wrp .icon-tooltip-animation::after, html.hfd-mm-wait #top_menu_wrp .icon-tooltip-animation *::after { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
	.hfd-mm-bar.is-jump { transition: scale var(--mm-bar-in-ms) ease-out; } /* first appearance: placed at once, only the grow animates */
	body.sticky-header .hfd-mm-bar { background: var(--mm-ind-scr); } /* header scrolled (theme script: body.sticky-header) */
	body.home:not(.sticky-header) .hfd-mm-bar { background: var(--mm-ind-home); }
	#top_menu_wrp:has(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active), .hover_from_home)) .hfd-mm-bar,
	#top_menu_wrp.active .hfd-mm-bar { scale: 1 1; transition: translate var(--mm-bar-ms) ease, width var(--mm-bar-ms) ease, scale var(--mm-bar-in-ms) ease-out 0s; }
	#top_menu_wrp:has(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active), .hover_from_home)) .hfd-mm-bar.is-jump { transition: scale var(--mm-bar-in-ms) ease-out 0s; }

	/* .hfd-mm > : a logged-in user also gets wp-includes/css/dist/components/style.min.css, whose [role="region"] { position: relative }
	   (same weight as one class, printed later) put every panel into the flow and blew the header up. */
	/* Production's animation (Additional CSS of the theme's menus): closed translateY(20px) scale(.8), opacity 0, visibility hidden,
	   z-index -1; open scale(1), opacity 1, visible, z-index 50; "transition: all .4s ease". Same values, with two splits:
	   - the visible box (.hfd-mm__box) moves and fades, the panel itself (with its transparent roof under the bar) only switches
	     visibility / z-index, so the hover zone is in place from the first frame (a quick move from the icon down never loses it);
	   - z-index is not animated (production's -1..50 ramp let the closing panel cover the opening one).
	   Closing is as fast as a switch (--mm-switch-ms), after close_delay (default 0). */
	.hfd-mm > .hfd-mm__panel {
		--mm-pw: min(var(--mm-w), calc(100vw - 2 * var(--mm-edge)));
		--mm-sh: min(var(--mm-h), calc(100vh - 99px - var(--mm-gap) - var(--mm-bottom) - 2 * var(--mm-pad) - 2 * var(--mm-pbd-w)));
		position: absolute; top: 100%; left: 50%; width: var(--mm-pw); margin-left: calc(var(--mm-pw) / -2);
		padding-top: var(--mm-gap); /* transparent roof down to the indicator bar: the pointer stays inside the hover zone */
		box-sizing: border-box; text-align: left;
		visibility: hidden; z-index: -1;
		transition: z-index 0s linear calc(var(--mm-switch-ms) + var(--mm-delay)), visibility 0s linear calc(var(--mm-switch-ms) + var(--mm-delay));
	}
	.hfd-mm > .hfd-mm__panel > .hfd-mm__box {
		opacity: 0; transform: translateY(var(--mm-anim-y)) scale(var(--mm-anim-s)); transform-origin: 50% 50%;
		/* 1.19.10: closing is a fade IN PLACE. The slide / shrink pose is applied only after the fade is over (transform waits delay + fade, 0s long), so during the closing delay and the fade the panel does not move at all;
		   the next opening still starts from that pose. Coming back to the icon or the panel during the delay or the fade cancels the close (the open rule takes over). */
		transition: opacity var(--mm-switch-ms) ease var(--mm-delay), transform 0s linear calc(var(--mm-switch-ms) + var(--mm-delay));
	}
	/* Open: pointer over the menu, keyboard focus (:focus-visible, so a mouse click on a link does not pin the menu open) in it, a press inside the panel (scrollbar drag, text selection: :active stays while the button is held, even outside), the theme's home hover, "Translate This Website" in the main menu. */
	:is(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active)), .site-header-logo.hover_from_home, #top_menu_wrp.active .hfd-mm[data-mm="translate"]) > .hfd-mm__panel { visibility: visible; z-index: 50; transition-delay: 0s; }
	:is(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active)), .site-header-logo.hover_from_home, #top_menu_wrp.active .hfd-mm[data-mm="translate"]) > .hfd-mm__panel > .hfd-mm__box { opacity: 1; transform: none; transition: opacity var(--mm-anim-ms) ease 0s, transform var(--mm-anim-ms) ease 0s; /* opening: production's .4s */ }
	/* 1.17.0: short windows (a 15.6" laptop at zoom 100% is about 1536x656 CSS px), like production (header.php 1.9.40): the OPEN panel is scaled from its top edge so it stays attached to its icon
	   (settings fit_1: window up to 820px high, fit_2: up to 700px; 1 = no scaling; the logo menu, Contact and FAQ are .9 / .8 as on production, the list menus 1). */
	@media (max-height: 820px) {
		/* 1.19.10: the origin is the top edge in EVERY state, not only when open. It used to be set only on the open box, so the moment the mouse left (the box then waits out the closing delay, still fully visible)
		   its origin snapped back to the centre and the whole panel, scaled .9 / .8, jumped down by half its missing height (about 27px at .9, 54px at .8 on the 540px logo menu): Ben's "boom, it drops down" on the logo menu, Contact and FAQ. */
		#top_menu_wrp .hfd-mm > .hfd-mm__panel > .hfd-mm__box { transform-origin: 50% 0; }
		#top_menu_wrp :is(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active)), .site-header-logo.hover_from_home) > .hfd-mm__panel > .hfd-mm__box { transform: scale(var(--mm-fit-1)); }
	}
	@media (max-height: 700px) {
		#top_menu_wrp :is(.hfd-mm:is(:hover, :has(:focus-visible), :has(> .hfd-mm__panel:active)), .site-header-logo.hover_from_home) > .hfd-mm__panel > .hfd-mm__box { transform: scale(var(--mm-fit-2)); }
	}
	/* 1.19.13: the pointer area of a panel is its VISIBLE box. The box is scaled (short windows) but its layout box and the panel around it keep the full size, so the empty strip below and beside the scaled box used to keep the menu open.
	   Now the panel itself ignores the pointer and only the box (as it is drawn, scale included) catches it. The bridge between the icon and the box is the panel's roof (::before, as tall as the gap and as wide as the unscaled panel, the same band as before, the box top does not move when scaled),
	   so moving from the icon into the panel, even diagonally, never loses the menu. */
	.hfd-mm > .hfd-mm__panel { pointer-events: none; }
	.hfd-mm > .hfd-mm__panel > .hfd-mm__box { pointer-events: auto; }
	.hfd-mm > .hfd-mm__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--mm-gap); pointer-events: auto; }
	/* One menu at a time: when another menu is hovered, the one left behind starts closing at once (--mm-switch-ms) and drops under
	   the new one from the first frame (z-index 40 against the open 50, no transition), even when a delayed close was already
	   scheduled: a running transition keeps its delay unless its end value changes, so this state ends on values a hair different
	   from the plain closed state (visibility collapse = hidden for a div, opacity .0001, 0.01px). It stops catching the pointer at once. */
	#top_menu_wrp:has(.hfd-mm:hover) .hfd-mm:not(:hover):not(.hover_from_home) > .hfd-mm__panel { visibility: collapse; z-index: 40; pointer-events: none; transition: z-index 0s, visibility 0s linear var(--mm-switch-ms); }
	#top_menu_wrp:has(.hfd-mm:hover) .hfd-mm:not(:hover):not(.hover_from_home) > .hfd-mm__panel > .hfd-mm__box { opacity: .0001; transform: translateY(calc(var(--mm-anim-y) + .01px)) scale(var(--mm-anim-s)); transition: opacity var(--mm-switch-ms) ease 0s, transform 0s linear var(--mm-switch-ms); } /* 1.19.10: fades in place under the new menu, no drop */
	/* 1.20.17: Escape / a click outside (script adds .is-esc): the menu closes at once, no closing delay, a fade in place; stays closed while the pointer rests on the icon, lifted when it comes back. */
	#top_menu_wrp .hfd-mm.is-esc.is-esc.is-esc > .hfd-mm__panel { visibility: collapse; z-index: 40; pointer-events: none; transition: z-index 0s, visibility 0s linear var(--mm-switch-ms); }
	#top_menu_wrp .hfd-mm.is-esc.is-esc.is-esc > .hfd-mm__panel > .hfd-mm__box { opacity: .0001; transform: translateY(calc(var(--mm-anim-y) + .01px)) scale(var(--mm-anim-s)); transition: opacity var(--mm-switch-ms) ease 0s, transform 0s linear var(--mm-switch-ms); }
	/* "Translate This Website" (theme script: class active on #top_menu_wrp): only the translation panel is open. */
	#top_menu_wrp.active .hfd-mm:not([data-mm="translate"]):is(:hover, .hover_from_home) > .hfd-mm__panel { visibility: hidden; z-index: -1; transition-delay: 0s; }
	#top_menu_wrp.active .hfd-mm:not([data-mm="translate"]):is(:hover, .hover_from_home) > .hfd-mm__panel > .hfd-mm__box { opacity: 0; transform: translateY(var(--mm-anim-y)) scale(var(--mm-anim-s)); transition-delay: 0s; }
	/* Narrow panels hang from their own icon (data-mm-a), wide ones are centred under the header (the host is not positioned, #top_menu_wrp is). */
	/* Lists (Colleges, Countries): like production, the panel is as wide as its columns (each as wide as its longest name),
	   at most --mm-pw, centred; narrower windows wrap long names instead. */
	/* 1.17.0: a wide panel never runs past the header row (#top_menu_wrp starts at the logo's left edge): Ben 13.10, "I don't want that to go past the logo". */
	.hfd-mm[data-mm-w="wide"] > .hfd-mm__panel { --mm-pw: min(var(--mm-w), calc(100vw - 2 * var(--mm-edge)), 100%); }
	.hfd-mm > .hfd-mm__panel[data-kind="list"] { left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: var(--mm-pw); }
	.hfd-mm[data-mm-a="left"] > .hfd-mm__panel { left: 0; margin-left: 0; }
	/* A wide panel aligned left (the logo menu) starts at the left edge of #top_menu_wrp, which is the logo's left edge, and never runs past its right edge. */
	.hfd-mm[data-mm-w="wide"][data-mm-a="left"] > .hfd-mm__panel { width: min(var(--mm-w), 100%); }
	.hfd-mm[data-mm-a="right"] > .hfd-mm__panel { left: auto; right: 0; margin-left: 0; }

	.hfd-mm__box {
		position: relative; box-sizing: border-box; background: var(--mm-bg); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow);
		border: var(--mm-pbd-w) solid var(--mm-pbd-c); padding: var(--mm-pad);
	}
	.hfd-mm__scroll {
		max-height: var(--mm-sh); overflow: hidden auto; overscroll-behavior: contain;
	}
	/* Firefox only: in Chrome 121+ a set scrollbar-color switches the ::-webkit-scrollbar width and thumb hover below off (native 15px). */
	@supports not selector(::-webkit-scrollbar) {
		.hfd-mm__scroll { scrollbar-width: auto; scrollbar-color: var(--mm-sb-thumb) var(--mm-sb-track); }
	}
	.hfd-mm__scroll::-webkit-scrollbar { width: var(--mm-sb-w); height: var(--mm-sb-w); }
	.hfd-mm__scroll::-webkit-scrollbar-track { background: var(--mm-sb-track); }
	.hfd-mm__scroll::-webkit-scrollbar-thumb { background: var(--mm-sb-thumb); border-radius: 0; }
	.hfd-mm__scroll::-webkit-scrollbar-thumb:hover { background: var(--mm-sb-thumb-hv); }
	/* 1.19.10 drawn scrollbar (hfd-mm.js adds html.hfd-mm-sb): the browser's bar cannot have a handle of one fixed length (its length follows the list), and Ben wants the handle the same in all four menus
	   (2 rows long, setting sb_rows). The native bar is hidden, its 8px stay as padding, and a track + handle are drawn over them (wheel, drag, click on the track and keyboard all work). Without the script the native bar stays. */
	html.hfd-mm-sb .hfd-mm__scroll { scrollbar-width: none !important; }
	html.hfd-mm-sb .hfd-mm__scroll::-webkit-scrollbar, html.hfd-mm-sb body #top_menu_wrp #translate_wrp .hfd-mm__scroll::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
	html.hfd-mm-sb .hfd-mm__panel[data-scrolls="1"] .hfd-mm__scroll { padding-right: var(--mm-sb-w); }
	html.hfd-mm-sb .hfd-mm[data-mm="translate"] .hfd-mm__panel .hfd-mm__scroll { scrollbar-gutter: auto; padding-right: calc(var(--mm-sb-w) / 1.3); }
	.hfd-mm__sb { display: none; position: absolute; z-index: 4; width: var(--mm-sb-w); background: var(--mm-sb-track); touch-action: none; }
	html.hfd-mm-sb .hfd-mm__panel[data-scrolls="1"] .hfd-mm__sb { display: block; }
	.hfd-mm__sbt { position: absolute; left: 0; top: 0; width: 100%; background: var(--mm-sb-thumb); border-radius: 0; touch-action: none; }
	.hfd-mm__sbt:hover, .hfd-mm__sbt.is-drag { background: var(--mm-sb-thumb-hv); }
	.hfd-mm__panel ul { list-style: none; margin: 0; padding: 0; }
	.hfd-mm__panel a, .hfd-mm__panel a:hover, .hfd-mm__panel a:focus { text-decoration: none !important; outline-offset: -2px; }
	/* One underline only (ours, on .hfd-mm__t): the theme's slide underline (style.css: li:not(.menu-item) > a ... background-image gradient,
	   grown to 100% 3px on hover, !important) also caught the row links and drew a second line under the whole link. */
	#top_menu_wrp .hfd-mm__panel a, #top_menu_wrp .hfd-mm__panel a:hover, #top_menu_wrp .hfd-mm__panel a:focus { background-image: none !important; border-bottom: 0 !important; } /* the id: the theme's rule is !important with five classes */

	/* ---- hint (top right, outside the scrolling area; shown by the script only when the list scrolls) ---- */
	.hfd-mm__hint {
		display: none; position: absolute; right: var(--mm-hint-r); top: var(--mm-hint-t); z-index: 3; margin: 0; pointer-events: none; white-space: nowrap;
		font-family: var(--mm-hint-ff); font-size: var(--mm-hint-fs); font-weight: var(--mm-hint-fw); font-style: var(--mm-hint-st); line-height: var(--mm-hint-lh); color: var(--mm-hint-c);
	}
	.hfd-mm__panel[data-scrolls="1"] .hfd-mm__hint { display: block; }
	.hfd-mm__arrow { font-size: var(--mm-arrow-fs); line-height: 1; vertical-align: baseline; display: inline-block; transform: translateY(calc(-1 * var(--mm-arrow-dy))); /* transform, not top: top snapped to whole pixels (1.19.6) */ margin-right: var(--mm-arrow-sp); }
	/* 1.19.10: the arrow box has no height of its own (its drawing stands on the text's baseline and reaches up), so a taller arrow never makes the line taller and never pushes "Scroll down" down. */
	.hfd-mm__arrow { height: 0; }
	.hfd-mm__arrow svg { display: block; width: .74em; height: .85em; overflow: visible; transform: translateY(-100%); } /* 1.19.15: 17px high (was 21px), thin line, small tip, colour of the text; 1.19.6: ascender height, wide thin head; 1.19.12: stroke 1.7 like the text weight, head 12 wide (was 11.4), same box so the text stays put; 1.19.11: same width (the text stays put), 34% taller (.79em -> 1.06em, 21px at the 20px default; the old one was 15.8px), thinner stroke like the text (Ben 14.10, Andrey) */
	.hfd-mm__arrow--after { margin-left: var(--mm-arrow-gap); } /* 1.19.6: its own setting (was 0: the arrow touched the n) */

	/* ---- text: the only underlined element (Ben's slide: the line grows from the left, under the text, below descenders) ---- */
	.hfd-mm__t {
		display: inline; padding-bottom: var(--mm-ul-gap);
		background-image: linear-gradient(var(--mm-ul-c), var(--mm-ul-c)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 var(--mm-ul-w);
		transition: background-size var(--mm-ul-ms) ease-out, color var(--mm-ul-ms);
	}
	.hfd-mm__row:hover .hfd-mm__t, .hfd-mm__cell:hover .hfd-mm__t, .hfd-mm__tile:hover .hfd-mm__t, .hfd-mm__row:focus-within .hfd-mm__t, .hfd-mm__cell:focus-within .hfd-mm__t, .hfd-mm__tile:focus-within .hfd-mm__t { background-size: 100% var(--mm-ul-w); }

	/* ---- list menus (Colleges, Countries) and Documents: head, columns, rows ---- */
	.hfd-mm__head {
		position: var(--mm-sticky); top: 0; z-index: 2; background: var(--mm-bg); text-align: center; margin: 0;
		padding: var(--mm-head-pt) 160px var(--mm-head-pb); border-bottom: var(--mm-head-mb) solid var(--mm-bg); /* 160px each side as on production: the title never runs under the hint */
	}
	.hfd-mm__h, .hfd-mm__cat-h {
		margin: 0; padding: 0; text-align: center;
		font-family: var(--mm-h-ff); font-size: var(--mm-h-fs); font-weight: var(--mm-h-fw); font-style: var(--mm-h-st); line-height: var(--mm-h-lh); color: var(--mm-h-c);
	}
	.hfd-mm__cols { display: grid; grid-template-columns: repeat(var(--mm-cols), auto); column-gap: var(--mm-col-gap); }
	.hfd-mm__panel .hfd-mm__col { padding: var(--mm-list-pt) var(--mm-col-pad) var(--mm-list-pb); } /* 1.17.0: .hfd-mm__panel ul { padding: 0 } (one class + one tag) beat the plain class, so the space above the first row and under the list (12px) was gone since 1.15 */
	.hfd-mm__panel [data-col="1"] { background: var(--mm-col-1); }
	.hfd-mm__panel [data-col="2"] { background: var(--mm-col-2); }
	.hfd-mm__panel [data-col="3"] { background: var(--mm-col-3); }
	.hfd-mm__panel [data-col="4"] { background: var(--mm-col-4); }
	.hfd-mm__panel [data-col="5"] { background: var(--mm-col-5); }
	.hfd-mm__panel [data-col="6"] { background: var(--mm-col-6); }
	.hfd-mm__row { position: relative; display: flex; align-items: center; min-height: var(--mm-row-h); padding: 0 var(--mm-row-pr) 0 var(--mm-row-pl); box-sizing: border-box; background: var(--mm-row-bg); border-bottom: var(--mm-sep-w) solid var(--mm-sep-c); } /* 1.17.0: thin line between the rows, as in Translate (1px #e8e8e8), none under the last row of a column */
	.hfd-mm__row:last-child { border-bottom-color: transparent; }
	.hfd-mm__row::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--mm-mk-w); height: var(--mm-mk-h); transform: translateY(-50%); background: var(--mm-mk-c); opacity: 0; }
	.hfd-mm__row:hover, .hfd-mm__row:focus-within { background: var(--mm-hv-bg); }
	.hfd-mm__row:hover::before, .hfd-mm__row:focus-within::before { opacity: 1; }
	.hfd-mm__row > .hfd-mm__a {
		display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: var(--mm-row-h); column-gap: var(--mm-ic-gap);
		font-family: var(--mm-link-ff); font-size: var(--mm-link-fs); font-weight: var(--mm-link-fw); font-style: var(--mm-link-st); line-height: var(--mm-link-lh); color: var(--mm-link-c);
	}
	.hfd-mm__row:hover > .hfd-mm__a, .hfd-mm__row:focus-within > .hfd-mm__a { color: var(--mm-hv-c); }
	.hfd-mm__row .hfd-mm__ic { flex: none; width: var(--mm-ic-w); height: var(--mm-ic); max-width: none; object-fit: contain; margin: 0; padding: 0; display: block; }
	.hfd-mm__dl { flex: none; display: flex; align-items: center; margin-right: var(--mm-ic-gap); }
	.hfd-mm__row .hfd-mm__t { min-width: 0; }

	/* Documents: Recordable | Non-Recordable (two columns) | Corporation, each heading sticky inside the scrolling panel. */
	.hfd-mm__cats { display: grid; grid-template-columns: auto auto auto; } /* 1.17.0: no column narrower than its longest name (one line each, also with Windows fonts); the spare width is shared out (production at 1440 was 337fr 659fr 366fr) */
	.hfd-mm__cat { display: flex; flex-direction: column; padding-bottom: var(--mm-list-pb); } /* 1.19.1: a column is as high as the tallest one (grid stretch), its footnote stands at the foot of the column as on production (.hfd-mm-cat is a flex column, the note has margin-top: auto) */
	.hfd-mm__cat-h { position: var(--mm-sticky); top: 0; z-index: 2; background: inherit; padding: var(--mm-head-pt) 16px var(--mm-head-pb); }
	.hfd-mm__cat > .hfd-mm__col, .hfd-mm__sub > .hfd-mm__col { padding-top: 0; padding-bottom: 0; }
	.hfd-mm__sub { display: grid; grid-template-columns: auto auto; }
	.hfd-mm[data-mm="docs"] .hfd-mm__row .hfd-mm__t { white-space: nowrap; }
	.hfd-mm__cat--2 { background: var(--mm-col-2); }
	.hfd-mm__note { margin: auto var(--mm-row-pr) calc(-1 * var(--mm-list-pb)) var(--mm-row-pl); padding: 14px 0; box-sizing: border-box; width: 0; min-width: calc(100% - var(--mm-row-pr) - var(--mm-row-pl)); font-family: var(--mm-desc-ff); font-size: 12px; line-height: 1.1; color: var(--mm-h-c); }

	/* ---- main menu grid (logo, Contact) and FAQ tiles: one grid, no frames, a thin line between the rows of each column only (none under the last cell of a column) ---- */
	.hfd-mm__grid, .hfd-mm__tiles { display: grid; grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr)); column-gap: var(--mm-col-gap); }
	.hfd-mm__tiles { column-gap: var(--mm-tile-gap); }
	.hfd-mm__cell, .hfd-mm__tile { position: relative; background: var(--mm-row-bg); border-bottom: var(--mm-sep-w) solid var(--mm-sep-c); }
	.hfd-mm__last { border-bottom-color: transparent; }
	.hfd-mm__cell:hover, .hfd-mm__cell:focus-within { background: var(--mm-hv-bg); }
	.hfd-mm__cell > .hfd-mm__a {
		display: grid; grid-template-columns: var(--mm-ic-w) minmax(0, 1fr); grid-template-rows: var(--mm-ic) auto; column-gap: var(--mm-ic-gap); align-items: center;
		padding: var(--mm-cell-pt) var(--mm-row-pr) var(--mm-cell-pb) var(--mm-row-pl); color: var(--mm-link-c);
	}
	.hfd-mm__icw { position: relative; width: var(--mm-ic-w); height: var(--mm-ic); grid-row: 1; grid-column: 1; }
	.hfd-mm__icw > .hfd-mm__ic { position: absolute; left: var(--mm-ic-ax); top: 50%; max-width: 100%; max-height: 80%; width: auto; height: auto; transform: translate(var(--mm-ic-tx), -50%); transition: opacity .4s ease, transform .4s ease; backface-visibility: hidden; }
	.hfd-mm__icw > .hfd-mm__ic--hover { opacity: 0; }
	.hfd-mm__cell:hover .hfd-mm__ic--hover, .hfd-mm__cell:focus-within .hfd-mm__ic--hover { opacity: 1; transform: translate(var(--mm-ic-tx), -50%) scale(var(--mm-ic-hover)); }
	.hfd-mm__cell:hover .hfd-mm__icw > .hfd-mm__ic:not(.hfd-mm__ic--hover):not(:only-child), .hfd-mm__cell:focus-within .hfd-mm__icw > .hfd-mm__ic:not(.hfd-mm__ic--hover):not(:only-child) { opacity: 0; }
	.hfd-mm__cell:hover .hfd-mm__icw > .hfd-mm__ic:only-child { transform: translate(var(--mm-ic-tx), -50%) scale(var(--mm-ic-hover)); }
	.hfd-mm__cell .hfd-mm__t {
		grid-row: 1; grid-column: 2; justify-self: start;
		font-family: var(--mm-link-ff); font-size: var(--mm-link-fs); font-weight: var(--mm-link-fw); font-style: var(--mm-link-st); line-height: var(--mm-link-lh); color: var(--mm-link-c);
		word-spacing: -1px; letter-spacing: .2px;
	}
	.hfd-mm__cell:hover .hfd-mm__t, .hfd-mm__cell:focus-within .hfd-mm__t, .hfd-mm__tile:hover .hfd-mm__t { color: var(--mm-hv-c); }
	.hfd-mm__cell .hfd-mm__desc {
		grid-row: 2; grid-column: 1 / -1; display: block; margin-top: 5px;
		font-family: var(--mm-desc-ff); font-size: var(--mm-desc-fs); font-weight: var(--mm-desc-fw); font-style: var(--mm-desc-st); line-height: var(--mm-desc-lh); color: var(--mm-desc-c);
	}
	.hfd-mm__cell .hfd-mm__desc p { margin: 0; font: inherit; color: inherit; }
	/* 1.19.3 FAQ tile, as on production (.fmm_single, measured 14.10): no dividers at all (neither between the rows nor between the tiles, Ben 13.10 06:40), no frame.
	   Under the mouse: the whole tile grows 5% on a soft shadow, a veil lies over the picture AND the name (production: .fmm_single > a::before, black 10 %, rises from 10px lower and .9 size in .3 s;
	   colour and opacity from hv_bg / hv_op), the name takes the link blue with its underline sliding in. At rest the veil is invisible (visibility hidden, opacity 0).
	   The veil covers the whole tile box exactly, so no light strip shows at the sides. Nothing is clipped: as on production the FAQ scroll box does not clip, so the grown tile and its shadow show in full and a hover can never make it scroll. */
	.hfd-mm__tile { padding: var(--mm-tile-pad); text-align: center; border-bottom: 0; transition: transform .3s, box-shadow .3s; }
	/* 1.19.3 setting "Lines between tiles" (faq.tile_sep): none (default) | h = a line under each tile of the upper rows | v = a line after each tile but the last of a row, centred in the gap | both.
	   1px (sep_w, or 1px when it is 0) in sep_c (#e8e8e8). The veil still covers the whole padding box of the hovered tile. */
	.hfd-mm__tiles[data-tsep="h"] > .hfd-mm__tile:not(.hfd-mm__last), .hfd-mm__tiles[data-tsep="both"] > .hfd-mm__tile:not(.hfd-mm__last) { border-bottom: var(--mm-tsep-w) solid var(--mm-sep-c); }
	.hfd-mm__tiles[data-tsep="v"] > .hfd-mm__tile:not(.hfd-mm__lc)::before, .hfd-mm__tiles[data-tsep="both"] > .hfd-mm__tile:not(.hfd-mm__lc)::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--mm-tile-gap) / -2 - .5px); width: var(--mm-tsep-w); background: var(--mm-sep-c); pointer-events: none; }
	.hfd-mm__tile::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--mm-tile-hv); box-shadow: 0 7px 5px -8px rgba(0, 0, 0, .34); transform: translateY(10px) scale(.9); opacity: 0; visibility: hidden; pointer-events: none; transition: .3s; } /* 1.19.14: exactly the 1.19.10 veil over the tile; only its colour is the blue FAQ tile hover tint (--mm-tile-hv) instead of black */
	.hfd-mm__tile:hover, .hfd-mm__tile:focus-within { transform: scale(1.05); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3); z-index: 1; }
	.hfd-mm__tile:hover::after, .hfd-mm__tile:focus-within::after { transform: none; opacity: 1; visibility: visible; }
	.hfd-mm:is([data-mm="faq"], [data-mm="logo"], [data-mm="contact"]) .hfd-mm__scroll { overflow: visible; max-height: none; } /* 1.19.13: no scrolling and no bar on the main (logo) menu, Contact and FAQ */
	.hfd-mm__tile > .hfd-mm__a { display: block; line-height: 1.2; color: var(--mm-link-c); }
	.hfd-mm__tile .hfd-mm__ic { display: block; width: auto; height: var(--mm-ic); max-width: 100%; margin: 0 auto 10px; object-fit: contain; transition: transform .4s ease; }
	.hfd-mm__tile:hover .hfd-mm__ic, .hfd-mm__tile:focus-within .hfd-mm__ic { transform: scale(var(--mm-ic-hover)); }
	.hfd-mm__tile .hfd-mm__t { font-family: var(--mm-link-ff); font-size: var(--mm-link-fs); font-weight: var(--mm-link-fw); font-style: var(--mm-link-st); line-height: var(--mm-link-lh); color: var(--mm-link-c); }

	/* ---- Background Check: one picture and its text ---- */
	.hfd-mm__single { text-align: center; padding: var(--mm-tile-pad); background: var(--mm-bg); }
	.hfd-mm__single .hfd-mm__ic { display: block; height: 130px; width: auto; max-width: 100%; margin: 0 auto 5px; object-fit: contain; }
	.hfd-mm__single .hfd-mm__desc { margin: 0; font-family: var(--mm-link-ff); font-size: var(--mm-link-fs); font-weight: 500; line-height: 1.1; color: var(--mm-link-c); cursor: auto; -webkit-user-select: text; user-select: text; }

	/* ---- Translate: the theme's panel content (classes of the Translation Menus tab) in the common shell; 1.3 like production's scale ---- */
	.hfd-mm[data-mm="translate"] { text-align: left; }
	.hfd-mm[data-mm="translate"] .hfd-mm__scroll { zoom: 1.3; width: calc(var(--mm-pw) / 1.3); max-height: calc(var(--mm-h) / 1.3); overflow-y: scroll; scrollbar-gutter: stable; }
	/* Scrollbar as thick on screen as the other menus' (sb_w): the Translation Menus tab prints 6px, which the 1.3 zoom made 7.8px. */
	html body #top_menu_wrp #translate_wrp .hfd-mm__scroll::-webkit-scrollbar { width: calc(var(--mm-sb-w) / 1.3 + .4px); } /* Chrome rounds down: 10 / 1.3 = 7.69 -> 7 = 9px on screen; +.4 -> 8 = 10.4, shown as 10px */
	html body #top_menu_wrp #translate_wrp .hfd-mm__scroll::-webkit-scrollbar-thumb:hover { background: var(--mm-sb-thumb-hv); } /* beats the Translation Menus tab's own thumb rule */
	.hfd-mm[data-mm="translate"] .dropdown-custom-wrapper { color: #373074; cursor: auto; -webkit-user-select: text; user-select: text; }
	.hfd-mm[data-mm="translate"] .menu-header-video-wrap-translate { text-align: center; }
	.hfd-mm[data-mm="translate"] video.menu-header-video-translate { display: block; width: 75%; height: auto; margin: 0 auto; object-fit: contain; }
	.hfd-mm[data-mm="translate"] .label { margin: 10px 0; font-size: 13px; text-align: center; }
	.hfd-mm[data-mm="translate"] .label + div { padding-left: 10px; padding-right: 10px; text-align: left; }
	.hfd-mm[data-mm="translate"] .label + div p, .hfd-mm[data-mm="translate"] .label + div span { text-align: left; }
	.hfd-mm[data-mm="translate"] .lang-search { margin: 0 10px 10px; }
	#translate_wrp .dropdown-custom-wrapper, #translate_wrp .dropdown-custom-wrapper ul li.menu-item, #translate_wrp .dropdown-custom-wrapper .lang-search,
	#translate_wrp .dropdown-custom-wrapper .lang-search__field, #translate_wrp .dropdown-custom-wrapper .lang-search .lang-search__input { border-radius: 0 !important; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item { text-align: left; padding: 0; font-size: 13px; color: #373074; overflow: hidden; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item:nth-child(odd) { background: rgba(0, 168, 235, .06); }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item a { color: #373074; cursor: pointer; }
	html body #top_menu_wrp #translate_wrp .dropdown-custom-wrapper ul li.menu-item:hover { background-color: var(--mm-hv-bg) !important; color: #373074; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item:hover a { color: #373074; }
	#translate_wrp .dropdown-custom-wrapper .lang-search .lang-search__input { cursor: text !important; }
	/* Current language: a solid bar at the left edge of the row (same place and thickness as the phone menus' marker). */
	#translate_wrp .dropdown-custom-wrapper { --hfd-cur-c: #FD3D26; --hfd-cur-w: 5px; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item.current-menu-item { position: relative; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item.current-menu-item::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: var(--hfd-cur-w) !important; height: 100% !important; background: var(--hfd-cur-c) !important; z-index: 3; pointer-events: none; }
	:where(#translate_wrp .dropdown-custom-wrapper li.current-menu-item):not(:hover):not(:active) { background-color: #fff !important; }
	/* Rows: flag and name slide 13px to the right on hover (the phone's move), never a 1.1x growth. */
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item:hover:not(.label), #translate_wrp .dropdown-custom-wrapper ul li.menu-item.current-menu-item:hover { -webkit-transform: none !important; transform: none !important; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item > a { display: block; width: 100%; margin: 0; padding: 4px 5px 3px 15px !important; box-sizing: border-box; transition: none !important; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item > a > .flag-icon, #translate_wrp .dropdown-custom-wrapper ul li.menu-item > a > .flag-icon-text { translate: 0 0; transition: translate .4s ease-out; will-change: translate; display: inline-block; vertical-align: middle; max-width: calc(100% - 30px); }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item > a > .flag-icon { margin-right: 6px; }
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item:hover > a > .flag-icon, #translate_wrp .dropdown-custom-wrapper ul li.menu-item:active > a > .flag-icon,
	#translate_wrp .dropdown-custom-wrapper ul li.menu-item:hover > a > .flag-icon-text, #translate_wrp .dropdown-custom-wrapper ul li.menu-item:active > a > .flag-icon-text { translate: 13px 0; }
}