/*
Theme Name: Théâtre de L'Arsenal
Author: Pablo Herrera
Author URI: https://pabloherrera.design
Description: Thème enfant de Twenty Twenty-Five pour theatredelarsenal.fr
Version: 2.6
Template: twentytwentyfive
Text Domain: theatre-de-larsenal
*/

/* ================================================================
   MENÚ MOBILE — Overlay completo, jerarquía visual clara
   Afecta solo al contenedor responsive (hamburguesa)
   ================================================================ */

/* Contenedor principal del overlay */
@media (max-width: 781px) {

    /* Eliminar outline de focus del overlay y dialog */
    .wp-block-navigation__responsive-container:focus,
    .wp-block-navigation__responsive-container:focus-visible,
    .wp-block-navigation__responsive-dialog:focus,
    .wp-block-navigation__responsive-dialog:focus-visible,
    .wp-block-navigation__responsive-close:focus,
    .wp-block-navigation__responsive-close:focus-visible,
    .wp-block-navigation-item__content:focus,
    .wp-block-navigation-item__content:focus-visible,
    .wp-block-navigation__responsive-container.is-menu-open a:focus,
    .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
    .wp-block-navigation__responsive-container.is-menu-open button:focus,
    .wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Panel ocupa toda la pantalla */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 2rem 2rem 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    /* Botón cerrar — arriba a la derecha */
    .wp-block-navigation__responsive-container-close {
        align-self: flex-end;
        margin-bottom: 2rem;
    }

    /* Lista raíz del menú */
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container,
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item,
    .wp-block-navigation__responsive-container-content
    .wp-block-page-list {
        --navigation-layout-justification-setting: flex-start !important;
        --navigation-layout-align: flex-start !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100%;
    }

    /* Items padre */
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    > .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em;
        text-decoration: none;
        width: 100%;
    }

    /* Flecha del submenu — alineada a la derecha */
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    > .wp-block-navigation-item
    .wp-block-navigation__submenu-icon {
        margin-left: auto;
        padding: 0.5rem 0;
    }

    /* Submenú: items hijos */
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        min-width: unset;
        width: 100%;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 0 0 0.75rem 1rem;
        margin-top: 0;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        padding: 0.5rem 0 !important;
        font-size: 1rem !important;
        font-weight: 450 !important;
        opacity: 0.65;
        letter-spacing: 0.01em;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
        opacity: 1;
    }

    /* Ocultar submenu toggle en mobile (siempre visible) */
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-icon {
        display: none;
    }
}

/* ================================================================
   MENÚ DESKTOP — quitar el outline negro de focus al hacer clic
   en los enlaces de navegación. Se conserva un focus sutil solo
   para navegación por teclado (accesibilidad).
   ================================================================ */
.wp-block-navigation a:focus,
.wp-block-navigation a:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation button:focus,
.wp-block-navigation button:focus-visible {
    outline: none;
    box-shadow: none;
}
/* Mantener un indicador de foco discreto solo cuando se navega por teclado */
.wp-block-navigation a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ================================================================
   BLOQUE arsenal/field — imágenes de campo ACF (ficha spectacle)
   Ajustar la imagen a su columna. Reemplaza el constreñido que
   antes aportaba la CSS del plugin Meta Field Block Premium.
   ================================================================ */
.wp-block-arsenal-field img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   FUENTES DE MARCA — alojadas en el tema, ruta relativa al CSS.
   Resuelven a {dominio}/wp-content/themes/theatre-de-larsenal/fonts/
   → same-origin en cualquier dominio (copy y prod), sin CORS.
   Reemplaza las URLs absolutas a prod de la Font Library.
   ================================================================ */
