/*
 * Corza modal atom.
 *
 * Lifted from corza.com's `.l-search` / `.l-search__modal`:
 *   - Backdrop  position: fixed; inset: 0; rgba(0,0,0,.8); z-index: 101
 *   - Panel     white, 970px wide, 5px radius, 90px/45px padding,
 *               offset 80px from top of backdrop (anchored top-third)
 *   - Heading   matches `.t-h2` (28/32 700) with a modal-scoped 40px
 *               bottom margin (corza.com pushes the heading away from
 *               the form input below it)
 *   - Close     20px teal SVG, top-right 22.5px inset
 *
 * Open/close is class-based (`.is-active`). The backdrop fades opacity
 * over 300ms; the panel slides up + fades via the same toggle. No JS
 * keyframe — pure CSS transition.
 *
 * Sizes (sm/md/lg) are a Form Factory addition — corza.com only ships
 * the one width. md (970px) is the corza.com value.
 */

.c-modal {
  align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  overflow-y: auto;
  padding: 80px 16px 40px;
  pointer-events: none;
  position: fixed;
  transition:
    opacity var(--corza-transition-base),
    visibility var(--corza-transition-base);
  visibility: hidden;
  z-index: 101;
}

.c-modal.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Panel — anchors top-third of the viewport via flex `align-items:
 * flex-start` + the 80px top padding on `.c-modal`, matching
 * corza.com's `top: 80px` offset on `.l-search__modal`. */
.c-modal__panel {
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--corza-ink);
  font-family: var(--corza-font-display);
  font-size: 22.5px;
  font-weight: 300;
  line-height: 33.75px;
  max-width: calc(100vw - 32px);
  padding: 90px 45px;
  position: relative;
  text-align: left;
  transform: translateY(-12px);
  transition:
    transform var(--corza-transition-base),
    opacity var(--corza-transition-base);
  width: 970px;
  z-index: 999;
}

.c-modal.is-active .c-modal__panel {
  transform: translateY(0);
}

/* Sizes */
.c-modal--sm .c-modal__panel {
  width: 520px;
}
.c-modal--md .c-modal__panel {
  width: 970px;
}
.c-modal--lg .c-modal__panel {
  width: 1120px;
}

/* Heading — reuses .t-h2 scale; modal-scoped bottom margin matches
 * corza.com's 40px (its `.t-h2` has 8px bottom-margin by default). */
.c-modal__heading {
  margin: 0 0 40px;
}

/* Close button — 20px teal SVG icon, transparent background, no
 * border. Hover shifts to ink. Sized hit-target is the icon itself
 * (20px square at 22.5px inset is reachable on desktop; for touch we
 * widen the hit-area via padding without growing the visual icon).
 */
.c-modal__close {
  background: transparent;
  border: 0;
  color: var(--corza-teal);
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  padding: 0;
  position: absolute;
  right: 22.5px;
  top: 22.5px;
  transition: color var(--corza-transition-base);
  width: 20px;
}

.c-modal__close:hover,
.c-modal__close:focus-visible {
  color: var(--corza-ink);
}

.c-modal__close:focus-visible {
  outline: 2px solid var(--corza-orange);
  outline-offset: 4px;
}

.c-modal__close svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* Lock background scroll while a modal is open. Add via JS:
 *   document.body.classList.toggle('has-modal-open', isOpen)
 */
body.has-modal-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .c-modal__panel {
    padding: 56px 24px;
  }
  .c-modal__heading {
    margin-bottom: 24px;
  }
}