/* =============================================================
   CURA CAPITAL — Header & Navigation Styles
   header.css
   ============================================================= */

/* ─── SITE HEADER ─────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  height: var(--header-height);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-fast);
}

.site-header.scrolled {
  box-shadow: var(--shadow-header);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-md);
}


/* ─── LOGO ────────────────────────────────────────────────── */

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo img,
.logo picture {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* TODO #54: Replace logo-light with a transparent-background version (partner-input-needed).
   Interim fix: mix-blend-mode removes white box in light mode; dark mode uses logo-dark already. */
.logo-light img,
.logo-light {
  mix-blend-mode: multiply;
}

[data-theme="dark"] .logo-light {
  display: none !important;
}
[data-theme="dark"] .logo-dark {
  display: block !important;
}


/* ─── PRIMARY NAV ─────────────────────────────────────────── */

.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.primary-nav a {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-body);
  border-radius: var(--border-radius-btn);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-primary);
  background-color: var(--bg-section);
}

.primary-nav a.active,
.primary-nav a[aria-current="page"] {
  color: var(--color-accent);
  background-color: var(--bg-section);
}

[data-theme="dark"] .primary-nav a.active,
[data-theme="dark"] .primary-nav a[aria-current="page"] {
  background-color: var(--bg-card);
}


/* ─── SERVICES DROPDOWN ───────────────────────────────────── */

.has-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-sm);
  z-index: 10;
  list-style: none;
}

.dropdown li { list-style: none; }

.dropdown a {
  padding: 9px 14px;
  font-size: 0.875rem;
  border-radius: 6px;
  display: block;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}


/* ─── HEADER ACTIONS (toggle + CTA + hamburger) ───────────── */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}


/* ─── THEME TOGGLE ────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-body);
  background-color: transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--bg-section);
  color: var(--color-primary);
}

/* Show sun in dark mode, moon in light mode */
.icon-moon { display: block; }
.icon-sun  { display: none;  }

[data-theme="dark"] .icon-moon { display: none;  }
[data-theme="dark"] .icon-sun  { display: block; }


/* ─── MOBILE HAMBURGER ────────────────────────────────────── */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: var(--border-radius-btn);
  border: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text-heading);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animate to X when open */
.nav-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
.nav-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─── NAV BACKDROP (mobile drawer overlay) ────────────────── */

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);           /* darker scrim — was 0.45 */
  -webkit-backdrop-filter: blur(3px);         /* blur the page behind the drawer */
  backdrop-filter: blur(3px);
  z-index: 98;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-open .nav-backdrop {
  display: block;
  opacity: 1;
}


/* ─── MOBILE LAYOUT ───────────────────────────────────────── */

/* ─── NAV CLOSE BUTTON (injected into drawer by JS) ──────────── */

.nav-close-btn {
  /* Hidden everywhere by default; mobile styles below make it visible */
  display: none;
}

.nav-drawer-footer {
  /* Hidden everywhere by default; only shown inside the mobile drawer */
  display: none;
}


@media (max-width: 1023px) {
  /* Right-side slide-in drawer — full-viewport height, overlaid on top
     of the header.  z-index:101 > header z-index:100 so the drawer is
     never clipped.  The in-drawer close button (injected by JS at the
     top of the list) gives users a clear dismiss target.
     CRITICAL: justify-content:flex-start overrides the desktop rule's
     justify-content:center.  Without this, flex items are vertically
     centred inside the full-height container — which (a) pushes the
     close button ~30% down from the top, and (b) makes overflowing
     items spill ABOVE the scroll origin so they can never be reached
     by scrolling up (a known flexbox overflow-with-centering bug).    */
  .primary-nav {
    display: flex;                       /* always in DOM for transition */
    flex-direction: column;
    justify-content: flex-start;         /* CRITICAL — see comment above */
    position: fixed;
    top: 0;                              /* full-viewport — overlays header */
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background-color: var(--bg-section); /* slightly greyer than page bg */
    border-left: 3px solid var(--color-primary);
    padding: 0;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.45);
    z-index: 101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;        /* stop scroll chaining to the page */
    overflow-anchor: none;               /* disable Chrome scroll-anchoring so
                                            programmatic scrollTop=0 is never
                                            silently undone by the browser    */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;                  /* hide from AT when closed */
  }

  .nav-open .primary-nav {
    transform: translateX(0);
    visibility: visible;
  }

  /* Drawer header bar — brand name on the left, × close on the right.
     The whole bar is a <button> so tapping anywhere in it closes the nav. */
  .nav-close-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-section));
    border: none;
    border-bottom: 2px solid var(--color-primary);
    color: var(--text-body);
    font-family: var(--font-primary);
    padding: 18px var(--space-md) 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
  }
  .nav-close-btn:hover { opacity: 0.75; }
  .nav-close-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Brand label on the left side of the header bar */
  .nav-drawer-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  /* Close indicator on the right side */
  .nav-close-x {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-btn);
  }

  .primary-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: var(--space-sm) 0;
  }

  .primary-nav > ul > li {
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
  }

  .primary-nav > ul > li:last-child { border-bottom: none; }

  .primary-nav a {
    font-size: 1rem;
    font-weight: 500;
    padding: 13px var(--space-md);
    border-radius: 0;
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    border-radius: var(--border-radius-btn);
  }

  /* Drawer footer — injected by JS, pushed to bottom with margin-top:auto */
  .nav-drawer-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: auto;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
  }

  .nav-drawer-footer-line {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-align: center;
    opacity: 0.7;
  }

  /* Dropdown collapses by default on mobile.
     JS adds .is-open to the parent <li> when the Services link is tapped.
     With sub-items hidden the nav fits in every viewport without scrolling,
     which makes scrollTop permanently 0 — the structural root-cause fix.
     !important overrides the desktop hover/focus-within rule (which has no
     !important) so touching the Services link never auto-opens the list.  */
  .dropdown {
    display: none !important;
    position: static;
    background: transparent;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-primary);
    border-radius: 0;
    padding: 4px 0 4px var(--space-md);
    margin: 0 var(--space-md);
  }

  /* Expanded: JS toggles this class on the parent <li> */
  .has-dropdown.is-open > .dropdown {
    display: block !important;
  }

  /* Expand / collapse indicator — "+" turns to "−" when open */
  .has-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--space-md); /* ensure the + icon has breathing room */
  }

  .has-dropdown > a::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 8px;
    color: var(--text-muted);
  }

  .has-dropdown.is-open > a::after {
    content: '\2212'; /* − minus sign */
  }

  .mobile-menu-toggle { display: flex; }

  /* Hide Book a Demo from header on smallest screens to save space */
  @media (max-width: 479px) {
    .header-actions .btn-primary { display: none; }
  }
}

@media (min-width: 1024px) {
  .mobile-menu-toggle { display: none; }
  .nav-backdrop { display: none !important; }
}