<style>
.navbar-redd { background: #fff; }
.navbar-redd .nav-link {
  color: var(--green-800);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 .35rem;
  border-bottom: 2px solid transparent;
  padding-bottom: .4rem;
}
.navbar-redd .nav-link.active,
.navbar-redd .nav-link:hover {
  color: var(--green-900);
  border-bottom-color: var(--green-800);
}
.navbar-redd .dropdown-item {
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem 1rem;
}
.navbar-redd .dropdown-item:hover,
.navbar-redd .dropdown-item:focus {
  background: var(--green-100);
  color: var(--green-900);
}
.navbar-redd .dropdown-menu {
  border: 0;
  box-shadow: 0 8px 24px rgba(46,74,53,.12);
  border-radius: .75rem;
  padding: .5rem 0;
  margin-top: 0;
  top: calc(100% - 2px);
}
.navbar-redd .dropdown:hover > .dropdown-menu {
  display: block;
  animation: fadeIn .15s ease;
}
.navbar-redd .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.navbar-redd .dropdown-toggle::after { font-size: .75rem; margin-left: .4em; }
.search-pill {
  background: #fff;
  border: 1px solid #e2ddd0;
  border-radius: 50rem;
  padding: .3rem .9rem;
  max-width: 190px;
}
.search-pill input {
  border: 0; outline: 0; background: transparent;
  width: 100%; font-size: .85rem; color: var(--ink);
}
.w3c-badge {
  width: 40px; height: 40px;
  border: 1px solid #d8d2c2; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #1a3e8c; font-size: .7rem; background: #fff;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .search-pill { max-width: 100%; }
  .w3c-badge { margin-top: .5rem; }
  .navbar-redd .dropdown:hover > .dropdown-menu { display: none; }
  .navbar-redd .dropdown.show > .dropdown-menu { display: block; }
  .navbar-redd .nav-link { border-bottom: 0; border-left: 3px solid transparent; padding-left: .5rem; }
  .navbar-redd .nav-link.active,
  .navbar-redd .nav-link:hover { border-bottom-color: transparent; border-left-color: var(--green-800); }
}

.navbar-redd .dropdown-item.active { background: var(--green-100); color: var(--green-900); font-weight: 700; }
</style>

<nav class="navbar navbar-expand-lg navbar-redd py-2 sticky-top shadow-sm">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="/">
      <img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav mx-auto align-items-lg-center">
        @foreach($menuTree as $item)
          @php
            $hasChildren = !empty($item['children']);
            $itemLink = $item['menu_link'] ?? '#';
            $currentUrl = request()->fullUrl();
            $isActive = $currentUrl === url($itemLink) || ($itemLink === '/' && request()->path() === '');
            if ($hasChildren && !$isActive) {
                foreach ($item['children'] as $child) {
                    $cl = $child['menu_link'] ?? '#';
                    if ($cl !== '#' && $currentUrl === url($cl)) { $isActive = true; break; }
                }
            }
          @endphp
          @if($hasChildren)
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle{{ $isActive ? ' active' : '' }}" href="{{ $itemLink }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                {{ $item['menu_name'] }}
              </a>
              <ul class="dropdown-menu">
                @foreach($item['children'] as $child)
                  <li><a class="dropdown-item{{ $child['menu_link'] && $currentUrl === url($child['menu_link']) ? ' active' : '' }}" href="{{ $child['menu_link'] ?? '#' }}">{{ $child['menu_name'] }}</a></li>
                @endforeach
              </ul>
            </li>
          @else
            <li class="nav-item">
              <a class="nav-link {{ $isActive ? 'active' : '' }}" href="{{ $itemLink }}">
                {{ $item['menu_name'] }}
              </a>
            </li>
          @endif
        @endforeach
      </ul>
      <form class="search-pill d-flex align-items-center me-lg-3 my-2 my-lg-0" role="search" method="GET" action="/redd-plus/search">
        <input type="search" name="q" placeholder="Search..." aria-label="Search">
        <i class="bi bi-search text-muted"></i>
      </form>
      
 <div class="w3c-wrap">
  <a href="#" class="w3c-badge" id="w3cBtn">W3C</a>
  <div id="w3cPanel" class="w3c-panel">
    <div class="w3c-head">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
      <span>Accessibility</span>
      <button id="w3cX">&times;</button>
    </div>
    <div class="w3c-body">
      <div class="w3c-grp">
        <div class="w3c-lbl">Font Size</div>
        <div class="w3c-row">
          <button class="w3c-b" data-w="fd">A-</button>
          <button class="w3c-b" data-w="fr">A</button>
          <button class="w3c-b" data-w="fi">A+</button>
        </div>
      </div>
      <div class="w3c-grp"><button class="w3c-a" data-w="ct"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20V2z" fill="currentColor"/></svg> High Contrast</button></div>
      <div class="w3c-grp"><button class="w3c-a" data-w="gy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg> Grayscale</button></div>
      <div class="w3c-grp"><button class="w3c-a" data-w="iv"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 3v18"/></svg> Invert Colors</button></div>
      <div class="w3c-grp"><button class="w3c-a" data-w="hl"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> Highlight Links</button></div>
      <div class="w3c-grp"><button class="w3c-r" data-w="rs"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> Reset</button></div>
    </div>
  </div>
</div>
<style>
.w3c-wrap{position:relative;display:inline-block;vertical-align:middle}
.w3c-panel{display:none;position:absolute;top:100%;right:0;z-index:99999;width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,0.12);margin-top:8px;font-family:Inter,system-ui,sans-serif}
.w3c-panel.on{display:block}
.w3c-head{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1c294c;color:#fff;border-radius:10px 10px 0 0;font-weight:600;font-size:13px}
.w3c-head svg{flex-shrink:0}
.w3c-head span{flex:1}
.w3c-head button{margin-left:auto;background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0 2px;line-height:1}
.w3c-body{padding:10px 14px 14px}
.w3c-grp{margin-bottom:7px}
.w3c-lbl{font-size:10px;font-weight:600;color:#64748b;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.w3c-row{display:flex;gap:3px}
.w3c-row .w3c-b{flex:1;padding:5px 0;border:1px solid #e2e8f0;border-radius:5px;background:#fff;color:#334155;font-size:11px;font-weight:600;cursor:pointer}
.w3c-row .w3c-b.on{background:#1c294c;color:#fff;border-color:#1c294c}
.w3c-a{width:100%;display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:5px;background:#fff;color:#334155;font-size:11px;font-weight:500;cursor:pointer;text-align:left}
.w3c-a svg{flex-shrink:0;width:14px;height:14px;color:#1c294c}
.w3c-a.on{background:#1c294c;color:#fff;border-color:#1c294c}
.w3c-a.on svg{color:#fff}
.w3c-r{width:100%;display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:5px;background:#fef2f2;color:#c04849;font-size:11px;font-weight:500;cursor:pointer;text-align:left}
.w3c-r svg{flex-shrink:0;color:#c04849}
html.access-font-sm{zoom:.85}html.access-font-lg{zoom:1.25}html.access-contrast,html.access-contrast body{background:#000!important;color:#fff!important}html.access-contrast a{color:#ff0!important}html.access-grayscale{filter:grayscale(1)}html.access-invert{filter:invert(1) hue-rotate(180deg)}html.access-highlight-links a{text-decoration:underline!important;background:#ff0!important;color:#000!important}
</style>
<script>
(function(){
  var K="accessibility_settings";
  function g(){try{return JSON.parse(localStorage.getItem(K))||{}}catch(e){return{}}}
  function s(v){localStorage.setItem(K,JSON.stringify(v))}
  function ap(v){
    var h=document.documentElement;
    h.classList.remove("access-font-sm","access-font-lg","access-contrast","access-grayscale","access-invert","access-highlight-links");
    if(v.fontSize==="sm")h.classList.add("access-font-sm");
    if(v.fontSize==="lg")h.classList.add("access-font-lg");
    if(v.contrast)h.classList.add("access-contrast");
    if(v.grayscale)h.classList.add("access-grayscale");
    if(v.invert)h.classList.add("access-invert");
    if(v.highlightLinks)h.classList.add("access-highlight-links");
  }
  function ui(v){
    var p=document.querySelector(".w3c-body");if(!p)return;
    p.querySelectorAll(".w3c-b").forEach(function(b){b.classList.remove("on")});
    var m=v.fontSize||"md";
    if(m==="sm"){var e=p.querySelector("[data-w=fd]");if(e)e.classList.add("on")}
    else if(m==="lg"){var e=p.querySelector("[data-w=fi]");if(e)e.classList.add("on")}
    else{var e=p.querySelector("[data-w=fr]");if(e)e.classList.add("on")}
    p.querySelectorAll(".w3c-a").forEach(function(b){b.classList.remove("on")});
    if(v.contrast){var e=p.querySelector("[data-w=ct]");if(e)e.classList.add("on")}
    if(v.grayscale){var e=p.querySelector("[data-w=gy]");if(e)e.classList.add("on")}
    if(v.invert){var e=p.querySelector("[data-w=iv]");if(e)e.classList.add("on")}
    if(v.highlightLinks){var e=p.querySelector("[data-w=hl]");if(e)e.classList.add("on")}
  }
  function hdl(a){
    var v=g();
    switch(a){
      case"fd":v.fontSize=v.fontSize==="sm"?"md":"sm";break;
      case"fi":v.fontSize=v.fontSize==="lg"?"md":"lg";break;
      case"fr":v.fontSize="md";break;
      case"ct":v.contrast=!v.contrast;break;
      case"gy":v.grayscale=!v.grayscale;break;
      case"iv":v.invert=!v.invert;break;
      case"hl":v.highlightLinks=!v.highlightLinks;break;
      case"rs":localStorage.removeItem(K);v={};ap(v);ui(v);return;
    }ap(v);s(v);ui(v);
  }
  function tog(s){
    var p=document.getElementById("w3cPanel");
    if(s===undefined)s=!p.classList.contains("on");
    p.classList.toggle("on",s);
  }
  var v=g();ap(v);ui(v);
  document.getElementById("w3cBtn").addEventListener("click",function(e){e.preventDefault();tog()});
  document.getElementById("w3cX").addEventListener("click",function(){tog(false)});
  document.querySelectorAll(".w3c-body [data-w]").forEach(function(b){b.addEventListener("click",function(e){e.stopPropagation();hdl(this.dataset.w)})});
  document.addEventListener("keydown",function(e){if(e.key==="Escape")tog(false)});
  document.addEventListener("click",function(e){
    var w=document.querySelector(".w3c-wrap");
    if(w&&!w.contains(e.target))tog(false);
  });
})();
</script>
  </div>
</nav>