/* Same content width as the rest of tearfund.org.nz: its Bootstrap 4 .container is 1140px
   from the xl breakpoint up, and the card rows span that full 1140 (the .row's negative
   margins cancel the container's 15px padding). 1270px used to sit visibly wider than
   every other section on the site. */
.tfnz-youfund_container {
    margin: 32px auto 0 auto;
    width: 1140px;
    max-width: 90%;
}

/* Optional per-instance hub background (Edit → Display → Background colour). The colour
   itself is an inline background-color (GoalSettings.BackgroundColor) on the full-width
   band, so it runs edge to edge; the container inside keeps the 1140px/90% content width.
   Vertical padding only, so the content sits exactly where it did before. No class → the
   original layout, untouched. */
.tfnz-youfund_hubBand.tfnz-youfund_container--background {
    box-sizing: border-box;
    padding: 2rem 0 1.25rem;
    margin-bottom: 32px;
}

/* On phones the 90%-width content is already narrow; just tighten the band's padding. */
@media (max-width: 560px) {
    .tfnz-youfund_hubBand.tfnz-youfund_container--background {
        padding: 1.25rem 0 1rem;
    }
}

/* Click/touch must not leave a focus ring on a button; keyboard users still get one
   (brand-coloured, not the browser's black). */
.tfnz-youfund_container button {
    -webkit-tap-highlight-color: transparent;
}

.tfnz-youfund_container button:focus:not(:focus-visible),
.tfnz-youfund_container a:focus:not(:focus-visible) {
    outline: none;
}

.tfnz-youfund_container button:focus-visible,
.tfnz-youfund_container a:focus-visible {
    outline: 2px solid #007088;
    outline-offset: 2px;
}

.tfnz-youfund_toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tfnz-youfund_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* One toolbar-control look, shared by the category filter chips and the Sort chip. */
.tfnz-youfund_chip,
.tfnz-youfund_sortChip {
    border: 1px solid rgba(0, 140, 170, 0.4);
    background: #fff;
    color: #008caa;
    padding: 0.3rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.tfnz-youfund_chip {
    border-radius: 0.25rem;
}

.tfnz-youfund_chip:hover {
    background: rgba(0, 140, 170, 0.08);
}

.tfnz-youfund_chip.tfnz-youfund_active,
.tfnz-youfund_chip.tfnz-youfund_active:hover {
    background: #008caa;
    color: #fff;
}

.tfnz-youfund_chip:focus-visible {
    outline: 2px solid #007088;
    outline-offset: 1px;
}

/* Sort: our chip look, at the module's single corner radius (0.25rem). */
.tfnz-youfund_sort {
    position: relative;
    display: inline-flex;
    /* Keeps the control on the right whether or not this hub shows the chips. */
    margin-left: auto;
}

.tfnz-youfund_sortChip {
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tfnz-youfund_sortIcon {
    flex-shrink: 0;
}

/* The real control sits invisibly on top of the chip, so clicking anywhere on the chip
   opens the native picker and keyboard/screen readers still get a real listbox. */
.tfnz-youfund_sortSelect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tfnz-youfund_sort:hover .tfnz-youfund_sortChip {
    background: rgba(0, 140, 170, 0.08);
}

.tfnz-youfund_sort:focus-within .tfnz-youfund_sortChip {
    outline: 2px solid #007088;
    outline-offset: 1px;
}

/* Card grid spacing (hub-view.md): the tearfund.org.nz .quiz-card-carousel gap of 20px
   between cards, in place of Bootstrap's 30px gutters. Bootstrap 4 hard-codes the 15px
   column padding, so it is overridden here rather than through a gutter variable. */
.tfnz-youfund_grid.row {
    margin-left: -10px;
    margin-right: -10px;
}

.tfnz-youfund_grid > .tfnz-youfund_col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}


/* CARD */


.tfnz-youfund_card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 0.25rem;
    overflow: hidden;
    /* The whole card is a link target (hub-view.md) — except the carousel's arrows/dots
       and a drag. */
    cursor: pointer;
    /* Card lift, taken from the grid card on compassioncauses.com: its --shadow-xs at
       rest and --shadow-md on hover. There is deliberately no border — the shadow is what
       separates the card from the page. */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* Hover grow, as on compassioncauses.com: the card scales up a hair and lifts.
       `scale` rather than `transform: scale()` so it can never fight a transform on the
       same element. The carousel measures itself with getBoundingClientRect(), which
       includes this scale — that is exactly what keeps a drag tracking the pointer 1:1. */
    transition: box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1),
        scale 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* Hover-capable pointers only: on touch, :hover sticks after a tap, which would leave the
   card stuck in its grown state. */
