/* ══════════════════════════════════════════════════════════════
 * Illusia Header — "Glass Navigation Bar"
 *
 * Barra de navegacao compacta com glass surface. Logo + titulo
 * a esquerda, menu central, icon menu a direita.
 *
 * Secoes:
 *  1. Container & Glass Background
 *  2. Wrapper Layout
 *  3. Identity (Logo + Title)
 *  4. Navigation Menu
 *  5. Submenu Dropdowns
 *  6. Actions (Icon Menu)
 *  7. Mobile Menu Button
 *  8. Sticky & Scroll State
 *  9. Shimmer Line
 * 10. Light Mode
 * 11. Responsive
 * 12. Reduced Motion
 *
 * Usa bridge tokens (--bg-* / --fg-*) para dark+light mode.
 * Cores via triplets -free — reagem ao modal hue-rotate.
 *
 * @since 1.16.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. CONTAINER & GLASS BACKGROUND
 *
 * Header element with glass surface. Position sticky respeitando
 * .no-nav-sticky do site-settings do Fictioneer.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  isolation: isolate;
}

:root.no-nav-sticky .illusia-nav {
  position: relative;
}

.illusia-nav__bg {
  position: absolute;
  inset: 0;
  background: hsl(var(--bg-900-free) / .78);
  backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  -webkit-backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  border-bottom: 1px solid var(--glass-border);
  z-index: -1;
}

/* Observer div — zero height, Fictioneer IntersectionObserver */
.illusia-nav .nav-observer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 2. WRAPPER LAYOUT
 *
 * Flex container com max-width centralizado.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--site-width);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-md);
  min-height: clamp(48px, 6vw, 56px);
}


/* ═══════════════════════════════════════════════════════════════
 * 3. IDENTITY (Logo + Title)
 *
 * Grupo logo + titulo do site. Playfair Display para o nome,
 * Fira Code uppercase para a tagline.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__identity {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.illusia-nav__logo {
  flex-shrink: 0;
  line-height: 0;
}

.illusia-nav__logo img,
.illusia-nav__logo .custom-logo {
  height: clamp(28px, 4vw, 36px);
  width: auto;
  display: block;
}

.illusia-nav__site-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.2;
  color: var(--fg-100);
  margin: 0;
  padding: 0;
}

.illusia-nav__identity:hover .illusia-nav__site-name,
.illusia-nav__identity:focus-visible .illusia-nav__site-name {
  color: var(--amber);
}

.illusia-nav__identity:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.illusia-nav__tagline {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-700);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. NAVIGATION MENU
 *
 * Menu principal central. Syne 400, items com underline amber
 * animada no hover.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__menu {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.illusia-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.illusia-nav__list .menu-item {
  position: relative;
}

.illusia-nav__list .menu-item > a {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--fg-400);
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-std);
  position: relative;
}

/* Underline amber animada */
.illusia-nav__list .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-xs);
  right: var(--space-xs);
  height: 2px;
  background: var(--amber);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-mid) var(--ease-expo);
}

.illusia-nav__list .menu-item > a:hover,
.illusia-nav__list .menu-item > a:focus-visible {
  color: var(--amber);
}

.illusia-nav__list .menu-item > a:hover::after,
.illusia-nav__list .menu-item > a:focus-visible::after {
  transform: scaleX(1);
}

/* Item ativo — pagina atual */
.illusia-nav__list .menu-item.current-menu-item > a,
.illusia-nav__list .menu-item.current-menu-ancestor > a {
  color: var(--amber);
}

.illusia-nav__list .menu-item.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Focus visible */
.illusia-nav__list .menu-item > a:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}


