/**
 * Alavi Office Tools — main menu.
 *
 * Every value the owner can change is a CSS variable (--aot-*) printed by Menu_Style
 * from the settings. Do not hard-code colors or sizes here; add a setting instead.
 *
 * Sections:
 *  1. Shared reset (lists, buttons) and focus ring
 *  2. Submenu sign (arrow / plus / dot)
 *  3. Desktop bar
 *  4. Desktop submenu designs: dropdown, lined, mega
 *  5. Mobile drawer
 *  6. Drawer submenu designs: accordion, slide, open
 *  7. Reduced motion
 */

/* ---------- 1. Shared ---------- */

.aot-menu,
.aot-menu ul,
.aot-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aot-menu {
	font-family: var(--aot-font);
	letter-spacing: var(--aot-letter-spacing);
}

.aot-menu a.aot-menu__link {
	text-decoration: none;
	font-family: inherit;
	letter-spacing: inherit;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/*
 * The site's font manager sets "span { font-weight: 400 !important }" (and the font) on every
 * span and div. The text spans of the menu must follow their link instead.
 */
.aot-menu .aot-menu__label {
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	letter-spacing: inherit !important;
}

.aot-menu .aot-menu__desc {
	font-weight: 400 !important;
}

.aot-menu .aot-menu__panel-title {
	font-weight: var(--aot-drawer-weight) !important;
}

/* Theme and Elementor style every <button>; this resets ours completely. */
.aot-menu button.aot-menu__toggle,
.aot-menu button.aot-menu__back {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.aot-menu button.aot-menu__toggle {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border-radius: 50%;
}

.aot-menu a.aot-menu__link:focus-visible,
.aot-menu button.aot-menu__toggle:focus-visible,
.aot-menu button.aot-menu__back:focus-visible {
	outline: 2px solid var(--aot-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.aot-menu__row {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ---------- 2. Submenu sign ---------- */

.aot-menu__icon {
	position: relative;
	display: block;
	width: 10px;
	height: 10px;
	transition: transform 0.2s ease;
}

/* Arrow: a rotated corner. */
.aot-menu--icon-chevron .aot-menu__icon::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); /* Points down. */
}

.aot-menu--icon-chevron .is-open > .aot-menu__row .aot-menu__icon {
	transform: rotate(180deg);
}

/* Plus / minus. */
.aot-menu--icon-plus .aot-menu__icon::before,
.aot-menu--icon-plus .aot-menu__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	margin-top: -0.75px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.aot-menu--icon-plus .aot-menu__icon::after {
	transform: rotate(90deg);
}

.aot-menu--icon-plus .is-open > .aot-menu__row .aot-menu__icon::after {
	transform: rotate(0deg);
}

/* Dot. */
.aot-menu--icon-dot .aot-menu__icon::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--aot-accent);
}

/* Caret: a small filled triangle. */
.aot-menu--icon-caret .aot-menu__icon::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 1px;
	border-top: 5px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	opacity: 0.7;
}

.aot-menu--icon-caret .is-open > .aot-menu__row .aot-menu__icon {
	transform: rotate(180deg);
}

/* Two dots: a quiet "more" sign. */
.aot-menu--icon-dots .aot-menu__icon::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 1px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 5px 0 0 currentColor;
	opacity: 0.55;
}

/*
 * Dash: no sign beside the label; a short gold line under the label instead.
 * The button stays (keyboard and touch) but is drawn as an invisible area over the line.
 */
.aot-menu--icon-dash .aot-menu__item--parent > .aot-menu__row {
	position: relative;
}

.aot-menu--icon-dash .aot-menu__item--parent > .aot-menu__row > .aot-menu__link::after {
	content: "";
	display: block;
	width: 14px;
	height: 2px;
	margin: 1px auto 0;
	border-radius: 2px;
	background: var(--aot-accent);
	opacity: 0.8;
	transition: width 0.2s ease;
}

.aot-menu--icon-dash .is-open > .aot-menu__row > .aot-menu__link::after,
.aot-menu--icon-dash .aot-menu__item--parent > .aot-menu__row:hover > .aot-menu__link::after {
	width: 24px;
}

.aot-menu--icon-dash .aot-menu__item--parent > .aot-menu__row > .aot-menu__toggle {
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 28px;
	height: 12px;
	margin-left: -14px;
	border-radius: 6px;
}

.aot-menu--icon-dash .aot-menu__icon {
	display: none;
}

