/* =============================================================================
 *  Kanya Daan Project - the project page
 * -----------------------------------------------------------------------------
 *  Loaded AFTER assets/css/kanyadaan-register.css, and useless without it.
 *
 *  This file declares NO colour tokens and NO :root rule. Every colour here is
 *  a --kdr-* custom property already declared under .kdr in the register
 *  stylesheet, and the page's root element carries BOTH classes:
 *
 *      <section class="kdr kdp" data-kdr data-lang="en">
 *
 *  Inheriting .kdr is what buys this page three things for free and keeps it
 *  from drifting away from the form it introduces:
 *    1. the maroon / gold / navy palette and the cream page surface;
 *    2. the two language-swap rules
 *         .kdr[data-lang="en"] .kdr-hi { display:none }
 *         .kdr[data-lang="hi"] .kdr-en { display:none }
 *       - display:none only, because it is the single technique that hides the
 *         off-language copy from the eye, from the accessibility tree AND from
 *         find-in-page at the same time;
 *    3. the shared components the two pages genuinely share - .kdr-masthead,
 *       .kdr-btn, .kdr-terms, .kdr-lang, the breadcrumb.
 *
 *  GOLD IS DECORATIVE. --kdr-gold is for rules, edges and ornament only. The
 *  single gold that may carry type is --kdr-gold-ink (5.74:1 on white). Every
 *  body string on this page sits on --kdr-ink or --kdr-muted.
 *
 *  Everything below is prefixed .kdp- and scoped under .kdp, so nothing can
 *  reach the site header, the footer, the megamenu or any other page.
 * ========================================================================== */

/* =============================================================================
 *  1. PAGE RHYTHM
 * ========================================================================== */

.kdp { padding-bottom: 8px; }

/* One measure for every prose block on the page. 68ch is a little wider than
   the form's 62ch: this page is read, not filled in. */
.kdp-block {
    max-width: 880px;
    margin: 0 auto;
    padding: 34px 0 6px;
    border-top: 1px solid var(--kdr-hairline);
}
.kdp-block:first-of-type { border-top: 0; }

.kdp-masthead { max-width: 880px; }

.kdp-h2 {
    margin: 0 0 12px;
    font-family: var(--kdr-font-head);
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem);
    font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
    color: var(--kdr-maroon);                 /* 11.11:1 on the cream page */
    text-wrap: balance;
}
.kdp-h2 [lang="hi"] { text-wrap: wrap; }      /* Devanagari balances badly */

/* A gold rule under each section head: ornament that carries no information,
   which is the only job gold has here. */
.kdp-h2::after {
    content: ""; display: block;
    width: 52px; height: 3px; margin-top: 10px;
    background: var(--kdr-gold);
    border-radius: var(--kdr-r-pill);
}

.kdp-h3 {
    margin: 26px 0 12px;
    font-family: var(--kdr-font-head);
    font-size: 1.15rem; font-weight: 700; line-height: 1.3;
    color: var(--kdr-navy);                   /* 12.70:1 */
}

.kdp-blocklead {
    margin: 0 0 18px;
    max-width: 68ch;
    font-size: 1.0625rem; line-height: 1.7;
    color: var(--kdr-muted);
}

.kdp-prose { max-width: 68ch; }
.kdp-prose p {
    margin: 0 0 14px;
    font-size: 1.0625rem; line-height: 1.75;
    color: var(--kdr-ink);
}
.kdp-prose p:last-child { margin-bottom: 0; }

/* Devanagari needs more room between lines than Latin at the same size. */
.kdp .kdr-hi { line-height: 1.85; }

/* =============================================================================
 *  2. MASTHEAD EXTRAS
 * ========================================================================== */

.kdp-lead {
    margin: 18px 0 0;
    max-width: 68ch;
    font-size: 1.125rem; line-height: 1.7;
    color: var(--kdr-ink);
}

.kdp-cta-row {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 22px 0 0;
}
.kdp-cta { min-height: 52px; }               /* same target as the form's fields */

/* The "free to register, nobody will ask you for money" line. It is the single
   most protective sentence on the page, so it gets a surface of its own rather
   than becoming another grey paragraph. */
.kdp-trust {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 20px 0 0; padding: 12px 14px;
    max-width: 68ch;
    font-size: .95rem; line-height: 1.6;
    color: var(--kdr-ink);
    background: var(--kdr-success-tint);
    border: 1px solid var(--kdr-success);
    border-radius: var(--kdr-r);
}
.kdp-trust svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--kdr-success); }
.kdp-trust--final { margin-inline: auto; }

