/* Brand tokens (--web-teal, --web-maroon, --web-ink, --web-white,
   --web-gray-muted, etc.) come from assets/css/color.css, loaded
   globally in the layout. This file intentionally defines no :root —
   a previous version shadowed those tokens with page-local values,
   which silently drifted from the real brand palette. */

/* ── Typography — brand font pairing (matches home / blog listing) ── */
.bp-page { font-family: var(--web-font-body); }

.bp-title,
.bp-content h2, .bp-content h3,
.bp-person-name, .bp-popup-name,
.bp-person-role, .bp-popup-role,
.bp-takeaways-label,
.bp-toc-header,
.eeeat-label, .eeeat-title, .eeeat-name,
.rel-eyebrow, .rel-title, .rel-card-title, .rel-cat,
.bp-breadcrumb a, .bp-breadcrumb .current {
    font-family: var(--web-font-display);
    font-weight: 400; /* Fjalla One only ships a regular weight — bolding it synthesizes and looks off */
}

/* ── Breadcrumb ──────────────────────────────────────── */
.bp-breadcrumb { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.bp-breadcrumb a { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--web-teal); text-decoration:none; }
.bp-breadcrumb .sep { color:var(--web-gray-muted); font-size:.65rem; }
.bp-breadcrumb .current { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--web-gray-muted); }
/* ── Post title / excerpt ────────────────────────────── */
.bp-title { font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.2; color:var(--web-ink); margin-bottom:.75rem; }
.bp-excerpt {
    position:relative;
    font-size:1.2rem; font-weight:500; color:var(--web-ink);
    line-height:1.5; margin-bottom:1.75rem;
    padding-left:2.25rem;
}
.bp-excerpt-mark {
    position:absolute; left:0; top:-.4rem;
    font-family: var(--web-font-display); font-weight:700; font-style:normal;
    font-size:3rem; line-height:1; color:var(--web-maroon);
}

/* ── Author / Reviewer meta bar ─────────────────────── */
.bp-meta-bar {
    display:flex; align-items:stretch; justify-content:space-between;
    flex-wrap:wrap; gap:0;
    background:var(--web-gray-light); border:1px solid var(--web-gray-border);
    border-left:4px solid var(--web-teal);
    border-radius:0 10px 10px 0;
    margin-bottom:1.5rem;
    overflow:visible;          /* MUST be visible so popup is not clipped */
}
.bp-meta-people { display:flex; flex-wrap:wrap; }
.bp-person {
    display:flex; align-items:center; gap:.65rem;
    padding:.85rem 1.25rem;
    border-right:1px solid var(--web-gray-border);
    cursor:pointer; position:relative;
    transition:background .15s; user-select:none;
}
.bp-person:hover { background:rgba(var(--web-teal-rgb),.04); }
.bp-person-avatar {
    width:42px; height:42px; border-radius:50%;
    background:var(--web-teal); color:var(--web-white);
    display:flex; align-items:center; justify-content:center;
    font-size:.82rem; font-weight:800; flex-shrink:0;
    border:2px solid var(--web-white); box-shadow:0 0 0 2px var(--web-teal);
    pointer-events:none;
}
.bp-person-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.bp-person-info { pointer-events:none; }
.bp-person-role  { font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--web-teal); margin-bottom:.1rem; }
.bp-person-name  { font-size:.88rem; color:var(--web-ink); line-height:1.2; }
.bp-person-title { font-size:.72rem; color:var(--web-gray-muted); }

