/* Header layout */
:root{
  --max-w: 80rem; 
  --gap-6: 1.5rem; 
  --gap-4: 1rem;
  --h-header: 4rem; 
  --teal-600:#0d9488;
  --teal-700:#0f766e;
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --white:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --radius: .375rem;
}

.site-header{
  background-color: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.header-container {
  margin: 0 auto;
  max-width: var(--max-w);
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .header-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .header-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

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

.header-left {
  display: flex;
  align-items: center;
  gap: var(--gap-6);
}

.logo {
  display: block;
  color: var(--teal-600);
  text-decoration: none;
}

.logo-image {
  height: 2rem;
  width: auto;
  display: block;
}

/* Navigation */
.main-nav { display: none; }

@media (min-width: 768px) {
  .main-nav { display: block; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--gap-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--gray-500);
  text-decoration: none;
  font-size: .875rem;
  transition: color .2s ease;
}

.nav-link:hover { 
  color: rgba(107,114,128,.75); 
}

/* Actions area */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}

/* Ensure header buttons are not affected by page-specific global .btn rules AI to*/
.site-header .btn { margin-top: 0; }
.site-header .btn-primary { padding: .625rem 1.25rem; }

.btn{display:inline-block;font-size:.875rem;font-weight:500;border-radius:var(--radius);text-decoration:none;cursor:pointer}
.btn-primary{background-color:var(--teal-600);color:#fff;padding:.625rem 1.25rem;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background-color:var(--teal-700)}
.btn-secondary{background-color:var(--gray-100);color:var(--teal-600);padding:.625rem 1.25rem}

/* User menu */
.user-menu {
  position: relative;
}

.user-menu-button {
  background-color: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: 12rem;
  background: #fff;
  border-radius: .375rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  padding: .25rem;
  z-index: 20;
  display: none;
}

.user-menu-dropdown a {
  display: block;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: .25rem;
}

.user-menu-dropdown a:hover { 
  background-color: var(--gray-100); 
}

.user-menu.is-open .user-menu-dropdown { 
  display: block; 
}

/* Mobile toggle */
.mobile-toggle {
    background-color: var(--gray-100);
    border-radius: .25rem;
    padding: .5rem;
    color: var(--gray-600);
}

@media (min-width: 768px) {
    .mobile-toggle { 
    display: none; 
  }
}

/* Accessibility helpers incase kang daw */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden { 
  display: none !important; 
}