/*
Theme Name: AW Reclame
Theme URI: https://awreclame.nl
Author: Tom van Elteren
Description: Blokthema voor AW Reclame in Emmer-Compascuum. Donkere uitstraling met het lichtblauw uit het logo, zodat foto's van belettering en gevelreclame er sterk uitspringen.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aw-reclame
Tags: block-patterns, full-site-editing, custom-colors, wide-blocks
*/

/*
  De opmaak staat vrijwel volledig in theme.json. Hieronder alleen wat de
  blokeditor niet zelf kan regelen.
*/

/*
  Formulierelementen tellen binnenmarge en rand standaard bij hun breedte op.
  Met width:100% worden ze daardoor breder dan hun kolom en lopen ze over
  elkaar heen. Deze regel rekent de rand en marge mee in de opgegeven breedte.
*/
input,
select,
textarea,
button {
  box-sizing: border-box;
}

/*
  Footer onderaan het scherm duwen als er weinig inhoud is. Zonder dit houdt
  hij halverwege op bij korte pagina's en blijft er een lap lege achtergrond
  onder staan.
*/
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

/*
  WordPress zet standaard een blokafstand tussen de kop, de inhoud en de voet.
  Dat levert hier een streep op: in dat gat schemert de achtergrond van de
  pagina door, en die verschilt net van de secties erboven en eronder.
  De secties hebben zelf al ruimte van binnen, dus deze mag naar nul.
*/
.wp-site-blocks > * {
  margin-block-start: 0;
}

/*
  Dezelfde blokafstand zit ook tússen de secties op een pagina, en telt daar
  bovenop de binnenmarge die elke sectie zelf al heeft. Daardoor werden
  overgangen ongelijk: boven een blok 124 pixels en eronder 104.

  Het !important is nodig omdat WordPress zijn eigen regel met een even
  specifieke selector schrijft en die niet altijd eerder in de stijl staat.
  Alleen secties krijgen dit, gewone alinea's op bijvoorbeeld de
  privacypagina houden hun normale tussenruimte.
*/
.aw-sectie {
  margin-block-start: 0 !important;
}

/* ==========================================================================
   Hoekafronding
   Eén waarde voor de hele site: knoppen, dienstenkaarten, fotovakken en
   het contactblok. Wil je het scherper of ronder, pas dan alleen de regel
   hieronder aan. 0 geeft scherpe hoeken, 999px geeft pilvormige knoppen.
   ========================================================================== */

:root {
  /* Overgenomen van de referentieknop die Tom aanleverde. */
  --aw-radius: 8px;
}

/*
  De overslaan-link van WordPress zelf zichtbaar maken zodra hij focus krijgt.
  Standaard blijft hij ook dan buiten beeld staan, waardoor een
  toetsenbordgebruiker niet ziet waar hij is.
*/
.skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--wp--preset--color--accent);
  color: #08141A;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--aw-radius) 0;
}

/*
  Zichtbare focusrand voor wie met het toetsenbord navigeert. De standaardrand
  van de browser is op deze donkere achtergrond nauwelijks te zien.
*/
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/*
  Aanraakvlakken op de telefoon.

  Het hamburgerpictogram van WordPress is 24 bij 24 pixels. Dat is de absolute
  ondergrens uit de richtlijnen en in de praktijk lastig te raken, zeker voor
  wie minder vast ter hand is. Met opvulling eromheen wordt het knopvlak 44 bij
  44 zonder dat het pictogram zelf groter wordt.
*/
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 10px;
  box-sizing: content-box;
}

/*
  Het uitklapmenu op de telefoon.

  De kleuren komen uit parts/header.html, want die moet WordPress zelf kennen.
  Hier staat alleen de indeling: de menu-items waren als losse regeltjes dicht
  op elkaar geplakt en nauwelijks te raken. Nu is elke regel een strook over de
  volle breedte met een scheidingslijn, zoals je van een app gewend bent.
*/
/*
  De selectors beginnen met .aw-header om zwaarder te wegen dan de eigen
  opmaak van het navigatieblok. Zonder dat wint WordPress, want die stijl wordt
  ná het thema ingeladen en is even specifiek.

  De hoogte staat hier expliciet. WordPress legde het vlak "height: 0" op,
  waardoor het maar zo hoog werd als zijn eigen opvulling: 112 pixels. De
  menu-items liepen door tot ver daaronder en werden afgesneden, zodat er in
  de praktijk alleen "Home" zichtbaar was. Reken er niet op dat de opmaak van
  het blok dit zelf regelt.
*/
.aw-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 5rem 1.5rem 2.5rem;
}

/* De drie lagen tussen het vlak en de menu-items moeten de volle breedte
   pakken, anders blijven de stroken zo breed als hun tekst. */
.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  max-width: none;
}

.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Sluitknop rechtsboven, los van de opvulling van het vlak. */
.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: .9rem;
  right: 1.1rem;
}

.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 1.05rem .25rem;
  font-size: 1.15rem;
  border-radius: 0;
}

/* De hoverachtergrond van de bureaubladversie hoort hier niet, die maakt op
   een aanraakscherm alleen maar een grijs vlak dat blijft hangen. */
.aw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  background-color: transparent;
  color: var(--wp--preset--color--accent);
}

/* De sluitknop moet ook een fatsoenlijk aanraakvlak hebben. */
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--contrast);
}

