/* =============================================================
   ARC – 3-bar sticky navigation
   PHP template: targets #site-header.arc-site-header
   Elementor override (optional): targets .elementor-location-header
   ============================================================= */

/* ── Custom properties ──────────────────────────────────────── */
:root {
	--arc-teal:        #0a3d47;
	--arc-teal-dark:   #072d35;
	--arc-green:       #79ba3a;
	--arc-green-dark:  #68a530;
	--arc-white:       #ffffff;
	--arc-text-light:  rgba(255, 255, 255, 0.82);
	--arc-text-muted:  rgba(255, 255, 255, 0.55);
	--arc-container:   1200px;
	--arc-bar-top:     40px;
	--arc-bar-main:    76px;
	--arc-bar-sub:     46px;
	--arc-header-h:    calc(var(--arc-bar-top) + var(--arc-bar-main) + var(--arc-bar-sub));
	--arc-radius-pill: 50px;
	--arc-transition:  0.22s ease;
}

/* ── Site header base ───────────────────────────────────────── */
#site-header.arc-site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	display: block;
	padding: 0;
	width: 100%;
	max-width: none;        /* prevent any theme.css container constraints */
	box-shadow: none;
	transition: box-shadow var(--arc-transition);
}

#site-header.arc-site-header.arc-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* ── Shared container ───────────────────────────────────────── */
.arc-site-header .arc-container {
	max-width: var(--arc-container);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   1. TOP BAR
   ══════════════════════════════════════════════════════════════ */
.arc-top-bar {
	background: var(--arc-teal);
	height: var(--arc-bar-top);
	overflow: hidden;
}

.arc-top-bar .arc-container {
	height: 100%;
	gap: 16px;
}

/* Ticker */
.arc-ticker {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.arc-ticker::before,
.arc-ticker::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	z-index: 1;
	pointer-events: none;
}
.arc-ticker::before {
	left: 0;
	background: linear-gradient(to right, var(--arc-teal), transparent);
}
.arc-ticker::after {
	right: 0;
	background: linear-gradient(to left, var(--arc-teal), transparent);
}

.arc-ticker-track {
	display: inline-flex;
	align-items: center;
	gap: 0;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--arc-text-light);
	animation: arcTicker 36s linear infinite;
	will-change: transform;
}

.arc-ticker-track:hover {
	animation-play-state: paused;
}

.arc-ticker-dot {
	margin-inline: 12px;
	color: var(--arc-text-muted);
	font-size: 10px;
}

@keyframes arcTicker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Top-bar utility links */
.arc-top-utils {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.arc-top-utils a {
	font-size: 12.5px;
	color: var(--arc-text-light);
	text-decoration: none;
	transition: color var(--arc-transition);
}

.arc-top-utils a:hover {
	color: var(--arc-white);
}

.arc-top-utils .arc-sep {
	color: var(--arc-text-muted);
	font-size: 11px;
	user-select: none;
}

/* Language list (EN · FR · PT · AR) */
.arc-lang-list {
	display: flex;
	align-items: center;
	gap: 6px;
}

.arc-lang-list a {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--arc-text-muted);
	text-decoration: none;
	transition: color var(--arc-transition);
}

.arc-lang-list a:hover,
.arc-lang-list a.arc-lang-active {
	color: var(--arc-white);
}

.arc-dot {
	color: var(--arc-text-muted);
	font-size: 9px;
	user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   2. MAIN BAR
   ══════════════════════════════════════════════════════════════ */
.arc-main-bar {
	background: var(--arc-teal);
	height: var(--arc-bar-main);
	border-bottom: none;
}

.arc-main-bar .arc-container {
	height: 100%;
	gap: 24px;
}

/* Branding */
.arc-branding {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.arc-branding .site-logo img,
.arc-branding .custom-logo {
	display: block;
	max-height: 52px;
	width: auto;
}

.arc-branding .site-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.arc-branding .site-title a {
	color: var(--arc-white);
	text-decoration: none;
}

.arc-branding .site-description {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 2px 0 0;
}

/* Pill nav */
.arc-nav {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
}

.arc-nav-pill {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--arc-radius-pill);
	padding: 5px;
	gap: 2px;
}

/* Nav items */
.arc-nav-pill .arc-main-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}

