/**
 * Jonas Club Software – Nav Preview Styles
 * Scoped with .jnp- prefix to avoid Divi conflicts.
 */

:root {
  --jnp-navy: #0B1D3A;
  --jnp-navy-light: #132B52;
  --jnp-navy-mid: #1A3A6B;
  --jnp-red: #EB4241;
  --jnp-red-hover: #D63130;
  --jnp-red-shadow: 235,66,65;
  --jnp-gold: #C9A94E;
  --jnp-gold-light: #E8D48B;
  --jnp-cream: #FAF8F5;
  --jnp-white: #FFFFFF;
  --jnp-gray-100: #F4F5F7;
  --jnp-gray-200: #E8EAED;
  --jnp-gray-400: #9CA3AF;
  --jnp-gray-600: #6B7280;
  --jnp-gray-800: #374151;
  --jnp-util-text: #FFFFFF;
  --jnp-font-display: 'Playfair Display', Georgia, serif;
  --jnp-font-body: 'DM Sans', system-ui, sans-serif;
  --jnp-shadow-xl: 0 20px 60px rgba(11,29,58,.22);
}

/* ═══════════════════════════════════════════
   UTILITY BAR
   ═══════════════════════════════════════════ */
.jnp-util-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100001;
  background: #0E234C;
  height: 36px;
  display: flex; align-items: center;
  font-family: var(--jnp-font-body);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jnp-util-bar.jnp-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}
.jnp-util-bar-inner {
  max-width: 1320px; width: 100%; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.jnp-util-events-text {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--jnp-util-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jnp-util-events-link {
  color: var(--jnp-util-text);
  text-decoration: none;
  transition: color 0.15s ease;
}
.jnp-util-events-link:hover { color: #fff; }
.jnp-util-brands {
  display: flex; align-items: center; gap: 0;
  flex-shrink: 0;
}
.jnp-util-brand {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 36px;
  border-left: 1px solid rgba(255,255,255,0.18);
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
  font-family: var(--jnp-font-body);
}
.jnp-util-brand:hover { background: rgba(255,255,255,0.1); }
.jnp-util-brand:first-child { border-left: none; }

/* WP Admin Bar offset (logged-in users) */
body.admin-bar .jnp-util-bar { top: 32px; }
body.admin-bar .jnp-top-bar { top: 68px; }  /* 32 admin + 36 util */
body.admin-bar #et-main-area { padding-top: 140px; }  /* 32 admin + 36 util + 72 nav */
body.admin-bar .jnp-top-bar.jnp-bar-hidden { top: 32px; }
body.admin-bar.jnp-util-hidden #et-main-area { padding-top: 104px; }  /* 32 admin + 72 nav */
body.admin-bar.jnp-no-util-bar #et-main-area { padding-top: 104px; }

/* ═══════════════════════════════════════════
   TOP NAV BAR
   ═══════════════════════════════════════════ */
.jnp-top-bar {
  position: fixed; top: 36px; left: 0; right: 0; z-index: 100000;
  background: var(--jnp-navy);
  height: 72px;
  display: flex; align-items: center;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow .3s ease, background .3s ease;
  font-family: var(--jnp-font-body);
}
.jnp-top-bar.jnp-bar-hidden { top: 0; }
body.jnp-no-util-bar .jnp-top-bar { top: 0; }
body.admin-bar.jnp-no-util-bar .jnp-top-bar { top: 32px; }
.jnp-top-bar.scrolled {
  background: rgba(11,29,58,.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.jnp-nav-inner {
  max-width: 1320px; width: 100%; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: flex-start; gap: 24px;
}
.jnp-logo {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.jnp-logo-img {
  height: 34px; width: auto;
  transition: opacity 0.2s ease;
  /* Recolor white PNG to brand blue #1E59A5 across all themes */
  filter: brightness(0) saturate(100%) invert(22%) sepia(80%) saturate(1687%) hue-rotate(200deg) brightness(94%) contrast(86%);
}
.jnp-nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.jnp-nav-item {
  position: relative;
  padding: 8px 10px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
  display: flex; align-items: center; gap: 5px;
  user-select: none;
  font-family: var(--jnp-font-body);
}
.jnp-nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.jnp-nav-item .jnp-chevron {
  width: 14px; height: 14px; opacity: .5;
  transition: transform .25s ease, opacity .2s ease;
}
.jnp-nav-item:hover .jnp-chevron { opacity: .8; }
.jnp-nav-item.open .jnp-chevron { transform: rotate(180deg); opacity: .9; }

.jnp-nav-right { display: flex; align-items: center; gap: 12px; }
.jnp-demo-btn {
  background: var(--jnp-red); color: #fff;
  padding: 10px 22px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 12px rgba(var(--jnp-red-shadow),.35);
  font-family: var(--jnp-font-body);
  white-space: nowrap;
}
.jnp-demo-btn:hover {
  background: var(--jnp-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--jnp-red-shadow),.45);
}

/* ═══════════════════════════════════════════
   DROPDOWN PANELS
   ═══════════════════════════════════════════ */
.jnp-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--jnp-white);
  border-radius: 14px;
  box-shadow: var(--jnp-shadow-xl);
  padding: 10px;
  min-width: 280px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  border: 1px solid rgba(11,29,58,.06);
  z-index: 100002;
}
.jnp-dropdown-panel::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--jnp-white);
  border-left: 1px solid rgba(11,29,58,.06);
  border-top: 1px solid rgba(11,29,58,.06);
}
.jnp-nav-item.open .jnp-dropdown-panel,
.jnp-nav-item:hover .jnp-dropdown-panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Hover bridge */
.jnp-nav-item::after {
  content: ''; position: absolute;
  bottom: -16px; left: 0; right: 0; height: 16px;
}

/* Solutions mega dropdown */
.jnp-solutions-dropdown {
  min-width: 680px; padding: 20px;
  left: 0; transform: translateX(0);
}
.jnp-solutions-dropdown::before { left: 60px; transform: rotate(45deg); }
.jnp-nav-item.open .jnp-solutions-dropdown,
.jnp-nav-item:hover .jnp-solutions-dropdown {
  transform: translateX(0) translateY(0);
}
.jnp-solutions-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.jnp-dd-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  text-decoration: none; color: var(--jnp-gray-800);
  transition: background .15s ease;
  font-family: var(--jnp-font-body);
}
.jnp-dd-link:hover { background: var(--jnp-gray-100); }
.jnp-dd-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--jnp-cream);
}
.jnp-dd-icon svg {
  width: 20px; height: 20px;
  stroke: var(--jnp-navy-mid);
}
.jnp-dd-link-text { display: flex; flex-direction: column; }
.jnp-dd-link-title {
  font-size: 14.5px; font-weight: 600; color: var(--jnp-navy);
  line-height: 1.3;
}
.jnp-dd-link-sub {
  font-size: 12.5px; color: var(--jnp-gray-600); line-height: 1.35; margin-top: 1px;
}
.jnp-dd-footer {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--jnp-gray-200);
}
.jnp-dd-footer a {
  display: flex; align-items: center; gap: 6px;
  color: var(--jnp-navy-mid); font-size: 13.5px; font-weight: 600;
  text-decoration: none; padding: 8px 14px; border-radius: 8px;
  transition: background .15s ease;
  font-family: var(--jnp-font-body);
}
.jnp-dd-footer a:hover { background: var(--jnp-gray-100); }

