/* =========================================================
   AVANZUR · Ajustes de HEADER v2 (SOLO PAGINAS INTERIORES, NO la home)
   ---------------------------------------------------------
   Header merge (transparente, superpuesto) de GeneratePress. El logo y el menu
   son globales. Este archivo afina su presentacion v2 por CSS SIN tocar el Customizer.

   ACOTADO A INTERIORES: la HOME es la portada del sitio (página estática 59048,
   slug home2, marcada como Página de inicio). Su <body> lleva la clase **.home**
   (WordPress la añade a la portada). Por eso el acotado se hace con **:not(.home)**
   para interiores y **.home** para la portada. Así es PORTABLE: si la página de inicio
   cambia de ID en el futuro, este CSS sigue funcionando sin tocarlo.
   (Historico: cuando 59048 NO era aún la portada y vivía en /home2/, su body no
   llevaba .home y se acotó por page-id-59048; al promocionarla a portada el 2026-05-29
   ya emite .home y se migra el selector a .home, que es lo correcto.)

   GeneratePress (main.min.css) aplica al header:
     .inside-header { padding: 20px 40px; }
   Lo sobreescribimos con mayor especificidad y !important puntual donde GP gana.

   Subir por FTP a wp-content/themes/generatepress_child/styles/ y encolar en
   functions.php (ya hecho, handle 'header-v2').

   DOM real (GeneratePress, verificado 2026-05-28):
     <div class="inside-header grid-container">      (flex, padding 20px 40px de GP)
       <div class="site-logo"><a><img class="header-image is-logo-image"
            width="350" height="95"></a></div>
       <nav id="site-navigation" class="main-navigation">...
   ========================================================= */

/* ---- Alineacion del header con el contenido + padding vertical (interiores) ----
   Objetivo: que el logo caiga A PLOMO con el contenido del hero/secciones, que usan
   .avz-wrap (max-width:1200px centrado + padding-inline:30px). Acotamos el
   .inside-header al MISMO contenedor: max-width 1200px, centrado, padding lateral 30px
   (antes 40px de GP). El padding vertical baja de 20px a 10px (barra mas contenida).
   !important porque GP (.inside-header) tiene misma especificidad. */
body:not(.home) .inside-header,
body:not(.home) .inside-header.grid-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  display: flex;
  align-items: center;
}

/* El bloque del logo, centrado en su caja (interiores) */
body:not(.home) .site-logo {
  display: flex;
  align-items: center;
}

/* ---- Logo: reducir tamano (solo interiores) ----
   El <img> trae width=350 height=95 (ratio ~3.68:1). Lo limitamos por ancho y dejamos
   altura automatica. !important para ganar al width=350 inline + reglas de GP. */
body:not(.home) .site-logo .header-image.is-logo-image,
body:not(.home) .site-logo img.is-logo-image {
  max-width: 200px !important;
  width: 200px !important;
  height: auto !important;
  display: block;
}

/* ---- Navegacion centrada verticalmente respecto al header (interiores) ---- */
body:not(.home) .main-navigation .inside-navigation,
body:not(.home) .main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
}
body:not(.home) .main-navigation .main-nav ul li a {
  display: flex;
  align-items: center;
}

/* ---- Logo de la HOME (.home): mas grande que en interiores ----
   La home NO recibe las reglas de arriba. Aqui le damos su logo grande
   (valores afinados en vivo por el cliente). Interiores quedan a 200px. */
body.home .site-logo .header-image.is-logo-image,
body.home .site-logo img.is-logo-image {
  max-width: 300px !important;
  width: 300px !important;
  height: auto !important;
  display: block;
  margin-top: 15px;
}

/* ---- Logo HOME en mobile: reducir para que no empuje el menu ----
   300px es correcto en desktop; en mobile (<768px) deja sin espacio al menu
   hamburguesa y lo fuerza a una segunda fila. Lo bajamos a 160px y quitamos
   el margin-top extra que agravaba el desplazamiento vertical. */
