/**
 * mg-ui.css: pop-ups, dropdowns, alerts, close buttons and expanding
 * sections, our own copy, so they no longer come from Bootstrap. The
 * behaviour is assets/js/mg-ui.js.
 *
 * It looks exactly like Bootstrap 5.3 did (checked element by element), on
 * purpose: production still shows the classic crossword and SudoKa to
 * everyone as the control side of the look test, and those must not change.
 * Restyling into the frontpage look happens per page, not here.
 *
 * Load it straight after bootstrap-mg.min.css, where these rules used to be,
 * so every site stylesheet after it still wins as before.
 * build-bootstrap.mjs leaves these components out of the trimmed Bootstrap.
 */

/* Fade and collapse ----------------------------------------------------- */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
.collapsing.collapse-horizontal { width: 0; height: auto; transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .fade, .collapsing, .collapsing.collapse-horizontal { transition: none; }
}

/* Dropdowns -------------------------------------------------------------
   Placed by CSS under their toggle (mg-ui.js marks an open menu
   data-bs-popper="static"); no Popper. */
.dropdown, .dropstart { position: relative; }
.dropdown-toggle { white-space: nowrap; }
.dropdown-toggle::after {
  display: inline-block; margin-left: .255em; vertical-align: .255em; content: "";
  border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;
}
.dropdown-toggle:empty::after { margin-left: 0; }
.dropdown-menu {
  position: absolute; z-index: 1000; display: none; min-width: 10rem; padding: .5rem 0; margin: 0;
  font-size: 1rem; color: #212529; text-align: left; list-style: none;
  background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .175); border-radius: .375rem;
}
.dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: .125rem; }
.dropdown-menu-end[data-bs-popper] { right: 0; left: auto; }
.dropstart .dropdown-menu[data-bs-popper] { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: .125rem; }
.dropstart .dropdown-toggle::after { display: none; }
.dropstart .dropdown-toggle::before {
  display: inline-block; margin-right: .255em; vertical-align: 0; content: "";
  border-top: .3em solid transparent; border-right: .3em solid; border-bottom: .3em solid transparent;
}
.dropdown-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, .175); opacity: 1; }
.dropdown-item {
  display: block; width: 100%; padding: .25rem 1rem; clear: both; font-weight: 400; color: #212529;
  text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0;
}
.dropdown-item:focus, .dropdown-item:hover { color: #212529; background-color: #f8f9fa; }
.dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; background-color: #0d6efd; }
.dropdown-item.disabled, .dropdown-item:disabled { color: rgba(33, 37, 41, .5); pointer-events: none; background-color: transparent; }
.dropdown-menu.show { display: block; }
.dropdown-header { display: block; padding: .5rem 1rem; margin-bottom: 0; font-size: .875rem; color: #6c757d; white-space: nowrap; }

/* Alerts -----------------------------------------------------------------
   The colour pair travels in custom properties so .alert-link inside picks
   up its alert's colour. */
.alert {
  --mg-alert-color: inherit; --mg-alert-bg: transparent; --mg-alert-border: transparent; --mg-alert-link: inherit;
  position: relative; padding: 1rem; margin-bottom: 1rem;
  color: var(--mg-alert-color); background-color: var(--mg-alert-bg);
  border: 1px solid var(--mg-alert-border); border-radius: .375rem;
}
.alert-heading { color: inherit; }
.alert-link { font-weight: 700; color: var(--mg-alert-link); }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; }
.alert-primary { --mg-alert-color: #052c65; --mg-alert-bg: #cfe2ff; --mg-alert-border: #9ec5fe; --mg-alert-link: #052c65; }
.alert-success { --mg-alert-color: #0a3622; --mg-alert-bg: #d1e7dd; --mg-alert-border: #a3cfbb; --mg-alert-link: #0a3622; }
.alert-info    { --mg-alert-color: #055160; --mg-alert-bg: #cff4fc; --mg-alert-border: #9eeaf9; --mg-alert-link: #055160; }
.alert-warning { --mg-alert-color: #664d03; --mg-alert-bg: #fff3cd; --mg-alert-border: #ffe69c; --mg-alert-link: #664d03; }
.alert-danger  { --mg-alert-color: #58151c; --mg-alert-bg: #f8d7da; --mg-alert-border: #f1aeb5; --mg-alert-link: #58151c; }
.alert-light   { --mg-alert-color: #495057; --mg-alert-bg: #fcfcfd; --mg-alert-border: #e9ecef; --mg-alert-link: #495057; }

/* Close button ----------------------------------------------------------- */
.btn-close {
  box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0; border-radius: .375rem; opacity: .5;
}
.btn-close:hover { color: #000; text-decoration: none; opacity: .75; }
.btn-close:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); opacity: 1; }
.btn-close.disabled, .btn-close:disabled { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: .25; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* Pop-ups (modals) ------------------------------------------------------- */
.modal {
  position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }
.modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }
.modal.show .modal-dialog { transform: none; }
.modal.modal-static .modal-dialog { transform: scale(1.02); }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%; color: #212529; pointer-events: auto;
  background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .175); border-radius: .5rem; outline: 0;
}
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .5; }
.modal-header {
  display: flex; flex-shrink: 0; align-items: center; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(.5rem - 1px); border-top-right-radius: calc(.5rem - 1px);
}
.modal-header .btn-close { padding: .5rem .5rem; margin: -.5rem -.5rem -.5rem auto; }
.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.modal-footer {
  display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: .75rem;
  border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(.5rem - 1px); border-bottom-left-radius: calc(.5rem - 1px);
}
.modal-footer > * { margin: .25rem; }
@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
}
@media (min-width: 992px) {
  .modal-lg { max-width: 800px; }
}