/*
 * Miarto Studio – Globale Basisstile
 *
 * Reset, Container, Skip-Link und seitenübergreifende Utilities.
 */

/* ---- Box-Sizing ---- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---- Fokus-Markierung (WCAG 2.4.11) ---- */

/* Browser-Standard-Outline entfernen, eigene konsistente Regel setzen */
:focus {
    outline: none;
}

:focus-visible {
    outline:        2px solid var(--ms-accent);
    outline-offset: 3px;
    border-radius:  2px;
}

/* ---- Body ---- */

body {
    font-family:      var(--ms-font-body);
    color:            var(--ms-color-anthracite);
    background-color: var(--ms-color-white);
    margin:           0;
    line-height:      1.6;
}

/* ---- Container ---- */

.ms-container {
    max-width:      var(--ms-container-width);
    margin-inline:  auto;
    padding-inline: var(--ms-space-6);
}

/* ---- Skip-Link (Barrierefreiheit) ---- */

.skip-link {
    position:   absolute;
    top:        -100%;
    left:       var(--ms-space-4);
    background: var(--ms-color-anthracite);
    color:      var(--ms-color-white);
    padding:    var(--ms-space-2) var(--ms-space-4);
    z-index:    9999;
    font-size:  0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top var(--ms-transition);
}

.skip-link:focus {
    top: 0;
}

/* ---- Screen-Reader-Only ---- */

.screen-reader-text {
    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 {
    position:   static;
    width:      auto;
    height:     auto;
    overflow:   visible;
    clip:       auto;
    white-space: normal;
}

/* ---- Overlay (Mobile Nav Backdrop) ---- */

.nav-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--ms-overlay-bg);
    z-index:    var(--ms-z-overlay);
    cursor:     pointer;
}

.nav-is-open .nav-overlay {
    display: block;
}

/* ---- Core Gallery Block – Theme Overrides ---- */

.wp-block-gallery {
    gap: var(--ms-space-3) !important;
}

.wp-block-gallery .wp-block-image img {
    border-radius: var(--ms-radius-sm);
    cursor:        zoom-in;
    transition:    opacity var(--ms-transition);
}

.wp-block-gallery .wp-block-image:hover img {
    opacity: 0.88;
}

.wp-block-gallery figcaption {
    font-size: 0.8125rem;
}

/* ---- Kadence Advanced-Image-Block – Theme Overrides ---- */

/*
 * Kadence liefert fuer den Seitenverhaeltnis-Wrapper standardmaessig keinen
 * Radius (nur ueber eine manuelle Block-Einstellung pro Bild). Corporate-
 * Design-Regel: Bilder erhalten durchgaengig radius-lg statt scharfer Kanten
 * (siehe miarto-design-system, public/index.html, Abschnitt "Radius-Skala").
 *
 * Root Cause fuer eckige untere Ecken: Das Kadence-Blocks-Plugin-CSS wird auf
 * einigen Seiten gar nicht geladen. Dadurch fehlt dem <img> Kadence' eigenes
 * display:block/width/height/object-fit – es bleibt beim Browser-Standard
 * display:inline und erzeugt darunter eine ca. 8px hohe Luecke (Inline-
 * Baseline-Gap). Diese Luecke liegt UNTERHALB des Fotos, innerhalb der
 * gerundeten Box, und macht den unteren Rand optisch eckig. Fix: img explizit
 * blockifizieren und exakt auf die Box strecken, unabhaengig davon, ob
 * Kadence' eigenes CSS geladen ist. border-radius: inherit auf dem <img>
 * selbst als zusaetzliche Absicherung.
 */
.wp-block-kadence-image .kb-is-ratio-image {
    border-radius: var(--ms-radius-lg);
    overflow:      hidden;
}

.wp-block-kadence-image .kb-is-ratio-image img {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: inherit;
}