/* =====================================================================
   HSR-Modals — the native modal system (Brand Kit V3.0)
   =====================================================================
   Replaces Elementor Pro's popup module. Paired with assets/js/hsr-modals.js.

   THE CONTRACT
     [hidden]     resting state — set as an ATTRIBUTE, not by a class.
     .is-open     visible state.
   Both are required. The attribute is what assistive tech reads and what keeps
   the dialog hidden if this stylesheet ever fails to load; the class is what
   animates.

   ⚠️ Never reuse `.elementor-*` class names in this file or any other. That
      rule exists so a `grep -r "elementor" ` on the rendered page is a
      meaningful test at WS13.
   ===================================================================== */

.hsr-modal[hidden] { display: none; }

.hsr-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hsr-s-4);
  opacity: 0;
  transition: opacity var(--hsr-dur) var(--hsr-ease);
}
.hsr-modal.is-open { opacity: 1; }

.hsr-modal__backdrop {
  position: absolute;
  inset: 0;
  /* Warm, not clinical. A cold grey scrim on a cream page reads as an error
     state; this is the navy at low alpha so the overlay still feels brand. */
  background: rgba(10, 42, 78, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hsr-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--hsr-s-8));
  overflow-y: auto;
  padding: var(--hsr-s-8);
  background: var(--hsr-white);
  border-radius: var(--hsr-r-lg);
  box-shadow: var(--hsr-sh-lg);
  transform: translateY(8px) scale(.985);
  transition: transform var(--hsr-dur) var(--hsr-ease);
}
.hsr-modal.is-open .hsr-modal__panel { transform: translateY(0) scale(1); }

.hsr-modal__panel--form { max-width: 520px; }
.hsr-modal__panel--wide { max-width: 900px; }

/* ---- Close affordance -------------------------------------------------
   44x44 minimum, per the Brand Kit. A 24px "x" in the corner of a phone
   screen is the classic reason someone taps the backdrop three times and then
   force-quits the tab. */
.hsr-modal__x {
  position: absolute;
  top: var(--hsr-s-3);
  right: var(--hsr-s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--hsr-r-pill);
  color: var(--hsr-slate);
  cursor: pointer;
  transition: background-color var(--hsr-dur) var(--hsr-ease),
              color var(--hsr-dur) var(--hsr-ease);
}
.hsr-modal__x svg { width: 20px; height: 20px; }
.hsr-modal__x:hover { background: var(--hsr-cream-100); color: var(--hsr-ink); }

.hsr-modal__title {
  margin: 0 var(--hsr-s-10) var(--hsr-s-3) 0;   /* clears the close button */
  font-family: var(--hsr-font-head);
  font-size: var(--hsr-fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--hsr-blue-800);
}

.hsr-modal__body {
  margin: 0 0 var(--hsr-s-5);
  color: var(--hsr-slate);
  font-size: 16px;
  line-height: 1.55;
}

/* The gentler alternative, offered rather than buried. Brand voice: warm,
   calm, reassuring — "archive them instead" belongs next to "delete", not in
   a help article. */
.hsr-modal__note {
  margin: 0 0 var(--hsr-s-5);
  padding: var(--hsr-s-3) var(--hsr-s-4);
  background: var(--hsr-blue-50);
  border-radius: var(--hsr-r-md);
  color: var(--hsr-slate);
  font-size: var(--hsr-fs-small);
  line-height: 1.5;
}

/* ---- Actions ----------------------------------------------------------
   Reverse-ordered on mobile so the SAFE action sits under the thumb and the
   destructive one is the deliberate reach. On desktop the destructive action
   goes last, left-to-right, which is where the eye expects "confirm". */
.hsr-modal__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--hsr-s-3);
}
.hsr-modal__actions .hsr-btn { width: 100%; }

@media (min-width: 480px) {
  .hsr-modal__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .hsr-modal__actions .hsr-btn { width: auto; }
}

/* ---- PDF preview ------------------------------------------------------
   js/georgia-homeschooling.js appends an <iframe> into #modal_pdf_preview.
   The height is deliberately viewport-relative: a fixed px height on a phone
   shows two lines of a transcript. */
