/**
 * Navigation Component — v4.2
 * Mobile: drawer lateral premium com slide-in, backdrop blur, CTA de agendamento
 * Desktop: nav inline + dropdown de submenu empilhado
 *
 * v4.2: nav-panel volta a ficar dentro do <header> (estrutura original).
 *       O fix de containing block agora é feito via ::before no header.css.
 *       Dropdown desktop adicionado para submenus empilhados.
 *
 * @package FocofyFactory
 * @version 4.2
 */

/* ══════════════════════════════════════════════════════════════════════════
   HAMBURGER BUTTON
   ══════════════════════════════════════════════════════════════════════════ */

.nav-toggle {
  display:          none;
  flex-direction:   column;
  justify-content:  center;
  align-items:      center;
  gap:              5px;
  width:            44px;
  height:           44px;
  border-radius:    var(--radius-sm);
  border:           1px solid color-mix(in srgb, white 14%, transparent);
  background:       color-mix(in srgb, white 6%, transparent);
  cursor:           pointer;
  padding:          10px;
  flex-shrink:      0;
  transition:       background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  background:   color-mix(in srgb, white 10%, transparent);
  border-color: color-mix(in srgb, white 22%, transparent);
}

.nav-toggle__bar {
  display:        block;
  width:          22px;
  height:         2px;
  background:     rgba(255,255,255,0.92);
  border-radius:  2px;
  transform-origin: center;
  transition:
    transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.2s ease,
    width      0.2s ease;
}

