/* ==========================================================================
   Bridle2Fit · basis en typografie
   Elementregels staan in :where() en hebben dus specificiteit 0. Zo wint elke
   klasse van een plugin (.b2fc, .b2fb, .b2fh, de cadeaubon) altijd, zonder !important.
   ========================================================================== */

/* De configurators (.b2fc, .b2fb, .b2fh) regelen alles zelf; geen enkele regel van het
   thema mag daarbinnen iets doen (hoofdstuk 7.1 en 7.2). Vandaar overal de
   uitzondering :not(:where(.b2fc,.b2fb,.b2fh) *). */
:not(:where(.b2fc,.b2fb,.b2fh) *),
:not(:where(.b2fc,.b2fb,.b2fh) *)::before,
:not(:where(.b2fc,.b2fb,.b2fh) *)::after{box-sizing:border-box}

/* Wat hidden heeft blijft verborgen, ook als een klasse er display op zet.
   !important: anders wint elke klasse met display (flex, grid) van het
   attribuut, en dan verschijnt wat JavaScript juist verborgen heeft. */
[hidden]:not(:where(.b2fc,.b2fb,.b2fh) *){display:none !important}

:where(html){
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

:where(body){
  margin:0;
  background:var(--b2f-warm-white);
  color:var(--b2f-charcoal);
  font-family:var(--b2f-font);
  font-size:var(--b2f-fs-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}

/* Beeld schaalt mee. Binnen de configurators blijft het van de plugin. */
:where(img,svg,video):not(:where(.b2fc,.b2fb,.b2fh) *){
  max-width:100%;
  height:auto;
}
:where(img):not(:where(.b2fc,.b2fb,.b2fh) *){display:block}

:where(a):not(:where(.b2fc,.b2fb,.b2fh) *){color:inherit;text-decoration:none;transition:color var(--b2f-dur) var(--b2f-ease)}
:where(a:hover):not(:where(.b2fc,.b2fb,.b2fh) *){color:var(--b2f-gold-deep)}
:where(.b2f-dark) :where(a:hover){color:var(--b2f-gold)}

/* Focus altijd zichtbaar, hoofdstuk 8. */
:where(a,button,input,select,textarea,summary,[tabindex]):not(:where(.b2fc,.b2fb,.b2fh) *):focus-visible{
  outline:2px solid var(--b2f-focus);
  outline-offset:2px;
}

:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote):not(:where(.b2fc,.b2fb,.b2fh) *){margin:0}
:where(h1,h2,h3,h4,h5,h6):not(:where(.b2fc,.b2fb,.b2fh) *){font-weight:400;line-height:1.12;letter-spacing:.02em}

/* Toegankelijk verborgen, de WordPress-standaard. !important zoals in de
   kern van WordPress: geen andere regel mag de tekst weer zichtbaar maken. */
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus{
  position:fixed !important;
  top:8px;left:8px;z-index:100000;
  width:auto;height:auto;
  padding:14px 20px;
  clip:auto;
  background:var(--b2f-paper);
  color:var(--b2f-charcoal);
  outline:2px solid var(--b2f-gold-deep);
}

/* ---------- Typografie, de tabel in hoofdstuk 3 ---------- */
/* Twee niveaus: de homepage spreekt groter dan een binnenpagina. */

.b2f-hero-home{
  font-size:var(--b2f-fs-hero-home);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.02em;
  text-wrap:balance;
}
.b2f-hero-page{
  font-size:var(--b2f-fs-hero-page);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.02em;
  text-wrap:balance;
}
.b2f-display-section{
  font-size:var(--b2f-fs-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.02em;
  text-wrap:balance;
}
.b2f-section-title{
  font-size:var(--b2f-fs-section);
  font-weight:400;
  line-height:1.16;
  letter-spacing:.02em;
  text-wrap:balance;
}
.b2f-heading-card{
  font-size:var(--b2f-fs-card);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
}
.b2f-lead{
  font-size:var(--b2f-fs-lead);
  font-weight:300;
  line-height:1.65;
}
.b2f-body{
  font-size:var(--b2f-fs-body);
  line-height:1.7;
}
.b2f-body-small{
  font-size:var(--b2f-fs-small);
  line-height:1.6;
}
.b2f-label-section{
  font-size:var(--b2f-fs-label);
  font-weight:400;
  line-height:1.2;
  letter-spacing:var(--b2f-ls-label);
  text-transform:uppercase;
  color:var(--b2f-gold-deep);
}
.b2f-dark .b2f-label-section{color:var(--b2f-gold)}
.b2f-wordmark{
  font-size:var(--b2f-fs-wordmark);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
}
.b2f-muted{color:var(--b2f-muted)}
.b2f-dark .b2f-muted{color:var(--b2f-muted-dark)}

/* Goud accent in een kop, zoals "échte" in de hero. */
.b2f-accent{color:var(--b2f-gold-deep)}
.b2f-dark .b2f-accent{color:var(--b2f-gold)}

/* ---------- Lay-out ---------- */

/* Inhoud stopt op 1440 px en centreert, de zijmarge groeit mee. */
.b2f-container{
  width:100%;
  max-width:var(--b2f-max);
  margin-inline:auto;
  padding-inline:var(--b2f-gutter);
}
.b2f-section{padding-block:var(--b2f-section-y)}

/* Podium van een configurator: volle breedte, graphite boven en onder, zodat
   er geen witte rand ontstaat (hoofdstuk 7.1 en 7.2). */
.b2f-stage{background:var(--b2f-graphite)}

/* ---------- Kruimelpad ---------- */

.b2f-crumbs__inner{width:100%;max-width:var(--b2f-max);margin-inline:auto;padding-inline:var(--b2f-gutter)}

.b2f-crumbs{font-size:12.5px;color:var(--b2f-muted)}
.b2f-crumbs__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 10px;
  padding-block:14px;
}
.b2f-crumbs a{display:inline-flex;align-items:center;min-height:32px}
.b2f-crumbs__item:last-child{color:var(--b2f-charcoal)}
.b2f-crumbs__sep{color:var(--b2f-line)}
@media (min-width:1100px){
  .b2f-crumbs__inner{padding-block:20px 22px}
}

/* ---------- Chip ---------- */

/* Chip, hoofdstuk 4.3. 38 px hoog, het raakvlak loopt door tot 44 px. */
.b2f-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.b2f-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--b2f-line);
  background:transparent;
  color:var(--b2f-charcoal);
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
.b2f-chip::after{content:"";position:absolute;inset:-3px 0}
.b2f-chip:hover{border-color:var(--b2f-greige);color:var(--b2f-charcoal)}
.b2f-chip.is-active{
  border-color:var(--b2f-gold-deep);
  box-shadow:inset 0 0 0 1px var(--b2f-gold-deep);
}

/* ---------- Beweging uit bij voorkeur van de bezoeker ---------- */

@media (prefers-reduced-motion:reduce){
  /* De configurators regelen hun eigen beweging en blijven hierbuiten. */
  :not(:where(.b2fc,.b2fb,.b2fh),:where(.b2fc,.b2fb,.b2fh) *),
  :not(:where(.b2fc,.b2fb,.b2fh),:where(.b2fc,.b2fb,.b2fh) *)::before,
  :not(:where(.b2fc,.b2fb,.b2fh),:where(.b2fc,.b2fb,.b2fh) *)::after{
    /* !important: dit is een instelling van de bezoeker en moet winnen van
       elke animatie op de pagina, ook die van plugins. */
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}