/* ============================================================================
   donorbox.css  —  fitting the Donorbox donation widget into the Mudita site
   ============================================================================

   The widget is added in index.html as:

       <script type="module" src="https://donorbox.org/widgets.js" async></script>
       ...
       <section class="donate" id="donate"> ... <dbox-widget ...></dbox-widget> ...

   IMPORTANT — what this file CAN and CANNOT style
   -----------------------------------------------
   widgets.js renders the whole form inside an OPEN shadow root (see donate.html).
   Shadow DOM encapsulates styles, so the actual form controls (buttons, amount
   tabs, inputs, "Powered by Donorbox" footer, etc.) are styled by Donorbox's own
   CSS and are UNREACHABLE from here.

   From this stylesheet we can only touch:
     1. the section we wrap the widget in         → .donate / .donate-*
     2. the widget host element itself            → dbox-widget { }
     3. nodes the widget exposes via ::part()     → dbox-widget::part(loading)
        (the host exposes exactly one: part="loading complete", the pre-load
        placeholder)

   To theme the form INTERNALS (primary colour, fonts, suggested amounts, cover-
   fee copy, thank-you message) use the Donorbox dashboard → campaign settings.
   Match these brand values there so the form agrees with the frame below:
       forest  #1E5A3C   (primary / buttons)
       gold    #C9A84C   (accent)
       text    #2C2C2C   body / #666 muted
   ============================================================================ */

/* ── SECTION WRAPPER ───────────────────────────────────────────────────────
   The .donate section (see styles.css) supplies the eyebrow / title / note; the
   widget itself is placed via the .campaign component (campaign.css). */

/* Reassure donors under the form; mirrors the old .donate-note styling. */
.donate .donate-note {
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--light);
}

/* ── WIDGET HOST ───────────────────────────────────────────────────────────
   widgets.js writes inline sizing onto the host (max-inline-size:425px, etc.).
   We frame it as a card so it reads as part of the site rather than a bolt-on:
   cream section → white card with the same border/shadow language used by
   .impact-card / .about-section elsewhere on the site. */
dbox-widget {
  display: block;
  width: 100%;
  max-width: 460px;           /* a touch wider than Donorbox's 425px default   */
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
/*  border-top: 3px solid var(--forest);   /* forest accent, echoes .pull-quote  */
  box-shadow: 0 8px 24px rgba(30, 90, 60, 0.10);
  overflow: hidden;           /* clip the card corners over the widget         */
}

/* ── PRE-LOAD PLACEHOLDER (the one exposed part) ───────────────────────────
   Before the form's assets arrive, the widget shows a spinner on a grey
   (#F9FAFB) panel ~500px tall. Recolour it to the site's cream and soften the
   reserved height so the loading state isn't a jarring grey block or a big
   layout jump. */
dbox-widget::part(loading) {
  background: var(--cream);
  min-height: 420px;
}

/* Once loaded, the host adds the "complete" part alongside "loading"; drop the
   reserved min-height so the card hugs the real form height. */
dbox-widget::part(complete) {
  min-height: 0;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────
   Match the site's 900px breakpoint (styles.css) so the framed widget keeps a
   comfortable edge margin on small screens. */
@media (max-width: 900px) {
  dbox-widget {
    max-width: 100%;
  }
}