/* ==========================================================================
   La Dushi — wordpress.css

   Alles wat er alleen is omdat de site nu op WordPress draait. Een apart
   bestand, niet verweven met base/layout/components/pages: dat ontwerp is
   goedgekeurd en blijft zoals het is. Wat hier staat vangt op wat WordPress
   aan markup en klassen meebrengt.

   Wordt als laatste ingeladen; zie inc/enqueue.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Menu's uit wp_nav_menu()
   -------------------------------------------------------------------------- */

/*
 * De statische site had losse <a class="nav__link">-elementen naast elkaar in
 * .nav. WordPress zet daar een <ul><li> tussen, dus verhuist de flexrij van
 * .nav naar de lijst. .nav zelf blijft de flexcontainer voor het geval er
 * ooit nog iets naast het menu komt te staan.
 */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__list li {
  position: relative;
  margin: 0;
}

/* --- Submenu's ----------------------------------------------------------- */

/*
 * Het ontwerp kent geen tweede niveau; het menu is één rij. Maar wie er in
 * Weergave > Menu's een item onder een ander sleept, mag geen onbereikbare
 * link krijgen. Vandaar een sobere uitklap in dezelfde stijl als de header.
 */
.nav__list .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  z-index: 20;
  min-width: 13rem;
  padding: var(--s-3) 0;
  margin-block-start: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background-color: var(--c-bg-raised);
  box-shadow: 0 12px 32px rgba(25, 47, 108, .1);
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              visibility 0s linear var(--d-fast);
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.nav__list .sub-menu .nav__link {
  display: block;
  padding: var(--s-2) var(--s-5);
}

/* De onderstreping van de hoofdrij hoort niet in een uitklaplijst. */
.nav__list .sub-menu .nav__link::after { display: none; }

.nav__list .sub-menu .nav__link:hover { color: var(--c-accent); }

/*
 * In de overlay is het menu één niveau diep (depth 1 in header-menu.php).
 * Komt er via een filter toch een tweede niveau, dan staat het gewoon
 * ingesprongen onder de ouder in plaats van dat het over de pagina valt.
 */
.menu__list .sub-menu {
  padding-inline-start: var(--s-6);
}

.menu__list .sub-menu .menu__link {
  font-size: var(--t-lg);
}

/* --------------------------------------------------------------------------
   2. De adminbalk
   -------------------------------------------------------------------------- */

/*
 * De balk van WordPress staat fixed bovenaan en duwt de site omlaag. De
 * header van het thema staat zelf ook fixed en zou er anders onder verdwijnen.
 * De hoogte is 32 px, en onder 783 px 46 px — dat zijn de waarden van core.
 */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/*
 * De menu-overlay dekt het hele scherm via inset: 0. Alleen de bovenkant
 * verschuift; de onderkant blijft op 0 staan, dus de hoogte volgt vanzelf.
 */
body.admin-bar .menu {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .menu {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   3. Inhoud uit de editor
   -------------------------------------------------------------------------- */

/*
 * De reset zet list-style uit, want de lijstjes in het ontwerp zijn geen
 * opsommingen maar rijen. In lopende tekst uit de editor is een opsomming
 * juist wel een opsomming, dus daar komen de bolletjes terug.
 */
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content ul ul { list-style: circle; }
.entry-content ol ol { list-style: lower-alpha; }

/* De editor levert een tabel zonder klasse; die krijgt hetzelfde ritme als
   de tabel op de etiketpagina. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.entry-content th,
.entry-content td {
  padding: var(--s-3) var(--s-2);
  border-block-end: var(--border);
  text-align: start;
  vertical-align: top;
}

.entry-content th { color: var(--c-fg); font-weight: 500; }

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content hr {
  border: 0;
  border-block-start: var(--border);
  margin-block: var(--s-8);
}

/* De uitlijnklassen die de classic editor op afbeeldingen zet. */
.alignleft {
  float: left;
  margin: 0 var(--s-6) var(--s-5) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--s-5) var(--s-6);
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignnone {
  display: block;
}

/* Een float mag de volgende sectie niet in. */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 40rem) {
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin: var(--s-5) 0;
  }
}

