{# 1. Sticky Right Sidebar (z-[39]: above page content, below header/drawers/mega menu) #}
<div class="fixed right-0 top-1/2 -translate-y-1/2 z-[39] flex flex-col gap-2">

  <a href="#" class="group relative flex items-center justify-center w-11 h-11 bg-navy text-white hover:bg-teal hover:text-navy transition-all duration-200 border-b border-white/10 no-underline">
    <span class="material-symbols-outlined text-xl">help</span>
    <span class="absolute right-full mr-2 px-3 py-1.5 bg-navy text-white text-[11px] font-bold rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity shadow-lg">{{ 'Help Desk'|t }}</span>
  </a>

  <a href="#" class="group relative flex items-center justify-center w-11 h-11 bg-navy text-white hover:bg-teal hover:text-navy transition-all duration-200 border-b border-white/10 no-underline">
    <span class="material-symbols-outlined text-xl">contact_support</span>
    <span class="absolute right-full mr-2 px-3 py-1.5 bg-navy text-white text-[11px] font-bold rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity shadow-lg">{{ 'Contact'|t }}</span>
  </a>

  <div class="group relative w-11 h-11">
    <button type="button" aria-label="{{ 'Theme colours'|t }}" aria-haspopup="true"
            class="flex items-center justify-center w-11 h-11 bg-navy text-white hover:bg-teal hover:text-navy transition-all duration-200 border-t border-white/10 cursor-pointer">
      <span class="material-symbols-outlined text-xl">palette</span>
    </button>
    <div class="absolute right-full top-1/2 -translate-y-1/2 pr-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto transition-opacity">
      <div class="flex gap-1.5 p-2.5 bg-white rounded-lg shadow-xl border border-gray-100 w-max items-center">
        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mr-2">{{ 'Theme'|t }}</span>
        <button type="button" data-theme-set="navy"  aria-label="Navy theme"  title="Navy"  style="background:#0B4A8F" class="w-6 h-6 rounded-full border-2 border-transparent hover:scale-110 transition-transform aria-pressed:border-gray-700"></button>
        <button type="button" data-theme-set="red"   aria-label="Red theme"   title="Red"   style="background:#7f1d1d" class="w-6 h-6 rounded-full border-2 border-transparent hover:scale-110 transition-transform aria-pressed:border-gray-700"></button>
        <button type="button" data-theme-set="green" aria-label="Green theme" title="Green" style="background:#16613a" class="w-6 h-6 rounded-full border-2 border-transparent hover:scale-110 transition-transform aria-pressed:border-gray-700"></button>
        <button type="button" data-theme-set="blue"  aria-label="Blue theme"  title="Blue"  style="background:#1e3a8a" class="w-6 h-6 rounded-full border-2 border-transparent hover:scale-110 transition-transform aria-pressed:border-gray-700"></button>
      </div>
    </div>
  </div>

</div>

<header id="main-header" class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 py-4 shadow-sm">
  <div class="max-w-container mx-auto px-6 md:px-10 flex items-center justify-between gap-6">
    
    <div class="flex-shrink-0">
      {{ page.header }}
    </div>
    {% if page.header_search %}
      <div id="header-search" data-header-search
          class="flex-1 max-w-xl mx-4 opacity-0 pointer-events-none translate-y-2 transition-all duration-300">
        {{ page.header_search }}
      </div>
    {% endif %}
    {# Add the flex classes directly to the region wrapper inside Drupal's block layout #}
    <div class="flex items-center gap-3 shrink-0">
      {{ page.header_actions }}
    </div>

  </div>
</header>

<nav id="primary-nav-strip" class="bg-navy text-white text-xs font-bold tracking-wide relative z-40 border-t border-b border-navy-dark shadow-sm">
  <div class="max-w-container mx-auto px-4 md:px-10 flex items-center justify-between">
    
    <div class="flex-grow flex items-center overflow-x-auto hide-scrollbar whitespace-nowrap">
      {{ page.primary_nav }}
    </div>

    <div class="flex items-center gap-3 shrink-0 py-2 ml-4">
      {{ page.nav_actions }}
    </div>

  </div>
</nav>

{# 4. Live Updates Ticker #}
{% if page.ticker %}
  <div class="bg-white text-gray-700 text-[11px] font-semibold tracking-wide border-b border-gray-200 relative z-40 py-2 shadow-xs">
    <div class="max-w-container mx-auto px-6 md:px-10 flex items-center justify-between gap-4">
      {{ page.ticker }}
    </div>
  </div>
{% endif %}

{# 5. Main Content Area #}
{% if is_front %}
  <main id="main-content">
    {% if page.highlighted %}<div class="max-w-container mx-auto px-6 md:px-10">{{ page.highlighted }}</div>{% endif %}
    {{ page.content }}
  </main>
{% else %}
  <main id="main-content" class="py-10">
    <div class="max-w-container mx-auto px-6 md:px-10">
      
      {% if page.breadcrumb %}
        <div class="mb-6">
          {{ page.breadcrumb }}
        </div>
      {% endif %}

      {% if page.highlighted %}
        <div class="mb-6">
          {{ page.highlighted }}
        </div>
      {% endif %}

      <div class="bg-white rounded-3xl shadow-sm border border-gray-200 p-8">
        {{ page.content }}
      </div>

    </div>
  </main>
{% endif %}

{# 6. Footer #}
<footer id="main-footer" class="bg-navy text-white pt-20 pb-10">
  <div class="max-w-container mx-auto px-6 md:px-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-16 mb-16 pb-16 border-b border-white/10">
      <div>{{ page.footer_brand }}</div>
      <div>{{ page.footer_nav }}</div>
      <div>{{ page.footer_resources }}</div>
      <div>{{ page.footer_contact }}</div>
    </div>
    <div class="flex flex-col md:flex-row items-center justify-between gap-6">
      <div class="opacity-50 hover:opacity-100 transition-opacity">{{ page.footer_logos }}</div>
      <div class="flex flex-col items-center md:items-end gap-3">
        {{ page.footer_legal }}
        {{ page.footer_bottom }}
        <button type="button" onclick="window.scrollTo({top:0,behavior:'smooth'})"
          class="flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-white/30 hover:text-teal transition-colors bg-transparent border-0 p-0 cursor-pointer">
          <span>{{ 'Back to top'|t }}</span>
          <span class="material-symbols-outlined text-base">arrow_upward</span>
        </button>
      </div>
    </div>
  </div>
</footer>

{# 7. Hidden Drawers & Modals #}
{% if page.drawers %}
  {{ page.drawers }}
{% endif %}

<button id="floating-back-to-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" class="fixed bottom-6 right-6 z-40 bg-navy hover:bg-teal text-white hover:text-navy p-3 rounded-full shadow-2xl transition-all duration-300 opacity-0 pointer-events-none translate-y-4 hover:scale-110 flex items-center justify-center border border-white/20 cursor-pointer" title="Back to Top / वर जा" aria-label="Back to Top">
    <span class="material-symbols-outlined text-xl">arrow_upward</span>
</button>