<!DOCTYPE html>
<html lang="{{ current_language or settings.get('default_language', 'en') }}" dir="{{ 'rtl' if (current_language or settings.get('default_language', 'en')) in ('ar', 'he') else 'ltr' }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="{{ settings.get('theme_primary_color', '#818cf8') }}">

<!-- Title & Description -->
<title>{% block title %}{{ site_name }}{% endblock %}</title>
<meta name="description" content="{% block meta_description %}{{ site_tagline }}{% endblock %}">

<!-- Canonical URL -->
{% block canonical %}<link rel="canonical" href="{{ request.url }}" />{% endblock %}

<!-- Favicons -->
{% if settings.get('favicon_ico') %}
<link rel="shortcut icon" href="{{ settings.get('favicon_ico') }}" />
{% endif %}
{% if settings.get('favicon_96') %}
<link rel="icon" type="image/png" href="{{ settings.get('favicon_96') }}" sizes="96x96" />
{% endif %}
{% if settings.get('favicon_192') %}
<link rel="icon" type="image/png" href="{{ settings.get('favicon_192') }}" sizes="192x192" />
{% endif %}
{% if settings.get('favicon_svg') %}
<link rel="icon" type="image/svg+xml" href="{{ settings.get('favicon_svg') }}" />
{% endif %}
{% if settings.get('apple_touch_icon') %}
<link rel="apple-touch-icon" sizes="180x180" href="{{ settings.get('apple_touch_icon') }}" />
{% endif %}
{% if settings.get('site_webmanifest') %}
<link rel="manifest" href="{{ settings.get('site_webmanifest') }}" />
{% endif %}

<!-- Hreflang tags (for translations) -->
{% block hreflang %}{% endblock %}

<!-- RSS Feed discovery -->
{% set _feed_lang = current_language or settings.get('default_language', 'en') %}
<link rel="alternate" type="application/rss+xml" title="{{ site_name }} — RSS Feed" href="/feed/{{ _feed_lang }}">

<!-- Open Graph & Twitter -->
{% block meta_tags %}
<meta property="og:type" content="website">
<meta property="og:url" content="{{ request.url }}">
<meta property="og:title" content="{% block og_title %}{{ site_name }}{% endblock %}">
<meta property="og:description" content="{% block og_description %}{{ site_tagline }}{% endblock %}">
<meta property="og:site_name" content="{{ site_name }}">
{% if site_og_meta %}
<meta property="og:image" content="{{ site_og_meta[0] }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="{{ site_og_meta[1] }}">
{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% block twitter_title %}{{ site_name }}{% endblock %}">
<meta name="twitter:description" content="{% block twitter_description %}{{ site_tagline }}{% endblock %}">
{% if settings.get('twitter_image') or settings.get('og_image') %}
<meta name="twitter:image" content="{{ settings.get('twitter_image') or settings.get('og_image') }}">
{% endif %}
{% endblock %}

<!-- Google Analytics -->
{% if settings.get('google_analytics_id') %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.get('google_analytics_id') }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ settings.get("google_analytics_id") }}');
</script>
{% endif %}

<!-- Google Tag Manager -->
{% if settings.get('google_tag_manager_id') %}
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{ settings.get("google_tag_manager_id") }}');</script>
{% endif %}

<!-- Custom Analytics Code -->
{% if settings.get('custom_analytics_code') %}
{{ settings.get('custom_analytics_code') | safe }}
{% endif %}

<!-- Schema.org -->
{% block schema %}{% endblock %}

<!-- Theme: apply saved preference BEFORE render (prevents flash) -->
<script>
(function(){try{var s=localStorage.getItem('ap-theme');var d='{{ settings.get("default_theme_mode", "auto") }}';var useLight=false;if(s==='light'){useLight=true}else if(s==='dark'){useLight=false}else if(d==='light'){useLight=true}else if(d==='auto'){useLight=window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches}if(useLight){document.documentElement.classList.add('light-theme')}}catch(e){}})();
</script>

<!-- Design System CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/core.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/typography.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-builder-blocks.css') }}">

<!-- Theme (loaded from admin settings) -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/themes/' + settings.get('active_theme', 'stellar-origin') + '/theme.css') }}">

{% block extra_css %}{% endblock %}

{# User-supplied custom CSS — served as external stylesheet via /custom.css.
   Loaded last in cascade so it overrides theme without !important.
   Cache-busting via ?v=<hash> — URL changes when CSS content changes. #}
{% if settings.get('site_custom_css') %}
<link rel="stylesheet" href="{{ url_for('public_custom_css') }}?v={{ custom_css_version() }}">
{% endif %}
</head>
<body>
{% if current_user is defined and current_user.is_authenticated %}
  {% include 'components/admin-bar.html' %}
{% endif %}
{% if settings.get('google_tag_manager_id') %}
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ settings.get('google_tag_manager_id') }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
{% endif %}

