/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — assets/css/hrhs-home.css

   Loaded only on the homepage, by HRHS_Pages::enqueue_assets(). It is
   the one page with layouts nothing else uses, and putting them in
   hrhs-core.css would ship them to every screen on the site.

   Everything builds on the existing card language: the hero is the
   same rounded dark panel as a category landing page, buttons are
   .hrhs-btn, and provider cards come from the shared partial. Nothing
   here reinvents a component that already exists.
═══════════════════════════════════════════════════════════════ */

.hrhs-home__block { margin-bottom: 34px; }
/* The hero supplies its own bottom space, so the content column below it does
   not need its usual 40px lead-in as well. */
.hrhs-home__hero + .hrhs-content { padding-top: 34px; }


/* ─── Hero ────────────────────────────────────────────────────
   Full-bleed band. It is a sibling of .hrhs-content rather than a child, so
   edge-to-edge needs no 100vw and produces no horizontal scrollbar. The inner
   wrapper carries the same 1280 and 28px padding as .hrhs-content, which is
   what keeps the hero text aligned with the header logo above it. */
.hrhs-home__hero {
    background: var(--hrhs-dark);
    color: #fff;
    padding: 76px 0 84px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hrhs-home__hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 1;
}
.hrhs-home__hero::after {
    content: "";
    position: absolute;
    width: 900px; height: 900px;
    max-width: 100%;
    top: -420px; right: -260px;
    background: radial-gradient(circle, rgba(74,144,217,.26) 0%, transparent 66%);
    pointer-events: none;
}

.hrhs-home__h1 {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.08;
    margin: 0 0 18px;
    color: #fff;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}
/* The green swoosh from the current site, kept. It is the one piece
   of hand-drawn warmth on the page — used once, on the last word of
   the H1, and nowhere else. */
.hrhs-home__swoosh { position: relative; display: inline-block; white-space: nowrap; }
.hrhs-home__swoosh svg {
    position: absolute; left: 0; bottom: -.22em;
    width: 100%; height: .3em; overflow: visible;
}
.hrhs-home__swoosh path {
    fill: none; stroke: var(--hrhs-accent); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320;
    animation: hrhs-draw .65s ease-out .35s forwards;
}
@keyframes hrhs-draw { to { stroke-dashoffset: 0; } }

.hrhs-home__lede {
    font-size: 1.05rem; line-height: 1.7;
    color: rgba(255,255,255,.86);
    max-width: 64ch; margin: 0 auto 30px;
}

/* Search — the primary control on the page. */
.hrhs-home__search {
    display: flex; gap: 8px; flex-wrap: wrap;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--hrhs-radius-lg);
    padding: 8px;
    max-width: 720px; margin: 0 auto;
}
.hrhs-home__search select {
    flex: 1 1 180px; min-width: 0; height: 46px;
    border: 0; border-radius: var(--hrhs-radius);
    background: rgba(255,255,255,.08); color: #fff;
    font-family: inherit; font-size: .92rem; font-weight: 500;
    padding: 0 14px; cursor: pointer;
}
.hrhs-home__search select option { color: #111; }
.hrhs-home__search .hrhs-btn { flex: 0 0 auto; height: 46px; }

.hrhs-home__alt { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hrhs-home__fine { font-size: .82rem; color: rgba(255,255,255,.6); margin: 0; }


/* ─── Section heads ──────────────────────────────────────────── */
.hrhs-home__eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hrhs-primary-dk); margin-bottom: 10px;
}
.hrhs-home__eyebrow--light { color: var(--hrhs-accent); }
.hrhs-home__h2 {
    font-size: 2rem; font-weight: 800; letter-spacing: -.035em;
    line-height: 1.16; color: var(--hrhs-dark); margin: 0 0 16px;
    max-width: 22ch;
}
.hrhs-home__h2--light { color: #fff; }
.hrhs-home__h2--wide { max-width: none; }

/* Two-column intro, matching the current homepage's split. */
.hrhs-home__split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
    align-items: start; margin-bottom: 30px;
}
.hrhs-home__split p { font-size: .96rem; line-height: 1.75; margin: 0 0 14px; }
.hrhs-home__split p:last-child { margin-bottom: 0; }

/* ─── Reason cards — dark, three across ──────────────────────── */
.hrhs-home__reason-icon {
    width: 42px; height: 42px; margin-bottom: 18px;
    color: var(--hrhs-accent);
}

