/**
 * MysteryBril — 06 · Herbruikbare designblokken
 * ---------------------------------------------------------------------------
 * Bouwstenen die op meerdere pagina's terugkomen: sectieritme, koppen,
 * knoppen, pagina-hero, lopende tekst en de social-links.
 * De paginabestanden (10-page-home.css, 11-page-over-ons.css, …) bouwen
 * hierop voort en bevatten alleen wat écht uniek is voor die pagina.
 *
 * Elke regel is gescoped op:
 *   .entry-content                   -> de site
 *   .editor-styles-wrapper           -> hetzelfde ontwerp in de Block Editor
 *   .block-editor-block-list__layout
 * ---------------------------------------------------------------------------
 */

/* --- Sectieritme --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section,
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-hero {
  margin-block: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section {
  padding: 80px 0;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section--tight {
  padding: 60px 0;
}

/* --- Sectiekop --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section__title {
  font-family: var(--mb-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mb-white) !important;
  margin: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 40px !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section__intro {
  font-family: var(--mb-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mb-white) !important;
  max-width: 380px;
  margin: 0 !important;
}

/* --- Eyebrow (klein oranje label boven een kop) --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-eyebrow {
  display: block;
  margin: 0 0 12px !important;
  font-family: var(--mb-font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-orange) !important;
}

/* --- Knoppen (btn / btn-solid uit het design) --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px !important;
  font-family: var(--mb-font-body) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border: 1px solid var(--mb-white) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mb-white) !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-btn .wp-block-button__link:hover {
  background: var(--mb-white) !important;
  color: var(--mb-black) !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-btn--solid .wp-block-button__link {
  background: var(--mb-orange) !important;
  border-color: var(--mb-orange) !important;
  color: var(--mb-white) !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-btn--solid .wp-block-button__link:hover {
  background: var(--mb-orange-bright) !important;
  border-color: var(--mb-orange-bright) !important;
  color: var(--mb-white) !important;
}

/* --- Pagina-hero (eyebrow + titel + scheidingslijn) --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-hero {
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--mb-line-soft);
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-hero__title {
  font-family: var(--mb-font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mb-white) !important;
  margin: 0 !important;
}

/* --- Lopende tekst --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose {
  max-width: 760px;
  margin-inline: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose p {
  font-family: var(--mb-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: #d8d8d8 !important;
  margin: 0 0 18px !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose h3 {
  font-family: var(--mb-font-display);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--mb-orange) !important;
  margin: 34px 0 12px !important;
}

/* --- Afsluitende displayregel in oranje ---
   De tweede selector is nodig om binnen .mb-prose te winnen van `.mb-prose p`. */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-display-line,
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose .mb-display-line {
  font-family: var(--mb-font-display) !important;
  font-size: 22px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--mb-orange) !important;
  margin: 30px 0 0 !important;
}

/* --- Social links met icoon (Instagram / TikTok) --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-socials {
  display: flex;
  align-items: center;
  gap: 26px !important;
  margin: 28px 0 0 !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social {
  margin: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mb-font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--mb-white) !important;
  transition: color 0.2s ease;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social a:hover {
  color: var(--mb-orange) !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social a::before {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background: no-repeat center / contain;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social--instagram a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social--tiktok a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16.6 5.82c-.87-.87-1.35-2.06-1.35-3.32h-3.05v14.09c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1 0-5.54c.29 0 .57.04.83.13V10.9a5.8 5.8 0 0 0-.83-.06 5.82 5.82 0 1 0 5.82 5.82V8.42a7.14 7.14 0 0 0 4.17 1.33V6.7a4.85 4.85 0 0 1-2.82-.88z'/%3E%3C/svg%3E");
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social--instagram a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc4e00' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-social--tiktok a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cc4e00'%3E%3Cpath d='M16.6 5.82c-.87-.87-1.35-2.06-1.35-3.32h-3.05v14.09c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1 0-5.54c.29 0 .57.04.83.13V10.9a5.8 5.8 0 0 0-.83-.06 5.82 5.82 0 1 0 5.82 5.82V8.42a7.14 7.14 0 0 0 4.17 1.33V6.7a4.85 4.85 0 0 1-2.82-.88z'/%3E%3C/svg%3E");
}

/* --- Tablet / mobiel --- */
@media (max-width: 880px) {
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section {
    padding: 48px 0;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section--tight {
    padding: 38px 0;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section__title {
    font-size: clamp(21px, 6vw, 27px);
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section__head {
    margin-bottom: 26px !important;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-btn .wp-block-button__link {
    padding: 11px 12px !important;
    font-size: clamp(10px, 2.6vw, 12px) !important;
    gap: 6px;
    white-space: normal;
    text-align: center;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-hero {
    padding: 40px 0 28px;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose p {
    font-size: 14px;
    line-height: 1.7;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-display-line,
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-prose .mb-display-line {
    font-size: 18px;
    margin-top: 24px !important;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-page-socials {
    gap: 20px !important;
  }
}

@media (max-width: 520px) {
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section {
    padding: 40px 0;
  }
  :is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-section--tight {
    padding: 32px 0;
  }
}