<!-- ====================================================================
     HEADER
     ==================================================================== -->
{# Language-aware home URL: clean "/" for default language, "/?lang=XX" otherwise.
   Used by logo, desktop "Home" link, and mobile sidebar "Home" link to preserve
   the visitor's current language when navigating back to the homepage. #}
{% set _home_url = url_for('index') %}
{% if current_language and current_language != (default_language or 'en') %}
  {% set _home_url = _home_url + '?lang=' + current_language %}
{% endif %}
<header class="ap-header" role="banner">
  <div class="ap-container ap-header__inner">
    
    <!-- Logo -->
    <a href="{{ _home_url }}" class="ap-logo">
      {% if site_logo and '/' in site_logo %}
        {% if site_logo_image and site_logo_image.get_variants() and site_logo_image.get_variants().get('avif') %}
        {# Optimized: <picture> with AVIF + WebP + fallback,
           uses the media library variants of the uploaded logo.
           fetchpriority="high" because the logo is an LCP candidate. #}
        <picture>
          {% if site_logo_image.get_srcset('avif') %}
          <source type="image/avif"
                  srcset="{{ site_logo_image.get_srcset('avif') }}"
                  sizes="(max-width: 768px) 200px, 220px">
          {% endif %}
          {% if site_logo_image.get_srcset('webp') %}
          <source type="image/webp"
                  srcset="{{ site_logo_image.get_srcset('webp') }}"
                  sizes="(max-width: 768px) 200px, 220px">
          {% endif %}
          <img src="{{ site_logo }}" alt="{{ site_name }}"
               width="{{ site_logo_image.width }}"
               height="{{ site_logo_image.height }}"
               fetchpriority="high"
               decoding="async">
        </picture>
        {% else %}
        {# Fallback: old <img> behaviour for logos without variants
           (external URL, pre-variants upload, or SVG logo). #}
        <img src="{{ site_logo }}" alt="{{ site_name }}"
             {% if settings.get('site_logo_width') and settings.get('site_logo_height') %}
             width="{{ settings.get('site_logo_width') }}" 
             height="{{ settings.get('site_logo_height') }}"
             {% endif %}
             fetchpriority="high"
             decoding="async">
        {% endif %}
      {% else %}
        {{ site_name }}
      {% endif %}
    </a>
    
    <!-- Desktop Navigation -->
    <nav class="ap-nav" role="navigation" aria-label="Main navigation">
      {% if header_menu %}<a href="{{ _home_url }}" class="ap-nav__link">{{ pt('nav_home') }}</a>{% endif %}
      {% for item in header_menu %}
        {% if item.children is defined and item.children %}
          <div class="ap-nav__item ap-nav__item--has-dropdown">
            <a href="{{ item.url }}" class="ap-nav__link ap-nav__link--parent"
               {% if item.target is defined and item.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}
               aria-haspopup="true" aria-expanded="false">
              {{ item.label }}
              <svg class="ap-nav__dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
                <polyline points="1,1 5,5 9,1"></polyline>
              </svg>
            </a>
            <div class="ap-nav__dropdown" role="menu">
              {% for child in item.children %}
                <a href="{{ child.url }}" class="ap-nav__dropdown-item" role="menuitem"
                   {% if child.target is defined and child.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}>
                  {{ child.label }}
                </a>
              {% endfor %}
            </div>
          </div>
        {% else %}
          <a href="{{ item.url }}" class="ap-nav__link"
             {% if item.target is defined and item.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}>
            {{ item.label }}
          </a>
        {% endif %}
      {% endfor %}
    </nav>
    
    <!-- Right section: language + hamburger -->
    <div class="ap-header__right">
      
      <!-- Language Switcher — show when setting enabled AND versions exist -->
      {% if settings.get('show_language_switcher', 'true') == 'true' and all_versions is defined and all_versions|length > 0 %}
      <div class="ap-lang" role="navigation" aria-label="Language switcher">
        <button class="ap-lang__trigger" aria-expanded="false" aria-haspopup="true">
          {{ current_language|upper }}
          <svg class="ap-lang__arrow" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
            <polyline points="1,1 5,5 9,1"></polyline>
          </svg>
        </button>
        <div class="ap-lang__dropdown" role="menu">
          {% for version in all_versions %}
            {% if version.language != current_language %}
              {% if is_homepage is defined and is_homepage %}
                {% if version.language == (default_language or 'en') %}
                  {% set lang_url = '/' %}
                {% else %}
                  {% set lang_url = '/?lang=' + version.language %}
                {% endif %}
              {% else %}
                {% set lang_url = '/' + version.slug %}
              {% endif %}
              <a href="{{ lang_url }}" role="menuitem" class="ap-lang__option">
                {{ version.language|upper }}
              </a>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
      
      <!-- Theme Toggle (dark/light) -->
      <button class="ap-theme-toggle" aria-label="Toggle light/dark theme" title="Toggle theme">
        <!-- Sun icon (shown in dark mode → click to go light) -->
        <svg class="ap-theme-toggle__sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="5"></circle>
          <line x1="12" y1="1" x2="12" y2="3"></line>
          <line x1="12" y1="21" x2="12" y2="23"></line>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
          <line x1="1" y1="12" x2="3" y2="12"></line>
          <line x1="21" y1="12" x2="23" y2="12"></line>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
        </svg>
        <!-- Moon icon (shown in light mode → click to go dark) -->
        <svg class="ap-theme-toggle__moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
      </button>
      
      <!-- Hamburger (mobile) -->
      {% if header_menu %}
      <button class="ap-hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-sidebar">
        <span class="ap-hamburger__line"></span>
        <span class="ap-hamburger__line"></span>
        <span class="ap-hamburger__line"></span>
      </button>
      {% endif %}
      
    </div>
  </div>
</header>

<!-- ====================================================================
     MOBILE SIDEBAR
     ==================================================================== -->
{% if header_menu %}
<div class="ap-sidebar-overlay" aria-hidden="true"></div>
<aside class="ap-sidebar" id="mobile-sidebar" role="dialog" aria-label="Mobile navigation">
  
  <div class="ap-sidebar__header">
    <span class="ap-sidebar__title">{{ site_name }}</span>
    <button class="ap-sidebar__close" aria-label="Close menu">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>
  
  <div class="ap-sidebar__nav">
    {% if header_menu %}<a href="{{ _home_url }}" class="ap-sidebar__link">{{ pt('nav_home') }}</a>{% endif %}
    {% for item in header_menu %}
      {% if item.children is defined and item.children %}
        <button class="ap-sidebar__link ap-sidebar__link--parent" aria-expanded="false" aria-controls="sidebar-submenu-{{ loop.index }}">
          {{ item.label }}
          <svg class="ap-sidebar__submenu-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
            <polyline points="1,1 5,5 9,1"></polyline>
          </svg>
        </button>
        <div class="ap-sidebar__submenu" id="sidebar-submenu-{{ loop.index }}" hidden>
          {% for child in item.children %}
            <a href="{{ child.url }}" class="ap-sidebar__submenu-item"
               {% if child.target is defined and child.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}>
              {{ child.label }}
            </a>
          {% endfor %}
        </div>
      {% else %}
        <a href="{{ item.url }}" class="ap-sidebar__link"
           {% if item.target is defined and item.target == '_blank' %}target="_blank" rel="noopener noreferrer"{% endif %}>
          {{ item.label }}
        </a>
      {% endif %}
    {% endfor %}
  </div><!-- /.ap-sidebar__nav -->
</aside>
{% endif %}


<!-- ====================================================================
     MAIN CONTENT
     ==================================================================== -->
<main class="ap-main" role="main">
  <div class="ap-container">
    {% block content %}{% endblock %}
  </div>
</main>


<!-- ====================================================================
     FOOTER
     ==================================================================== -->
<footer class="ap-footer" role="contentinfo">
  <div class="ap-container ap-footer__inner">
    
    <p class="ap-footer__copyright">© {{ current_year }} {{ settings.get('footer_copyright', site_name) }}. {{ pt('rights') }}</p>
    {% if settings.get('footer_license') %}
    <p class="ap-footer__license">{{ settings.get('footer_license') }}</p>
    {% endif %}
    
    <!-- Social Icons -->
    {% set socials = [
        ('social_facebook',  'Facebook',  'facebook',  'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'),
        ('social_twitter',   'X',         'twitter',   'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'),
        ('social_linkedin',  'LinkedIn',  'linkedin',  'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'),
        ('social_github',    'GitHub',    'github',    'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'),
        ('social_youtube',   'YouTube',   'youtube',   'M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'),
        ('social_instagram', 'Instagram', 'instagram', 'M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 100-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 11-2.882 0 1.441 1.441 0 012.882 0z')
    ] %}
    {% set has_social = [] %}
    {% for key, name, slug, path in socials %}
      {% if settings.get(key) %}{% if has_social.append(1) %}{% endif %}{% endif %}
    {% endfor %}
    
    {% if has_social %}
    <div class="ap-footer__socials">
      {% for key, name, slug, path in socials %}
        {% if settings.get(key) %}
        <a href="{{ settings.get(key) }}" target="_blank" rel="noopener noreferrer" 
           title="{{ name }}" class="ap-social-icon" data-social="{{ slug }}">
          <svg viewBox="0 0 24 24"><path d="{{ path }}"/></svg>
        </a>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}
    
    {% if settings.get('footer_additional') %}
    <div class="ap-footer__additional">
      {{ settings.get('footer_additional') | safe }}
    </div>
    {% endif %}
    
    {% if footer_menu %}
    <nav class="ap-footer__nav" aria-label="Footer navigation">
      {% for item in footer_menu %}
        <a href="{{ item.url }}">{{ item.label }}</a>
        {% if not loop.last %}<span class="ap-footer__nav-sep">·</span>{% endif %}
      {% endfor %}
    </nav>
    {% endif %}
    
    {% if not is_licensed %}
    <p class="ap-footer__powered">
      {{ pt('powered_by') }} <a href="https://aliothpress.com" target="_blank" rel="noopener">AliothPress</a>
    </p>
    {% endif %}
    
  </div>
</footer>

<!-- Social icon hover colors -->
<script>
(function(){
  var c={facebook:'#1877F2',twitter:'#000',linkedin:'#0A66C2',github:getComputedStyle(document.documentElement).getPropertyValue('--ap-color-primary').trim()||'#818cf8',youtube:'#FF0000',instagram:'#E4405F'};
  document.querySelectorAll('.ap-social-icon').forEach(function(el){
    var k=el.dataset.social,clr=c[k];
    if(!clr)return;
    el.addEventListener('mouseenter',function(){el.style.background=clr;el.style.color='#fff';});
    el.addEventListener('mouseleave',function(){el.style.background='';el.style.color='';});
  });
})();
</script>

<!-- Dropdown nav & sidebar submenu JS -->
<script>
(function(){
  // ── Desktop dropdown menus ─────────────────────────────────────────────────
  var dropdowns = document.querySelectorAll('.ap-nav__item--has-dropdown');
  dropdowns.forEach(function(item){
    var trigger = item.querySelector('.ap-nav__link--parent');
    var menu    = item.querySelector('.ap-nav__dropdown');
    if(!trigger || !menu) return;

    function open(){
      menu.classList.add('is-open');
      trigger.setAttribute('aria-expanded','true');
    }
    function close(){
      menu.classList.remove('is-open');
      trigger.setAttribute('aria-expanded','false');
    }

    // Hover (desktop)
    item.addEventListener('mouseenter', open);
    item.addEventListener('mouseleave', close);

    // Keyboard / click toggle
    trigger.addEventListener('click', function(e){
      if(menu.classList.contains('is-open')){ close(); } else { open(); }
    });

    // Close on Escape
    item.addEventListener('keydown', function(e){
      if(e.key==='Escape'){ close(); trigger.focus(); }
    });
  });

  // Close all dropdowns when clicking outside
  document.addEventListener('click', function(e){
    dropdowns.forEach(function(item){
      if(!item.contains(e.target)){
        var menu    = item.querySelector('.ap-nav__dropdown');
        var trigger = item.querySelector('.ap-nav__link--parent');
        if(menu && menu.classList.contains('is-open')){
          menu.classList.remove('is-open');
          if(trigger) trigger.setAttribute('aria-expanded','false');
        }
      }
    });
  });

  // ── Mobile sidebar submenus ────────────────────────────────────────────────
  var parentBtns = document.querySelectorAll('.ap-sidebar__link--parent');
  parentBtns.forEach(function(btn){
    var subId = btn.getAttribute('aria-controls');
    var sub   = subId ? document.getElementById(subId) : null;
    if(!sub) return;
    btn.addEventListener('click', function(){
      var isOpen = !sub.hidden;
      sub.hidden = isOpen;
      btn.setAttribute('aria-expanded', String(!isOpen));
      btn.classList.toggle('is-open', !isOpen);
    });
  });
})();
</script>
<!-- Public site JS -->
<script src="{{ url_for('static', filename='js/public.js') }}"></script>
<script src="{{ url_for('static', filename='js/page-builder-public.js') }}"></script>
<!-- Prism.js — syntax highlighting for code blocks (no theme CSS — colors defined in page-builder-blocks.css) -->
<script src="{{ url_for('static', filename='js/prism/prism.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/prism/plugins/autoloader/prism-autoloader.min.js') }}" data-autoloader-path="/static/js/prism/components/" defer></script>
{% block extra_js %}{% endblock %}
</body>
</html>
