/**
 * Ihsan campaign template — single campaign page.
 * Every colour that changes per campaign comes from --ict-accent, which the
 * template sets inline on .ihsan-ct.
 */

.ihsan-ct {
    /* Site palette, read off ihvider.org:
       brand green #095F37, warm accent #F74F22, headings #1E2228,
       body text #797979, page background #F4F6F9, borders #EAEAEA,
       darkest surface #070E20. */
    --ict-accent: #095f37;
    --ict-warm: #f74f22;
    --ict-ink: #1e2228;
    --ict-ink-soft: #797979;
    --ict-surface: #f4f6f9;
    --ict-line: #eaeaea;
    --ict-deep: #1e2228;
    --ict-night: #070e20;
    --ict-radius: 22px;

    color: var(--ict-ink);
    line-height: 1.7;
    width: 100%;
}

/**
 * Full-bleed.
 *
 * Measured against `--ict-vw`, not `100vw`: viewport units include the
 * scrollbar while the content box does not, so `100vw` came out 15px too wide
 * on a scrolling page — the band overhung both edges and the theme's
 * overflow-x:hidden clipped it, which is what left the photo looking inset.
 * The script keeps `--ict-vw` equal to documentElement.clientWidth; the 100vw
 * fallback only applies for the instant before it runs.
 *
 * Scoped to the no-sidebar layout because `50%` only lands on the viewport
 * centre when the ancestor column is itself centred — which is what
 * `page-has-no-sidebar` means here. The plugin forces that layout on campaigns
 * (see includes/class-layout.php); if anything ever restores the sidebar the
 * block simply stays inside its column instead of shifting off-centre.
 */
.page-has-no-sidebar .ihsan-ct {
    width: var(--ict-vw, 100vw);
    max-width: var(--ict-vw, 100vw);
    margin-inline: calc(50% - var(--ict-vw, 100vw) / 2);
}

/**
 * Let the break-out actually paint.
 *
 * Sizing the band to the viewport is not enough on its own: `.entry-content`
 * and `#primary.content-area` both carry `overflow:hidden`, and they sit at the
 * column's inner edge (12px in, 454px wide here). Anything wider is clipped to
 * that box, which is exactly the inset that made the photo look like it had
 * margins even though its box measured full width.
 *
 * `!important` is needed because `#primary` outranks any class selector, and
 * `display:flow-root` keeps the float containment those `overflow:hidden`
 * declarations were providing — dropping the clip without it would let floated
 * images in the campaign body escape their container.
 */
body.ihsan-ct-hero-active #primary.content-area,
body.ihsan-ct-hero-active .entry-content {
    overflow: visible !important;
    display: flow-root;
}

/**
 * With the theme's page-title banner hidden, its content padding left a blank
 * strip between the site header and the photo — 120px on desktop, and 50px
 * below 767px where charety sets it with `!important`:
 *
 *   @media (max-width: 767px) {
 *     .charety-content > .charety-content-inner { padding: 50px 0 !important }
 *   }
 *
 * Matching that `!important` is the only way to win against it; the longhand
 * leaves the bottom padding alone, and the body class keeps this to campaign
 * pages that actually render the band.
 */
body.ihsan-ct-hero-active .charety-content > .charety-content-inner {
    padding-top: 0 !important;
}

.ihsan-ct *,
.ihsan-ct *::before,
.ihsan-ct *::after {
    box-sizing: border-box;
}

/* ===== Hero ===== */

.ict-hero {
    position: relative;
    background: radial-gradient(ellipse at 30% 0%, #0e5233 0%, #0a2e1f 55%, var(--ict-night) 100%);
    color: #fff;
    padding: clamp(28px, 3vw, 48px) 0 0;
    overflow: hidden;
}

/**
 * The campaign photo runs the full width of the band rather than being scaled
 * to cover it. Featured images here are wide crops (1170x530), so `cover` on a
 * band this tall zooms in until only the middle of the picture is left. At
 * `100% auto` the whole width is visible, anchored to the top, and the dark
 * gradient underneath fills whatever is left below — which is the area the
 * donation card climbs over anyway.
 */
.ict-hero.has-image {
    background-image: var(--ict-hero-image), radial-gradient(ellipse at 30% 0%, #0e5233 0%, #0a2e1f 55%, var(--ict-night) 100%);
    background-size: 100% auto, cover;
    background-position: top center, center;
    background-repeat: no-repeat, no-repeat;
}

/**
 * Scrim over the campaign photo.
 *
 * A neutral near-black rather than the navy tint, so it reads the same whatever
 * the photo's colour cast. The opacity is set from contrast, not taste: over a
 * near-white patch of a photo (sky, sand, a white truck) the old 0.55 left the
 * white title at 4.43:1 — technically passable for large text, but washed out.
 * 0.78 puts the worst case at 9.5:1, past AAA, while the photo still reads.
 */
.ict-hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 22, 28, 0.78) 0%, rgba(17, 22, 28, 0.88) 100%);
}

