/* =================================
   KINHA HEADER
   ================================= */

:root {
  --maroon: #641c2b;
  --dark-maroon: #42121d;
  --gold: #c9a227;
  --light-gold: #e2c45a;
  --cream: #fff8e7;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;

  background: linear-gradient(135deg, #42121d 0%, #641c2b 100%);

  border-bottom: 2px solid var(--gold);

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

/* Container */
.header-container {
  max-width: 1200px;
  height: 72px;

  margin: 0 auto;
  padding: 0 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =================================
   LOGO
   ================================= */

.site-logo {
  color: var(--gold);
  text-decoration: none;

  font-family: Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 2px;

  white-space: nowrap;

  transition: 0.3s ease;
}

.site-logo:hover {
  color: var(--light-gold);
}

/* =================================
   DESKTOP NAVIGATION
   ================================= */

.main-navigation {
  display: flex;
  align-items: center;
  gap: 5px;
}

.main-navigation a {
  position: relative;

  color: var(--cream);
  text-decoration: none;

  padding: 12px 18px;

  font-size: 16px;
  font-weight: 600;

  border-radius: 6px;

  transition: 0.3s ease;
}

.main-navigation a:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

/* Gold underline */
.main-navigation a::after {
  content: '';

  position: absolute;
  left: 50%;
  bottom: 5px;

  width: 0;
  height: 2px;

  background: var(--gold);

  transform: translateX(-50%);

  transition: width 0.3s ease;
}

.main-navigation a:hover::after {
  width: 50%;
}

/* =================================
   MOBILE BUTTON
   ================================= */

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  padding: 9px;

  border: 1px solid var(--gold);
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.05);

  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;

  width: 22px;
  height: 2px;

  background: var(--gold);

  border-radius: 5px;

  transition: 0.3s ease;
}

/* =================================
   MOBILE
   ================================= */

@media (max-width: 768px) {
  .header-container {
    height: 64px;

    padding: 0 16px;

    position: relative;
  }

  .site-logo {
    font-size: 27px;
  }

  /* Show hamburger */
  .menu-toggle {
    display: flex;
  }

  /* Mobile navigation */
  .main-navigation {
    position: absolute;

    top: 64px;
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;

    gap: 0;

    padding: 8px 12px 14px;

    background: #42121d;

    border-top: 1px solid rgba(201, 162, 39, 0.25);
    border-bottom: 2px solid var(--gold);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);

    /* Hidden initially */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  /* Open menu */
  .main-navigation.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-navigation a {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    text-align: left;

    border-radius: 6px;

    font-size: 16px;
  }

  .main-navigation a:hover {
    background: rgba(201, 162, 39, 0.12);
  }

  .main-navigation a::after {
    display: none;
  }

  /* Hamburger animation */
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Small phones */
@media (max-width: 380px) {
  .header-container {
    padding: 0 12px;
  }

  .site-logo {
    font-size: 24px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }
}