.arc-nav-pill .arc-main-menu li {
	display: flex;
	position: relative;
}

.arc-nav-pill .arc-main-menu > li > a {
	display: block;
	padding: 7px 18px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	border-radius: var(--arc-radius-pill);
	white-space: nowrap;
	transition:
		background var(--arc-transition),
		color var(--arc-transition);
}

.arc-nav-pill .arc-main-menu > li:hover > a,
.arc-nav-pill .arc-main-menu > li:focus-within > a {
	background: rgba(255, 255, 255, 0.12);
	color: var(--arc-white);
}

.arc-nav-pill .arc-main-menu > li.current-menu-item > a,
.arc-nav-pill .arc-main-menu > li.current-menu-ancestor > a,
.arc-nav-pill .arc-main-menu > li.current-page-ancestor > a {
	background: var(--arc-white);
	color: var(--arc-teal);
}

/* Dropdown sub-menus inside the pill */
.arc-nav-pill .arc-main-menu li.menu-item-has-children {
	padding-inline-end: 0;
}

.arc-nav-pill .arc-main-menu li.menu-item-has-children > a {
	padding-inline-end: 28px;
	position: relative;
}

.arc-nav-pill .arc-main-menu li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
	transition: transform var(--arc-transition);
}

.arc-nav-pill .arc-main-menu li.menu-item-has-children:hover > a::after,
.arc-nav-pill .arc-main-menu li.menu-item-has-children:focus-within > a::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Sub-menu dropdown */
.arc-nav-pill .arc-main-menu ul {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 180px;
	background: var(--arc-white);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
	list-style: none;
	padding: 6px;
	margin: 0;
	z-index: 100;
	opacity: 0;
	transform: translateX(-50%) translateY(-6px);
	transition:
		opacity var(--arc-transition),
		transform var(--arc-transition);
	pointer-events: none;
}

.arc-nav-pill .arc-main-menu li:hover > ul,
.arc-nav-pill .arc-main-menu li:focus-within > ul {
	display: block;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.arc-nav-pill .arc-main-menu ul li {
	display: block;
}

.arc-nav-pill .arc-main-menu ul li a {
	display: block;
	padding: 9px 14px;
	font-size: 13.5px;
	font-weight: 400;
	color: #333;
	border-radius: 8px;
	text-decoration: none;
	transition: background var(--arc-transition), color var(--arc-transition);
}

.arc-nav-pill .arc-main-menu ul li a:hover {
	background: #f0f7fd;
	color: var(--arc-teal);
}

/* Main-bar right (WPML + hamburger) */
.arc-main-right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* WPML language switcher in main bar — dark background */
.arc-main-right .wpml-ls,
.arc-main-right .wpml-ls-statics-shortcode_actions {
	font-size: 13.5px;
}

.arc-main-right .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.07);
	white-space: nowrap;
}

.arc-main-right .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--arc-white);
	background: rgba(255, 255, 255, 0.12);
}

/* Hamburger button */
.arc-hamburger-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: 6px;
	transition: background var(--arc-transition);
}

.arc-hamburger-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

.arc-hamburger-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.arc-hamburger-icon span {
	display: block;
	height: 2px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
	transition:
		transform var(--arc-transition),
		opacity var(--arc-transition);
}

.arc-hamburger-btn[aria-expanded="true"] .arc-hamburger-icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.arc-hamburger-btn[aria-expanded="true"] .arc-hamburger-icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.arc-hamburger-btn[aria-expanded="true"] .arc-hamburger-icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════
   3. SUB BAR
   ══════════════════════════════════════════════════════════════ */
.arc-sub-bar {
	background: var(--arc-green);
	height: var(--arc-bar-sub);
}

.arc-sub-bar .arc-container {
	height: 100%;
	justify-content: space-between;
	gap: 16px;
}

