/*
Theme Name: Modern Design Studio
Theme URI: https://moderndesign-studio.com/
Author: Modern Design Studio
Author URI: https://moderndesign-studio.com
Description: Maatwerk-thema voor Modern Design Studio. Snelle, volledig zelf-gehoste, conversiegerichte studiosite met licht- en donkerstand. Elke tekst en elk beeld is bewerkbaar via de Customizer, reviews/diensten/FAQ staan in eigen schermen, en de Instellingen-hub bevat bedrijfsgegevens, accentkleur, form-builder en SMTP. De SEO-laag levert titels, canonicals, Open Graph, gestructureerde data, robots.txt en llms.txt. Geen page builder, geen ACF, geen externe CDN's.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mds
*/

/* De vormgeving staat in assets/css: base.css op elke pagina, p-<sjabloon>.css
   daarbovenop. Dit bestand bevat de thema-kop en de paar correcties die alleen
   in WordPress nodig zijn. */

/* Sla-over-link: onzichtbaar tot iemand met het toetsenbord navigeert. */
.mds-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--page);
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.mds-skip:focus { left: 0; }

/* De beheerbalk mag de vaste menubalk niet overlappen. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* Paginering onder een archief, in de stijl van de rest. */
.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 48px;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-light);
  border-radius: var(--pill);
  font-weight: 700;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--ink); color: var(--page); }

/* Geen horizontale schuifbalk.
   Het ontwerp heeft op smalle schermen elementen die net buiten beeld vallen,
   waardoor de pagina meeschuift en de menuknop rechtsboven onbereikbaar wordt.
   Dit is `clip` en niet `hidden`: hidden maakt van html een schuifcontainer en
   dan werkt de vastgezette menubalk (position: sticky) niet meer. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* De rijen onder "Wat je krijgt" openen hun uitleg. Ze hadden al een
   hover-effect maar geen actie; nu wijst de aanwijzer dat ook aan en kun je er
   met het toetsenbord bij. */
.xrow[data-uitleg],
.xrow[data-topic] { cursor: pointer; }
.xrow[data-uitleg]:focus-visible,
.xrow[data-topic]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Het bedrag in de offertebouwer viel uit elkaar: het eurosymbool bleef groot
   staan en het getal zakte eronder weg in 13px. De regel `.ob-bedrag span` in
   het ontwerp raakt namelijk allebei de spans binnen dat blok en niet alleen de
   toelichting eronder. Dit gaat mis op elk schermformaat, niet alleen op een
   telefoon, dus de correctie staat hier en niet in mobiel.css. */
.ob-bedrag #obGetal {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}