/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'obviously-variable';
  src: url('../fonts/ObviouslyVariable.woff2') format('woff2'),
       url('../fonts/ObviouslyVariable.woff') format('woff');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('../fonts/ObviouslyNarrow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ObviouslyNarrow';
  src: url('../fonts/ObviouslyNarrow-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v19-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v19-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SUSE Mono';
  src: url('../fonts/suse-mono-regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
:root {
  --bb-void:    #080515;
  --bb-deep:    #140E2A;
  --bb-surface: #1E1840;
  --bb-violet:  #7940FB;
  --bb-glow:    #9B6BFC;
  --bb-spark:   #B794FC;
  --bb-mist:    #D4C5FE;
  --bb-amber:   #F5A623;
  --bb-cyan:    #22D3EE;
  --bb-white:   #F5F3FF;
  --bb-pure:    #FFFFFF;

  /* ── Licht thema tokens ────────────────────────────────────────────────── */
  --bb-light:      #EEEDF2;   /* lichtgrijs met violette ondertoon */
  --bb-light-alt:  #E5E3EC;   /* iets dieper — voor afwisseling */
  --bb-ink:        #1A0A3C;   /* diepe violette heading tekst */
  --bb-ink-soft:   #3D3260;   /* body tekst op licht */
  --bb-ink-muted:  #7B6FA8;   /* gedimde labels / subtekst */

  --font-hero:    'obviously-variable', 'ObviouslyNarrow', 'Arial Narrow', sans-serif; /* alleen homepage hero */
  --font-display: 'ObviouslyNarrow', 'Arial Narrow', sans-serif;                     /* alle overige titels */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'SUSE Mono', 'Courier New', monospace;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.25rem;
  --size-xl:   2rem;
  --size-2xl:  clamp(2rem, 4vw, 4rem);
  --size-3xl:  clamp(3rem, 6vw, 7rem);
  --size-hero: clamp(5rem, 12vw, 13rem);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}
html:has(body.bb-vastgoed-page) {
  color-scheme: light;
}

body {
  background-color: var(--bb-void);
  color: var(--bb-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.75;
  overflow-x: clip;
}

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

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--bb-pure);
  line-height: 1.1;
}
h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--bb-white);
}
p { max-width: 65ch; }
strong { font-weight: 400; color: var(--bb-pure); }

/* Lichte secties verwijderd — volledige site gebruikt het donkere thema */

.label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-spark);
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.bb-container {
  width: min(1200px, 100% - 4rem);
  margin-inline: auto;
}
.bb-container--wide {
  width: min(1600px, 100% - 4rem);
  margin-inline: auto;
}

section {
  padding-block: clamp(6rem, 12vw, 12rem);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/*
   Chamfered corners via clip-path — afgesneden hoeken zoals het Beeldbreed-
   frame. Op hover sweept een lichtbaan over de button.
   Geen border-tricks, geen outline-hacks. Eén clean idee.
*/
.wp-block-button__link,
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  transition: background 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}

/* Lichtbaan-sweep op hover */
.wp-block-button__link::before,
.bb-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.14) 50%,
    transparent 75%
  );
  transform: translateX(-150%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
.wp-block-button__link:hover::before,
.bb-btn:hover::before {
  transform: translateX(150%);
}

/* ── Filled ─────────────────────────────────────────────────── */
.bb-btn--filled,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--bb-violet);
  color: var(--bb-pure);
}
.bb-btn--filled:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--bb-glow);
}

/* ── Ghost ──────────────────────────────────────────────────── */
.bb-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: rgba(255,255,255,0.04);
  color: var(--bb-pure);
}
.bb-btn--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(121,64,251,0.1);
}

/* ── Large variant ──────────────────────────────────────────── */
.bb-btn--lg {
  font-size: var(--size-base);
  padding: 1.25rem 3rem;
}

/* ── Glassmorphism card ────────────────────────────────────────────────────── */
.bb-glass {
  background: rgba(21, 16, 46, 0.6);
  border: 1px solid rgba(155, 107, 252, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s var(--ease-out),
              transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.bb-glass:hover {
  border-color: rgba(155, 107, 252, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(121, 64, 251, 0.2);
}

/* ── Noise overlay ────────────────────────────────────────────────────────── */
.bb-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
}
.bb-noise > * { position: relative; z-index: 2; }

/* ── Section divider (gradient line) ──────────────────────────────────────── */
.bb-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bb-violet) 25%,
    var(--bb-glow) 50%,
    var(--bb-violet) 75%,
    transparent 100%
  );
  position: relative;
  z-index: 3;
}

