/* ==========================================================================
   NPRN header + main navigation  (header-nav.js decides desktop vs compact)

   Layout is flex, not the parent theme's 2/7/3 percentage columns: logo and
   account hug their content, the menu takes the rest and never wraps. header-nav.js
   measures the menu's real width against the room it has and adds
   html.nprn-nav-compact only when it genuinely does not fit.
   ========================================================================== */

html.nprn-nav-compact { --nprn-header-h: 68px; }

#masthead {
	--nav-gutter: clamp(14px, 1.6vw, 28px);
	--nav-gap: clamp(8px, 1.4vw, 24px);
	--nav-fs: clamp(12px, 0.35vw + 8.4px, 13.5px);
	--nav-px: clamp(9px, 0.85vw, 13px);
	--nav-item-h: 48px;
	--logo-h: clamp(54px, 4.6vw, 70px);
}
#masthead.is-compact {
	--nav-gutter: 12px;
	--nav-gap: 8px;
	--logo-h: 46px;
}

/* ---- Row: logo · menu · account ---- */
#masthead .header__wrapper { padding: 0 !important; max-width: none; }
#masthead .header__wrapper > .boot-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--nav-gap);
	height: var(--nprn-header-h);
	margin: 0;
	padding: 0 var(--nav-gutter);
	text-align: left;
}
#masthead .header__branding {
	order: 1;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding: 0;
}
#masthead img.site-img-logo {
	display: block;
	width: auto;
	height: var(--logo-h);
	max-width: none;
	padding: 0;
}
#masthead .header__navigation {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: none;
	padding: 0;
	display: flex;
	justify-content: center;
}
#masthead .header__navigation .elementor,
#masthead .header__navigation .e-con {
	min-width: 0;
	min-height: 0;
	width: auto;
	padding: 0;
	background: transparent;
}
#masthead .header__user-account {
	order: 3;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding: 0 !important; /* parent sets !important paddings at small widths */
	display: flex;
	align-items: center;
	gap: 6px;
	text-align: left;
}

/* ---- Menu: one line, always ---- */
/* Elementor hides the main list at its own tablet breakpoint; our own measuring decides instead */
#masthead .elementor-nav-menu--main { display: block; }
#masthead .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
	justify-content: center;
}
#masthead .elementor-nav-menu--main .elementor-nav-menu > li { flex: 0 0 auto; }
#masthead .elementor-nav-menu--main .elementor-item {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--nav-item-h);
	padding: 0 var(--nav-px);
	font: 600 var(--nav-fs)/1 Montserrat, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.9);
	border-radius: 6px;
}
#masthead .elementor-nav-menu--main .elementor-item:hover,
#masthead .elementor-nav-menu--main .elementor-item:focus-visible,
#masthead .elementor-nav-menu--main .elementor-item.elementor-item-active,
#masthead .elementor-nav-menu--main .elementor-item.highlighted { color: #fff; }
#masthead .elementor-nav-menu--main .elementor-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* Indicator: a 2px line under the label, positioned from the item's own box, so it
   cannot drift to a row, a parent or the top of the text. */
#masthead .elementor-nav-menu--main .elementor-item::before { content: none; }
#masthead .elementor-nav-menu--main .elementor-item::after {
	content: '';
	position: absolute;
	top: auto;
	left: var(--nav-px);
	right: var(--nav-px);
	bottom: 7px;
	width: auto;
	height: 2px;
	margin: 0;
	border-radius: 2px;
	background: var(--nprn-green);
	opacity: 1;
	transform: scaleX(0);
	transform-origin: 50% 50%;
}
#masthead .elementor-nav-menu--main .elementor-item:hover::after,
#masthead .elementor-nav-menu--main .elementor-item:focus-visible::after,
#masthead .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
#masthead .elementor-nav-menu--main .elementor-item.highlighted::after { transform: scaleX(1); }

/* the parent theme's per-item submenu button and Elementor's own mobile toggle/dropdown are
   replaced by the drawer below */
#masthead .elementor-nav-menu--main .um-theme-menu-toggle,
#masthead .elementor-menu-toggle,
#masthead nav.elementor-nav-menu--dropdown { display: none; }

/* ---- Dropdowns (desktop) ---- */
#masthead .elementor-nav-menu--dropdown {
	border: 1px solid var(--nprn-line);
	border-radius: var(--nprn-r-sm);
	box-shadow: 0 18px 40px -16px rgba(27, 43, 54, 0.35);
	padding: 6px;
	min-width: 240px;
	width: max-content;
	overflow: hidden;
}
/* SmartMenus writes an inline max-width on every sub-menu, which is what made long labels wrap;
   the menu is sized to its longest label instead. !important is needed to beat the inline style. */
