/* ========================================================================
  HEADER - RunArt Base Theme (Blanco y Rojo)
  UI/UX Improvements 2025-11:
    - Spacing nav desktop 2rem→3rem, tablet 1rem→1.5rem
    - Gap menú desktop 0.5rem→0.75rem; tablet 0.25rem→0.5rem
    - Active state con background rgba(195,0,0,.15) + font-weight 600
    - Focus-visible accesible en logo, nav links y language switcher
    - Language switcher mantiene fixes Chrome en responsive.overrides.css
  ======================================================================== */

/* Header Container */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Branding */
.site-branding {
  flex-shrink: 0;
  margin-right: 0.5rem; /* Separación entre logo y nav */
}

.site-title {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.site-title:hover {
  color: var(--color-primary);
}

.site-title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.custom-logo {
  max-height: 50px;
  width: auto;
  display: block;
}

.site-logo {
  display: inline-block;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.site-logo:hover {
  opacity: 0.85;
}

.site-logo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Navigation */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 3rem; /* Aumentado de 2rem a 3rem para más espacio en desktop */
}

.site-nav .menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.75rem; /* Aumentado de 0.5rem a 0.75rem para mejor separación */
  align-items: center;
}

.site-nav .menu-item {
  margin: 0;
  position: relative;
}

.site-nav .menu-item a {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.site-nav .menu-item a:hover {
  background: rgba(195, 0, 0, 0.08);
  color: var(--color-primary);
}

.site-nav .menu-item a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background: rgba(195, 0, 0, 0.08);
}

/* Estado activo: más contraste visual */
.site-nav .menu-item.current-menu-item a,
.site-nav .menu-item.current_page_parent a {
  background: rgba(195, 0, 0, 0.15);
  color: var(--color-primary);
  font-weight: 600;
}

.site-nav .menu-item a:active {
  transform: scale(0.98);
}

/* Language Switcher */
.site-lang-switcher {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-lang-switcher ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

.site-lang-switcher li {
  margin: 0;
}

.site-lang-switcher a {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
  opacity: 0.7;
}

.site-lang-switcher a:hover {
  background: rgba(195, 0, 0, 0.1);
  opacity: 1;
}

.site-lang-switcher a img {
  display: block;
  width: 24px !important;  /* Override Polylang inline style="width:16px" */
  height: auto !important; /* Override Polylang inline style="height:11px" */
  border-radius: 2px;
  aspect-ratio: 3 / 2; /* Polylang flags are 16:11, 3:2 stabilizes cross-browser */
  object-fit: cover;
}

/* Active language indicator (TICKET-UI-006) */
.site-lang-switcher .current-lang a {
  opacity: 1;
  background: rgba(195, 0, 0, 0.1);
}

/* Hamburger toggle button (hidden on desktop, visible on mobile via @media) */
.site-menu-toggle {
  display: none;
  flex-direction: column; /* Stack spans vertically as hamburger lines */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.site-menu-toggle:hover { background: rgba(195, 0, 0, 0.08); }
.site-menu-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.site-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.site-menu-toggle span + span { margin-top: 4px; }

/* Hamburger → X animation when menu is open */
.site-menu-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.site-menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ========================================================================
   RESPONSIVE BREAKPOINTS
   Strategy:
     ≤1200px → Compress nav spacing
     ≤1024px → Further compress
     ≤900px  → Mobile: hamburger + vertical dropdown (unified - TICKET-UI-009)
     ≤480px  → Compact mobile
     ≤400px  → Extreme compact
   ======================================================================== */

/* Tablet large: compress nav */
@media (max-width: 1200px) {
  .site-nav {
    margin: 0 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-nav .menu {
    gap: 0.4rem;
  }

  .site-nav .menu-item a {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Tablet medium: further compress */
@media (max-width: 1024px) {
  .site-nav {
    margin: 0 1rem;
  }

  .site-nav .menu {
    gap: 0.25rem;
  }

  .site-nav .menu-item a {
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
  }
}

/* ============================================================
   MOBILE: ≤900px — Hamburger + vertical dropdown
   Unified breakpoint eliminates 768-900px dead zone
   (TICKET-UI-001, UI-002, UI-003, UI-009)
   ============================================================ */
@media (max-width: 900px) {
  .site-header .container {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .site-branding {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .site-lang-switcher {
    flex: 0 0 auto;
  }

  .site-menu-toggle {
    display: inline-flex;
  }

  /* Nav: full-width vertical dropdown, hidden by default (JS toggles .is-open) */
  .site-nav {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    display: none;
    overflow: visible;
  }

  .site-nav.is-open {
    display: block;
    animation: menuSlideDown 0.25s ease-out;
  }

  @keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Vertical menu layout */
  .site-nav .menu {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--color-border, #D9D9D9);
    margin-top: 0.25rem;
  }

  .site-nav .menu-item {
    width: 100%;
  }

  .site-nav .menu-item a {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}

/* Compact mobile */
@media (max-width: 480px) {
  .site-header .container {
    padding: 0.5rem 0.75rem;
  }

  .site-lang-switcher a img {
    width: 20px !important;
  }

  .site-menu-toggle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .site-menu-toggle span { width: 18px; }
}

/* Extreme compact */
@media (max-width: 400px) {
  .site-header .container {
    padding: 0.5rem;
  }

  .site-lang-switcher a img {
    width: 18px !important;
  }

  .site-menu-toggle { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .site-menu-toggle span { width: 16px; }
}

/* Lock body scroll when mobile nav is open */
body.nav-open {
  overflow: hidden;
}