/* ==========================================================================
   Embedded widgets
   --------------------------------------------------------------------------
   widgets/prayer-widget.html and widgets/donation-widget.html are each a
   complete document: their own <style>, their own <script>, their own :root
   variables. They are loaded through iframes rather than pasted inline, for two
   reasons:

     1. Isolation. The prayer widget redefines --blue, --ink, --muted and --line
        on :root and sets `body { overflow: hidden }`. Pasted inline, that would
        repaint and lock the whole page; it also styles bare class names like
        .grid, .hero, .title and .head, which this site already uses. Inside a
        frame none of it escapes.
     2. Updates. Both widget files stay untouched. Updating a widget is
        replacing that one file - there is no scoped copy of its CSS or JS to
        re-integrate, and nothing here has to change unless the frame height does.

   Frame heights come from the Google Sites mockups in docs/.
   Note: _headers sends X-Frame-Options: SAMEORIGIN, so same-origin frames are
   allowed and third-party embedding of this site is still refused.
   ========================================================================== */

.widget-frame {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

/* Home page frames */
.widget-frame--prayer { height: 620px; }
.widget-frame--donate { height: 560px; }

/* The two dedicated pages have the whole viewport to work with, so the frame is
   tall enough that the widget does not have to scale its own content down. */
.page-widget .widget-frame--prayer { height: 720px; }
.page-widget .widget-frame--donate { height: 620px; }

.widget-more {
  margin: 22px 0 0;
}

.widget-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* The widget pages lead with a heading and then hand over to the frame, so the
   usual 100px band padding is split between the two sections. */
.page-head {
  padding-bottom: 8px;
}

.page-widget {
  padding-top: 20px;
}

/* A donor-protection line. A copy of this page is easy to make, and the only thing
   that tells a donor which one is real is the address, so it is said plainly. */
.widget-trust {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--navy);
  background: #f2f7fc;
  color: var(--navy);
  font-size: 13px;
}

/* Body copy on the two widget pages. The campaign sections are built from short
   headed blocks, so there was no prose class to reuse. */
.page-prose {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-prose strong {
  color: var(--ink);
}

.page-prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .widget-frame--prayer { height: 340px; }
  .widget-frame--donate { height: 520px; }

  .page-widget .widget-frame--prayer { height: 420px; }
  .page-widget .widget-frame--donate { height: 560px; }

  .page-head {
    padding-bottom: 0;
  }
}