.ict-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    /* This is the only thing that sets how far the photo runs on below the
       text — the text itself is positioned from the top of the band, so it
       stays put whatever this value is. What must hold at every width is
       `padding-bottom + wave height > card overlap`, otherwise the card would
       climb over the lead text. */
    padding: 0 clamp(20px, 4vw, 48px) clamp(110px, 10.5vw, 195px);
}

/**
 * The tagline falls back to the auto-excerpt, which is a whole paragraph — on a
 * real campaign it measured 173px against a 35px title, so the band grew tall
 * enough to swallow the card's overlap. Two lines keeps the photo reading as a
 * strip whatever the excerpt length; browsers without line-clamp just show it
 * all, which is the old behaviour rather than a broken one.
 */
.ict-hero-inner > .ict-lead {
    max-width: 720px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.ict-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.ict-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ict-warm);
    box-shadow: 0 0 0 4px rgba(247, 79, 34, 0.25);
    flex-shrink: 0;
}

/**
 * The theme's page-title banner would stack a second full-width header right
 * above this hero. charety prints it from a function with no hook that reads a
 * global theme option, so it is hidden here — gated on the body class the
 * plugin only adds when the hero is present to carry the title.
 */
body.ihsan-ct-hero-active .page-title-wrap {
    display: none;
}

/**
 * Headings carry extra ancestors on purpose.
 *
 * charety colours every heading inside the post body with
 * `.single-post-template .entry-content h1, …` — specificity (0,2,1), which
 * outranks a single class. A plain `.ict-hero-title` rule loses its colour to
 * it (the title rendered dark grey on the dark hero) while everything else in
 * the rule still applies, so the selector needs to clear (0,2,1) rather than
 * relying on load order.
 */
.ihsan-ct .ict-hero .ict-hero-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
    max-width: 820px;
    margin: 0 0 16px;
    /* Belt and braces over an unusually bright photo. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.ict-lead {
    font-size: 17px;
    color: #e6eaee;
    margin: 0 0 26px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.ict-wave {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    /* Deliberately SHORTER than the card's overlap below — it settles at
       roughly 0.55 of it, so the crest stays hidden behind the card. This curve
       is filled with the light section colour, so any part of it rising above
       the card's top edge becomes a pale band separating the photo from the
       card, and since the card is pale too the overlap stops reading at all. */
    height: clamp(36px, 4vw, 72px);
    margin-bottom: -1px;
}

.ict-wave path {
    fill: var(--ict-surface);
}

/* ===== Donation card ===== */

/* The side padding is what leaves photo showing either side of the card. At
   3vw the card covered 94% of the band and the overlap had nothing to read
   against — the picture simply ended where the card began. */
.ict-donate {
    background: var(--ict-surface);
    padding: 32px clamp(20px, 6vw, 130px) 56px;
}

/**
 * Keeps a top padding rather than zeroing it.
 *
 * With `padding-top: 0` and no border, the card's negative `margin-top` had
 * nothing to act against: it collapsed through to this section, so the whole
 * pale block slid up over the photo while the card stayed pinned to its top
 * edge. The overlap was never rendered at all, whatever the margin was set to.
 * Any non-zero padding stops the collapse.
 */
.ict-donate.has-hero {
    padding-top: 32px;
}

.ict-card {
    background: #fff;
    border: 1px solid var(--ict-line);
    border-radius: var(--ict-radius);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
    padding: 34px clamp(18px, 3vw, 48px) 38px;
    max-width: 1680px;
    margin: 0 auto;
}

/* How far the card climbs over the image band — the overlap itself, and the
   number to change when the effect should read stronger or weaker. It must stay
   deeper than the curve height above so the card lands on the photo rather than
   on the curve; the gap between the two is how much dark photo shows above the
   card's edge (60-98px across the supported widths). */
.ict-donate.has-hero .ict-card {
    margin-top: clamp(-162px, calc(-7vw - 32px), -96px);
    position: relative;
    z-index: 5;
}

