/* ================================================================
   MODAL BASE — shared drop-in shell
   ================================================================
   The generic overlay/panel/close-button/field/error system used by
   every modal on this site (see css/contact-modal.css and
   css/donate-modal.css). One modal, one CSS system — link this file
   once, then each modal's own stylesheet only adds what's actually
   different about it (a trigger band, an iframe frame, etc).

   Markup contract each modal follows:
     <div class="modal" :class="{ 'modal--open': <open-flag> }"
          @keydown.escape.window="if (<open-flag>) <close-fn>">
       <div class="modal__backdrop" @click="<close-fn>"></div>
       <div class="modal__panel" role="dialog" aria-modal="true"
            aria-labelledby="...">
         <button class="modal__close" @click="<close-fn>"
                 aria-label="Close">&times;</button>
         <span class="modal__label">...</span>
         <h3 class="modal__heading">...</h3>
         <p class="modal__intro">...</p>
         ... modal-specific content (form fields, an iframe, ...) ...
       </div>
     </div>

   TO REUSE ON ANOTHER SITE:
     1. Copy this file alongside whichever modal(s) use it.
     2. This file assumes the host page defines these CSS custom
        properties on :root (values below are this site's — swap
        them for the target site's own palette/scale):
          --navy / --white / --red / --gray-100 / --gray-200 /
          --gray-500 / --gray-700 / --text
          --font-display / --font-body
          --text-xs / -sm / -2xl
          --space-2 / -3 / -4 / -6 / -8
          --radius-sm / -lg / -full
          --shadow-xl
          --transition-fast / -base / -slow
     3. Colors and type are the only things meant to be hand-tuned
        here — everything else (spacing, motion, layout) is driven
        by the scale tokens above, so a palette/font swap re-themes
        every modal on the site automatically.
   ================================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-slow), visibility 0s var(--transition-slow);
}

.modal--open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--transition-slow);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 68, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden; /* setting only overflow-y otherwise makes the
                          browser treat overflow-x as auto too (per
                          spec) — a stray horizontal scrollbar shows
                          up the instant a child is a pixel wider
                          than the panel's content box */
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-xl);
  transform: translateY(16px) scale(0.97);
  transition: transform var(--transition-slow);
}

.modal--open .modal__panel {
  transform: translateY(0) scale(1);
}

/* Flush variant — for content that should bleed to the panel's own
   edges (e.g. an embedded iframe) instead of sitting inside padding.
   Add .modal__panel-header for the label/heading/close-button row
   when using this variant, so they keep normal inset spacing. */
.modal__panel--flush {
  padding: 0;
}

/* Frame variant — for a panel whose main content is a natively-
   scrolling iframe. Rather than letting BOTH the panel (overflow-y:
   auto) and the iframe's own framed document scroll independently —
   two separate, easy-to-misalign scrollbars for what should be one
   experience — this fixes the panel's height and turns it into a
   flex column so .modal__panel-header/-footer stay pinned in place,
   and only the iframe (100% height of the space left over) ever
   scrolls, using its own single, always-reliable native scrollbar. */
.modal__panel--frame {
  display: flex;
  flex-direction: column;
  height: min(720px, 85vh);
  overflow: hidden;
}

.modal__panel--frame > .modal__panel-header,
.modal__panel--frame > .modal__panel-footer {
  flex-shrink: 0;
}

/* Wide variant — for content that wants more breathing room than the
   default 460px (e.g. an embedded multi-column form) */
.modal__panel--wide {
  max-width: 520px;
}

.modal__panel-header {
  position: relative;
  padding: var(--space-6) var(--space-8) var(--space-4);
}

.modal__panel-footer {
  padding: var(--space-4) var(--space-8) var(--space-6);
}

.modal__panel-footer .modal__fallback {
  margin-top: 0;
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  font-size: var(--text-2xl);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
  background: var(--gray-100);
  color: var(--navy);
}

.modal__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-2);
}

.modal__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.modal__intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray-500);
  margin-bottom: var(--space-6);
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.modal__field label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-700);
}

.modal__field input,
.modal__field textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color var(--transition-fast);
}

.modal__field input:focus,
.modal__field textarea:focus {
  outline: none;
  border-color: var(--navy);
}

.modal__field textarea {
  resize: vertical;
  min-height: 110px;
}

.modal__input--error {
  border-color: var(--red) !important;
}

.modal__error {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--red);
  margin-top: -0.2rem;
}

/* reCAPTCHA renders at a fixed 304px — let it scroll rather than
   overflow the panel on very narrow screens. Shared by every modal
   with a reCAPTCHA gate (Suggest a Priority, Volunteer, Yard Sign). */
.g-recaptcha {
  max-width: 100%;
  overflow-x: auto;
}

.modal__actions .btn {
  width: 100%;
}

.modal__actions .btn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.modal__fallback {
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.modal__fallback a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .modal__panel {
    padding: var(--space-6) var(--space-5);
  }

  .modal__panel--flush {
    padding: 0;
  }

  .modal__panel-header {
    padding: var(--space-5) var(--space-5) var(--space-3);
  }

  .modal__panel-footer {
    padding: var(--space-3) var(--space-5) var(--space-5);
  }
}