/* ─────────────────────────────────────────────────────────────────────────────
   Site footer — Components/Layout/Footer.razor. Scoped under .nff.
   Navy → royal-blue gradient, four cards (white brand · glass links · orange donate ·
   glass contact) and the legal bar. Orange waves top and bottom.
   ───────────────────────────────────────────────────────────────────────────── */

.nff {
    --ff-navy: var(--nfd-navy, #102F65);
    --ff-royal: #1255A0;
    --ff-orange: #FF7900;
    --ff-orange-text: var(--nfd-orange-text, #BF5600);    /* on white */
    --ff-ink: var(--nfd-navy, #102F65);
    --ff-glass: rgba(255, 255, 255, .08);
    --ff-glass-line: rgba(255, 255, 255, .18);
    --ff-wave-top: clamp(40px, 5vw, 80px);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: calc(var(--ff-wave-top) + clamp(28px, 3vw, 44px)) 24px 0;
    color: #fff;
    background:
        radial-gradient(ellipse 50% 60% at 15% 0%, rgba(43, 115, 210, .55) 0%, rgba(43, 115, 210, 0) 70%),
        radial-gradient(ellipse 40% 50% at 100% 70%, rgba(255, 140, 50, .22) 0%, rgba(255, 140, 50, 0) 70%),
        linear-gradient(160deg, var(--ff-royal) 0%, var(--ff-navy) 45%, #052655 100%);
}

/* Orange swoosh in the top-right corner, a soft light curve across the top. */
.nff::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    height: var(--ff-wave-top);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V18 C1080 62 360 62 0 18Z' fill='%23F5F8FD'/%3E%3Cpath d='M0 26 C360 70 1080 70 1440 26' fill='none' stroke='%23FF7900' stroke-width='3' opacity='.85'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}

.nff__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nff__doodle { position: absolute; color: #fff; opacity: .12; }
.nff__doodle--book   { left: 3%;  top: calc(var(--ff-wave-top) - 10px); width: clamp(60px, 6vw, 110px); transform: rotate(-12deg); }
.nff__doodle--rocket { right: 3%; top: calc(var(--ff-wave-top) + 30px); width: clamp(44px, 4vw, 70px); }
.nff__doodle--cap    { right: 30%; bottom: 120px; width: clamp(44px, 4vw, 64px); opacity: .08; }
.nff__doodle--leaf   { left: 1.5%; bottom: 96px; width: clamp(40px, 4vw, 70px); color: #5E8FD8; opacity: .35; }

.nff__grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.15fr);
    gap: clamp(16px, 2vw, 28px);
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.nff__card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: clamp(22px, 2.2vw, 32px);
    border-radius: 20px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.nff__card:hover { transform: translateY(-5px); }

.nff__card--glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
    border: 1px solid var(--ff-glass-line);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.nff__card--glass:hover { box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16); }

.nff h2.nff__heading {
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(16px, 1.15vw, 19px);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}
.nff__heading svg { flex: none; width: 24px; height: 24px; color: var(--ff-orange); }

/* 1 · Brand card (white). */
.nff__card--brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(44px, 4vw, 60px);
    text-align: center;
    color: var(--ff-ink);
    background: #fff;
    box-shadow: 0 28px 50px -26px rgba(0, 0, 0, .6);
}
.nff__card--brand::after {          /* soft orange wave along the bottom */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C110 46 240 46 400 8 L400 50 L0 50Z' fill='%23FFD9B0'/%3E%3Cpath d='M0 38 C140 50 280 44 400 24 L400 50 L0 50Z' fill='%23FFB46B'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.nff__logo { display: block; line-height: 0; }
.nff .nff__logo img[width] { display: block; width: min(230px, 100%); height: auto; max-width: none; }
.nff__rule { display: block; width: 72px; height: 4px; margin: 20px auto 18px; border-radius: 3px; background: var(--ff-orange); }
.nff p.nff__mission {
    margin: 0;
    max-width: 17em;
    font-size: clamp(15px, 1.1vw, 16.5px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ff-ink);
    text-transform: none;
}
.nff__hl { color: var(--ff-orange-text); font-weight: 700; }

/* 2 · Links. */
.nff__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nff__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}
.nff__link span { flex: 1; }
.nff__link-ico { flex: none; width: 24px; height: 24px; color: var(--ff-orange); }
.nff__chev { flex: none; width: 18px; height: 18px; transition: transform .3s ease; }
.nff__link:hover {
    color: #fff;
    background: rgba(255, 121, 0, .18);
    border-color: rgba(255, 150, 60, .6);
    transform: translateX(4px);
}
.nff__link:hover .nff__chev { transform: translateX(4px); color: #FFB066; }

/* 3 · Donate card (orange). */
.nff__card--donate {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #F7861F 0%, #EC6F00 55%, #D86200 100%);
    box-shadow: 0 28px 50px -24px rgba(226, 94, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nff__card--donate:hover { box-shadow: 0 34px 56px -22px rgba(226, 94, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nff__card--donate .nff__heading svg { color: #fff; }
.nff p.nff__donate-text {
    margin: 0 0 22px;
    font-size: clamp(15px, 1.1vw, 16.5px);
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    text-transform: none;
}
.nff__donate-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--ff-orange-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 22px -10px rgba(120, 40, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.nff__donate-btn svg { width: 20px; height: 20px; transition: transform .3s ease; }
.nff__donate-btn:hover {
    color: var(--ff-orange-text);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 28px -12px rgba(120, 40, 0, .65);
}
.nff__donate-btn:hover svg { transform: translateX(4px); }
.nff__hands {
    width: clamp(96px, 8vw, 130px);
    height: auto;
    margin: auto auto 0;
    padding-top: 18px;
    color: rgba(255, 255, 255, .55);
    transition: transform .4s ease;
}
.nff__card--donate:hover .nff__hands { transform: translateY(-4px); }

/* 4 · Contact. */
.nff__address {
    display: flex;
    gap: 12px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ff-glass-line);
    font-size: 15px;
    font-style: normal;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}
.nff__address strong { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 700; color: #fff; }
.nff__pin { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--ff-orange); }
.nff__reach {
    list-style: none;
    margin: 0 0 16px;
    padding: 0 0 16px;
    display: grid;
    gap: 10px;
    border-bottom: 1px solid var(--ff-glass-line);
}
.nff__reach li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .9); text-transform: none; }
.nff__reach svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--ff-orange); }
.nff__reach span { min-width: 0; overflow-wrap: anywhere; }
.nff__reach a { color: #fff; font-weight: 500; text-decoration: none; transition: color .2s ease; }
/* `overflow-wrap: anywhere` on the span lets the long email wrap, but it also split the phone
   number mid-way ("+91 9130 056 / 600"). Keep the number whole; it moves to its own line instead. */
.nff__reach a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; display: inline-block; }
/* 24px+ tap height for the phone and email links (WCAG 2.2 target size). */
.nff__reach a { display: inline-block; padding-block: 2px; }
.nff__reach a:hover { color: #FFB066; text-decoration: underline; }

.nff p.nff__follow {
    margin: 0 0 12px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.nff__social { display: flex; flex-wrap: wrap; gap: 12px; }
.nff__social a {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.nff__social svg { width: 22px; height: 22px; }
.nff__social a:hover { background: var(--ff-orange); border-color: var(--ff-orange); transform: translateY(-3px); }

.nff a:focus-visible,
.nff button:focus-visible,
.nff input:focus-visible { outline: 2px solid #FFB066; outline-offset: 3px; }
.nff__card--brand a:focus-visible { outline-color: var(--ff-orange); }

/* ── Bottom bar with orange wave ───────────────────────────────────────────── */

.nff__bottom {
    position: relative;
    margin: clamp(28px, 3vw, 40px) -24px 0;
    padding: clamp(46px, 5vw, 70px) 24px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 28px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .85);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FF7900' stop-opacity='.75'/%3E%3Cstop offset='.6' stop-color='%23FF7900' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23FF7900' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 34 C320 0 700 10 1040 44 C1200 60 1330 56 1440 46 L1440 120 L0 120Z' fill='url(%23o)'/%3E%3Cpath d='M0 58 C360 26 720 40 1060 66 C1220 78 1340 74 1440 66 L1440 120 L0 120Z' fill='%23052655'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.nff__bottom p { margin: 0; text-transform: none; }
.nff__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.nff__legal a { color: rgba(255, 255, 255, .85); text-decoration: none; transition: color .2s ease; }
.nff__legal a:hover { color: #FFB066; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .nff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699.98px) {
    .nff { padding-inline: 16px; }
    .nff__grid { grid-template-columns: 1fr; gap: 18px; }
    .nff__card--glass:not(.nff__card--contact) .nff__heading,
    .nff__card--donate { text-align: center; }
    .nff__card--donate { align-items: center; }
    .nff__card--donate .nff__heading,
    .nff__card--glass:not(.nff__card--contact) .nff__heading { justify-content: center; }
    .nff__donate-btn { align-self: center; }
    .nff__card--contact .nff__follow { text-align: center; }
    .nff__social { justify-content: center; }
    .nff__bottom { margin-inline: -16px; flex-direction: column; text-align: center; }
    .nff__doodle--cap, .nff__doodle--rocket { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nff *, .nff__card { transition: none !important; }
    .nff__card:hover, .nff__link:hover, .nff__social a:hover, .nff__donate-btn:hover,
}