/* Same theme heading rule as above — see .ict-hero-title. */
.ihsan-ct .ict-card .ict-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ict-deep);
    margin: 0 0 6px;
}

.ict-card-sub {
    color: var(--ict-ink-soft);
    font-size: 14.5px;
    margin: 0 0 26px;
}

.ict-field-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ict-accent);
    margin-bottom: 12px;
}

/* --- Suggested amounts --- */

.ict-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

/* Two per row on phones rather than one — a single full-width box per line made
   the list long enough to push the donate button off screen. */
@media (max-width: 560px) {
    .ict-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

.ict-amount {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px solid var(--ict-line);
    background: #f9fafb;
    border-radius: 14px;
    padding: 18px 10px 16px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ict-amount:hover {
    border-color: var(--ict-accent-line, rgba(9, 95, 55, 0.35));
}

.ict-amount.is-selected {
    border-color: var(--ict-accent);
    background: var(--ict-accent-soft, rgba(9, 95, 55, 0.08));
    box-shadow: 0 8px 20px -10px var(--ict-accent);
}

.ict-amount-num {
    font-weight: 900;
    font-size: 22px;
    color: var(--ict-deep);
    direction: ltr;
    unicode-bidi: isolate;
}

.ict-amount-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ict-ink-soft);
}

/* --- Impact chips ("كوب ماء = 10 $") --- */

.ict-equiv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.ict-equiv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ict-surface);
    border: 1px solid var(--ict-line);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ict-deep);
}

.ict-equiv-chip .ict-equiv-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ict-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ict-equiv-chip .ict-equiv-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.ict-equiv-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ict-equiv-amount {
    color: var(--ict-accent);
    direction: ltr;
    unicode-bidi: isolate;
}

.ict-equiv-badge {
    background: var(--ict-accent);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* --- Custom amount + donate --- */

.ict-custom-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Amount, currency and button share one row once there is room for all three. */
@media (min-width: 700px) {
    .ict-custom-row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    }
}

/* On phones the currency takes its own line and the donate button sits beside
   the amount, so choosing a currency, typing and donating read as one column. */
@media (max-width: 699px) {
    .ict-custom-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "currency currency"
            "amount   button";
        gap: 10px;
    }

    .ict-currency-box {
        grid-area: currency;
    }

    .ict-custom-box {
        grid-area: amount;
    }

    .ict-donate-btn {
        grid-area: button;
        white-space: nowrap;
    }
}

.ict-custom-box {
    flex: 2 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px dashed #d9dde2;
    border-radius: 14px;
    padding: 8px 16px;
    background: #f9fafb;
    transition: border-color 0.15s ease;
}

.ict-custom-box.is-active {
    border-style: solid;
    border-color: var(--ict-accent);
}

.ict-custom-tag,
.ict-custom-cur {
    font-size: 13px;
    font-weight: 700;
    color: var(--ict-ink-soft);
    white-space: nowrap;
}

.ict-custom-input {
    border: none;
    outline: none;
    background: transparent;
    font-weight: 800;
    font-size: 19px;
    width: 100%;
    min-width: 0;
    color: var(--ict-deep);
    box-shadow: none;
    padding: 6px 0;
}

.ict-custom-input::-webkit-outer-spin-button,
.ict-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ict-custom-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- Currency dropdown (same list as the quick-donate widget) --- */

.ict-currency-box {
    flex: 1 1 200px;
    display: flex;
}

.ict-currency {
    width: 100%;
    height: 100%;
    min-height: 56px;
    border: 2px solid #d9dde2;
    border-radius: 14px;
    background: #f9fafb;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ict-deep);
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.ict-currency:focus {
    border-color: var(--ict-accent);
}

.ict-rate-note {
    margin: 10px 2px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ict-ink-soft);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.ict-rate-note[hidden] {
    display: none;
}

.ict-donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ict-accent);
    color: #fff;
    border-radius: 14px;
    padding: 14px 34px;
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    min-width: 180px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.ict-donate-btn:hover,
.ict-donate-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.ict-donate-btn.is-busy {
    opacity: 0.7;
    pointer-events: none;
    transform: none;
}



/* ===== Goal block ===== */

.ict-goal {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--ict-line);
}

.ict-goal-ring {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}

.ict-goal-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ict-ring-track,
.ict-ring-fill {
    fill: none;
    stroke-width: 9;
}

.ict-ring-track {
    stroke: var(--ict-line);
}