#masthead .elementor-nav-menu--main .sub-menu { max-width: none !important; }
#masthead .elementor-nav-menu--dropdown a.elementor-sub-item {
	border-radius: 6px;
	color: var(--nprn-ink);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	border: 0;
	white-space: nowrap;
}

/* ---- Account cluster ---- */
#masthead .header-profile-section { order: 3; width: auto; margin-left: 6px; padding: 0; }
#masthead .header-messenger-box { order: 1; }
#masthead .header-notification-box { order: 2; }
/* avatar only; the bootstrap utility class .boot-d-sm-inline-block is !important, so this has to be too */
#masthead .um-header-avatar-name,
#masthead .header__user-account .user-display-name { display: none !important; }
#masthead .um-header-avatar img,
#masthead .header__user-account img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
	transition: box-shadow 0.2s var(--nprn-ease);
}
#masthead .header-profile-section:hover img.avatar { box-shadow: 0 0 0 2px var(--nprn-green); }
#masthead .header-messenger-box .dropdown-togglu,
#masthead .header-notification-box .dropdown-togglu {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.86);
	cursor: pointer;
	transition: background-color 0.2s var(--nprn-ease), color 0.2s var(--nprn-ease);
}
#masthead .header-messenger-box .dropdown-togglu:hover,
#masthead .header-notification-box .dropdown-togglu:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
#masthead .header-profile-section .profile-menu-wrapper { right: 0; left: auto; }
#masthead .um-msg-tik-ico,
#masthead .um-notification-ico { font-size: 17px; }
#masthead .dropdown-menu {
	border: 1px solid var(--nprn-line);
	border-radius: var(--nprn-r-md);
	box-shadow: 0 24px 48px -20px rgba(27, 43, 54, 0.4);
	overflow: hidden;
}

/* ==========================================================================
   Compact (hamburger) mode
   ========================================================================== */
#masthead .nprn-burger { display: none; }
#masthead.is-compact .header__navigation { display: none; }
#masthead.is-compact .header__user-account { margin-left: auto; }
#masthead.is-compact .nprn-burger {
	order: 0;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0 0 0 -6px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
#masthead .nprn-burger:hover { background: rgba(255, 255, 255, 0.12); }
#masthead .nprn-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nprn-burger__bars { position: relative; display: block; width: 22px; height: 16px; }
.nprn-burger__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.nprn-burger__bars span:nth-child(1) { top: 0; }
.nprn-burger__bars span:nth-child(2) { top: 7px; }
.nprn-burger__bars span:nth-child(3) { top: 14px; }
.nprn-burger[aria-expanded='true'] .nprn-burger__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nprn-burger[aria-expanded='true'] .nprn-burger__bars span:nth-child(2) { opacity: 0; }
.nprn-burger[aria-expanded='true'] .nprn-burger__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---- Drawer (starts under the header so the burger doubles as the close button) ---- */
html.nprn-nav-open,
html.nprn-nav-open body { overflow: hidden; }
html.nprn-nav-open { padding-right: var(--nprn-sbw, 0px); }

.nprn-drawer {
	position: fixed;
	z-index: 990;
	top: var(--nprn-drawer-top, 68px);
	right: 0;
	bottom: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
}
.nprn-drawer.is-open { visibility: visible; pointer-events: auto; }
.nprn-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12, 24, 32, 0.55);
	opacity: 0;
}
.nprn-drawer.is-open .nprn-drawer__scrim { opacity: 1; }
.nprn-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(92vw, 400px);
	background: #fff;
	box-shadow: 24px 0 48px -24px rgba(12, 24, 32, 0.5);
	transform: translateX(-102%);
	font-family: Montserrat, sans-serif;
}
.nprn-drawer.is-open .nprn-drawer__panel { transform: none; }
.nprn-drawer__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 12px 8px;
	-webkit-overflow-scrolling: touch;
}
.nprn-drawer__list { list-style: none; margin: 0; padding: 0; }
.nprn-drawer__list > li { margin: 0 0 2px; }

.nprn-drawer__row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--nprn-ink);
	font: 600 16px/1.25 Montserrat, sans-serif;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nprn-drawer__row:hover { background: var(--nprn-bg); color: var(--nprn-ink); }
.nprn-drawer__row:focus-visible,
.nprn-drawer__sublink:focus-visible,
.nprn-drawer__actions a:focus-visible { outline: 2px solid var(--nprn-blue); outline-offset: 2px; }
.nprn-drawer__row.is-current,
.nprn-drawer__sublink.is-current { background: rgba(152, 203, 60, 0.16); }
.nprn-drawer__row.is-current::before,
.nprn-drawer__sublink.is-current::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--nprn-green);
}
.nprn-drawer__toggle.is-branch { color: var(--nprn-blue-deep); }
.nprn-drawer__chev {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--nprn-muted);
}
.nprn-drawer__toggle[aria-expanded='true'] .nprn-drawer__chev { transform: rotate(180deg); }

