/* Artmark Header — structural layout. Colors/typography come from widget controls. */

.am-header {
	width: 100%;
}

/* Sticky variants (Header Settings > Sticky Header). The header template is
   only as tall as the header, so position: sticky has no room to stick inside
   it; artmark-header.js pins the header with position: fixed instead and the
   widget wrapper keeps the header's height so the page does not jump.
   "smart" (show on scroll up) slides it out of view on scroll down. */
.am-sticky-yes .am-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

.am-header.is-fixed {
	position: fixed;
	top: var(--am-hd-top, 0px);
	left: 0;
	right: 0;
	z-index: 999;
	/* The side inset the page container gave the header in flow, measured by the script. */
	padding-left: var(--am-hd-inl, 0px);
	padding-right: var(--am-hd-inr, 0px);
	background-color: var(--am-hd-bg, transparent);
}

.am-sticky-smart .am-header.is-fixed {
	transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.am-sticky-smart .am-header.is-fixed.is-hidden {
	transform: translateY(-100%);
}

.am-header.is-fixed.no-anim {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.am-sticky-smart .am-header.is-fixed {
		transition: none;
	}
}

/* ---------------------------------------------------------------- */
/* Top switcher bar                                                  */
/* ---------------------------------------------------------------- */

.am-topbar__inner {
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.am-topbar__tab {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Rotating announcement — right end of the top bar */
.am-topbar__announce {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	align-self: center;
	border-left: 1px solid rgba(180, 221, 255, 0.2);
	padding: 4px 4px 4px 18px;
	min-width: 0;
}

.am-topbar__dot {
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background-color: #0080b8;
	flex-shrink: 0;
}

.am-topbar__msgs {
	position: relative;
	min-width: 0;
}

.am-topbar__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, 0.65);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.am-topbar__msg.is-active {
	position: relative;
	opacity: 1;
}

.am-topbar__msg strong {
	font-weight: 500;
	color: #ffffff;
}

.am-topbar__dashes {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.am-topbar__dash {
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background-color: rgba(255, 255, 255, 0.35);
	transition: width 0.3s ease, background-color 0.3s ease;
}

.am-topbar__dash.is-active {
	width: 18px;
	background-color: #b4ddff;
}

/* ---------------------------------------------------------------- */
/* Main bar                                                          */
/* ---------------------------------------------------------------- */

.am-header__bar {
	position: relative; /* positioning context for the full-width mega panel */
}

.am-header__inner {
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
}

.am-header__logo {
	flex-shrink: 0;
}

.am-header__logo a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.am-header__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.am-header__logo-text {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.am-header__nav-wrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Navigation                                                        */
/* ---------------------------------------------------------------- */

.am-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.am-nav__item {
	position: relative;
}

.am-nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 0;
	transition: color 0.2s ease;
}

/* The label reserves the width of its medium-weight self (an invisible,
   zero-height copy drawn from data-text), so going medium on hover moves
   nothing beside it. */
.am-nav__label {
	display: inline-block;
	text-align: center;
}

.am-nav__label::after {
	content: attr(data-text);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: var(--am-nav-hover-weight, 500);
	pointer-events: none;
}

/* The current page's item keeps its own weight (Current Page Font Weight)
   even while hovered, so its ghost reserves that width instead. */
.am-nav__item.is-current .am-nav__label::after {
	font-weight: var(--am-nav-current-weight, var(--am-nav-hover-weight, 500));
}

.am-nav__item .am-caret {
	transition: transform 0.2s ease;
}

.am-nav__subtoggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	color: inherit;
}

/* Dropdown (desktop: hover / focus-within), centred under its menu item */
.am-nav__dropdown {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	box-shadow: 0 10px 30px rgba(10, 20, 30, 0.14);
	z-index: 1000;
}

.am-nav__dropdown a {
	display: flex;
	align-items: center;
	justify-content: var(--am-dd-justify, center);
	gap: 12px;
	padding: 9px 18px;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Alignment (Link Alignment control) only moves icon-less items; a link with
   an icon box always sits left so icon and label line up down the list. */
.am-nav__dropdown a.has-icon {
	justify-content: flex-start;
	text-align: left;
}

/* Icon box on regular dropdown items (same language as the mega menu icons).
   Transparent border reserves space so the hover border causes no shift. */
.am-nav__dd-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	border: 1px solid transparent;
	background-color: #003c56;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.am-nav__dd-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
}

/* Mega menu (WP menu items flagged "mega") */
.am-nav__item.has-mega {
	position: static;
}

.am-nav__mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 24px 40px rgba(10, 20, 30, 0.14);
	z-index: 1000;
}

.am-nav__mega-inner {
	margin: 0 auto;
	padding: 30px 24px 38px;
}

.am-nav__mega-heading {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.am-nav__mega-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 26px 44px;
}

.am-nav__mega-grid > li {
	border-top: 1px solid;
	padding-top: 18px;
}

.am-nav__mega-grid a {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 15px;
	text-decoration: none;
	transition: color 0.15s ease;
}

.am-nav__mega-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.am-nav__mega-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
}