/* Secondary nav */
.arc-secondary-nav .arc-sub-menu,
.arc-secondary-nav ul {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arc-secondary-nav .arc-sub-menu li,
.arc-secondary-nav ul li {
	display: flex;
	align-items: center;
}

.arc-secondary-nav .arc-sub-menu li a,
.arc-secondary-nav ul li a {
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	padding: 0 14px;
	height: var(--arc-bar-sub);
	display: flex;
	align-items: center;
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	transition: background var(--arc-transition), color var(--arc-transition);
}

.arc-secondary-nav .arc-sub-menu li:first-child a,
.arc-secondary-nav ul li:first-child a {
	padding-left: 0;
}

.arc-secondary-nav .arc-sub-menu li:last-child a,
.arc-secondary-nav ul li:last-child a {
	border-right: none;
}

.arc-secondary-nav .arc-sub-menu li a:hover,
.arc-secondary-nav ul li a:hover,
.arc-secondary-nav .arc-sub-menu li.current-menu-item > a,
.arc-secondary-nav ul li.current-menu-item > a {
	color: var(--arc-white);
	background: rgba(0, 0, 0, 0.08);
}

/* Auth buttons */
.arc-auth {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.arc-btn-signup {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--arc-teal);
	color: var(--arc-white) !important;
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 18px;
	border-radius: var(--arc-radius-pill);
	text-decoration: none !important;
	white-space: nowrap;
	transition:
		background var(--arc-transition),
		transform var(--arc-transition),
		box-shadow var(--arc-transition);
	box-shadow: 0 2px 8px rgba(10, 61, 71, 0.3);
}

.arc-btn-signup:hover {
	background: var(--arc-teal-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(10, 61, 71, 0.4);
}

.arc-btn-signin {
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92) !important;
	text-decoration: none !important;
	transition: color var(--arc-transition);
	white-space: nowrap;
}

.arc-btn-signin:hover {
	color: var(--arc-white) !important;
	text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════
   4. MOBILE NAV DRAWER
   ══════════════════════════════════════════════════════════════ */
.arc-mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--arc-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	z-index: 9998;
}

.arc-mobile-nav[aria-hidden="false"] {
	max-height: 80vh;
	overflow-y: auto;
}

.arc-mobile-nav-inner {
	padding: 16px 20px 24px;
}

/* Mobile menu items */
.arc-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arc-mobile-menu li {
	border-bottom: 1px solid #f0f0f0;
}

.arc-mobile-menu li:last-child {
	border-bottom: none;
}

.arc-mobile-menu li a {
	display: block;
	padding: 12px 4px;
	font-size: 15px;
	font-weight: 500;
	color: var(--arc-teal);
	text-decoration: none;
	transition: color var(--arc-transition);
}

.arc-mobile-menu li a:hover,
.arc-mobile-menu li.current-menu-item > a {
	color: var(--arc-green-dark);
}

/* Mobile sub-menus */
.arc-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0 0 4px 16px;
}

.arc-mobile-menu ul li a {
	font-size: 13.5px;
	font-weight: 400;
	color: #555;
	padding: 8px 4px;
}

/* Mobile auth */
.arc-mobile-auth {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 2px solid var(--arc-green);
	margin-top: 12px;
}

.arc-btn-signin-mobile {
	font-size: 14px;
	font-weight: 500;
	color: var(--arc-teal) !important;
	text-decoration: none !important;
}

