/* =============================================================================
   LOCUS NAV — nav.css  v2
   Enqueue: wp_enqueue_style('locus-nav', get_template_directory_uri() . '/assets/css/nav.css', [], '2.0.0');
============================================================================= */

/* ─── Tokens ── */
:root {
  --ln-hb-h:      0px;          /* set by JS when hello bar visible */
  --ln-nav-h:     64px;
  --ln-max:       1200px;       /* matches site container */

  /* Nav colours — cream theme */
  --ln-nav-bg:    #F5F0EB;
  --ln-nav-text:  #1A0808;
  --ln-nav-dim:   rgba(26,8,8,0.55);
  --ln-nav-mute:  rgba(26,8,8,0.35);
  --ln-nav-border:#D9D0C4;
  --ln-nav-hover: rgba(26,8,8,0.06);

  /* Dropdown */
  --ln-dd-bg:     #1A0808;
  --ln-dd-border: rgba(255,255,255,0.08);
  --ln-dd-ink:    #F0EAE0;
  --ln-dd-dim:    rgba(240,234,224,0.55);
  --ln-dd-mute:   rgba(240,234,224,0.32);

  /* Hello bar */
  --ln-hb-bg:     #3D0E0E;

  /* Accent */
  --ln-accent:    #C0392B;
  --ln-accent-h:  #A93226;

  /* Mobile drawer */
  --ln-drawer-bg: #F5F0EB;

  --ln-ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ln-font:      -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
  --ln-radius:    10px;
}


body.admin-bar .locus-nav {
  top: calc(var(--ln-hb-h) + 32px);
}

body.admin-bar #locus-hello-bar {
  top: 32px;
}

body.admin-bar {
  padding-top: calc(32px + var(--ln-hb-h) + var(--ln-nav-h)) !important;
}

/* ─── Body offset ── */
body {
  padding-top: calc(var(--ln-hb-h) + var(--ln-nav-h));
}

/* =============================================================================
   HELLO BAR
============================================================================= */
#locus-hello-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  height: 38px;
  background: var(--ln-hb-bg);
  border-bottom: 1px solid rgba(192,57,43,0.3);
  font-family: var(--ln-font);
}

.lhb-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  max-width: var(--ln-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.lhb-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ln-accent);
  animation: lhb-pulse 2s ease-in-out infinite;
}
@keyframes lhb-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.7); }
}

.lhb-text {
  font-size: 12.5px;
  color: rgba(240,234,224,0.75);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lhb-cta {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 6px;
  background: var(--ln-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.lhb-cta:hover { background: var(--ln-accent-h); }

.lhb-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(240,234,224,0.4);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.15s;
  font-family: var(--ln-font);
}
.lhb-close:hover { color: rgba(240,234,224,0.75); }

@media (max-width: 540px) {
  /* Keep text visible — wrap it */
.lhb-text {
        display: block;
        font-size: 11.5px;
        white-space: normal;
        text-align: left;
        line-height: 1.35;
    }
  .lhb-inner {
    flex-wrap: nowrap;
    justify-content: center;
    padding: 7px 2.5rem 7px 1rem;
    height: auto;
    min-height: 38px;
    gap: 6px;
  }
  #locus-hello-bar {
    height: auto;
    min-height: 38px;
  }
}

/* =============================================================================
   NAV SHELL — cream background, always visible
============================================================================= */
.locus-nav {
  position: fixed;
  top: var(--ln-hb-h);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--ln-nav-h);
  background: var(--ln-nav-bg);
  border-bottom: 1px solid var(--ln-nav-border);
  box-shadow: 0 1px 0 var(--ln-nav-border);
  transition: top 0.25s var(--ln-ease), box-shadow 0.3s;
  font-family: var(--ln-font);
}
.locus-nav.is-scrolled,
.locus-nav.dd-open {
  box-shadow: 0 1px 0 var(--ln-nav-border), 0 8px 32px rgba(26,8,8,0.10);
}

.locus-nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--ln-max);
  margin: 0 auto;
  padding: 0 2rem;
  gap: 0;
}

/* ─── Logo ── */
.locus-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: 0; /* menu is centered via flex, not margin */
}
.locus-nav__logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* ─── Desktop menu — centered ── */
.locus-nav__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  flex: 1;                     /* take available space */
  justify-content: center;     /* center the menu items */
}