/* Hamburger → X */
.site-header.is-open .nav-toggle__bar--top    { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar--mid    { opacity: 0; transform: scaleX(0); }
.site-header.is-open .nav-toggle__bar--bottom { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════════════════════════════════
   BACKDROP
   ══════════════════════════════════════════════════════════════════════════ */

.nav-backdrop {
  position:              fixed;
  inset:                 0;
  z-index:               998;
  background:            rgba(0, 0, 0, 0.55);
  backdrop-filter:       blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity:               0;
  pointer-events:        none;
  transition:            opacity 0.32s ease;
}

body.nav-open .nav-backdrop {
  opacity:        1;
  pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — nav inline (dentro do header-grid)
   ══════════════════════════════════════════════════════════════════════════ */

.nav-panel {
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
}

.site-header nav ul,
.main-nav ul,
.primary-menu {
  display:     flex;
  gap:         var(--space-6);
  list-style:  none;
  padding:     0;
  margin:      0;
  align-items: center;
}

.site-header a { text-decoration: none; }

.site-header nav a,
.main-nav a {
  opacity:       0.88;
  font-weight:   var(--fw-medium);
  padding:       var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color:         var(--color-text-inverse);
  transition:
    opacity    var(--transition-fast),
    transform  var(--transition-fast),
    background var(--transition-fast);
}

.site-header nav a:hover,
.main-nav a:hover {
  opacity:    1;
  transform:  translateY(-1px);
  background: color-mix(in srgb, white 5%, transparent);
}

/* Elementos mobile invisíveis no desktop */
.nav-panel__header,
.nav-panel__cta { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — submenu dropdown empilhado
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .primary-menu > li {
    position: relative;
  }

  /* Sub-menu oculto por padrão */
  .primary-menu .sub-menu {
    display:        none;
    position:       absolute;
    top:            calc(100% + 8px);
    left:           50%;
    transform:      translateX(-50%);
    flex-direction: column;
    gap:            0;
    min-width:      200px;
    background:     linear-gradient(160deg, #0f1117 0%, #1c1f2e 100%);
    border:         1px solid color-mix(in srgb, white 8%, transparent);
    border-radius:  var(--radius-base, 8px);
    padding:        var(--space-2, 8px) 0;
    box-shadow:     0 12px 32px rgba(0,0,0,0.45);
    z-index:        1001;
    list-style:     none;
    margin:         0;
    white-space:    nowrap;
  }

  /* Setinha no topo */
  .primary-menu .sub-menu::before {
    content:    '';
    position:   absolute;
    top:        -6px;
    left:       50%;
    transform:  translateX(-50%) rotate(45deg);
    width:      10px;
    height:     10px;
    background: #0f1117;
    border-left: 1px solid color-mix(in srgb, white 8%, transparent);
    border-top:  1px solid color-mix(in srgb, white 8%, transparent);
  }

  /* Mostrar dropdown ao hover */
  .primary-menu > li:hover > .sub-menu,
  .primary-menu > li:focus-within > .sub-menu {
    display: flex;
  }

  .primary-menu .sub-menu > li {
    width: 100%;
  }

  .primary-menu .sub-menu > li > a {
    display:        block;
    padding:        10px 20px;
    font-size:      0.9375rem;
    font-weight:    500;
    color:          rgba(255,255,255,0.78);
    opacity:        1;
    border-radius:  0;
    transform:      none;
    transition:     color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
  }

  .primary-menu .sub-menu > li > a:hover {
    color:        white;
    background:   color-mix(in srgb, white 6%, transparent);
    padding-left: 26px;
    transform:    none;
    opacity:      1;
  }

  /* Seta indicando submenu no item pai */
  .primary-menu > li:has(.sub-menu) > a::after {
    content:       '';
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-right:  1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate:        45deg;
    margin-left:   6px;
    vertical-align: middle;
    margin-top:    -3px;
    opacity:       0.7;
    transition:    rotate 0.2s ease, opacity 0.2s ease;
  }

  .primary-menu > li:hover:has(.sub-menu) > a::after {
    rotate:  225deg;
    opacity: 1;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — drawer lateral (max-width: 1023px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  .nav-toggle { display: flex; }

  /* ── Drawer ──────────────────────────────────────────────────── */
  .nav-panel {
    position:       fixed;
    top:            0;
    right:          0;
    bottom:         0;
    width:          min(320px, 88vw);
    z-index:        999;
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    padding:        0;
    overflow-y:     auto;
    overflow-x:     hidden;

    background:  linear-gradient(160deg, #0f1117 0%, #1c1f2e 100%);
    border-left: 1px solid color-mix(in srgb, white 7%, transparent);
    box-shadow:  -12px 0 40px rgba(0, 0, 0, 0.5);

    transform:   translateX(102%);
    transition:  transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                 visibility 0.32s;
    visibility:  hidden;
  }

  .site-header.is-open .nav-panel {
    transform:  translateX(0);
    visibility: visible;
  }

  /* ── Cabeçalho do painel ─────────────────────────────────────── */
  .nav-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-5) var(--space-6);
    border-bottom:   1px solid color-mix(in srgb, white 7%, transparent);
    min-height:      64px;
    flex-shrink:     0;
  }

  .nav-panel__logo img,
  .nav-panel__logo .custom-logo {
    max-height: 36px;
    width:      auto;
  }

  .nav-panel__logo-text {
    font-size:      var(--font-size-lg);
    font-weight:    var(--fw-bold);
    color:          white;
    letter-spacing: -0.01em;
  }

  .nav-panel__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-sm);
    border:          1px solid color-mix(in srgb, white 12%, transparent);
    background:      color-mix(in srgb, white 6%, transparent);
    color:           rgba(255,255,255,0.8);
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s;
    flex-shrink:     0;
  }

  .nav-panel__close:hover {
    background: color-mix(in srgb, white 14%, transparent);
    color:      white;
  }

  /* ── Navegação ───────────────────────────────────────────────── */
  .main-nav {
    flex:    1;
    padding: var(--space-4) var(--space-6) var(--space-6);
  }

  .primary-menu {
    flex-direction: column;
    gap:            0;
    align-items:    stretch;
  }

  .primary-menu > li {
    border-bottom: 1px solid color-mix(in srgb, white 6%, transparent);
  }

  .primary-menu > li:first-child {
    border-top: 1px solid color-mix(in srgb, white 6%, transparent);
  }

  .primary-menu > li > a {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    padding:        var(--space-4) var(--space-2);
    font-size:      1.0625rem;
    font-weight:    600;
    letter-spacing: 0.01em;
    color:          rgba(255, 255, 255, 0.85);
    opacity:        1;
    border-radius:  0;
    background:     transparent;
    transition:     color 0.18s ease, padding-left 0.18s ease;
    transform:      none;
  }

  /* Barra de accent à esquerda */
  .primary-menu > li > a::before {
    content:       '';
    display:       block;
    width:         3px;
    height:        18px;
    background:    var(--color-primary, #c9a84c);
    border-radius: 2px;
    opacity:       0;
    transform:     scaleY(0.3);
    transition:    opacity 0.18s ease, transform 0.18s ease;
    flex-shrink:   0;
  }

  .primary-menu > li > a:hover,
  .primary-menu > li.current-menu-item > a,
  .primary-menu > li.current_page_item > a {
    color:        white;
    padding-left: var(--space-2);
  }

  .primary-menu > li > a:hover::before,
  .primary-menu > li.current-menu-item > a::before,
  .primary-menu > li.current_page_item > a::before {
    opacity:   1;
    transform: scaleY(1);
  }

  /* Submenu mobile — empilhado */
  .primary-menu .sub-menu {
    flex-direction: column;
    gap:            0;
    padding:        0 0 var(--space-2) var(--space-6);
    list-style:     none;
    margin:         0;
  }

  .primary-menu .sub-menu li a {
    font-size:   0.9375rem;
    font-weight: 500;
    color:       rgba(255,255,255,0.6);
    padding:     var(--space-2) 0;
    opacity:     1;
  }

  .primary-menu .sub-menu li a:hover {
    color:        rgba(255,255,255,0.9);
    padding-left: var(--space-2);
  }

  /* ── CTA WhatsApp ────────────────────────────────────────────── */
  .nav-panel__cta {
    display:     block;
    padding:     var(--space-5) var(--space-6) var(--space-6);
    flex-shrink: 0;
  }

  .nav-cta-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         14px var(--space-4);
    border-radius:   var(--radius-base);
    background:      #25d366;
    color:           #fff;
    font-size:       var(--font-size-base);
    font-weight:     700;
    letter-spacing:  0.02em;
    text-decoration: none;
    transition:      background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow:      0 4px 16px rgba(37, 211, 102, 0.28);
  }

  .nav-cta-btn:hover {
    background: #1da851;
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
  }

  .nav-cta-btn:active {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
  }

  /* Trava scroll do body com menu aberto */
  body.nav-open { overflow: hidden; }
}