/*
Theme Name: Internetdiploma
Theme URI: https://internetdiploma.be
Author: Ecom - Pieter De Clerck
Author URI: https://ecom.dog
Description: Licht block theme voor internetdiploma.be. Papier, diepblauw en goud, Cormorant Garamond, geen page builder, geen overbodige scripts.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: internetdiploma
*/

@font-face { font-family: "Cormorant"; src: url("assets/fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/CormorantGaramond-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/CormorantGaramond-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/CormorantGaramond-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ComicNeue"; src: url("assets/fonts/ComicNeue-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pinyon"; src: url("assets/fonts/PinyonScript-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* Zachte papierachtergrond, zoals op het diploma */
body {
  background-image: radial-gradient(circle at 20% 0%, #ffffff 0, transparent 50%), radial-gradient(circle at 100% 100%, var(--wp--preset--color--papier-donker) 0, transparent 45%);
  -webkit-text-size-adjust: 100%;
}

/* Kop van de site */
.id-kop { border-bottom: 1px solid #e3dccb; }
.id-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--wp--preset--color--blauw); }
.id-logo img { width: 44px; height: 44px; display: block; }
.id-logo .id-woord { font-family: var(--wp--preset--font-family--cormorant); font-size: 26px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
.id-logo .id-woord em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--blauw-licht); }
.id-kop .wp-block-site-title a { text-decoration: none; letter-spacing: 0.02em; }
.id-kop .wp-block-navigation a { text-decoration: none; }
.id-kop .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Voet */
.id-voet { border-top: 1px solid #e3dccb; }
.id-voet a { color: var(--wp--preset--color--blauw); }

/* Knoppen: pil, zoals in de quiz */
.wp-block-button .wp-block-button__link, .wc-block-components-button, .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce #respond input#submit {
  font-family: var(--wp--preset--font-family--cormorant);
  font-weight: 600; font-size: 20px; line-height: 1.2; min-height: 56px;
  border-radius: 4px; padding: 14px 26px;
  background: var(--wp--preset--color--blauw); color: #fff; border: 2px solid var(--wp--preset--color--blauw);
}
.wp-block-button .wp-block-button__link:hover, .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--wp--preset--color--blauw-donker); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--blauw); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--papier-donker); }

/* Pagina-inhoud leesbaar houden */
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 68ch; }
.entry-content a { text-underline-offset: 3px; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.entry-content th, .entry-content td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #e3dccb; }
.entry-content th { font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--inkt-zacht); }

/* De quiz zelf krijgt geen titel boven zich en mag breder worden voor het diploma */
.id-examen .entry-content { max-width: none; }

/* 404 */
.id-404 { text-align: center; padding: 10vh 0; }
.id-404 .id-404-cijfer { font-family: var(--wp--preset--font-family--comic-neue); font-size: clamp(80px, 20vw, 160px); line-height: 1; color: var(--wp--preset--color--blauw); margin: 0; }
.id-404 h1 { text-transform: none; letter-spacing: 0; font-size: var(--wp--preset--font-size--kop); }

/* WooCommerce op maat van de rest */
/* Geen winkelmand- en accounticoon in de kop: er is één product en de koopknop staat op de boekpagina */
.wp-block-woocommerce-mini-cart, .wp-block-woocommerce-customer-account, .wc-block-mini-cart { display: none !important; }
.woocommerce div.product p.price, .woocommerce ul.products li.product .price { color: var(--wp--preset--color--blauw); font-weight: 700; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--wp--preset--color--goud); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--wp--preset--color--goud); }