/* ===================================================
   COMPONENTS — buttons, header, nav, hamburger
   =================================================== */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  padding: .875rem 1.625rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
  text-decoration: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  background: var(--olive-dark);
  color: var(--cream-light);
  border-color: var(--olive-dark);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--olive);
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-primary:active { transform: translateY(0); }

.btn-lg {
  font-size: 1.0625rem;
  padding: 1.0625rem 2rem;
}

/* ===================================================
   HEADER
   =================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t);
}
.site-header.scrolled {
  background: rgba(248,244,234,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: var(--header-height);
}

/* Logo */
.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 44px; width: auto; }

/* Desktop nav */
.main-nav { display: none; flex: 1; }
@media (min-width: 1024px) { .main-nav { display: flex; } }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.nav-link {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  position: relative;
  transition: color var(--t);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: var(--s3); right: var(--s3);
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--t);
}
.nav-link:hover,
.nav-link.active { color: var(--olive-dark); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
}

.btn-employee {
  display: none;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-medium);
  padding: var(--s2) var(--s4);
  border: 1.5px solid var(--warm-beige);
  border-radius: var(--r-full);
  transition: color var(--t), border-color var(--t), background var(--t);
  white-space: nowrap;
}
.btn-employee:hover {
  color: var(--olive-dark);
  border-color: var(--olive);
  background: rgba(122,125,82,.06);
}
@media (min-width: 768px) { .btn-employee { display: inline-flex; align-items: center; } }

/* ── Hamburger ── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s2);
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  transition: background var(--t);
}
.hamburger:hover { background: rgba(92,94,60,.07); }

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--olive-dark);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
  transform-origin: center;
}

.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) { .hamburger { display: none; } }

/* ── Mobile menu ── */
.mobile-menu {
  position: absolute;
  top: var(--header-height);
  left: 0; right: 0;
  background: rgba(248,244,234,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--s4) 0 var(--s6);
  border-bottom: 1px solid var(--warm-beige);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s4);
}

.mobile-nav-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
  padding: var(--s4) var(--s4);
  border-radius: var(--r-md);
  border-bottom: 1px solid transparent;
  transition: background var(--t), color var(--t);
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: rgba(196,163,90,.1);
  color: var(--olive-dark);
}

.mobile-employee-link {
  margin-top: var(--s4);
  color: var(--text-medium);
  border-top: 1px solid var(--warm-beige);
  padding-top: calc(var(--s4) + var(--s4));
}