<!-- HEADER -->
<header class="nuun-header">
  <div class="nuun-topbar">
    <div class="nuun-logo">
      <a href="/">
        <img src="/wp-content/uploads/2025/05/cropped-photo_2022-07-25_01-56-18-3.jpg" alt="NUUN Academy Logo">
        <span class="nuun-site-title">NUUN Academy</span>
      </a>
    </div>
    <div class="nuun-lang-switch">
      <a href="#" class="lang-btn" data-lang="en">EN</a>
      <a href="#" class="lang-btn" data-lang="am">AM</a>
      <a href="#" class="lang-btn" data-lang="or">OR</a>
    </div>
  </div>

  <nav class="nuun-navbar">
    <ul class="nuun-menu">
      <li><a data-en="Home" data-am="መነሻ" data-or="Mana" href="/">Home</a></li>
      <li class="has-submenu">
        <a data-en="About" data-am="ስለ እኛ" data-or="Waa’ee keenya" href="#">About</a>
        <ul class="submenu">
          <li><a data-en="Welcome" data-am="እንኳን ደህና መጡ" data-or="Baga nagaan dhuftan" href="/welcome-message">Welcome</a></li>
          <li><a data-en="Vision" data-am="ራዕይ" data-or="Mul’ata" href="/vision">Vision</a></li>
          <li><a data-en="Mission" data-am="ተልዕኮ" data-or="Dura bu’aa" href="/mission">Mission</a></li>
          <li><a data-en="Core Values" data-am="ዋና እሴቶች" data-or="Gatiiwwan" href="/values">Core Values</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a data-en="Staff" data-am="ሰራተኞች" data-or="Hojjettoota" href="#">Staff</a>
        <ul class="submenu">
          <li><a data-en="Login" data-am="ግባ" data-or="Seeni" href="/staff-login">Login</a></li>
          <li><a data-en="Classroom" data-am="ክፍል ትምህርት" data-or="Kutaa Barnootaa" href="/google-classroom">Classroom</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a data-en="Admissions" data-am="መመዝገብ" data-or="Galmee" href="#">Admissions</a>
        <ul class="submenu">
          <li class="has-submenu">
            <a data-en="Pre-school" data-am="ቅድመ ትምህርት" data-or="Duraa" href="#">Pre-school</a>
            <ul class="submenu">
              <li><a href="/daycare">Daycare</a></li>
              <li><a href="/kindergarten">Kindergarten</a></li>
            </ul>
          </li>
          <li class="has-submenu">
            <a href="#">Primary</a>
            <ul class="submenu">
              <li><a href="/grade-1">Grade 1</a></li>
              <li><a href="/grade-2">Grade 2</a></li>
              <li><a href="/grade-3">Grade 3</a></li>
              <li><a href="/grade-4">Grade 4</a></li>
              <li><a href="/grade-5">Grade 5</a></li>
              <li><a href="/grade-6">Grade 6</a></li>
              <li><a href="/grade-7">Grade 7</a></li>
              <li><a href="/grade-8">Grade 8</a></li>
            </ul>
          </li>
          <li class="has-submenu">
            <a href="#">Secondary</a>
            <ul class="submenu">
              <li><a href="/grade-9">Grade 9</a></li>
              <li><a href="/grade-10">Grade 10</a></li>
              <li><a href="/grade-11">Grade 11</a></li>
              <li><a href="/grade-12">Grade 12</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Students</a>
        <ul class="submenu">
          <li><a href="/courses">Courses</a></li>
          <li><a href="/assignments">Assignments</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Parents</a>
        <ul class="submenu">
          <li><a href="/faq">FAQ</a></li>
          <li><a href="/contact-form">Contact Form</a></li>
        </ul>
      </li>
      <li><a href="/contact">Contact Us</a></li>
    </ul>
  </nav>
</header>

<!-- FOOTER -->
<footer class="nuun-footer">
  <div class="footer-content">
    <strong>Contact us</strong><br>
    email: <a href="mailto:admin@nuunacademy.com">admin@nuunacademy.com</a><br><br>
    &copy; NUUN Academy 2025 | All rights reserved
  </div>
</footer>
		
<script>
  const langButtons = document.querySelectorAll('.lang-btn');
  langButtons.forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      const lang = btn.dataset.lang;
      document.querySelectorAll('[data-en]').forEach(el => {
        const text = el.getAttribute(`data-${lang}`);
        if (text) el.textContent = text;
      });
    });
  });
</script>

/* === Fix: Responsive logo and closer title-text === */
.title-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nuun-logo-img {
  max-height: 65px;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.title-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  flex: 1;
}

@media (max-width: 480px) {
  .title-left {
    gap: 4px;
    flex-direction: row;
  }

  .title-text {
    font-size: 0.85rem;
  }
}
