/**
 * Sabreen primary navigation
 * Mobile/tablet (<=1024px): off-canvas hamburger panel (navy).
 * Desktop (>=1025px): horizontal inline nav bar (navy links on white) with hover dropdowns.
 * Brand: White #fff · Navy rgb(44,46,116) · Orange rgb(242,102,34)
 *
 * NOTE ON !important + #primary-menu SPECIFICITY:
 * Hello Elementor + Elementor inject their own button/nav/header CSS. Without the high
 * specificity (#primary-menu = an ID) and the !important resets below, their styles bleed
 * in (e.g. orange button boxes, navy backgrounds, pink hovers). These flags are required.
 * Breakpoints are NON-overlapping (max-width:1024 vs min-width:1025) so the two modes never
 * fight each other.
 */

:root {
	--nav-bg:             #ffffff;
	--nav-logo-max:       44px;
	--nav-height:         72px;
	--hamburger:          rgb(242,102,34);   /* orange */
	--accent:             rgb(242,102,34);
	--navy:               rgb(44,46,116);
	--panel-bg:           rgb(44,46,116);     /* navy */
	--panel-text:         #ffffff;
	--panel-hover:        rgb(242,102,34);
	--panel-border:       rgba(255,255,255,.16);
	--panel-width:        min(86vw, 380px);
	--overlay-bg:         rgba(20,20,40,.55);
	--nav-weight:         600;
	--desktop-link:       rgb(44,46,116);     /* navy text on white bar */
	--desktop-link-hover: rgb(242,102,34);    /* orange */
}

/* ================================================================== *
 * SHARED (all widths)
 * ================================================================== */
.site-header { position: static !important; background: var(--nav-bg) !important; box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.site-header__inner {
	max-width: 1200px; margin: 0 auto !important; min-height: var(--nav-height);
	padding: 0 clamp(16px,4vw,32px); width: 100%; box-sizing: border-box;
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	flex-wrap: nowrap; gap: 20px; text-align: left;
}
.site-header__brand { display: flex !important; align-items: center; flex: 0 0 auto; }
.site-header__brand img,
.site-header__brand .custom-logo { max-height: var(--nav-logo-max); width: auto; display: block; }
.site-header__brand .site-title { font: var(--nav-weight) 1.25rem/1 inherit; color: var(--navy) !important; text-decoration: none; }

/* Kill bullets / list chrome everywhere, in nav AND in the wp_page_menu fallback */
#primary-menu ul,
#primary-menu ol,
#primary-menu li,
#primary-menu .children,
#primary-menu .sub-menu { list-style: none !important; margin: 0 !important; }
#primary-menu a { text-decoration: none !important; }

.nav-overlay { position: fixed; inset: 0; background: var(--overlay-bg); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 99990; }
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================== *
 * MOBILE / TABLET  (<= 1024px)  — hamburger + off-canvas navy panel
 * ================================================================== */
@media (max-width: 1024px) {

	/* Hamburger — clean, no theme box/background, pinned right */
	.site-header .nav-toggle {
		display: inline-flex !important; align-items: center !important; justify-content: center !important;
		width: 46px; height: 46px; padding: 0 !important; margin: 0 -8px 0 0 !important; flex: 0 0 auto; order: 9;
		background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
		cursor: pointer; color: var(--hamburger) !important; -webkit-appearance: none; appearance: none;
	}
	.site-header .nav-toggle .bars { position: relative; width: 28px; height: 3px; background: var(--hamburger) !important; display: block; border-radius: 2px; transition: background .2s ease; }
	.site-header .nav-toggle .bars::before,
	.site-header .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 28px; height: 3px; background: var(--hamburger) !important; border-radius: 2px; transition: transform .25s ease, top .25s ease; }
	.site-header .nav-toggle .bars::before { top: -9px; }
	.site-header .nav-toggle .bars::after  { top:  9px; }
	body.nav-open .site-header .nav-toggle .bars { background: transparent !important; }
	body.nav-open .site-header .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
	body.nav-open .site-header .nav-toggle .bars::after  { top: 0; transform: rotate(-45deg); }

	/* Off-canvas panel */
	#primary-menu.primary-nav {
		position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important;
		height: 100dvh; max-height: 100vh; width: var(--panel-width) !important;
		background: var(--panel-bg) !important; color: var(--panel-text) !important;
		transform: translateX(100%); transition: transform .28s ease;
		z-index: 100000; overflow-y: auto; padding: 78px 26px 40px !important;
		box-shadow: -14px 0 44px rgba(0,0,0,.35); -webkit-overflow-scrolling: touch; display: block !important;
	}
	body.nav-open #primary-menu.primary-nav { transform: translateX(0) !important; }
	body.nav-open { overflow: hidden; }

	/* Close button — borderless orange X, centered */
	#primary-menu .primary-nav__close {
		position: absolute !important; top: 14px; right: 16px; width: 46px; height: 46px;
		display: flex !important; align-items: center !important; justify-content: center !important;
		background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
		cursor: pointer; color: var(--accent) !important; -webkit-appearance: none; appearance: none;
		font-size: 36px; line-height: 1; font-weight: 300; padding: 0 !important;
	}
	#primary-menu .primary-nav__close:hover,
	#primary-menu .primary-nav__close:focus { background: none !important; color: var(--accent) !important; }

	/* Menu list — stacked */
	#primary-menu .primary-menu__list { display: block !important; }
	#primary-menu .primary-menu__list > li { border-bottom: 1px solid var(--panel-border) !important; position: relative; padding: 0 !important; }
	#primary-menu .primary-menu__list a {
		display: block !important; color: var(--panel-text) !important; background: none !important;
		font-weight: var(--nav-weight); font-size: 1.05rem; padding: 14px 0 !important; transition: color .15s ease;
	}
	#primary-menu .primary-menu__list a:hover,
	#primary-menu .current-menu-item > a,
	#primary-menu .current_page_item > a { color: var(--panel-hover) !important; }

	/* Submenu accordion */
	#primary-menu .sub-toggle {
		position: absolute !important; top: 4px; right: -6px; width: 46px; height: 46px;
		display: flex !important; align-items: center !important; justify-content: center !important;
		background: none !important; border: 0 !important; box-shadow: none !important; color: var(--panel-text) !important;
		cursor: pointer; padding: 0 !important; -webkit-appearance: none; appearance: none;
	}
	#primary-menu .sub-toggle svg { transition: transform .2s ease; }
	#primary-menu .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	#primary-menu .sub-menu,
	#primary-menu .children { display: none !important; padding-left: 16px !important; }
	#primary-menu .sub-menu.is-open,
	#primary-menu .children.is-open { display: block !important; }
	#primary-menu .sub-menu li,
	#primary-menu .children li { border-bottom: 1px solid var(--panel-border) !important; }
	#primary-menu .sub-menu a,
	#primary-menu .children a { font-size: .98rem !important; padding: 11px 0 !important; }
}