/* ═══════════════════════════════════════════════════════════════
 * 5. SUBMENU DROPDOWNS
 *
 * Submenus com glass surface. Aparecem com fade+slide.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: clamp(150px, 20vw, 200px);
  list-style: none;
  margin: 0;
  padding: var(--space-2xs) 0;
  background: hsl(var(--bg-900-free) / .92);
  backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  -webkit-backdrop-filter: blur(clamp(8px, 1.5vw, 16px));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-mid) var(--ease-std),
    transform var(--t-mid) var(--ease-expo),
    visibility 0s var(--t-mid);
  z-index: 100;
}

.illusia-nav__list .menu-item:hover > .sub-menu,
.illusia-nav__list .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--t-mid) var(--ease-std),
    transform var(--t-mid) var(--ease-expo),
    visibility 0s;
}

.illusia-nav__list .sub-menu .menu-item > a {
  font-size: var(--text-xs);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--fg-400);
}

.illusia-nav__list .sub-menu .menu-item > a::after {
  display: none;
}

.illusia-nav__list .sub-menu .menu-item > a:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .06);
}


/* ═══════════════════════════════════════════════════════════════
 * 6. ACTIONS (Icon Menu)
 *
 * Wrapper do icon menu do Fictioneer. Flex end alignment.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.illusia-nav__actions .icon-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Override parent: icon menu escondido por padrao, visivel so a partir
 * de 1024px. Na Illusia nav, sempre visivel — no mobile fica ao lado
 * do hamburger para preencher a barra. */
.illusia-nav__actions .icon-menu._in-navigation {
  display: flex;
  content-visibility: visible;
}

.illusia-nav__actions .menu-item-icon > a,
.illusia-nav__actions .menu-item-icon > button,
.illusia-nav__actions .menu-item-icon > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 4vw, 36px);
  height: clamp(32px, 4vw, 36px);
  border-radius: var(--r-sm);
  color: var(--fg-500);
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

.illusia-nav__actions .menu-item-icon > a:hover,
.illusia-nav__actions .menu-item-icon > button:hover,
.illusia-nav__actions .menu-item-icon > label:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .08);
}

.illusia-nav__actions .menu-item-icon > a:focus-visible,
.illusia-nav__actions .menu-item-icon > button:focus-visible,
.illusia-nav__actions .menu-item-icon > label:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
 * 7. MOBILE MENU BUTTON
 *
 * Hamburger com icones bars/xmark do Fictioneer. Visivel apenas
 * em mobile. Preserva classes mobile-menu-button do pai.
 * ═══════════════════════════════════════════════════════════════ */

/* Override do parent .mobile-menu-button { display: none } */
.illusia-nav .illusia-nav__mobile-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  color: var(--fg-400);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.illusia-nav__mobile-btn:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .08);
}

.illusia-nav__mobile-btn:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}

/* Icone toggle — off/on controlado pelo Fictioneer mobile menu.
 * Parent esconde .mobile-menu-button via content-visibility e display.
 * Precisamos forcar visibilidade dos icones e label. */
.illusia-nav__mobile-btn .icon {
  font-size: 1.1em;
}

.illusia-nav__mobile-btn .mobile-menu-button__label {
  content-visibility: visible;
}

/* Garantir visibilidade dos icones (parent esconde via content-visibility) */
.illusia-nav__mobile-btn .off,
.illusia-nav__mobile-btn .on {
  content-visibility: visible;
}

body:not(.mobile-menu-open) .illusia-nav__mobile-btn .on {
  display: none;
}

