/* ---------------- Root Variables ---------------- */
:root {
  --bg: #2b1408;
  --accent: #c47a2c;
  --text-light: #f1e3c1;
  --max-width: 1100px;
  --transition: 0.3s ease;
}

/* ---------------- Global Styles ---------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Merriweather", serif;
  background-color: var(--bg);
  color: var(--text-light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h3 {
  font-family: "Merriweather", serif;
  font-weight: 400;
}

h2 {
  font-size: 1.5rem;
  color: var(--accent);
}

/* ---------------- Header and Navigation ---------------- */
.site-header {
  background-color: rgba(20, 8, 4, 0.95);
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text {
  font-family: 'Noto Sans Balinese', sans-serif;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 2px;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

.logo-link {
  text-decoration: none; /* Remove underline */
  color: inherit;        /* Keep the text color of the h1 */
}

.logo-link:hover {
  color: var(--text-light); /* Optional hover effect */
}

/* Navigation Menu */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.main-nav a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: bold;
  transition: color var(--transition);
}

.main-nav a:hover {
  color: var(--accent);
}

/* Hamburger Button for Mobile */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
}

/* ---------------- Dropdown Menu ---------------- */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 15px;
  transition: var(--transition);
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 15px;
  transition: var(--transition);
  font-weight: bold;    /* Match other menu items */
  font-family: inherit; /* Make sure it uses Merriweather */
}

.dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;

  /* Color and transparency */
  background: rgba(20, 8, 4, 0.85);

  padding: 10px 0;
  border-radius: 8px;
  display: none;
  flex-direction: column;

  /* Border of the dropdown menu */
  border: 1px solid rgba(196,122,44,0.18);

  min-width: 150px;

  /* Dark box shadow */
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);

  z-index: 1000;
}

.dropdown-menu li a {
  color: var(--text-light);
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  transition: background 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
  background: rgba(196,122,44,0.12); /* Soft amber background tint */
  color: var(--accent); /* Brown/orange text color */
}

/* Desktop: open on hover */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .dropdown:hover .dropdown-menu {
    display: flex !important;
  }
}

/* ---------------- Hero Section ---------------- */
.hero {
  position: relative;
  height: 100vh;
  background: url("images/sacred_jungle_path.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 15, 5, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--text-light);
}

.hero h1 {
  font-size: 3rem;
  color: var(--accent);
}

.hero h2 {
  font-size: 2rem;
  color: var(--accent);
}

.hero p {
  font-size: 1.25rem;
  margin: 1rem 0;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--transition);
}

.btn:hover {
  background: #e6a14a;
}

/* ---------------- Hero The Path Section ---------------- */
.hero-the-path {
  background: url("images/serene_jungle_path.png") center/cover no-repeat;
  height: 100vh; /* full screen */
}

/* ---------------- Hero Lotus ---------------- */
.hero-lotus {
  background: url("images/lotus_awakening.png") center/cover no-repeat;
  height: 100vh; /* full screen */
}

/* ---------------- Content Section ---------------- */
.content {
  padding: 4rem 1rem;
  background: #3b1c0a;
  text-align: center;
}

.content .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-wide {
  width: 100%;
  max-width: var(--max-width);
  border-radius: 8px;
  margin-top: 2rem;
}

/* ---------------- Footer ---------------- */
footer {
  text-align: center;
  padding: 1rem;
  background: #1a0c05;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ---------------- Animations ---------------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger {
    display: block;
  }

  /* Mobile nav menu */
  .main-nav ul {
    flex-direction: column;
    background: rgba(20, 8, 4, 0.95);
    position: absolute;
    right: 1rem;
    top: 4rem;
    padding: 1rem;
    border-radius: 8px;
    display: none;
  }

  .main-nav ul.active {
    display: flex;
  }
}