/* ================================================================== *
 * DESKTOP  (>= 1025px)  — horizontal inline nav bar, hover dropdowns
 * ================================================================== */
@media (min-width: 1025px) {

	/* Hide all mobile-only chrome */
	.site-header .nav-toggle,
	#primary-menu .primary-nav__close,
	#primary-menu .sub-toggle,
	.nav-overlay { display: none !important; }
	body.nav-open { overflow: visible; }

	/* Nav is a normal inline element in the white header bar */
	#primary-menu.primary-nav {
		position: static !important; transform: none !important; height: auto !important; width: auto !important;
		max-height: none !important; background: transparent !important; color: inherit !important;
		box-shadow: none !important; padding: 0 !important; overflow: visible !important; z-index: auto;
	}

	/* Top-level list = horizontal row, right aligned */
	#primary-menu .primary-menu__list {
		display: flex !important; align-items: center; justify-content: flex-end;
		flex-wrap: wrap; gap: clamp(6px, 1.4vw, 26px);
	}
	#primary-menu .primary-menu__list > li { border: 0 !important; position: relative; padding: 0 !important; }

	/* Top-level links: navy text on white, orange on hover */
	#primary-menu .primary-menu__list > li > a {
		display: inline-flex !important; align-items: center; gap: 5px;
		color: var(--desktop-link) !important; background: none !important;
		font-size: 1rem; font-weight: var(--nav-weight); padding: 10px 2px !important; white-space: nowrap;
	}
	#primary-menu .primary-menu__list > li > a:hover,
	#primary-menu .primary-menu__list > li.current-menu-item > a,
	#primary-menu .primary-menu__list > li.current-menu-ancestor > a,
	#primary-menu .primary-menu__list > li.current_page_item > a,
	#primary-menu .primary-menu__list > li.current_page_ancestor > a { color: var(--desktop-link-hover) !important; }

	/* Down caret on TOP-LEVEL items that have a dropdown (rendered as a flex item on the inline-flex link) */
	#primary-menu .primary-menu__list > li.menu-item-has-children > a::after,
	#primary-menu .primary-menu__list > li.page_item_has_children > a::after {
		content: ""; width: 7px; height: 7px; margin-left: 2px; flex: 0 0 auto;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
	}

	/* Dropdown panels */
	#primary-menu .menu-item-has-children,
	#primary-menu .page_item_has_children { position: relative; }
	#primary-menu .sub-menu,
	#primary-menu .children {
		display: block !important; position: absolute !important; top: 100%; left: 0; min-width: 240px;
		background: var(--panel-bg) !important; padding: 6px 0 !important; margin: 0 !important;
		box-shadow: 0 16px 34px rgba(0,0,0,.20); border-radius: 4px;
		opacity: 0; visibility: hidden; transform: translateY(8px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1000;
	}
	/* Open on hover or keyboard focus */
	#primary-menu .menu-item-has-children:hover > .sub-menu,
	#primary-menu .menu-item-has-children:focus-within > .sub-menu,
	#primary-menu .page_item_has_children:hover > .children,
	#primary-menu .page_item_has_children:focus-within > .children {
		opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
	}
	#primary-menu .sub-menu li,
	#primary-menu .children li { border: 0 !important; }
	#primary-menu .sub-menu a,
	#primary-menu .children a {
		display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
		color: var(--panel-text) !important; background: none !important;
		font-size: .95rem; font-weight: 500; padding: 10px 18px !important; white-space: nowrap;
	}
	#primary-menu .sub-menu a:hover,
	#primary-menu .sub-menu .current-menu-item > a,
	#primary-menu .children a:hover,
	#primary-menu .children .current_page_item > a { color: var(--panel-hover) !important; }

	/* Right caret on NESTED items that open a further flyout (replaces the broken "|") */
	#primary-menu .sub-menu .menu-item-has-children > a::after,
	#primary-menu .children .page_item_has_children > a::after {
		content: ""; width: 7px; height: 7px; flex: 0 0 auto;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
	}

	/* Third level: flyout to the right */
	#primary-menu .sub-menu .sub-menu,
	#primary-menu .children .children { top: 0; left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	#primary-menu.primary-nav, .nav-overlay,
	.site-header .nav-toggle .bars,
	.site-header .nav-toggle .bars::before,
	.site-header .nav-toggle .bars::after,
	#primary-menu .sub-toggle svg,
	#primary-menu .sub-menu, #primary-menu .children { transition: none !important; }
}