/* Shared top navigation (nav.site-nav). Loaded on every page; the homepage gets the same
   font metrics from main.css, other pages do not load it, so they are set here explicitly. */
.site-nav, .site-nav * { box-sizing: border-box; }
.site-nav {
	/* same metrics as the html/body rules in main.css, so the bar looks identical on every page */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: -0.015em;
	margin: 0;
}
@media screen and (max-width: 1680px) { .site-nav { font-size: 13pt; } }
@media screen and (max-width: 1280px) { .site-nav { font-size: 12pt; } }
@media screen and (max-width: 360px) { .site-nav { font-size: 11pt; } }
.site-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.6em 1.5em;
	background: rgba(0, 12, 41, 0.94);
	color: #ffffff;
}
.site-nav a, .site-nav a:visited, .site-nav a:hover { color: #ffffff; border-bottom: none; text-decoration: none; }
.site-nav .nav-logo { display: flex; align-items: center; gap: 0.6em; font-weight: 700; font-size: 1.1em; }
.site-nav .nav-logo img { height: 32px; width: auto; }
.site-nav .nav-links { display: flex; gap: 1.5em; margin: 0; padding: 0; list-style: none; }
.site-nav .nav-links li { margin: 0; padding: 0; }
.site-nav .nav-links a, .site-nav .nav-links [aria-current="page"] { font-size: 0.95em; opacity: 0.9; white-space: nowrap; }
.site-nav .nav-links a:hover { opacity: 1; text-decoration: underline; }
.site-nav .nav-links .nav-guides a { font-weight: 600; opacity: 1; }
.site-nav .nav-links [aria-current="page"] { font-weight: 600; opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.site-nav .nav-links a:hover { opacity: 1; }
.site-nav .nav-cta img { display: block; max-width: none; height: 36px; width: auto; }
/* Tablet and narrow desktop widths: keep the five items (longest translations included) on one line */
@media screen and (min-width: 601px) and (max-width: 960px) {
	.site-nav { gap: 0.75em; }
	.site-nav .nav-links { gap: 1em; }
	.site-nav .nav-links a, .site-nav .nav-links [aria-current="page"] { font-size: 0.9em; }
}
@media screen and (min-width: 601px) and (max-width: 820px) {
	.site-nav { padding: 0.6em 1em; }
	.site-nav .nav-links { gap: 0.75em; }
	.site-nav .nav-links a, .site-nav .nav-links [aria-current="page"] { font-size: 0.85em; }
}
/* Phones: only the Guides item stays next to the logo (the anchor items are hidden) */
@media screen and (max-width: 600px) {
	.site-nav .nav-links { gap: 0; }
	.site-nav .nav-links li:not(.nav-guides) { display: none; }
	.site-nav { padding: 0.5em 1em; }
}