.arc-btn-signin-mobile:hover {
	text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet: hide pill nav, show hamburger */
@media (max-width: 991px) {
	.arc-nav { display: none; }
	.arc-hamburger-btn { display: flex; }

	.arc-main-bar { height: 64px; }
	:root { --arc-bar-main: 64px; }

	.arc-branding .site-logo img,
	.arc-branding .custom-logo { max-height: 42px; }
}

/* Mobile: condense top bar & sub bar */
@media (max-width: 639px) {
	.arc-top-bar { display: none; } /* hide top bar on very small screens */

	.arc-sub-bar { height: auto; min-height: 44px; }
	.arc-sub-bar .arc-container { flex-wrap: wrap; padding-block: 6px; gap: 8px; }

	.arc-secondary-nav .arc-sub-menu li a,
	.arc-secondary-nav ul li a {
		height: auto;
		padding-block: 4px;
	}

	.arc-auth { gap: 8px; }
	.arc-btn-signup { padding: 6px 14px; font-size: 12.5px; }
	.arc-btn-signin  { font-size: 12.5px; }

	.arc-main-bar .arc-container { padding-inline: 16px; }
	.arc-sub-bar  .arc-container { padding-inline: 16px; }
}

@media (max-width: 479px) {
	.arc-auth { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   6. BODY OFFSET — push content below the sticky header
   ══════════════════════════════════════════════════════════════ */
body:not(.elementor-page) {
	scroll-padding-top: var(--arc-header-h);
}

/* Elementor editor spacer */
html.elementor-html .arc-site-header ~ * {
	scroll-margin-top: var(--arc-header-h);
}

/* ══════════════════════════════════════════════════════════════
   7. WPML LANGUAGE SWITCHER (main bar) tweaks
   ══════════════════════════════════════════════════════════════ */
.arc-main-right .wpml-ls-statics-shortcode_actions,
.arc-main-right .wpml-ls {
	line-height: 1;
}

.arc-main-right .wpml-ls-legacy-dropdown .wpml-ls-item-toggle::after {
	border-color: #666 transparent transparent;
}

/* ══════════════════════════════════════════════════════════════
   8. REMOVE PARENT THEME HEADER DEFAULTS THAT CONFLICT
   ══════════════════════════════════════════════════════════════ */
#site-header.arc-site-header .header-inner { display: none !important; }
#site-header.arc-site-header .site-navigation-toggle-holder { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   9. ELEMENTOR PRO THEME BUILDER HEADER
   These rules make the Elementor-rendered header match the
   PHP template design.
   ══════════════════════════════════════════════════════════════ */

/* Sticky + shadow */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	transition: box-shadow var(--arc-transition);
}

.elementor-location-header.arc-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* Inner containers: constrain to 1200 px and centre */
.elementor-location-header .arc-inner-container {
	max-width: var(--arc-container);
	width: 100%;
	margin-inline: auto;
}

/* Top bar outer */
.elementor-location-header .arc-top-bar-outer {
	background: var(--arc-teal);
	overflow: hidden;
}

/* Main bar outer — dark teal (matches screenshot) */
.elementor-location-header .arc-main-bar-outer {
	background: var(--arc-teal) !important;
	border-bottom: none !important;
}

/* Sub bar outer */
.elementor-location-header .arc-sub-bar-outer {
	background: var(--arc-green);
}

/* Nav pill wrapper — transparent + outline on dark bg */
.elementor-location-header .arc-nav-pill-wrap {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: var(--arc-radius-pill);
}

/* ── Ticker inside Elementor ────────────────────────────────── */
.elementor-location-header .arc-ticker {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.elementor-location-header .arc-ticker::before,
.elementor-location-header .arc-ticker::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 40px;
	z-index: 1;
	pointer-events: none;
}
.elementor-location-header .arc-ticker::before {
	left: 0;
	background: linear-gradient(to right, var(--arc-teal), transparent);
}
.elementor-location-header .arc-ticker::after {
	right: 0;
	background: linear-gradient(to left, var(--arc-teal), transparent);
}

/* ── Auth buttons from shortcode ────────────────────────────── */
.elementor-location-header .arc-auth {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── WPML switcher in Elementor main bar ───────────────────── */
.elementor-location-header .arc-main-bar-outer .wpml-ls,
.elementor-location-header .arc-main-bar-outer .wpml-ls-statics-shortcode_actions {
	font-size: 13.5px;
	line-height: 1;
}

.elementor-location-header .arc-main-bar-outer .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.07);
	white-space: nowrap;
}

.elementor-location-header .arc-main-bar-outer .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--arc-white);
	background: rgba(255, 255, 255, 0.12);
}

/* ── Top-bar utils shortcode ────────────────────────────────── */
.elementor-location-header .arc-top-bar-outer .arc-top-utils {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Elementor nav-menu active item pill ────────────────────── */
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--arc-teal) !important;
}

/* ── Remove Elementor's default header padding ──────────────── */
.elementor-location-header > .e-con:first-child,
.elementor-location-header > .elementor-section:first-child {
	margin-top: 0 !important;
}

/* ── Responsive: tablet/mobile ─────────────────────────────── */
@media (max-width: 991px) {
	.elementor-location-header .arc-top-bar-outer {
		display: none;
	}
}

@media (max-width: 639px) {
	.elementor-location-header .arc-sub-bar-outer {
		height: auto !important;
		min-height: 44px;
	}
	.elementor-location-header .arc-sub-bar-outer .arc-inner-container {
		flex-wrap: wrap;
		padding-block: 6px;
		gap: 8px;
	}
	.elementor-location-header .arc-auth {
		gap: 8px;
	}
}