/* =============================================================================
   Module: modal  (modules/modal.php)
   -----------------------------------------------------------------------------
   The site-wide overlay: a blurred backdrop and one panel, centred.

   Three states, driven from assets/js/modules/modal.js:

     [hidden]     not in the layout at all - the shell costs nothing when unused
     (visible)    in the layout, but transparent: the frame the animation
                  starts and ends on
     .is-open     backdrop faded in, panel risen into place

   The panel itself never scrolls. Only .modal__body does, which is what keeps
   the close button still while the content moves under it.
   ============================================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

/* display: flex above would otherwise beat the attribute. */
.modal[hidden] {
    display: none;
}

/* --- Backdrop ----------------------------------------------------------------
   Clicking it closes, so it is a sibling of the panel rather than its parent -
   no click on the content can ever bubble to it.
   -------------------------------------------------------------------------- */

.modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(var(--rgb-blue), 0.55);
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Where the page can be blurred, the veil is lightened to let it show through.
   Without support the flat 0.55 above still separates panel from page. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal__backdrop {
        background-color: rgba(var(--rgb-blue), 0.30);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

.modal.is-open .modal__backdrop {
    opacity: 1;
}

/* --- Panel ------------------------------------------------------------------ */

.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 46rem;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-lg);

    /* Rises and settles rather than popping - the same distance the intro
       animation of the doctors uses, so the site moves consistently. */
    opacity: 0;
    transform: translateY(var(--space-sm)) scale(0.98);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.modal.is-open .modal__dialog {
    opacity: 1;
    transform: none;
}

/* --- Close ------------------------------------------------------------------
   Absolute inside the panel, not inside the scrolling body: it is pinned to the
   top right corner of the content bounds and stays there. Opaque, so text
   passing underneath does not collide with it.
   -------------------------------------------------------------------------- */

.modal__close {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-primary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.modal__close:hover,
.modal__close:focus-visible {
    background-color: var(--color-surface-alt);
    color: var(--color-accent);
}

.modal__close-icon {
    transition: transform var(--transition-base);
}

.modal__close:hover .modal__close-icon,
.modal__close:focus-visible .modal__close-icon {
    transform: rotate(90deg);
}

/* --- Body -------------------------------------------------------------------
   The top padding clears the close button (44px + its inset).
   -------------------------------------------------------------------------- */

.modal__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--space-xl) + var(--space-sm)) var(--space-lg) var(--space-lg);
}

@media (min-width: 768px) {
    .modal__body {
        padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    }
}

/* --- Page while a modal is open ---------------------------------------------
   The scrollbar is replaced by padding of the same width, so nothing shifts.
   assets/js/modules/modal.js measures it and sets --scrollbar-width.
   -------------------------------------------------------------------------- */

body.is-modal-open {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-width, 0px);
}