@media (max-width: 768px) {
  body.home .site-logo .header-image.is-logo-image,
  body.home .site-logo img.is-logo-image {
    max-width: 160px !important;
    width: 160px !important;
    margin-top: 0 !important;
  }
}

/* ---- Alineacion del header de la HOME con el contenido ----
   Mismo contenedor que el .avz-wrap del hero (max-width:1200px centrado + 30px
   laterales) para que el logo caiga A PLOMO con el eyebrow/titulo. Se aplica aparte
   de interiores porque la home conserva su logo grande (300px) y no las demas reglas. */
body.home .inside-header,
body.home .inside-header.grid-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* =========================================================
   BOTONES DESTACADOS DEL MENU PRINCIPAL (.czr-nav-*)
   ---------------------------------------------------------
   Componentes PROPIOS del sitio (prefijo .czr-*), GLOBALES (home + interiores),
   porque el menu es global. Reutilizan los tokens del sistema (--avz-cian, etc.):
   ni un hex suelto.

   COMO SE ASIGNAN (en WordPress, no aqui):
     Apariencia > Menus > Opciones de pantalla (arriba) > marcar "Clases CSS" >
     en el elemento del menu, escribir la clase en el campo "Clases CSS (opcional)".
   La clase cae en el <li>; estas reglas estilan el <a> interior, ganando en
   especificidad al enlace de menu de GeneratePress.

     - czr-nav-cta : CTA de venta        -> primario (cian relleno, boton fuerte)
     - czr-nav-app : acceso a la app      -> secundario (contorno/ghost)
       URL del enlace: https://app.clockzur.com  (se pone en el propio menu)
   ========================================================= */

/* El <li> marcado: que centre verticalmente su boton en la barra (home e interiores) */
.main-navigation .main-nav ul li.czr-nav-cta,
.main-navigation .main-nav ul li.czr-nav-app {
  display: flex;
  align-items: center;
}

/* Base comun de ambos botones del menu */
.main-navigation .main-nav ul li.czr-nav-cta > a,
.main-navigation .main-nav ul li.czr-nav-app > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin-left: .6rem;
  padding: .6em 1.4em !important;        /* gana al padding del enlace de GP */
  line-height: 1;
  font-weight: 700;
  border-radius: var(--avz-radius-sm);
  border: 2px solid transparent;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s,
              background-color .2s, color .2s, border-color .2s;
}

/* --- CTA de venta: PRIMARIO (cian relleno) --- */
.main-navigation .main-nav ul li.czr-nav-cta > a {
  background: var(--avz-cian);
  color: #04222b !important;             /* gana al color de enlace del menu */
  box-shadow: 0 8px 24px var(--avz-cian-glow);
}
.main-navigation .main-nav ul li.czr-nav-cta > a:hover,
.main-navigation .main-nav ul li.czr-nav-cta > a:focus {
  background: var(--avz-cian) !important;
  color: #04222b !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--avz-cian-glow);
}

/* --- Acceso a la app: SECUNDARIO (contorno legible sobre header CLARO) ---
   El header de ClockZur tiene fondo blanco, asi que el contorno y el texto van en
   cian-ink (cian oscuro legible sobre claro), no en blanco. Al hover se rellena de
   cian con texto oscuro, igual que el CTA. */
.main-navigation .main-nav ul li.czr-nav-app > a {
  background: transparent !important;
  color: var(--avz-cian-ink) !important;
  border-color: var(--avz-cian-ink);
}
.main-navigation .main-nav ul li.czr-nav-app > a:hover,
.main-navigation .main-nav ul li.czr-nav-app > a:focus {
  background: var(--avz-cian) !important;
  color: #04222b !important;
  border-color: var(--avz-cian);
  transform: translateY(-2px);
}

