/* ==========================================================================
   Support Us.

   Only what the page needs that blocks cannot express: giving the Zeffy
   embed room. (The name lists are the site-wide .gsjc-namelist in base.css.)
   Everything else is Kadence Row
   Layout and core blocks, so an editor can rearrange the page without CSS
   following it around.
   ========================================================================== */

/* --- The Zeffy donation form ----------------------------------------------
   WHAT CANNOT BE DONE FIRST, so nobody tries: the form itself is a
   cross-origin iframe on zeffy.com. Its typefaces, buttons, field styling and
   background are Zeffy's, and no stylesheet here can reach inside it. Colours
   INSIDE the form are changed in the Zeffy dashboard, not in this file.

   What is ours is the container Zeffy's script writes, and it arrives with an
   inline style: width 100%, max-width 600px, margin 0 auto, border-radius 16px
   and a white background. Two of those are off-brand.

   The radius needs !important, which this theme otherwise avoids — an inline
   style cannot be beaten any other way, and the alternative is a 16px pill on
   a site whose every other corner is 2px. This is the case the rule exists
   for, not an exception to it.

   The border does NOT need !important: Zeffy sets `outline: none` but no
   border, so this simply applies. It earns its place because the form is white
   on a white page and would otherwise have no edge at all — the same hairline
   the season cards and the signup band use to bound a panel. */
.entry-content [data-zeffy-embed],
.entry-content [data-zeffy-embed-fallback] {
  margin-block: var(--gsjc-space-lg);
  border: 1px solid var(--gsjc-line);
  border-radius: var(--gsjc-radius-sm) !important;

  /* content-box, and it matters. Zeffy's script measures its form and writes
     the exact height it needs as an inline `height: 244px`. Under the global
     border-box that height INCLUDES the border above, so the border was being
     drawn inside Zeffy's own budget and the form got 242px — the bottom two
     pixels of it were clipped. content-box puts the border outside the height
     Zeffy asked for, which is the only reading that leaves its arithmetic
     intact. No !important: Zeffy sets no box-sizing inline. */
  box-sizing: content-box;
}

/* An iframe is inline by default, so it sits on a text baseline and carries a
   descender gap beneath it — 8px here, making the container's scrollHeight 250
   against a clientHeight of 242. `overflow: hidden` hid it, so it broke
   nothing, but it left this container permanently overflowing by 8px, which
   would have masked a real overflow if one ever turned up. */
.entry-content [data-zeffy-embed] > iframe,
.entry-content [data-zeffy-embed-fallback] iframe {
  display: block;
}

/* --- The modal's unnecessary scrollbar ------------------------------------
   The Zeffy plugin writes a FIXED `height: 1000px` inline on its modal iframe
   (its $default_height), while the modal body is calc(90vh - 40px) with
   overflow: auto and 20px of padding. At a 1000px-tall window that is 1040px
   of content in a 900px box: 140px of overflow, and a scrollbar that scrolls a
   rigid frame instead of the frame fitting the box.

   The plugin tries to prevent this itself — it ships
   `.zeffy-modal-body #zeffy-form-embed { height: calc(90vh - 40px) }` — but
   its own inline height beats its own stylesheet, so that rule never applies.
   The bug is upstream and self-inflicted; these two rules are the only way to
   beat an inline style, which is what earns the !important here.

   min-height too: the plugin's 600px floor would re-overflow a short window
   (below about 710px tall, 90vh drops under 600) and bring the scrollbar back
   in exactly the case nobody tests.

   Result: at most ONE scrollbar, inside the frame, and only when the Zeffy
   form is genuinely taller than the modal. The iframe's hardcoded
   scrolling="yes" is then correct rather than harmful, so it is left alone.

   NOTE: this overrides a symptom. If a plugin update changes the modal markup
   or drops the inline height, these rules go dead rather than harmful — but
   check the modal after updating the Zeffy plugin. */
.zeffy-modal-body {
  overflow: hidden;
}

.zeffy-modal-body #zeffy-form-embed {
  height: 100% !important;
  min-height: 0 !important;
}

/* Give the two "Ways to Give" columns a little air between them when they
   stack on a phone; side by side the row's own gutter already handles it. */
@media (max-width: 767px) {
  .gsjc-give .wp-block-kadence-column + .wp-block-kadence-column {
    margin-top: var(--gsjc-space-lg);
  }
}

/* --- The advertising form's frame -----------------------------------------
   A plain iframe, sized here. Zeffy's own embed script sizes a ticketing form
   to 240px and stays there, and the plugin shortcode writes a fixed height
   inline — the thing that caused the modal scrollbar in the first place.

   Loading the form directly shows it reports a document height equal to
   whatever viewport it is given, at 640px and 900px alike: it fills its frame
   and scrolls inside. So the job here is to hand it a generous frame, not to
   guess a content height that does not exist.

   clamp gives a floor for short windows, scales with the viewport, and stops
   before it becomes taller than a desktop screen. Because the iframe carries
   no inline style, none of this needs !important. */
.gsjc-zeffy-frame {
  /* Border, radius, background and margin are shared with the calendar in
     base.css. Only the width is local.

     Zeffy lays its content out in a column of about 600px and centres it in
     whatever frame it is given, so a full 1242px frame does not make the form
     wider — it just draws a bordered white box with a lot of nothing either
     side. 46rem hugs the form and keeps its left edge on the heading's line. */
  max-width: 46rem;
}

.gsjc-zeffy-frame iframe {
  /* The form reports a document height equal to whatever viewport it is given,
     at 640px and 900px alike: it fills its frame and scrolls inside, so there
     is no content height to detect. Hand it a generous one. */
  height: clamp(32rem, 85vh, 56rem);
}

/* --- Funder logos ---------------------------------------------------------
   Two logos of very different proportions: the Council's is 1042x521 (2.0) and
   the Presser wordmark 533x160 (3.3). Matched on WIDTH — which is what a
   two-column row does by default — the Presser mark renders about a third the
   visual weight of the Council's, and reads as the lesser credit. Matching
   HEIGHT instead gives them comparable presence, which is what a funder
   acknowledgement should do.

   max-height rather than height, and width:auto, so neither is ever stretched
   away from its own aspect ratio. */
.gsjc-funders .gsjc-funder {
  margin: var(--gsjc-space-lg) 0 0;
}

.gsjc-funders .gsjc-funder img {
  max-height: 5rem;
  width: auto;
  max-width: 100%;
  display: block;
}