/*
  De tekst op een losse pagina links uitlijnen met de paginatitel.

  De inhoud van een pagina staat in een leeskolom van 760 pixels, en dat is
  precies goed voor lopende tekst. WordPress zette die kolom alleen in het
  midden van het venster, terwijl de titel erboven op de leesbreedte van 1260
  staat. Op een breed scherm begon de tekst daardoor een paar honderd pixels
  rechts van de kop, wat eruitziet alsof er iets scheef staat.

  De marge wordt hier berekend: de helft van wat het venster breder is dan de
  leesbreedte. Daarmee begint de kolom op exact dezelfde lijn als de titel.
  max() vangt smalle schermen af, daar wordt het gewoon nul.

  Het !important is niet te vermijden. WordPress schrijft zijn eigen regel met
  "margin-left: auto !important" en zonder tegenwicht wint die altijd. Blokken
  met volle of brede uitlijning blijven buiten schot, anders breken de
  patronen die juist wél de volle breedte pakken.
*/
.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-right: auto !important;
}

/*
  Op de contactpagina vervallen de vier contactblokken in de voettekst.

  Alles wat daar staat (telefoon, mail, WhatsApp, afhaaladres) staat op die
  pagina al bovenaan, uitgebreider. Twee keer dezelfde gegevens onder elkaar
  op één scherm leest als vulling. De onderbalk met copyright,
  privacyverklaring en KvK-nummer blijft wel staan, want die hoort overal.

  Bewust met opmaak en niet met een aparte voettekst voor deze pagina: dan zou
  het KvK-nummer op twee plekken onderhouden moeten worden, en dat is precies
  het soort ding dat later uit elkaar loopt.
*/
.pagina-contact .wp-site-blocks > footer .wp-block-columns,
.pagina-contact .wp-site-blocks > footer .wp-block-separator {
  display: none;
}

.pagina-contact .wp-site-blocks > footer > .wp-block-group {
  padding-top: var(--wp--preset--spacing--40);
}

/*
  De onderbalk van de voettekst: copyright links, privacyverklaring, KvK en
  de credit rechts.

  De regels stonden niet op één lijn. "Privacyverklaring" is een link en heeft
  opvulling gekregen voor een fatsoenlijk aanraakvlak, "KvK 80396283" is
  gewone tekst zonder opvulling. Zonder uitlijning op het midden staat de een
  daardoor elf pixels lager dan de ander.
*/
.aw-voetbalk,
.aw-voetbalk__links,
.aw-voetbalk__rechts {
  align-items: center;
}

/*
  Op de telefoon past die reeks niet meer op één regel: de drie items braken
  op een willekeurige plek af, twee op de ene regel en de derde eronder. Dat
  leest als een fout. Onder elkaar en links uitgelijnd is het rustiger, en de
  links krijgen dan meteen de volle breedte om aan te tikken.
*/
@media (max-width: 600px) {
  .aw-voetbalk,
  .aw-voetbalk__rechts {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /*
    Elke regel even hoog, ongeacht of het een link is of gewone tekst. Zonder
    dit staan de regels op ongelijke afstanden: de links hebben opvulling
    gekregen om aantikbaar te zijn, de KvK-regel is kale tekst. De link rekt
    mee tot de volle regelhoogte, dus het aanraakvlak blijft 44 pixels.
  */
  .aw-voetbalk p {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .aw-voetbalk p a {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-block: 0;
  }

  .aw-voetbalk__links {
    margin-bottom: .4rem;
  }
}

/*
  Bel-, mail- en WhatsApp-links in de voet en op de contactpagina. Dat zijn
  juist op een telefoon de belangrijkste knoppen van de site, en ze waren maar
  20 pixels hoog. Met deze opvulling komen ze op 44, de maat waarop een vinger
  ze betrouwbaar raakt.
*/
.wp-site-blocks > footer a,
.aw-gegevens a,
.aw-contact__maps {
  display: inline-block;
  padding-block: .68rem;
}

/* De regels in de gegevenslijst mogen daardoor wat dichter op elkaar. */
.aw-gegevens a {
  margin-block: -.35rem;
}

/*
  WordPress geeft knoppen standaard een pilvorm (border-radius 9999px) en
  laat een waarde uit theme.json soms vallen, dus die zetten we hier.
*/
.wp-block-button__link,
.wp-element-button,
.aw-card,
.aw-shot,
.aw-panel {
  border-radius: var(--aw-radius);
}

/* Zachte overgang op knoppen en kaarten */
.wp-block-button__link,
.aw-card {
  transition: transform .15s ease, border-color .18s ease, background-color .15s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/*
  Knop met alleen een rand. WordPress laat die de tekstkleur van de gewone knop
  erven, en die is donker omdat de gevulde knop een lichte achtergrond heeft.
  Op een donkere site levert dat een onleesbare knop op, dus hier expliciet.
*/
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--aw-radius);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* --- dienstenkaarten ----------------------------------------------------- */

.aw-kaarten {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.aw-card {
  background: var(--wp--preset--color--base-3);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--aw-radius);
  padding: 1.7rem;
}

.aw-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}

.aw-card h3 {
  font-size: 1.1rem;
  margin: 0 0 .45rem;
}

.aw-card p {
  margin: 0;
  font-size: .95rem;
  color: var(--wp--preset--color--contrast-2);
}

/* Pictogram in een getint vierkantje, in de accentkleur. Dit is de plek waar
   de kleur van de huisstijl over de hele pagina verdeeld raakt. */
.aw-card__icoon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: var(--aw-radius);
  background: rgba(110, 198, 216, .13);
  border: 1px solid rgba(110, 198, 216, .28);
  color: var(--wp--preset--color--accent);
}

