/* BoemBoost Theme — typography.css
   Headings, body text, labels, accent styles
   ============================================ */

/* ----------------------------------------
   Headings
---------------------------------------- */
.bb-h1,
.bb-h2,
.bb-h3,
.bb-h4,
.bb-h5 {
  font-family: var(--bb-font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bb-text);
}

/* On dark backgrounds, headings go white */
.bb-section--dark .bb-h1,
.bb-section--dark .bb-h2,
.bb-section--dark .bb-h3,
.bb-section--dark .bb-h4 {
  color: var(--bb-text-light);
}

.bb-h1 { font-size: var(--bb-h1-size); }
.bb-h2 { font-size: var(--bb-h2-size); }
.bb-h3 { font-size: var(--bb-h3-size); font-weight: 700; }
.bb-h4 { font-size: var(--bb-h4-size); font-weight: 700; }
.bb-h5 { font-size: var(--bb-h5-size); font-weight: 700; letter-spacing: 0; }

/* Vangnet: lange woorden op smalle schermen laten afbreken i.p.v.
   buiten beeld lopen (bijv. "Aankoopbegeleiding"). Geldt voor de
   thema-koppen én — tijdelijk, tot we van Elementor af zijn —
   Elementor's eigen heading-widget. */
.bb-h1,
.bb-h2,
.bb-h3,
.bb-h1-accent,
.bb-h2-accent,
.elementor-heading-title {
  overflow-wrap: break-word;
}

/* ----------------------------------------
   Hero — Typography-rollen (scoped)
   Bedraad op de echte hero-onderdelen. "leeg = standaard":
   is een rol-veld leeg, dan wordt de var niet geëmit en geldt
   de fallback (= de huidige stijl). Alleen de hero verandert,
   niet alle H1's op de site.
---------------------------------------- */
.bb-hero__title {
  font-family: var(--bb-role-hero-main-font, var(--bb-font-heading));
  font-size:   var(--bb-role-hero-main-size, var(--bb-h1-size));
  font-weight: var(--bb-role-hero-main-weight, 700);
  line-height: var(--bb-role-hero-main-lh, 1.15);
  color:       var(--bb-role-hero-main-color, var(--bb-text-light));
}
.bb-hero__title-accent {
  font-family: var(--bb-role-hero-accent-font, var(--bb-font-heading));
  font-size:   var(--bb-role-hero-accent-size, var(--bb-h1-size));
  font-weight: var(--bb-role-hero-accent-weight, 800);
  line-height: var(--bb-role-hero-accent-lh, 1.1);
  color:       var(--bb-role-hero-accent-color, var(--bb-accent));
}
.bb-hero__eyebrow {
  font-family: var(--bb-role-hero-eyebrow-font, inherit);
  font-size:   var(--bb-role-hero-eyebrow-size, inherit);
  font-weight: var(--bb-role-hero-eyebrow-weight, inherit);
  line-height: var(--bb-role-hero-eyebrow-lh, inherit);
  color:       var(--bb-role-hero-eyebrow-color, inherit);
}
.bb-hero__lead {
  font-family: var(--bb-role-hero-paragraph-font, var(--bb-font));
  font-size:   var(--bb-role-hero-paragraph-size, 1.125rem);
  font-weight: var(--bb-role-hero-paragraph-weight, 400);
  line-height: var(--bb-role-hero-paragraph-lh, 1.7);
  color:       var(--bb-role-hero-paragraph-color, var(--bb-text-on-dark));
}

/* Accent variant — italic, mint green  (like "in Spanje") */
.bb-h1-accent,
.bb-h2-accent {
  font-style: italic;
  font-weight: 800;
  color: var(--bb-accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bb-h1-accent { font-size: var(--bb-h1-size); }
.bb-h2-accent { font-size: var(--bb-h2-size); }

/* ----------------------------------------
   Body text
---------------------------------------- */
.bb-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--bb-text);
}

.bb-body--lg {
  font-size: 1.125rem;
  line-height: 1.7;
}

.bb-body--sm {
  font-size: 0.875rem;
  line-height: 1.65;
}

.bb-body--muted {
  color: var(--bb-text-muted);
}

/* On dark background */
.bb-section--dark .bb-body,
.bb-section--dark .bb-body--lg,
.bb-section--dark .bb-body--sm {
  color: var(--bb-text-on-dark);
}

/* ----------------------------------------
   Label / caption  (NIEUWBOUWPROJECTEN)
---------------------------------------- */
.bb-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
}

.bb-eyebrow--accent {
  color: var(--bb-accent);
}

/* ----------------------------------------
   Lead paragraph
---------------------------------------- */
.bb-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--bb-text-muted);
  max-width: 48ch;
}

.bb-section--dark .bb-lead {
  color: var(--bb-text-on-dark);
}

/* ----------------------------------------
   Meta text  (price label, date, etc.)
---------------------------------------- */
.bb-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
}

.bb-meta--accent { color: var(--bb-accent); }

/* ----------------------------------------
   Price
---------------------------------------- */
.bb-price {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bb-text);
  line-height: 1.2;
}

.bb-price-range {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bb-text);
  line-height: 1.3;
}

.bb-price-note {
  font-size: 0.75rem;
  color: var(--bb-text-muted);
  margin-top: var(--bb-s1);
  display: flex;
  align-items: center;
  gap: var(--bb-s1);
}

.bb-price-note::before {
  content: '✓';
  color: var(--bb-accent);
  font-weight: 700;
}

/* ----------------------------------------
   Rich text (for WordPress the_content)
---------------------------------------- */
.bb-richtext h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--bb-s4); margin-top: var(--bb-s7); }
.bb-richtext h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--bb-s3); margin-top: var(--bb-s6); }
.bb-richtext p  { margin-bottom: var(--bb-s4); line-height: 1.75; }
.bb-richtext ul,
.bb-richtext ol { margin-bottom: var(--bb-s4); padding-left: var(--bb-s5); }
.bb-richtext ul  { list-style: disc; }
.bb-richtext ol  { list-style: decimal; }
.bb-richtext li  { margin-bottom: var(--bb-s2); }
.bb-richtext a   { color: var(--bb-accent-dark); text-decoration: underline; }
.bb-richtext strong { font-weight: 700; }
.bb-richtext em     { font-style: italic; color: var(--bb-text-muted); }
.bb-richtext blockquote {
  border-left: 3px solid var(--bb-accent);
  padding-left: var(--bb-s5);
  margin: var(--bb-s6) 0;
  font-style: italic;
  color: var(--bb-text-muted);
}

/* ----------------------------------------
   Text utils
---------------------------------------- */
.bb-text-center { text-align: center; }
.bb-text-right  { text-align: right; }
.bb-text-accent { color: var(--bb-accent); }
.bb-text-muted  { color: var(--bb-text-muted); }
.bb-text-white  { color: var(--bb-text-light); }
.bb-text-dark   { color: var(--bb-dark); }

/* ----------------------------------------
   Availability tag (✓ Nog 21 beschikbaar)
---------------------------------------- */
.bb-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-s2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bb-accent-dark);
}

.bb-availability::before {
  content: '✓';
  font-weight: 700;
}