/* benefits.css - National Benefits Database state pages.
   Loaded only on /benefits/ (see partials/head.html).
   Structure modelled on the onepager_OR.html card layout; colours and type come
   from the site tokens in main.css. All classes are bd- prefixed so nothing
   here can collide with existing page styles. */

.bd-hero {
    background: var(--plum);
    color: #fff;
    padding: 64px 40px 56px;
    text-align: center;
}
.bd-eyebrow {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--coral); margin: 0 0 14px;
}
.bd-hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 14px; color: #fff; }
.bd-hero-sub { font-size: 18px; line-height: 1.6; margin: 0 auto; max-width: 640px; opacity: .93; }
.bd-hero-meta { font-size: 14px; margin: 18px 0 0; opacity: .78; }

.bd-page { max-width: 860px; margin: 0 auto; padding: 48px 40px 72px; }

.bd-intro { font-size: 17px; line-height: 1.75; color: var(--dark-gray); margin-bottom: 34px; }
.bd-intro p { margin: 0 0 16px; }
.bd-intro p:last-child { margin-bottom: 0; }
/* the "If you are thinking about sharing your home" paragraph */
.bd-intro p strong:first-child { color: var(--plum); }

/* This strip is markup-wise a <nav>, so main.css's bare-element rule
   (`nav { position: sticky; top: 0; z-index: 100; background: white;
   box-shadow: ...; justify-content: space-between }`) lands on it in full. That
   made it a SECOND sticky bar sharing the site header's z-index, and being later
   in the DOM it painted on top of the header, hiding the logo and most nav links
   as soon as the page scrolled. The space-between is also why the pills spread
   edge to edge instead of sitting together.

   These four resets undo the parts that were never meant for it. They are here
   rather than as `nav:not(.bd-jump)` in main.css so the fix cannot affect the
   site header on any other page. If a third <nav> is ever added, expect to do
   this again, or scope the rule in main.css properly at that point. */
.bd-jump {
    position: static; z-index: auto; box-shadow: none; justify-content: flex-start;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 18px 0 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}
