/* ============================================================
   TIJDELIJK: aankondigingsbalk Open Monumentendag 2026 (15 september 2026).
   Weghalen wanneer niet meer actueel: dit bestand, js/aankondiging.js en het
   <aside class="aankondiging">-blok met zijn <link> en <script> op alle negen
   pagina's.

   Waarom vast bovenaan en niet gewoon in de documentstroom: de header staat
   position: fixed. Een balk in de stroom zou onder de header verdwijnen, of de
   hero een balkhoogte omlaag duwen; dan staan het woordmerk in de intro-overlay
   en in de hero niet meer op dezelfde plek en springen de letters bij het
   uitfaden van de intro. Nu blijft de hero exact waar hij was: de balk ligt
   bovenop, de header zakt zolang een balkhoogte, en js/aankondiging.js schuift
   beide bij scrollen 1:1 omhoog. Na één balkhoogte scrollen staat alles weer
   precies zoals zonder balk. Zonder JavaScript blijft de balk staan.

   Achtergrond --accent en niet --blauw: het goud van de link haalt op --accent
   5,22:1 en op --blauw maar 3,55:1, te weinig voor 16px. Zelfde keuze als de
   blauwe band op de homepage. Geen nieuwe kleuren.
   ============================================================ */
:root {
  --aankondiging-h: 64px;
}

@media (max-width: 719px) {
  :root {
    --aankondiging-h: 104px;
  }
}

.aankondiging {
  position: fixed;
  z-index: 49;
  inset-inline: 0;
  top: 0;
  min-height: var(--aankondiging-h);
  display: flex;
  align-items: center;
  background: var(--accent);
  color: var(--ivoor);
}

.aankondiging.is-weg {
  visibility: hidden;
}

.aankondiging__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-6);
  padding-block: var(--space-2);
}

/* Het voorblad in het klein, met dezelfde behandeling als op de blog: wit
   kaartje, licht gekanteld, schaduw; hier met een gouden randje. */
.aankondiging__duim {
  display: block;
  width: 34px;
  padding: 3px;
  border: 1px solid var(--goud);
  background: var(--wit);
  box-shadow: 0 4px 10px rgba(26, 26, 24, .3);
  transform: rotate(-4deg);
}

.aankondiging__duim img {
  display: block;
  width: 100%;
  height: auto;
}

.aankondiging__tekst {
  margin: 0;
  max-width: none;
  color: var(--ivoor);
  font-family: var(--font-display);
  font-size: .9375rem;
  line-height: 1.4;
}

.on-dark .aankondiging__link {
  --v-mark-h: 1.1rem;
  color: var(--goud);
  white-space: nowrap;
}

.on-dark .aankondiging__link:hover,
.on-dark .aankondiging__link:focus-visible {
  color: var(--goud);
}

.aankondiging .v-mark-link:focus-visible {
  outline-color: var(--goud);
}

/* Smal scherm: duimnagel links over twee rijen, tekst boven en link eronder. */
@media (max-width: 719px) {
  .aankondiging__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: 0;
  }

  .aankondiging__duim {
    grid-row: 1 / span 2;
    width: 30px;
  }

  .aankondiging__tekst {
    font-size: .875rem;
    padding-top: var(--space-1);
  }

  .aankondiging__link {
    justify-self: start;
  }
}

/* Header een balkhoogte lager, alleen waar de balk er is. De header-regels
   zelf in components.css zijn niet aangeraakt; js/aankondiging.js zet bij
   scrollen de actuele top inline. */
.aankondiging + .site-header {
  top: var(--aankondiging-h);
}

/* Subpagina's beginnen onder header en balk samen. De homepage heeft geen
   .page-main: daar ligt de balk bovenop de hero, die zelf niet verschuift. */
.aankondiging ~ .page-main {
  padding-top: calc(var(--header-h) + var(--aankondiging-h));
}

/* Tijdens de intro onzichtbaar, daarna rustig erbij met de navigatie. */
.aankondiging {
  transition: opacity var(--motion-nav-duration) var(--ease-nav);
}

.intro-pending .aankondiging,
.intro-running .aankondiging {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .aankondiging {
    transition: none;
  }

  .aankondiging__duim {
    transform: none;
  }
}