.aw-card__icoon svg {
  width: 22px;
  height: 22px;
}

.aw-card:hover .aw-card__icoon {
  background: rgba(110, 198, 216, .2);
}

/* Raster met projecttegels. Kolommen vullen zichzelf aan: drie naast elkaar
   op een breed scherm, twee op een tablet, één op een telefoon. */
.aw-raster {
  display: grid;
  /* 20rem, niet minder: op 17rem passen er vier naast elkaar en worden de
     tegels zo klein dat de belettering op de foto niet meer leesbaar is.
     Met 20rem zijn het er drie naast elkaar.

     auto-fill en niet auto-fit. Dat verschil telt zodra de laatste rij niet
     vol is: auto-fit laat de lege kolommen inklappen, waardoor de laatste
     twee tegels zich uitrekken tot bijna de volle breedte en door de vaste
     4:3 ook veel hoger worden dan de rest. Dat leest als een fout. auto-fill
     laat de lege kolom staan, dus tegels houden hun eigen maat en rechts
     blijft het gewoon leeg. Zo hoeft het aantal tegels geen veelvoud van
     drie te zijn. */
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: .9rem;
}

.aw-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border-radius: var(--aw-radius);
}

/* Plek waar later een projectfoto komt. De arcering maakt meteen duidelijk
   dat dit vak nog gevuld moet worden. */
.aw-shot--leeg {
  background: var(--wp--preset--color--base-3);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast);
}

.aw-shot--leeg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .022) 0 12px,
    transparent 12px 24px
  );
  pointer-events: none;
}

.aw-shot--leeg p {
  position: relative;
  margin: 0;
  padding: 0 1rem;
}

.aw-shot > * {
  position: relative;
}

/*
  Zachte gloed in de accentkleur achter de hero. Puur donker op donker maakt
  een pagina vlak: dit geeft diepte zonder dat er een kleurvlak bij komt.
  De gloed ligt achter de tekst en vangt geen muisklikken.
*/
/*
  De gloed zit nu in de achtergrond van het blok zelf, niet meer in een los
  laagje eroverheen. Dat laagje stak buiten het vlak uit en werd aan de
  linkerkant hard afgesneden, wat een zichtbare rand opleverde. Een verloop
  op het blok zelf kan niet afgesneden worden.
*/
/*
  Kleur in de bovenkant van de pagina.

  Er stond hier één gloed met het midden op 12 procent van links. Dat werkte
  toen de tekst links stond, maar sinds de hero gecentreerd is valt hij naast
  de tekst en oogt de bovenkant kaal. Nu zijn het drie lagen die elkaar
  overlappen, want één vlek leest als een vlek terwijl meerdere lagen als
  licht lezen:

  1. een helder schijnsel van bovenaf, precies achter de kop
  2. een brede, zachtere gloed links voor asymmetrie
  3. een kleine tegenhanger rechtsonder, zodat het niet naar één hoek trekt

  De dekking blijft laag genoeg om witte tekst overal leesbaar te houden.
*/
.aw-hero {
  position: relative;
  background-image:
    radial-gradient(66% 78% at 50% -8%, rgba(143, 220, 235, .30), rgba(143, 220, 235, .10) 42%, transparent 72%),
    radial-gradient(80% 85% at 12% 6%, rgba(110, 198, 216, .24), rgba(110, 198, 216, .07) 46%, transparent 74%),
    radial-gradient(62% 70% at 92% 78%, rgba(110, 198, 216, .17), transparent 66%);
}

/*
  Dunne lichtlijn langs de bovenrand van de hero, die naar de zijkanten
  uitdooft. Kost bijna niets en geeft de overgang vanaf de menubalk een
  afgewerkte rand in plaats van een kale scheiding.
*/
.aw-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(143, 220, 235, .5) 28%,
    rgba(143, 220, 235, .5) 72%,
    transparent
  );
}

/*
  Hero: alleen tekst, gecentreerd.

  Er heeft hier lang een foto naast de tekst gestaan. Die is eruit gehaald,
  zie de toelichting bovenin patterns/hero.php. Met alleen tekst werkt links
  uitlijnen niet: dan blijft de rechterhelft leeg en dat leest als een gat
  waar iets weggehaald is. Gecentreerd leest het als een bewuste opening.
  De regelbreedtes hieronder houden het leesbaar; zonder die begrenzing zou
  een kop over de volle 1260 pixels lopen.
*/
.aw-hero__tekst {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

/*
  Op de telefoon links uitlijnen in plaats van gecentreerd.

  Gecentreerd werkt op een breed scherm, waar de kop kort is en er lucht
  omheen staat. In een smalle kolom begint elke regel op een andere plek en
  moet het oog die telkens opnieuw zoeken. Bij een lopende alinea van vier
  regels kost dat merkbaar leestempo. Bovendien staat alles eronder wél links,
  dus zo loopt de hele pagina langs dezelfde lijn.
*/
@media (max-width: 600px) {
  .aw-hero__tekst {
    text-align: left;
  }

  .aw-hero-titel,
  .aw-hero-lead {
    margin-inline: 0;
  }

  /* Met alleen ".aw-hero__knoppen" verliest deze regel: de opmaak die de
     knoppen centreert staat verderop in dit bestand en is even specifiek.
     Een mediaquery weegt daarin niet mee. */
  .aw-hero__tekst .aw-hero__knoppen {
    justify-content: flex-start;
  }
}

.aw-hero-titel {
  /* Groter dan in de vorige opzet: de kop is nu het enige wat de bovenkant
     van de pagina draagt, dus die mag de ruimte pakken. */
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  /* In pixels, niet in ch: bij deze lettergrootte is 15ch nog geen 500 pixels
     en dan breekt de kop over vier regels. Op 810 valt hij netjes in tweeen.
     text-wrap balance verdeelt de woorden daarna gelijk over die twee. */
  max-width: 810px;
  margin: 0 auto 1.3rem;
  text-wrap: balance;
}

/*
  Kernwoord in de kop met een streep in de accentkleur eronder. Geen echte
  onderstreping maar een dikkere lijn met wat lucht ertussen, zodat het als
  markering leest en niet als link.
*/
.aw-hero-titel em {
  font-style: normal;
  background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 calc(100% - 2px);
  padding-bottom: 4px;
}

.aw-hero-lead {
  font-size: 1.18rem;
  color: var(--wp--preset--color--contrast-2);
  max-width: 54ch;
  margin: 0 auto 2.4rem;
}

.aw-hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

/* De knoppen in de hero staan los van de blokeditor, dus hier de opmaak */
.aw-knop {
  display: inline-flex;
  align-items: center;
  padding: .8rem 1.5rem;
  border-radius: var(--aw-radius);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}

.aw-knop:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.aw-knop--vol {
  background: var(--wp--preset--color--accent);
  color: #08141A;
}

.aw-knop--vol:hover {
  background: var(--wp--preset--color--accent-2);
  color: #08141A;
}

.aw-knop--rand {
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--border);
}