/* ── Popup ───────────────────────────────────────────── */
.bp-person-popup {
    display:none;
    position:absolute;
    top:calc(100% + 14px); left:0;
    z-index:9999;
    width:300px; max-width:calc(100vw - 2rem); background:var(--web-white);
    border:1px solid var(--web-gray-border); border-radius:12px;
    box-shadow:0 8px 32px rgba(var(--web-shadow-rgb),.16);
    padding:1.1rem;
    opacity:0; transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease;
}
/* Arrow caret pointing up toward the trigger person */
.bp-person-popup::before {
    content:'';
    position:absolute;
    top:-8px;
    left:var(--caret-left, 20px);   /* JS updates this to centre on trigger */
    width:14px; height:14px;
    background:var(--web-white);
    border-left:1px solid var(--web-gray-border);
    border-top:1px solid var(--web-gray-border);
    transform:rotate(45deg);
    border-radius:2px 0 0 0;
    transition:left .1s ease;
}
.bp-person-popup.open {
    display:block;
    opacity:1; transform:translateY(0);
}
.bp-popup-header { display:flex; gap:.75rem; align-items:center; margin-bottom:.75rem; }
.bp-popup-avatar {
    width:52px; height:52px; border-radius:8px; flex-shrink:0;
    background:var(--web-teal); color:var(--web-white);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; font-weight:800; overflow:hidden;
}
.bp-popup-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.bp-popup-role  { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--web-teal); margin-bottom:.2rem; }
.bp-popup-name  { font-size:.95rem; color:var(--web-ink); }
.bp-popup-desig { font-size:.75rem; color:var(--web-gray-muted); }
.bp-popup-bio   { font-size:.82rem; color:var(--web-gray-body); line-height:1.6; margin-bottom:.65rem; }
.bp-popup-link  { font-size:.82rem; font-weight:700; color:var(--web-teal); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
.bp-popup-link:hover { color:var(--web-maroon); }
.bp-popup-link::after { content:' \2192'; }

/* ── Meta dates ──────────────────────────────────────── */
.bp-meta-dates {
    display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
    padding:.85rem 1.5rem; text-align:right; margin-left:auto; flex-shrink:0;
    gap:.1rem; border-left:1px solid var(--web-gray-border);
}
.bp-meta-dates .pub {
    font-size:.78rem; color:var(--web-gray-body); line-height:1.65; white-space:nowrap;
}
.bp-meta-dates .pub strong { color:var(--web-teal); font-weight:700; }
.bp-meta-dates .readtime {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.72rem; font-weight:700; letter-spacing:.07em;
    color:var(--web-gray-muted); text-transform:uppercase;
    margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--web-gray-border);
    white-space:nowrap; align-self:flex-end;
}

/* ── Banner ──────────────────────────────────────────── */
.bp-banner { width:100%; border-radius:10px; overflow:hidden; margin-bottom:1.75rem; max-height:500px; }
.bp-banner img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Key Takeaways ───────────────────────────────────── */
.bp-takeaways {
    background:var(--web-white); border:1px solid var(--web-gray-border);
    border-left:4px solid var(--web-teal);
    border-radius:0 10px 10px 0;
    padding:1.1rem 1.3rem; margin-bottom:1.5rem;
}
.bp-takeaways-label { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--web-teal); margin-bottom:.75rem; }
.bp-takeaways ol { list-style:none; padding:0; margin:0; counter-reset:kt; }
.bp-takeaways ol li {
    counter-increment:kt; display:flex; align-items:flex-start; gap:.7rem;
    font-size:.9rem; color:var(--web-gray-body); line-height:1.6;
    padding:.45rem 0; border-bottom:1px solid var(--web-gray-border);
}
.bp-takeaways ol li:last-child { border-bottom:none; }
.bp-takeaways ol li::before {
    content:counter(kt);
    min-width:24px; height:24px; border-radius:5px;
    background:var(--web-teal); color:var(--web-white);
    font-size:.7rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:.15rem;
}

/* ── Two-col layout ──────────────────────────────────── */
.bp-layout { display:grid; grid-template-columns:272px 1fr; gap:2.5rem; align-items:start; }

/* ── TOC column ──────────────────────────────────────── */
.bp-toc-col {
    position:sticky; top:10px;
    display:flex; flex-direction:column; gap:1rem;
    align-self:start;
    /* JS sets max-height on the list; col itself just stacks vertically */
}
.bp-toc-wrap {
    background:var(--web-white); border:1px solid var(--web-gray-border);
    border-radius:10px; overflow:hidden;
    display:flex; flex-direction:column;
}
.bp-toc-header {
    background:var(--web-teal); color:var(--web-white);
    font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
    padding:.65rem 1rem; flex-shrink:0;
}
.bp-toc-list {
    list-style:none; padding:.4rem 0; margin:0;
    overflow-y:auto;
    /* JS will override this with a proper viewport-based value */
    max-height:calc(100vh - 200px);
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--web-teal-rgb),.3) transparent;
}
.bp-toc-list::-webkit-scrollbar       { width:3px; }
.bp-toc-list::-webkit-scrollbar-track { background:transparent; }
.bp-toc-list::-webkit-scrollbar-thumb { background:rgba(var(--web-teal-rgb),.3); border-radius:2px; }
.bp-toc-list li { border-bottom:1px solid var(--web-gray-border); }
.bp-toc-list li:last-child { border-bottom:none; }
.bp-toc-list a {
    display:flex; gap:.5rem; align-items:baseline;
    padding:.52rem 1rem; font-size:.79rem; color:var(--web-gray-body);
    text-decoration:none; line-height:1.35; transition:color .15s, background .15s;
}
.bp-toc-list a:hover { background:rgba(var(--web-teal-rgb),.05); color:var(--web-teal); }
.bp-toc-list a.active {
    color:var(--web-teal); font-weight:700;
    background:rgba(var(--web-teal-rgb),.07); border-left:3px solid var(--web-teal);
}
.bp-toc-list .toc-num { min-width:26px; font-size:.67rem; font-weight:700; color:var(--web-teal); flex-shrink:0; }
.bp-toc-list .toc-sub a { padding-left:1.5rem; font-size:.74rem; color:var(--web-gray-muted); }
.bp-toc-list .toc-sub .toc-num { color:var(--web-gray-muted); }