.ict-ring-fill {
    stroke: var(--ict-accent);
    stroke-linecap: round;
}

.ict-goal-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ict-goal-icon {
    font-size: 34px;
    line-height: 1;
    color: var(--ict-accent);
}

.ict-goal-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ict-goal-body {
    flex: 1 1 260px;
    min-width: 0;
}

.ict-goal-figs {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    /* No max-width on purpose. Capping this row at 720px pulled the target
       figure 186px short of the edge while the progress bar and the meta line
       under it span the full body width — so the three rows no longer lined up
       on their outer edge. Alignment with the bar wins over keeping the two
       figures close together. */
    max-width: none;
    margin-bottom: 10px;
}

.ict-fig {
    display: flex;
    flex-direction: column;
}

.ict-fig-target {
    text-align: end;
}

.ict-fig-num {
    font-weight: 900;
    font-size: 22px;
    color: var(--ict-deep);
    direction: ltr;
    unicode-bidi: isolate;
}

.ict-fig-target .ict-fig-num {
    color: var(--ict-ink-soft);
    font-size: 18px;
}

.ict-fig-lbl {
    font-size: 12.5px;
    color: var(--ict-ink-soft);
}

.ict-bar {
    height: 12px;
    background: var(--ict-line);
    border-radius: 999px;
    overflow: hidden;
}

.ict-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ict-accent);
    background: linear-gradient(90deg, var(--ict-accent), color-mix(in srgb, var(--ict-accent) 55%, #ffffff));
    transition: width 0.6s ease;
}

.ict-goal-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ict-ink-soft);
}

.ict-goal-pct {
    font-weight: 800;
    color: var(--ict-accent);
}

/* ===== Campaign body ===== */

/* Campaign body stays at a readable width even though the block is full-bleed. */
.ict-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px clamp(16px, 4vw, 32px) 0;
}

/* ===== Phones =====
   Everything below only tightens spacing and type so the card reads calmly on a
   small screen — no layout changes beyond the two-up amounts and the amount/
   button pairing declared with their own rules above. */

@media (max-width: 560px) {
    .ict-card {
        padding: 24px 16px 28px;
        border-radius: 18px;
        /* The heavy desktop shadow reads as a smudge when the card nearly fills
           the screen. */
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
    }

    /* Same ancestors as the base rule — the theme's heading colour outranks a
       single class, so a plain `.ict-card-title` here would not apply. */
    .ihsan-ct .ict-card .ict-card-title {
        font-size: 20px;
    }

    .ict-card-sub {
        font-size: 13.5px;
        margin-bottom: 20px;
    }

    .ict-field-label {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .ict-amount {
        padding: 14px 8px 12px;
        border-radius: 13px;
        gap: 2px;
    }

    .ict-amount-num {
        font-size: 18px;
    }

    .ict-amount-label {
        font-size: 12px;
        line-height: 1.45;
    }

    .ict-custom-box {
        padding: 6px 14px;
        border-radius: 13px;
    }

    .ict-custom-input {
        font-size: 17px;
    }

    .ict-custom-tag,
    .ict-custom-cur {
        font-size: 12px;
    }

    .ict-currency {
        min-height: 50px;
        border-radius: 13px;
        font-size: 14px;
        padding: 6px 14px;
    }

    /* The base rule's `min-width: 180px` is declared after the mobile grid
       above, so the button has to be resized here — at 180px it ate 180 of a
       283px row and squeezed the amount input down to zero width. */
    .ict-donate-btn {
        min-width: 0;
        padding: 14px 18px;
        border-radius: 13px;
        font-size: 15px;
    }

    /* Keeps the field typeable: `width:100%` with `min-width:0` lets a flex
       item collapse completely when its siblings need the space. */
    .ict-custom-input {
        min-width: 70px;
    }

    .ict-equiv {
        gap: 8px;
        margin-top: 18px;
    }

    .ict-equiv-chip {
        font-size: 12px;
        padding: 5px 12px 5px 5px;
        gap: 6px;
    }

    .ict-equiv-chip .ict-equiv-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .ict-goal {
        gap: 18px;
        margin-top: 24px;
        padding-top: 22px;
    }

    .ict-goal-ring {
        width: 84px;
        height: 84px;
    }

    .ict-goal-icon {
        font-size: 28px;
    }

    .ict-fig-num {
        font-size: 19px;
    }

    .ict-fig-target .ict-fig-num {
        font-size: 16px;
    }

    .ict-goal-meta {
        font-size: 12.5px;
    }
}