.aw-knop--rand:hover {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/*
  Een tegel in het werkoverzicht met een echte foto erin, in plaats van een
  gearceerd vak. Zelfde maat en ronding als de plaatshouders ernaast, zodat
  het raster gelijk blijft terwijl de foto's binnendruppelen.

  De hero heeft hier lang een grote versie van gestaan. Die is eruit gehaald,
  zie de toelichting bovenin patterns/hero.php.
*/
.aw-shot--foto {
  margin: 0;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--base-2);
}

/* De arcering van de plaatshouder hoort niet over een echte foto heen. */
.aw-shot--foto::before {
  content: none;
}

/*
  De foto ligt als een laag over het hele vak in plaats van dat hij als
  gewoon element in het raster staat. Dat is met opzet: bij "height: 100%"
  binnen een vak dat zijn hoogte uit aspect-ratio haalt, rekenen browsers
  verschillend. Chrome liet een staande foto dan doorschieten tot 529 pixels
  in een vak van 300, waardoor die tegel hoger werd dan de rest. Met
  inset: 0 staat de maat vast en snijdt object-fit de rest weg.
*/
.aw-shot--foto img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/*
  Projectlabel over de onderrand. Een verloop in plaats van een los vlakje:
  het label hoort bij de foto en gaat niet als knop leven.
*/
.aw-shot--foto figcaption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6rem .95rem .8rem;
  text-align: left;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 3, 6, .6) 45%,
    rgba(5, 3, 6, .88) 100%
  );
}

.aw-shot--foto figcaption span {
  color: var(--wp--preset--color--contrast-2);
  font-size: .8rem;
}

/*
  Dezelfde gloed onder "Recent werk", maar dan aan de rechterkant. Zo krijgt
  de pagina ritme in plaats van alleen bovenaan een lichtpunt.
*/
/* Zelfde gloed, maar dan rechts, zodat de pagina ritme krijgt bij het
   scrollen. Ook hier als achtergrond van het blok zelf. */
.aw-werk {
  position: relative;
  background-image: radial-gradient(
    100% 80% at 88% 30%,
    rgba(110, 198, 216, .11),
    rgba(110, 198, 216, .03) 45%,
    transparent 70%
  );
}

/*
  De drie punten onder de hero stonden los te zweven. Een doorzichtig blauw
  vlak bindt ze samen zonder dat het een dichte kaart wordt.
*/
.aw-punten {
  display: grid;
  gap: 1.6rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  /* De 5rem hier hoorde bij de foto die naast de tekst stond. Nu de hero
     alleen tekst is, mag de balk dichter op de knoppen staan. */
  margin-top: 3.4rem;
  /*
    Geen kader meer om deze drie punten. De hero heeft nu een gloed in de
    accentkleur, en een vlak met diezelfde kleur eroverheen liep daarmee door
    elkaar heen: twee lagen turquoise op elkaar wordt troebel in plaats van
    rustig. Een enkele lijn erboven verankert de rij net zo goed, zonder er
    een los onderdeel van te maken.
  */
  padding-top: 2.4rem;
  border-top: 1px solid var(--wp--preset--color--border);
}

.aw-punt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

/* Los pictogram, zonder kader. De dienstenkaarten hebben dat wel, hier zou
   het te veel dozen naast elkaar geven. */
.aw-punt__icoon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--wp--preset--color--accent);
}

.aw-punt__icoon svg {
  width: 24px;
  height: 24px;
}

/* Was een h3, is nu een alinea met kopopmaak. Zie de toelichting in
   patterns/hero.php: als kop leverde het een overgeslagen niveau op.
   De selector noemt bewust zowel de ouder als het element: met alleen
   ".aw-punt__kop" wint de regel ".aw-punt p" verderop, want die is even
   specifiek en staat later in het bestand. */
.aw-punt p.aw-punt__kop {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--accent);
  margin: 0 0 .2rem;
}

.aw-punt p {
  margin: 0;
  font-size: .92rem;
  color: var(--wp--preset--color--contrast-2);
}

