/*
Theme Name: Nieuwenhuyse
Theme URI: https://nieuwenhuyse.nl
Author: Edwin Nieuwenhuyse
Description: Child theme van Kadence voor de boekensite nieuwenhuyse.nl.
Template: kadence
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: nieuwenhuyse
*/

/* ==========================================================================
   1. LETTERTYPEN — zelf gehost
   --------------------------------------------------------------------------
   Bewust NIET via fonts.googleapis.com geladen: dat stuurt het IP-adres van
   elke bezoeker naar Google in de VS, wat onder de AVG problematisch is en
   een cookie-/privacymelding zou vereisen. Zelf hosten is bovendien sneller.

   Oswald  = condensed schreefloos, volgt de letter van het boekomslag.
   Literata = de letter die ook in het boek zelf gebruikt wordt (uit de EPUB),
              waardoor site en boek als een geheel aanvoelen.
   Beide zijn variabele fonts: een bestand dekt alle diktes.
   ========================================================================== */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/literata-it-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/literata-it-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. ONTWERP-TOKENS
   --------------------------------------------------------------------------
   Kleuren komen rechtstreeks van het boekomslag (opgave Edwin, geverifieerd
   door het omslagbeeld te bemonsteren: dominante kleur #0146ab).

   REEKS: elk volgend boek krijgt een eigen kleur. Voeg dan een --boek-N-* set
   toe en zet op die productpagina een class die --merk-* opnieuw bindt. Het
   skelet van de site verandert daarbij niet.
   ========================================================================== */

:root {
  /* Boek 1 — Zeker weten van niet */
  --boek-1-primair:  #0047ab;   /* kobalt */
  --boek-1-accent:   #81d4f3;   /* signaalcyaan */
  --boek-1-contrast: #ffffff;

  /* Actieve boekkleur */
  --merk-primair:  var(--boek-1-primair);
  --merk-accent:   var(--boek-1-accent);
  --merk-contrast: var(--boek-1-contrast);
  --merk-donker:   #003a8c;     /* hover/actief op kobalt */

  /* Neutralen */
  --tekst:       #16181d;
  --tekst-zacht: #565d6b;
  --lijn:        #d9dde5;
  --vlak-zacht:  #f4f6fa;

  /* Typografie */
  --font-kop:   'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: 'Literata', Georgia, 'Times New Roman', serif;

  /* Ritme */
  --maat-tekst: 65ch;           /* leesbare regellengte */
}

/* --------------------------------------------------------------------------
   Kadence's eigen palet aan de merkkleuren koppelen.
   Kadence bouwt zijn knoppen, links en vlakken op --global-palette1..9. Door
   die hier te herdefinieren volgt het hele theme de boekkleuren, zonder dat
   we per component CSS hoeven te schrijven. Deze stylesheet laadt na die van
   Kadence, dus bij gelijke specificiteit winnen deze waarden.
   -------------------------------------------------------------------------- */
:root {
  --global-palette1: var(--merk-primair);
  --global-palette2: var(--merk-donker);
  --global-palette3: var(--tekst);
  --global-palette4: #2f333c;
  --global-palette5: var(--tekst-zacht);
  --global-palette6: var(--lijn);
  --global-palette7: var(--vlak-zacht);
  --global-palette8: #ffffff;
  --global-palette9: #ffffff;
}

/* ==========================================================================
   3. TYPOGRAFIE
   --------------------------------------------------------------------------
   Koppen in condensed hoofdletters, naar het omslag. Alleen h1 en h2 in
   kapitalen: vanaf h3 wordt dat onrustig en slecht leesbaar in lopende tekst.
   ========================================================================== */

body {
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.08;
  color: var(--tekst);
}

h1, h2, .site-title {
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Kobalt op de sitenaam en de twee bovenste kopniveaus, zodat de site dezelfde
   kleur draagt als het beeldmerk en de boekomslag.

   Bewust NIET vanaf h3. Die staan midden in lopende tekst - op de juridische
   pagina's tientallen keren - en een gekleurde kop om de paar alinea's maakt een
   pagina onrustig. h1 en h2 zijn structuur, h3 is een tussenstopje; dat verschil
   moet zichtbaar blijven.

   Contrast gecontroleerd: #0047ab op wit is 8,44:1 en op het paginavlak #e9f5fb
   7,60:1. De eis is 4,5:1, dus er is ruimte, ook voor wie slecht ziet. */
h1,
h2,
.entry-title,
.site-branding .site-title,
.site-branding .site-title a {
  color: var(--merk-primair);
}

/* Let op de dubbele klasse hierboven. Kadence zet de kleur van de sitenaam via
   inline CSS met de selector .site-branding .site-title. Dat is specifieker dan
   een losse .site-title, dus die wordt overruled. Met dezelfde twee klassen wint
   deze regel omdat het stylesheet later laadt - dat is netter dan !important,
   want daarmee blokkeer je jezelf bij een volgende aanpassing. */

/* Hover op de sitenaam naar het donkere kobalt in plaats van Kadence' accent. */
.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
  color: var(--merk-donker);
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); }

