/* assets/css/header.css */

/* Basic resets for header area */
.site-header { 
  background: #ffffff; 
  color: #1e2326; 
  border-bottom: 1px solid rgba(0,0,0,0.06); 
  position: relative;   /* ✅ supaya mobile-menu nempel di bawah header */
  z-index: 50;
}
.container { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 12px 16px; 
  box-sizing: border-box; 
}

/* Header layout: desktop grid (logo | center | menu) */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Logo */
.logo { display: block; width: 300px; height: auto; object-fit: contain; }

/* Center area (Daftar button centered) */
.center-area { display:flex; justify-content:center; align-items:center; }

/* Register button */
.btn { display:inline-block; text-decoration:none; font-weight:600; border-radius:8px; padding:10px 16px; box-sizing:border-box; }
.btn-register {
  background: linear-gradient(180deg, #c19f42, #e7c973);
  color: #fff;
  box-shadow: 0 2px 6px rgba(31,138,61,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn-register:active { transform: translateY(1px); }
.btn-register:focus { outline: 3px solid rgba(31,138,61,0.18); outline-offset: 2px; }

/* Desktop nav */
.main-nav .nav-list { list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center; }
.main-nav a { color: #1e2326; text-decoration:none; padding:8px 6px; font-weight:500; }
.main-nav a:hover, .main-nav a:focus { color: #c19f42; }

/* Menu toggle (hamburger) hidden on desktop */
.menu-toggle { display:none; background:transparent; border:0; cursor:pointer; padding:8px; color: #1e2326; }

/* Mobile menu (dropdown) */
.mobile-menu {
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(8,15,20,0.06);
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 100%; 
  z-index: 40;

  /* ✅ animasi slide */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.mobile-menu.show {
  max-height: 500px; /* cukup besar untuk semua menu */
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-list { list-style:none; margin:0; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.mobile-nav-list a { display:block; padding:10px 12px; text-decoration:none; color:#1e2326; border-radius:8px; font-weight:500; }
.mobile-nav-list a:hover, .mobile-nav-list a:focus { background: rgba(31,138,61,0.06); color:#c19f42; }
.mobile-register { background:#c19f42; color:#fff; text-align:center; padding:10px 12px; border-radius:8px; }

/* Responsive adjustments */
@media (max-width: 900px) {
  .container { padding: 10px 14px; }
  .logo { width: 220px; }
}

@media (max-width: 700px) {
  /* Collapse layout: use 3 columns -> logo | spacer | hamburger */
  .header-inner { grid-template-columns: auto 1fr auto; gap:8px; }
  .center-area { justify-content:flex-start; }
  .logo { width: 140px; }

  /* hide desktop nav, show hamburger */
  .main-nav { display:none; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
}

/* Small touch/click target improvements */
.menu-toggle svg { display:block; }
.menu-toggle:focus { outline: 3px solid rgba(0,0,0,0.06); outline-offset: 2px; }

/* Small utility */
a:focus { outline-offset: 3px; }

/* pastikan atribut hidden berfungsi */
.mobile-menu[hidden] {
  display: none !important;
}