<?php
/**
 * fea-ui — Ajustes estéticos globales del front (issue #95).
 *
 *   1. Foco/click: elimina el recuadro gris/negro por defecto al hacer click,
 *      mantiene foco visible y de marca SOLO con teclado (:focus-visible).
 *   2. Menú: tipografía editorial Fraunces (coherente con los títulos),
 *      línea carmesí en hover/ítem activo, sin subrayado.
 *
 * CSS global (el menú y los enlaces están en todo el sitio), no solo en single.
 */

if (!defined('FEA_UI_CRIMSON')) {
    define('FEA_UI_CRIMSON', '#8b1a2e'); // carmesí de marca
}
if (!defined('FEA_UI_INK')) {
    define('FEA_UI_INK', '#2a2320');     // texto de marca
}

add_action('wp_head', function () {
    if (is_admin()) return;
    $crimson = FEA_UI_CRIMSON;
    $ink     = FEA_UI_INK;
    ?>
    <style id="fea-ui">
    /* ── 1. Foco / click ───────────────────────────────────────────── */
    a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

    /* Sin outline al hacer click con ratón/dedo… */
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) { outline: none; }

    /* …pero foco visible y de marca al navegar con teclado (accesibilidad) */
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid <?php echo $crimson; ?>;
        outline-offset: 2px;
        border-radius: 3px;
    }

    /* El core agranda el outline del menú (outline-offset:4px) → lo reducimos */
    .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
        outline-offset: 2px;
    }

    /* ── 2. Menú — Opción C · Sans limpia minimalista (issue #95) ──── */
    .wp-block-navigation .wp-block-navigation-item__content {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 500;
        color: <?php echo $ink; ?>;
        text-decoration: none;
        position: relative;
    }

    /* Nunca subrayado (el core lo pone en hover) */
    .wp-block-navigation a.wp-block-navigation-item__content:hover,
    .wp-block-navigation a.wp-block-navigation-item__content:focus {
        text-decoration: none;
    }

    /* Línea carmesí inferior, animada, en hover y en el ítem activo */
    .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
        > .wp-block-navigation-item__content::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -3px;
        height: 2px;
        background: <?php echo $crimson; ?>;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.18s ease;
    }
    .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
        > .wp-block-navigation-item__content:hover::after,
    .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
        > .wp-block-navigation-item__content[aria-current]::after {
        transform: scaleX(1);
    }
    .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
        > .wp-block-navigation-item__content[aria-current] {
        color: <?php echo $crimson; ?>;
    }

    /* Submenús: sin línea inferior; hover marca el texto en carmesí */
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
        display: none;
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
        color: <?php echo $crimson; ?>;
    }

    /* ── 3. Fondo cálido en artículos (issue #78 feedback "demasiado blanca") ── */
    body.single-post {
        background-color: #f5f0eb !important;
        --wp--preset--color--base: #f5f0eb;
    }

</style>
    <?php
}, 25);