/* ── Post content ────────────────────────────────────── */
.bp-content { font-size:1rem; color:var(--web-ink); line-height:1.8; overflow-wrap:anywhere; counter-reset:ol-c; }
.bp-content h2 { font-size:1.45rem; color:var(--web-ink); margin:2.25rem 0 .75rem; padding-top:.5rem; border-top:1px solid var(--web-gray-border); }
.bp-content h2:first-child { border-top:none; margin-top:0; }
.bp-content h3 { font-size:1.15rem; color:var(--web-ink); margin:1.5rem 0 .5rem; }
.bp-content h4 { font-size:1rem; font-weight:700; color:var(--web-gray-body); margin:1.25rem 0 .4rem; }
.bp-content p  { margin-bottom:1.1rem; }
.bp-content a  { color:var(--web-maroon); text-decoration:underline; }
.bp-content a:hover { color:var(--web-maroon); }
/* .inline-cta-btn / .toc-cta-btn protect their own text color with
   !important in sections.css, specifically so the generic link color
   above (which would otherwise win via .bp-content a's higher
   specificity) can't make a [cta-*] shortcode's button text illegible. */
.bp-content strong { font-weight:700; }
.bp-content blockquote {
    border-left:4px solid var(--web-teal); margin:1.5rem 0;
    padding:.75rem 1.2rem; background:rgba(var(--web-teal-rgb),.04);
    border-radius:0 8px 8px 0; color:var(--web-gray-body); font-style:italic;
}
/* Checkbox-style ul */
.bp-content ul { list-style:none; padding-left:1.25rem; margin:.5rem 0 1.25rem; }
.bp-content ul li { position:relative; padding-left:1.75rem; margin-bottom:.55rem; font-size:.95rem; line-height:1.65; color:var(--web-gray-body); }
.bp-content ul li::before {
    content:'';
    position:absolute; left:0; top:.3em;
    width:22px; height:22px; border-radius:4px;
    background:var(--web-teal);
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:10px 8px;
}
/* Numbered ol — CMS-authored content sometimes exports one numbered item
   per its own single-item <ol><li> instead of one shared <ol> with
   several <li>. The counter-reset lives on .bp-content (above) instead
   of on each ol, so the count keeps running across sibling <ol> blocks
   and a run of single-item lists numbers 1, 2, 3... correctly with no
   JS needed. */
.bp-content ol { list-style:none; padding-left:1.25rem; margin:.5rem 0 1.25rem; }
.bp-content ol li { counter-increment:ol-c; position:relative; padding-left:2rem; margin-bottom:.55rem; font-size:.95rem; line-height:1.65; color:var(--web-gray-body); }
.bp-content ol li::before {
    content:counter(ol-c);
    position:absolute; left:0; top:.1em;
    width:22px; height:22px; border-radius:50%;
    background:var(--web-teal); color:var(--web-white);
    font-size:.7rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
}

/* .bp-fw-scope / .bp-fw (full-width breakout) now live in sections.css,
   shared with the FAQ and CTA section partials. */

