/* =================================================================
   header-block.css — Bluworks v2
   Self-contained: includes all button styles so the nav renders
   correctly regardless of what the parent theme does to .btn.
   ================================================================= */

/* ── Design tokens ──────────────────────────────────────────────── */
.nav,
.mobile-drawer {
  --nav-ink:        #0A0F1E;
  --nav-ink-mid:    #4B5068;
  --nav-ink-muted:  #6B7088;
  --nav-line:       #E4E8F3;
  --nav-line-soft:  #F0F3F9;
  --nav-bg:         #FAFBFD;
  --nav-surface:    #FFFFFF;
  --nav-primary:    #1E50E5;
  --nav-dark:       #0A2A8A;
  --nav-soft:       #EEF3FF;
  --nav-shadow-lg:  0 18px 48px rgba(10,15,30,0.12);
  --nav-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --nav-dur:        220ms;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] .nav,
html[dir="rtl"] .mobile-drawer {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

/* ── .nav bar ───────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(250, 251, 253, 0.85);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nav-dur) var(--nav-ease),
              background   var(--nav-dur) var(--nav-ease);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--nav-line);
}

/* ── Container ──────────────────────────────────────────────────── */
.nav .container,
.nav-inner.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap !important;
}

/* ── Logo ───────────────────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 1; 
  min-width: 0;
}
.nav-logo img {
  height: 26px;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}
html[dir="rtl"] .nav-logo img { height: 34px; }

/* ── Desktop nav links ──────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content:center;
}

.nav-link {
  font-size: 16px;
  color: var(--nav-ink);
  font-weight: 600;
  font-family: inherit;
  transition: color var(--nav-dur) var(--nav-ease);
  padding: 10px 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-link:hover        { color: var(--nav-primary); }
.nav-link.is-active    { color: var(--nav-primary); }
.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--nav-primary);
  border-radius: 2px;
}
.nav-link.has-dropdown::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 6px;
  opacity: 0.5;
}
html[dir="rtl"] .nav-link.has-dropdown::after { margin-left: 0; margin-right: 6px; }

/* ── Dropdown ───────────────────────────────────────────────────── */
.nav-item { position: relative; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--nav-surface);
  border: 1px solid var(--nav-line);
  border-radius: 12px;
  box-shadow: var(--nav-shadow-lg);
  padding: 8px;
  min-width: 240px;
  display: grid;
  grid-template-columns: 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nav-dur) var(--nav-ease),
              transform var(--nav-dur) var(--nav-ease);
}

/* ── CLICKABILITY FIX ───────────────────────────────────────────
   Invisible bridge that covers the 8px gap between the nav link
   and the dropdown panel. Without this the hover state breaks
   the moment the cursor enters the gap and the menu closes.    */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown .dropdown-item {
  display: block;
  padding: 9px 16px;
  border-radius: 6px;
  transition: background 160ms;
  text-decoration: none;
}
.nav-dropdown .dropdown-item:hover { background: var(--nav-soft); }
.nav-dropdown .dropdown-item:hover .dropdown-title { color: var(--nav-primary); }
.dropdown-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--nav-ink);
  display: block;
  letter-spacing: -0.005em;
  font-family: inherit;
}

/* ── Right actions ──────────────────────────────────────────────── */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
}

/* Log in */
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--nav-ink-mid);
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-login:hover {
  color: var(--nav-ink);
  background: var(--nav-bg);
}
.nav-login-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Language switcher */
.nav .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: var(--nav-ink);
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--nav-line);
  transition: all var(--nav-dur) var(--nav-ease);
  text-decoration: none;
  white-space: nowrap;
}
.nav .lang-switch:hover { border-color: var(--nav-ink); }
.lang-switch-icon { width: 16px; height: 16px; flex-shrink: 0; }
.lang-text-mobile { display: none; }

/* In RTL, put the globe icon on the left (before the text visually) */
html[dir="rtl"] .nav .lang-switch { flex-direction: row-reverse; }