/* ---- Botones del menu en MOBILE (<768px) ----
   En desktop son pildoras inline-flex alineadas en la barra horizontal. En el menu
   hamburguesa GP apila los items en vertical a ancho completo; los botones, al seguir
   siendo inline-flex con margin-left, quedaban encogidos y pegados arriba-izquierda,
   descuadrados respecto a los enlaces de texto. Aqui los pasamos a botones de ANCHO
   COMPLETO apilados, con separacion vertical y margenes laterales que los alinean con
   el resto del menu. El primero (CTA) recibe un margen superior extra para separar el
   bloque de botones de los enlaces de texto. */
@media (max-width: 768px) {
  .main-navigation .main-nav ul li.czr-nav-cta,
  .main-navigation .main-nav ul li.czr-nav-app {
    display: block;
    width: 100%;
  }
  .main-navigation .main-nav ul li.czr-nav-cta > a,
  .main-navigation .main-nav ul li.czr-nav-app > a {
    display: flex;            /* ancho completo (block-level) con label centrado */
    width: auto;
    margin: .35rem 20px;      /* inset lateral que alinea con el resto del menu */
  }
  .main-navigation .main-nav ul li.czr-nav-cta > a {
    margin-top: .9rem;        /* separa el bloque de botones de los enlaces de texto */
  }
}

/* =========================================================
   SELECTOR DE IDIOMA (.czr-lang-switcher)
   ---------------------------------------------------------
   Generado por czr_add_lang_switcher() en functions.php vía
   wp_nav_menu_items filter. pll_the_languages() emite <li class="lang-item">
   directamente; aquí se envuelven en .czr-lang-list para agrupar y separar
   visualmente del resto del menú.

   Header oscuro (--avz-ink): texto semitransparente blanco en inactivos,
   cian en activo. Sin flags (mantenimiento nulo); solo código de idioma
   en mayúsculas (text-transform: uppercase).
   ========================================================= */

/* Separador visual respecto a los ítems de menú principales */
.main-navigation .main-nav ul li.czr-lang-switcher {
  display: flex;
  align-items: center;
  padding-left: .9rem;
  margin-left: .25rem;
  border-left: 1px solid rgba(12,207,207,.22);
}

/* La lista interna se despliega en fila horizontal */
.czr-lang-list {
  display: flex;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

/* Cada idioma como pastilla compacta */
.czr-lang-list .lang-item a {
  display: block !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  padding: .32em .55em !important;
  border-radius: 4px !important;
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important;
  transition: color .18s, background .18s !important;
  white-space: nowrap;
}

/* Idioma activo: cian destacado */
.czr-lang-list .lang-item.current-lang a {
  color: var(--avz-cian, #0CCFCF) !important;
  background: rgba(12,207,207,.12) !important;
}

/* Hover sobre idioma inactivo */
.czr-lang-list .lang-item a:hover {
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.07) !important;
}

/* Mobile: el menú hamburguesa apila verticalmente; el switcher pasa a fila
   centrada con separador superior en lugar de lateral */
@media (max-width: 768px) {
  .main-navigation .main-nav ul li.czr-lang-switcher {
    border-left: none;
    border-top: 1px solid rgba(12,207,207,.18);
    padding-left: 0;
    padding-top: .6rem;
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }
}

/* =========================================================
   FONDO DEL MENU MOBILE Y DE LA X (igualar al header BLANCO)
   ---------------------------------------------------------
   GeneratePress pinta el boton hamburguesa/X (.menu-toggle) y el panel del menu
   desplegado con un gris muy claro propio, distinto del blanco del header. Aqui
   los igualamos al blanco del header para que la caja del menu y la X no destaquen
   como un recuadro de tono diferente. Solo afecta a mobile (donde existe la X y el
   panel desplegable); el dropdown de submenus (ul ul) conserva su fondo oscuro
   propio porque se estiliza aparte en overrides.css con mayor especificidad. */
@media (max-width: 768px) {
  .main-navigation,
  .main-navigation .inside-navigation,
  .main-navigation.toggled .main-nav,
  .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle:focus {
    background-color: #fff !important;
  }
}
