<?php
/**
 * Header template
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>

  <style>
    /* ===========================
       STICKY HEADER (NO CUT)
       =========================== */
    :root{
      --primary: #032f70;
      --secondary: #d87d00;
    }

    /* Header sticky, sem fixed-top */
    #site-header{
      position: sticky;
      top: 0;                        /* fica colado ao topo */
      z-index: 10010;                /* acima do conteúdo */
      background: #fff;
      box-shadow: none;
      transition: box-shadow .25s ease, background-color .25s ease, height .25s ease;
      height: 100px;                 /* altura desktop */
    }
    @media (max-width: 991.98px){
      #site-header{
        height: 80px;                /* altura mobile */
      }
    }

    /* Navbar ocupa a altura do header e alinha verticalmente */
    #site-header .navbar{
      height: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      display: flex;
      align-items: center;
    }

    /* Logotipo ajustado à altura do header */
    #site-header .navbar-brand img{
      height: 100px;                 /* igual ao header desktop */
      width: auto;
      display: inline-block;
    }
    @media (max-width: 991.98px){
      #site-header .navbar-brand img{
        height: 80px;                /* igual ao header mobile */
      }
    }

    /* Sombra ao rolar */
    body.scrolled #site-header{
      box-shadow: 0 4px 14px rgba(0,0,0,.08);
      background: #fff;
    }

    /* Compensação da admin bar do WordPress (logado) */
    @media (min-width: 783px){
      body.admin-bar #site-header{ top: 32px; }
    }
    @media (max-width: 782px){
      body.admin-bar #site-header{ top: 46px; }
    }

    /* Active no menu */
    .navbar .nav-link.active{
      color: var(--primary) !important;
      font-weight: 600;
    }
    .navbar .dropdown-menu .dropdown-item.active{
      color: #fff !important;
      background-color: var(--primary) !important;
    }

    /* Evitar saltos de animações no header */
    #site-header [class*="wow"]{
      visibility: visible !important;
      animation: none !important;
    }

    /* Botões sociais coerentes */
    .btn.btn-light.btn-sm-square.rounded-circle small{
      color: var(--primary) !important;
    }
  </style>
</head>
<body <?php body_class(); ?>>

  <!-- Spinner Start -->
  <div id="spinner"
       class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center"
       style="z-index:100000">
    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
  </div>
  <!-- Spinner End -->

  <!-- Navbar Start (sticky, sem fixed-top e sem wow) -->
  <div id="site-header" class="container-fluid px-0">
    <nav class="navbar navbar-expand-lg navbar-light py-lg-0 px-lg-5">
      <?php
        $fallback_logo = 'https://vbs.soaresjunior.com/wp-content/uploads/2025/09/Logo-VBS-Fundo-Transparente51-1.png';
        $custom_logo_id = get_theme_mod('custom_logo');
        $logo_src = '';
        if ($custom_logo_id) {
            $image = wp_get_attachment_image_src($custom_logo_id, 'full');
            if ($image && !empty($image[0])) {
                $logo_src = esc_url($image[0]);
            }
        }
        if (!$logo_src) {
            $logo_src = $fallback_logo;
        }
      ?>
      <a href="<?php echo esc_url(home_url('/')); ?>" class="navbar-brand ms-4 ms-lg-0" aria-label="<?php bloginfo('name'); ?>">
        <img src="<?php echo $logo_src; ?>" alt="<?php bloginfo('name'); ?>" />
      </a>

      <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-label="Abrir menu">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav ms-auto p-4 p-lg-0">
          <a href="<?php echo esc_url( home_url( "/" ) ); ?>"
             class="nav-item nav-link <?php if ( is_front_page() ) echo 'active'; ?>">
             Início
          </a>

          <a href="<?php echo get_permalink( get_page_by_path( "about" ) ); ?>"
             class="nav-item nav-link <?php if ( is_page('about') ) echo 'active'; ?>">
             Sobre
          </a>

          <a href="<?php echo get_permalink( get_page_by_path( "service" ) ); ?>"
             class="nav-item nav-link <?php if ( is_page('service') ) echo 'active'; ?>">
             Serviços
          </a>

          <div class="nav-item dropdown <?php if ( is_page(array('legislacao','resumos-procedimentos-aduaneiros','artigos-especializados')) ) echo 'active'; ?>">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Publicações</a>
            <div class="dropdown-menu border-light m-0">
              <a href="<?php echo get_permalink( get_page_by_path( "legislacao" ) ); ?>"
                 class="dropdown-item <?php if ( is_page('legislacao') ) echo 'active'; ?>">
                 Legislação
              </a>
              <a href="<?php echo get_permalink( get_page_by_path( "resumos-procedimentos-aduaneiros" ) ); ?>"
                 class="dropdown-item <?php if ( is_page('resumos-procedimentos-aduaneiros') ) echo 'active'; ?>">
                 Resumos de Procedimentos Aduaneiros
              </a>
              <a href="<?php echo get_permalink( get_page_by_path( "artigos-especializados" ) ); ?>"
                 class="dropdown-item <?php if ( is_page('artigos-especializados') ) echo 'active'; ?>">
                 Artigos Especializados
              </a>
            </div>
          </div>

          <a href="<?php echo get_permalink( get_page_by_path( "contact" ) ); ?>"
             class="nav-item nav-link <?php if ( is_page('contact') ) echo 'active'; ?>">
             Contacto
          </a>
        </div>

        <div class="d-none d-lg-flex ms-2">
          <a class="btn btn-light btn-sm-square rounded-circle ms-3" href="#" aria-label="Facebook">
            <small class="fab fa-facebook-f text-primary"></small>
          </a>
          <a class="btn btn-light btn-sm-square rounded-circle ms-3" href="#" aria-label="Twitter">
            <small class="fab fa-twitter text-primary"></small>
          </a>
          <a class="btn btn-light btn-sm-square rounded-circle ms-3" href="#" aria-label="LinkedIn">
            <small class="fab fa-linkedin-in text-primary"></small>
          </a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Navbar End -->

  <!-- Sombra ao rolar (classe .scrolled no <body>) + remover spinner -->
  <script>
    (function(){
      function onScroll() {
        if (window.scrollY > 10) {
          document.body.classList.add('scrolled');
        } else {
          document.body.classList.remove('scrolled');
        }
      }
      window.addEventListener('load', onScroll);
      window.addEventListener('scroll', onScroll);

      // Remover spinner após load
      window.addEventListener('load', function(){
        var sp = document.getElementById('spinner');
        if(sp){ sp.classList.remove('show'); setTimeout(function(){ sp.remove(); }, 300); }
      });
    })();
  </script>