@media (min-width: 1025px) {
	.am-nav__item.has-children:hover > .am-nav__dropdown,
	.am-nav__item.has-children:focus-within > .am-nav__dropdown {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.am-nav__item.has-mega:hover > .am-nav__mega,
	.am-nav__item.has-mega:focus-within > .am-nav__mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.am-nav__item.has-children:hover > a .am-caret {
		transform: rotate(180deg);
	}

	/* The hovered item (and the one whose dropdown is open) goes medium. */
	.am-nav__item:hover > a,
	.am-nav__item.has-children:focus-within > a {
		font-weight: var(--am-nav-hover-weight, 500);
	}
}

/* ---------------------------------------------------------------- */
/* Right side: language + CTA + burger                               */
/* ---------------------------------------------------------------- */

.am-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.am-lang {
	position: relative;
}

.am-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	padding: 6px 2px;
}

.am-lang__menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 150px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	box-shadow: 0 10px 30px rgba(10, 20, 30, 0.14);
	z-index: 1000;
}

.am-lang.is-open .am-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.am-lang.is-open .am-lang__toggle > .am-caret {
	transform: rotate(180deg);
}

.am-lang__menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	text-decoration: none;
}

/* The language being viewed (TranslatePress mode). */
.am-lang__menu a.is-current {
	font-weight: 600;
}

.am-lang__menu a.is-current::after {
	content: "\2713";
	margin-left: 8px;
	font-weight: 400;
}