/* --- Bijschriften en galerijen ------------------------------------------- */

.wp-caption {
  max-width: 100%;
  margin-block-end: var(--s-5);
}

.wp-caption img {
  display: block;
}

.wp-caption-text,
.gallery-caption {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--c-fg-faint);
  margin-block-start: var(--s-2);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-block: var(--s-6);
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 40rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Losse core-klassen -------------------------------------------------- */

/*
 * De naam van het thema is .visually-hidden; core en zijn eigen formulieren
 * gebruiken .screen-reader-text. Dezelfde regels, andere naam.
 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  width: auto;
  height: auto;
  padding: var(--s-3) var(--s-5);
  margin: 0;
  clip-path: none;
  z-index: calc(var(--z-transition) + 1);
  background-color: var(--c-bg-raised);
  color: var(--c-fg);
  border: var(--border);
  border-radius: var(--radius-sm);
}

/*
 * Berichten staan op deze site uit, dus .sticky en .bypostauthor komen er
 * nooit uit een template rollen. Ze staan hier omdat de themacontrole van
 * WordPress ze verwacht; ze doen bewust niets zichtbaars.
 */
.sticky,
.bypostauthor {
  display: block;
}

/* De navigatie tussen delen van een gesplitste pagina; zie page.php. */
.page-links {
  margin-block-start: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
}

.page-links__nr {
  display: inline-block;
  min-width: 2rem;
  padding: var(--s-2);
  text-align: center;
  border: var(--border);
  border-radius: var(--radius-sm);
}

.page-links a .page-links__nr {
  color: var(--c-fg-muted);
}

.page-links a:hover .page-links__nr {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   4. De footerkolommen als widgets
   -------------------------------------------------------------------------- */

/*
 * De footer heeft één widgetgebied, dus welke kolom de brede plek krijgt is
 * niet meer aan de markup te zien: dat was de klasse --wide uit layout.css,
 * die het widgetgebied per kolom meegaf. De laatste widget is nu de brede —
 * 5 (het merkblok) + 2 + 2 + 3 vult het raster van twaalf.
 *
 * De regels hieronder herhalen de breekpunten uit layout.css: deze selector
 * is specifieker, en zonder herhaling zou de brede kolom op een smal scherm
 * drie van de twaalf kolommen blijven pakken.
 */
.site-footer__grid > .site-footer__col:last-child {
  grid-column: span 3;
}

@media (max-width: 60rem) {
  .site-footer__grid > .site-footer__col:last-child {
    grid-column: span 6;
  }
}

@media (max-width: 34rem) {
  .site-footer__grid > .site-footer__col:last-child {
    grid-column: span 12;
  }
}

/*
 * De footerkolom-widget schrijft de regels uit als een <ul> met een <li> om
 * elke regel. De reset in base.css haalt bij een ul met klasse de
 * opsommingstekens en de inspringing al weg; wat overblijft is de marge van
 * de items, net als bij .nav__list.
 */
.site-footer__links li {
  margin: 0;
}

/*
 * De tekstwidget zet een <div class="textwidget"> tussen de kolom en de
 * inhoud. Die mag geen eigen ruimte innemen; de kolom regelt de layout. De
 * kolommen zijn geen tekstwidgets meer, maar wie er een naast zet hoort geen
 * scheve kolom te krijgen.
 */
.site-footer__col .textwidget {
  display: contents;
}

/*
 * Een regel zonder adres blijft gewone tekst; de widget geeft hem deze klasse.
 * In de statische site droegen die regels een inline lettergrootte, en een
 * style-attribuut met var() overleeft de filtering van WordPress niet bij het
 * opslaan van een widget — dus staat het hier.
 */
.site-footer__links .muted {
  font-size: var(--t-sm);
}