/* =====================================================================
   home-v2.css  --  the refreshed LANDING PAGE (SiteSettings.HomePageV2)

   Separate from site-v2.css on purpose. site-v2.css restyles the shared
   chrome on every page; this file styles one page, and a trust can take
   either without the other.

   Every colour is derived from the client's own --theme-* vars, so all
   of it works for any palette. The day/night moods below are computed
   SERVER-side (Default.aspx.cs picks the mood from NZ time and puts a
   mood-* class on the hero) so the correct sky is in the first paint
   with no JavaScript and no flash of the wrong colours.
   ===================================================================== */

.hv2 {
    /* Hero ink is the client's heading colour pulled most of the way to a dark
       neutral, NOT the raw heading colour. Several clients set a light or mid
       heading colour (TPOW's is a gold, #9e802e) and hero text in that colour
       on a pale sky is close to unreadable. Keeping 42% of it means the text
       still carries a hint of the brand while staying legible on every palette
       in the fleet. Night overrides this with a light ink further down. */
    --hv2-ink: color-mix(in srgb, var(--theme-heading-color) 42%, #16211f);
    --hv2-ink-2: #4a5f5b;
    --hv2-sky-top: #eaf4f1;
    --hv2-sky-bottom: #cfe8e2;
    --hv2-m1: #b5d8d0;
    --hv2-m2: #7db8ac;
    --hv2-m3: #3d8477;
}

/* ---------------------------------------------------------------
   Day moods. Each is the client's own palette pushed toward a time
   of day, so every theme gets all four. Awatea (midday) is the
   baseline and needs no override.
   --------------------------------------------------------------- */

/* Ata: first light. A warm blush over the client's colours. */
.hv2.mood-ata {
    --hv2-sky-top: color-mix(in srgb, var(--theme-accent) 8%, #fdf4e8);
    --hv2-sky-bottom: color-mix(in srgb, var(--theme-accent) 16%, #f6d9c0);
    --hv2-m1: color-mix(in srgb, var(--theme-accent) 22%, #eddcd0);
    --hv2-m2: color-mix(in srgb, var(--theme-accent) 40%, #d9b39c);
    --hv2-m3: color-mix(in srgb, var(--theme-heading-color) 70%, #77584a);
}

/* Awatea: midday. The client's palette, clean. */
.hv2.mood-awatea {
    --hv2-sky-top: color-mix(in srgb, var(--theme-accent) 10%, #ffffff);
    --hv2-sky-bottom: color-mix(in srgb, var(--theme-accent) 26%, #ffffff);
    --hv2-m1: color-mix(in srgb, var(--theme-accent) 34%, #ffffff);
    --hv2-m2: color-mix(in srgb, var(--theme-accent) 62%, #ffffff);
    --hv2-m3: color-mix(in srgb, var(--theme-heading-color) 78%, var(--theme-accent));
}

/* Ahiahi: golden hour. */
.hv2.mood-ahiahi {
    --hv2-sky-top: color-mix(in srgb, var(--theme-accent) 12%, #f7e3bb);
    --hv2-sky-bottom: color-mix(in srgb, var(--theme-accent) 22%, #f0b56e);
    --hv2-m1: color-mix(in srgb, var(--theme-accent) 26%, #e3b07a);
    --hv2-m2: color-mix(in srgb, var(--theme-accent) 44%, #b57848);
    --hv2-m3: color-mix(in srgb, var(--theme-heading-color) 72%, #6b3d26);
}

/* Po: night. Fixed deep blues, because a dark sky has to be dark
   whatever the client's accent is; the accent still shows in the
   buttons, the band and the maunga tint. */
.hv2.mood-po {
    --hv2-ink: #f3efe4;
    --hv2-ink-2: #c4c9bd;
    --hv2-sky-top: #0b1d33;
    --hv2-sky-bottom: #1d4152;
    --hv2-m1: color-mix(in srgb, var(--theme-accent) 18%, #24455a);
    --hv2-m2: color-mix(in srgb, var(--theme-accent) 12%, #1a3547);
    --hv2-m3: #102536;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hv2-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--hv2-sky-top) 0%, var(--hv2-sky-bottom) 100%);
    margin: 0 0 0 0;
}

.hv2-maunga {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    min-height: 140px;
    pointer-events: none;
}
.hv2-maunga svg { width: 100%; height: 100%; display: block; }
.hv2-m1 { fill: var(--hv2-m1); }
.hv2-m2 { fill: var(--hv2-m2); }
.hv2-m3 { fill: var(--hv2-m3); }

/* Faint stars, night only. */
.hv2-stars { position: absolute; left: 0; right: 0; top: 0; height: 62%; pointer-events: none; display: none; }
.hv2.mood-po .hv2-stars { display: block; }
.hv2-stars i {
    position: absolute;
    background: #f6efd8;
    border-radius: 50%;
    box-shadow: 0 0 5px 1px rgba(250, 243, 214, .4);
}

.hv2-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    padding: 58px 28px 104px;
}

.hv2-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hv2-ink-2);
    margin: 0 0 14px;
}
.hv2-eyebrow::before {
    content: "";
    width: 34px; height: 2px;
    background: var(--theme-accent);
    display: inline-block;
}

.hv2-title {
    font-size: clamp(30px, 4.4vw, 50px) !important;
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.015em;
    color: var(--hv2-ink) !important;
    margin: 0 0 24px !important;
    max-width: 16ch;
    text-wrap: balance;
}

.hv2-whakatauki { max-width: 62ch; min-height: 74px; }
.hv2-reo {
    font-style: italic;
    font-size: clamp(18px, 2.3vw, 25px);
    line-height: 1.35;
    color: var(--hv2-ink);
    margin: 0 0 6px !important;
    max-width: none !important;
}
.hv2-en {
    font-size: 14px;
    color: var(--hv2-ink-2);
    margin: 0 !important;
    max-width: none !important;
}
.hv2-en::before { content: "- "; }
.hv2-fade { transition: opacity .6s ease; }
.hv2-fade.is-out { opacity: 0; }

.hv2-hello { margin-top: 26px; }
.hv2-hello-name {
    font-size: 21px; font-weight: 600; color: var(--hv2-ink);
    margin: 0 0 3px !important; max-width: none !important;
}
.hv2-hello-aff { font-size: 14px; color: var(--hv2-ink-2); margin: 0 !important; max-width: none !important; }

/* CTA row. These wrap real asp:Buttons, so the button chrome comes
   from site-v2.css or the client theme; this only handles layout and
   the primary/secondary distinction. */
.hv2-cta { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 32px; }
.hv2-cta input[type="submit"] {
    font-size: 16px !important;
    padding: 14px 26px !important;
    border-radius: 9px !important;
}
.hv2-cta .hv2-secondary input[type="submit"],
.hv2-cta input.hv2-secondary {
    background: transparent !important;
    color: var(--hv2-ink) !important;
    border: 1.5px solid var(--hv2-ink) !important;
    box-shadow: none !important;
}
.hv2-note {
    flex-basis: 100%;
    font-size: 13.5px;
    color: var(--hv2-ink-2);
    margin: 4px 0 0 !important;
    max-width: none !important;
}
.hv2-note a { color: var(--theme-accent) !important; font-weight: 600; }
.hv2.mood-po .hv2-note a { color: var(--theme-accent-soft, #8fd6c9) !important; }

/* ---------------------------------------------------------------
   Living register
   --------------------------------------------------------------- */
.hv2-living {
    background: #fff;
    border-top: 1px solid #e2e8e6;
    border-bottom: 1px solid #e2e8e6;
}
.hv2-living-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}
.hv2-stat-label {
    font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: #5a6b67; margin: 0 0 6px !important; max-width: none !important;
}
.hv2-stat-num {
    font-size: clamp(38px, 4.6vw, 56px);
    font-weight: 600;
    line-height: 1;
    color: var(--theme-heading-color);
    font-variant-numeric: tabular-nums;
    margin: 0 !important;
    max-width: none !important;
}
.hv2-stat-num span { font-size: 17px; font-weight: 500; color: #5a6b67; margin-left: 10px; }
.hv2-beat {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 13px 0 0 !important; max-width: none !important;
    font-size: 14px; font-weight: 600; color: var(--theme-accent);
}
.hv2-beat b { width: 9px; height: 9px; border-radius: 50%; background: var(--theme-accent); display: inline-block; }
/* The chart group. Up to three sparklines (registrations, grants, register
   activity) sit here as ONE flex item, so when they cannot fit beside the
   member count and the dashboard tile the whole group drops to its own line
   together instead of one chart wrapping away from the other two. */
/* The chart group. At most two charts (register activity, and new grants on a
   site that runs them), sized so the whole band -- count, dashboard tile and
   both charts -- stays on ONE line at 1120px. flex-wrap is the safety net for
   a narrower window, not the intended layout. */
.hv2-sparks { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.hv2-spark { min-width: 220px; }
.hv2-spark-title { font-size: 13px; font-weight: 600; color: #5a6b67; margin: 0 0 8px !important; max-width: none !important; }
.hv2-spark svg { display: block; overflow: visible; }
.hv2-spark-line { fill: none; stroke: var(--theme-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv2-spark-area { fill: color-mix(in srgb, var(--theme-accent) 12%, transparent); stroke: none; }
.hv2-spark-end { fill: var(--theme-accent); stroke: #fff; stroke-width: 2; }
.hv2-spark-ax { font-size: 11px; fill: #5a6b67; }

/* ---------------------------------------------------------------
   Grants dashboard tile. Lives between the member count and the
   registrations graph; admin and system only.
   --------------------------------------------------------------- */
.hv2-dash {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border-radius: 12px;
    text-decoration: none !important;
    background: linear-gradient(135deg,
        var(--theme-heading-color) 0%,
        color-mix(in srgb, var(--theme-accent) 55%, var(--theme-heading-color)) 100%);
    box-shadow: 0 2px 6px rgba(16, 36, 32, .16);
    transition: transform .16s ease, box-shadow .16s ease;
}
.hv2-dash:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 36, 32, .22); }
.hv2-dash-ico { display: grid; place-items: center; flex: 0 0 auto; }
.hv2-dash-txt { display: flex; flex-direction: column; line-height: 1.25; }
.hv2-dash-txt b { color: #fff; font-size: 14.5px; font-weight: 600; }
.hv2-dash-txt i { color: rgba(255, 255, 255, .82); font-size: 12px; font-style: normal; }

/* ---------------------------------------------------------------
   Profile completeness. Sits above the member cards.
   --------------------------------------------------------------- */
.hv2-profile { max-width: 1120px; margin: 0 auto; padding: 34px 28px 0; }
.hv2-profile-card {
    display: flex; align-items: center; gap: 22px;
    background: #fff; border: 1px solid #e2e8e6; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 36, 32, .07), 0 4px 14px rgba(16, 36, 32, .05);
    padding: 20px 24px; max-width: 620px;
}
.hv2-ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.hv2-ring svg { transform: rotate(-90deg); }
.hv2-ring-bg { fill: none; stroke: #e2e8e6; stroke-width: 8; }
.hv2-ring-fg {
    fill: none; stroke: var(--theme-accent); stroke-width: 8; stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
    .hv2-ring-fg { animation: hv2ring 1.1s cubic-bezier(.35, .9, .35, 1) both; }
    @keyframes hv2ring { from { stroke-dashoffset: 251.3; } }
}
.hv2-ring-num {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 600; font-size: 21px; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--theme-heading-color) 55%, #16211f);
}
.hv2-profile-txt { display: flex; flex-direction: column; gap: 5px; }
.hv2-profile-title {
    margin: 0 !important; max-width: none !important;
    font-size: 16.5px; font-weight: 600;
    color: color-mix(in srgb, var(--theme-heading-color) 55%, #16211f);
}
.hv2-profile-nudge {
    margin: 0 !important; max-width: 46ch !important;
    font-size: 13.5px; color: #5a6b67; line-height: 1.5;
}
.hv2-profile-cta {
    align-self: flex-start; margin-top: 8px;
    background: var(--theme-accent); color: #fff !important;
    font-size: 14px; font-weight: 600;
    padding: 9px 17px; border-radius: 8px; text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hv2-profile-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-accent) 34%, transparent);
}
@media (max-width: 560px) {
    .hv2-profile-card { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   Member cards. The jobs a signed-in member came to do, above the
   trust's panui.
   --------------------------------------------------------------- */
.hv2-cards {
    max-width: 1120px;
    margin: 0 auto;
    padding: 36px 28px 4px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.hv2-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 36, 32, .07), 0 4px 14px rgba(16, 36, 32, .05);
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hv2-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16, 36, 32, .10), 0 10px 28px rgba(16, 36, 32, .12);
    border-color: color-mix(in srgb, var(--theme-accent) 45%, #e2e8e6);
}
.hv2-card-ico {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    color: var(--theme-accent);
}
.hv2-card-txt { display: flex; flex-direction: column; gap: 4px; }
.hv2-card-txt b {
    font-size: 15.5px; font-weight: 600;
    color: color-mix(in srgb, var(--theme-heading-color) 55%, #16211f);
}
.hv2-card-txt i { font-style: normal; font-size: 13.5px; color: #5a6b67; line-height: 1.45; }

/* ---------------------------------------------------------------
   Panui: the client's OWN home-page text (EmailTemplate09 / 12).
   Never rewritten, only set well.
   --------------------------------------------------------------- */
.hv2-panui { max-width: 1120px; margin: 0 auto; padding: 40px 28px 8px; }
.hv2-panui-card {
    background: #fff;
    border: 1px solid #e2e8e6;
    border-left: 4px solid var(--theme-accent);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 36, 32, .07), 0 4px 14px rgba(16, 36, 32, .05);
    padding: 24px 28px;
    /* Full container width, so this card lines up with the living-register
       band above it rather than stopping short of it. The comfortable
       reading measure is kept on the paragraphs inside instead. */
}
.hv2-panui-card p { max-width: 74ch; }
.hv2-panui-eyebrow {
    font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: #5a6b67; margin: 0 0 12px !important; max-width: none !important;
}
.hv2-panui-card p { font-size: 15.5px; line-height: 1.65; }

/* ---------------------------------------------------------------
   Already registered
   --------------------------------------------------------------- */
.hv2-already { max-width: 1120px; margin: 0 auto; padding: 26px 28px 40px; font-size: 15px; color: #4a5f5b; }
.hv2-already a { color: var(--theme-accent) !important; font-weight: 600; }

/* ---------------------------------------------------------------
   Motion. Entrances only, and never against a stated preference.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .hv2-rise { animation: hv2rise .7s cubic-bezier(.25, .7, .3, 1) both; }
    .hv2-rise-2 { animation-delay: .1s; }
    .hv2-rise-3 { animation-delay: .2s; }
    .hv2-rise-4 { animation-delay: .3s; }
    @keyframes hv2rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .hv2-stars i { animation: hv2twinkle 4s ease-in-out infinite; }
    @keyframes hv2twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

    .hv2-beat b { position: relative; }
    .hv2-beat b::after {
        content: ""; position: absolute; inset: -5px; border-radius: 50%;
        border: 2px solid var(--theme-accent); opacity: 0;
        animation: hv2pulse 2.2s ease-out infinite;
    }
    @keyframes hv2pulse {
        0% { transform: scale(.5); opacity: .7; }
        70% { transform: scale(1.25); opacity: 0; }
        100% { opacity: 0; }
    }
}

/* ---------------------------------------------------------------
   Small screens
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    .hv2-hero-inner { padding: 40px 18px 84px; }
    .hv2-living-inner { padding: 26px 18px; gap: 22px; }
    .hv2-panui { padding: 30px 18px 6px; }
    .hv2-already { padding: 20px 18px 32px; }
    .hv2-sparks { gap: 18px; }
    .hv2-spark { min-width: 0; width: 100%; }
    .hv2-title { max-width: none; }
}