/* ── E-E-A-T ─────────────────────────────────────────── */
.eeeat-wrap  { padding:4rem 0; background:var(--web-gray-light); }
.eeeat-label { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--web-teal); margin-bottom:.35rem; }
.eeeat-title { font-size:1.6rem; color:var(--web-ink); margin-bottom:1.75rem; }
.eeeat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.eeeat-card {
    background:var(--web-white); border:1px solid var(--web-gray-border); border-radius:16px;
    padding:1.5rem; display:flex; gap:1.25rem; align-items:flex-start;
    box-shadow:0 1px 3px rgba(var(--web-ink-rgb),.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eeeat-card:hover {
    transform:translateY(-4px); border-color:transparent;
    box-shadow:0 16px 32px rgba(var(--web-teal-rgb),.12);
}
.eeeat-avatar {
    width:92px; height:92px; border-radius:14px; flex-shrink:0;
    background:var(--web-teal); color:var(--web-white);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; font-weight:800; overflow:hidden;
}
.eeeat-avatar img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.eeeat-role  { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--web-teal); margin-bottom:.3rem; }
.eeeat-name  { font-size:1.05rem; margin-bottom:.15rem; }
.eeeat-desig { font-size:.78rem; font-weight:700; color:var(--web-gray-muted); margin-bottom:.6rem; }
.eeeat-bio   { font-size:.85rem; color:var(--web-gray-muted); line-height:1.6; margin-bottom:.75rem; }
.eeeat-link {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.82rem; font-weight:700; color:var(--web-teal); text-decoration:none;
    transition:gap .18s, color .18s;
}
.eeeat-link:hover { color:var(--web-maroon); gap:.6rem; }

/* .faq-* and .cta-* (FAQ + CTA-with-form sections) now live in
   sections.css, shared with city.blade.php and areas-we-serve.blade.php. */

/* ── Related posts — same card language as the blog listing (.bl-card) ── */
.rel-wrap    { padding:4rem 0; background:var(--web-gray-light); }
.rel-eyebrow { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--web-maroon); margin-bottom:.3rem; }
.rel-title   { font-size:1.5rem; color:var(--web-ink); margin-bottom:1.75rem; }
.rel-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.rel-card {
    border:1px solid var(--web-gray-border); border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--web-white);
    box-shadow:0 1px 3px rgba(var(--web-ink-rgb),.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rel-card:hover {
    transform:translateY(-5px); border-color:transparent;
    box-shadow:0 16px 32px rgba(var(--web-teal-rgb),.14);
}
.rel-img     { aspect-ratio:16/10; position:relative; background:var(--web-gray-light); overflow:hidden; }
.rel-img img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block; transition:transform .5s ease;
}
.rel-card:hover .rel-img img { transform:scale(1.05); }
.rel-body    { padding:1.25rem 1.35rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.rel-cat {
    display:inline-flex; align-self:flex-start;
    font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--web-maroon); background:rgba(var(--web-maroon-rgb),.08);
    border-radius:999px; padding:.3rem .75rem; margin-bottom:.7rem; line-height:1;
}
.rel-card-title {
    font-size:1rem; color:var(--web-ink); line-height:1.4;
    margin-bottom:.5rem; text-decoration:none; display:block;
}
.rel-card-title:hover { color:var(--web-teal); }
.rel-excerpt { font-size:.85rem; color:var(--web-gray-muted); line-height:1.6; flex:1; margin-bottom:1rem; }
.rel-footer  { display:flex; justify-content:space-between; align-items:center; }
.rel-more {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.82rem; font-weight:700; color:var(--web-teal); text-decoration:none;
    transition:gap .18s, color .18s;
}
.rel-more:hover { color:var(--web-maroon); gap:.6rem; }

/* ── Disclaimer ──────────────────────────────────────── */
.disc-wrap { padding:1.1rem 0; background:var(--web-gray-light); border-top:1px solid var(--web-gray-border); }
.disc-box  { display:flex; gap:.85rem; align-items:flex-start; }
.disc-icon { font-size:1rem; color:var(--web-gray-muted); margin-top:.2rem; flex-shrink:0; }
.disc-text { font-size:.8rem; color:var(--web-gray-body); line-height:1.7; margin:0; }
.disc-text strong { color:var(--web-ink); font-weight:700; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:991px) {
    .bp-layout { grid-template-columns:1fr !important; }
    .bp-toc-col { display:none !important; }
    .rel-grid   { grid-template-columns:repeat(2,1fr); gap:1.25rem; }
    .eeeat-cards { grid-template-columns:1fr; }
    .bp-person-popup { width:260px; }
}
@media (max-width:767px) {
    .bp-meta-bar { flex-direction:column; border-radius:10px; border-left-width:1px; border-bottom:4px solid var(--web-teal); }
    .bp-person   { border-right:none; border-bottom:1px solid var(--web-gray-border); width:100%; }
    .bp-meta-dates {
        flex-direction:row; flex-wrap:wrap; align-items:center;
        justify-content:flex-start; gap:.35rem 1.25rem;
        text-align:left; padding:.75rem 1.25rem;
        width:100%; margin-left:0; border-left:none;
        border-top:1px solid var(--web-gray-border);
    }
    .bp-meta-dates .pub { white-space:nowrap; font-size:.78rem; }
    .bp-meta-dates .readtime {
        border-top:none; padding-top:0; margin-top:0;
        border-left:1px solid var(--web-gray-border); padding-left:.75rem;
    }
    .rel-grid  { grid-template-columns:1fr; gap:1.1rem; }
    .rel-wrap  { padding:2.75rem 0; }
    .eeeat-wrap { padding:2.75rem 0; }
    .eeeat-cards { gap:1.1rem; }
    .bp-title  { font-size:1.55rem; }
}
@media (max-width:575px) {
    .bp-meta-people { flex-direction:column; }
    .eeeat-card  { flex-direction:column; }
    .eeeat-avatar { width:60px; height:60px; }
    .bp-takeaways ol li { font-size:.84rem; }
}