/* ============================================================
   Bottled Bliss Theme — Global & Component Styles
   ============================================================ */

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Remove default WP block padding */
.wp-site-blocks { padding: 0 !important; }
.entry-content > * { max-width: none; }

/* ── Navbar ─────────────────────────────────────────────────── */
.bbb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.5s, box-shadow 0.5s;
}
.bbb-nav--scrolled {
  background: hsla(30, 25%, 96%, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
.bbb-nav__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
@media (min-width: 1024px) {
  .bbb-nav__inner { height: 6rem; padding: 0 3rem; }
}

/* Logo */
.bbb-nav__logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.bbb-nav__logo-name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  transition: color 0.5s;
}
.bbb-nav__logo-sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: color 0.5s;
  margin-top: 0.2rem;
}
@media (min-width: 1024px) {
  .bbb-nav__logo-name { font-size: 1.7rem; }
  .bbb-nav__logo-sub  { font-size: 0.7rem; }
}
.bbb-nav--scrolled .bbb-nav__logo-name { color: var(--wp--preset--color--foreground); }
.bbb-nav--scrolled .bbb-nav__logo-sub  { color: var(--wp--preset--color--muted); }

/* Desktop links */
.bbb-nav__links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .bbb-nav__links { display: flex; }
}
.bbb-nav__link {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  transition: color 0.3s;
}
.bbb-nav__link:hover,
.bbb-nav__link--active { color: #fff; }
.bbb-nav--scrolled .bbb-nav__link { color: var(--wp--preset--color--muted); }
.bbb-nav--scrolled .bbb-nav__link:hover { color: var(--wp--preset--color--foreground); }
.bbb-nav--scrolled .bbb-nav__link--active {
  color: var(--wp--preset--color--primary);
  font-weight: 500;
}

/* Hamburger */
.bbb-nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0.5rem;
  transition: color 0.5s;
}
.bbb-nav--scrolled .bbb-nav__burger { color: var(--wp--preset--color--foreground); }
@media (min-width: 1024px) { .bbb-nav__burger { display: none; } }

/* Mobile overlay */
.bbb-nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: hsla(30, 25%, 96%, 0.98);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.bbb-nav__mobile.is-open { opacity: 1; pointer-events: all; }
.bbb-nav__mobile-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.bbb-nav__mobile-item {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--i) * 0.07s);
}
.bbb-nav__mobile.is-open .bbb-nav__mobile-item {
  opacity: 1;
  transform: translateY(0);
}
.bbb-nav__mobile-link {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem;
  text-decoration: none;
  color: rgba(20,15,12,.65);
  transition: color 0.3s;
}
.bbb-nav__mobile-link:hover,
.bbb-nav__mobile-link--active { color: var(--wp--preset--color--primary); }

/* ── Footer ─────────────────────────────────────────────────── */
.bbb-footer {
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
}
.bbb-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
@media (min-width: 1024px) { .bbb-footer__inner { padding: 6rem 3rem; } }
.bbb-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .bbb-footer__grid { grid-template-columns: repeat(3,1fr); gap: 5rem; }
}
.bbb-footer__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--wp--preset--color--background);
  margin: 0 0 0.5rem;
}
.bbb-footer__tagline {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 1.5rem;
}
.bbb-footer__about {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  margin: 0;
}
.bbb-footer__col-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--wp--preset--color--background);
  margin: 0 0 1.5rem;
}
.bbb-footer__nav ul,
.bbb-footer__contact ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bbb-footer__link {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color 0.3s;
}
.bbb-footer__link:hover { color: #fff; }
.bbb-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  color: rgba(255,255,255,.6);
}
.bbb-footer__contact-item svg { flex-shrink: 0; margin-top: 0.1rem; opacity: 0.4; }
.bbb-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 4rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .bbb-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.bbb-footer__bottom p {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.7rem;
  color: rgba(255,255,255,.3);
  margin: 0;
}

/* ── Logo in navbar ─────────────────────────────────────────── */
.bbb-nav__logo .custom-logo-link {
  display: block;
}
.bbb-nav__logo .custom-logo-link img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  height: auto;
  display: block;
  /* Wit boven aan pagina */
  filter: brightness(0) invert(1);
  transition: filter 0.5s ease;
}
/* Zwart na scrollen */
.bbb-nav--scrolled .bbb-nav__logo .custom-logo-link img {
  filter: brightness(0);
}

/* ── Logo in footer ─────────────────────────────────────────── */
.bbb-footer__logo .custom-logo-link img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}