/* GOOGLE FORM EMBED
   -----------------------------------------------------------------------
   The container js/form-embed.js renders a Google Form into. Nothing here is
   page-specific, so a new embedded form needs no new css.

   It borrows the surface the Stop the Rumor action cards already use - same
   translucent white, same border, same accent rule along the top - so an
   embedded form reads as part of the same family rather than as a pasted-in
   iframe.

   Everything is written with logical properties and centred text, so the block
   is identical in LTR and RTL and needs no [dir] overrides. */

.gform {
  max-width: 820px;
  margin-inline: auto;
  padding: 2rem 1.75rem;
  border-radius: 1.5rem;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-top: 3px solid var(--accent-orange, #fb923c);
  box-shadow: 0 18px 40px hsla(0, 0%, 0%, 0.22);
}

.gform__head {
  margin-bottom: 1.5rem;
  text-align: center;
}

.gform__title {
  color: var(--title-color);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.gform__desc {
  color: var(--text-color);
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
  margin-inline: auto;
}

/* The iframe is a window onto Google's own page. It is cross-origin, so its
   content cannot be measured and the form cannot size itself: each registry
   entry states the height it needs and the frame scrolls internally rather
   than cropping a question. */
.gform__frame {
  --gform-height: 1100px;
  border-radius: 1rem;
  overflow: hidden;
  /* Google Forms renders on white; matching it keeps the corners clean while
     the iframe is still loading. */
  background: #fff;
}

.gform__frame iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--gform-height);
  border: 0;
}

/* Shown while the project owner has not supplied the form url yet. */
.gform__pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed hsla(0, 0%, 100%, 0.28);
  border-radius: 1rem;
  background: hsla(0, 0%, 0%, 0.15);
  text-align: center;
}

.gform__pending-icon {
  font-size: 2rem;
  color: var(--first-color-light, #f59e5b);
  line-height: 1;
}

.gform__pending-text {
  color: var(--text-color);
  opacity: 0.9;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

.gform__out {
  margin: 1rem 0 0;
  text-align: center;
}

.gform__out-link {
  color: var(--first-color-light, #f59e5b);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gform__out-link:hover {
  color: var(--title-color);
}

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

  /* A Google Form grows taller as it narrows: give the frame more room on a
     phone so the reader scrolls the page, not the inside of an iframe.

     This scales the declared height rather than redefining --gform-height,
     because js/form-embed.js writes that variable inline from the registry and
     an inline custom property would win over anything declared here. */
  .gform__frame iframe {
    height: calc(var(--gform-height) * 1.35);
  }
}

@media screen and (max-width: 420px) {
  .gform {
    padding: 1.25rem 0.9rem;
  }
}