/* Rod Inspects: Wave E (Week 2 Info & Utility pages) component styles. Howard, 2026-10-07.
   Pages: /trec-information/ · /home-inspection-checklist/ · /home-inspection-terms/ · /whats-inspected/ ·
          /avoid-the-blind-inspector/ · /recommended-home-repair-vendors/ · /information-for-realtors-and-their-clients/
   Linked AFTER /assets/site.css on those seven pages only. Kept separate from site.css because another
   Howard was building the city pages at the same time and the shared files were frozen. Claude Code can
   fold these rules into site.css later (then drop the extra <link> and bump ?v= on every page).
   Uses site.css tokens only; no new colours. */

/* ── In-page anchors land below the sticky header */
main [id]{scroll-margin-top:96px}

/* ── Hero note with a jump link (TREC page: "Looking for the official TREC rules?") */
.hero-note a{color:var(--link-on-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero-note a:hover{color:#fff}

/* ── AEO band extras: CTA row and notes that sit under the answer */
.aeo .btn-row{margin-top:22px}
.aeo .chips{margin-top:22px}

/* ── TREC license badge: live text (not an image), high contrast, directly under the AEO answer */
.trec-badge{max-width:920px;margin:18px 0 0;background:var(--navy);color:#fff;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.trec-badge::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--river)}
.trec-badge p{margin:0}
.trec-badge .tb-num{font:800 clamp(26px,3.4vw,36px)/1.15 var(--display);color:var(--amber-on-dark);letter-spacing:-.01em}
.trec-badge .tb-who{margin-top:6px;font-size:17px;color:rgba(255,255,255,.9)}
.trec-badge .tb-verify{margin-top:10px;font-size:16px}
.trec-badge a{color:var(--link-on-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.trec-badge a:hover{color:#fff}

/* ── Small italic note (disclaimers) */
.small-note{font-size:15px;color:var(--muted);font-style:italic;margin:14px 0 0}
.prose .btn{margin:6px 0 4px}

/* ── Links inside the navy final CTA */
.final-cta a:not(.btn){color:var(--link-on-navy);font-weight:700}
.final-cta a:not(.btn):hover{color:#fff}
.final-cta .cta-small{font-size:15.5px;margin:26px auto 0;color:rgba(255,255,255,.94)}
.final-cta .cta-small span{font-weight:700;color:#fff;margin-right:4px}
.final-cta .cta-small a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── Checklist boxes (render the copy's ☐ as a styled bullet, not a form input) */
.boxes{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:12px}
.prose .boxes{padding-left:0}
.boxes li{position:relative;padding-left:38px;margin:0}
.boxes li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border:2.5px solid var(--navy);border-radius:5px;background:#fff}
.sec-off .boxes li::before{background:#fff}

/* ── Jump-link chips (glossary groups) */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 2px 8px rgba(var(--shade),.05)}
.chips a:hover{border-color:var(--river);background:var(--river-soft)}

/* ── Glossary definition lists */
.terms{margin:0 0 1em;display:grid;gap:14px}
.terms>div{background:#fff;border:1px solid var(--line);border-left:4px solid var(--river);border-radius:10px;padding:16px 20px}
.terms dt{font:700 18px/1.35 var(--display);color:var(--navy);margin:0 0 4px}
.terms dd{margin:0;color:var(--body)}

/* ── Vendor slots (/recommended-home-repair-vendors/): one card per trade, draft until Rod supplies the list */
.vendor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0}
.vendor-grid .card{padding:22px 22px}
.vendor-grid .card:hover{transform:none;box-shadow:var(--shadow)}
.vendor-grid h3{font-size:19px;margin:0 0 12px}
.ph-vendor{border:2px dashed #C9A15A;background:#FFFBF2;border-radius:8px;padding:12px 14px;color:#5A4520;font:600 14.5px/1.45 var(--sans);margin:0}
.ph-vendor::before{content:"DRAFT PLACEHOLDER";display:block;font:800 11px/1 var(--sans);letter-spacing:.14em;color:#8A4B00;margin:0 0 6px}

/* ── One review placeholder in a prose column */
.reviews.reviews-1{grid-template-columns:minmax(0,1fr);max-width:780px;margin-top:28px}

/* ── GEO box that follows a short lead-in paragraph */
.prose+.geo{margin-top:28px}

/* ── Photo placeholder beside a list */
.split-top{align-items:start}
.split-top .ph-photo{min-height:300px;border-radius:18px}

@media (max-width:900px){
  .vendor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .vendor-grid{grid-template-columns:minmax(0,1fr)}
  .trec-badge{padding:20px 20px 20px 24px}
  .aeo .btn-row .btn{width:100%}
  .terms>div{padding:14px 16px}
  .split-top .ph-photo{min-height:220px}
}

/* ── Print (checklist page carries body.print-friendly): the checklist prints without nav, footer or CTAs */
@media print{
  .print-friendly .site-head,.print-friendly .topbar,.print-friendly .site-foot,.print-friendly .final-cta,
  .print-friendly .btn-row,.print-friendly .ph-photo,.print-friendly .wave,.print-friendly #faq,.print-friendly .geo{display:none!important}
  .print-friendly .hero{background:none!important;color:#000;padding:0 0 12px}
  .print-friendly .hero h1,.print-friendly .hero-sub{color:#000;text-shadow:none}
  .print-friendly .crumbs{display:none}
  .print-friendly .sec{padding:12px 0;background:none}
  .print-friendly .split{display:block}
  .print-friendly a{color:#000;text-decoration:none}
}

/* ── TREC page: answer and license badge side by side on wide screens (badge above the fold at 1280);
      stacked (badge directly under the answer) at 900px and below */
.aeo-lic{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:stretch;max-width:1180px}
.aeo-lic .aeo-box{max-width:none}
.aeo-lic .trec-badge{margin:0;display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){
  .aeo-lic{grid-template-columns:minmax(0,1fr);gap:0}
  .aeo-lic .trec-badge{margin-top:18px}
}