.site-header { position:relative; z-index:100; }
.top-bar { background:var(--navy); color:var(--white); font-size:.85em; padding:8px 0; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.contact-info { display:flex; gap:20px; flex-wrap:wrap; }
.contact-info a { color:var(--white); text-decoration:none; opacity:.9; }
.contact-info i {font-size: 15px; margin-right: 5px;}
.header-social-links { display:flex; gap:10px; }
.header-social-links i {font-size: 18px; margin-top: 3px;}
.header-social-links a:hover { opacity:1; }
.member-btn { background:var(--gold); color:var(--white); padding:6px 16px; border-radius:6px; text-decoration:none; font-weight:600; }
.header-main { background:var(--white); box-shadow:var(--shadow-sm); padding:10px 0; }
.header-content { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.header-content .logo-group img { height:auto; width: 420px;margin: 0px 20px -50px 0;}
.nav-inner { display:flex; gap:28px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.nav-inner .menu-item { position:relative; }
.nav-inner a { display:flex; align-items:center; gap:4px; color:var(--navy); text-decoration:none; font-weight:600; padding:8px 4px; border-radius:6px; }
.nav-inner a:hover, .nav-inner a.active, .nav-inner a.current-menu-item, .nav-inner a.current_page_item {
	color: var(--gold);
}
.menu-caret { font-size:.7em; transition: transform .2s ease; }

/* ───── Desktop dropdown submenus (keyboard-accessible via :focus-within) —
   scoped to .primary-nav only, since .mobile-nav reuses the same
   .nav-inner/.menu-item/.sub-menu classes but needs the always-visible,
   static treatment further down instead. ───── */
.primary-nav .sub-menu {
  position:absolute; top:100%; left:0; z-index:10; min-width:220px;
  margin:0; padding:8px 0; list-style:none; background:var(--white);
  border-radius:8px; box-shadow:var(--shadow-md, 0 12px 32px rgba(0,0,0,.14));
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.primary-nav .sub-menu .sub-menu { top:-8px; left:100%; }
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.primary-nav .sub-menu .menu-item > a { padding:10px 16px; font-size:.95em; white-space:nowrap; }
.primary-nav .menu-item-has-children:hover > a .menu-caret,
.primary-nav .menu-item-has-children:focus-within > a .menu-caret {
  transform: rotate(180deg);
}

/* ───── Mobile off-canvas: submenus are always-visible, indented, static —
   no hover/focus-within, no absolute positioning, no JS needed. ───── */
.mobile-nav .sub-menu {
  position:static; opacity:1; visibility:visible; transform:none;
  box-shadow:none; background:none; margin:4px 0 4px 16px; padding:0;
}
.mobile-nav .menu-caret { display:none; }

.mobile-nav-toggle { display:none; background:none; border:none; font-size:1.6em; cursor:pointer; color:var(--navy); }
@media (max-width:960px) {
  .header-content nav.primary-nav { display:none; }
  .mobile-nav-toggle { display:block; }
}
.mobile-nav-overlay { position:fixed; inset:0; background:rgba(10,35,66,.6); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:998; }
.mobile-nav { position:fixed; top:0; right:0; bottom:0; width:min(320px, 85vw); background:var(--white); z-index:999; transform:translateX(100%); transition:transform .3s ease; padding:24px; overflow-y:auto; }
.mobile-nav .nav-inner { flex-direction:column; align-items:flex-start; gap:4px; }
body.mobile-nav-open .mobile-nav { transform:translateX(0); }
body.mobile-nav-open .mobile-nav-overlay { opacity:1; visibility:visible; }