/* ============================================================
   Components — La Belle Beauté
   Herbruikbare design-system primitives. Dezelfde klassen worden
   gebruikt op de homepage en in het thema. Sectie-specifieke styling
   (header, footer, hero, kaarten, …) komt per sectie in eigen
   bestanden zodra die met het ontwerp worden gebouwd.
   ============================================================ */

/* ----------------------------------------
 * CONTAINER
 * ---------------------------------------- */

.container {
  width:           100%;
  max-width:       var(--maxw);
  margin-inline:   auto;
  padding-inline:  var(--gut);
}

/* ----------------------------------------
 * EYEBROW — uppercase label met goudstreepje (echo van het logo)
 * ---------------------------------------- */

.eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             .85em;
  font-family:     var(--ff-sans);
  font-weight:     500;
  font-size:       .72rem;
  letter-spacing:  .34em;
  text-transform:  uppercase;
  color:           var(--gold);
}

.eyebrow::before {
  content:     "";
  width:       34px;
  height:      1px;
  background:  var(--gold);
  opacity:     .7;
}

/* ----------------------------------------
 * SECTIES — verticaal ritme + tint (tekstkleur schakelt mee)
 * ---------------------------------------- */

.section {
  padding-block: var(--section-y);
}

.section--dark  { background: var(--ink);   color: var(--cream); }
.section--cream { background: var(--cream);  color: var(--black); }
.section--sand  { background: var(--sand);   color: var(--black); }

/* Op lichte secties: secundaire/accent-tekst naar warme tinten */
.section--cream .muted,
.section--sand  .muted { color: var(--taupe); }

.section--cream em, .section--cream .it,
.section--sand  em, .section--sand  .it { color: var(--copper); }

/* ----------------------------------------
 * KNOPPEN
 * ---------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              .6em;
  font-family:      var(--ff-sans);
  font-weight:      500;
  font-size:        .78rem;
  letter-spacing:   .2em;
  text-transform:   uppercase;
  padding:          1.05em 2.1em;
  border:           1px solid transparent;
  border-radius:    2px;
  cursor:           pointer;
  transition:       background var(--dur) var(--ease),
                    color var(--dur) var(--ease),
                    border-color var(--dur) var(--ease),
                    transform var(--dur) var(--ease);
}

/* Primair — gevuld goud */
.btn--gold {
  background:  var(--gold);
  color:       var(--black);
}

.btn--gold:hover {
  background:  var(--gold-soft);
  transform:   translateY(-2px);
}

/* Secundair — omlijnd (op donker) */
.btn--ghost {
  border-color: var(--line-dark);
  color:        var(--cream);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color:        var(--gold);
  transform:    translateY(-2px);
}

/* Ghost-knop in lichte secties */
.section--cream .btn--ghost,
.section--sand  .btn--ghost {
  border-color: var(--line-cream);
  color:        var(--black);
}

.section--cream .btn--ghost:hover,
.section--sand  .btn--ghost:hover {
  border-color: var(--gold);
  color:        var(--copper);
}

/* ----------------------------------------
 * TEKSTLINK — goud label met uitlopende onderlijn + meeschuivende pijl
 * ---------------------------------------- */

.txtlink {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             .6em;
  padding-bottom:  4px;
  font-family:     var(--ff-sans);
  font-weight:     500;
  font-size:       .78rem;
  letter-spacing:  .2em;
  text-transform:  uppercase;
  color:           var(--gold);
}

.txtlink::after {
  content:           "";
  position:          absolute;
  left:              0;
  bottom:            0;
  width:             100%;
  height:            1px;
  background:        var(--gold);
  opacity:           .6;
  transform:         scaleX(.35);
  transform-origin:  left;
  transition:        transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.txtlink:hover::after {
  transform:  scaleX(1);
  opacity:    1;
}

.txtlink .arr {
  transition: transform var(--dur) var(--ease);
}

.txtlink:hover .arr {
  transform: translateX(4px);
}

/* ----------------------------------------
 * REVEAL — fade/slide-in bij in beeld komen (zie main.js)
 * ---------------------------------------- */

.reveal {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-visible {
  opacity:    1;
  transform:  none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity:    1 !important;
    transform:  none !important;
    transition: none;
  }
}

/* ----------------------------------------
 * UTILITIES
 * ---------------------------------------- */

.screen-reader-text {
  position:  absolute !important;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  border:    0;
  white-space: nowrap;
}

.skip-link:focus {
  position:    fixed;
  top:         8px;
  left:        8px;
  z-index:     100000;
  width:       auto;
  height:      auto;
  clip:        auto;
  padding:     12px 20px;
  background:  var(--gold);
  color:       var(--black);
  font-size:   .8rem;
}