/**
 * Salafi Donations — campaign landing templates.
 *
 * Each template is scoped under .sd-lp--{slug} so its design language is
 * self-contained. The donation form (.sd-form) is reused as-is; templates only
 * style the chrome around it and may hide the form's own banner when they
 * provide their own hero/feature image.
 */

/* ---- Typography: the landing font is driven by --sd-lp-font, which the
   "Landing font" setting can override (e.g. to the website's own font). When
   unset it falls back to a clean sans stack (never the theme's serif body). ---- */
body.sd-standalone,
.sd-lp {
  font-family: var(--sd-lp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
.sd-lp h1,
.sd-lp h2,
.sd-lp h3,
.sd-lp h4,
.sd-lp p,
.sd-lp li,
.sd-lp a,
.sd-lp__title {
  font-family: var(--sd-lp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ---- Standalone document chrome (no theme header/footer) ---- */
body.sd-standalone {
  margin: 0;
  overflow-x: hidden; /* the full-bleed bg uses 100vw */
  background: #fff;
}

/* ---- Shared layout ---- */
.sd-lp {
  position: relative;
  /* Chrome accent. A campaign palette overrides it via an inline style on the
     wrapper. The form keeps its own accent. */
  --sd-lp-accent: #0e7a5f;
}
.sd-lp__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
}
.sd-lp__grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 440px);
  gap: 40px;
  align-items: start;
}
.sd-lp__grid--solo {
  grid-template-columns: minmax(320px, 480px);
  justify-content: center;
}
.sd-lp__form {
  position: sticky;
  top: 24px;
}
.sd-lp__title {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 16px;
  /* Explicit dark so host themes that style body { color:#fff } can't wash
     out the title on the white story card. Spotlight overrides this to white
     further down (its hero bg is dark). */
  color: #14231d;
}
.sd-lp__desc {
  line-height: 1.65;
  color: #14231d;
}
.sd-lp__desc > :first-child {
  margin-top: 0;
}
.sd-lp__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 35, 29, 0.08);
  padding: 28px;
}

@media (max-width: 860px) {
  .sd-lp__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sd-lp__form {
    position: static;
  }
}