/* ─── Expansion variant: grouped card with child links ─── */
.jnp-dd-group {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  transition: background .15s ease;
  font-family: var(--jnp-font-body);
}
.jnp-dd-group:hover { background: var(--jnp-gray-100); }
.jnp-dd-group-title-link { text-decoration: none; }
.jnp-dd-group-title-link .jnp-dd-link-title { transition: color .15s ease; }
.jnp-dd-group-title-link:hover .jnp-dd-link-title {
  color: var(--jnp-navy-mid); text-decoration: underline;
}
.jnp-dd-children {
  display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px;
}
.jnp-dd-children a {
  font-size: 11.5px; font-weight: 500;
  color: var(--jnp-navy-mid);
  text-decoration: none;
  padding: 2px 7px; border-radius: 4px;
  background: var(--jnp-gray-200);
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.jnp-dd-children a:hover { background: var(--jnp-navy); color: #fff; }

/* Simple dropdowns */
.jnp-simple-dropdown { min-width: 260px; }
.jnp-simple-dropdown .jnp-dd-link {
  gap: 12px; padding: 10px 14px;
}
.jnp-simple-dropdown .jnp-dd-icon {
  width: 36px; height: 36px;
}
.jnp-simple-dropdown .jnp-dd-icon svg {
  width: 17px; height: 17px;
}

/* ═══════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════ */
.jnp-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 8px;
  align-items: center; justify-content: center;
  transition: background .2s ease;
}
.jnp-hamburger:hover { background: rgba(255,255,255,.1); }
.jnp-hamburger span {
  display: block; width: 22px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
  position: relative;
}
.jnp-hamburger span::before, .jnp-hamburger span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff; border-radius: 2px; transition: transform .3s ease;
}
.jnp-hamburger span::before { top: -7px; }
.jnp-hamburger span::after { top: 7px; }
.jnp-hamburger.open span { background: transparent; }
.jnp-hamburger.open span::before { transform: translateY(7px) rotate(45deg); }
.jnp-hamburger.open span::after { transform: translateY(-7px) rotate(-45deg); }