/*
  De secties op de homepage lopen over de volle breedte, zodat koppen links
  uitlijnen met de kaarten eronder. Lange tekst blijft wel beperkt in breedte,
  anders wordt het onprettig lezen.
*/
/*
  De selector is expres specifiek. WordPress zet met een eigen regel
  "margin-left: auto" op alles binnen een constrained layout, waardoor een blok
  met een eigen max-width netjes in het midden zou gaan staan. Wij willen hier
  juist links uitlijnen met de rest van de sectie.
*/
/*
  Deze twee staan in het hero-blok binnen een groep met de standaardindeling.
  Daar zet WordPress geen automatische marges op, dus een max-width lijnt
  vanzelf links uit met de rest van de sectie.
*/
.aw-hero-title {
  max-width: 17ch;
}

.aw-lead {
  max-width: 62ch;
}

/* Lopende tekst op de Over ons-pagina. Over de volle 1260 pixels worden de
   regels zo lang dat het oog aan het begin van de volgende regel moet zoeken
   waar het was. Rond de 70 tekens leest een alinea het prettigst. */
.aw-verhaal {
  max-width: 70ch;
}

/*
  De losse doorverwijzingen onder de diensten en het werk ("Lees meer over wat
  we maken", "Bekijk al ons werk"). Dat zijn geen links in een lopende zin maar
  knoppen in tekstvorm, en die waren op de telefoon maar 24 pixels hoog. Met
  deze opvulling wordt het aantikvlak 44, de maat die Apple en Google allebei
  aanhouden voor iets dat je met een duim moet raken. De regelhoogte verandert
  niet, want opvulling op een inline element duwt de tekst eromheen niet weg.
*/
.aw-meerlink a {
  display: inline-block;
  padding: .6rem 0;
}

/* Bovenschrift boven een kop */
.aw-eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
}

/*
  De bovenregel in de hero staat in een klein kader met een stipje ervoor.
  Een gloed alleen blijft vaag; dit zet er een scherp stukje huisstijlkleur
  tegenover, en het is meteen de eerste vorm die je ziet als de pagina laadt.
  Alleen in de hero, de andere secties houden hun kale bovenregel.
*/
.aw-hero .aw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  /* Zelfde maat als de bovenregels in de andere secties. Die staat daar in
     de blokopmaak; hier moet hij in de stijl, anders valt de regel terug op
     de gewone tekstgrootte en wordt het kadertje veel te groot. */
  font-size: .78rem;
  text-align: center;
  padding: .42rem .95rem;
  margin-bottom: 1.5rem;
  border-radius: var(--aw-radius);
  background: rgba(110, 198, 216, .12);
  border: 1px solid rgba(110, 198, 216, .34);
}

.aw-hero .aw-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(110, 198, 216, .22);
}

/*
  Opvallend blok in de accentkleur, voor de oproep onderaan de homepage.

  De !important is hier niet te vermijden: WordPress zet zijn eigen
  kleurklassen (has-contrast-2-color en dergelijke) met !important in de
  stijl, en die moeten we op dit vlak juist overrulen.
*/
.aw-panel--accent {
  background: var(--wp--preset--color--accent);
  border: 0;
}

.aw-panel--accent h2,
.aw-panel--accent p {
  color: #08141A !important;
}

/* Op een lichte ondergrond draaien de knoppen om: donker vlak met lichte
   tekst, anders verdwijnt de knop in de achtergrond. */
.aw-panel--accent .wp-block-button__link {
  background-color: #0E1319;
  color: #F3F6F8;
}

.aw-panel--accent .wp-block-button__link:hover {
  background-color: #1D2530;
  color: #FFFFFF;
}

.aw-panel--accent .wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: #08141A;
  border-color: rgba(8, 20, 26, .4);
}

.aw-panel--accent .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: rgba(8, 20, 26, .08);
  color: #08141A;
  border-color: rgba(8, 20, 26, .75);
}

/* --- dienstenpagina ------------------------------------------------------ */

.aw-dienstenlijst {
  display: grid;
  gap: 1.6rem;
}

.aw-dienst {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.aw-dienst__nr {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wp--preset--color--accent);
  padding-top: .25rem;
}

.aw-dienst h2 {
  font-size: 1.3rem;
  margin: 0 0 .5rem;
}

.aw-dienst p {
  margin: 0;
  color: var(--wp--preset--color--contrast-2);
  max-width: 68ch;
}

/* --- werkpagina ---------------------------------------------------------- */

/* Zie de opmerking bij .aw-raster voor waarom hier auto-fill staat en niet
   auto-fit. Op deze pagina telt dat het zwaarst, want het aantal projecten
   groeit en is dus zelden een veelvoud van drie. */
