/* BeVisible A: design tokens and the site header. Loaded on every page before a-base.css and, alone,
   in the client cabinet (the parent's nav.php is shown there too). No resets here: the cabinet has its own base. */

:root {
	--a-bg: #fdfdfc;
	--a-fg: #0b0b0c;
	--a-text: #3b3b40;
	--a-mut: #6d6d72;
	--a-line: #e7e7e4;
	--a-soft: #f4f4f2;
	--a-red: #d3242a;
	--a-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--a-nav-bg: rgba(253, 253, 252, 0.82);
	--a-gutter: max(28px, calc((100vw - 1240px) / 2 + 28px));
}

/* ---------- Header ---------- */

nav#site_nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 var(--a-gutter);
	background: var(--a-nav-bg);
	backdrop-filter: saturate(1.4) blur(16px);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
	border-bottom: 1px solid var(--a-line);
	font-family: var(--a-font);
}

.nav-logo {
	display: inline-flex;
	align-items: center;
	gap: 0;
	font-weight: 600;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: var(--a-fg);
	text-decoration: none;
}

.nav-logo span {
	color: inherit;
}

/* «Social» in blue, as «Academy» is red on bevisible.academy (owner 13.10.2026). margin: the logo is a flex row */
.nav-logo b {
	margin-left: 0.28em;
	font-weight: inherit;
	color: #0066d6;
}

.nav-logo img {
	width: 30px;
	height: 30px;
	flex: none;
	margin-right: 10px;
	border-radius: 7px;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nav-actions a {
	white-space: nowrap;
}

.nav-cta-secondary {
	font-size: 15px;
	color: #2c2c30;
	text-decoration: none;
	transition: opacity 0.2s;
}

.nav-cta-secondary:hover {
	opacity: 0.6;
}

.nav-cta-secondary.is-active {
	color: var(--a-fg);
	font-weight: 500;
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--a-fg);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s;
}

.nav-cta:hover {
	background: #2a2a2e;
}

.nav-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--a-line);
	border-radius: 999px;
}

.nav-lang a {
	font-size: 12px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--a-mut);
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
}

.nav-lang a:hover {
	color: var(--a-fg);
}

.nav-lang a.lang-active,
.nav-lang a.lang-active:hover {
	background: var(--a-fg);
	color: #fff;
}

.nav-drop {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.nav-drop-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.nav-drop-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 290px;
	padding: 16px 6px 6px;
	transform: translate(-50%, 6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.nav-drop-menu::before {
	content: "";
	position: absolute;
	inset: 10px 0 0;
	z-index: -1;
	background: #fff;
	border: 1px solid var(--a-line);
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav-drop-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--a-fg);
	text-decoration: none;
}

.nav-drop-menu a:hover {
	background: var(--a-soft);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 1.6px;
	background: var(--a-fg);
	transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle span:nth-child(2) {
	display: none;
}

nav.nav-open .nav-toggle span:nth-child(1) {
	transform: translateY(3.8px) rotate(45deg);
}

nav.nav-open .nav-toggle span:nth-child(3) {
	transform: translateY(-3.8px) rotate(-45deg);
}

.nav-mobile-backdrop {
	display: none;
	position: fixed;
	inset: 64px 0 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 98;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}

.nav-mobile-backdrop.visible {
	opacity: 1;
	pointer-events: auto;
}

.nav-mobile {
	display: none;
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	z-index: 99;
	background: var(--a-bg);
	border-bottom: 1px solid var(--a-line);
	padding: 8px 18px 22px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	flex-direction: column;
	transform: translateY(-8px);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.25s, opacity 0.25s;
}

nav.nav-open .nav-mobile {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.nav-mobile a,
.nav-mobile-expand {
	display: block;
	width: 100%;
	font-family: var(--a-font);
	font-size: 19px;
	letter-spacing: -0.015em;
	padding: 15px 0;
	border: none;
	border-bottom: 1px solid var(--a-line);
	background: none;
	color: var(--a-fg);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.nav-mobile a.is-active {
	font-weight: 500;
}

.nav-mobile a.nav-mobile-cta {
	margin-top: 18px;
	padding: 0;
	height: 52px;
	line-height: 52px;
	border: 0;
	border-radius: 999px;
	background: var(--a-fg);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.nav-mobile-cases[hidden] {
	display: none;
}

.nav-mobile .nav-mobile-cases a {
	font-size: 15px;
	padding: 10px 0 10px 14px;
	color: var(--a-text);
}

.nav-mobile .nav-lang {
	align-self: center;
	margin-top: 18px;
}

.nav-mobile .nav-lang a {
	display: inline-block;
	width: auto;
	font-size: 13px;
	padding: 7px 16px;
	border: 0;
	text-align: center;
}

body.nav-open {
	overflow: hidden;
}

/* Logged-in admin: the WordPress toolbar (32px, 46px on phones) sits above the header */
body.admin-bar nav#site_nav {
	top: 32px;
}

body.admin-bar .nav-mobile,
body.admin-bar .nav-mobile-backdrop {
	top: 96px;
}

body.admin-bar .nav-mobile {
	max-height: calc(100vh - 96px);
}

@media (max-width: 782px) {
	body.admin-bar nav#site_nav {
		top: 46px;
	}

	body.admin-bar .nav-mobile,
	body.admin-bar .nav-mobile-backdrop {
		top: 110px;
	}

	body.admin-bar .nav-mobile {
		max-height: calc(100vh - 110px);
	}
}

@media (max-width: 1080px) {
	.nav-actions {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.nav-mobile {
		display: flex;
	}

	.nav-mobile-backdrop {
		display: block;
	}
}

@media (max-width: 560px) {
	:root {
		--a-gutter: 18px;
	}
}