/* =============================================================================
 *  3. CARD GRIDS - objectives and kinds of support
 * ========================================================================== */

.kdp-grid {
    display: grid; gap: 14px;
    margin: 0; padding: 0; list-style: none;
}
.kdp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.kdp-card {
    padding: 18px;
    background: var(--kdr-surface);           /* opaque - never a tinted glass card */
    border: 1px solid var(--kdr-card-line);
    border-radius: var(--kdr-r-lg);
    box-shadow: var(--kdr-shadow-1);
}
.kdp-card__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: 10px;
    border-radius: var(--kdr-r-pill);
    background: var(--kdr-maroon-tint);
    color: var(--kdr-maroon);
}
.kdp-card__ico svg { width: 17px; height: 17px; }
.kdp-card__title {
    margin: 0 0 6px;
    font-size: 1.0625rem; font-weight: 700; line-height: 1.35;
    color: var(--kdr-maroon);                 /* 10.29:1 on white */
}
.kdp-card__body {
    margin: 0;
    font-size: .95rem; line-height: 1.7;
    color: var(--kdr-muted);
}

/* Support cards carry a gold edge; the marriage one carries a maroon edge and a
   tint, because it is the entry with a legal condition attached and it must not
   look like just another item on a list. */
.kdp-card--support { border-top: 3px solid var(--kdr-gold); }
.kdp-card--gated {
    border-top-color: var(--kdr-maroon);
    background: var(--kdr-maroon-tint);
}

/* =============================================================================
 *  4. NOTES
 * ========================================================================== */

.kdp-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 16px 0 0; padding: 12px 14px;
    max-width: 68ch;
    font-size: .95rem; line-height: 1.65;
    color: var(--kdr-ink);
    background: var(--kdr-navy-tint);
    border-left: 3px solid var(--kdr-navy);
    border-radius: var(--kdr-r-sm);
}
.kdp-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--kdr-navy); }

/* "This is what may be considered, not what is promised." */
.kdp-note--warn {
    background: var(--kdr-gold-tint);
    border-left-color: var(--kdr-gold-strong);
}
.kdp-note--warn svg { color: var(--kdr-gold-ink); }

/* "Come forward even without every paper." */
.kdp-note--soft {
    background: var(--kdr-success-tint);
    border-left-color: var(--kdr-success);
}
.kdp-note--soft svg { color: var(--kdr-success); }

/* =============================================================================
 *  5. ELIGIBILITY - ticks, the two age tracks, the guarantee notice
 * ========================================================================== */

.kdp-ticks { margin: 0 0 8px; padding: 0; list-style: none; max-width: 68ch; }
.kdp-ticks li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0;
    font-size: 1rem; line-height: 1.65; color: var(--kdr-ink);
}
.kdp-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px;
    border-radius: var(--kdr-r-pill);
    background: var(--kdr-success-tint);
    color: var(--kdr-success);
}
.kdp-tick svg { width: 13px; height: 13px; }

.kdp-tracks {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    margin-bottom: 6px;
}
.kdp-track {
    padding: 18px;
    background: var(--kdr-surface);
    border: 1px solid var(--kdr-card-line);
    border-radius: var(--kdr-r-lg);
}
/* The 10-17 track is the one families most often misread as a refusal, so it is
   given the warm tint and the gold edge rather than a cautionary red one. */
.kdp-track--future   { border-top: 4px solid var(--kdr-gold-strong); background: var(--kdr-gold-tint); }
.kdp-track--eligible { border-top: 4px solid var(--kdr-success); background: var(--kdr-success-tint); }

.kdp-track__range {
    margin: 0 0 6px;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kdr-muted);
}
.kdp-track__badge {
    margin: 0 0 8px;
    font-family: var(--kdr-font-head);
    font-size: 1.1rem; font-weight: 700; line-height: 1.3;
    color: var(--kdr-maroon-deep);
}
.kdp-track__headline {
    margin: 0 0 8px;
    font-size: .98rem; font-weight: 600; line-height: 1.55;
    color: var(--kdr-ink);
}
.kdp-track__body,
.kdp-track__reassure {
    margin: 0 0 8px;
    font-size: .93rem; line-height: 1.7;
    color: var(--kdr-muted);
}
.kdp-track__reassure {
    margin-bottom: 0; padding-top: 8px;
    border-top: 1px dashed var(--kdr-card-line);
    font-style: italic;
}