/*
 * No sign: the submenu button stays for keyboard and screen-reader users but is not seen
 * (desktop panels also open on hover and keyboard focus; drawer parents open on tap).
 */
.aot-menu--icon-none .aot-menu__item--parent > .aot-menu__row > button.aot-menu__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Side caret (mobile drawer): a small filled triangle beside the label, pointing to the
 * line end, i.e. to the left in Persian / Arabic and to the right in English, where the
 * submenu comes from. In the accordion design it turns down when open.
 */
.aot-menu--icon-caret-side .aot-menu__icon::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 2px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-inline-start: 5px solid currentColor;
	opacity: 0.7;
}

.aot-menu--icon-caret-side .is-open > .aot-menu__row .aot-menu__icon {
	transform: rotate(90deg);
}

[dir="rtl"] .aot-menu--icon-caret-side .is-open > .aot-menu__row .aot-menu__icon {
	transform: rotate(-90deg);
}

/* ---------- 3. Desktop bar ---------- */

.aot-menu--bar > .aot-menu__list {
	display: flex;
	align-items: center;
	gap: var(--aot-bar-gap);
}

.aot-menu--bar .aot-menu__item {
	position: relative;
}

.aot-menu--bar .aot-menu__item--depth-0 > .aot-menu__row > .aot-menu__link {
	font-size: var(--aot-bar-size);
	font-weight: var(--aot-bar-weight);
	line-height: 1.8;
	color: var(--aot-bar-color);
	white-space: nowrap;
}

.aot-menu--bar .aot-menu__item--depth-0 > .aot-menu__row > .aot-menu__link:hover,
.aot-menu--bar .aot-menu__item--depth-0.is-current > .aot-menu__row > .aot-menu__link {
	color: var(--aot-bar-hover);
}

/* "Gold text" marking: the panels show no dot either; hover and current are gold text only. */
.aot-menu--bar.aot-menu--current-color .aot-menu__sub .aot-menu__link::before {
	display: none;
}

/* "Gold text" marking: an item under the mouse turns gold too, like the language box. */
.aot-menu--bar.aot-menu--current-color .aot-menu__item--depth-0 > .aot-menu__row:hover > .aot-menu__link,
.aot-menu--bar.aot-menu--current-color .aot-menu__item--depth-0 > .aot-menu__row > .aot-menu__link:focus-visible,
.aot-menu--bar.aot-menu--current-color .aot-menu__item--depth-0 > .aot-menu__row:hover > .aot-menu__toggle {
	color: var(--aot-accent);
}

/*
 * Current page, "gold text" marking: gold, semi-bold, no dot. The plugin does not print
 * "bj-active" then, but the site's header script adds it by itself after the page loads,
 * which brings back its dot; the dot is hidden here.
 */
.aot-menu--bar.aot-menu--current-color .bj-nav-link.bj-active .elementor-heading-title::before {
	display: none !important;
}

.aot-menu--bar.aot-menu--current-color .aot-menu__item--depth-0.is-current > .aot-menu__row > .aot-menu__link {
	font-weight: 600;
	color: var(--aot-accent);
}

.aot-menu--bar .aot-menu__item--depth-0 > .aot-menu__row > button.aot-menu__toggle {
	color: var(--aot-bar-color);
	margin-inline-start: -4px; /* The triangle sits about 5px from the label. */
}

/* ---------- 4. Desktop submenu designs ---------- */

/*
 * All designs share one panel: it hangs from the bottom edge of the header (the JS
 * measures the distance into --aot-drop), uses the header background, has rounded
 * bottom corners like the mobile drawer, and carries the drawer notch under its bottom
 * edge. --aot-x is the horizontal shift: centred panels use -50%.
 */