.bd-jump a {
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--plum); background: var(--warm-peach);
    padding: 7px 13px; border-radius: 9999px;
}
.bd-jump a:hover { background: var(--plum); color: #fff; }

/* scroll-margin-top must clear the sticky site header, which measures 75px, or
   a category jumped to from the strip above lands behind it. It was 24px, so
   the heading you asked for sat 51px up underneath the header. */
.bd-cat { margin-bottom: 52px; scroll-margin-top: 96px; }
.bd-cat > h2 {
    font-size: 24px; color: var(--plum); margin: 0 0 20px;
    padding-bottom: 10px; border-bottom: 3px solid var(--coral); display: inline-block;
}

.bd-card {
    border: 1px solid var(--border); border-top: 4px solid var(--plum);
    border-radius: 8px; padding: 22px 24px; margin-bottom: 18px; background: #fff;
}
.bd-card h3 { font-size: 18px; color: var(--plum); margin: 0 0 12px; line-height: 1.35; }

.bd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bd-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: var(--warm-peach); color: var(--plum); padding: 4px 9px; border-radius: 4px;
}
.bd-tag--who { background: #f3f3f3; color: #666; }
/* "Not confirmed" is a caution, not an error, so it reads amber rather than red.
   It must stay legible against the card's white background at 11px. */
.bd-tag--unverified {
    background: #fdf3e0; color: #8a5a00; border: 1px solid #e8c684;
    padding: 3px 8px;
}

/* Sits directly under the tags so the caveat is read before the details it
   applies to, not after them. */
.bd-unverified-note {
    margin: 0 0 14px; padding: 10px 14px; border-radius: 6px;
    border-left: 4px solid #d9a441; background: #fdf7ea;
    font-size: 14px; line-height: 1.6; color: #6b5426;
}

.bd-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 7px 0; font-size: 15px; }
.bd-row + .bd-row { border-top: 1px solid #f6f6f6; }
.bd-k { font-weight: 700; color: #777; font-size: 13px; padding-top: 2px; }
.bd-v { color: var(--dark-gray); line-height: 1.6; }

/* The home-sharing box. This is the distinctive thing on the page: it answers
   whether taking in a home seeker changes what you qualify for. */
.bd-flag {
    margin-top: 14px; padding: 12px 15px; border-radius: 6px;
    font-size: 14.5px; line-height: 1.6; border-left: 4px solid var(--sage);
    background: #f5f8f2; color: var(--dark-gray);
}
.bd-flag b { color: var(--plum); }
.bd-flag--yes { border-left-color: var(--coral); background: #fef4ee; }
.bd-flag--varies { border-left-color: #d9a441; background: #fdf7ea; }

.bd-contact {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.bd-phone { font-weight: 700; color: var(--plum); }
.bd-contact a { color: var(--coral); font-weight: 600; word-break: break-word; }

.bd-none {
    font-size: 15px; line-height: 1.65; color: #6b6b6b; font-style: italic;
    background: #fafafa; border-left: 3px solid #ddd; padding: 12px 16px;
    border-radius: 0 6px 6px 0; margin-bottom: 18px;
}

/* Verification notice, above the jump nav on every state page. Peach rather than
   alarm colours: the point is to be read, not to frighten someone off the page. */
.bd-disclaimer {
    background: var(--warm-peach); border-left: 4px solid var(--coral);
    border-radius: 0 8px 8px 0; padding: 18px 22px; margin-bottom: 26px;
}
.bd-disclaimer-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--plum); margin: 0 0 10px;
}
.bd-disclaimer p { font-size: 14.5px; line-height: 1.7; color: var(--dark-gray); margin: 0 0 10px; }
.bd-disclaimer p:last-child { margin-bottom: 0; }
.bd-disclaimer b { color: #8a5a00; }

/* Link to the print version, between the notice and the jump strip. Uses the
   site's own .btn .btn-primary rather than a bespoke style, so it matches every
   other button on the site. Plum rather than coral: the verification notice
   directly above it already has a coral left border, and two corals stacked
   read as one block. */
.bd-download {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    margin: 0 0 30px;
}
.bd-download p {
    font-size: 14.5px; line-height: 1.6; color: #6b6b6b; margin: 0; max-width: 46ch;
}

/* state index */
.bd-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bd-state {
    display: flex; flex-direction: column; gap: 3px; text-decoration: none;
    border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
    background: #fff; transition: border-color .15s, transform .15s;
}
.bd-state:hover { border-color: var(--plum); transform: translateY(-1px); }
.bd-state-name { font-weight: 700; color: var(--plum); font-size: 16px; }
.bd-state-count { font-size: 13px; color: #888; }
.bd-note { font-size: 14px; color: #777; margin-top: 20px; }

.bd-federal {
    background: var(--warm-peach); border-radius: 8px; padding: 26px 28px; margin-bottom: 44px;
}
.bd-federal h2 { font-size: 20px; color: var(--plum); margin: 0 0 10px; }
.bd-federal p { font-size: 15.5px; line-height: 1.7; color: var(--dark-gray); margin: 0; }
.bd-federal a { color: var(--coral); font-weight: 600; }

.bd-cta { background: var(--plum); color: #fff; border-radius: 8px; padding: 38px 34px; text-align: center; }
.bd-cta-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--coral); margin: 0 0 12px;
}
.bd-cta h2 { font-size: 25px; color: #fff; margin: 0 0 14px; line-height: 1.3; }
.bd-cta p { font-size: 16px; line-height: 1.7; margin: 0 auto 24px; max-width: 560px; opacity: .93; }
.bd-cta .btn { background: var(--coral); color: #fff; border: none; }

@media (max-width: 768px) {
    .bd-hero { padding: 44px 22px 40px; }
    .bd-hero h1 { font-size: 30px; }
    .bd-hero-sub { font-size: 16px; }
    .bd-page { padding: 34px 22px 56px; }
    .bd-row { grid-template-columns: 1fr; gap: 3px; }
    .bd-k { padding-top: 0; }
    .bd-cat > h2 { font-size: 21px; }
    .bd-cta { padding: 30px 22px; }
    .bd-cta h2 { font-size: 21px; }
}
@media (max-width: 480px) {
    .bd-hero h1 { font-size: 26px; }
    .bd-card { padding: 18px 16px; }
    .bd-states { grid-template-columns: 1fr 1fr; }
}