/* ============================================================
   Layout / chrome — La Belle Beauté
   Topbar, header (zwevend + sticky), mobiel menu, footer,
   WhatsApp-float en de grain-overlay. Bron: homepage-ontwerp.
   ============================================================ */

/* grain overlay over alles */
body::after {
  content:         "";
  position:        fixed;
  inset:           0;
  z-index:         9999;
  pointer-events:  none;
  background:      url("../images/grain.png");
  opacity:         .5;
  mix-blend-mode:  overlay;
}

/* ============================ TOPBAR ============================ */
.topbar {
  position:        relative;
  z-index:         90;
  background:      var(--ink-2);
  color:           var(--taupe-soft);
  font-size:       .72rem;
  letter-spacing:  .16em;
  text-transform:  uppercase;
  border-bottom:   1px solid rgba(255,255,255,.06);
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; height:42px; gap:20px; }
.topbar a { transition:color .35s; }
.topbar a:hover { color:var(--gold); }
.topbar .tb-right { display:flex; gap:26px; align-items:center; }
@media(max-width:860px){ .topbar .tb-left{display:none} .topbar .container{justify-content:center} }
@media(max-width:480px){ .topbar .tb-right{gap:16px;font-size:.66rem} }

/* ============================ HEADER ============================ */
/* Zweeft net onder de topbar over de hero; plakt vast bij scroll */
.site-header {
  position:    absolute;
  top:         43px;
  left:        0;
  right:       0;
  z-index:     100;
  transition:  background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header::before {
  content:        "";
  position:       absolute;
  inset:          0;
  z-index:        -1;
  pointer-events: none;
  background:     linear-gradient(180deg,rgba(13,10,9,.78) 0%,rgba(13,10,9,.38) 55%,rgba(13,10,9,0) 100%);
  transition:     opacity .5s var(--ease);
}
.site-header.scrolled {
  position:         fixed;
  top:              0;
  background:       rgba(22,19,20,.94);
  backdrop-filter:  blur(10px);
  box-shadow:       0 1px 0 var(--line-dark);
}
.site-header.scrolled::before { opacity:0; }
.site-header .bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          92px;
  transition:      height .5s var(--ease);
}
.site-header .logo img { height:44px; width:auto; transition:height .5s var(--ease); }
.site-header.scrolled .bar { height:70px; }
.site-header.scrolled .logo img { height:36px; }

/* Ingelogd: WordPress admin-balk (32px / 46px mobiel) compenseren */
.admin-bar .site-header { top: calc(43px + 32px); }
.admin-bar .site-header.scrolled { top: 32px; }
@media screen and (max-width:782px) {
  .admin-bar .site-header { top: calc(43px + 46px); }
  .admin-bar .site-header.scrolled { top: 46px; }
  .admin-bar .mobile-menu { top: 46px; }
}

.nav { display:flex; align-items:center; gap:34px; }
.nav li, .mobile-menu li { list-style:none; }
.nav a {
  font-size:       .8rem;
  letter-spacing:  .16em;
  text-transform:  uppercase;
  font-weight:     400;
  color:           var(--cream);
  position:        relative;
  padding:         6px 0;
  opacity:         .92;
  transition:      color .35s, opacity .35s;
}
.nav a::after {
  content:           "";
  position:          absolute;
  left:              0;
  bottom:            0;
  height:            1px;
  width:             100%;
  background:        var(--gold);
  transform:         scaleX(0);
  transform-origin:  left;
  transition:        transform .4s var(--ease);
}
.nav a:hover { color:var(--gold); opacity:1; }
.nav a:hover::after { transform:scaleX(1); }
.header-cta { display:inline-flex; padding:.85em 1.7em; font-size:.72rem; }
.header-actions { display:flex; align-items:center; gap:26px; }

.menu-toggle {
  display:         none;
  width:           46px;
  height:          46px;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
}
.menu-toggle span { width:24px; height:1.5px; background:var(--cream); transition:.4s var(--ease); }
.menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:1040px){
  .nav, .header-cta { display:none; }
  .menu-toggle { display:flex; }
}

/* mobiel menu overlay */
.mobile-menu {
  position:        fixed;
  inset:           0;
  z-index:         99;
  background:      var(--ink-2);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(-12px);
  transition:      .5s var(--ease);
}
.mobile-menu.open { opacity:1; visibility:visible; transform:none; }
.mobile-menu a { font-family:var(--ff-display); font-size:2rem; color:var(--cream); transition:color .35s; }
.mobile-menu a:hover { color:var(--gold); }
.mobile-menu .mm-foot {
  margin-top:      34px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  font-family:     var(--ff-sans);
  font-size:       .8rem;
  letter-spacing:  .18em;
  text-transform:  uppercase;
  color:           var(--taupe-soft);
}
.mobile-menu .mm-foot a { font-family:var(--ff-sans); font-size:.8rem; color:var(--gold); }

/* ============================ FOOTER ============================ */
.footer {
  background:   var(--ink-2);
  color:        var(--taupe-soft);
  padding-top:  clamp(64px,8vw,100px);
}
.footer__top {
  display:                grid;
  grid-template-columns:  1.5fr 1fr 1fr 1.2fr;
  gap:                    40px;
  padding-bottom:         56px;
  border-bottom:          1px solid rgba(255,255,255,.07);
}
.footer__brand img { height:44px; margin-bottom:22px; }
.footer__brand p { font-size:.92rem; max-width:30ch; }
.footer h4 {
  font-family:     var(--ff-sans);
  font-weight:     500;
  font-size:       .72rem;
  letter-spacing:  .26em;
  text-transform:  uppercase;
  color:           var(--gold);
  margin-bottom:   1.4em;
}
.footer ul li { margin-bottom:.7em; }
.footer ul a, .footer__contact a { font-size:.95rem; transition:color .35s; }
.footer ul a:hover, .footer__contact a:hover { color:var(--gold); }
.footer__contact { font-size:.95rem; display:flex; flex-direction:column; gap:.6em; }
.footer__contact b { color:var(--cream); font-weight:400; }
.socials { display:flex; gap:14px; margin-top:1.4em; }
.socials a {
  width:        40px;
  height:       40px;
  border:       1px solid var(--line-dark);
  border-radius: 50%;
  display:      grid;
  place-items:  center;
  transition:   .4s var(--ease);
}
.socials a:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.footer__bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             18px;
  padding-block:   30px;
  font-size:       .76rem;
  letter-spacing:  .08em;
  flex-wrap:       wrap;
}
.footer__bottom a:hover { color:var(--gold); }
@media(max-width:860px){ .footer__top{grid-template-columns:1fr 1fr;gap:36px} }
@media(max-width:520px){ .footer__top{grid-template-columns:1fr} }

/* ============================ WHATSAPP FLOAT ============================ */
.wa {
  position:      fixed;
  right:         20px;
  bottom:        20px;
  z-index:       120;
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    #25D366;
  color:         #fff;
  border-radius: 40px;
  padding:       14px;
  box-shadow:    0 12px 30px -8px rgba(0,0,0,.5);
  transition:    .5s var(--ease);
  overflow:      hidden;
}
.wa svg { width:26px; height:26px; flex:0 0 auto; }
.wa .wa-label {
  max-width:      0;
  opacity:        0;
  white-space:    nowrap;
  font-size:      .82rem;
  font-weight:    500;
  letter-spacing: .04em;
  transition:     .5s var(--ease);
}
.wa:hover { padding-right:22px; }
.wa:hover .wa-label { max-width:180px; opacity:1; margin-left:10px; }