@font-face { font-family: "Gabriela"; src: url('fonts/Gabriela-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabriela"; src: url('fonts/Gabriela-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabriela"; src: url('fonts/Gabriela-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabriela"; src: url('fonts/Gabriela-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Isidora-Regular"; src: url('fonts/Isidora-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Isidora-SemiBold"; src: url('fonts/Isidora-SemiBold.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark Pro"; src: url('fonts/MarkPro-Normal.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark Pro"; src: url('fonts/MarkPro-Book.ttf') format('truetype'); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark Pro"; src: url('fonts/MarkPro-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }

/* ================================================================
   LÍNEA ARTISTE / METTEUR EN SCÈNE — bajo el título en la tarjeta
   (mejora Corinne). Subordinada al título Gabriela: Mark Pro, peso
   medio, tono atenuado. Se refleja en home y /spectacles/.
   ================================================================ */
.spectacle-card-item .spectacle-artiste {
    font-family: var(--wp--preset--font-family--mark-pro, 'Mark Pro', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: #444444;
    line-height: 1.3;
    margin-top: 4px;
    margin-bottom: 0;
}

/* ================================================================
   BOTÓN "Voir tous les spectacles" (.btn-archive)
   Fuente única de verdad en el tema hijo. Reemplaza los estilos
   inline de functions.php (home + archive) para un look consistente
   y migración-proof. Botón autónomo (aplica en ambos contextos).
   ================================================================ */
.archive-filtro-btn.btn-archive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F2F2F2;
    color: #111111;
    border: 2px solid #C5C5C5;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--mark-pro, sans-serif);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.archive-filtro-btn.btn-archive:hover {
    background: #C8C9C8;
    border-color: #B0B1B0;
    color: #111111;
}

/* ================================================================
   BADGE "JEUNE PUBLIC" — imagen SVG alojada en el theme (img/).
   Grilla: overlay en la esquina superior derecha de la imagen.
   Ficha: bloque arsenal/field (as="badge") bajo el título.
   ================================================================ */
.spectacle-image-wrapper { position: relative; }
.badge-jeune-public {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 72px;
    height: 72px;
    z-index: 3;
    pointer-events: none;
}
.badge-jeune-public img { width: 100%; height: 100%; display: block; }

.is-badge-field.badge-jeune_public { margin: 12px 0; }
.is-badge-field .arsenal-badge-img { width: 88px; height: 88px; display: block; }

/* ================================================================
   TARJETA — ritmo vertical compacto del contenido
   Los <p>/<h2> traían márgenes por defecto (18–27px). Se ajustan a
   un espaciado armónico y ceñido dentro de .spectacle-content-wrapper.
   ================================================================ */
/* Sin padding lateral: el contenido y el botón se alinean al ras de la grilla.
   Se conserva aire arriba (foto→bloque) y abajo. */
.spectacle-card-item .spectacle-content-wrapper { padding: 24px 0 15px; }
.spectacle-card-item .spectacle-button-bar { padding-left: 0; padding-right: 0; }
.spectacle-card-item .spectacle-content-wrapper .spectacle-type { margin: 0 0 6px; }
.spectacle-card-item .spectacle-content-wrapper .spectacle-date,
.spectacle-card-item .spectacle-content-wrapper .spectacle-date-2 { margin: 0; line-height: 1.35; }
.spectacle-card-item .spectacle-content-wrapper .spectacle-title { margin: 8px 0 0; line-height: 1.15; }
.spectacle-card-item .spectacle-content-wrapper .spectacle-artiste { margin: 4px 0 0; }

/* ================================================================
   BADGE "COMPLET !" — círculo rojo, esquina superior izquierda.
   Sustituye al PNG rectangular (.overlay-agotado). Espeja la posición
   del badge Jeune Public (arriba a la derecha). Texto blanco, una línea.
   ================================================================ */
.spectacle-image-wrapper .badge-complet {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: clamp(92px, 30%, 120px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #C6243D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    container-type: inline-size;
}
.spectacle-image-wrapper .badge-complet span {
    font-size: 15px; /* respaldo si el navegador no soporta cqw */
    font-size: 17.5cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
/* El PNG antiguo ya no se emite; por si quedara alguna instancia, se oculta. */
.spectacle-image-wrapper .overlay-agotado { display: none; }

/* ================================================================
   HOME / ARCHIVE — botones "Télécharger" y "Feuilleter" en móvil:
   compactos; van lado a lado cuando caben y se apilan cuando no
   (fila envolvente, sin saltos de diseño fijos).
   - Medidas en rem (respetan el zoom de texto del usuario).
   - min-height 44px: objetivo táctil recomendado (WCAG 2.5.8 / HIG).
   - Sin !important: el selector `.wp-block-getwid-button-group …`
     (0,3,0) gana al CSS adicional del Personalizador (0,2,0).
   - Reglas del contenedor separadas: si un navegador no soporta
     :has(), la regla de respaldo (.spectacles-saison-header) sigue
     aplicándose.
   ================================================================ */
@media (max-width: 781px) {
    .wp-block-getwid-button-group {
        --arsenal-btn-pad-y: 0.6875rem;
        --arsenal-btn-pad-x: 1.375rem;
        --arsenal-btn-size: 0.8125rem;
        --arsenal-btn-icon: 1.25rem;
        --arsenal-btn-gap: 0.625rem;
    }
    .wp-block-getwid-button-group:has(.btn-plaquette, .btn-calameo) {
        width: 100%; /* el grupo de Getwid medía max-content: desbordaba y no dejaba usar la fila */
        max-width: 100%;
    }
    .spectacles-saison-header .wp-block-getwid-button-group {
        width: 100%;
        max-width: 100%;
    }
    .wp-block-getwid-button-group__wrapper:has(.btn-plaquette, .btn-calameo) {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        gap: var(--arsenal-btn-gap, 0.625rem);
        width: 100%;
    }
    .spectacles-saison-header .wp-block-getwid-button-group__wrapper {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        gap: var(--arsenal-btn-gap, 0.625rem);
        width: 100%;
    }
    .wp-block-getwid-button-group .btn-plaquette,
    .wp-block-getwid-button-group .btn-calameo {
        width: auto;
        min-width: min(100%, 15.625rem); /* ambos miden igual al apilarse */
        margin: 0;
    }
    .wp-block-getwid-button-group .btn-plaquette .wp-block-button__link,
    .wp-block-getwid-button-group .btn-calameo .wp-block-button__link {
        box-sizing: border-box;
        width: 100%;
        min-height: 44px;
        padding: var(--arsenal-btn-pad-y, 0.6875rem) var(--arsenal-btn-pad-x, 1.375rem);
        font-size: var(--arsenal-btn-size, 0.8125rem);
        letter-spacing: 0.04em;
        gap: 0.5rem;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .wp-block-getwid-button-group .btn-plaquette .wp-block-button__link::before,
    .wp-block-getwid-button-group .btn-calameo .wp-block-button__link::before {
        width: var(--arsenal-btn-icon, 1.25rem);
        height: var(--arsenal-btn-icon, 1.25rem);
    }
}