/* BoemBoost Theme — base.css
   CSS custom properties, reset, global utilities
   ================================================ */

:root {
  /* Brand colours — Suplusnis exact palette */
  --bb-dark:          #003b3b;
  --bb-dark-mid:      #005555;
  --bb-dark-light:    #006e6e;
  --bb-accent:        #99ffbb;
  --bb-accent-hover:  #66e699;
  --bb-accent-dark:   #00b86e;

  /* Page backgrounds */
  --bb-bg:            #f4f7f5;
  --bb-bg-white:      #ffffff;
  --bb-bg-subtle:     #edf2ee;

  /* Text */
  --bb-text:          #0d1f1f;
  --bb-text-muted:    #4a6b6b;
  --bb-text-light:    #ffffff;
  --bb-text-on-dark:  rgba(255,255,255,0.65);

  /* Borders */
  --bb-border:        rgba(0,59,59,0.12);
  --bb-border-dark:   rgba(153,255,187,0.2);
  --bb-border-focus:  var(--bb-accent);

  /* Typography */
  --bb-font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bb-font-heading:  'Syne', 'DM Sans', sans-serif;
  --bb-line-height:   1.7;

  /* Spacing scale (4px base) */
  --bb-s1:  0.25rem;   /* 4px  */
  --bb-s2:  0.5rem;    /* 8px  */
  --bb-s3:  0.75rem;   /* 12px */
  --bb-s4:  1rem;      /* 16px */
  --bb-s5:  1.5rem;    /* 24px */
  --bb-s6:  2rem;      /* 32px */
  --bb-s7:  3rem;      /* 48px */
  --bb-s8:  4rem;      /* 64px */
  --bb-s9:  6rem;      /* 96px */

  /* Radii */
  --bb-r-sm:   6px;
  --bb-r-md:   10px;
  --bb-r-lg:   16px;
  --bb-r-xl:   24px;
  --bb-r-pill: 999px;

  /* Shadows */
  /* v3.9.511 — Schaduwen in drie lagen.
     De kleur staat centraal; de niveaus zetten alleen afstand en vervaging en
     pakken die kleur erbij. Elk element verwijst naar een niveau en kan een
     eigen waarde krijgen in Design → Shadows. Eerder stonden de schaduwen hard
     in de stylesheets, met per plek een andere tint — vandaar dat de knop een
     groene gloed had en de kaarten een groenige. */
  --bb-shadow-color: rgba(0,0,0,0.10);
  --bb-shadow-sm:   0 1px 3px var(--bb-shadow-color);
  --bb-shadow-md:   0 4px 16px var(--bb-shadow-color);
  --bb-shadow-lg:   0 12px 40px var(--bb-shadow-color);
  --bb-shadow-card: 0 2px 12px var(--bb-shadow-color);

  /* Transitions */
  --bb-ease: 0.2s ease;
  --bb-ease-slow: 0.35s ease;

  /* Heading scale */
  --bb-h1-size: clamp(2.25rem, 5vw, 3.5rem);
  --bb-h2-size: clamp(1.75rem, 3.5vw, 2.5rem);
  --bb-h3-size: clamp(1.25rem, 2.5vw, 1.75rem);
  --bb-h4-size: 1.125rem;
  --bb-h5-size: 1rem;

  /* Layout */
  --bb-max:        1280px;
  --bb-max-narrow:  960px;
  --bb-max-text:    720px;

  /* Aliases — used by filter.css and property.css with fallbacks */
  --bb-white:         #ffffff;   /* property card background */
  --bb-muted:         #4a6b6b;   /* filter UI muted text — same value as --bb-text-muted */
  --bb-surface:       #f5f5f3;   /* filter bar surface */
  --bb-side-pad:      24px;      /* filter bar side padding */
  --bb-content-width: 1280px;    /* filter bar max-width — same value as --bb-max */
}