.am-cta {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Mobile-only actions block (CTA inside the burger menu) — hidden on desktop */
.am-header__actions--mobile {
	display: none;
}

/* Burger (mobile only) */
.am-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

.am-burger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------------------------------------------------------------- */
/* Mobile                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.am-burger {
		display: flex;
		flex-shrink: 0;
	}

	/* Keep the bar on one line: logo may shrink, actions may not overflow */
	.am-header__inner {
		gap: 16px;
		justify-content: space-between;
	}

	.am-header__logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.am-header__actions {
		gap: 14px;
		margin-left: auto;
	}

	/* CTA placement on mobile (widget setting: Button On Mobile) */
	.am-ctamob-menu .am-cta--bar,
	.am-ctamob-hide .am-cta--bar,
	.am-ctamob-hide .am-cta--mobile,
	.am-ctamob-bar .am-header__actions--mobile {
		display: none;
	}

	.am-ctamob-menu .am-header__actions--mobile {
		display: flex;
		padding-top: 18px;
	}

	.am-cta--mobile {
		width: 100%;
		justify-content: center;
	}

	.am-header__nav-wrap {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 12px 24px 24px;
		box-shadow: 0 18px 30px rgba(10, 20, 30, 0.12);
		z-index: 999;
	}

	.am-header__bar {
		position: relative;
	}

	.am-header.is-open .am-header__nav-wrap {
		display: block;
	}

	/* The open phone menu hangs under a pinned header, so it scrolls on its
	   own. Only here: on desktop this wrapper holds the dropdowns and any
	   overflow rule on it would clip them. */
	.am-header.is-fixed.is-open .am-header__nav-wrap {
		max-height: calc(100vh - var(--am-hd-h, 80px) - var(--am-hd-top, 0px));
		overflow-y: auto;
	}

	.am-header.is-open .am-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.am-header.is-open .am-burger span:nth-child(2) {
		opacity: 0;
	}

	.am-header.is-open .am-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.am-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0 !important;
	}

	.am-nav__item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.am-nav__item > a {
		display: flex;
		justify-content: flex-start;
		width: calc(100% - 44px);
		padding: 13px 0;
	}

	.am-nav__item.has-children {
		position: relative;
	}

	/* The subtoggle button on the right supplies the chevron on mobile, so the
	   one inside the link itself would be a second, duplicate chevron. The
	   "--right" caret on childless items is a different indicator and stays. */
	.am-nav__item.has-children > a > .am-caret:not(.am-caret--right) {
		display: none;
	}

	.am-nav__subtoggle {
		display: inline-flex;
		position: absolute;
		top: 6px;
		right: 0;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.am-nav__subtoggle .am-caret {
		transition: transform 0.2s ease;
	}

	.am-nav__item.is-open > .am-nav__subtoggle .am-caret {
		transform: rotate(180deg);
	}

	/* Dropdowns become an accordion */
	.am-nav__dropdown {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 10px 14px;
		min-width: 0 !important;
	}

	.am-nav__item.is-open > .am-nav__dropdown {
		display: block;
	}

	/* Mega menu collapses to a simple accordion list */
	.am-nav__mega {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border-top: 0;
		box-shadow: none;
	}

	.am-nav__item.is-open > .am-nav__mega {
		display: block;
	}

	.am-nav__mega-inner {
		padding: 0 0 10px 14px;
	}

	.am-nav__mega-heading {
		margin-bottom: 14px;
	}

	.am-nav__mega-grid {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	.am-nav__mega-grid > li {
		border-top: 0;
		padding-top: 0;
	}

	.am-nav__dropdown a {
		white-space: normal;
	}

	.am-topbar__inner {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.am-topbar__tab {
		white-space: nowrap;
	}

	/* The rotating announcement needs room — bar scrolls on mobile, so hide it */
	.am-topbar__announce {
		display: none;
	}
}

@media (max-width: 480px) {
	/* Keep the CTA but let it shrink on very small screens */
	.am-cta {
		font-size: 13px;
	}

	.am-header__actions {
		gap: 12px;
	}
}

/* ---------------------------------------------------------------- */
/* Button state reset                                                */
/* ---------------------------------------------------------------- */

/* Themes routinely paint button:hover / :focus / :active, and a pseudo-class
   selector outranks a bare class, so the theme was repainting the language
   toggle (and would do the same to the burger and submenu toggles). Every
   state is neutralised here; the widget's own colour controls, which carry
   Elementor's wrapper class, still win over these. */
.am-lang__toggle,
.am-lang__toggle:hover,
.am-lang__toggle:focus,
.am-lang__toggle:focus-visible,
.am-lang__toggle:active,
.am-burger,
.am-burger:hover,
.am-burger:focus,
.am-burger:focus-visible,
.am-burger:active,
.am-nav__subtoggle,
.am-nav__subtoggle:hover,
.am-nav__subtoggle:focus,
.am-nav__subtoggle:focus-visible,
.am-nav__subtoggle:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	outline: 0;
	text-decoration: none;
	transform: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Keyboard focus must stay visible. */
.am-lang__toggle:focus-visible,
.am-burger:focus-visible,
.am-nav__subtoggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Dropdown and language links: block a theme link background/underline while
   leaving the widget's own hover-background control in charge. */
.am-nav__dropdown a,
.am-nav__dropdown a:hover,
.am-nav__dropdown a:focus,
.am-nav__dropdown a:active,
.am-lang__menu a,
.am-lang__menu a:hover,
.am-lang__menu a:focus,
.am-lang__menu a:active {
	box-shadow: none;
	text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Top bar: tab alignment, and the announcements on mobile           */
/* ---------------------------------------------------------------- */

/* The tabs sit in their own group so the Tabs Alignment control can place
   them while the announcement keeps the right end of the bar. */
.am-topbar__tabs {
	display: flex;
	align-items: stretch;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
}

/* The mobile strip under the main bar (Announcements On Mobile: below) */
.am-header__announce-below {
	display: none;
}

@media (max-width: 1024px) {
	/* the tab group scrolls on its own; "safe center" falls back to the
	   start when the tabs are wider than the screen, so nothing is cut off */
	.am-topbar__tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.am-topbar__tabs::-webkit-scrollbar {
		display: none;
	}

	.am-annmob-below .am-header__announce-below {
		display: block;
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.am-annmob-below .am-header__announce-below .am-topbar__announce {
		display: flex;
		margin: 0;
		padding: 0;
		border-left: 0;
	}

	.am-annmob-below .am-header__announce-below .am-topbar__msgs {
		flex: 1 1 auto;
	}

	.am-annmob-bar .am-topbar .am-topbar__announce {
		display: flex;
	}
}

/* Phones: the strip under the main bar shows the whole message (wrapping
   instead of being cut with an ellipsis) and the rotation dashes sit on
   their own row under it, aligned with the text. Tablet and desktop keep
   the one-line strip with the dashes beside the message. */
@media (max-width: 767px) {
	.am-annmob-below .am-header__announce-below .am-topbar__announce {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
		gap: 8px 10px;
	}

	.am-annmob-below .am-header__announce-below .am-topbar__msgs {
		flex: 0 1 auto;
		min-width: 0;
		max-width: calc(100% - 16px);
	}

	/* Running text, centred: the bold part and the rest flow as one line
	   of words and wrap where the words wrap, not as two blocks. */
	.am-annmob-below .am-header__announce-below .am-topbar__msg {
		display: block;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		text-align: center;
		line-height: 1.35;
	}

	.am-annmob-below .am-header__announce-below .am-topbar__msg strong,
	.am-annmob-below .am-header__announce-below .am-topbar__msg span {
		display: inline;
	}

	.am-annmob-below .am-header__announce-below .am-topbar__dashes {
		flex: 0 0 100%;
		justify-content: center;
	}

	/* The three tabs share the width on phones (Tab Widths defaults to
	   "fill" and the gap to 0 there); min-width lets them shrink to fit. */
	.am-topbar__tab {
		min-width: 0;
	}

	/* First Tab On Phones: only as wide as its text; the others share the rest.
	   !important beats the Tab Widths rule, which is printed per widget. */
	.am-tabfirst-hug .am-topbar__tab:first-child {
		flex: 0 0 auto !important;
	}
}