/* =============================================================================
   Popup Block – Frontend Styles
   Geladen auf dem Frontend UND im Gutenberg-Editor (via "style" in block.json).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Overlay
   ----------------------------------------------------------------------------- */

/**
 * Das Overlay ist immer im DOM (position: fixed), aber durch opacity: 0 und
 * pointer-events: none unsichtbar und nicht klickbar.
 * Die Overlay-Farbe wird via CSS Custom Property --popup-overlay-color gesetzt
 * (PHP setzt das inline auf dem Element).
 * Ein ::before-Pseudo-Element übernimmt Farbe + Deckkraft, damit der weiße
 * Container davon nicht beeinflusst wird.
 */
.popup-block-overlay {
    display:          flex;
    position:         fixed;
    inset:            0;
    z-index:          99999;
    align-items:      center;
    justify-content:  center;
    backdrop-filter:        blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Standardmäßig verborgen */
    opacity:        0;
    pointer-events: none;
    visibility:     hidden;

    transition:
        opacity    0.25s ease,
        visibility 0.25s ease;
}

/* Farbiges Overlay als Pseudo-Element (Deckkraft getrennt vom Inhalt) */
.popup-block-overlay::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-color: var(--popup-overlay-color, #000);
    opacity:          0.85;
    pointer-events:   none;
}

/* Geöffneter Zustand */
.popup-block-overlay.is-open {
    opacity:        1;
    pointer-events: auto;
    visibility:     visible;
}

/* -----------------------------------------------------------------------------
   Popup-Container (weiße, gerundete Fläche)
   ----------------------------------------------------------------------------- */

.popup-block-container {
    position:       relative;
    z-index:        1;         /* über dem ::before-Pseudo-Element */
    background:     #ffffff;
    border-radius:  0.75rem;

    /* Layout */
    width:          100%;
    max-width:      var(--wide-size, 1200px);
    margin:         var(--padding-outer, 1.5rem);
    max-height:     calc(100dvh - 2 * var(--padding-outer, 1.5rem));
    overflow-y:     auto;
    overscroll-behavior: contain;

    /* Eintrittsanimation */
    transform:  translateY(1rem) scale(0.98);
    transition: transform 0.25s ease;

    /* Schatten */
    box-shadow:
        0  4px  16px rgba(0, 0, 0, 0.12),
        0 20px  60px rgba(0, 0, 0, 0.20);
}

/* Fallback wenn dvh nicht unterstützt wird */
@supports not (max-height: 1dvh) {
    .popup-block-container {
        max-height: calc(100vh - 2 * var(--padding-outer, 1.5rem));
    }
}

.popup-block-overlay.is-open .popup-block-container {
    transform: translateY(0) scale(1);
}

/* Falls eine individuelle max-width per Block-Attribut gesetzt wurde,
   greift der inline style="max-width:…" direkt auf .popup-block-container. */

/* -----------------------------------------------------------------------------
   Close-Button
   ----------------------------------------------------------------------------- */

.popup-block-close {
    position:   absolute;
    top:        0.875rem;
    right:      0.875rem;
    z-index:    2;

    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    padding:         0;

    background:    transparent;
    border:        none;
    border-radius: 50%;
    cursor:        pointer;
    line-height:   0;

    /* Farbe des X-Symbols */
    color: var(--wp--preset--color--foreground, currentColor);

    transition: background-color 0.15s ease;
}

.popup-block-close:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

.popup-block-close:focus-visible {
    outline:        2px solid var(--wp--preset--color--foreground, currentColor);
    outline-offset: 2px;
}

.popup-block-close svg {
    display:        block;
    width:          0.9375rem;   /* 15px */
    height:         0.9375rem;
    fill:           currentColor;
    pointer-events: none;
    flex-shrink:    0;
}

/* -----------------------------------------------------------------------------
   Inhalt
   ----------------------------------------------------------------------------- */

.popup-block-content {
    padding: 2.5rem 2rem 2rem;
}

/* Etwas mehr Platz, damit der Close-Button den ersten Paragraph nicht überlappt */
.popup-block-content > *:first-child {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Body-Scroll-Lock
   ----------------------------------------------------------------------------- */

/* Wird per JS auf <html> gesetzt, wenn mindestens ein Popup offen ist */
html.popup-is-open {
    overflow: hidden;
}