/* ============================================
   SITE THEME — loaded last, wins the cascade
   Matches /calgary-real-estate-listings/ design
   ============================================ */

/* --- Design tokens --- */
:root {
  --green:      #6aba5a;
  --teal:       #48a3a6;
  --lime:       #a2c243;
  --ink:        #012F38;
  --dark-teal:  #012F38;
  --muted:      #6b6b6b;
  --bg:         #f8f7f4;
  --light:      #f8f7f4;
  --lighter:    #ffffff;
  --white:      #ffffff;
  --card-bg:    #ffffff;
  --border:     rgba(1,47,56,0.10);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.13);
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  22px;
  --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sans:       'DM Sans', system-ui, sans-serif;
  --serif:      'Playfair Display', Georgia, serif;
}

/* --- Base --- */
html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4, h5 {
  letter-spacing: -0.025em;
}

/* ============================================
   HEADLINES — DM Sans Regular, tracking ~-20
   All headings + div-based title classes.
   !important to beat per-page serif rules.
   ============================================ */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.ap-title, .bvs-title, .cat-title, .cmp-badge-title, .cond-card-title,
.dc-title, .ep-title, .feat-callout-title, .hazard-title, .hero-title,
.htype-heading, .j-title, .lc-title, .letter-heading, .mtype-heading,
.r-title, .rcard-title, .section-title, .solve-title, .split-title,
.step-title, .svc-title, .tl-title, .toc-title, .val-title,
.collection-main-title,
.ap-title *, .bvs-title *, .cat-title *, .cmp-badge-title *, .cond-card-title *,
.dc-title *, .ep-title *, .feat-callout-title *, .hazard-title *, .hero-title *,
.htype-heading *, .j-title *, .lc-title *, .letter-heading *, .mtype-heading *,
.r-title *, .rcard-title *, .section-title *, .solve-title *, .split-title *,
.step-title *, .svc-title *, .tl-title *, .toc-title *, .val-title *,
.collection-main-title * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* --- Layout utilities --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.section-subtitle {
  font-size: 17px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.65;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
}

.btn-primary  { background: var(--green); color: #fff; }
.btn-primary:hover { background: #5aaa4a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(106,186,90,.35); }

.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid rgba(0,0,0,.2); }
.btn-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

.btn-teal  { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #389a9d; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(72,163,166,.35); }

.btn-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

.btn-white { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); }
.btn-white:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }

/* --- Card defaults --- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* --- Tab buttons (collections, filters) --- */
.tab-btn {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: var(--transition);
  font-family: var(--sans);
}
.tab-btn:hover, .tab-btn.active { background: var(--dark-teal); color: #fff; border-color: var(--dark-teal); }

/* --- Stat cards (dark bg) --- */
.stat-card {
  border-radius: var(--radius);
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-3px); }

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.stat-trend.up      { background: rgba(106,186,90,.2); color: var(--green); }
.stat-trend.down    { background: rgba(229,100,100,.2); color: #e56464; }
.stat-trend.neutral { background: rgba(0,0,0,.06); color: var(--muted); }

/* --- Sidebar / price-range pages --- */
.sidebar-nav a.current {
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* --- IDX widget page hero (buy/ pages) --- */
.page-hero {
  background: var(--dark-teal);
  color: #fff;
}

/* --- Nav ink override (matches #clg-header scoped vars) --- */
#clg-header { --ink: #012F38; }

/* --- Footer text on light bg --- */
footer { color: var(--ink); }

/* Playfair accent class */
.playfair-accent { font-family: var(--serif); }

/* ============================================
   CANONICAL FAQ — consistent accordion style
   site-wide. Visual-only: never sets the
   collapsed max-height, so it can't hide any
   page's answers. Covers both naming schemes
   (.faq-q/.faq-a and .faq-question/.faq-answer).
   ============================================ */
.faq-q, .faq-question {
  width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: none; border-radius: 0;
  padding: 1.2rem 0; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; font-family: var(--sans);
  font-size: .96rem; font-weight: 500; color: var(--ink); line-height: 1.45;
  transition: color .2s;
}
.faq-q:hover, .faq-question:hover, .faq-q:hover .faq-q-text { color: var(--green); }
.faq-q-text { flex: 1; font-size: .96rem; font-weight: 500; color: inherit; line-height: 1.45; }
.faq-icon {
  flex-shrink: 0; font-size: 1.2rem; font-weight: 400; line-height: 1;
  color: var(--green); background: none; width: auto; height: auto;
  border-radius: 0; padding: 0; transition: transform .25s;
}
.faq-item.open .faq-icon, .faq-item.active .faq-icon {
  background: none; color: var(--green); transform: rotate(45deg);
}
.faq-a, .faq-answer {
  font-size: .9rem; line-height: 1.75; color: var(--muted); font-weight: 400;
}
/* open-state only — safe: enlarging a visible answer can't hide content */
.faq-item.open .faq-a, .faq-item.open .faq-answer,
.faq-item.active .faq-a, .faq-item.active .faq-answer {
  max-height: 800px; padding-bottom: 1.25rem;
}
.faq-a a, .faq-answer a { color: var(--teal); font-weight: 500; text-decoration: none; }