/**
 * BASE / WP-CORE
 * -----------------------------------------------------------------------------
 * Clases que WordPress genera por su cuenta: alineaciones, captions, bloques,
 * accesibilidad y barra de administración. No añadir aquí estilos del tema.
 */

/* --- Accesibilidad ----------------------------------------------------- */

.screen-reader-text,
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-xs);
    width: auto;
    height: auto;
    clip: auto;
    padding: var(--space-sm) var(--space-md);
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius-sm);
    z-index: var(--z-modal);
}

/* --- Alineaciones de contenido ----------------------------------------- */

.alignwide {
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0 var(--space-md) var(--space-sm) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--space-sm) var(--space-md);
}

/* --- Media / captions -------------------------------------------------- */

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    margin-top: var(--space-xs);
}

/* --- Bloques ----------------------------------------------------------- */

.wp-block-button__link {
    border-radius: var(--radius-sm);
}

/* --- Admin bar --------------------------------------------------------- */

/*
 * La barra de administración solo es FIJA por encima de 600px de ancho:
 *
 *   > 782px   fija, 32px de alto
 *   601-782px fija, 46px de alto
 *   <= 600px  ABSOLUTA: se desplaza con la página
 *
 * Por eso la compensación se aplica de menor a mayor y nunca por debajo de
 * 601px. Compensar también ahí dejaba el header flotando a 46px del borde:
 * al hacer scroll la barra se iba, pero el hueco se quedaba.
 *
 * En móvil el header se pega arriba del todo y tapa la barra mientras la
 * página está sin desplazar, que es el comportamiento habitual en WordPress.
 */
@media screen and (min-width: 601px) {

    .admin-bar .site-header {
        top: 46px;
    }

    .admin-bar .mobile-panel {
        top: calc(var(--header-height-md) + 46px);
        max-height: calc(100vh - var(--header-height-md) - 46px);
    }
}

@media screen and (min-width: 783px) {

    .admin-bar .site-header {
        top: 32px;
    }
}