.hsr-modal__pdf {
  margin-bottom: var(--hsr-s-5);
  border: 1px solid var(--hsr-line);
  border-radius: var(--hsr-r-md);
  overflow: hidden;
  background: var(--hsr-cream-50);
}
.hsr-modal__pdf iframe {
  display: block;
  width: 100%;
  height: min(60vh, 620px);
  border: 0;
}

/* ---- Scroll lock ------------------------------------------------------
   The JS sets position:fixed on <body> and restores scrollY on close. This
   class is here so anything else that needs to know can ask. */
body.hsr-modal-open { overflow: hidden; }

/* ---- Small screens ---------------------------------------------------- */
@media (max-width: 479px) {
  .hsr-modal { padding: 0; align-items: flex-end; }
  .hsr-modal__panel {
    max-width: none;
    max-height: 90vh;
    border-radius: var(--hsr-r-lg) var(--hsr-r-lg) 0 0;
    padding: var(--hsr-s-6) var(--hsr-s-5) var(--hsr-s-8);
    transform: translateY(16px);
  }
  .hsr-modal.is-open .hsr-modal__panel { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hsr-modal,
  .hsr-modal__panel { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * KIT OVERRIDE — the close button. Reported by Mark 2026-08-02 with a
 * screenshot: a solid blue rounded rectangle with no visible X.
 *
 * MEASURED, not guessed. Three rules matched the button. The winner was
 *     .elementor-kit-9 button          (0,1,1)
 * which beats
 *     .hsr-modal__x                    (0,1,0)
 * and supplied background-color, padding: 13px 26px, border-radius and color.
 *
 * The missing X follows from that padding rather than being a second bug: the
 * button is 44px wide with border-box sizing, 26px of padding on each side
 * leaves a content box of zero, and the svg — a flex item with the default
 * flex-shrink: 1 — collapsed to width 0 while keeping height 20. Computed style
 * read exactly that on the svg, width 0 / height 20, which is the fingerprint.
 *
 * Doubling the class scores (0,2,0), which beats (0,1,1) on class count. This
 * is project rule 2 again — the sixth time on this project, after
 * .hsr-btn--primary, .hsr-ftr__h, .hsr-hdr__signin, .hsr-contact__asideh and
 * .hsr-faq__contacth.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-modal__x.hsr-modal__x {
  box-sizing: border-box;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: var(--hsr-r-pill);
  color: var(--hsr-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* flex: 0 0 auto is the part that keeps the glyph from being squeezed away
   again if any future rule puts padding back on the button. */
.hsr-modal__x.hsr-modal__x svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.hsr-modal__x.hsr-modal__x:hover,
.hsr-modal__x.hsr-modal__x:focus-visible {
  background-color: var(--hsr-cream-100);
  color: var(--hsr-ink);
}

/* ════════════════════════════════════════════════════════════════════════════
 * KIT OVERRIDE — the modal heading. Measured 2026-08-03 on a live student
 * profile, against the shells that have been printing since WS7 phase 1.
 *
 *     .elementor-kit-9 h2   (0,1,1)   beats   .hsr-modal__title   (0,1,0)
 *
 * and supplied font-size 34px, font-weight 700 and color #16305C, so only the
 * margin and line-height in the rule above ever applied. Every native modal
 * title on the site — including the five phase-1 confirm-delete dialogs that
 * are already live — rendered 34px/700/#16305C instead of the intended
 * 26px/600/#0C3A6B.
 *
 * It also means the heading would have resized on its own at WS12, when kit 9
 * stops loading. Pinning it here makes Elementor removal a no-op for modals.
 *
 * Project rule 2 again — the seventh instance, after .hsr-btn--primary,
 * .hsr-ftr__h, .hsr-hdr__signin, .hsr-contact__asideh, .hsr-faq__contacth and
 * .hsr-modal__x.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-modal__title.hsr-modal__title {
  font-family: var(--hsr-font-head);
  font-size: var(--hsr-fs-h3);
  font-weight: 600;
  color: var(--hsr-blue-800);
}