.aw-galerij {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.aw-galerij .aw-shot {
  margin: 0;
  border-radius: var(--aw-radius);
}

/* Alleen de nog lege vakken krijgen de vlakke achtergrond met de arcering.
   Tegels met een foto hebben hun eigen opmaak, verderop bij .aw-shot--foto. */
.aw-galerij .aw-shot--leeg {
  background: var(--wp--preset--color--base-3);
  border: 1px solid var(--wp--preset--color--border);
}

.aw-galerij .aw-shot--leeg figcaption {
  position: relative;
  text-align: center;
  padding: 0 1rem;
}

.aw-galerij figcaption strong {
  display: block;
}

.aw-galerij figcaption span {
  font-size: .85rem;
  color: var(--wp--preset--color--contrast-2);
}

/* --- contactpagina ------------------------------------------------------- */

.aw-contact {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/*
  Op de telefoon staat het formulier bovenaan en de gegevens eronder.

  In de code staan de gegevens eerst, want op een breed scherm horen ze in de
  linkerkolom. Gestapeld werkt die volgorde averechts: de gegevenskaart is lang
  (adres, telefoon, mail, WhatsApp, afhaalregel, kaartlink) en
  duwt het formulier ver onder de rand van het scherm. Wie op deze pagina komt
  wil meestal iets versturen, en dat moet je niet eerst hoeven zoeken.

  Bellen blijft bereikbaar: het telefoonnummer staat in de voettekst en de
  knop rechtsboven in de menubalk wijst hierheen.
*/
@media (max-width: 899px) {
  .aw-contact__form {
    order: -1;
  }
}

@media (min-width: 900px) {
  .aw-contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.aw-contact__zij,
.aw-contact__form {
  background: var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--aw-radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.aw-contact__kop {
  font-size: 1.35rem;
  margin: 0 0 .3rem;
}

.aw-contact__sub {
  color: var(--wp--preset--color--contrast-2);
  font-size: .9rem;
  margin-bottom: 1.6rem;
}

.aw-contact__subkop {
  font-size: 1rem;
  margin: 0 0 .7rem;
}

.aw-contact__streep {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--border);
  margin: 1.6rem 0;
}

.aw-contact__adres,
.aw-contact__maps {
  font-size: .93rem;
}

.aw-contact__adres {
  color: var(--wp--preset--color--contrast-2);
  margin-bottom: .5rem;
}

/* Gegevensregels met pictogram */
.aw-gegevens {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}

.aw-gegevens li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.55;
}

.aw-gegevens__icoon {
  flex: 0 0 auto;
  color: var(--wp--preset--color--accent);
  margin-top: 2px;
}

.aw-gegevens__icoon svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Tabel met twee kolommen in de gegevenskaart op de contactpagina. Wordt op dit
   moment nergens gebruikt: de tabel die hier stond is van de site gehaald. De
   opmaak blijft staan zodat er niets herbouwd hoeft te worden als er ooit weer
   zo'n rijtje bij komt. Zie de aantekening in patterns/contactformulier.php. */
.aw-tijden {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}

.aw-tijden th {
  text-align: left;
  font-weight: 400;
  color: var(--wp--preset--color--contrast-2);
  padding: .18rem 0;
}

.aw-tijden td {
  text-align: right;
  padding: .18rem 0;
  white-space: nowrap;
}

/* --- formulier ----------------------------------------------------------- */

.aw-form__rij {
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.5rem;
}

@media (min-width: 620px) {
  .aw-form__rij {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Binnen een rij regelt de grid de tussenruimte, anders tellen de marges
   dubbel en wordt de afstand ongelijk. */
.aw-form__rij .aw-veld {
  margin-bottom: 0;
}

.aw-veld {
  display: block;
  margin-bottom: 1.5rem;
}

.aw-veld__naam {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.aw-veld__naam em {
  font-style: normal;
  font-weight: 400;
  color: var(--wp--preset--color--contrast-2);
}

.aw-veld__hint {
  display: block;
  font-size: .82rem;
  color: var(--wp--preset--color--contrast-2);
  margin-top: .4rem;
}

/*
  De invulvakken staan op een kaart die zelf al donker is. Met alleen de
  standaard randkleur lopen vak en kaart optisch in elkaar over, dus hier een
  lichtere rand en een iets donkerdere vulling. Dat maakt het verschil tussen
  "hier kun je typen" en "dit is achtergrond".
*/
/*
  De lettergrootte staat op 1rem en niet lager. Safari op de iPhone zoomt de
  hele pagina in zodra je een veld aantikt waarvan de letter kleiner is dan
  16 pixels, en dan moet de bezoeker daarna zelf weer uitzoomen. Op .97rem
  gebeurde dat precies wel.

  De rand is opgetrokken van #3B4757 naar #4E5E73. Tegen de bijna zwarte
  velden had de oude rand een verhouding van 2,2 op 1, terwijl je 3 op 1
  nodig hebt om de omtrek van een invoerveld te kunnen zien. Nu is het 3,3.
*/
.aw-veld input,
.aw-veld select,
.aw-veld textarea {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--wp--preset--color--base-0);
  border: 1px solid #4E5E73;
  border-radius: var(--aw-radius);
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.aw-veld input:hover,
.aw-veld select:hover,
.aw-veld textarea:hover {
  border-color: #63748B;
}

.aw-veld textarea {
  resize: vertical;
  min-height: 8rem;
}

.aw-veld input:focus,
.aw-veld select:focus,
.aw-veld textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(110, 198, 216, .18);
}

.aw-veld input::placeholder,
.aw-veld textarea::placeholder {
  color: var(--wp--preset--color--muted, #6C7A89);
}

/* Bestandsknop in dezelfde stijl als de rest */
.aw-veld--bestand input[type="file"] {
  padding: .55rem .85rem;
  cursor: pointer;
}

.aw-veld--bestand input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .4rem .9rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--aw-radius);
  background: var(--wp--preset--color--base-3);
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.aw-form__knop {
  width: 100%;
  margin-top: .4rem;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: var(--aw-radius);
  background: var(--wp--preset--color--accent);
  color: #08141A;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.aw-form__knop:hover {
  background: var(--wp--preset--color--accent-2);
  transform: translateY(-1px);
}

.aw-form__noot {
  font-size: .82rem;
  color: var(--wp--preset--color--contrast-2);
  margin: .9rem 0 0;
}

/* Het verborgen veld tegen spam. Uit beeld, maar niet display:none, want
   sommige robots slaan onzichtbare velden juist over. */
.aw-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Meldingen boven het formulier */
.aw-melding {
  border-radius: var(--aw-radius);
  padding: .85rem 1rem;
  margin-bottom: 1.4rem;
  font-size: .93rem;
  border: 1px solid transparent;
}

.aw-melding--goed {
  background: rgba(110, 198, 216, .12);
  border-color: rgba(110, 198, 216, .45);
  color: var(--wp--preset--color--accent-2);
}

.aw-melding--fout {
  background: rgba(229, 115, 115, .12);
  border-color: rgba(229, 115, 115, .45);
  color: #F0A9A9;
}

/* --- footer -------------------------------------------------------------- */

/*
  Merkblok bovenaan de voet: logo met "Gewoon reclame" eronder. De groep is
  precies zo breed als het logo, zodat de payoff rechts uitkomt op het einde
  van de streep in het logo, net als op haar visitekaartje.
*/
.aw-voetmerk {
  width: 230px;
  max-width: 100%;
  margin: 0 auto 2.6rem;
}

.aw-voetmerk .wp-block-site-logo {
  margin: 0 0 .3rem;
}

/* De link om het logo heen krimpt standaard mee met zijn inhoud. Een breedte
   in procenten op de afbeelding zou zich dan meten aan iets dat zichzelf aan
   die afbeelding meet, en dan valt de hoogte terug naar nul. Vandaar een
   vaste maat, gelijk aan de groep. */
.aw-voetmerk .custom-logo-link {
  display: block;
}

.aw-voetmerk .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 53px;
}

.aw-payoff {
  margin: 0;
  text-align: right;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--wp--preset--color--contrast);
}

/* Pictogram boven elk contactblok */
/*
  Een contactblok is één ding: pictogram, label, gegeven. WordPress zet
  standaard 1.25rem tussen elk blok in een kolom, en die maat wint van de
  kleinere afstanden hieronder omdat marges van buren samenvallen tot de
  grootste. Gevolg: het pictogram zweefde los van zijn label en het label los
  van het nummer, waardoor de voet drie losse regels leek in plaats van vier
  blokjes. Deze selectors zijn zwaarder dan die van WordPress, zodat de maten
  hieronder wel gelden.
*/
.aw-fc .aw-fc-icon,
.aw-fc .aw-fc-titel,
.aw-fc p {
  margin-top: 0;
}

.aw-fc-icon {
  display: flex;
  justify-content: center;
  margin-bottom: .7rem;
  color: var(--wp--preset--color--accent);
}

.aw-fc-icon svg {
  width: 30px;
  height: 30px;
}

/* Kopje van een contactblok. Bewust rustiger dan een gewone h3, want het is
   een label en geen sectiekop. */
.aw-fc-titel {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

/* Vierkantjes met de sociale iconen */
.aw-social {
  display: flex;
  gap: .5rem;
}

/*
  De voettekst heeft verderop een regel die élke link daar verticale opvulling
  geeft, voor een fatsoenlijk aanraakvlak op de telefoon:

      .wp-site-blocks > footer a { display: inline-block; padding-block: .68rem }

  Die selector weegt zwaarder dan een kale ".aw-social a" en won dus. Gevolg:
  het knopje bleef 36 breed maar werd 58 hoog, want een link heeft geen
  border-box en die opvulling telde bovenop de hoogte. Vandaar dat de voettekst
  hier in de selector staat, en dat opvulling en box-sizing expliciet gezet
  worden in plaats van dat we hopen dat ze niet geërfd worden.
*/
.wp-site-blocks > footer .aw-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--aw-radius);
  background: var(--wp--preset--color--accent);
  color: #08141A;
  transition: background-color .15s ease, transform .15s ease;
}

.aw-social a:hover {
  background: var(--wp--preset--color--accent-2);
  transform: translateY(-1px);
}

.aw-social svg {
  width: 19px;
  height: 19px;
}

/*
  Menu-items krijgen een vlak achter zich zodra je er met de muis op staat.
  De pagina waar je bent houdt dat vlak vast, maar in het logoblauw, zodat
  je het verschil ziet tussen "hier sta ik met de muis" en "hier ben ik".

  De afronding volgt --aw-radius, dus hij past bij de knoppen en de kaarten.
*/
/* De binnenmarge is bewust krap gehouden. Het hovervlak sluit daardoor
   strak om de tekst, waardoor er ruimte tussen de vlakken overblijft en ze
   bij snel bewegen niet in elkaar lijken over te lopen. De 28 pixels tussen
   de teksten blijven gelijk: wat er hier van de marge af gaat, komt er in
   de tussenruimte van het menu bij. */
.wp-block-navigation .wp-block-navigation-item__content {
  padding: 0.4rem 0.5rem;
  border-radius: var(--aw-radius);
  transition: background-color .15s ease, color .15s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  background-color: rgba(255, 255, 255, .09);
}

/* De pagina waar je nu bent: alleen de tekstkleur, geen vlak. Het vlak is
   voorbehouden aan hover, zodat de twee niet op elkaar lijken. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent);
}

/* Knop met een pictogram ervoor, zoals de Contact-knop in de kop */
.aw-knop-icoon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* .72rem in plaats van .6rem: daarmee wordt de knop 44 hoog in plaats van
     43, en dat is de ondergrens voor een aanraakvlak. */
  padding: .72rem 1.25rem;
  border-radius: var(--aw-radius);
  background: var(--wp--preset--color--accent);
  color: #08141A;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}

.aw-knop-icoon:hover {
  background: var(--wp--preset--color--accent-2);
  color: #08141A;
  text-decoration: none;
  transform: translateY(-1px);
}

/*
  Tussen 600 en 700 pixels past het menu nog uitgeklapt, maar de knoptekst
  "Contact opnemen" wordt daar te lang. Daar valt alleen het woord "opnemen"
  weg. Onder de 600 verdwijnt de tekst helemaal, zie verderop.
*/
@media (max-width: 700px) {
  .aw-knop-icoon__staart {
    display: none;
  }

  .aw-knop-icoon {
    padding-inline: 1rem;
  }
}

/*
  Het logo past binnen een vak van 230 bij 53 pixels in plaats van dat het een
  vaste breedte krijgt. Voor het liggende bestand (1000 bij 230) komt dat op
  hetzelfde neer, maar het maakt uit zodra er een ander logo ingesteld wordt.
  Bij een vaste breedte bepaalt de verhouding van dat nieuwe bestand namelijk
  de hoogte van de hele balk: een vierkant logo van 230 breed maakt de kop
  meteen 233 hoog. Met een grens op allebei de maten schaalt elk logo netjes
  mee en blijft de balk even hoog, wat de verhouding ook is.

  Bewust geen min-width: die zou een smal logo horizontaal uitrekken.
*/
.aw-header .custom-logo {
  width: auto;
  height: auto;
  max-width: 230px;
  max-height: 53px;
}

/* Op de telefoon staat het logo klem tussen de hamburger en de contactknop.
   Op zijn volle 230 pixels blijft er nog geen 12 pixels aan weerskanten over
   en wordt het bovendien een paar pixels platgedrukt. Met 185 houdt het aan
   beide kanten lucht en blijft "RECLAME" goed leesbaar. */
@media (max-width: 600px) {
  .aw-header .custom-logo {
    max-width: 185px;
    max-height: 43px;
  }
}


.aw-knop-icoon svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/*
  Kop met het logo in het midden. Drie kolommen waarvan de buitenste even
  breed zijn, zodat het logo altijd precies gecentreerd staat, ongeacht hoe
  lang het menu of de knop is.
*/
.aw-header__raster {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/*
  WordPress zet een marge boven elk volgend blok binnen een groep. In dit
  raster duwt dat het logo en de knop een aantal pixels omlaag, terwijl het
  menu als eerste element wel goed staat. De ruimte tussen de kolommen komt
  hier van "gap", dus die marges mogen weg.
*/
.aw-header__raster > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.aw-header__raster > :last-child {
  justify-self: end;
}

/*
  Het logo blijft op elke breedte in het midden staan, met het menu links en
  de contactknop rechts. Eerder week de kop op smalle schermen uit naar een
  flexrij met het logo vooraan, omdat de knop "Contact opnemen" te veel ruimte
  innam om er nog een gecentreerd logo tussen te krijgen. Dat is opgelost door
  die knop op de telefoon terug te brengen tot alleen het pictogram, zie
  hieronder: links en rechts zijn dan allebei 44 pixels breed en het logo
  houdt de rest over.
*/
@media (max-width: 860px) {
  .aw-header__raster {
    gap: .75rem;
  }
}

/*
  Onder de 600 pixels klapt het menu samen tot een hamburger. Vanaf datzelfde
  punt wordt de contactknop een vierkant met alleen de envelop erin. De tekst
  blijft in de code staan, alleen onzichtbaar, zodat schermlezers en
  zoekmachines nog steeds "Contact opnemen" horen en lezen.
*/
@media (max-width: 600px) {
  .aw-knop-icoon {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .aw-knop-icoon > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .aw-knop-icoon svg {
    width: 20px;
    height: 20px;
  }
}

/*
  Vaste kop die meescrollt.

  Het plakken moet op het <header> element zelf, niet op de groep erbinnen.
  Sinds .wp-site-blocks een flexkolom is (voor de footer onderaan het scherm)
  is die groep een kind van een flexitem dat precies zo hoog is als zijn
  inhoud. Daar heeft "sticky" geen ruimte om te bewegen en gebeurt er niets.
*/
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/*
  Hier stond "backdrop-filter: blur(10px);" op de kop. Dat is weggehaald om
  twee redenen.

  Het deed niets: de kop heeft een volledig ondoorzichtige achtergrond
  (#050306), en achter zoiets valt niets te vervagen.

  En het brak het uitklapmenu op de telefoon. Een element met backdrop-filter
  wordt het referentiekader voor alles wat er met "position: fixed" in staat.
  Het menuvlak zat daardoor opgesloten in de menubalk: 375 bij 120 pixels in
  plaats van schermvullend, waardoor alleen "Home" zichtbaar was en de rest
  eronder werd afgesneden. Zet dit dus niet terug zonder de kop doorzichtig te
  maken én het menu opnieuw te controleren.
*/

/*
  Op smalle schermen moeten de onderdelen in de kop kunnen krimpen. Zonder dit
  blijft de telefoonknop op zijn volle breedte staan, wordt de kop breder dan
  het scherm en schuift de hele pagina naar rechts weg.
*/
.aw-header .wp-block-group {
  min-width: 0;
}

@media (max-width: 600px) {
  .aw-header .wp-block-site-tagline {
    display: none;
  }

  .aw-header .wp-block-button__link {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}