/* IN-SITE FORM PAGE
   -----------------------------------------------------------------------
   The frame around an embedded Google Form when that form gets a page of its
   own: rumor-report.html and pledge.html today.

   It is the .mederr-card layout from report-medication-error.html, lifted into
   a shared file rather than copied into each page, because both pages want the
   identical hero and neither owns it. The embedded form itself is styled by
   css/form-embed.css; nothing here touches it.

   One column, centred, written with logical properties throughout, so RTL
   needs no overrides beyond the back arrow below. */

.formpage-card {
  background: var(--container-color);
  border-radius: 2rem;
  padding: 3rem;
  box-shadow: 0 20px 50px hsla(0, 0%, 0%, 0.3);
  text-align: center;
}

.formpage-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: hsla(0, 0%, 100%, 0.1);
  border-radius: 2rem;
  color: var(--first-color-light);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(5px);
}

.formpage-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--title-color);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.formpage-desc {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.9;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* OPTIONAL PAGE IMAGE
   -----------------------------------------------------------------------
   One illustration between the caption and the form, for pages whose subject
   is helped by a picture. Purely additive: the four pages that came before
   this do not use it and are unaffected.

   Capped well below the panel width on purpose. The form is the functional
   element here; the image identifies the page and then gets out of the way,
   so it never becomes a hero. aspect-ratio reserves the box before the file
   decodes, so nothing below it shifts on load. */
.formpage-figure {
  margin: 2rem auto 0;
  max-width: 340px;
}

.formpage-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: contain;
}

@media screen and (max-width: 768px) {
  .formpage-figure {
    max-width: 260px;
    margin-top: 1.5rem;
  }
}

/* The embedded form sits under the hero as its own panel, so it keeps the
   accent rule and shadow css/form-embed.css gives it instead of becoming a
   second box nested inside the first. */
.formpage-embed {
  margin-top: 2.5rem;
}

/* FORM WIDTH
   -----------------------------------------------------------------------
   A Google Form draws its card at a natural maximum of 640px and centres it.
   Past roughly 740px of frame the card stops growing and every extra pixel
   becomes white margin inside the iframe: at the 764px the frame used to get,
   124px of the white box was empty, and the box itself sat nearly as wide as
   the panel around it.

   So the frame is given exactly the width the form actually wants. The card
   then fills it instead of floating in it, and the white box reads as a
   content element inside the panel rather than as the panel's lining.

   Measured, not chosen: at 640px all four forms render their card at 576px and
   grow by only 10px (2065 vs 2033 for the longest of them), so nothing rewraps
   awkwardly and nothing is clipped.

   min() keeps it responsive - 640px where there is room, the full available
   width where there is not - so a phone is untouched by this rule and no fixed
   desktop width can overflow it. margin-inline: auto centres the box in both
   LTR and RTL, since both margins resolve to the same value either way.

   Only the frame changes: the panel, its padding, radius, shadow and accent
   rule, and the heading and blurb above it, are all left as they are. */
.formpage-embed .gform__frame {
  width: min(640px, 100%);
  margin-inline: auto;
}

/* Subtle by intent: this is the way back, not a call to action, so it reads as
   quiet text with an arrow rather than as a third button competing with the
   form. */
.formpage-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  color: var(--text-color-light);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.formpage-back:hover,
.formpage-back:focus-visible {
  color: var(--first-color-light);
  opacity: 1;
}

.formpage-back i {
  font-size: 1.15rem;
  line-height: 1;
}

/* The glyph is the one thing here with a direction: bx-arrow-back points at
   the inline start in LTR and has to point the other way in RTL. */
[dir="rtl"] .formpage-back i {
  transform: scaleX(-1);
}

@media screen and (max-width: 768px) {
  .formpage-card {
    padding: 2rem 1.25rem;
    border-radius: 1.5rem;
  }

  .formpage-embed {
    margin-top: 2rem;
  }
}

/* MEASURED PHONE HEIGHT
   -----------------------------------------------------------------------
   css/form-embed.css scales the declared height by 1.35 on a phone, because a
   Google Form grows taller as it narrows and the frame must not crop it. That
   one multiplier suits a short form and overshoots a long one: the pledge form
   needs 2284px at phone width, where 1.35 would reserve 2767px and leave ~480px
   of blank white under the submit button.

   So a page may state the height it actually measured instead. --gform-height
   is written inline onto .gform__frame by js/form-embed.js and inherits to the
   iframe, so this stays a fallback rather than a duplicate source of truth, and
   a page that sets nothing keeps the shared behaviour exactly.

   Two classes deep, so it outranks the .gform__frame iframe rule it replaces. */
@media screen and (max-width: 768px) {
  .formpage-embed .gform__frame iframe {
    height: var(--gform-height-phone, calc(var(--gform-height) * 1.35));
  }
}