/* The brief asks for "registration does NOT guarantee assistance" to be
   unmissable. It gets the maroon panel. */
.kdp-guarantee {
    margin: 22px 0 0; padding: 18px;
    max-width: 68ch;
    background: var(--kdr-maroon);
    color: var(--kdr-on-maroon);
    border-radius: var(--kdr-r-lg);
}
.kdp-guarantee__title {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 8px;
    font-family: var(--kdr-font-head);
    font-size: 1.1rem; font-weight: 700; line-height: 1.3;
    color: var(--kdr-gold-on-dark);           /* the one gold that reads on maroon */
}
.kdp-guarantee__title svg { width: 20px; height: 20px; flex: 0 0 auto; }
.kdp-guarantee p {
    margin: 0;
    font-size: 1rem; line-height: 1.75;
    color: var(--kdr-on-maroon);
}

/* =============================================================================
 *  6. HOW IT WORKS
 * ========================================================================== */

.kdp-steps {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 12px;
    counter-reset: none;                      /* the numeral is a real element */
}
.kdp-step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px;
    background: var(--kdr-surface-2);
    border-radius: var(--kdr-r);
}
.kdp-step__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: var(--kdr-r-pill);
    background: var(--kdr-maroon);
    color: var(--kdr-on-maroon);
    font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kdp-step__title {
    margin: 0 0 4px;
    font-size: 1rem; font-weight: 700; line-height: 1.35;
    color: var(--kdr-ink);
}
.kdp-step__body {
    margin: 0;
    font-size: .94rem; line-height: 1.7;
    color: var(--kdr-muted);
}

/* =============================================================================
 *  7. DOCUMENTS
 * ========================================================================== */

.kdp-docs {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 10px;
}
.kdp-doc {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 13px 15px;
    background: var(--kdr-surface);
    border: 1px solid var(--kdr-card-line);
    border-radius: var(--kdr-r);
}
.kdp-doc__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: var(--kdr-r-sm);
    background: var(--kdr-navy-tint);
    color: var(--kdr-navy);
}
.kdp-doc__ico svg { width: 17px; height: 17px; }
.kdp-doc__title {
    margin: 0 0 3px;
    font-size: 1rem; font-weight: 650; line-height: 1.4;
    color: var(--kdr-ink);
}
.kdp-doc__hint {
    margin: 0;
    font-size: .9rem; line-height: 1.6;
    color: var(--kdr-muted);
}

/* =============================================================================
 *  8. TERMS CARD
 *  Borrows .kdr-terms from the register stylesheet; these are the deltas only.
 * ========================================================================== */

.kdp-terms { margin: 4px 0 0; }
.kdp-terms__lead {
    margin: 0 0 12px;
    font-size: .98rem; line-height: 1.7;
    color: var(--kdr-muted);
}
.kdp-terms__list li { line-height: 1.75; }
.kdp-terms__list [lang="hi"] { line-height: 1.9; }

/* =============================================================================
 *  9. SAFEGUARDS
 * ========================================================================== */

.kdp-safeguards {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.kdp-safe {
    padding: 18px;
    background: var(--kdr-surface);
    border: 1px solid var(--kdr-maroon);
    border-left-width: 4px;
    border-radius: var(--kdr-r);
}
.kdp-safe__title {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 8px;
    font-size: 1.02rem; font-weight: 700; line-height: 1.4;
    color: var(--kdr-maroon);
}
.kdp-safe__title svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.kdp-safe p {
    margin: 0;
    font-size: .95rem; line-height: 1.7;
    color: var(--kdr-ink);
}

.kdp-policy {
    margin: 18px 0 0; padding: 14px 16px;
    max-width: 68ch;
    font-size: .93rem; line-height: 1.7;
    color: var(--kdr-muted);
    background: var(--kdr-surface-2);
    border-radius: var(--kdr-r-sm);
}

/* =============================================================================
 *  10. DONORS
 * ========================================================================== */

.kdp-block--donors { }
.kdp-block--donors .kdr-btn { margin-top: 16px; }

/* =============================================================================
 *  11. FAQ
 *  <details>/<summary>, so every answer is readable and findable with no JS.
 * ========================================================================== */

.kdp-faq { display: grid; gap: 8px; max-width: 68ch; }

.kdp-faq__item {
    background: var(--kdr-surface);
    border: 1px solid var(--kdr-card-line);
    border-radius: var(--kdr-r);
    overflow: hidden;
}
.kdp-faq__item[open] { border-color: var(--kdr-maroon); }

.kdp-faq__q {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 1rem; font-weight: 650; line-height: 1.5;
    color: var(--kdr-ink);
    list-style: none;                         /* hide the default disclosure marker */
}
.kdp-faq__q::-webkit-details-marker { display: none; }

/* A marker of our own, so the control still reads as expandable. */
.kdp-faq__q::before {
    content: "+";
    flex: 0 0 auto;
    width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--kdr-r-pill);
    background: var(--kdr-maroon-tint);
    color: var(--kdr-maroon);
    font-weight: 700; line-height: 1;
}
.kdp-faq__item[open] .kdp-faq__q::before { content: "\2212"; }   /* minus */

