/* Bootstrap provides the controls and utilities. The supplied theme wins. */
@layer bootstrap, amruta-browser-defaults;
@import url("../vendor/bootstrap/bootstrap.min.css") layer(bootstrap);

/* The original React export used native browser typography, not Reboot.
   Keep those defaults so adding Bootstrap does not change a single type size,
   heading weight, paragraph margin, or form-control line height. */
@layer amruta-browser-defaults {
  :where(body, h1, h2, h3, h4, h5, h6, p, blockquote, a, b, strong, small,
    button, input, textarea, label, img, ul, ol, li) {
    all: revert;
  }

  :where(input, textarea)::placeholder {
    all: revert;
  }
}

/* The original theme supplies its exact grid tracks and breakpoints. */
:where(.amruta-grid.row) {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0;
}

:where(.amruta-grid.row) > * {
  width: auto;
  max-width: none;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

[hidden] {
  display: none !important;
}

/* Modals use Bootstrap's keyboard handling and focus trap, with the exact
   original overlay, card dimensions, blur, and close-button artwork. */
.amruta-modal-overlay.modal:not(.show) {
  display: none;
}

.amruta-modal-overlay.modal.show {
  display: flex !important;
}

.amruta-modal-overlay > .modal-dialog {
  margin: 0;
  pointer-events: auto;
}

.accordion-list p.collapse.show,
.accordion-list p.collapsing {
  display: block;
}

.accordion-list .collapsing,
.main-nav.collapsing {
  transition: none;
}

@media (max-width: 900px) {
  .main-nav.collapse.show,
  .main-nav.collapsing {
    display: flex;
    flex-direction: column;
    height: auto !important;
    overflow: visible;
  }
}

@media (max-width: 680px) {
  .amruta-modal-overlay > .modal-card.modal-dialog {
    margin-top: 12px;
  }
}