/* /public_html/assets/css/header.css */

/* Desktop-only nav wrappers (added in header.php) */
.nav-desktop{ display:flex; }

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,8,23,.10);
}

.nav-toggle-bars{
  width:22px;
  height:2px;
  background:#111827;
  border-radius:999px;
  position:relative;
  display:block;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#111827;
  border-radius:999px;
  transition: transform .12s ease, top .12s ease, opacity .12s ease;
}
.nav-toggle-bars::before{ top:-7px; }
.nav-toggle-bars::after{ top:7px; }

/* Animate to X when open */
.site-header.is-nav-open .nav-toggle-bars{ background: transparent; }
.site-header.is-nav-open .nav-toggle-bars::before{ top:0; transform: rotate(45deg); }
.site-header.is-nav-open .nav-toggle-bars::after{ top:0; transform: rotate(-45deg); }

/* Mobile dropdown panel */
.nav-mobile{
  display:none; /* hidden by default; shown when open on mobile */
  border-top:1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
}
.site-header.is-nav-open .nav-mobile{ display:block; }

.nav-mobile-inner{ padding: 12px 0 14px; }

.nav-mobile-links{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.nav-mobile-links a{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,23,42,.03);
  color: #0f172a;
  font-weight: 900;
}
.nav-mobile-links a.active{
  background: rgba(245,179,1,.18);
  border:1px solid rgba(245,179,1,.35);
}

/* -------------------------------------------------------
   Mobile behavior
   - menu button LEFT
   - logo centered
   - desktop navs hidden
--------------------------------------------------------*/
@media (max-width: 900px){

  /* keep topbar readable */
  .topbar-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .topbar-left, .topbar-right{
    width: 100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }

  /* hide desktop navs (you must add class="nav nav-left nav-desktop" and class="nav nav-right nav-desktop" in header.php) */
  .nav-desktop{ display:none !important; }

  /* show hamburger */
  .nav-toggle{ display:inline-flex; }

  /* HEADER GRID: left = menu, center = logo, right = spacer */
  .header-inner.header-split{
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
  }

  /* menu button on LEFT */
  .nav-toggle{
    justify-self: start;
    margin-left: 0;
  }

  /* logo centered */
  .logo-center{
    justify-content: center;
  }

  /* shrink logo */
  .logo-center a{ width: 84px; height: 84px; }
  .logo-center img{ width: 80px; height: 80px; }

  /* safety: hide right desktop nav if still present */
  .nav-right{ display:none !important; }
}