@media (hover: hover) {
    .tfnz-youfund_card:hover {
        box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        scale: 1.01;
    }
}

.tfnz-youfund_cardMedia {
    position: relative;
    /* Image block sized from the tearfund.org.nz .quiz-card-carousel image: 369x225 at the
       reference card width. That shape is kept, but the reference's 10.25rem height is the
       ceiling — a wider card never gets a taller image than the reference, and a narrower
       card scales the height down with the width. */
    aspect-ratio: 369 / 225;
    max-height: 10.25rem;
    min-width: 100%;
    width: 100%;
    overflow: hidden;
}

/* The teal gradient is the "no photo" tile — and it is painted only when there is no
   photo. Behind a photo it is never meant to be seen, but while the card scales on hover
   the compositor rounds the image layer and this block's own background independently, so
   a 1px seam of gradient appears along the image's edge (most visible on a grow/shrink).
   With no background there, the seam shows the card's white instead. `MediaHtml` adds the
   carousel class exactly when at least one image exists, so this is the no-photo test. */
.tfnz-youfund_cardMedia:not(.tfnz-youfund_cardCarousel) {
    background: linear-gradient(135deg, #008caa 0%, #007088 100%);
}

.tfnz-youfund_cardMedia img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tfnz-youfund_mediaFallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

/* Inside a carousel slide the tile sits behind the photo, so it is only ever seen when
   that photo fails to load — and there is no gradient behind it there, so the tile's
   white text would be invisible. */
.tfnz-youfund_cardCarousel .tfnz-youfund_mediaFallback {
    color: #173145;
}

/* Card image carousel (hub-view.md): one slide at a time with prev/next arrows
   (revealed on card hover) + position dots. Three slide slots are recycled by client
   JS (View.ascx) — the mechanics are lifted from TFNZStatsPanel — so the track wraps
   around infinitely and a drag follows the finger 1:1. The pointer-swipe uses pan-y so
   vertical page scrolling still works on touch. */
.tfnz-youfund_cardCarousel {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* No CSS transition here: the JS (View.ascx) positions the slots per frame, including
   the momentum settle after a drag. */
.tfnz-youfund_cardSlides {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* One recycled slide slot; the JS moves it with translateX (no CSS transition). */
.tfnz-youfund_carouselItem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.tfnz-youfund_cardSlide {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.tfnz-youfund_cardSlide img {
    -webkit-user-drag: none;
}

/* Prev/next arrows: hidden (and non-interactive) until the card is hovered, so they
   never sit on the image or collide with the country flag badge in the top-right
   corner. `pointer-events: none` keeps a hidden arrow from swallowing touch taps, so
   swipe still works on touch; the dots stay the always-visible touch control.
   Keyboard users can still Tab to an arrow — the card's :focus-within reveals it. */
.tfnz-youfund_carouselArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

@media (hover: hover) {
    .tfnz-youfund_card:hover .tfnz-youfund_carouselArrow,
    .tfnz-youfund_card:focus-within .tfnz-youfund_carouselArrow {
        opacity: 1;
        pointer-events: auto;
    }
}

.tfnz-youfund_carouselArrow:hover,
.tfnz-youfund_carouselArrow:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    outline: none;
}

.tfnz-youfund_carouselArrowPrev {
    left: 0.4rem;
}

.tfnz-youfund_carouselArrowNext {
    right: 0.4rem;
}

.tfnz-youfund_carouselDots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.4rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.tfnz-youfund_carouselDot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tfnz-youfund_carouselDot.tfnz-youfund_active {
    background: #fff;
}

.tfnz-youfund_cardBadges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    gap: 0.4rem;
    z-index: 1;
}

.tfnz-youfund_urgent,
.tfnz-youfund_complete {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.tfnz-youfund_urgent {
    background: #d32f2f;
}

.tfnz-youfund_complete {
    background: #2e7d32;
}

.tfnz-youfund_cardBody {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Body padding from the tearfund.org.nz .quiz-card-body (1.457rem). */
    padding: 1.457rem;
}

/* Country badge (hub-view.md): the compassioncauses.com card indicator — a light pill in
   the card's top-right holding a circular flag and the country name. The values are the
   reference's own pixels (its root is 16px, ours is 22px), so they stay absolute for the
   same reason the blurb does. Pinned against .tfnz-youfund_card, so the media block's
   overflow never clips it. */
.tfnz-youfund_countryBadge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 4px 12px;
    border-radius: 0.25rem;
    background: #f3f4f6;
    color: #030712;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    overflow: hidden;
}

.tfnz-youfund_countryFlag {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.tfnz-youfund_countryName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tfnz-youfund_cardTitle {
    /* Typography from the tearfund.org.nz .quiz-card-title; the spacing is tuned for the
       current card. The site skin forces `h3 { margin: 0 0 10px !important; color: …
       !important }`, so the margin and colour need !important here to land. */
    margin: 1px 0 !important;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.34;
    color: #333 !important;
    text-transform: none;
    /* Keep long titles to three lines so cards in a row stay a consistent height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tfnz-youfund_cardTitle a {
    color: #333;
    text-decoration: none;
}

/* The whole card is the click target and already grows on hover (hub-view.md), so the
   title must not react as well. The site skin's global `a:hover` adds an underline and
   its own colour, so pin the title back to its resting state rather than deleting the
   rule — deleting it is what lets the skin through. */
.tfnz-youfund_cardTitle a:hover,
.tfnz-youfund_cardTitle a:focus {
    color: #333;
    text-decoration: none;
}

/* Card blurb (hub-view.md): one sentence of the CRM product description. The size is in
   rem like the title (the site's root is 22px, so 0.82rem ≈ 18px) — the two card type
   sizes ride the root together instead of mixing static and relative units. */
.tfnz-youfund_cardDescription {
    margin: 10px 0 20px;
    font-size: 0.82rem;
    line-height: 1.46;
    color: #757575;
    /* A single CRM sentence can still run long; four lines keeps a row of cards tidy. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reference's small-screen card type: the title holds at ~24px instead of the 1.1rem
   base (15.4px at the 14px phone root), so 1.7rem here (23.8px). Relative like the
   blurb, so the card keeps its proportions as the root steps up. */
@media (max-width: 560px) {
    .tfnz-youfund_cardTitle {
        font-size: 1.7rem;
    }
}

.tfnz-youfund_cardImpact {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2e7d32;
    margin: 0 0 0.6rem;
}


/* CARD PROGRESS */


.tfnz-youfund_cardBottom {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tfnz-youfund_progress {
    height: 0.35rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0.25rem;
    overflow: hidden;
}

.tfnz-youfund_progressBar {
    height: 100%;
    background: #008caa;
    border-radius: 0.25rem;
    transition: width 0.3s ease-in-out;
}

.tfnz-youfund_cardAmounts {
    font-size: 0.9rem;
    color: #333;
    margin: 10px 0 0 0;
}

.tfnz-youfund_cardAmounts strong {
    /* The hub card emphasises the raised figure with weight only — the blue hero figure
       belongs to the detail page's donation panel. */
    color: inherit;
    font-weight: 700;
}

.tfnz-youfund_noGoals {
    padding: 2rem 0;
    text-align: center;
    color: #333;
    font-size: 1rem;
}



/* DETAIL (full layout; the right column is reserved for the Phase 3 donation panel) */

.tfnz-youfund_detail {
    max-width: 100%;
    margin: 0 auto;
}

/* Desktop: a full-width header row (title left, meta right) above a two-column
   body — project content on the left, the donation info box on the right (sticky).
   Mobile: header, then the donation box, then the content, so the funding figures
   are the first thing a visitor sees after the title. */
.tfnz-youfund_detailLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "aside"
        "content";
    /* Row gap is tighter than the column gap: the header (title + category/date) should
       sit close to the image, while the content column keeps its breathing room from
       the donation box. On mobile the same row gap separates the stacked areas. */
    gap: 1rem 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .tfnz-youfund_detailLayout {
        /* The aside (donation card) gets a little more room than the original 2:1 —
           about 37% at full width — while still leaving the content column dominant. */
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.2fr);
        grid-template-areas:
            "header header"
            "content aside";
    }
}

.tfnz-youfund_detailHeader {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tfnz-youfund_detailHeaderMain {
    min-width: 0;
}

.tfnz-youfund_detailContent {
    grid-area: content;
    min-width: 0;
}

@media (min-width: 992px) {
    /* Title on the left, category/meta right-aligned on the same row. */
    .tfnz-youfund_detailHeader {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }

    .tfnz-youfund_detailHeaderMain {
        flex: 1 1 auto;
    }

    .tfnz-youfund_detailHeader .tfnz-youfund_detailMeta {
        flex: 0 0 auto;
        justify-content: flex-end;
        text-align: right;
        margin: 0;
    }
}

.tfnz-youfund_detailAside {
    grid-area: aside;
    min-width: 0;
}

@media (min-width: 992px) {
    .tfnz-youfund_detailAside {
        position: sticky;
        /* `top` is viewport-relative and the skin header is `position: fixed` (~81px,
           z-index 1001), so a bare 1rem pinned the box behind the navbar. Clear it.
           The skin can also render an urgent appeal banner inside that fixed header
           (.urgent-banner), which makes the header taller — View.ascx measures the
           banner and feeds its height in through this custom property, so the sticky
           box clears the banner too. Absent (or hidden) → 0px, the original offset. */
        top: calc(100px + var(--tfnz-youfund-urgent-offset, 0px));
    }
}

/* Donation info box: the fundraising tracker plus the interactive controls
   (dollar handles, Complete this cause, Custom amount, Donate). */
.tfnz-youfund_donateBox {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tfnz-youfund_donateBoxAmounts {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #555;
}

/* The raised figure is the hero of the page — large, and in the module's primary colour,
   the way the cause pages on compassioncauses.com treat it — while the "of $X raised"
   remainder stays quiet at the size above. */
.tfnz-youfund_amountRaised {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    color: #007088;
}

/* Progress bar + info icon share one row, so the raised figure above keeps full width. */
.tfnz-youfund_donateProgressRow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tfnz-youfund_donateProgressRow .tfnz-youfund_progress {
    flex: 1 1 auto;
    min-width: 0;
}

.tfnz-youfund_donateBoxMeta {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
}

/* Donation panel (Phase 3, DOCS/donations.md): the interactive controls mount under
   the tracker. Desktop: always expanded (the aside is sticky). Mobile: the amount
   options collapse behind the "Donate now" toggle; the tracker stays visible. */

/* The headline owns the full width of the box; the info icon moved down to the progress row. */
.tfnz-youfund_amountsText {
    display: block;
    min-width: 0;
}

.tfnz-youfund_donateUnavailable {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: #555;
}
.tfnz-youfund_donateUnavailable p {
    margin: 0;
}

.tfnz-youfund_donateControls {
    margin-top: 1rem;
}

.tfnz-youfund_donateToggle {
    display: none; /* mobile only — see the media query below */
}

.tfnz-youfund_handles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.tfnz-youfund_handle {
    padding: 0.6rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    cursor: pointer;
}

.tfnz-youfund_handle:hover {
    border-color: #007088;
    color: #007088;
}

.tfnz-youfund_handle.tfnz-youfund_active {
    background: #007088;
    border-color: #007088;
    color: #fff;
}

/* Complete this cause + Custom amount are two equal fields, each a bold label above an
   outlined control of the same height — the pattern used on compassioncauses.com cause
   pages. On desktop they share one line; below that they wrap rather than squeeze, and
   Custom amount takes the whole row when pnlCompleteGoal is not rendered. */
.tfnz-youfund_donateExtras {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tfnz-youfund_extraField {
    flex: 1 1 9rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* One line from the desktop breakpoint up; a lone Custom amount still fills the row. */
@media (min-width: 992px) {
    .tfnz-youfund_extraField {
        flex: 1 1 0;
    }
}

.tfnz-youfund_extraField > label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
}

/* A little tighter on desktop so "Complete this cause" stays on one line beside the
   Custom amount heading in the narrower aside. */
@media (min-width: 992px) {
    .tfnz-youfund_extraField > label {
        font-size: 0.7rem;
    }
}

/* If a heading ever wraps, keep both controls bottom-aligned instead of offset. */
.tfnz-youfund_extraField > label + * {
    margin-top: auto;
}

.tfnz-youfund_otherInput {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #222;
}
.tfnz-youfund_otherInput:focus {
    /* Same focus outline as the buttons (handles, Complete this cause, Donate). */
    outline: 2px solid #007088;
    outline-offset: 2px;
}

/* The Complete this cause control looks like the Custom amount input (same border,
   radius and type), with the computed outstanding balance as its only text. Hover and
   selected states mirror the three amount handles above it. */
.tfnz-youfund_completeGoal {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    color: #222;
    cursor: pointer;
}

.tfnz-youfund_completeGoal:hover {
    border-color: #007088;
    color: #007088;
}

.tfnz-youfund_completeGoal.tfnz-youfund_active {
    background: #007088;
    border-color: #007088;
    color: #fff;
}

.tfnz-youfund_donateBtn {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: none;
    border-radius: 0.25rem;
    background: #007088;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The skin colours `a:focus` / `a:active` blue, which would repaint the Donate label
   as soon as the button keeps focus after a click. Pin every link state to white. */
.tfnz-youfund_donateBtn:link,
.tfnz-youfund_donateBtn:visited,
.tfnz-youfund_donateBtn:hover,
.tfnz-youfund_donateBtn:focus,
.tfnz-youfund_donateBtn:active {
    color: #fff;
    text-decoration: none;
}

.tfnz-youfund_donateBtn:focus-visible {
    outline: 2px solid #007088;
    outline-offset: 2px;
}

.tfnz-youfund_donateError {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #b00020;
}

/* Overfunding guard (rendered in place of the options after the re-check) */
.tfnz-youfund_donateConfirm {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tfnz-youfund_donateConfirmText {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
}
.tfnz-youfund_donateConfirmActions .tfnz-youfund_donateBtn {
    margin-top: 0;
}
.tfnz-youfund_donateConfirmActions .tfnz-youfund_donateBtn + .tfnz-youfund_donateBtn {
    margin-top: 0.5rem;
}

/* Info icon + tooltip beside the tracker (DOCS/donations.md) */
.tfnz-youfund_info {
    position: relative;
    display: inline-flex;
}
.tfnz-youfund_infoIcon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #007088;
    background: transparent;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.65rem;
    line-height: 1;
    color: #007088;
    cursor: pointer;
}
.tfnz-youfund_infoIcon:hover {
    background: #007088;
    color: #fff;
}
.tfnz-youfund_infoTooltip {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 10;
    width: 16rem;
    max-width: 60vw;
    padding: 0.75rem;
    border-radius: 0.25rem;
    background: #222;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* hover/focus for mouse; .tfnz-youfund_infoOpen is the click/touch state */
.tfnz-youfund_info:hover .tfnz-youfund_infoTooltip,
.tfnz-youfund_info:focus-within .tfnz-youfund_infoTooltip,
.tfnz-youfund_infoTooltip.tfnz-youfund_infoOpen {
    display: block;
}

@media (max-width: 991.98px) {
    .tfnz-youfund_donateToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        border: none;
        border-radius: 0.25rem;
        background: #007088;
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tfnz-youfund_donateToggle:hover,
    .tfnz-youfund_donateToggle:focus,
    .tfnz-youfund_donateToggle:active {
        color: #fff;
    }
    .tfnz-youfund_donateToggle:focus-visible {
        outline: 2px solid #007088;
        outline-offset: 2px;
    }
    .tfnz-youfund_donateOptions {
        display: none;
    }
    .tfnz-youfund_donateOptions.tfnz-youfund_optionsOpen {
        display: block;
        margin-top: 1rem;
    }
    .tfnz-youfund_infoTooltip {
        max-width: calc(100vw - 3rem);
    }
}

/* Back button, copied from the Gift-for-Life details page (#closeDetails.gfl-back):
   the Font Awesome 6 Free left-long glyph (U+F30A) at 27px, above an FSMe-regular label
   at 16px/26px with font-weight 400 and margin-top 2px. Only the colour differs
   (#333, not teal), and it stays #333 through visited/hover/focus/active. */
.tfnz-youfund_detailBack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: #333;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Back link type: rem so it tracks the skin's root steps like the rest of the detail
   page (27px / 16px / 26px at the 22px desktop root). */
.tfnz-youfund_detailBackIcon {
    display: block;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-size: 1.23rem;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.tfnz-youfund_detailBackLabel {
    display: block;
    margin: 2px 0 0;
    font-family: "FSMe-regular", Calibri, sans-serif;
    font-size: 0.73rem;
    font-weight: 400;
    line-height: 1.18rem;
}

.tfnz-youfund_detailBack:link,
.tfnz-youfund_detailBack:visited,
.tfnz-youfund_detailBack:hover,
.tfnz-youfund_detailBack:focus,
.tfnz-youfund_detailBack:active {
    color: #333;
    text-decoration: none;
}

.tfnz-youfund_detailBack:focus-visible {
    outline-color: #333;
}

.tfnz-youfund_detailBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tfnz-youfund_detailTitle {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    line-height: 1.25;
}

.tfnz-youfund_detailMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    /* Category + Started date in the header's top-right corner. */
    font-size: 0.73rem;
    color: #555;
}

.tfnz-youfund_detailMedia {
    margin-bottom: 0.5rem;
}

/* Detail image grid (DOCS/detail-view.md): the main image on the left, up to two
   stacked vertically on the right (max 3 images; no controls). 0/1 image → single
   full-width tile. */
.tfnz-youfund_detailMediaSingle,
.tfnz-youfund_detailMediaGrid {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.25rem;
    overflow: hidden;
}

.tfnz-youfund_detailMediaSingle {
    position: relative;
    background: linear-gradient(135deg, #008caa 0%, #007088 100%);
}

.tfnz-youfund_detailMediaGrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2px;
}

/* Two images: two equal 16:9 tiles side by side (no tall, mismatched cells). */
.tfnz-youfund_detailMediaGrid--two {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 32 / 9;
}

.tfnz-youfund_detailMediaMain {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #008caa 0%, #007088 100%);
}

.tfnz-youfund_detailMediaSide {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.tfnz-youfund_detailMediaCell {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #008caa 0%, #007088 100%);
}

.tfnz-youfund_detailMediaSingle img,
.tfnz-youfund_detailMediaMain img,
.tfnz-youfund_detailMediaCell img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Country badge above the story (DOCS/detail-view.md): the hub card's pill, kept identical
   in colour, padding and type, but static — it labels the copy below it instead of
   overlaying a photo — and free to use the full content width. The spacing makes it an
   eyebrow rather than a caption: 1rem above (collapsing with the media block's own 0.5rem)
   against 0.5rem below, so it hangs off the heading it introduces rather than off the image. */
.tfnz-youfund_detailCountry {
    margin: 1rem 0 0.5rem;
}

.tfnz-youfund_detailCountry .tfnz-youfund_countryBadge {
    position: static;
    max-width: 100%;
    vertical-align: middle;
}

.tfnz-youfund_detailSection {
    /* The 1rem top gap matches the country badge's own top margin, so the first story
       section ("Your impact") hangs off the badge the same way the badge hangs off the
       image. */
    margin: 1rem 0 1.5rem;
}

/* Short teal rule under the story heading and the partner box title: the site's
   line_008caa.png accent (60x6) sits under big headings on tearfund.org.nz. */
.tfnz-youfund_sectionRule {
    display: block;
    width: 60px;
    height: 6px;
    margin: 0.5rem 0 1rem;
    border: 0;
}

.tfnz-youfund_detailSectionTitle {
    margin: 0 0 0.5rem;
    font-size: 1.36rem;
    line-height: 1.3;
    color: #173145;
}

.tfnz-youfund_detailSectionBody {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #333;
}

/* Partner box (DOCS/detail-view.md): a soft cream panel with a static icon in place of
   a photo, the "More about <partner>." title with a teal rule under it, then the blurb.
   No border — a very light shadow lifts it off the page instead. */
.tfnz-youfund_partner {
    padding: 1.25rem;
    background: #fffbe4;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tfnz-youfund_partnerProfile {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.tfnz-youfund_partnerIcon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(0, 140, 170, 0.1);
    color: #008caa;
}

.tfnz-youfund_partnerIcon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* A site-wide custom icon (GoalSiteSettings.PartnerIcon) sits inside the circle at a
   contained size, so any aspect ratio is shown whole. */
.tfnz-youfund_partnerIconImage {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.tfnz-youfund_partnerInfo {
    flex: 1 1 auto;
    min-width: 0;
}

/* Title + teal rule. The wrapper is only shown when there is a partner name; without
   one the box is just the blurb. */
.tfnz-youfund_partnerTitle {
    margin: 0 0 0.75rem;
}

.tfnz-youfund_partnerName {
    margin: 0;
    /* This is the box's title now that the standalone section heading is gone, so it
       matches the other detail section headings. */
    font-size: 1.36rem;
    font-weight: 600;
    line-height: 1.3;
    color: #173145;
    /* The partner name is data, not a label — never let a skin/h3 rule uppercase it. */
    text-transform: none;
}

/* The teal rule under the title sits inside the text column, aligned with the title
   rather than the icon. */
.tfnz-youfund_partner .tfnz-youfund_sectionRule {
    margin: 0.35rem 0 0;
}

.tfnz-youfund_partnerBody {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #333;
}

/* Markdown bodies (DOCS/detail-view.md): "Your impact" and the partner blurb hold
   markdown authored in CRM, so the parser emits real paragraphs, lists, links,
   headings (shifted down to h3-h6), quotes and code. These rules normalise that
   output inside the two bodies. Everything stays in rem so it rides the skin's root
   font-size steps like the rest of the detail page. */
.tfnz-youfund_detailSectionBody > :first-child,
.tfnz-youfund_partnerBody > :first-child {
    margin-top: 0;
}

.tfnz-youfund_detailSectionBody > :last-child,
.tfnz-youfund_partnerBody > :last-child {
    margin-bottom: 0;
}

.tfnz-youfund_detailSectionBody p,
.tfnz-youfund_partnerBody p {
    margin: 0 0 0.75rem;
}

/* The skin styles bare `p` and `li` (16px, the #777 body colour, 26px line-height,
   theme-elements.css/skin.css) and `blockquote p` (17px, #777, default.css). Markdown
   output is made of exactly those elements, so pin the typography back to the section
   body's own 0.82rem / #333 / 1.6 - otherwise the copy renders smaller and greyer
   than the plain text that used to sit directly in the body. */
.tfnz-youfund_detailSectionBody p,
.tfnz-youfund_partnerBody p,
.tfnz-youfund_detailSectionBody li,
.tfnz-youfund_partnerBody li,
.tfnz-youfund_detailSectionBody blockquote,
.tfnz-youfund_partnerBody blockquote,
.tfnz-youfund_detailSectionBody blockquote p,
.tfnz-youfund_partnerBody blockquote p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.tfnz-youfund_detailSectionBody ul,
.tfnz-youfund_partnerBody ul,
.tfnz-youfund_detailSectionBody ol,
.tfnz-youfund_partnerBody ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.tfnz-youfund_detailSectionBody li + li,
.tfnz-youfund_partnerBody li + li {
    margin-top: 0.25rem;
}

/* The skin has no global anchor colour and sets `a:link/:visited { text-decoration: none }`
   with the same specificity as `.class a`, and skin.css loads after module.css. Pin the
   colour and the underline across every link state so a markdown link looks like one. */
.tfnz-youfund_detailSectionBody a,
.tfnz-youfund_detailSectionBody a:link,
.tfnz-youfund_detailSectionBody a:visited,
.tfnz-youfund_detailSectionBody a:hover,
.tfnz-youfund_detailSectionBody a:focus,
.tfnz-youfund_detailSectionBody a:active,
.tfnz-youfund_partnerBody a,
.tfnz-youfund_partnerBody a:link,
.tfnz-youfund_partnerBody a:visited,
.tfnz-youfund_partnerBody a:hover,
.tfnz-youfund_partnerBody a:focus,
.tfnz-youfund_partnerBody a:active {
    color: #008caa;
    text-decoration: underline;
}

.tfnz-youfund_detailSectionBody a:hover,
.tfnz-youfund_detailSectionBody a:focus,
.tfnz-youfund_partnerBody a:hover,
.tfnz-youfund_partnerBody a:focus {
    color: #007088;
}

/* Body headings are shifted down by ContentMarkdown (# -> h3). The skin forces h3's
   colour and margin with !important (custom.css), so those two need it here too. */
.tfnz-youfund_detailSectionBody h3,
.tfnz-youfund_detailSectionBody h4,
.tfnz-youfund_detailSectionBody h5,
.tfnz-youfund_detailSectionBody h6,
.tfnz-youfund_partnerBody h3,
.tfnz-youfund_partnerBody h4,
.tfnz-youfund_partnerBody h5,
.tfnz-youfund_partnerBody h6 {
    margin: 1rem 0 0.5rem !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #173145 !important;
    text-transform: none;
    letter-spacing: 0;
}

.tfnz-youfund_detailSectionBody blockquote,
.tfnz-youfund_partnerBody blockquote {
    margin: 0 0 0.75rem;
    padding: 0 0 0 0.75rem;
    border-left: 3px solid #008caa;
    color: #4a4a4a;
    font-style: italic;
}

.tfnz-youfund_detailSectionBody code,
.tfnz-youfund_partnerBody code {
    padding: 0.1em 0.3em;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    font-size: 0.95em;
}

.tfnz-youfund_detailSectionBody pre,
.tfnz-youfund_partnerBody pre {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.25rem;
}

.tfnz-youfund_detailSectionBody pre code,
.tfnz-youfund_partnerBody pre code {
    padding: 0;
    background: none;
}

.tfnz-youfund_detailSectionBody hr,
.tfnz-youfund_partnerBody hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Markdown images are author-supplied URLs: contain them rather than letting a wide
   one stretch the content column. */
.tfnz-youfund_detailSectionBody img,
.tfnz-youfund_partnerBody img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

/* Share card (DOCS/detail-view.md): a white bordered card after the content sections.
   Title, one-line pitch, a 2-column grid of channel tiles, then the goal URL in a
   bordered field with a copy button. The tiles hold the site's own brand SVGs
   (Images/*.svg) as full-bleed coloured icons, so nothing is recoloured in CSS. */
.tfnz-youfund_detailShare {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.25rem;
    background: #fff;
}

/* The skin forces `h3 { margin: … !important; color: … !important }`, so the card's
   headings need !important on margin and colour to land. */
.tfnz-youfund_shareTitle {
    margin: 0 0 0.35rem !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #333 !important;
    text-transform: none;
}

.tfnz-youfund_shareIntro {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #333;
}

.tfnz-youfund_shareHeading {
    margin: 0 0 0.5rem !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: #333 !important;
    text-transform: none;
}

.tfnz-youfund_shareLinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.tfnz-youfund_shareLink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.25rem;
    background: #f2f0ed;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
}

/* Keep the tiles black in every state — the skin colours visited/active links blue,
   so the colour is pinned (!important) across all link states, not just hover/focus. */
a.tfnz-youfund_shareLink,
a.tfnz-youfund_shareLink:link,
a.tfnz-youfund_shareLink:visited,
a.tfnz-youfund_shareLink:hover,
a.tfnz-youfund_shareLink:focus,
a.tfnz-youfund_shareLink:focus-visible,
a.tfnz-youfund_shareLink:active {
    color: #333 !important;
    text-decoration: none;
}

a.tfnz-youfund_shareLink:hover,
a.tfnz-youfund_shareLink:focus {
    background: #e9e6e1;
}

/* The brand tiles carry their own background, so they're shown at a fixed size. */
.tfnz-youfund_shareIcon {
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
}

/* Copy field: follows the site's own copy control (the bank-details fields on the
   checkout's step 3) — a Bootstrap-style input group, i.e. a bordered field with a
   transparent icon button fused to its right edge behind a single divider, rather than
   a separate rounded button. */
.tfnz-youfund_copyRow {
    display: flex;
    align-items: stretch;
    padding-left: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background: #fff;
    overflow: hidden;
}

.tfnz-youfund_copyInput {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0;
    border: 0;
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #333;
    text-overflow: ellipsis;
}

.tfnz-youfund_copyInput:focus {
    outline: none;
}

.tfnz-youfund_copyRow:focus-within {
    border-color: #008caa;
}

.tfnz-youfund_copyBtn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    padding: 0;
    border: 0;
    border-left: 1px solid #ced4da;
    border-radius: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
}

.tfnz-youfund_copyBtn:hover,
.tfnz-youfund_copyBtn:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.tfnz-youfund_copyBtn:focus-visible {
    outline: 2px solid #008caa;
    outline-offset: -3px;
}

.tfnz-youfund_copyIcon {
    width: 1.15rem;
    height: 1.15rem;
}

/* Copied state: swap the copy glyph for a check (the markup carries both). */
.tfnz-youfund_copyIconDone,
.tfnz-youfund_shareCopied .tfnz-youfund_copyIconCopy {
    display: none;
}

.tfnz-youfund_shareCopied .tfnz-youfund_copyIconDone {
    display: block;
    color: #2e7d32;
}

/* Visually hidden but announced (aria-live copy status). */
.tfnz-youfund_srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .tfnz-youfund_partnerIcon {
        width: 3rem;
        height: 3rem;
    }

    .tfnz-youfund_detailShare {
        padding: 0.85rem;
        margin-top: 1rem;
    }

    .tfnz-youfund_shareLinks {
        grid-template-columns: 1fr;
    }
}



/* Edit-screen sync result */
.tfnz-youfund_syncResult {
    font-size: 0.9rem;
    margin-top: 0.4rem;
    display: block;
}

.tfnz-youfund_syncOk {
    color: #2e7d32;
}

.tfnz-youfund_syncError {
    color: #d32f2f;
}