.aot-menu--bar .aot-menu__sub--depth-1 {
	--aot-x: -50%;
	position: absolute;
	z-index: 1000;
	top: calc(100% + var(--aot-drop, 28px));
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: var(--aot-sub-min-width);
	padding: 22px 14px 16px;
	/* Same colouring as the site's language box: a soft top-to-bottom shade over the background, glass blur. */
	background-color: var(--aot-sub-bg);
	background-image: linear-gradient(180deg, var(--aot-sub-bg-top) 0%, var(--aot-sub-bg-bottom) 100%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 0 0 var(--aot-sub-radius) var(--aot-sub-radius);
	box-shadow: var(--aot-sub-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translate(var(--aot-x), -4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/*
 * The notch on the bottom edge, exactly as on the site's language box and mobile drawer
 * (borujerdi-kit notch108.svg, 108 x 31, centred on the edge: half inside the panel,
 * half below it) in its own solid colour, slightly different from the panel.
 */
.aot-menu--bar .aot-menu__sub--depth-1::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: calc(100% - 15.5px);
	left: 50%;
	width: 108px;
	height: 31px;
	margin-left: -54px;
	background: var(--aot-notch-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 31'%3E%3Cpath d='M0 15.5C3.4 15.5 8.55 15.92 14.03 18.44C19.35 20.87 19.5 22.74 24.19 24.48C30.77 26.9 33.67 24.42 41.52 25.89C44.46 26.45 48.85 27.7 54 31C59.14 27.7 63.55 26.45 66.47 25.89C74.31 24.41 77.22 26.89 83.8 24.48C88.51 22.74 88.64 20.87 93.96 18.44C99.44 15.93 104.59 15.5 108 15.5C104.59 15.5 99.44 15.07 93.96 12.55C88.64 10.12 88.5 8.25 83.8 6.51C77.22 4.09 74.32 6.57 66.47 5.1C63.53 4.54 59.14 3.29 54 0C48.85 3.29 44.44 4.54 41.52 5.1C33.68 6.58 30.77 4.1 24.19 6.51C19.48 8.25 19.35 10.12 14.03 12.55C8.55 15.06 3.4 15.5 0 15.5Z'/%3E%3C/svg%3E") center / 108px 31px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 31'%3E%3Cpath d='M0 15.5C3.4 15.5 8.55 15.92 14.03 18.44C19.35 20.87 19.5 22.74 24.19 24.48C30.77 26.9 33.67 24.42 41.52 25.89C44.46 26.45 48.85 27.7 54 31C59.14 27.7 63.55 26.45 66.47 25.89C74.31 24.41 77.22 26.89 83.8 24.48C88.51 22.74 88.64 20.87 93.96 18.44C99.44 15.93 104.59 15.5 108 15.5C104.59 15.5 99.44 15.07 93.96 12.55C88.64 10.12 88.5 8.25 83.8 6.51C77.22 4.09 74.32 6.57 66.47 5.1C63.53 4.54 59.14 3.29 54 0C48.85 3.29 44.44 4.54 41.52 5.1C33.68 6.58 30.77 4.1 24.19 6.51C19.48 8.25 19.35 10.12 14.03 12.55C8.55 15.06 3.4 15.5 0 15.5Z'/%3E%3C/svg%3E") center / 108px 31px no-repeat;
	pointer-events: none;
}

/* Invisible bridge between the item and the panel, so the mouse can travel down. */
.aot-menu--bar .aot-menu__sub--depth-1::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: calc(var(--aot-drop, 28px) + 4px);
}

.aot-menu--bar .aot-menu__item.is-open > .aot-menu__sub--depth-1,
.aot-menu--trigger-hover .aot-menu__item--parent:hover > .aot-menu__sub--depth-1,
.aot-menu--trigger-hover .aot-menu__item--parent:focus-within > .aot-menu__sub--depth-1 {
	opacity: 1;
	visibility: visible;
	transform: translate(var(--aot-x), 0);
	transition-delay: 0s;
}

/* Links inside panels: quiet grey text like the language box; on hover and on the current page the text turns gold and the gold dot appears. */
.aot-menu--bar .aot-menu__sub .aot-menu__row {
	justify-content: space-between;
}

.aot-menu--bar .aot-menu__sub .aot-menu__link {
	flex: 1 1 auto;
	display: block;
	padding: 7px 12px;
	font-size: var(--aot-sub-size);
	font-weight: 600;
	line-height: 1.8;
	color: var(--aot-sub-color);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.aot-menu--bar .aot-menu__sub .aot-menu__link::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 4px;
	margin-inline-end: 0;
	border-radius: 50%;
	background: var(--aot-accent);
	vertical-align: middle;
	transition: width 0.2s ease, margin 0.2s ease;
}

.aot-menu--bar .aot-menu__sub .aot-menu__link:hover,
.aot-menu--bar .aot-menu__sub .aot-menu__link:focus-visible,
.aot-menu--bar .aot-menu__sub .is-current > .aot-menu__row > .aot-menu__link {
	color: var(--aot-accent);
}

.aot-menu--bar .aot-menu__sub .aot-menu__link:hover::before,
.aot-menu--bar .aot-menu__sub .is-current > .aot-menu__row > .aot-menu__link::before {
	width: 4px;
	margin-inline-end: 8px;
}

.aot-menu--bar .aot-menu__sub .is-current > .aot-menu__row > .aot-menu__link {
	font-weight: 600;
}

.aot-menu--bar .aot-menu__sub .aot-menu__toggle {
	margin-inline-end: 6px;
	color: var(--aot-sub-color);
}

/* Inside a panel the sign points to the side where the next panel opens (open or closed). */
.aot-menu--bar .aot-menu__sub .aot-menu__row .aot-menu__toggle .aot-menu__icon,
.aot-menu--bar .aot-menu__sub .is-open > .aot-menu__row .aot-menu__toggle .aot-menu__icon {
	transform: rotate(-90deg); /* LTR: points right. */
}

[dir="rtl"] .aot-menu--bar .aot-menu__sub .aot-menu__row .aot-menu__toggle .aot-menu__icon,
[dir="rtl"] .aot-menu--bar .aot-menu__sub .is-open > .aot-menu__row .aot-menu__toggle .aot-menu__icon {
	transform: rotate(90deg); /* RTL: points left. */
}

/* Third level (dropdown and lined): a small panel beside the first one. */
.aot-menu--bar .aot-menu__sub--depth-2 {
	position: absolute;
	z-index: 1001;
	top: -14px;
	inset-inline-start: calc(100% + 14px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: calc(var(--aot-sub-min-width) * 0.8);
	padding: 12px 14px;
	background-color: var(--aot-sub-bg);
	background-image: linear-gradient(180deg, var(--aot-sub-bg-top) 0%, var(--aot-sub-bg-bottom) 100%);
	border-radius: var(--aot-sub-radius);
	box-shadow: var(--aot-sub-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.aot-menu--bar .aot-menu__sub--depth-2::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 100%;
	width: 16px;
}

.aot-menu--bar .aot-menu__sub .aot-menu__item.is-open > .aot-menu__sub--depth-2,
.aot-menu--trigger-hover .aot-menu__sub .aot-menu__item--parent:hover > .aot-menu__sub--depth-2,
.aot-menu--trigger-hover .aot-menu__sub .aot-menu__item--parent:focus-within > .aot-menu__sub--depth-2 {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Design "lined": centred items with a thin line on each side, like the mobile drawer. */
.aot-menu--sub-lined .aot-menu__sub {
	gap: 6px;
	padding-inline: 22px;
}

.aot-menu--sub-lined .aot-menu__sub .aot-menu__row {
	gap: 14px;
}

.aot-menu--sub-lined .aot-menu__sub .aot-menu__row::before,
.aot-menu--sub-lined .aot-menu__sub .aot-menu__row::after {
	content: "";
	flex: 1 1 18px;
	min-width: 18px;
	border-top: 1px solid var(--aot-sub-line);
}

.aot-menu--sub-lined .aot-menu__sub .aot-menu__link {
	flex: 0 1 auto;
	padding: 5px 0;
	text-align: center;
}

/*
 * Full-width designs: the panel spans the whole header. The JS writes the header's
 * left edge and width (relative to the item) into --aot-full-left and --aot-full-width.
 * Content stays centred in a 1080px column.
 */
.aot-menu--full .aot-menu__sub--depth-1 {
	--aot-x: 0;
	left: var(--aot-full-left, 0);
	width: var(--aot-full-width, 100vw);
	min-width: 0;
	box-sizing: border-box;
	padding-top: 26px;
	padding-bottom: 28px;
	padding-inline: max(40px, calc((var(--aot-full-width, 100vw) - 1080px) / 2));
}

.aot-menu--full .aot-menu__sub--depth-1 > .aot-menu__item > .aot-menu__row > .aot-menu__toggle {
	display: none;
}

/* Full width, columns: second level = column titles, third level = links under them. */
.aot-menu--sub-full-columns .aot-menu__sub--depth-1 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 40px;
}

.aot-menu--sub-full-columns .aot-menu__sub--depth-1 > .aot-menu__item > .aot-menu__row {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--aot-sub-line);
}

.aot-menu--sub-full-columns .aot-menu__sub--depth-1 > .aot-menu__item > .aot-menu__row > .aot-menu__link {
	padding-inline: 0;
	font-weight: 700;
	color: var(--aot-sub-color);
}

.aot-menu--sub-full-columns .aot-menu__sub--depth-2,
.aot-menu--sub-full-cards .aot-menu__sub--depth-2 {
	position: static;
	min-width: 0;
	margin-top: 6px;
	padding: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transition: none;
}

.aot-menu--sub-full-columns .aot-menu__sub--depth-2::before,
.aot-menu--sub-full-cards .aot-menu__sub--depth-2::before {
	display: none;
}

.aot-menu--sub-full-columns .aot-menu__sub--depth-2 .aot-menu__link {
	padding-inline: 0;
}

/* Full width, one row: the sub-items in a single centred line, separated by "|". */
.aot-menu--sub-full-strip .aot-menu__sub--depth-1 {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 0;
	padding-top: 20px;
	padding-bottom: 20px;
}

.aot-menu--sub-full-strip .aot-menu__sub--depth-1 > .aot-menu__item + .aot-menu__item::before {
	content: "|";
	display: inline-block;
	margin-inline: 14px;
	color: var(--aot-sub-line);
	font-weight: 400;
	line-height: 1;
}

.aot-menu--sub-full-strip .aot-menu__sub--depth-1 > .aot-menu__item {
	display: inline-flex;
	align-items: center;
}

.aot-menu--sub-full-strip .aot-menu__sub--depth-1 .aot-menu__link {
	padding: 4px 2px;
}

.aot-menu--sub-full-strip .aot-menu__sub--depth-2 {
	display: none;
}

/* Full width, cards: each sub-item is a card with its title and the menu item description. */
.aot-menu--sub-full-cards .aot-menu__sub--depth-1 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.aot-menu--sub-full-cards .aot-menu__sub--depth-1 > .aot-menu__item {
	padding: 14px 16px;
	border: 1px solid var(--aot-sub-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.35);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.aot-menu--sub-full-cards .aot-menu__sub--depth-1 > .aot-menu__item:hover {
	border-color: var(--aot-accent);
	background: rgba(255, 255, 255, 0.6);
}

.aot-menu--sub-full-cards .aot-menu__sub--depth-1 > .aot-menu__item > .aot-menu__row > .aot-menu__link {
	padding: 0;
	font-weight: 700;
	color: var(--aot-sub-color);
}

.aot-menu__desc {
	display: block;
	margin-top: 4px;
	font-size: calc(var(--aot-sub-size) - 1px);
	font-weight: 400;
	line-height: 1.9;
	color: var(--aot-bar-color);
	white-space: normal;
}

.aot-menu--sub-full-cards .aot-menu__sub--depth-2 .aot-menu__link {
	padding: 3px 0;
	font-size: calc(var(--aot-sub-size) - 1px);
}

/* ---------- 5. Mobile drawer ---------- */

.aot-menu--drawer {
	width: 100%;
}

.aot-menu--drawer .aot-menu__list,
.aot-menu--drawer .aot-menu__sub {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--aot-drawer-gap);
	width: 100%;
}

/* Space between the top of the drawer and the first item. */
.aot-menu--drawer > .aot-menu__list {
	padding-top: var(--aot-drawer-top, 24px);
}

.aot-menu--drawer .aot-menu__row {
	gap: 24px;
	width: 100%;
}

.aot-menu--drawer .aot-menu__line {
	flex: 1 1 0;
	min-width: 12px;
	border-top: 1px solid var(--aot-drawer-line);
}

.aot-menu--drawer.aot-menu--no-lines .aot-menu__line {
	border-top-color: transparent;
}

.aot-menu--drawer .aot-menu__link {
	flex: 0 1 auto;
	font-size: var(--aot-drawer-size);
	font-weight: var(--aot-drawer-weight);
	line-height: 1.8;
	color: var(--aot-drawer-color);
	text-align: center;
	white-space: nowrap;
}

.aot-menu--drawer button.aot-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	/* 28px touch area; the triangle sits about 6px from the label (row gap 24px, icon centred). */
	margin-inline-start: -27px;
	margin-inline-end: -8px;
	margin-block: -6px; /* The taller touch area does not make the row taller. */
	color: var(--aot-drawer-color);
	cursor: pointer;
}

/* "Gold text" design: an item under the mouse turns gold too. */
.aot-menu--drawer.aot-menu--current-color .aot-menu__row:hover > .aot-menu__link {
	color: var(--aot-accent);
}

/* Current page, "gold text" design: the text takes the accent colour, no dot. */
.aot-menu--drawer.aot-menu--current-color .is-current > .aot-menu__row > .aot-menu__link {
	color: var(--aot-accent);
}

/* Current page, "dot" design: a small gold dot beside the text. */
.aot-menu--drawer:not(.aot-menu--current-color) .is-current > .aot-menu__row > .aot-menu__link::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-inline-end: 8px;
	border-radius: 50%;
	background: var(--aot-accent);
	vertical-align: middle;
}

.aot-menu--drawer .aot-menu__sub .aot-menu__link {
	font-size: var(--aot-drawer-sub-size);
	font-weight: 500;
	color: var(--aot-drawer-sub-color);
}

.aot-menu--drawer .aot-menu__sub .aot-menu__line {
	opacity: 0.55;
}

/* ---------- 6. Drawer submenu designs ---------- */

/* Accordion: the submenu opens under its item. */
.aot-menu--sub-accordion .aot-menu__sub {
	display: none;
	gap: calc(var(--aot-drawer-gap) * 0.7);
	margin-top: calc(var(--aot-drawer-gap) * 0.7);
	padding-inline: 28px;
}

.aot-menu--sub-accordion .is-open > .aot-menu__sub {
	display: flex;
	animation: aot-fade-down 0.22s ease both;
}

/* Slide: the submenu replaces the list, with a back button on top. */
.aot-menu--sub-slide .aot-menu__sub {
	display: none;
}

.aot-menu--sub-slide .is-open > .aot-menu__sub {
	display: flex;
	animation: aot-slide-in 0.26s ease both;
}

.aot-menu--sub-slide ul.has-open-child > li:not(.is-open),
.aot-menu--sub-slide ul.has-open-child > li.is-open > .aot-menu__row {
	display: none;
}

.aot-menu .aot-menu__back-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--aot-drawer-line);
}