/* ─── Dark panel (featured head, pro band, close) ─────────────── */
.hrhs-home__panel {
    background: var(--hrhs-dark);
    border-radius: var(--hrhs-radius-xl);
    padding: 44px 40px;
    color: rgba(255,255,255,.84);
}
.hrhs-home__panel--deep { background: #021a26; text-align: center; }


/* ─── Why use HRHS — asymmetric bento ─────────────────────────
   Not three equal tiles. The free/no-commission promise is the
   strongest hook a homeowner has for staying on the page, so it
   gets a panel of its own with the CTA in it; the other two
   support it from the side. Weight variation is the hierarchy. */
.hrhs-home__bento { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch; }

.hrhs-home__bento-lead {
    background: var(--hrhs-dark);
    border-radius: var(--hrhs-radius-xl);
    padding: 38px 36px;
    color: rgba(255,255,255,.82);
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    position: relative; overflow: hidden;
}
.hrhs-home__bento-lead::after {
    content: ""; position: absolute;
    width: 420px; height: 420px; max-width: 100%;
    bottom: -240px; left: -140px;
    background: radial-gradient(circle, rgba(11,255,132,.16) 0%, transparent 66%);
    pointer-events: none;
}
.hrhs-home__bento-lead > * { position: relative; z-index: 1; }
.hrhs-home__bento-lead h3 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -.025em; }
.hrhs-home__bento-lead p  { font-size: .95rem; line-height: 1.75; margin: 0 0 26px; }
.hrhs-home__bento-lead .hrhs-btn { align-self: flex-start; margin-top: auto; }

.hrhs-home__bento-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.hrhs-home__bento-card {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-left: 4px solid var(--hrhs-primary);
    border-radius: 0 var(--hrhs-radius-lg) var(--hrhs-radius-lg) 0;
    padding: 24px 26px;
    display: flex; gap: 16px; align-items: flex-start;
    box-shadow: var(--hrhs-shadow);
    transition: var(--hrhs-transition);
}
.hrhs-home__bento-card:hover { box-shadow: var(--hrhs-shadow-md); }
.hrhs-home__bento-card .hrhs-home__reason-icon { flex-shrink: 0; width: 30px; height: 30px; margin: 2px 0 0; color: var(--hrhs-primary); }
.hrhs-home__bento-card h3 { font-size: 1rem; font-weight: 800; color: var(--hrhs-dark); margin: 0 0 7px; letter-spacing: -.01em; }
.hrhs-home__bento-card p  { font-size: .88rem; line-height: 1.7; color: var(--hrhs-muted); margin: 0; }
.hrhs-home__reason-icon { width: 42px; height: 42px; margin-bottom: 18px; color: var(--hrhs-accent); }

/* ─── Community reviews ──────────────────────────────────────
   Real .hrhs-review-card rows in a real .hrhs-card, so the sample
   reviews are the same object a profile page renders. */
.hrhs-home__community { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hrhs-home__community .hrhs-card { margin-bottom: 0; }
.hrhs-home__body { font-size: .98rem; line-height: 1.75; color: var(--hrhs-muted); margin: 0 0 14px; max-width: 54ch; }
.hrhs-home__body strong { color: var(--hrhs-dark); }

/* ─── Pro band ───────────────────────────────────────────────── */
.hrhs-home__pro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.hrhs-home__pro p { font-size: .96rem; line-height: 1.75; margin: 0 0 14px; }
.hrhs-home__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hrhs-home__benefit {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--hrhs-radius-lg);
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hrhs-home__benefit--wide { grid-column: 1 / -1; }
.hrhs-home__benefit h3 { font-size: .95rem; font-weight: 800; color: #fff; margin: 0 0 6px; }
.hrhs-home__benefit p { font-size: .84rem; line-height: 1.65; margin: 0; color: rgba(255,255,255,.74); }

/* ─── Review explainer ───────────────────────────────────────── */

/* ─── Close ──────────────────────────────────────────────────── */
.hrhs-home__close-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ─── Bits the template needs that the mockup did without ─────── */
.hrhs-home__centered { text-align: center; max-width: 70ch; margin: 0 auto 26px; }
.hrhs-home__centered .hrhs-home__h2 { margin-left: auto; margin-right: auto; }
.hrhs-home__centered .hrhs-home__body { margin-left: auto; margin-right: auto; }
.hrhs-home__h2--centered { margin-left: auto; margin-right: auto; }
.hrhs-home__actions { margin: 24px 0 8px; }
.hrhs-home__panel-lede { margin: 0; font-size: .98rem; line-height: 1.7; }
.hrhs-home__panel--deep .hrhs-home__close-actions { margin-top: 24px; }
.hrhs-home__taxlinks { margin-bottom: 26px; }
.hrhs-home__taxlinks:last-child { margin-bottom: 0; }
.hrhs-home__swoosh--dark path { stroke: var(--hrhs-accent-dk); }
.hrhs-home__community .hrhs-review-card:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* Visually hidden, but read out. The hero selects need labels and the
   placeholder option is not one — a screen reader announcing "combo box"
   with no name is the most common failure on a search form like this. */
.hrhs-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
    .hrhs-home__split,
    .hrhs-home__bento,
    .hrhs-home__community,
    .hrhs-home__pro,
    .hrhs-home__benefits { grid-template-columns: 1fr; }
    .hrhs-home__bento-side { grid-template-rows: auto auto; }
    .hrhs-home__hero { padding: 44px 0 52px; }
    .hrhs-home__h1 { font-size: 2rem; }
    .hrhs-home__h2 { font-size: 1.5rem; }
    .hrhs-home__panel { padding: 30px 22px; }
    .hrhs-home__search .hrhs-btn { width: 100%; }
    }

@media (prefers-reduced-motion: reduce) {
    .hrhs-home__swoosh path { animation: none; stroke-dashoffset: 0; }
    }