/* Nav button (has dropdown) and plain link */
.locus-nav__btn, .locus-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #1A0808;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--ln-font);
    transition: color 0.15s, background 0.15s;
    line-height: 1.2;
}
.locus-nav__btn:hover,
.locus-nav__link:hover,
.locus-nav__item.is-open .locus-nav__btn {
  color: var(--ln-nav-text);
  background: var(--ln-nav-hover);
}

.locus-nav__caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.22s var(--ln-ease);
  opacity: 0.45;
  color: var(--ln-nav-text);
}
.locus-nav__item.is-open .locus-nav__caret {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* =============================================================================
   MEGA DROPDOWN — constrained to --ln-max, flush under nav
============================================================================= */
.locus-nav__dd {
  display: none;
  position: fixed;
  top: calc(var(--ln-hb-h) + var(--ln-nav-h));   /* flush under nav bar */
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--ln-dd-bg);
  border-top: none;                               /* no gap/line */
  border-bottom: 1px solid var(--ln-dd-border);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.locus-nav__dd.is-open {
  display: block;
  animation: dd-in 0.18s var(--ln-ease) both;
}
@keyframes dd-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Inner grid — same max-width as nav inner */
.locus-nav__dd-grid {
  display: grid;
  gap: 4px;
  max-width: var(--ln-max);
  margin: 0 auto;
  padding: 20px 2rem;          /* compact vertical padding */
}
.locus-nav__dd--cols-3 .locus-nav__dd-grid { grid-template-columns: repeat(3, 1fr); }
.locus-nav__dd--cols-4 .locus-nav__dd-grid { grid-template-columns: repeat(4, 1fr); }

.locus-nav__dd-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 13px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.locus-nav__dd-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.locus-nav__dd-item--all .locus-nav__dd-title { color: var(--ln-accent); }

.locus-nav__dd-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ln-dd-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.locus-nav__dd-desc {
  font-size: 11.5px;
  color: var(--ln-dd-mute);
  line-height: 1.5;
}

.locus-nav__dd-label {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ln-dd-mute);
  padding: 4px 13px 2px;
}
.locus-nav__dd-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--ln-dd-border);
  margin: 4px 0;
}

/* Dropdown backdrop */
.locus-dd-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.locus-dd-backdrop.is-visible { display: block; }

/* =============================================================================
   NAV ACTIONS (right side)
============================================================================= */
.locus-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* No margin-left:auto — logo is left, menu is center, actions is right
     We use margin-left: auto on actions to push to right */
  margin-left: auto;
}

/* ─── Buttons ── */
.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ln-font);
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: none;
  transition: all 0.16s var(--ln-ease);
  white-space: nowrap;
}
.ln-btn--sm   { font-size: 13px; padding: 7px 18px; }
.ln-btn--full { width: 100%; font-size: 14px; padding: 13px 20px; border-radius: var(--ln-radius); }

.ln-btn--primary {
    background: #5c1a1a;
    color: #fff;
}
.ln-btn--primary:hover {
  background: var(--ln-accent-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192,57,43,0.3);
}

.ln-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--ln-nav-border);
  color: var(--ln-nav-dim);
}
.ln-btn--ghost:hover {
  border-color: rgba(26,8,8,0.25);
  color: var(--ln-nav-text);
  background: var(--ln-nav-hover);
}

/* =============================================================================
   HAMBURGER
============================================================================= */
.locus-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(26,8,8,0.07);
  border: 1.5px solid var(--ln-nav-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.locus-hamburger:hover { background: rgba(26,8,8,0.12); }
.locus-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ln-nav-text);
  border-radius: 2px;
  transition: transform 0.25s var(--ln-ease), opacity 0.2s;
  transform-origin: center;
}
.locus-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.locus-hamburger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.locus-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =============================================================================
   MOBILE BACKDROP
============================================================================= */
.locus-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(26,8,8,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s var(--ln-ease);
}
.locus-mobile-backdrop.is-visible {
  display: block;
  opacity: 1;
}

