/* theme/astra-child/assets/css/header.css
 *
 * De header is een donker vlak: daar mag goud staan (12,65:1 op merkzwart).
 * Astra's Header Footer Builder levert de structuur; wij kleuren hem.
 */

.ast-above-header-wrap,
.dg-usp-balk {
  background: var(--dg-zwart);
  color: var(--dg-creme);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding-block: 0.5rem;
  text-transform: uppercase;
}

.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header {
  background: var(--dg-zwart);
  color: var(--dg-creme);
}

/* Woordmerk in goud, met de merk-tracking. Alleen hier -- goud op licht
   haalt 1,38:1 en is onleesbaar. */
.site-title,
.site-title a,
.ast-site-identity .site-title a {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--dg-goud);
  text-transform: uppercase;
}

.site-title a:hover { color: var(--dg-goud); opacity: 0.85; }

.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  color: var(--dg-creme);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main-header-menu > .menu-item > .menu-link:hover { color: var(--dg-goud); }

/* Winkelmandje-teller in koraal: het is de enige conversie-affordance
   in de header. */
.ast-cart-menu-wrap .count,
.ast-addon-cart-wrap .ast-cart-menu-wrap .count {
  background: var(--dg-koraal);
  color: var(--dg-wit);
  border-color: var(--dg-koraal);
}