.jnp-mobile-nav {
  display: none; position: fixed; top: 108px; left: 0; right: 0; bottom: 0;
  background: var(--jnp-navy); z-index: 99999;
  padding: 20px; overflow-y: auto;
  font-family: var(--jnp-font-body);
}
body.jnp-no-util-bar .jnp-mobile-nav { top: 72px; }
body.admin-bar.jnp-no-util-bar .jnp-mobile-nav { top: 104px; }
.jnp-mobile-nav.open { display: block; animation: jnpFadeIn .25s ease; }
.jnp-mobile-nav-item {
  display: block; padding: 14px 16px;
  color: rgba(255,255,255,.85); font-size: 16px; font-weight: 500;
  text-decoration: none; border-radius: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  font-family: var(--jnp-font-body);
}
.jnp-mobile-nav-item:hover { background: rgba(255,255,255,.06); }
.jnp-mobile-sub { padding-left: 16px; display: none; }
.jnp-mobile-sub.open { display: block; }
.jnp-mobile-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; color: rgba(255,255,255,.7); font-size: 14.5px;
  text-decoration: none; border-radius: 6px;
  font-family: var(--jnp-font-body);
}
.jnp-mobile-sub a:hover { color: #fff; background: rgba(255,255,255,.05); }
.jnp-mobile-demo-btn {
  display: block; text-align: center;
  background: var(--jnp-red); color: #fff;
  padding: 14px; border-radius: 10px; margin-top: 20px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  font-family: var(--jnp-font-body);
}
.jnp-mob-icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.jnp-mobile-sub a svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.5); }
.jnp-mobile-nav.jnp-bar-shifted { top: 72px; }
body.admin-bar .jnp-mobile-nav.jnp-bar-shifted { top: 104px; }

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes jnpFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .jnp-nav-links { display: none; }
  .jnp-hamburger { display: flex; }

  /* Adjust content offset for mobile (util may be hidden) */
  #et-main-area { padding-top: 108px; }
}

@media (max-width: 640px) {
  .jnp-util-bar-inner { padding: 0 16px; }
  .jnp-nav-inner { padding: 0 16px; }
  .jnp-util-events-text { font-size: 10px; }
}

/* ═══════════════════════════════════════════
   LIGHT THEME VARIANT (matches current live site)
   Body class .jnp-light — toggled via theme switcher
   ═══════════════════════════════════════════ */
/* Utility bar stays #0E234C + white text in both dark and light themes (per design) */
body.jnp-light .jnp-util-events-link:hover { color: rgba(255,255,255,0.85); }

body.jnp-light .jnp-top-bar {
  background: #FFFFFF;
  border-bottom: 1px solid #E8EAED;
}
body.jnp-light .jnp-top-bar.scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 24px rgba(11,29,58,.08);
}
body.jnp-light .jnp-nav-item { color: #333333; }
body.jnp-light .jnp-nav-item:hover {
  color: #0B1D3A;
  background: rgba(11,29,58,.05);
}
body.jnp-light .jnp-hamburger span,
body.jnp-light .jnp-hamburger span::before,
body.jnp-light .jnp-hamburger span::after { background: #333333; }
body.jnp-light .jnp-hamburger:hover { background: rgba(11,29,58,.06); }

/* Logo recolor to #1E59A5 is applied globally on .jnp-logo-img above */

body.jnp-light .jnp-mobile-nav { background: #FFFFFF; }
body.jnp-light .jnp-mobile-nav-item {
  color: #333333;
  border-bottom-color: rgba(11,29,58,.08);
}
body.jnp-light .jnp-mobile-nav-item:hover { background: rgba(11,29,58,.04); }
body.jnp-light .jnp-mobile-sub a { color: #6B7280; }
body.jnp-light .jnp-mobile-sub a:hover {
  color: #0B1D3A;
  background: rgba(11,29,58,.04);
}
body.jnp-light .jnp-mobile-sub a svg { stroke: rgba(11,29,58,.5); }

/* ═══════════════════════════════════════════
   THEME TOGGLE (floating preview-only chip)
   ═══════════════════════════════════════════ */
.jnp-theme-toggle {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 100050;
  display: inline-flex; align-items: center;
  background: #0B1D3A; color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px;
  font-family: var(--jnp-font-body);
  font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  user-select: none;
}
.jnp-theme-toggle button {
  background: transparent; color: inherit;
  border: none; cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  letter-spacing: 0.03em;
  transition: background .15s ease, color .15s ease;
}
.jnp-theme-toggle button.active {
  background: #fff; color: #0B1D3A;
}
body.jnp-light .jnp-theme-toggle {
  background: #fff; color: #0B1D3A;
  border-color: rgba(11,29,58,.12);
  box-shadow: 0 6px 24px rgba(11,29,58,.12);
}
body.jnp-light .jnp-theme-toggle button.active {
  background: #0B1D3A; color: #fff;
}