/* header.css (FULL FILE) */
:root{
  --havn-safe-top: env(safe-area-inset-top, 0px);
  --havn-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Always respect hidden attribute */
[hidden]{
  display:none !important;
}

/* Header base */
.havn-header {
  background: #ffffff;
  padding: calc(14px + var(--havn-safe-top)) 0 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  position: relative;
  z-index: 200;
}

.havn-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.havn-header * { min-width: 0; }

.havn-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.havn-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Desktop nav */
.havn-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}

.havn-nav-link {
  text-decoration: none;
  color: #475569;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.havn-nav-link:hover { color: #1e293b; }

/* Desktop actions */
.havn-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.havn-btn-primary {
  background: #2563eb;
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.havn-btn-primary:hover { background: #1d4ed8; }

.havn-btn-secondary {
  background: #e2e8f0;
  color: #1e293b;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.havn-btn-secondary:hover { background: #cbd5e1; }

.havn-btn-text{
  color:#2563eb;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.havn-btn-text:hover{
  background:#eff6ff;
  color:#1d4ed8;
}

/* Hamburger (enabled on mobile only) */
.havn-burger{
  display:none;
  width:44px;
  height:44px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.havn-burger-lines{
  width:18px;
  height:2px;
  background:#0f172a;
  position:relative;
  display:block;
}
.havn-burger-lines::before,
.havn-burger-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#0f172a;
}
.havn-burger-lines::before{ top:-6px; }
.havn-burger-lines::after{ top:6px; }

/* Mobile overlay + sheet (styles exist, but DOM is hidden by default via [hidden]) */
.havn-menu-backdrop{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.45);
  z-index: 12000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.havn-mobile-menu{
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:min(360px, 92vw);
  background:#ffffff;
  box-shadow: -18px 0 60px rgba(15,23,42,.18);
  z-index: 12001;
  padding: calc(14px + var(--havn-safe-top)) 14px calc(14px + var(--havn-safe-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
  transform: translateX(102%);
  transition: transform 180ms ease;
}

.havn-mobile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.havn-mobile-title{
  font-weight:900;
  color:#0f172a;
  font-size:14px;
  letter-spacing:.02em;
}

.havn-menu-close{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  cursor:pointer;
  font-weight:900;
}

.havn-mobile-actions-top{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 2px;
}

.havn-mobile-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.havn-mobile-link{
  text-decoration:none;
  color:#0f172a;
  font-weight:900;
  padding: 12px 12px;
  border-radius: 14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.havn-mobile-link:hover{
  background:#eef2ff;
  border-color: rgba(37,99,235,.18);
}

.havn-mobile-action{
  width:100%;
  border-radius: 999px;
  padding: 12px 14px;
}

/* Open state (JS toggles class) */
.havn-menu-open .havn-menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}
.havn-menu-open .havn-mobile-menu{
  transform: translateX(0);
}

/* ✅ Mobile behavior */
@media (max-width: 820px) {
  .havn-header{
    padding: calc(10px + var(--havn-safe-top)) 0 10px;
  }

  .havn-logo { height: 32px; }

  .havn-nav,
  .havn-actions{
    display:none;
  }

  .havn-burger{
    display:flex;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .havn-header-inner {
    gap: 10px;
    padding: 0 12px;
  }
  .havn-logo { height: 30px; }
}

/* Utility: lock body scroll when menu open */
body.havn-lock-scroll{
  overflow:hidden;
  touch-action:none;
}