/* Back button: the site's three-line menu icon, no frame; 32px touch area. */
.aot-menu--drawer button.aot-menu__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #817d78;
	cursor: pointer;
}

/* Three lines, the same as the site's menu.svg (16px box, 13.3px lines, 1.33px thick). */
.aot-menu__back-icon {
	position: relative;
	display: block;
	width: 13.3px;
	height: 1.4px;
	border-radius: 1px;
	background: currentColor;
}

.aot-menu__back-icon::before,
.aot-menu__back-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1px;
	background: currentColor;
}

.aot-menu__back-icon::before {
	top: -4.33px;
}

.aot-menu__back-icon::after {
	top: 4.33px;
}

.aot-menu .aot-menu__panel-title {
	color: var(--aot-accent); /* Gold, like the chosen items; links to the parent's own page. */
	text-decoration: none;
}

.aot-menu__panel-title {
	font-size: var(--aot-drawer-size);
	font-weight: var(--aot-drawer-weight);
}

.aot-menu--sub-slide .aot-menu__sub .aot-menu__link {
	font-size: var(--aot-drawer-size);
}

/* Always open: sub-items always shown, smaller, no button. */
.aot-menu--sub-open .aot-menu__sub {
	gap: calc(var(--aot-drawer-gap) * 0.55);
	margin-top: calc(var(--aot-drawer-gap) * 0.55);
	padding-inline: 36px;
}

