/* Calgary Condo Documents Knowledge Centre.
   Brand palette only: #012F38 dark teal, #6aba5a green, #f8f7f4 off-white.
   These are reference pages people read at length, so the body column is
   narrow, the type is large and the callouts are quiet. */

/* ONE measure for the whole page. The body column was 820px while the hero,
   breadcrumbs and CTA were 1180px, so the CTA copy started ~67px left of every
   other line and read as a different width. Everything now shares one left
   edge. */
.cd-inner{max-width:820px;margin:0 auto;padding:0 2rem}
@media (max-width:760px){.cd-inner{padding:0 1.25rem}}

/* ── hero ──────────────────────────────────────────────────────────────── */
.cd-hero{background:#012F38;padding:4.5rem 0 3.2rem}
.cd-kicker{font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime,#A2C243);font-weight:500;
  margin:0 0 1rem}
/* some condo-documents pages carry an unrelated legacy inline .cd-kicker rule
   (a same-prefix collision from an older component); this wins the cascade by
   source order alone, so pin the hero kicker color with a scoped selector */
.cd-hero .cd-kicker{color:var(--lime,#A2C243) !important}
.cd-hero h1{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;color:#fff;font-weight:700;
  margin:0 0 1.5rem;max-width:22ch}
.cd-lede{max-width:60ch}
.cd-lede p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.12rem;
  line-height:1.72;color:rgba(255,255,255,.84);margin:0 0 .85rem}
.cd-lede p:last-child{margin-bottom:0}
@media (max-width:760px){.cd-hero{padding:3rem 0 2.2rem}}

/* ── breadcrumbs ───────────────────────────────────────────────────────── */
.cd-crumbs{background:#fff;border-bottom:1px solid #e6e3dc;padding:.9rem 0;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem}
.cd-crumbs .cd-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cd-crumbs a{color:#0e7c66;text-decoration:none}
.cd-crumbs a:hover{text-decoration:underline}
.cd-crumbs span{color:var(--muted,#5A5A5A)}
.cd-crumbs .cd-sep{color:#b9c2c4}

/* ── body ──────────────────────────────────────────────────────────────── */
.cd-wrap{background:#f8f7f4}
.cd-body{padding:3.5rem 0 1rem}
.cd-sec{margin:0 0 2.6rem}
.cd-sec h2{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;
  color:#012F38;font-weight:700;line-height:1.24;margin:0 0 1rem}
.cd-sec p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.08rem;
  line-height:1.85;color:var(--muted,#5A5A5A);margin:0 0 1.15rem}
.cd-sec ul,.cd-sec ol{margin:0 0 1.35rem;padding-left:1.25rem}
.cd-sec li{font-family:'DM Sans',system-ui,sans-serif;font-size:1.04rem;
  line-height:1.78;color:var(--muted,#5A5A5A);margin-bottom:.55rem}
.cd-sec a{color:#0e7c66;text-decoration:none;border-bottom:1px solid rgba(106,186,90,.5)}
.cd-sec a:hover{border-bottom-color:#6aba5a}
.cd-sec strong{color:#012F38}

/* two-column list for the long enumerations */
.cd-cols{columns:2;column-gap:2.5rem}
.cd-cols li{break-inside:avoid}
@media (max-width:620px){.cd-cols{columns:1}}

/* pull quote / emphasis line */
.cd-pull{font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.22rem !important;line-height:1.5 !important;color:#012F38 !important;
  border-left:3px solid var(--lime,#A2C243);padding-left:1.1rem;margin:1.6rem 0 !important}

/* callout — used for the compliance boxes and the "context matters" notes */
.cd-callout{background:#fff;border-left:3px solid #6aba5a;padding:1.4rem 1.6rem;
  margin:1.6rem 0;border-radius:0 3px 3px 0;box-shadow:0 8px 26px rgba(1,47,56,.05)}
.cd-callout p:last-child{margin-bottom:0}
.cd-callout .cd-pull{border-left:0;padding-left:0;margin-top:0 !important}
.cd-callout ul{margin-bottom:1.1rem}

/* ── document cards (hub) ──────────────────────────────────────────────── */
.cd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.2rem;margin:1.8rem 0 0}
.cd-card{display:flex;flex-direction:column;background:#fff;border-radius:4px;
  border-top:3px solid #6aba5a;padding:1.4rem 1.5rem 1.3rem;text-decoration:none;
  box-shadow:0 10px 30px rgba(1,47,56,.05);transition:box-shadow .22s,transform .22s}
.cd-card:hover{box-shadow:0 18px 44px rgba(1,47,56,.11);transform:translateY(-2px)}
.cd-card b{font-family:'Playfair Display',Georgia,serif;font-size:1.18rem;
  color:#012F38;font-weight:700;margin:0 0 .5rem}
.cd-card p{font-family:'DM Sans',system-ui,sans-serif;font-size:.92rem;
  line-height:1.66;color:var(--muted,#5A5A5A);margin:0 0 1.1rem}
.cd-card .cd-go{font-family:'DM Sans',system-ui,sans-serif;font-size:.85rem;
  font-weight:500;color:#012F38;border-bottom:2px solid #6aba5a;padding-bottom:2px;
  align-self:flex-start;margin-top:auto}

/* ── route cards (top-level hub) ───────────────────────────────────────── */
.cd-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.2rem;margin:1.6rem 0 0}
.cd-route{display:flex;flex-direction:column;background:#fff;border-radius:4px;
  padding:1.5rem 1.6rem 1.35rem;text-decoration:none;border:1px solid #e6e3dc;
  transition:border-color .2s,transform .2s}
.cd-route:hover{border-color:#6aba5a;transform:translateY(-2px)}
.cd-route b{font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;
  color:#012F38;font-weight:700;margin:0 0 .5rem}
.cd-route p{font-family:'DM Sans',system-ui,sans-serif;font-size:.92rem;
  line-height:1.66;color:var(--muted,#5A5A5A);margin:0 0 1.1rem}
.cd-route .cd-go{font-family:'DM Sans',system-ui,sans-serif;font-size:.85rem;
  font-weight:500;color:#012F38;border-bottom:2px solid #6aba5a;padding-bottom:2px;
  align-self:flex-start;margin-top:auto}

/* ── related ───────────────────────────────────────────────────────────── */
.cd-related{border-top:1px solid #e6e3dc;padding-top:1.8rem;margin-top:2.4rem}
.cd-related h3{font-family:'DM Sans',system-ui,sans-serif;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#5A5A5A);font-weight:500;
  margin:0 0 .9rem}
.cd-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem}
.cd-related li{margin:0}
.cd-related a{display:inline-block;font-family:'DM Sans',system-ui,sans-serif;
  font-size:.88rem;color:#012F38;background:#fff;border:1px solid #d5d0c6;
  border-radius:99px;padding:.45rem 1rem;text-decoration:none;transition:.18s}
.cd-related a:hover{border-color:#6aba5a;color:#0e7c66}

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cd-cta{background:#012F38;padding:3.2rem 0;margin-top:3rem}
.cd-cta h2{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;font-weight:700;margin:0 0 .9rem;
  max-width:24ch}
.cd-cta p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.04rem;
  line-height:1.75;color:rgba(255,255,255,.8);margin:0 0 1.6rem;max-width:58ch}
.cd-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.cd-btn{display:inline-block;font-family:'DM Sans',system-ui,sans-serif;
  background:#6aba5a;color:#012F38;padding:.8rem 1.6rem;font-size:.86rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;border:1px solid #6aba5a;
  transition:background .2s}
.cd-btn:hover{background:#5aa84a}
.cd-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cd-btn.ghost:hover{background:transparent;border-color:#6aba5a;color:#6aba5a}
@media (max-width:760px){
  .cd-body{padding:2.4rem 0 .5rem}
  .cd-cta{padding:2.4rem 0}
  .cd-btn{width:100%;text-align:center}
}

/* Hand-off block on the existing condo buyer guide into the documents tree. */
.cd-hooklink{max-width:1180px;margin:2.5rem auto;padding:1.6rem 1.8rem;
  background:#f8f7f4;border-left:3px solid #6aba5a;
  font-family:'DM Sans',system-ui,sans-serif}
.cd-hooklink-lbl{display:block;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal,#48A3A6);margin-bottom:.55rem}
.cd-hooklink a{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;
  color:#012F38;font-weight:700;text-decoration:none;line-height:1.35;
  display:inline-block;border-bottom:2px solid #6aba5a;transition:color .2s}
.cd-hooklink a:hover{color:#6aba5a}
.cd-hooklink p{font-size:.95rem;line-height:1.72;color:var(--muted,#5A5A5A);margin:.7rem 0 0;
  max-width:70ch}
@media (max-width:760px){.cd-hooklink{margin:2rem 1.25rem;padding:1.3rem 1.4rem}
  .cd-hooklink a{font-size:1.1rem}}

/* ── .cd-wrap must not paint over a hero ───────────────────────────────────
   .cd-wrap carries the off-white background of the documents body. The condo
   buyer guide reuses the same class on its hero content block to get the
   measure — so the wrapper painted an opaque #f8f7f4 panel, at z-index 2,
   straight over the skyline photo, leaving white hero text on an off-white
   ground. The background belongs to the body wrapper, never to hero content. */
.hero .cd-wrap,
.cd-hero .cd-wrap,
.hero-content.cd-wrap { background: transparent; }