/* Grizat Header */

/* ------------------------------------------------------------
 * Fix de contraste del menú — SOLO DESKTOP (min-width:769px).
 *
 * En la barra de escritorio de /grizat/ el fondo es oscuro (ver
 * workspace.css / body.ps-workspace-page), así que el texto del menú
 * de Astra (pensado para un header claro) necesita forzarse a un
 * color claro para leerse. Selector ancho (#masthead a) porque Astra
 * arma esa parte con clases internas que varían.
 *
 * En MOBILE esto se saca a propósito: se confirmó con un usuario sin
 * loguearse, en la Home (página sin ninguna de estas reglas), que el
 * texto del menú desplegable ya se ve "lavado" ahí también — o sea,
 * es una configuración del Customizer de Astra (color de texto del
 * menú mobile puesto muy claro), sitewide, ajena a este trabajo. El
 * panel de ese menú es blanco, no oscuro, así que forzar acá un color
 * claro lo empeoraba en vez de arreglarlo. Ese problema se corrige en
 * el Customizer de Astra, no en este archivo — ver header.js para el
 * mismo criterio del lado de JS.
 * ------------------------------------------------------------ */
@media (min-width: 769px) {
    body.ps-workspace-page #masthead a,
    body.ps-workspace-page .site-header a,
    body.ps-workspace-page .ast-main-header-bar a {
        color: #E4ECF7 !important;
    }

    body.ps-workspace-page #masthead a:hover,
    body.ps-workspace-page .site-header a:hover,
    body.ps-workspace-page .ast-main-header-bar a:hover {
        color: #3AB6E8 !important;
    }

    /* El ítem activo (la página en la que estás parado) recibe un
     * fondo de "resaltado" pensado para header claro — lo neutralizo,
     * si no el texto queda leyéndose sobre ese fondo clarito. */
    body.ps-workspace-page #masthead .current-menu-item,
    body.ps-workspace-page #masthead .current_page_item,
    body.ps-workspace-page .site-header .current-menu-item,
    body.ps-workspace-page .site-header .current_page_item {
        background: transparent !important;
    }
}

/* Wordmark "Grizat" inyectado con CSS, sin tocar la imagen del logo.
 * Confirmaste que el logo del header es una imagen (Personalizar →
 * Identidad del sitio → Logo), no texto — así que la regla de color
 * de arriba (.site-title) no tiene nada a lo que aplicarse: WordPress
 * no imprime texto de título cuando hay una imagen de logo cargada,
 * el markup simplemente no existe. En vez de ocultar la imagen (y
 * perder el ícono de colores, que sí se ve bien), agrego el texto al
 * lado por CSS puro — no depende de saber la clase exacta que usa
 * Astra para el link del logo por dentro, y si el selector no
 * calzara, el peor caso es que no aparezca nada (no rompe nada). */
body.ps-workspace-page .site-branding,
body.ps-workspace-page .ast-site-identity {
    display: flex !important;
    align-items: center;
}

body.ps-workspace-page .site-branding::after,
body.ps-workspace-page .ast-site-identity::after {
    content: "Grizat";
    margin-left: 8px;
    color: #fff;
    font-family: Sora, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Nav centrado entre logo y avatar, solo en el dashboard.
 * Uso centrado absoluto (no flex-order) porque no puedo verificar en
 * vivo el ancho exacto de cada zona del header de Astra — esta
 * técnica centra igual sin depender de adivinar esos anchos. Si no
 * calza con la estructura real, decime y lo ajusto con el HTML real
 * adelante.
 * IMPORTANTE: solo desktop (min-width:769px). Sin esa media query
 * esta misma regla se aplicaba también en mobile, donde
 * .main-header-bar-navigation deja de ser "la barra de nav" y pasa a
 * ser el menú desplegable completo — centrarlo como si fuera un solo
 * ítem lo sacaba de flujo y rompía el menú al abrirlo. Por eso andaba
 * bien en Home/Discover/Events (no tienen body.ps-workspace-page) y
 * mal solo acá. */
@media (min-width: 769px) {
    body.ps-workspace-page .ast-main-header-bar .ast-container {
        position: relative;
    }

    body.ps-workspace-page .main-header-bar-navigation {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Avatar de usuario que reemplaza el link "My Account" del menú.
   Antes este estilo vivía en el CSS adicional del Customizer y se
   perdió — ahora queda acá, versionado junto con el resto del theme. */
.grizat-menu-avatar {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Desktop: un poco más grande, se perdía muy chico al lado del resto
   del header. */
@media (min-width: 769px) {
    .grizat-menu-avatar,
    .grizat-menu-initials {
        width: 42px;
        height: 42px;
    }
}

.grizat-menu-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

.grizat-account-avatar-link {
    display: inline-flex !important;
    align-items: center;
}

/* Mobile: el avatar es un <li> más adentro del mismo menú de Astra
   que "My grizats / Events / Discover", así que compite por el
   mismo rincón que el botón hamburguesa de ese menú — de ahí el
   pisado.
   IMPORTANTE: la vuelta anterior de este fix forzaba display:flex
   en el contenedor del menú para poder usar 'order' en la
   hamburguesa — eso rompió el propio mecanismo de Astra para
   mostrar/ocultar los ítems al abrir el menú (dejó el contenedor
   fijo en un solo modo). Se saca esa parte: si el contenedor ya es
   flex por defecto (lo más probable), 'order' funciona igual sin
   que yo lo fuerce; si no lo es, el order simplemente no hace nada
   — pero no vuelve a romper el toggle abierto/cerrado. */
@media (max-width: 768px) {
    .grizat-menu-avatar,
    .grizat-menu-initials {
        width: 28px;
        height: 28px;
        margin-right: 0;
    }

    body.ps-workspace-page .menu-toggle,
    body.ps-workspace-page .ast-mobile-menu-trigger-worker,
    body.ps-workspace-page button.ast-mobile-menu-trigger-minimal {
        order: -1;
        margin-right: 12px !important;
        margin-left: 0 !important;
    }

    /* Separación entre el avatar y el último ítem del menú (Discover)
       arriba de él — quedaba pegado sin nada de aire. !important por
       si algo más específico de Astra le estaba ganando antes. */
    .grizat-account-avatar-link {
        display: block !important;
        margin-top: 18px !important;
        padding-top: 18px !important;
        border-top: 1px solid #e5e5e5 !important;
    }
}