/* Embed component
   Something hosted elsewhere, shown in a frame. Presentation driven by the
   settings resolved in _Embed_Base.cshtml. */

.embed {
    margin-bottom: 1.5rem;
}

.embed__header {
    margin-bottom: 1.25rem;
}

.embed--align-center .embed__header {
    text-align: center;
}

.embed__eyebrow {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.embed__title {
    margin-bottom: 0.5rem;
}

.embed__intro > :last-child {
    margin-bottom: 0;
}

/* Width -------------------------------------------------------------------
   Centred by its own margins, so the frame narrows without the heading
   moving away from it. */
.embed--w-narrow .embed__frame,
.embed--w-narrow .ratio {
    max-width: 30rem;
}

.embed--w-medium .embed__frame,
.embed--w-medium .ratio {
    max-width: 48rem;
}

.embed--align-center .embed__frame,
.embed--align-center .ratio {
    margin-inline: auto;
}

/* Shape -------------------------------------------------------------------
   Bootstrap names the fixed ratios. These are the two it does not: a tall
   frame for a form, and one that takes whatever height it is given. */
/* Tall enough for the whole form, measured rather than guessed: a Donorbox
   form runs about 770px at the site band and about 700px at phone width, and
   this frame used to be 720px - so the bottom of it, the button that submits
   the thing, was cut off.

   In px, not rem, and that is the point: site.css drops the root font to 14px
   below 768px, so a height in rem shrinks by an eighth exactly where the form
   does not. The form's height is the provider's, not our typography's. */
.embed__frame--tall {
    height: 830px;
}

.embed__frame--auto {
    min-height: 20rem;
}

.embed__frame > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* There used to be a shorter frame on a phone, on the reasoning that one
   taller than the screen traps the page's scroll under a finger. It is the
   other way round: a frame shorter than its form is exactly what has
   something to scroll, and a frame that fits has nothing, so the gesture
   reaches the page instead of the form. One height serves both widths. */

/* Banner and ruled, the same two looks the card group and the feed have, so
   a page mixing them reads as one system. */
.embed--style-ruled .embed__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.embed--style-banner .embed__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.embed--style-banner.embed--align-center .embed__header {
    justify-content: center;
}

.embed--style-banner .embed__eyebrow {
    margin-bottom: 0;
    font-size: inherit;
    letter-spacing: normal;
    opacity: 1;
}

.embed--style-banner .embed__title {
    margin-bottom: 0;
    padding: 0 0.35rem;
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* The intro is a block, so it takes its own line under the banner. */
.embed--style-banner .embed__intro {
    flex-basis: 100%;
    margin-top: 0.5rem;
}


/* Full bleed ---------------------------------------------------------------
   A form or a map stretched across a wide window is unusable, so the heading
   keeps the site band. The frame is only banded when its width setting is full
   and nothing else is holding it in; narrow and medium already say how wide
   they are, and this must not override them. */
.page-full .embed__header,
.page-full .embed--w-full .embed__frame,
.page-full .embed--w-full .ratio {
    max-width: var(--cms-band);
    margin-inline: auto;
    padding-inline: 0.75rem;
}