/*
 * Real Deal HVAC - blog layer.
 *
 * The pages under /blog/ are generated by tools/build_content.py and link
 * this file LAST, after refine.css. It is self-contained on purpose: every
 * value it needs is declared here, because only 24 pages link site.css and a
 * generated page must look right whichever family it resembles.
 *
 * Class names are namespaced .rdb-* so nothing here collides with the
 * per-page inline copies, and selectors are :root-prefixed to out-specify
 * the component <style> blocks that sit in <body> (rdfaq, rdgr, rdmap).
 *
 * Design language follows refine.css: Archivo display, Inter body, no boxes,
 * blue only on things you can click, and the cool-to-warm rule as the one
 * signature device.
 */

:root .rdb-crumbs, :root .rdb-hero, :root .rdb-layout, :root .rdb-hub {
  --rdb-ink: #12110f;
  --rdb-body: #4b463f;
  --rdb-muted: #8a837a;
  --rdb-line: #e9e5df;
  --rdb-hair: #f1ede7;
  --rdb-off: #f8f6f3;
  --rdb-blue: #1a56db;
  --rdb-blue-dark: #1344b8;
  --rdb-ember: #c2410c;
  --rdb-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --rdb-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rdb-thermal: linear-gradient(90deg, #1a56db 0%, #6d4bb4 55%, #c2410c 100%);
  --rdb-thermal-v: linear-gradient(180deg, #1a56db 0%, #6d4bb4 55%, #c2410c 100%);
  font-family: var(--rdb-font);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
:root .rdb-crumbs { padding: 22px 56px 0; }
:root .rdb-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0 auto; padding: 0; max-width: 760px; font-size: 13px; color: var(--rdb-muted); }
:root .rdb-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rdb-line); }
:root .rdb-crumbs a { color: var(--rdb-muted); text-decoration: none; }
:root .rdb-crumbs a:hover { color: var(--rdb-blue); text-decoration: underline; }
:root .rdb-crumbs [aria-current="page"] { color: var(--rdb-body); }

/* ── Kicker: the signature rule above a label ──────────────────────────── */
:root .rdb-kicker {
  display: block;
  margin: 0 0 16px;
  font-family: var(--rdb-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rdb-ink);
}
:root .rdb-kicker::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 2px;
  margin-right: 12px;
  border-radius: 2px;
  background: var(--rdb-thermal);
  position: relative;
  top: -1px;
}

/* ── Article hero ─────────────────────────────────────────────────────── */
:root .rdb-hero { padding: 30px 56px 40px; background: #fff; }
/* The 760px text column is centred on the page; the aside floats in the right margin.
   The article header is set centred on a slightly wider measure so the headline
   sits on two balanced lines instead of three ragged ones. */
:root .rdb-hero-inner { max-width: 880px; margin: 0 auto; }
:root .rdb-hero:not(.rdb-hero--hub) .rdb-hero-copy { text-align: center; margin: 0 auto; }
:root .rdb-hero:not(.rdb-hero--hub) .rdb-dek { margin-left: auto; margin-right: auto; }
:root .rdb-hero:not(.rdb-hero--hub) .rdb-meta { justify-content: center; }
:root .rdb-crumbs:not(.rdb-crumbs--hub) ol { justify-content: center; }
:root .rdb-hero--hub .rdb-hero-inner, :root .rdb-crumbs--hub ol { max-width: 1300px; }
:root .rdb-hero-copy { max-width: 880px; }
:root .rdb-hero h1 {
  font-family: var(--rdb-display);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--rdb-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
:root .rdb-dek {
  font-family: var(--rdb-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--rdb-body);
  max-width: 64ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
:root .rdb-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--rdb-muted); }
:root .rdb-meta li { display: inline-flex; align-items: center; gap: 7px; }
:root .rdb-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Layout: the text column is dead centre, the aside sits in the right margin ── */
:root .rdb-layout {
  padding: 0 56px 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
}
:root .rdb-body { grid-column: 2; min-width: 0; }

/* Lead photo: the job photos are mostly portrait, so the figure crops to 3:2
   around the centre and hero.position in the JSON can shift the crop. */
:root .rdb-figure { margin: 0 0 34px; }
:root .rdb-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: 14px; display: block; }
:root .rdb-figure figcaption, :root .rdb-figure-inline figcaption { font-size: 13px; line-height: 1.5; color: var(--rdb-muted); margin-top: 10px; }

