/* ── THEME INIT: run immediately to prevent flash ── */
(function () {
  var saved = localStorage.getItem('ntppa-theme');
  var sys = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', saved || sys);
})();

/* ── SHARED TOPBAR / NAVBAR / FOOTER / COOKIE / THEME ── */
(function () {
  const page = location.pathname.split('/').pop() || 'index.html';
  function isActive(href) {
    var bare = href.replace('.html', '');
    return (page === href || page === bare) ? 'curr' : '';
  }
  function isProgram() { return (page.startsWith('programs')) ? 'curr' : ''; }
  function isAbout()   { return (page.startsWith('about') || page.startsWith('faculty')) ? 'curr' : ''; }

  /* ─ SKIP NAV ─ */
  const skipNav = `<a class="skip-nav" href="#main-content">Skip to main content</a>`;

  /* ─ TOPBAR ─ */
  const topbar = `
<div class="topbar">
  <div class="container">
    <div class="topbar-inner">
      <a class="topbar-logo" href="index.html">
        <img src="https://newtampappa.com/uploads/settings/main/NTPPA-logo.png" alt="NTPPA Logo" onerror="this.style.display='none'">
        <div class="topbar-logo-text">
          <span class="topbar-brand-name">NEW TAMPA PIANO<br>AND PEDAGOGY ACADEMY</span>
          <small>Piano Lessons for Students of All Ages</small>
        </div>
      </a>
      <div class="topbar-right">
        <div class="topbar-links">
          <a href="contact.html">📅 Request Free Interview</a>
          <a href="contact.html">📍 Location &amp; Hours</a>
          <a class="topbar-login" href="https://clients.mindbodyonline.com/ASP/main_info.asp?studioid=186088&amp;tg=&amp;vt=&amp;lvl=&amp;stype=-2&amp;view=&amp;trn=0&amp;page=&amp;catid=&amp;prodid=&amp;date=7%2f3%2f2026&amp;classid=0&amp;prodGroupId=&amp;sSU=&amp;optForwardingLink=&amp;qParam=info&amp;justloggedin=&amp;nLgIn=&amp;pMode=0&amp;loc=1" target="_blank" rel="noopener noreferrer" title="Student Login (Mindbody)">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
            Login
          </a>
        </div>
        <div class="topbar-contact">
          <div class="topbar-addr">10691 Cross Creek Blvd<br>Tampa, FL 33647</div>
          <div class="topbar-phone">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.96 1.12 2 2 0 013 .84h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 8.14a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 15.17z"/></svg>
            <a href="tel:8139942452">(813) 994-2452</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>`;

  /* ─ NAVBAR ─ */
  const navbar = `
<nav class="navbar" id="mainNavbar" aria-label="Main navigation">
  <div class="container">
    <div class="navbar-inner">
      <div class="nav-links">
        <a class="${isActive('index.html')}" href="index.html">Home</a>
        <div class="nav-dd">
          <button type="button" class="nav-dd-toggle ${isProgram()}" aria-haspopup="true" aria-expanded="false">Programs <span class="dd-arrow" aria-hidden="true">▾</span></button>
          <div class="nav-dd-menu" role="menu">
            <a role="menuitem" href="programs.html#prep">Preparatory Programs</a>
            <a role="menuitem" href="programs.html#core">Core Programs</a>
            <a role="menuitem" href="programs.html#adult">Adult Programs</a>
            <a role="menuitem" href="programs.html#details">Program Details</a>
            <a role="menuitem" href="programs.html#calendar">Calendar</a>
            <a role="menuitem" href="programs.html#performance">Performance &amp; Examinations</a>
            <a role="menuitem" href="programs.html#summer">Summer Programs</a>
          </div>
        </div>
        <div class="nav-dd">
          <button type="button" class="nav-dd-toggle ${isAbout()}" aria-haspopup="true" aria-expanded="false">About Us <span class="dd-arrow" aria-hidden="true">▾</span></button>
          <div class="nav-dd-menu" role="menu">
            <a role="menuitem" href="about.html#why">Why NTPPA?</a>
            <a role="menuitem" href="about.html#founder">Meet the Founder</a>
            <a role="menuitem" href="about.html#philosophy">Teaching Philosophy</a>
            <a role="menuitem" href="about.html#faculty">Faculty</a>
            <a role="menuitem" href="about.html#reviews">Reviews</a>
          </div>
        </div>
        <a class="${isActive('gallery.html')}" href="gallery.html">Gallery</a>
        <a class="${isActive('press.html')}" href="press.html">Press</a>
        <a class="${isActive('blogs.html')}" href="blogs.html">Blogs</a>
        <a class="${isActive('career.html')}" href="career.html">Career</a>
        <a class="${isActive('contact.html')}" href="contact.html">Contact</a>
      </div>
      <div class="nav-right">
        <div class="nav-social">
          <a href="https://www.facebook.com/NewTampaPianoAndPedagogyAcademy" target="_blank" rel="noopener noreferrer" title="Facebook" aria-label="Facebook">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
          </a>
          <a href="https://www.youtube.com/channel/UCKks-ZU-jFzRdAet5u_9_Ww" target="_blank" rel="noopener noreferrer" title="YouTube" aria-label="YouTube">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 001.46 6.42 29 29 0 001 12a29 29 0 00.46 5.58 2.78 2.78 0 001.95 1.95C5.12 20 12 20 12 20s6.88 0 8.59-.47a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>
          </a>
        </div>
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode" title="Toggle theme">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
        </button>
        <button class="hbg" id="hbgBtn" aria-label="Open menu" aria-expanded="false" aria-controls="drawer"><span></span><span></span><span></span></button>
      </div>
    </div>
  </div>
</nav>
<div class="drawer" id="drawer" aria-hidden="true">
  <button class="drawer-close" id="drawerClose" aria-label="Close menu">✕</button>
  <a class="dl" href="index.html">Home</a>
  <div class="drawer-section-title">Programs</div>
  <div class="dl-sub">
    <a class="dl" href="programs.html#prep">Preparatory Programs</a>
    <a class="dl" href="programs.html#core">Core Programs</a>
    <a class="dl" href="programs.html#adult">Adult Programs</a>
    <a class="dl" href="programs.html#details">Program Details</a>
    <a class="dl" href="programs.html#calendar">Calendar</a>
    <a class="dl" href="programs.html#performance">Performance &amp; Examinations</a>
    <a class="dl" href="programs.html#summer">Summer Programs</a>
  </div>
  <div class="drawer-section-title">About Us</div>
  <div class="dl-sub">
    <a class="dl" href="about.html#why">Why NTPPA?</a>
    <a class="dl" href="about.html#founder">Meet the Founder</a>
    <a class="dl" href="about.html#philosophy">Teaching Philosophy</a>
    <a class="dl" href="about.html#faculty">Faculty</a>
    <a class="dl" href="about.html#reviews">Reviews</a>
  </div>
  <a class="dl" href="gallery.html">Gallery</a>
  <a class="dl" href="press.html">Press</a>
  <a class="dl" href="blogs.html">Blogs</a>
  <a class="dl" href="career.html">Career</a>
  <a class="dl" href="contact.html">Contact</a>
  <div class="drawer-cta">
    <a href="contact.html" class="btn btn-purple" style="text-align:center">Request Free Interview</a>
    <a href="https://clients.mindbodyonline.com/ASP/main_info.asp?studioid=186088&amp;tg=&amp;vt=&amp;lvl=&amp;stype=-2&amp;view=&amp;trn=0&amp;page=&amp;catid=&amp;prodid=&amp;date=7%2f3%2f2026&amp;classid=0&amp;prodGroupId=&amp;sSU=&amp;optForwardingLink=&amp;qParam=info&amp;justloggedin=&amp;nLgIn=&amp;pMode=0&amp;loc=1" target="_blank" rel="noopener noreferrer" class="btn btn-glass" style="text-align:center">🔐 Student Login</a>
    <a href="tel:8139942452" class="btn btn-glass" style="text-align:center">📞 (813) 994-2452</a>
    <div style="display:flex;align-items:center;gap:.5rem;padding-top:.5rem">
      <span style="font-size:12px;color:rgba(255,255,255,.35)">Theme:</span>
      <button class="theme-toggle" id="themeToggleDrawer" style="margin:0" aria-label="Toggle theme">
        <svg class="icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        <svg class="icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
      </button>
    </div>
  </div>
</div>`;

  /* ─ SCROLL TO TOP BUTTON ─ */
  const scrollTop = `<button class="scroll-top" id="scrollTopBtn" aria-label="Scroll to top" title="Back to top">↑</button>`;

  /* ─ FOOTER ─ */
  const footer = `
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div>
        <div class="footer-logo">
          <img src="https://newtampappa.com/uploads/settings/main/NTPPA-logo.png" alt="NTPPA" onerror="this.style.display='none'">
          <div>
            <div class="footer-logo-text">New Tampa Piano &amp; Pedagogy Academy</div>
            <small style="font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase">Piano Lessons for Students of All Ages</small>
          </div>
        </div>
        <p class="footer-desc">Professional piano education since 2011, led by Carnegie Hall performer Dr. Judith Jain and a faculty of degree-holding instructors. Serving families across New Tampa, Wesley Chapel, and Lutz.</p>
        <div class="footer-contact-item">📍 <a href="https://maps.google.com/?q=10691+Cross+Creek+Blvd+Tampa+FL+33647" target="_blank" rel="noopener noreferrer">10691 Cross Creek Blvd, Tampa, FL 33647</a></div>
        <div class="footer-contact-item">📞 <a href="tel:8139942452">(813) 994-2452</a></div>
        <div class="footer-contact-item">✉️ <a href="mailto:admin@NewTampaPPA.com">admin@NewTampaPPA.com</a></div>
        <div class="footer-socials" style="display:flex;gap:.6rem;margin-top:1rem">
          <a class="footer-social" href="https://www.facebook.com/NewTampaPianoAndPedagogyAcademy" target="_blank" rel="noopener noreferrer" aria-label="Facebook" title="Facebook">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
          </a>
          <a class="footer-social" href="https://www.youtube.com/channel/UCKks-ZU-jFzRdAet5u_9_Ww" target="_blank" rel="noopener noreferrer" aria-label="YouTube" title="YouTube">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 001.46 6.42 29 29 0 001 12a29 29 0 00.46 5.58 2.78 2.78 0 001.95 1.95C5.12 20 12 20 12 20s6.88 0 8.59-.47a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>
          </a>
        </div>
      </div>
      <div>
        <div class="footer-col-title">Programs</div>
        <ul class="footer-links">
          <li><a href="programs.html#prep">Preparatory Programs</a></li>
          <li><a href="programs.html#core">Core Programs</a></li>
          <li><a href="programs.html#adult">Adult Programs</a></li>
          <li><a href="programs.html#calendar">Academic Calendar</a></li>
          <li><a href="programs.html#performance">Performance &amp; Exams</a></li>
          <li><a href="programs.html#summer">Summer Programs</a></li>
        </ul>
      </div>
      <div>
        <div class="footer-col-title">About Us</div>
        <ul class="footer-links">
          <li><a href="about.html#why">Why NTPPA?</a></li>
          <li><a href="about.html#founder">Meet the Founder</a></li>
          <li><a href="about.html#philosophy">Teaching Philosophy</a></li>
          <li><a href="about.html#faculty">Faculty</a></li>
          <li><a href="about.html#reviews">Reviews</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="press.html">Press</a></li>
          <li><a href="blogs.html">Blog</a></li>
        </ul>
      </div>
      <div>
        <div class="footer-col-title">Studio Hours</div>
        <div style="font-size:13px;line-height:2.1;">
          <strong style="font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35)">Classes</strong><br>
          <span style="color:rgba(255,255,255,.55)">Mon–Fri: 1:00–9:00 PM</span><br>
          <span style="color:rgba(255,255,255,.55)">Sat: 8:00 AM–8:00 PM</span><br>
          <span style="color:rgba(255,255,255,.35)">Sun: Closed</span><br>
          <br>
          <strong style="font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35)">Registration</strong><br>
          <span style="color:rgba(255,255,255,.55)">Mon–Fri: 3:30–8:30 PM</span><br>
          <span style="color:rgba(255,255,255,.55)">Sat: 10:00 AM–4:00 PM</span>
        </div>
        <div style="margin-top:1.5rem">
          <a href="contact.html" class="btn btn-purple" style="font-size:12.5px;padding:.6rem 1.25rem">Request Free Interview</a>
        </div>
      </div>
    </div>
    <hr class="footer-hr">
    <div class="footer-bot">
      <div class="footer-copy">© 2026 New Tampa Piano and Pedagogy Academy, LLC. All rights reserved.</div>
      <div class="footer-copy footer-poweredby">Powered by <a href="https://expertaims.com" target="_blank" rel="noopener noreferrer" aria-label="ExpertAims — Consulting, Technology, Outsourcing"><img class="footer-eaims-logo" src="images/expertaims-logo.png" alt="ExpertAims" width="107" height="20" loading="lazy"></a></div>
    </div>
    <div class="footer-bar"></div>
  </div>
</footer>`;

  /* ─ COOKIE CONSENT BANNER ─ */
  const cookieBanner = `
<div class="cookie-banner" id="cookieBanner" role="dialog" aria-label="Cookie consent" aria-modal="true">
  <div class="container">
    <div class="cookie-inner">
      <div class="cookie-text">
        <strong>🍪 We use cookies</strong>
        <p>We use cookies to enhance your browsing experience and analyze site traffic. By accepting, you agree to our use of cookies. You can decline non-essential cookies.</p>
      </div>
      <div class="cookie-btns">
        <button class="btn btn-purple" id="cookieAccept" style="font-size:13px;padding:.6rem 1.35rem">Accept All</button>
        <button class="btn btn-glass" id="cookieDecline" style="font-size:13px;padding:.6rem 1.35rem">Decline</button>
      </div>
    </div>
  </div>
</div>`;

  /* ── INJECT SKIP NAV + HEADER ── */
  document.body.insertAdjacentHTML('afterbegin', skipNav + topbar + navbar);

  /* ── INJECT FOOTER + COOKIE BANNER + SCROLL TOP (deferred) ── */
  function injectFooter() {
    document.body.insertAdjacentHTML('beforeend', footer + cookieBanner + scrollTop);
    var mc = document.getElementById('main-content');
    if (mc && !mc.closest('main')) mc.setAttribute('role', 'main');
    initCookieBanner();
    initReveal();
    initScrollTop();
    activateHash();
    initTabAriaRoles();
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectFooter);
  } else {
    injectFooter();
  }

  /* ── DRAWER TOGGLE ── */
  var hbgBtn = document.getElementById('hbgBtn');
  hbgBtn.addEventListener('click', function () {
    var drawer = document.getElementById('drawer');
    var isOpen = drawer.classList.toggle('open');
    hbgBtn.setAttribute('aria-expanded', String(isOpen));
    drawer.setAttribute('aria-hidden', String(!isOpen));
    if (isOpen) {
      var first = drawer.querySelector('a, button');
      if (first) setTimeout(function () { first.focus(); }, 60);
    }
  });

  function closeDrawer() {
    var drawer = document.getElementById('drawer');
    var hbg   = document.getElementById('hbgBtn');
    drawer.classList.remove('open');
    drawer.setAttribute('aria-hidden', 'true');
    hbg.setAttribute('aria-expanded', 'false');
    hbg.focus();
  }

  document.addEventListener('click', function (e) {
    if (e.target.id === 'drawerClose' || e.target.closest('#drawerClose')) {
      closeDrawer();
    }
    var drawer = document.getElementById('drawer');
    if (e.target === drawer) closeDrawer();
  });

  /* ── FOCUS TRAP IN DRAWER ── */
  document.addEventListener('keydown', function (e) {
    var drawer = document.getElementById('drawer');
    if (!drawer || !drawer.classList.contains('open')) return;

    if (e.key === 'Escape') { closeDrawer(); return; }

    if (e.key === 'Tab') {
      var focusable = Array.from(drawer.querySelectorAll(
        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
      ));
      if (!focusable.length) return;
      var first = focusable[0];
      var last  = focusable[focusable.length - 1];
      if (e.shiftKey) {
        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
      } else {
        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
      }
    }
  });

  /* ── NAVBAR SCROLL EFFECT ── */
  var nb = document.getElementById('mainNavbar');
  if (nb) {
    window.addEventListener('scroll', function () {
      nb.classList.toggle('scrolled', window.scrollY > 60);
    }, { passive: true });
  }

  /* ── DROPDOWN KEYBOARD + ARIA SUPPORT ── */
  document.querySelectorAll('.nav-dd').forEach(function (dd) {
    var toggle = dd.querySelector('.nav-dd-toggle');
    var menu   = dd.querySelector('.nav-dd-menu');
    if (!toggle || !menu) return;

    dd.addEventListener('mouseenter', function () {
      toggle.setAttribute('aria-expanded', 'true');
    });
    dd.addEventListener('mouseleave', function () {
      toggle.setAttribute('aria-expanded', 'false');
    });

    /* Click / tap opens the menu (covers mouse-click and touch, where :hover is unreliable) */
    toggle.addEventListener('click', function (e) {
      e.preventDefault();
      var isOpen = dd.classList.contains('open');
      document.querySelectorAll('.nav-dd.open').forEach(function (other) {
        if (other !== dd) {
          other.classList.remove('open');
          var t = other.querySelector('.nav-dd-toggle');
          if (t) t.setAttribute('aria-expanded', 'false');
        }
      });
      if (isOpen) {
        dd.classList.remove('open');
        toggle.setAttribute('aria-expanded', 'false');
      } else {
        dd.classList.add('open');
        toggle.setAttribute('aria-expanded', 'true');
      }
    });

    toggle.addEventListener('keydown', function (e) {
      var isOpen = dd.classList.contains('open');
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        if (isOpen) {
          dd.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        } else {
          document.querySelectorAll('.nav-dd.open').forEach(function (other) {
            other.classList.remove('open');
            var t = other.querySelector('.nav-dd-toggle');
            if (t) t.setAttribute('aria-expanded', 'false');
          });
          dd.classList.add('open');
          toggle.setAttribute('aria-expanded', 'true');
          var first = menu.querySelector('[role="menuitem"]');
          if (first) setTimeout(function () { first.focus(); }, 20);
        }
      }
      if (e.key === 'Escape') {
        dd.classList.remove('open');
        toggle.setAttribute('aria-expanded', 'false');
      }
    });

    menu.addEventListener('keydown', function (e) {
      var items = Array.from(menu.querySelectorAll('[role="menuitem"]'));
      var idx   = items.indexOf(document.activeElement);
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        var next = items[(idx + 1) % items.length];
        if (next) next.focus();
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        var prev = items[(idx - 1 + items.length) % items.length];
        if (prev) prev.focus();
      }
      if (e.key === 'Escape') {
        dd.classList.remove('open');
        toggle.setAttribute('aria-expanded', 'false');
        toggle.focus();
      }
      if (e.key === 'Tab') {
        dd.classList.remove('open');
        toggle.setAttribute('aria-expanded', 'false');
      }
    });
  });

  document.addEventListener('click', function (e) {
    if (!e.target.closest('.nav-dd')) {
      document.querySelectorAll('.nav-dd').forEach(function (dd) {
        dd.classList.remove('open');
        var t = dd.querySelector('.nav-dd-toggle');
        if (t) t.setAttribute('aria-expanded', 'false');
      });
    }
  });

  /* ── THEME TOGGLE ── */
  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('ntppa-theme', theme);
    document.querySelectorAll('.theme-toggle').forEach(function (btn) {
      var moon = btn.querySelector('.icon-moon');
      var sun  = btn.querySelector('.icon-sun');
      if (moon) moon.style.display = theme === 'dark'  ? '' : 'none';
      if (sun)  sun.style.display  = theme === 'light' ? '' : 'none';
    });
    var dt = document.getElementById('themeToggleDrawer');
    if (dt) dt.setAttribute('title', theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode');
  }

  function toggleTheme() {
    var curr = document.documentElement.getAttribute('data-theme') || 'dark';
    applyTheme(curr === 'dark' ? 'light' : 'dark');
  }

  document.addEventListener('click', function (e) {
    if (e.target.id === 'themeToggle' || e.target.closest('#themeToggle') ||
        e.target.id === 'themeToggleDrawer' || e.target.closest('#themeToggleDrawer')) {
      toggleTheme();
    }
  });

  document.addEventListener('DOMContentLoaded', function () {
    var theme = document.documentElement.getAttribute('data-theme') || 'dark';
    applyTheme(theme);
    if (window.matchMedia) {
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
        if (!localStorage.getItem('ntppa-theme')) applyTheme(e.matches ? 'dark' : 'light');
      });
    }
  });

  /* ── SCROLL REVEAL ── */
  function initReveal() {
    var obs = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { e.target.classList.add('vis'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.07 });
    document.querySelectorAll('.reveal:not(.vis)').forEach(function (el) { obs.observe(el); });
  }

  /* ── SCROLL TO TOP ── */
  function initScrollTop() {
    var btn = document.getElementById('scrollTopBtn');
    if (!btn) return;
    window.addEventListener('scroll', function () {
      btn.classList.toggle('vis', window.scrollY > 400);
    }, { passive: true });
    btn.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  /* ── COOKIE CONSENT ── */
  function initCookieBanner() {
    if (localStorage.getItem('ntppa-cookies')) return;
    var banner = document.getElementById('cookieBanner');
    if (!banner) return;
    setTimeout(function () { banner.classList.add('show'); }, 1200);
    document.getElementById('cookieAccept').addEventListener('click', function () {
      localStorage.setItem('ntppa-cookies', 'accepted');
      banner.classList.remove('show');
    });
    document.getElementById('cookieDecline').addEventListener('click', function () {
      localStorage.setItem('ntppa-cookies', 'declined');
      banner.classList.remove('show');
    });
  }

  /* ── HASH ACTIVATION (programs / about tabs) ── */
  function activateHash() {
    var raw  = location.hash.slice(1);
    var hash = raw.replace(/[^a-z0-9\-_]/gi, '');
    if (!hash) return;
    var target = document.getElementById('sec-' + hash);
    if (target) {
      document.querySelectorAll('.sec-panel').forEach(function (p) { p.style.display = 'none'; });
      document.querySelectorAll('.sn').forEach(function (b) {
        b.classList.remove('active');
        b.setAttribute('aria-selected', 'false');
        b.setAttribute('tabindex', '-1');
      });
      target.style.display = 'block';
      var btn = document.querySelector('[data-sec="' + hash + '"]');
      if (btn) {
        btn.classList.add('active');
        btn.setAttribute('aria-selected', 'true');
        btn.removeAttribute('tabindex');
      }
      setTimeout(function () { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 80);
    }
  }

  /* ── TAB / SEC-PANEL ARIA INIT ── */
  function initTabAriaRoles() {
    var snContainer = document.querySelector('.subnav-inner');
    if (snContainer) {
      snContainer.setAttribute('role', 'tablist');
      document.querySelectorAll('.sn').forEach(function (b) {
        var sec = b.getAttribute('data-sec');
        if (!sec) return;
        b.setAttribute('role', 'tab');
        b.setAttribute('aria-controls', 'sec-' + sec);
        b.setAttribute('aria-selected', b.classList.contains('active') ? 'true' : 'false');
        if (!b.id) b.id = 'sn-' + sec;
        if (!b.classList.contains('active')) b.setAttribute('tabindex', '-1');
        var panel = document.getElementById('sec-' + sec);
        if (panel) {
          panel.setAttribute('role', 'tabpanel');
          panel.setAttribute('aria-labelledby', b.id);
          if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '0');
        }
      });
    }
    var tabContainer = document.querySelector('.tab-btns');
    if (tabContainer) {
      tabContainer.setAttribute('role', 'tablist');
      document.querySelectorAll('.tab-btn').forEach(function (b) {
        var m = (b.getAttribute('onclick') || '').match(/showTab\('([^']+)'/);
        if (!m) return;
        var id = m[1];
        b.setAttribute('role', 'tab');
        b.setAttribute('aria-controls', 'tab-' + id);
        b.setAttribute('aria-selected', b.classList.contains('active') ? 'true' : 'false');
        if (!b.classList.contains('active')) b.setAttribute('tabindex', '-1');
        if (!b.id) b.id = 'tabbtn-' + id;
        var panel = document.getElementById('tab-' + id);
        if (panel) {
          panel.setAttribute('role', 'tabpanel');
          panel.setAttribute('aria-labelledby', b.id);
          if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '0');
        }
      });
    }
  }
  window.addEventListener('hashchange', activateHash);

})();

/* ── GLOBAL TAB SWITCHER (sub-nav pages) ── */
function showSec(id, btn) {
  document.querySelectorAll('.sec-panel').forEach(function (p) { p.style.display = 'none'; });
  document.querySelectorAll('.sn').forEach(function (b) {
    b.classList.remove('active');
    b.setAttribute('aria-selected', 'false');
    b.setAttribute('tabindex', '-1');
  });
  document.getElementById('sec-' + id).style.display = 'block';
  btn.classList.add('active');
  btn.setAttribute('aria-selected', 'true');
  btn.removeAttribute('tabindex');
  history.replaceState(null, '', '#' + id);
}

/* ── GALLERY TABS ── */
function showTab(id, btn) {
  document.querySelectorAll('.tab-content').forEach(function (t) { t.classList.remove('active'); });
  document.querySelectorAll('.tab-btn').forEach(function (b) {
    b.classList.remove('active');
    b.setAttribute('aria-selected', 'false');
    b.setAttribute('tabindex', '-1');
  });
  document.getElementById('tab-' + id).classList.add('active');
  btn.classList.add('active');
  btn.setAttribute('aria-selected', 'true');
  btn.removeAttribute('tabindex');
}