/* ── CTA button ─────────────────────────────────────────────────── */
.nav-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  background: var(--nav-primary) !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
  transition: background var(--nav-dur) var(--nav-ease),
              transform   var(--nav-dur) var(--nav-ease),
              box-shadow  var(--nav-dur) var(--nav-ease) !important;
}
.nav-cta-btn:hover {
  background: var(--nav-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(30, 80, 229, 0.20) !important;
}
.nav-cta-btn .btn-arrow {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  transition: transform var(--nav-dur) var(--nav-ease) !important;
}
.nav-cta-btn:hover .btn-arrow { transform: translateX(3px) !important; }
html[dir="rtl"] .nav-cta-btn .btn-arrow { transform: scaleX(-1) !important; }
html[dir="rtl"] .nav-cta-btn:hover .btn-arrow { transform: scaleX(-1) translateX(3px) !important; }

@keyframes nav-cta-glow {
  0%   { box-shadow: 0 0 0 0 rgba(30, 80, 229, 0.55), 0 6px 14px rgba(30, 80, 229, 0.18); }
  70%  { box-shadow: 0 0 0 14px rgba(30, 80, 229, 0), 0 10px 28px rgba(30, 80, 229, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(30, 80, 229, 0), 0 6px 14px rgba(30, 80, 229, 0.18); }
}
.nav-cta-btn { animation: nav-cta-glow 2.6s ease-out infinite; }
.nav-cta-btn:hover { animation: none !important; }

/* ── Hamburger ──────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--nav-ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--nav-ink);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }


/* =================================================================
   RESPONSIVE OPTIMIZATIONS
   ================================================================= */

@media (max-width: 1080px) {
  .nav-links  { display: none !important; }
  .nav-toggle { display: flex !important; }
}

@media (max-width: 768px) {
  .nav-login { display: none !important; }
  
  /* Enable the compact text for Language Switcher */
  .lang-text-desktop { display: none !important; }
  .lang-text-mobile  { display: inline-block !important; }

  /* Pull items tighter together to prevent overflow */
  .nav-inner { gap: 10px; }
  .nav-actions { gap: 8px; }
  
  .nav .lang-switch {
    padding: 7px 10px;
    gap: 6px;
    font-size: 15px;
  }
}

/* ── Extreme Mobile Space Optimization (Max 600px) ── */
@media (max-width: 600px) {
  .nav-inner.container {
    padding-left: 14px;
    padding-right: 14px;
  }
  
  /* Further reduce gaps */
  .nav-inner { gap: 6px; }
  .nav-actions { gap: 6px; }

  /* Scale Logo Down Slightly */
  .nav-logo img { height: 20px; }
  html[dir="rtl"] .nav-logo img { height: 26px; }

  /* Compact Language Switcher */
  .nav .lang-switch {
    padding: 6px 8px;
    font-size: 14px;
    gap: 4px;
  }
  
  /* Compact CTA Button */
  .nav-cta-btn {
    padding: 7px 10px !important;
    font-size: 13px !important;
    gap: 4px !important;
  }
  
  /* Hamburger padding */
  .nav-toggle {
    width: 32px;
    height: 32px;
    margin-left: 2px;
  }
}

/* ── iPhone SE / Small Screens (Max 400px) ── */
@media (max-width: 400px) {
  .nav-inner.container { padding-left: 10px; padding-right: 10px; }
  .nav-actions { gap: 4px; }
  
  /* Hide the arrow entirely on very tiny screens to ensure the button fits */
  .nav-cta-btn .btn-arrow { display: none !important; }
  .nav-cta-btn { font-size: 14px !important; padding: 8px 8px !important; }
}

/* ── Mobile drawer ──────────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: 200;
  padding: 24px;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[dir="rtl"] .mobile-drawer { transform: translateX(-100%); }
.mobile-drawer.open             { transform: translateX(0);      }
html[dir="rtl"] .mobile-drawer.open { transform: translateX(0);  }

.mobile-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.mobile-drawer-close {
  font-size: 32px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.mobile-drawer ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-drawer li a {
  display: block;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--nav-line-soft);
  color: var(--nav-ink);
  text-decoration: none;
  font-family: inherit;
}
.mobile-drawer li a:hover { color: var(--nav-primary); }

/* ── Editor preview ─────────────────────────────────────────────── */
.editor-styles-wrapper .nav, .acf-block-preview .nav {
  position: relative !important; top: auto !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(250, 251, 253, 0.97) !important;
  border-bottom: 1px solid var(--nav-line) !important;
}
.editor-styles-wrapper .nav-cta-btn, .acf-block-preview .nav-cta-btn { animation: none !important; }
.editor-styles-wrapper .mobile-drawer, .acf-block-preview .mobile-drawer { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
  .nav-cta-btn { animation: none !important; }
}

/* =================================================================
   KADENCE OVERRIDE FIXES
   ================================================================= */
a.nav-cta-btn, a.nav-cta-btn:link, a.nav-cta-btn:visited,
a.nav-cta-btn:hover, a.nav-cta-btn:focus,
.nav a.nav-cta-btn, .nav-actions a.nav-cta-btn, nav a.nav-cta-btn {
  color: #ffffff !important;
  text-decoration: none !important;
}
a.nav-cta-btn span, a.nav-cta-btn .nav-cta-text,
.nav a.nav-cta-btn span, nav a.nav-cta-btn span { color: #ffffff !important; }
a.nav-cta-btn svg, a.nav-cta-btn .btn-arrow { color: #ffffff !important; stroke: #ffffff !important; }

.nav-inner .nav-link, .nav-inner .nav-link:link, .nav-inner .nav-link:visited {
  color: #0A0F1E !important; text-decoration: none !important;
}
.nav-inner .nav-link:hover, .nav-inner .nav-link.is-active { color: #1E50E5 !important; }

.nav-inner .nav-login, .nav-inner .nav-login:link, .nav-inner .nav-login:visited {
  color: #4B5068 !important; text-decoration: none !important;
}
.nav-inner .nav-login:hover { color: #0A0F1E !important; }

.nav-inner .lang-switch, .nav-inner .lang-switch:link, .nav-inner .lang-switch:visited {
  color: #0A0F1E !important; text-decoration: none !important;
}
.nav-dropdown .dropdown-title, .nav-dropdown a .dropdown-title,
.nav-dropdown .dropdown-item .dropdown-title { color: #0A0F1E !important; }
.nav-dropdown .dropdown-item:hover .dropdown-title { color: #1E50E5 !important; }
.mobile-drawer li a, .mobile-drawer li a:link, .mobile-drawer li a:visited {
  color: #0A0F1E !important; text-decoration: none !important;
}
.mobile-drawer li a:hover { color: #1E50E5 !important; }