/* ---- Full-bleed background layer ---- */
.sd-lp__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.sd-lp__bg--split {
  background: linear-gradient(
    to bottom,
    var(--sd-lp-c1, #fff) 0,
    var(--sd-lp-c1, #fff) var(--sd-lp-split, 40%),
    var(--sd-lp-c2, #dfe9e0) var(--sd-lp-split, 40%),
    var(--sd-lp-c2, #dfe9e0) 100%
  );
}
.sd-lp__bg--image {
  /* Solid base: the page colour (accent) fills the hero when no image is set,
     falling back to a dark slate so overlaid white text stays readable. */
  background-color: var(--sd-lp-accent, #1f2937);
  background-image: linear-gradient(
      rgba(0, 0, 0, var(--sd-lp-overlay, 0.45)),
      rgba(0, 0, 0, var(--sd-lp-overlay, 0.45))
    ),
    var(--sd-lp-img, none);
  background-size: cover;
  background-position: center;
}

/* ---- Impact: warm, card-based, stats-forward ---- */
/* The background is a soft mesh — a palette-tinted blob in the top-right plus
   a hairline tint at the bottom — over a near-white field. Pinned to the
   viewport so the colour field never shifts when the form grows (e.g. when
   Apple/Google Pay loads in a moment after render). Fixed (not
   background-attachment) so it also holds on iOS, where Apple Pay lives.
   Falls back to a flat near-white if the browser does not support color-mix. */
.sd-lp--impact .sd-lp__bg--split {
  position: fixed;
  height: 100vh;
  /* Mesh base: a near-white field; the accent provides the soft mesh tint. */
  background: #f7faf8;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .sd-lp--impact .sd-lp__bg--split {
    background:
      radial-gradient(
        ellipse 70% 60% at 88% -10%,
        color-mix(in srgb, var(--sd-lp-accent) 22%, transparent) 0%,
        transparent 60%
      ),
      radial-gradient(
        ellipse 90% 50% at 50% 115%,
        color-mix(in srgb, var(--sd-lp-accent) 10%, transparent) 0%,
        transparent 65%
      ),
      #f7faf8;
  }
}
.sd-lp--impact .sd-lp__story {
  overflow: hidden;
  padding: 0;
}
.sd-lp--impact .sd-lp__feature {
  height: 240px;
  background-size: cover;
  background-position: center;
}
.sd-lp--impact .sd-lp__story-body {
  padding: 28px;
}

/* One-shot fade-up entrance on the story and form cards. Applied on Impact
   and Spotlight (Classic stays calm — it's the neutral template). Reduced-
   motion users see the final state immediately. */
@media (prefers-reduced-motion: no-preference) {
  .sd-lp--impact .sd-lp__story,
  .sd-lp--impact .sd-lp__form,
  .sd-lp--spotlight .sd-lp__story,
  .sd-lp--spotlight .sd-lp__form {
    animation: sd-lp-impact-rise 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .sd-lp--impact .sd-lp__form,
  .sd-lp--spotlight .sd-lp__form {
    animation-delay: 140ms;
  }
  @keyframes sd-lp-impact-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---- Spotlight: cinematic full-bleed hero + overlay form ---- */
.sd-lp--spotlight .sd-lp__inner {
  padding: 88px 20px;
  min-height: 520px;
}
.sd-lp--spotlight .sd-lp__story {
  color: #fff;
}
.sd-lp--spotlight .sd-lp__title {
  font-size: 2.8rem;
  /* Override the shared dark default so the title reads on the dark hero. */
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.sd-lp--spotlight .sd-lp__desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  max-width: 46ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}
.sd-lp--spotlight .sd-banner {
  display: none; /* the hero is the visual */
}

/* ---- Appeal: graphic-appeal grid on the left, donation form on the right.
   Mobile stacks (grid first, then form). The grid IS the visual, so the
   form's own banner image is hidden. Tiles are buttons that select the
   matching amount on the form (wired in landing.js). ---- */
.sd-lp--appeal .sd-lp__head {
  margin-bottom: 32px;
}
/* Typography mirrors Spotlight (size only — Spotlight's white colour +
   text-shadow are for its dark hero; Appeal has a light surface so the
   default dark title colour applies). Defaults handle font-family +
   weight 800, same as the rest of the page reads with. */
.sd-lp--appeal .sd-lp__title {
  font-size: 2.8rem;
}
.sd-lp--appeal .sd-lp__desc {
  font-size: 1.1rem;
  max-width: 46ch;
}
.sd-lp--appeal .sd-lp__grid {
  align-items: start;
}
.sd-lp--appeal .sd-lp__appeal-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sd-lp--appeal .sd-banner {
  display: none;
}
/* The hero holds the page background (colour or image); it spans the header and
   the appeal grid + form only, so the background stops where the form ends and
   the hadith below sit on a calm light band (.sd-lp__below). */
.sd-lp--appeal .sd-lp__hero {
  position: relative;
}

/* ---- Appeal page background (colour, or optional full-bleed hero image) ----
   The shared .sd-lp__bg--image bakes in a dark overlay + slate fallback for
   Spotlight; Appeal overrides that so, with NO hero image, the page stays a
   calm near-white (or the campaign-picked colour). The dark overlay is only
   applied (via ::after) when a hero image is actually set. */
.sd-lp--appeal .sd-lp__bg--image {
  /* A soft tint of the page colour (plain near-white fallback first, so old
     browsers that drop the color-mix line still get a calm light page). */
  background-color: #f5f8f6;
  background-color: color-mix(in srgb, var(--sd-lp-accent) 7%, #fff);
  background-image: var(--sd-lp-img, none);
  background-size: cover;
  background-position: center;
}
.sd-lp--appeal.has-hero .sd-lp__bg--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--sd-lp-overlay, 0.35));
}
/* Over a hero image, the headline/story go white and the icon block floats on
   a light panel so the icons, counts and legend stay readable. The hadith are
   not here: they sit below the hero on the light .sd-lp__below band, so they
   keep the default dark-on-light treatment. */
.sd-lp--appeal.has-hero .sd-lp__title,
.sd-lp--appeal.has-hero .sd-lp__subhead,
.sd-lp--appeal.has-hero .sd-lp__desc {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.sd-lp--appeal.has-hero .sd-appeal--inline {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 12px 34px rgba(20, 35, 29, 0.18);
}

.sd-appeal--inline {
  margin: 0;
  max-width: none;
  /* Breathing room around the icon block. The grid itself is unchanged. */
  padding: 8px 4px 12px;
}

/* The hint row sits above the grid: a single tap-me bubble. */
.sd-appeal--inline .sd-appeal__hints {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 18px;
}

/* Tap-me speech bubble — unchanged from its original look. Single-purpose. */
.sd-appeal--inline .sd-appeal__hint {
  position: relative;
  display: inline-block;
  flex: 0 1 280px;
  max-width: 280px;
  margin: 0 0 0 4px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--sd-lp-accent, #0e7a5f) 14%, #fff);
  border-radius: 18px;
  font-family: var(--sd-lp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--sd-lp-accent, #0e7a5f);
}
.sd-appeal--inline .sd-appeal__hint::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .sd-appeal--inline .sd-appeal__hint {
    background: #eef5f1;
  }
}

@media (max-width: 520px) {
  .sd-appeal--inline .sd-appeal__hints {
    flex-wrap: wrap;
  }
}

/* Browsers without color-mix support get a quiet near-white fallback. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .sd-appeal--inline .sd-appeal__hint {
    background: #eef5f1;
  }
}

/* Soft hover lift on tiles. The shared rule already gives currentColor and
   the filled-state colour change; this adds a gentle scale + accent tint
   for the "I'm clickable" cue on resting tiles. */
.sd-appeal--inline .sd-appeal__tile {
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), color 200ms ease;
}
.sd-appeal--inline .sd-appeal__tile:hover,
.sd-appeal--inline .sd-appeal__tile:focus-visible {
  transform: translateY(-2px) scale(1.06);
  color: var(--sd-appeal-accent, var(--sd-lp-accent, #0e7a5f));
}
@media (prefers-reduced-motion: reduce) {
  .sd-appeal--inline .sd-appeal__tile {
    transition: none;
  }
  .sd-appeal--inline .sd-appeal__tile:hover,
  .sd-appeal--inline .sd-appeal__tile:focus-visible {
    transform: none;
  }
}

/* Hadith on Appeal: no card chrome, with a hairline vertical divider between
   each quote on desktop. On mobile the divider collapses and the quotes
   stack with calm vertical spacing. Scoped to .sd-lp--appeal so the other
   templates' boxed quote style is untouched. */
.sd-lp--appeal .sd-lp__hadith {
  margin-top: 56px;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  column-gap: 48px;
}
.sd-lp--appeal .sd-lp__quote {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 24px;
  margin: 0;
}
.sd-lp--appeal .sd-lp__quote + .sd-lp__quote {
  border-left: 1px solid rgba(20, 35, 29, 0.12);
}
@media (max-width: 860px) {
  .sd-lp--appeal .sd-lp__hadith {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sd-lp--appeal .sd-lp__quote {
    padding: 0;
  }
  .sd-lp--appeal .sd-lp__quote + .sd-lp__quote {
    border-left: 0;
    padding-top: 32px;
    border-top: 1px solid rgba(20, 35, 29, 0.12);
  }
}
.sd-appeal--inline .sd-appeal__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.sd-appeal--inline .sd-appeal__tile:focus-visible {
  outline: 2px solid var(--sd-lp-accent, #0e7a5f);
  outline-offset: 2px;
}
@media (max-width: 860px) {
  .sd-lp--appeal .sd-lp__appeal-col {
    order: -1; /* grid first on mobile so donors see the visual before the form */
  }
}

/* ===================== CRO components (wave 1) ===================== */

/* ---- Subheading (emotional one-liner under the title) ---- */
.sd-lp__subhead {
  font-size: 1.15rem;
  line-height: 1.5;
  font-weight: 500;
  color: #475247;
  margin: 0 0 18px;
}

/* ---- Logo-as-title (Settings → Use site logo as title) ---- */
.sd-lp__logo {
  margin: 0 0 14px;
}
.sd-lp__logo img,
.sd-lp__logo .custom-logo {
  max-height: 72px;
  width: auto;
}
.sd-lp--spotlight .sd-lp__logo {
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.35));
}
.sd-lp__title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sd-lp--spotlight .sd-lp__subhead {
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Impact strip (amount → impact, clickable) ---- */
.sd-lp__impact {
  margin-top: 48px;
}
.sd-lp__impact-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 20px;
}
.sd-lp__impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.sd-lp__impact-card {
  text-align: left;
  background: #fff;
  border: 1px solid #e3e9e6;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sd-lp__impact-card:hover,
.sd-lp__impact-card:focus-visible {
  /* no transform — movement reads as templated/AI. Calm colour shift only. */
  border-color: var(--sd-lp-accent, #0e7a5f);
  background: #f6faf8;
  outline: none;
}
.sd-lp__impact-card.is-selected {
  border-color: var(--sd-lp-accent, #0e7a5f);
  box-shadow: inset 0 0 0 1px var(--sd-lp-accent, #0e7a5f);
}
.sd-lp__impact-amount {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sd-lp-accent, #0e7a5f);
}
.sd-lp__impact-caption {
  display: block;
  margin-top: 4px;
  color: #5b6b63;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ---- Hadith ---- */
.sd-lp__hadith {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.sd-lp__quote {
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(20, 35, 29, 0.06);
}
.sd-lp__quote-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #14231d;
}
.sd-lp__quote-author {
  margin-top: 12px;
  font-weight: 700;
  color: var(--sd-lp-accent, #0e7a5f);
  font-size: 0.9rem;
}

/* ---- Spotlight hero + content band below ---- */
.sd-lp--spotlight .sd-lp__hero {
  position: relative;
}
/* Reserve space for the Apple/Google Pay block before it mounts so the form
   keeps a stable height. Stripe's ExpressCheckoutElement is hidden on first
   paint and only shows after the SDK confirms an available wallet (a moment
   later). Without this reservation the form grows ~80px when the wallet
   appears, and the cover-sized hero bg jumps to a larger size with it. Scoped
   to Spotlight because that is the only template where the bg image rescales
   visibly; on Classic/Impact the wallet still hides/shows but no photo is
   tied to the hero. */
.sd-lp--spotlight .sd-form .sd-wallets[hidden] {
  display: block;
  visibility: hidden;
  min-height: 80px;
}
.sd-lp__below {
  background: #fff;
}
.sd-lp__below-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
}
.sd-lp__below-inner > :first-child {
  margin-top: 0;
}

/* ---- Mobile: form first so the ask is immediately visible ---- */
@media (max-width: 860px) {
  .sd-lp__form {
    order: -1;
  }
  .sd-lp--spotlight .sd-lp__inner {
    padding: 44px 18px;
    min-height: 0;
  }
}

/* ---- Brand bar/footer (rendered inside the template, blends with its bg) ---- */
.sd-lp__brandbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left-aligned, in line with the content column */
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 0;
}
.sd-lp__brandlink {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.sd-lp__brandbar img,
.sd-lp__brandbar .custom-logo,
.sd-lp__brandlogo {
  max-height: 48px;
  width: auto;
  display: block;
}
.sd-lp__brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: #14231d;
  text-decoration: none;
}
/* On dark/colourful templates the brand text goes light to stay legible. */
.sd-lp--spotlight .sd-lp__brand {
  color: #fff;
}

/* ---- Landing footer: payment marks · reg. charity · © year + site ----
   Single centred row. Payment marks sized to the text x-height so they read
   as inline detail rather than graphical chips. Wraps to a second line on
   narrow viewports. */
.sd-lp__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  row-gap: 6px;
  max-width: 1100px;
  /* Generous margin-top so there's clear breathing room between the form
     column (which can be sticky-positioned and extend down) and the footer.
     No top border — the whitespace alone separates the footer from the
     content above it. */
  margin: 56px auto 0;
  padding: 28px 24px 32px;
  color: #5b6b63;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.1px;
}
.sd-lp__methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.sd-lp__method {
  display: inline-flex;
  align-items: center;
  /* Slight de-emphasis — payment marks are reassurance, not headline. */
  opacity: 0.6;
}
.sd-lp__method img {
  display: block;
  width: auto;
}
/* Per-brand heights, tuned so the four marks read at a similar visual
   weight across the row. Visa's wordmark is solid and chunky so it reads
   substantial at a smaller height; Mastercard is square (aspect ~1.6:1)
   and Apple Pay / Google Pay have more whitespace inside the SVG so they
   need a few extra pixels to match. */
.sd-lp__method--visa img       { height: 12px; }
.sd-lp__method--mastercard img { height: 18px; }
.sd-lp__method--apple-pay img  { height: 16px; }
.sd-lp__method--google-pay img { height: 18px; }
.sd-lp__foot-sep {
  color: rgba(20, 35, 29, 0.22);
  font-size: 13px;
  line-height: 1;
  user-select: none;
}
.sd-lp__foot-text {
  color: inherit;
}

/* ---- Spotlight: keep the cinematic headline on top on mobile (no form-first) ---- */
@media (max-width: 860px) {
  .sd-lp--spotlight .sd-lp__form {
    order: 0;
  }
}