/* ── Kader (brand frame) ─────────────────────────────────────────────────── */
.bb-kader {
  position: relative;
  border: 3px solid var(--bb-violet);
  padding: clamp(2rem, 4vw, 4rem);
}
.bb-kader::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(155,107,252,0.4);
  pointer-events: none;
}
.bb-kader--lg {
  padding: clamp(3rem, 6vw, 6rem);
}
.bb-kader--lg::before { inset: 12px; }
.bb-kader--tilt { transform: rotate(-1.5deg); }
.bb-kader--glow {
  box-shadow: 0 0 40px rgba(121,64,251,0.15), 0 0 80px rgba(121,64,251,0.05);
}

/* Kader decorative corner accents */
.bb-kader-accent {
  position: absolute;
  width: clamp(80px, 10vw, 140px);
  aspect-ratio: 4/3;
  border: 2px solid rgba(121,64,251,0.25);
  pointer-events: none;
  z-index: 1;
}
.bb-kader-accent::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(155,107,252,0.15);
}
.bb-kader-accent--tr { top: -16px; right: -16px; }
.bb-kader-accent--bl { bottom: -16px; left: -16px; transform: rotate(2deg); }

/* ── Scroll-reveal base states ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Stagger children ─────────────────────────────────────────────────────── */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* ── Sticky header transition ─────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background 0.4s var(--ease-out),
              padding 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(6, 4, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem 0;
  border-bottom-color: rgba(155, 107, 252, 0.1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.site-header__mark {
  height: 2rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* Donkere logovariant standaard verborgen (zichtbaar via body.bb-vastgoed-page) */
.site-header__mark--dark { display: none; }
.site-header__wordmark {
  font-family: 'obviously-variable', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bb-pure);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-left: auto;
}
.site-header__nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-white);
  transition: color 0.2s;
  position: relative;
}
.site-header__nav a:hover { color: var(--bb-spark); }
.site-header__nav a.is-active {
  color: var(--bb-spark);
}
.site-header__nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bb-spark);
  border-radius: 1px;
}

/* ── Mobile nav ───────────────────────────────────────────────────────────── */
.bb-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
}
.bb-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--bb-pure);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.bb-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bb-hamburger.is-open span:nth-child(2) { opacity: 0; }
.bb-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bb-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bb-void);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.bb-mobile-nav.is-open { display: flex; }
.bb-mobile-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  transition: color 0.2s;
  line-height: 1;
}
.bb-mobile-nav a:hover { color: var(--bb-spark); }
.bb-mobile-nav hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  width: 60px;
  margin: 0;
}

@media (max-width: 768px) {
  .site-header__nav { display: none; }
  .bb-hamburger { display: flex; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
#site-footer {
  background: var(--bb-void);
  border-top: 1px solid rgba(155, 107, 252, 0.25);
  padding-block: 4rem 2rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: start;
}
/* Kolom 1–4: logo + baseline */
.footer__brand {
  grid-column: 1 / 5;
}
/* Kolom 5–7: navigatie */
.footer__inner > .footer__nav:nth-child(2) {
  grid-column: 5 / 8;
}
/* Kolom 8–10: contact */
.footer__inner > .footer__nav:nth-child(3) {
  grid-column: 8 / 11;
}
/* Kolom 11–12: social */
.footer__inner > .footer__nav:nth-child(4) {
  grid-column: 11 / 13;
}
.footer__logo-framed {
  display: block;
  width: 11rem;
  height: auto;
  margin-left: -0.65rem;
  margin-bottom: 0.25rem;
}
.footer__logo-framed--dark { display: none; }
.footer__wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.footer__logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  position: relative;
  top: 1px; /* optische correctie logo vs. tekstbasislijn */
}
.footer__name {
  font-family: 'obviously-variable', sans-serif;
  font-weight: 500;
  font-size: var(--size-xl);
  color: var(--bb-pure);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.footer__brand p {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  margin-top: 0;
  max-width: 28ch;
}
.footer__nav h4 {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  color: var(--bb-spark);
  margin-bottom: 1rem;
}
.footer__nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer__nav-extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(155, 107, 252, 0.1); }
.footer__nav a {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--bb-pure); }
.footer__social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer__social-link svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
.footer__social-link:hover svg { opacity: 1; }
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(155,107,252,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(196,181,253,0.4);
  max-width: none;
}

@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer__brand,
  .footer__inner > .footer__nav:nth-child(2),
  .footer__inner > .footer__nav:nth-child(3),
  .footer__inner > .footer__nav:nth-child(4) {
    grid-column: 1 / -1;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(121, 64, 251, 0.1);
  }
  .footer__brand {
    border-top: none;
    padding-top: 0;
  }
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
}