/* Download Modal - styling for layouts/shortcodes/download-modal.html.
   Colours come from the Bootstrap theme variables, so the dialog follows
   the light/dark switch with no rules of its own for either mode. */

/* ====================================================================
   Dialog shell
   ==================================================================== */
/* No padding on the <dialog> itself: download-modal.js treats a click that
   lands on the element (rather than something inside it) as a backdrop
   click, so any padding here would count as "outside".

   Laid out as a column: the body scrolls, the X (absolute) and the footer
   (flex: none) never do. A phone-height dialog is taller than the screen,
   and the lone OK must not be the thing that scrolls out of view. */
.opal-dl-dialog {
    position: fixed;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

/* Only when open: setting display on the bare selector would override the
   browser's display:none for a closed dialog and show it on page load. */
.opal-dl-dialog[open] {
    display: flex;
    flex-direction: column;
}

.opal-dl-dialog::backdrop {
    background: rgba(15, 12, 49, 0.72);
}

/* A modal should not let the page scroll behind it. */
body:has(.opal-dl-dialog[open]) {
    overflow: hidden;
}

.opal-dl-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.5rem 1.75rem 0.5rem;
    overflow-y: auto;
}

.opal-dl-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 1;
}


/* ====================================================================
   Sections
   ==================================================================== */
.opal-dl-dialog__section {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 0;
}

.opal-dl-dialog__section + .opal-dl-dialog__section {
    border-top: 1px solid var(--bs-border-color);
}

/* Keeps the title clear of the X in the corner. */
.opal-dl-dialog__section--lead {
    padding-top: 0.25rem;
    padding-right: 1.75rem;
}

.opal-dl-dialog__icon {
    flex: 0 0 2rem;
    padding-top: 0.2rem;
    text-align: center;
    font-size: 1.35rem;
    color: var(--bs-link-color);
}

/* Two classes, so this beats the site's own h2/h3 margins and sizes
   without needing !important. */
.opal-dl-dialog .opal-dl-dialog__heading {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.opal-dl-dialog .opal-dl-dialog__heading--title {
    font-size: 1.35rem;
}

.opal-dl-dialog .opal-dl-dialog__text {
    margin: 0;
    line-height: 1.55;
}

.opal-dl-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}


/* ====================================================================
   Footer - the lone OK, bottom right
   ==================================================================== */
.opal-dl-dialog__footer {
    flex: none;
    display: flex;
    justify-content: flex-end;
    padding: 0.9rem 1.75rem 1.25rem;
}


/* ====================================================================
   Phones
   ==================================================================== */
@media (max-width: 575.98px) {
    .opal-dl-dialog__body   { padding: 1.25rem 1.25rem 0.25rem; }
    .opal-dl-dialog__footer { padding: 0.75rem 1.25rem 1rem; }
    .opal-dl-dialog__section { gap: 0.75rem; }
    .opal-dl-dialog .opal-dl-dialog__heading--title { font-size: 1.2rem; }
    .opal-dl-dialog .opal-dl-dialog__text { font-size: 0.92rem; line-height: 1.5; }
}