body.mobile-menu-open .illusia-nav__mobile-btn .off {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 8. STICKY & SCROLL STATE
 *
 * Sombra aparece quando a nav esta em modo sticky e o usuario
 * rolou a pagina. Classe ._scrolled adicionada via JS
 * (IntersectionObserver no #nav-observer-sticky).
 *
 * Admin bar offset: quando logado, WordPress adiciona .admin-bar
 * ao body. A barra tem 46px (tablet) / 32px (desktop). Usamos
 * os mesmos offsets do Fictioneer para consistencia.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav {
  transition: box-shadow var(--t-mid) var(--ease-std);
}

.illusia-nav._scrolled .illusia-nav__bg {
  box-shadow: 0 1px 12px hsl(var(--bg-950-free) / .4);
}

:root.no-nav-sticky .illusia-nav._scrolled .illusia-nav__bg {
  box-shadow: none;
}

/* Admin bar offset — tablet (46px bar) */
@media only screen and (min-width: 601px) {
  .admin-bar:not(.mobile-menu-open) .illusia-nav {
    top: calc(45.9px - var(--nav-observer-offset, 0px));
  }

  .admin-bar:not(.mobile-menu-open) .illusia-nav .nav-observer {
    top: calc(-47px + var(--nav-observer-offset, 0px));
  }
}

/* Admin bar offset — desktop (32px bar) */
@media only screen and (min-width: 783px) {
  .admin-bar:not(.mobile-menu-open) .illusia-nav {
    top: calc(31.9px - var(--nav-observer-offset, 0px));
  }

  .admin-bar:not(.mobile-menu-open) .illusia-nav .nav-observer {
    top: calc(-33px + var(--nav-observer-offset, 0px));
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 9. SHIMMER LINE
 *
 * Gradiente amber translucido de 1px no bottom da nav.
 * Regra inviolavel #10 do Design Direction.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-nav__bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent
  );
}


/* ═══════════════════════════════════════════════════════════════
 * 10. LIGHT MODE
 *
 * Ajustes para o light mode (:root[data-mode=light]).
 * Glass mais opaca, textos com contraste invertido.
 * ═══════════════════════════════════════════════════════════════ */

:root[data-mode=light] .illusia-nav__logo img,
:root[data-mode=light] .illusia-nav__logo .custom-logo {
  filter: brightness(.2) contrast(1.2);
}

:root[data-mode=light] .illusia-nav__bg {
  background: hsl(var(--bg-50-free) / .85);
  border-bottom-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode=light] .illusia-nav._scrolled .illusia-nav__bg {
  box-shadow: 0 1px 12px hsl(var(--bg-500-free) / .15);
}

:root[data-mode=light] .illusia-nav__list .sub-menu {
  background: hsl(var(--bg-50-free) / .95);
  border-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode=light] .illusia-nav__list .sub-menu .menu-item > a {
  color: var(--fg-400);
}

:root[data-mode=light] .illusia-nav__list .sub-menu .menu-item > a:hover {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 11. RESPONSIVE
 *
 * Icon menu sempre visivel (override do parent na secao 6).
 * <= 768px: Menu esconde, hamburger + icons agrupados a direita.
 * <= 480px: Tagline e label do hamburger escondem.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .illusia-nav__menu {
    display: none;
  }

  /* O icon menu in-navigation migra pro hamburger no mobile (location
     in-mobile-menu). Esconde a barra de topo; sino/busca/etc. ficam
     dentro do menu mobile. */
  .illusia-nav__actions {
    display: none;
  }

  .illusia-nav .illusia-nav__mobile-btn {
    display: flex;
    margin-left: auto; /* empurra o hamburger para a direita */
  }

  .illusia-nav__wrapper {
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .illusia-nav__tagline {
    display: none;
  }

  /* Hamburger so icone — label ocupa espaco demais em tela pequena */
  .illusia-nav__mobile-btn .mobile-menu-button__label {
    display: none;
  }

  .illusia-nav__wrapper {
    padding: var(--space-2xs) var(--space-xs);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 12. REDUCED TRANSPARENCY
 *
 * "Reduzir transparência" no SO desativa o frosted glass da barra
 * de navegação e dos sub-menus: backdrop-filter off + fundo opaco
 * (bg-900 dark, bg-50 light). Pattern canônico dos audits
 * S9/S11/S12/S13.
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-transparency: reduce) {
  .illusia-nav__bg,
  .illusia-nav__list .sub-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-900);
  }

  :root[data-mode=light] .illusia-nav__bg,
  :root[data-mode=light] .illusia-nav__list .sub-menu {
    background: var(--bg-50);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 13. REDUCED MOTION
 *
 * Remove animacoes para prefers-reduced-motion.
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .illusia-nav__list .menu-item > a::after {
    transition: none;
  }

  .illusia-nav__list .sub-menu {
    transition: none;
  }

  .illusia-nav {
    transition: none;
  }
}