/* Leesbare regellengte in lopende tekst; tabellen en media niet beperken. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: var(--maat-tekst);
}

/* --------------------------------------------------------------------------
   Eén kolom voor de hele pagina-inhoud.
   De eerdere aanpak begrensde alleen alinea's, waardoor koppen veel breder
   liepen dan de tekst eronder. Dat oogde onrustig. Nu delen kop en tekst
   dezelfde kolombreedte.
   -------------------------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: none;
}

.entry-content {
  max-width: 46rem;
  margin-inline: auto;
}

/* Kadence zet de marge op .entry-content met een specifiekere selector
   (.entry-content.single-content), waardoor margin-inline hierboven het aflegde.
   Zie de les uit het elunaya-project: specificiteit is bij dit soort themes
   steeds de oorzaak. Longhand plus een even specifieke selector lost het op. */
.entry-content.single-content,
.entry-content.page-content,
.entry-content {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   4. PAGINAVLAK EN KOPGROOTTES
   --------------------------------------------------------------------------
   Zwart op wit was te kaal. De pagina krijgt een zachte cyaantint, afgeleid
   van de signaalkleur van het omslag (#81d4f3, sterk verdund met wit). Het
   tekstvlak blijft wit, zodat het leescontrast maximaal blijft en de tint
   alleen als omlijsting werkt.
   De containerbreedte gaat omlaag, anders is die tint een randje van enkele
   pixels en zie je er niets van.
   ========================================================================== */

:root {
  --vlak-pagina: #e9f5fb;          /* zachte cyaan, ca. 80% wit */

  --global-palette8: var(--vlak-pagina);   /* achtergrond van de pagina */
  --global-palette9: #ffffff;              /* het tekstvlak zelf */

  --global-content-width: 1040px;
}

/* Kopgroottes een slag kleiner. De eerdere maten (64 px voor h1) domineerden
   de pagina te sterk voor een tekstsite. */
h1 { font-size: clamp(1.9rem,  1.15rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem  + 1.2vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); }

/* --------------------------------------------------------------------------
   Zwevende afbeeldingen op smalle schermen.
   Zonder dit blijft een alignleft/alignright-omslag ook op mobiel zweven en
   wordt de tekst tot een kolom van een paar tekens breed geperst. Getest op
   375 px: onleesbaar. De afbeelding komt daarom boven de tekst te staan.
   De breedte heeft !important nodig omdat Gutenberg de maat als inline style
   op de img zet, en die wint anders van elke stylesheetregel.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .entry-content .wp-block-image.alignleft,
  .entry-content .wp-block-image.alignright {
    float: none;
    margin-inline: auto;
    text-align: center;
  }

  .entry-content .wp-block-image.alignleft img,
  .entry-content .wp-block-image.alignright img {
    width: 220px !important;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Correctie op de regel hierboven.
   WordPress rendert een uitgelijnde afbeelding als
   <div class="wp-block-image"><figure class="alignright"> - de uitlijnklasse
   staat dus op de figure, niet op het blok. De vorige selector raakte daardoor
   niets. Deze versie richt zich op de figure zelf en werkt voor beide vormen.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .entry-content figure.alignleft,
  .entry-content figure.alignright,
  .entry-content .wp-block-image.alignleft,
  .entry-content .wp-block-image.alignright {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .entry-content figure.alignleft img,
  .entry-content figure.alignright img,
  .entry-content .wp-block-image.alignleft img,
  .entry-content .wp-block-image.alignright img {
    width: 220px !important;
    height: auto;
  }
}

/* ==========================================================================
   5. EASY DIGITAL DOWNLOADS
   --------------------------------------------------------------------------
   EDD levert zijn eigen knopkleur mee (#428bca). Die overschrijven we met de
   boekkleur, zodat koop- en afrekenknoppen gelijk zijn aan de rest van de site.
   Klassen zijn afgelezen uit de gerenderde HTML, niet gegokt:
   .edd-add-to-cart.button.blue.edd-submit en .edd_go_to_checkout.button.blue
   ========================================================================== */

.edd-submit.button.blue,
.edd-submit.button.blue:visited,
a.edd_go_to_checkout.button.blue,
input.edd-submit.button.blue,
#edd-purchase-button,
.edd-submit.button {
  background-color: var(--merk-primair);
  border-color: var(--merk-primair);
  color: var(--merk-contrast);
}

.edd-submit.button.blue:hover,
.edd-submit.button.blue:focus,
a.edd_go_to_checkout.button.blue:hover,
input.edd-submit.button.blue:hover,
#edd-purchase-button:hover,
.edd-submit.button:hover {
  background-color: var(--merk-donker);
  border-color: var(--merk-donker);
  color: var(--merk-contrast);
}

/* De BTW-vermelding naast de knop mag rustiger. */
.edd_purchase_tax_rate {
  color: var(--tekst-zacht);
  font-size: 0.9em;
}

/* Knop en BTW-tekst onder elkaar op smalle schermen. */
@media (max-width: 480px) {
  .edd_purchase_submit_wrapper { display: block; }
  .edd_purchase_tax_rate { display: block; margin-top: 0.5em; }
}


/* ==========================================================================
   TAALWISSELAAR

   De wisselaar hangt als laatste item in het hoofdmenu; hij komt uit
   functions.php, niet uit een menu-item. Vlag en taalcode staan naast elkaar
   op één regel, met de vlag iets kleiner dan de tekst zodat hij het menu niet
   domineert. De vlag krijgt een dun randje: de meeste vlaggen hebben wit aan
   een van de randen en vervagen anders in de achtergrond.
   ========================================================================== */

/* Let op de dubbele klasse plus twee elementen. Kadence zet de menulinks op
   display:block met .header-navigation li.menu-item > a - even specifiek als dit.
   Met een kortere selector wint Kadence en doet de gap niets, waardoor de vlag
   tegen de taalcode aan plakt. Deze vorm werkt in de kop en in de voettekst. */
li.menu-item.nieuwenhuyse-taalwissel > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.nieuwenhuyse-vlag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nieuwenhuyse-vlag img {
  display: block;
  width: 16px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.nieuwenhuyse-taalcode {
  font-size: 0.9em;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   MENU-ITEM "MIJN ACCOUNT"

   Een poppetje voor de tekst, zodat het item herkenbaar is als de plek waar
   je je eigen spullen terugvindt. Het pictogram is een SVG als masker en niet
   als achtergrondafbeelding: daardoor neemt hij de tekstkleur over en
   verkleurt hij vanzelf mee bij hover en in een andere boekkleur.

   Het icoon staat op 1em, dus hij schaalt mee met de menutekst in plaats van
   op een vast aantal pixels te blijven staan.
   ========================================================================== */

li.menu-item.nieuwenhuyse-account > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

li.menu-item.nieuwenhuyse-account > a::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icoon-persoon) center / contain no-repeat;
  mask: var(--icoon-persoon) center / contain no-repeat;
}

:root {
  --icoon-persoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   REGEL OVER DE BEDENKTIJD ONDER DE KOOPKNOP

   Kleine letter, want het is een geruststelling en geen mededeling die om
   aandacht vecht met de knop erboven. Wel ruim genoeg: 0.85em blijft ook op
   een telefoon leesbaar, kleiner dan 14px wordt het niet.

   Gecentreerd onder de knop en met max-width, zodat er bij een brede
   afrekenkolom geen regel van vijftien woorden ontstaat.
   ========================================================================== */

.nieuwenhuyse-bedenktijd {
  margin: 0.75em auto 0;
  max-width: 34em;
  font-size: max(0.85em, 14px);
  line-height: 1.5;
  text-align: center;
  opacity: 0.85;
}

/* ==========================================================================
   "JE BENT INGELOGD ALS ..." OP DE ACCOUNT- EN BESTELLINGENPAGINA

   De uitloglink moet hier opvallen - hij is de reden dat deze regel is
   herschreven. Daarom onderstreept en niet alleen een kleurverschil: wie
   kleuren slecht onderscheidt ziet anders geen link staan.
   ========================================================================== */

.nieuwenhuyse-ingelogd a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}