/* =====================================================================
   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 CLIENT'S OWN PHOTOGRAPHS.

   Two placements, both ADDITIVE: nothing in the hero or the panui is
   removed for a client who turns these on, and a client who does not
   is byte-identical to the page as it shipped. See Utils.HomePhotoUrls.
   --------------------------------------------------------------- */

/* BEHIND THE HERO. The photograph is the ground; the gradient becomes a
   scrim over it and the maunga still draw on top, so the hero keeps its
   shape and its type stays readable at any palette. The scrim is the
   whole trick -- without it a photograph and 40px display type are
   fighting for the same pixels and the type loses. */
.hv2-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* A touch off full saturation so a bright photograph sits with the
       client's palette instead of shouting over it. */
    filter: saturate(.9);
}
/* THE SCRIM IS THE HERO'S OWN GRADIENT, JUST TRANSLUCENT.
   Not an approximation of it: same two custom properties, so it follows the
   mood (day / evening / night) and the chosen palette exactly as the hero
   already does, and a future change to either is picked up here for free.
   The opacity is the only number, and it is doing one job -- keeping 40px
   display type readable over a photograph nobody has vetted. */
.hv2-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--hv2-sky-top) 0%, var(--hv2-sky-bottom) 100%);
    opacity: .82;
}
/* The maunga and the words have to sit ABOVE both layers. Stated here rather
   than left to source order, because source order is what a future edit
   changes without meaning to. */
.hv2-hero:has(.hv2-hero-photo) .hv2-maunga { z-index: 2; }
.hv2-hero:has(.hv2-hero-photo) .hv2-hero-inner { position: relative; z-index: 3; }

/* BESIDE THE PANUI. A small cluster next to the notice: the first image wide
   across the top, the rest paired under it. Sized in its own column so the
   notice keeps a readable measure rather than being squeezed by the photos. */
.hv2-panui-row { display: flex; gap: 22px; align-items: flex-start; }
.hv2-panui-row > .hv2-panui-card { flex: 1 1 auto; min-width: 0; }
.hv2-panui-photos {
    flex: 0 0 232px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.hv2-panui-photos figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--v2-ground, #f4f6f5) 50% / cover no-repeat;
    border: 1px solid #e2e8e6;
}
.hv2-panui-photos figure:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}
/* ANY COUNT HAS TO LOOK DELIBERATE, because the count is the client's and they
   change it whenever they like. One wide photograph then pairs under it leaves a
   hole on the last row for every EVEN total (4, 6, 8) -- the one that would sit
   alone runs the full width instead, so it reads as the group closing rather than
   as a missing photograph. Odd totals (3, 5, 7, 9) pair up exactly and this
   never fires. Matched on the child's position, not on a class, so nothing
   server-side has to know how many there are. */
.hv2-panui-photos figure:last-child:nth-child(even) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}
@media (max-width: 900px) {
    /* Stack rather than shrink: a 232px column of photographs beside a
       one-line notice on a phone is two cramped things instead of one good one.
       Three across and every photograph the same shape -- a full-width 16/9 at
       phone width is 200px tall, and a column of those is a slideshow, not a
       detail beside the words. Both span rules are reset for the same reason. */
    .hv2-panui-row { flex-direction: column; }
    .hv2-panui-photos { flex: 1 1 auto; width: 100%; grid-template-columns: repeat(3, 1fr); }
    .hv2-panui-photos figure:first-child,
    .hv2-panui-photos figure:last-child:nth-child(even) { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* 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; }
}