/* The short version, for readers who will not read the whole thing. */
:root .rdb-summary { background: var(--rdb-off); border-radius: 14px; padding: 22px 26px 20px; margin: 0 0 36px; }
:root .rdb-summary-title { font-family: var(--rdb-font); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rdb-ink); margin: 0 0 12px; }
:root .rdb-summary ul { margin: 0; padding-left: 20px; }
:root .rdb-summary li { font-size: 15.5px; line-height: 1.55; color: var(--rdb-body); margin-bottom: 8px; }
:root .rdb-summary li:last-child { margin-bottom: 0; }
:root .rdb-summary li::marker { color: var(--rdb-muted); }

/* On this page */
:root .rdb-toc { margin: 0 0 40px; padding: 0 0 24px; border-bottom: 1px solid var(--rdb-line); }
:root .rdb-toc-title { font-family: var(--rdb-font); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rdb-muted); margin: 0 0 12px; }
:root .rdb-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 36px; }
:root .rdb-toc li { font-size: 14.5px; line-height: 1.5; margin-bottom: 7px; color: var(--rdb-muted); break-inside: avoid; }
:root .rdb-toc a { color: var(--rdb-body); text-decoration: none; }
:root .rdb-toc a:hover { color: var(--rdb-blue); text-decoration: underline; }

/* Prose */
:root .rdb-section { margin: 0 0 46px; scroll-margin-top: 112px; }
:root .rdb-section:last-child { margin-bottom: 0; }
:root .rdb-section h2 {
  font-family: var(--rdb-display);
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--rdb-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
:root .rdb-section h3 {
  font-family: var(--rdb-display);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--rdb-ink);
  margin: 28px 0 10px;
}
:root .rdb-section p { font-family: var(--rdb-font); font-size: 17px; line-height: 1.7; color: var(--rdb-body); margin: 0 0 18px; }
:root .rdb-section p:last-child { margin-bottom: 0; }
:root .rdb-section a { color: var(--rdb-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:root .rdb-section a:hover { color: var(--rdb-blue-dark); }
:root .rdb-section strong { color: var(--rdb-ink); font-weight: 650; }
:root .rdb-section ul, :root .rdb-section ol { margin: 0 0 20px; padding-left: 24px; }
:root .rdb-section li { font-family: var(--rdb-font); font-size: 17px; line-height: 1.65; color: var(--rdb-body); margin-bottom: 9px; padding-left: 4px; }
:root .rdb-section li::marker { color: var(--rdb-muted); }

/* Pulled-aside note, with the rule turned vertical */
:root .rdb-callout { position: relative; background: var(--rdb-off); border-radius: 14px; padding: 22px 26px 22px 30px; margin: 26px 0; overflow: hidden; }
:root .rdb-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rdb-thermal-v); }
:root .rdb-callout-title { font-family: var(--rdb-display); font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--rdb-ink); margin: 0 0 8px; }
:root .rdb-callout p { font-size: 16px; line-height: 1.65; margin: 0; }

/* Tables read as data: hairlines, no fills */
:root .rdb-table-wrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
:root .rdb-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--rdb-font); font-size: 15px; }
:root .rdb-table-wrap caption { caption-side: top; text-align: left; font-size: 13px; color: var(--rdb-muted); padding-bottom: 10px; }
:root .rdb-table-wrap th, :root .rdb-table-wrap td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rdb-line); line-height: 1.5; vertical-align: top; }
:root .rdb-table-wrap thead th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rdb-muted); border-bottom: 1px solid var(--rdb-ink); }
:root .rdb-table-wrap tbody th { font-weight: 650; color: var(--rdb-ink); }
:root .rdb-table-wrap tbody td { color: var(--rdb-body); font-variant-numeric: lining-nums tabular-nums; }

:root .rdb-figure-inline { margin: 28px 0; }
:root .rdb-figure-inline img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 14px; display: block; }
:root .rdb-figure-inline--full img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* ── Aside: no box. The signature rule, the phone number set large, one line,
   one button, then the related pages as a hairline list. ─────────────────── */