/* ----------------------------------------
   Reset
---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bb-font);
  font-size: 1rem;
  line-height: var(--bb-line-height);
  color: var(--bb-text);
  background-color: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
  padding: 0;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ----------------------------------------
   Container
---------------------------------------- */
.bb-container {
  width: 100%;
  max-width: var(--bb-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bb-s6);
  padding-right: var(--bb-s6);
}

.bb-container--narrow { max-width: var(--bb-max-narrow); }
.bb-container--text   { max-width: var(--bb-max-text); }

/* ----------------------------------------
   Section spacing
---------------------------------------- */
.bb-section {
  padding-top: var(--bb-s9);
  padding-bottom: var(--bb-s9);
}

.bb-section--sm {
  padding-top: var(--bb-s7);
  padding-bottom: var(--bb-s7);
}

.bb-section--xs {
  padding-top: var(--bb-s5);
  padding-bottom: var(--bb-s5);
}

.bb-section--dark {
  background: var(--bb-dark);
  color: var(--bb-text-light);
}

.bb-section--white {
  background: var(--bb-bg-white);
}

.bb-section--subtle {
  background: var(--bb-bg-subtle);
}

/* ----------------------------------------
   Divider label  (— NIEUWBOUWPROJECTEN)
---------------------------------------- */
.bb-label {
  display: flex;
  align-items: center;
  gap: var(--bb-s3);
  margin-bottom: var(--bb-s4);
  color: var(--bb-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bb-label::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1.5px;
  background: var(--bb-accent);
  flex-shrink: 0;
}

/* ----------------------------------------
   Badge / tag
---------------------------------------- */
.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-s2);
  padding: var(--bb-s1) var(--bb-s3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--bb-r-pill);
  background: var(--bb-accent);
  color: var(--bb-dark);
}

.bb-badge--outline {
  background: transparent;
  border: 1px solid var(--bb-border);
  color: var(--bb-text-muted);
}

.bb-badge--dark {
  background: var(--bb-dark);
  color: var(--bb-accent);
}

.bb-badge--new {
  background: var(--bb-accent);
  color: var(--bb-dark);
}

.bb-badge--popular {
  background: var(--bb-dark-light);
  color: var(--bb-accent);
  border: 1px solid var(--bb-border-dark);
}

/* ----------------------------------------
   Aspect ratios + cover image
---------------------------------------- */
.bb-ratio {
  position: relative;
  overflow: hidden;
}
.bb-ratio--16-9  { aspect-ratio: 16 / 9; }
.bb-ratio--4-3   { aspect-ratio: 4 / 3; }
.bb-ratio--3-2   { aspect-ratio: 3 / 2; }
.bb-ratio--1-1   { aspect-ratio: 1 / 1; }
.bb-ratio--hero  { aspect-ratio: 16 / 6; }

.bb-ratio img,
.bb-ratio video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------
   Flex / grid helpers
---------------------------------------- */
.bb-flex        { display: flex; }
.bb-flex-center { display: flex; align-items: center; }
.bb-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.bb-flex-col    { display: flex; flex-direction: column; }
.bb-gap-2       { gap: var(--bb-s2); }
.bb-gap-3       { gap: var(--bb-s3); }
.bb-gap-4       { gap: var(--bb-s4); }
.bb-gap-5       { gap: var(--bb-s5); }
.bb-gap-6       { gap: var(--bb-s6); }

/* ----------------------------------------
   Screen reader only
---------------------------------------- */
.bb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------
   Responsive: tablet
---------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --bb-s9: 5rem;
    --bb-s8: 3.5rem;
  }
}

/* ----------------------------------------
   Responsive: mobile
---------------------------------------- */
@media (max-width: 768px) {
  .bb-container {
    padding-left: var(--bb-s4);
    padding-right: var(--bb-s4);
  }

  :root {
    --bb-s9: 4rem;
    --bb-s8: 3rem;
    --bb-s7: 2.5rem;
  }
}