/* =============================================================================
   MOBILE DRAWER — slides from LEFT, cream bg, full-height
============================================================================= */
.locus-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;          /* ← from left */
  bottom: 0;
  right: auto;
  z-index: 10002;
  width: min(320px, 100vw);
  background: var(--ln-drawer-bg);
  border-right: 1px solid var(--ln-nav-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--ln-font);
  transform: translateX(-100%);         /* starts off screen left */
  transition: transform 0.32s var(--ln-ease);
  visibility: hidden;
}
.locus-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Drawer header */
.lmn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ln-nav-border);
  flex-shrink: 0;
  background: var(--ln-drawer-bg);
}
.lmn-header img { display: block; width: 40%; height: auto; }

.lmn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(26,8,8,0.07);
  border: 1.5px solid var(--ln-nav-border);
  border-radius: 8px;
  color: var(--ln-nav-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.lmn-close:hover { background: rgba(26,8,8,0.12); color: var(--ln-nav-text); }

/* Drawer scrollable body */
.lmn-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Group rows */
.lmn-group { border-bottom: 1px solid var(--ln-nav-border); }

/* Accordion trigger */
.lmn-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: none;
  color: var(--ln-nav-dim);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--ln-font);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lmn-trigger:hover,
.lmn-trigger.is-open {
  color: var(--ln-nav-text);
  background: rgba(26,8,8,0.04);
}

.lmn-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.22s var(--ln-ease);
  opacity: 0.4;
  color: var(--ln-nav-text);
}
.lmn-trigger.is-open .lmn-chevron { transform: rotate(180deg); opacity: 0.8; }

/* Accordion panel */
.lmn-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ln-ease);
  background: rgba(26,8,8,0.03);
}
.lmn-panel.is-open { max-height: 700px; }

.lmn-link {
  display: block;
  padding: 10px 20px 10px 28px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ln-nav-dim);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.12s, padding-left 0.15s;
}
.lmn-link:hover { color: var(--ln-nav-text); padding-left: 32px; }

/* Flat links (no accordion) */
.lmn-flat-link {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ln-nav-dim);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.15s, background 0.15s;
}
.lmn-flat-link:hover { color: var(--ln-nav-text); background: rgba(26,8,8,0.04); }

/* Drawer footer */
.lmn-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--ln-nav-border);
  background: var(--ln-drawer-bg);
}

.lmn-social {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.lmn-social a {
  color: var(--ln-nav-mute);
  line-height: 0;
  transition: color 0.15s;
}
.lmn-social a:hover { color: var(--ln-nav-dim); }

/* Mobile footer buttons */
.lmn-footer .ln-btn--primary {
  color: #fff;
}
.lmn-footer .ln-btn--ghost {
  border-color: var(--ln-nav-border);
  color: var(--ln-nav-dim);
}
.lmn-footer .ln-btn--ghost:hover {
  color: var(--ln-nav-text);
  background: rgba(26,8,8,0.06);
}

/* =============================================================================
   RESPONSIVE — DESKTOP ≥ 1024px
============================================================================= */
@media (min-width: 1024px) {
  .locus-hamburger       { display: none !important; }
  .locus-mobile-nav      { display: none !important; }
  .locus-mobile-backdrop { display: none !important; }
}

/* =============================================================================
   RESPONSIVE — TABLET & MOBILE ≤ 1023px
============================================================================= */
@media (max-width: 1023px) {
  /* Hide desktop menu */
  .locus-nav__menu { display: none !important; }

  /* Hide BOTH desktop CTA buttons — only Request Demo stays on mobile via override below */
  .locus-nav__actions .ln-btn--ghost  { display: none !important; }
  .locus-nav__actions .ln-btn--primary { display: none !important; }

  /* Show hamburger */
  .locus-hamburger { display: flex; }

  /* Nav inner: logo left, actions right */
     .locus-nav__inner {
        justify-content: space-between;
        padding: 36px 16px;
    }

  .locus-nav__logo {
    display: flex !important;
    margin-right: 0;
  }

  .locus-nav__actions {
    margin-left: auto;
    gap: 8px;
  }
}

/* ≤ 768px — show Request Demo button alongside hamburger (only primary, not ghost) */
@media (max-width: 768px) {
  .locus-nav__actions .ln-btn--primary {
    display: inline-flex !important;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 100px;
  }
  /* Ghost "Apply for Pilot" stays hidden — never show on mobile */
  .locus-nav__actions .ln-btn--ghost { display: none !important; }
}

/* Tight tablet nav */
@media (max-width: 1200px) and (min-width: 1024px) {
  .locus-nav__btn,
  .locus-nav__link { font-size: 13px; padding: 7px 10px; }
}