.nprn-drawer__sub {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
}
.nprn-drawer__sub.is-open { grid-template-rows: 1fr; visibility: visible; }
.nprn-drawer__sub > div { min-height: 0; overflow: hidden; }
.nprn-drawer__sub ul {
	list-style: none;
	margin: 2px 0 8px 22px;
	padding: 0 0 0 10px;
	border-left: 2px solid var(--nprn-line);
}
.nprn-drawer__sublink {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 6px 12px;
	border-radius: 8px;
	color: var(--nprn-text);
	font: 500 15px/1.3 Montserrat, sans-serif;
	text-decoration: none;
}
.nprn-drawer__sublink:hover { background: var(--nprn-bg); color: var(--nprn-ink); }
.nprn-drawer__sublink.is-current { color: var(--nprn-ink); font-weight: 600; }

.nprn-drawer__actions {
	flex: 0 0 auto;
	display: grid;
	gap: 10px;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--nprn-line);
	background: var(--nprn-bg);
}
.nprn-drawer__actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 999px;
	font: 700 14px/1 Montserrat, sans-serif;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.nprn-drawer__login { border: 1.5px solid var(--nprn-blue); color: var(--nprn-blue-deep); background: #fff; }
.nprn-drawer__join { background: var(--nprn-green); color: var(--nprn-ink); }
.nprn-drawer__join:hover { box-shadow: 0 0 0 4px rgba(152, 203, 60, 0.3); }

/* Motion only when the visitor has not asked for less of it */
@media (prefers-reduced-motion: no-preference) {
	#masthead .elementor-nav-menu--main .elementor-item { transition: color 0.2s var(--nprn-ease); }
	#masthead .elementor-nav-menu--main .elementor-item::after { transition: transform 0.28s var(--nprn-ease); }
	.nprn-burger__bars span { transition: transform 0.25s var(--nprn-ease), top 0.25s var(--nprn-ease), opacity 0.15s linear; }
	.nprn-drawer { transition: visibility 0s linear 0.32s; }
	.nprn-drawer.is-open { transition-delay: 0s; }
	.nprn-drawer__scrim { transition: opacity 0.28s linear; }
	.nprn-drawer__panel { transition: transform 0.32s var(--nprn-ease); }
	.nprn-drawer__chev { transition: transform 0.25s var(--nprn-ease); }
	.nprn-drawer__sub { transition: grid-template-rows 0.28s var(--nprn-ease), visibility 0s linear 0.28s; }
	.nprn-drawer__sub.is-open { transition-delay: 0s; }
	.nprn-drawer__row, .nprn-drawer__sublink { transition: background-color 0.15s linear; }
}


/* ═══ Profile dropdown & legacy header resets (moved from Customizer Additional CSS) ═══ */

.profile-menu-wrapper {
    position: relative;
    z-index: 9999;
}
.profile-menu-wrapper .section-site-profile,
.profile-menu-wrapper .site-profile-container,
.profile-menu-wrapper .nav,
.profile-menu-wrapper .boot-container-fluid,
.profile-menu-wrapper #bs-navbar-profile {
    width: 100%;
}
.profile-menu-wrapper #menu-member-menu {
    margin: 0;
    padding: 18px 0;
    list-style: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    min-width: 260px;
    border: 1px solid rgba(255, 255, 255, 0.75);
}
.profile-menu-wrapper #menu-member-menu .profile-bar,
.profile-menu-wrapper #menu-member-menu .profile-bar a:empty {
    display: none !important;
}
.profile-menu-wrapper #menu-member-menu li {
    margin: 0;
    padding: 0;
}
.profile-menu-wrapper #menu-member-menu li a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 26px;
    color: #31576b;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.18s ease;
    border-left: 4px solid transparent;
}
.profile-menu-wrapper #menu-member-menu li a:hover,
.profile-menu-wrapper #menu-member-menu li a:focus {
    color: #ffffff !important;
    background: #315f75;
    border-left-color: #7ec6df;
    padding-right: 32px;
}
.profile-menu-wrapper #menu-member-menu li + li a {
    border-top: 1px solid rgba(49, 87, 107, 0.08);
}
.profile-menu-wrapper #menu-member-menu li:last-child a:hover {
    background: #243f4e;
}

@media (max-width: 768px) {
  .profile-menu-wrapper #menu-member-menu {
          min-width: 220px;
          border-radius: 10px;
  }
  .profile-menu-wrapper #menu-member-menu li a {
          padding: 13px 22px;
  }
}

.home .custom-header.site-header .um-header-nonuser-button,
.gf-preview-link {display:none !important;
}
button.um-theme-menu-toggle {
    display: none !important;
}
.um-header-nonuser-button {
    display: none !important;
}