/*
 * Typography — Bistro 't Leven
 * ----------------------------------------
 * Importeer Google Fonts in functions.php
 * @import niet gebruiken voor performance
 */

/* ----------------------------------------
 * BASIS
 * ---------------------------------------- */

body {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    var(--font-regular);
  line-height:    var(--leading-relaxed);
  color:          var(--color-text-body);
  letter-spacing: var(--tracking-wide);
}

/* ----------------------------------------
 * KOPPEN
 * ---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  color:          var(--color-text-heading);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  margin-bottom:  var(--space-4);
}

h1 {
  font-size:    var(--text-5xl);
  font-weight:  var(--font-extrabold);  /* 800 */
}

h2 {
  font-size:    var(--text-3xl);
  font-weight:  var(--font-extrabold);  /* 800 */
  letter-spacing: var(--tracking-wide);
}

h3 {
  font-size:    var(--text-xl);
  font-weight:  var(--font-bold);       /* 700 */
  line-height:  34px;
}

h4 {
  font-size:    var(--text-lg);
  font-weight:  var(--font-bold);
}

h5, h6 {
  font-size:    var(--text-base);
  font-weight:  var(--font-semibold);
}

/* Koppen op donkere/gouden achtergrond */
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--goud h1,
.section--goud h2,
.section--goud h3 {
  color: var(--color-text-light);
}

/* Hero kop altijd wit */
.hero__title {
  color:        var(--color-text-light);
  font-size:    var(--text-5xl);
  font-weight:  var(--font-extrabold);
}

/* ----------------------------------------
 * NAVIGATIE
 * ---------------------------------------- */

.nav__link {
  font-family:    var(--font-heading);
  font-size:      var(--text-xl);       /* 22px */
  font-weight:    var(--font-semibold); /* 600 */
  color:          var(--color-text-nav);
  letter-spacing: var(--tracking-normal);
  line-height:    1;
  text-decoration: none;
  transition:     opacity var(--transition-fast);
}

.nav__link:hover {
  opacity: 0.8;
}

.nav__link--active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ----------------------------------------
 * BODYTEKST
 * ---------------------------------------- */

p {
  font-size:    var(--text-base);       /* 16px */
  font-weight:  var(--font-regular);    /* 400 */
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-body);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * LINKS
 * ---------------------------------------- */

a {
  color:            var(--color-primary);
  text-decoration:  none;
  transition:       color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ----------------------------------------
 * MENU ITEMS (kaart)
 * ---------------------------------------- */

.menu-item__name {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  var(--font-bold);
  color:        var(--color-text-body);
}

.menu-item__description {
  font-size:    var(--text-sm);
  color:        var(--color-text-muted);
  line-height:  var(--leading-normal);
}

.menu-item__price {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  var(--font-regular);
  color:        var(--color-text-body);
}

/* ----------------------------------------
 * ALLERGENEN TEKST (italic)
 * ---------------------------------------- */

.allergenen {
  font-style:   italic;
  color:        var(--color-primary);
  font-size:    var(--text-base);
  text-align:   center;
  margin-top:   var(--space-8);
}

/* ----------------------------------------
 * FOOTER TYPOGRAFIE
 * ---------------------------------------- */

.footer {
  font-size:  var(--text-sm);
  color:      var(--color-text-body);
}

.footer__heading {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  var(--font-bold);
  color:        var(--color-text-body);
  margin-bottom: var(--space-3);
}

.footer__link {
  color:        var(--color-text-body);
  font-size:    var(--text-sm);
}

.footer__link:hover {
  color: var(--color-primary);
}