:root .rdb-aside { grid-column: 3; justify-self: start; width: 260px; margin-left: 40px; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 36px; }
:root .rdb-card { padding: 4px 0 0; }
:root .rdb-card .rdb-kicker { margin-bottom: 18px; }
:root .rdb-card-phone {
  display: block;
  font-family: var(--rdb-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--rdb-ink);
  text-decoration: none;
  margin: 0 0 10px;
  transition: color .15s ease;
}
:root .rdb-card-phone:hover { color: var(--rdb-blue); }
:root .rdb-card-note { font-family: var(--rdb-font); font-size: 13.5px; line-height: 1.55; color: var(--rdb-muted); margin: 0 0 20px; }
:root .rdb-card .rd-cta { display: flex; }
:root .rdb-card .rd-btn { width: 100%; justify-content: center; }
:root .rdb-related h2 { font-family: var(--rdb-font); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rdb-muted); margin: 0 0 6px; }
:root .rdb-related ul { list-style: none; margin: 0; padding: 0; }
:root .rdb-related li { border-top: 1px solid var(--rdb-line); }
:root .rdb-related li:last-child { border-bottom: 1px solid var(--rdb-line); }
:root .rdb-related a { display: block; padding: 12px 0; font-family: var(--rdb-font); font-size: 14.5px; font-weight: 550; color: var(--rdb-ink); text-decoration: none; }
:root .rdb-related a:hover { color: var(--rdb-blue); }

/* ── Hub ──────────────────────────────────────────────────────────────── */
:root .rdb-hub { max-width: 1300px; margin: 0 auto; padding: 8px 56px 84px; }
:root .rdb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; list-style: none; margin: 0; padding: 0; }
:root .rdb-post { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
:root .rdb-post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 18px; transition: opacity .15s ease; }
:root .rdb-post:hover img { opacity: .9; }
:root .rdb-post-kicker { font-family: var(--rdb-font); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rdb-muted); margin: 0 0 8px; }
:root .rdb-post h2 { font-family: var(--rdb-display); font-size: 21px; line-height: 1.25; letter-spacing: -.025em; color: var(--rdb-ink); margin: 0 0 8px; }
:root .rdb-post:hover h2 { color: var(--rdb-blue); }
:root .rdb-post p { font-family: var(--rdb-font); font-size: 14.5px; line-height: 1.6; color: var(--rdb-body); margin: 0 0 12px; }
:root .rdb-post time { font-family: var(--rdb-font); font-size: 12.5px; color: var(--rdb-muted); margin-top: auto; }
:root .rdb-empty { font-family: var(--rdb-font); font-size: 16px; color: var(--rdb-muted); }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Between 1440 and 1559px the aside only fits with tighter page padding. */
@media (max-width: 1559px) {
  :root .rdb-layout { padding-left: 32px; padding-right: 32px; }
}
/* Below 1440px there is no room beside a centred column, so the card and the
   related links follow the article instead. */
@media (max-width: 1439px) {
  :root .rdb-layout { grid-template-columns: minmax(0, 1fr); max-width: 872px; margin: 0 auto; row-gap: 44px; padding-left: 56px; padding-right: 56px; }
  :root .rdb-body, :root .rdb-aside { grid-column: 1; }
  :root .rdb-aside { position: static; width: auto; margin-left: 0; flex-direction: row; gap: 48px; align-items: flex-start; padding-top: 32px; border-top: 1px solid var(--rdb-line); }
  :root .rdb-aside > * { flex: 1 1 0; min-width: 0; }
  :root .rdb-card .rd-btn { width: auto; }
}
@media (max-width: 1100px) {
  :root .rdb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root .rdb-aside { flex-direction: column; gap: 32px; }
  :root .rdb-crumbs { padding: 16px 20px 0; }
  :root .rdb-hero { padding: 24px 20px 26px; }
  :root .rdb-layout, :root .rdb-hub { padding-left: 20px; padding-right: 20px; }
  :root .rdb-layout { padding-bottom: 56px; }
  :root .rdb-toc ol { columns: 1; }
  :root .rdb-grid { grid-template-columns: 1fr; gap: 34px; }
  :root .rdb-section p, :root .rdb-section li { font-size: 16px; }
  :root .rdb-dek { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  :root .rdb-post img { transition: none; }
}