@keyframes aot-fade-down {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes aot-slide-in {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[dir="ltr"] .aot-menu--sub-slide .is-open > .aot-menu__sub {
	animation-name: aot-slide-in-ltr;
}

@keyframes aot-slide-in-ltr {
	from {
		opacity: 0;
		transform: translateX(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Back: the previous list slides softly back in from the other side (the reverse of opening). */
.aot-menu--sub-slide ul.aot-back-in > li {
	animation: aot-slide-in-ltr 0.26s ease both;
}

[dir="ltr"] .aot-menu--sub-slide ul.aot-back-in > li {
	animation-name: aot-slide-in;
}

/* ---------- 7. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

	.aot-menu *,
	.aot-menu *::before,
	.aot-menu *::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * The site's language box (.bj-lang-menu) opens softly, the same way as the submenu panel:
 * fade in and slide down 4px in 0.2s. The site shows it with display:none / flex; here it
 * stays in the layout and is hidden with opacity + visibility instead. The script adds
 * "aot-lang-soft" to the header only when the setting is on. Not in the Elementor editor.
 */
body:not(.elementor-editor-active) .bj-header.aot-lang-soft .bj-lang-menu {
	display: flex !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

body:not(.elementor-editor-active) .bj-header.aot-lang-soft.bj-lang-open .bj-lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/*
 * The site's own notches in the header (under the mobile menu and the language box) take the
 * plugin's notch colour, like the submenu panel: the picture is hidden and the same shape is
 * drawn in the colour instead. Only inside the header; not in the Elementor editor.
 */
body:not(.elementor-editor-active) .bj-header .bj-notch .elementor-widget-container {
	background: var(--aot-notch-color, #cc9952);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 31'%3E%3Cpath d='M0 15.5C3.4 15.5 8.55 15.92 14.03 18.44C19.35 20.87 19.5 22.74 24.19 24.48C30.77 26.9 33.67 24.42 41.52 25.89C44.46 26.45 48.85 27.7 54 31C59.14 27.7 63.55 26.45 66.47 25.89C74.31 24.41 77.22 26.89 83.8 24.48C88.51 22.74 88.64 20.87 93.96 18.44C99.44 15.93 104.59 15.5 108 15.5C104.59 15.5 99.44 15.07 93.96 12.55C88.64 10.12 88.5 8.25 83.8 6.51C77.22 4.09 74.32 6.57 66.47 5.1C63.53 4.54 59.14 3.29 54 0C48.85 3.29 44.44 4.54 41.52 5.1C33.68 6.58 30.77 4.1 24.19 6.51C19.48 8.25 19.35 10.12 14.03 12.55C8.55 15.06 3.4 15.5 0 15.5Z'/%3E%3C/svg%3E") center / 108px 31px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 31'%3E%3Cpath d='M0 15.5C3.4 15.5 8.55 15.92 14.03 18.44C19.35 20.87 19.5 22.74 24.19 24.48C30.77 26.9 33.67 24.42 41.52 25.89C44.46 26.45 48.85 27.7 54 31C59.14 27.7 63.55 26.45 66.47 25.89C74.31 24.41 77.22 26.89 83.8 24.48C88.51 22.74 88.64 20.87 93.96 18.44C99.44 15.93 104.59 15.5 108 15.5C104.59 15.5 99.44 15.07 93.96 12.55C88.64 10.12 88.5 8.25 83.8 6.51C77.22 4.09 74.32 6.57 66.47 5.1C63.53 4.54 59.14 3.29 54 0C48.85 3.29 44.44 4.54 41.52 5.1C33.68 6.58 30.77 4.1 24.19 6.51C19.48 8.25 19.35 10.12 14.03 12.55C8.55 15.06 3.4 15.5 0 15.5Z'/%3E%3C/svg%3E") center / 108px 31px no-repeat;
}

body:not(.elementor-editor-active) .bj-header .bj-notch img {
	visibility: hidden;
}

/*
 * The site's mobile menu (.bj-mobile-menu) opens and closes softly, like the language box and
 * the submenu panels: fade + 4px slide in 0.2s. The site shows it with display:none / flex;
 * here it stays in the layout and is hidden with opacity + visibility. The script adds
 * "aot-drawer-soft" to the header when the setting is on. Not in the Elementor editor.
 */
body:not(.elementor-editor-active) .bj-header.aot-drawer-soft .bj-mobile-menu {
	display: flex !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

body:not(.elementor-editor-active) .bj-header.aot-drawer-soft.bj-menu-open .bj-mobile-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/*
 * Language box rows look like the mobile drawer rows: the name in the middle with a thin
 * line on each side (24px apart, drawer line colour); gold on hover like the menu items.
 * The chosen language is gold by the site's own rule.
 */
.bj-header.aot-lang-soft .bj-lang-item .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 24px;
}

.bj-header.aot-lang-soft .bj-lang-item .elementor-heading-title::before,
.bj-header.aot-lang-soft .bj-lang-item .elementor-heading-title::after {
	content: "";
	flex: 1 1 0;
	height: 0;
	border-top: 1px solid #dbd4ca;
}

.bj-header.aot-lang-soft .bj-lang-item:hover .elementor-heading-title {
	color: #cc9952;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) .bj-header.aot-drawer-soft .bj-mobile-menu,
	body:not(.elementor-editor-active) .bj-header.aot-lang-soft .bj-lang-menu {
		transform: none;
		transition: none;
	}
}