.kdp-faq__q:hover { background: var(--kdr-surface-2); }
.kdp-faq__q:focus-visible {
    outline: 3px solid var(--kdr-focus);
    outline-offset: -3px;
}

.kdp-faq__a {
    padding: 0 16px 15px 48px;
    font-size: .97rem; line-height: 1.75;
    color: var(--kdr-muted);
}

/* =============================================================================
 *  12. CLOSING CALL TO ACTION
 * ========================================================================== */

.kdp-final {
    max-width: 880px;
    margin: 30px auto 0;
    padding: 30px 24px;
    text-align: center;
    background: var(--kdr-maroon-deep);
    border-radius: var(--kdr-r-lg);
}
.kdp-final__title {
    margin: 0 0 8px;
    font-family: var(--kdr-font-head);
    font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
    font-weight: 700; line-height: 1.25;
    color: var(--kdr-gold-on-dark);
}
.kdp-final__body {
    margin: 0 auto 18px;
    max-width: 56ch;
    font-size: 1.02rem; line-height: 1.7;
    color: var(--kdr-on-maroon);
}
/* The primary button is maroon on cream everywhere else; on this dark panel it
   inverts so it is still the most prominent thing in the block. */
.kdp-final .kdr-btn--primary {
    background: var(--kdr-gold);
    color: var(--kdr-maroon-deep);
    border-color: var(--kdr-gold);
}
.kdp-final .kdr-btn--primary:hover { background: var(--kdr-gold-l, var(--kdr-gold)); }
.kdp-final .kdr-btn--primary:focus-visible {
    outline: 3px solid var(--kdr-on-maroon);
    outline-offset: 2px;
}
.kdp-final .kdp-trust {
    max-width: 56ch;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .34);
    color: var(--kdr-on-maroon);
    text-align: left;
}
.kdp-final .kdp-trust svg { color: var(--kdr-gold-on-dark); }

/* =============================================================================
 *  13. RESPONSIVE
 * ========================================================================== */

@media (max-width: 768px) {
    .kdp-block  { padding-top: 26px; }
    .kdp-tracks { grid-template-columns: 1fr; }
    .kdp-safeguards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .kdp-grid--3 { grid-template-columns: 1fr; }
    .kdp-cta-row { flex-direction: column; align-items: stretch; }
    .kdp-cta     { justify-content: center; }
    .kdp-final   { padding: 24px 16px; border-radius: var(--kdr-r); }
    .kdp-faq__a  { padding-left: 16px; }
    .kdp-step    { gap: 11px; padding: 12px 13px; }
}

/* =============================================================================
 *  14. REDUCED MOTION
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kdp * { transition: none !important; animation: none !important; }
}

/* =============================================================================
 *  15. PRINT
 *  A coordinator printing this for a family should get the whole thing, in one
 *  language, without the calls to action.
 * ========================================================================== */

@media print {
    .kdp .kdr-noprint,
    .kdp .kdp-cta-row,
    .kdp-final { display: none !important; }

    .kdp-block { break-inside: auto; border-top: 1px solid #ccc; }
    .kdp-card, .kdp-track, .kdp-safe, .kdp-doc, .kdp-faq__item { break-inside: avoid; }

    /* Every answer open on paper - a printed accordion is a list of questions. */
    .kdp-faq__item { border: 0; }
    .kdp-faq__a    { display: block !important; padding-left: 16px; }
    .kdp-faq__q::before { display: none; }

    /* Dark panels cost a fortune in toner and read worse than plain type. */
    .kdp-guarantee {
        background: transparent !important;
        color: #000 !important;
        border: 2px solid #000;
    }
    .kdp-guarantee__title, .kdp-guarantee p { color: #000 !important; }
}