/*
Theme Name: Loonbedrijf Van Kleef
Theme URI: https://www.loonbedrijfvankleef.nl/
Description: Child-thema van GeneratePress voor Loonbedrijf Van Kleef, in de huisstijl van Grastotaal (merkboek v2.1). Lettertypes zelf gehost. Kop, menu, kopband en footer komen uit het thema; de pagina-inhoud kan in Elementor (gratis versie, klassieke containers en widgets).
Author: V.O.F. Van Kleef
Template: generatepress
Version: 0.3.9
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: loonbedrijf-vankleef
*/

/* ----------------------------------------------------------------------------
   1. TOKENS — kleuren, lettertypes en vormen uit het merkboek (v2.1)
   Alles hieronder stuurt de rest van de stijl. Pas hier één waarde aan en
   de hele site volgt.
   ------------------------------------------------------------------------- */
:root {
  /* groen */
  --gt-groen-diep:    #2c6a28;   /* werkpaard: knoppen, links, donkere vlakken */
  --gt-groen-diep-hv: #235420;   /* hover / ingedrukt */
  --gt-groen:         #01903A;   /* merkkleur: iconen, grote koppen; geen lopende tekst */
  --gt-groen-helder:  #34BF49;   /* accent: vinkjes, hover; nooit witte tekst erop */

  /* accent */
  --gt-rood:          #C63527;   /* spaarzaam */

  /* neutraal */
  --gt-tekst:         #171a15;
  --gt-tekst-zacht:   #575756;
  --gt-zandwit:       #f5f7f2;
  --gt-wit:           #ffffff;
  --gt-lijn:          #d7ded3;

  /* typografie */
  --gt-font-kop:      'Sora', Arial, Helvetica, sans-serif;
  --gt-font-body:     'IBM Plex Sans', Arial, Helvetica, sans-serif;

  /* vorm */
  --gt-radius:        16px;
  --gt-radius-klein:  8px;
  --gt-radius-knop:   999px;
  --gt-schaduw:       0 2px 8px rgba(23, 26, 21, 0.08);
  --gt-schaduw-hover: 0 6px 18px rgba(23, 26, 21, 0.12);
  --gt-overgang:      180ms ease-out;

  /* maten — zoals staging.grastotaal.nl: .gt-wrap is 1200px met 24px
     zijmarge, dus de tekst staat in een kolom van 1152px (op 1280px breed
     begint hij op 64px van de rand) */
  --gt-breedte:       1200px;
  --gt-zijmarge:      24px;
  --gt-inhoud:        1152px;   /* = breedte - 2 x zijmarge */
  --gt-breedte-tekst: 72ch;
  --gt-band-ruimte:   76px;     /* boven- en onderruimte van een band (56px tablet, 44px telefoon) */

  /* afgeleide kleuren met voldoende contrast (WCAG AA) */
  --gt-groen-opdonker: #b9e8b4;  /* accent op diepgroen: 4,8:1 (heldergroen haalt daar maar 2,7:1) */
  --gt-lijn-veld:      #7f8a7b;  /* rand van invoervelden: 3,6:1 op wit */

  /* de kleurvariabelen van GeneratePress zelf, zodat menu, links en knoppen de huisstijl volgen */
  --accent:     #2c6a28;
  --contrast:   #171a15;
  --contrast-2: #575756;
  --contrast-3: #7f8a7b;
  --base:       #f5f7f2;
  --base-2:     #ffffff;
  --base-3:     #ffffff;
}

/* ----------------------------------------------------------------------------
   2. LETTERTYPES — zelf gehost (woff2 in assets/fonts), geen verzoek naar Google
   Variabele lettertypes van Google Fonts (latin), opgehaald op 21 okt 2026 met
   akkoord van Gerard. Fallback: Arial/Helvetica.
   ------------------------------------------------------------------------- */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/sora-variabel.woff2') format('woff2-variations'), url('assets/fonts/sora-variabel.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/ibm-plex-sans-variabel.woff2') format('woff2-variations'), url('assets/fonts/ibm-plex-sans-variabel.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-sans-400-italic.woff2') format('woff2'); }

/* ----------------------------------------------------------------------------
   3. BASIS — tekst, koppen, links, focus
   ------------------------------------------------------------------------- */
body {
  font-family: var(--gt-font-body);
  color: var(--gt-tekst);
  font-size: 17px;
  line-height: 1.65;
  background: var(--gt-wit);
  -webkit-font-smoothing: antialiased;
}
p { margin-bottom: 1.1em; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gt-font-kop);
  color: var(--gt-tekst);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
  font-weight: 700;
  overflow-wrap: break-word; /* een te lang woord nooit buiten beeld (320 px) */
}
h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; }
h2 { font-size: clamp(24px, 3.0vw, 32px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; color: var(--gt-groen-diep); }
h4 { font-size: 20px; font-weight: 600; }
/* IBM Plex Sans is geladen tot 600: vet is 600, geen kunstmatig vet (Grastotaal 30g) */
body strong, body b { font-weight: 600; }
/* Telefoon: lopende tekst 16px (Grastotaal huisstijl §9) */
@media (max-width: 768px) { body { font-size: 16px; } }
.entry-content > p:first-of-type { font-size: 1.08em; color: var(--gt-tekst-zacht); }
.entry-content strong { color: var(--gt-groen-diep); }
.entry-content p, .entry-content li { max-width: var(--gt-breedte-tekst); }
figcaption, .wp-caption-text, small, .gt-klein { color: var(--gt-tekst-zacht); font-size: 14px; }

.gt-eyebrow {
  font-family: var(--gt-font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gt-groen-diep); display: block; margin-bottom: 8px;
}

.entry-content a, .gt-tekstlink { color: var(--gt-groen-diep); text-decoration: none; transition: color var(--gt-overgang); }
.entry-content a:hover { color: var(--gt-groen-diep-hv); text-decoration: underline; text-decoration-color: var(--gt-rood); text-underline-offset: 3px; }
/* Links in lopende tekst ook zonder kleur herkenbaar (WCAG 1.4.1). Niet voor
   links die op een eigen regel staan en al als link herkenbaar zijn: "Lees meer →"
   in een kaart, de linklijst met pijltjes en de contactkaart (zoals Grastotaal). */
.entry-content :is(p:not(.gt-kaart__link), li:not(.gt-linklijst > li), figcaption) a:not(.wp-block-button__link):not(.gt-knop):not(.gt-contactkaart a) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; border-radius: var(--gt-radius-klein);
}
.gt-donker a:focus-visible, .gt-donker button:focus-visible, .gt-band--groen a:focus-visible,
.gt-topbalk a:focus-visible, .main-navigation.toggled .main-nav ul li a:focus-visible, .gt-footer a:focus-visible, .site-info a:focus-visible { outline-color: var(--gt-wit); }

/* Skiplink "Ga naar de inhoud" (vanaf 0.3.5): wit vlak met diepgroene, onderstreepte
   tekst en een diepgroene ring binnen het vlak. Zo valt hij op de groene topbalk
   (computer) én op de witte kop (telefoon) op; een ring buiten het vlak zou op de
   groene topbalk wegvallen. */
.screen-reader-text:focus, .skip-link:focus {
  background: var(--gt-wit); color: var(--gt-groen-diep);
  padding: 12px 20px; border-radius: var(--gt-radius-klein); z-index: 100000;
  font-family: var(--gt-font-body); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  box-shadow: 0 2px 12px rgba(23, 26, 21, 0.35);
}
.screen-reader-text:focus-visible, .skip-link:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: -6px; }

/* foto's en afronding */
.entry-content img, .wp-block-image img, .gt-foto { border-radius: var(--gt-radius); }
.site-logo img, .custom-logo { border-radius: 0; }

/* Opsommingen met groene vinkjes (Grastotaal: vinkje in grasgroen #01903A,
   4,16:1 op wit; op donker de lichte tint, zie componenten.css) */
.entry-content ul.gt-vinkjes, .gt-vinkjes { list-style: none; padding-left: 0; }
.gt-vinkjes li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.gt-vinkjes li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 0; background: var(--gt-groen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E") center/18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E") center/18px no-repeat; background-color: var(--gt-groen); }

/* ----------------------------------------------------------------------------
   4. KNOPPEN — pilvorm, diepgroen; tekst begint met een werkwoord
   ------------------------------------------------------------------------- */
.gt-knop, .wp-block-button__link, .button, button.wpcf7-submit, input[type="submit"] {
  display: inline-block; background: var(--gt-groen-diep); color: var(--gt-wit);
  border: 0; border-radius: var(--gt-radius-knop); font-family: var(--gt-font-body);
  font-size: 16px; font-weight: 600; line-height: 1.4; padding: 14px 28px;
  box-shadow: var(--gt-schaduw); text-decoration: none; cursor: pointer;
  transition: background-color var(--gt-overgang), transform var(--gt-overgang), box-shadow var(--gt-overgang);
}
/* Grastotaal zet de knoppen (.pro-btn) in Sora 600 (eigen CSS 25a); verstuurknoppen van formulieren blijven IBM Plex Sans */
.gt-knop, .wp-block-button__link, .button { font-family: var(--gt-font-kop); letter-spacing: 0; }
@media (max-width: 768px) {
  .gt-knop:not(.gt-knop--klein), .wp-block-button__link, .button, button.wpcf7-submit, input[type="submit"] { padding: 15px 24px; }
}
.gt-knop:hover, .wp-block-button__link:hover, .button:hover, button.wpcf7-submit:hover, input[type="submit"]:hover {
  background: var(--gt-groen-diep-hv); color: var(--gt-wit); transform: translateY(-2px); box-shadow: var(--gt-schaduw-hover);
}
.gt-knop--2, .is-style-outline .wp-block-button__link { background: transparent; color: var(--gt-groen-diep); border: 2px solid var(--gt-groen-diep); box-shadow: none; }
.gt-knop--2:hover, .is-style-outline .wp-block-button__link:hover { background: var(--gt-groen-diep); color: var(--gt-wit); }
.gt-donker .gt-knop, .gt-band--groen .gt-knop, .gt-donker .wp-block-button__link { background: var(--gt-wit); color: var(--gt-groen-diep); }
.gt-donker .gt-knop:hover, .gt-band--groen .gt-knop:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); }
.gt-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Blokknoppen in de inhoud: GeneratePress zet ze op 10px 20px en de tekstmaat
   van de omgeving (.wp-block-button .wp-block-button__link); hier de maten van
   hierboven en van de Grastotaal-knop (.pro-btn), zoals elementor.css §6. */
.entry-content .wp-block-button__link { padding: 14px 28px; font-size: 16px; line-height: 1.4; }
@media (max-width: 768px) { .entry-content .wp-block-button__link { padding: 15px 24px; } }
.entry-content a.wp-block-button__link:not(.has-background), .wp-block-cover a.wp-block-button__link:not(.has-background) { background-color: var(--gt-groen-diep); color: var(--gt-wit); }
.entry-content a.wp-block-button__link:not(.has-background):hover, .wp-block-cover a.wp-block-button__link:not(.has-background):hover { background-color: var(--gt-groen-diep-hv); color: var(--gt-wit); }
.entry-content .is-style-outline a.wp-block-button__link:not(.has-background), .wp-block-cover .is-style-outline a.wp-block-button__link:not(.has-background) { background-color: transparent; color: var(--gt-groen-diep); border: 2px solid var(--gt-groen-diep); }
.entry-content .is-style-outline a.wp-block-button__link:not(.has-background):hover { background-color: var(--gt-groen-diep); color: var(--gt-wit); }
.gt-donker .is-style-outline a.wp-block-button__link:not(.has-background), .gt-band--groen .is-style-outline a.wp-block-button__link:not(.has-background) { color: var(--gt-wit); border-color: var(--gt-wit); }
.gt-donker .is-style-outline a.wp-block-button__link:not(.has-background):hover { background-color: var(--gt-wit); color: var(--gt-groen-diep); }

/* ----------------------------------------------------------------------------
   5. BEWEGING — respecteer de systeeminstelling van de bezoeker
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .gt-knop:hover, .gt-kaart:hover, .wp-block-button__link:hover { transform: none; }
}

/* De bouwstenen (banden, kaarten, kopband, offerteband, faq, footer, formulieren)
   staan in assets/css/componenten.css en assets/css/formulieren.css. */

/* ----------------------------------------------------------------------------
   6. HEADER — topbalk, logo, menu, offerte-knop, mobiel menu
   ------------------------------------------------------------------------- */
.gt-topbalk { background: var(--gt-groen-diep); color: var(--gt-wit); font-size: 14px; font-weight: 500; }
.gt-topbalk__inhoud { max-width: var(--gt-breedte); margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gt-topbalk a { color: var(--gt-wit); text-decoration: none; }
.gt-topbalk a:hover { color: var(--gt-groen-opdonker); text-decoration: underline; text-underline-offset: 3px; }
.gt-topbalk a { display: inline-block; padding: 8px 0; }
.gt-topbalk__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.gt-topbalk__contact { display: flex; gap: 18px; }
@media (max-width: 1024px) { .gt-topbalk__menu { display: none; } .gt-topbalk__inhoud { justify-content: center; } }

.site-header { background: var(--gt-wit); box-shadow: var(--gt-schaduw); }
.inside-header { padding: 12px 20px 8px; }
.main-navigation .main-nav ul li a { padding-left: 14px; padding-right: 14px; }
.main-navigation .menu-bar-items { margin-left: 6px; }
.main-navigation.has-menu-bar-items .main-nav ul li a { line-height: 56px; }
.lvk-logo { display: flex; align-items: center; }
.lvk-logo a { display: block; line-height: 0; }
.lvk-logo svg { height: 44px; width: auto; display: block; }
@media (max-width: 1024px) { .lvk-logo svg { height: 34px; } }
@media (max-width: 480px) { .lvk-logo svg { height: 30px; } }

.main-navigation a { font-family: var(--gt-font-body); font-weight: 600; font-size: 16px; color: var(--gt-tekst); }
.main-navigation .main-nav ul li a { line-height: 56px; }
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--gt-groen-diep); }
.main-navigation ul ul { background: var(--gt-wit); border-radius: var(--gt-radius); box-shadow: var(--gt-schaduw-hover); padding: 8px 0; }
.main-navigation ul ul li a { line-height: 1.4; padding: 10px 20px; }
.main-navigation .menu-bar-items { display: flex; align-items: center; }
.gt-menu-offerte { display: flex; align-items: center; margin-left: 12px; }
.gt-knop--klein { padding: 10px 20px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.main-navigation .menu-bar-items .gt-menu-offerte a.gt-knop, .main-navigation .menu-bar-item.gt-menu-offerte > a.gt-knop:hover, .main-navigation .menu-bar-item.gt-menu-offerte:hover > a.gt-knop { color: var(--gt-wit); font-weight: 600; background: var(--gt-groen-diep); line-height: 1.4; }
.main-navigation .menu-bar-items .gt-menu-offerte a.gt-knop:hover { background: var(--gt-groen-diep-hv); }
.main-navigation .menu-toggle, .main-navigation .mobile-bar-items a { color: var(--gt-groen-diep); }
@media (max-width: 1024px) {
  .main-navigation.toggled .main-nav > ul { background: var(--gt-groen-diep); border-radius: var(--gt-radius); padding: 8px 0; }
  .main-navigation.toggled .main-nav ul li a { color: var(--gt-wit); line-height: 1.4; padding: 12px 20px; }
  .main-navigation.toggled .main-nav ul ul { background: transparent; box-shadow: none; padding-left: 12px; }
  .gt-menu-offerte { display: none; }
}

/* Mobiele contactbalk onderin (alleen klein scherm) */
.gt-mobielbalk { display: none; }
@media (max-width: 1024px) {
  .gt-mobielbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--gt-wit); box-shadow: 0 -2px 12px rgba(23,26,21,0.12); }
  .gt-mobielbalk__knop { flex: 1; text-align: center; white-space: nowrap; padding: 12px 8px; border-radius: var(--gt-radius-knop); border: 2px solid var(--gt-groen-diep); color: var(--gt-groen-diep); font-weight: 600; text-decoration: none; font-size: 15px; }
  .gt-mobielbalk__knop--primair { background: var(--gt-groen-diep); color: var(--gt-wit); }
  body { padding-bottom: 70px; }
}

/* Knop op de groene offerteband: wit met diepgroene tekst (wint van de kernregel hierboven). */
.entry-content .gt-band--groen a.wp-block-button__link:not(.has-background) { background-color: var(--gt-wit); color: var(--gt-groen-diep); }
.entry-content .gt-band--groen a.wp-block-button__link:not(.has-background):hover { background-color: var(--gt-groen-helder); color: var(--gt-tekst); }

/* ----------------------------------------------------------------------------
   AFDRUKKEN (vanaf 0.3.4)
   Een browser drukt achtergronden en foto-achtergronden niet af: witte tekst op
   de kopband, de hero, de groene banden en de footer werd dan onzichtbaar. Op
   papier daarom zwarte tekst op wit, zonder menu, contactbalk, lopende band,
   video's en de grote foto's achter tekst. Veelgestelde vragen gaan open
   (inc/header.php, beforeprint), zodat ook de antwoorden op papier staan.
   ------------------------------------------------------------------------- */
@media print {
  .gt-topbalk, .site-header .main-navigation, #mobile-menu-control-wrapper, .gt-menu-offerte,
  .gt-mobielbalk, .skip-link, .gt-marquee, .lvk-video, .gt-footer__logo, .gt-footer__iconen,
  .gt-kop-foto, .gt-band--kop-foto::after, .gt-hero::before, .gt-hero::after,
  .wp-block-cover__background, .wp-block-cover__image-background, .gt-hero__foto, .gt-zoekband {
    display: none !important;
  }
  html, body { background: #fff !important; }
  body { color: #000; font-size: 11pt; padding-bottom: 0 !important; }
  .site-header { position: static !important; box-shadow: none !important; border: 0 !important; }
  .gt-band, .gt-band--kop, .gt-hero, .wp-block-cover, .elementor .e-con.gt-hero { min-height: 0 !important; padding-top: 12pt !important; padding-bottom: 12pt !important; background: none !important; }
  .gt-band--kop > .gt-kop-inhoud { padding-top: 0 !important; padding-bottom: 0 !important; }
  .gt-kop-inhoud > .gt-kruimels { position: static; max-width: none; margin-top: 8pt; }
  :is(.gt-donker, .gt-band--groen, .gt-band--kop, .gt-hero, .site-footer, .gt-kruimels > span, .gt-kruimels > p) :is(h1, h2, h3, h4, p, li, a, span, b, strong, address, summary, div) {
    color: #000 !important;
    text-shadow: none !important;
  }
  .gt-kruimels > span, .gt-kruimels > p { background: none !important; box-shadow: none !important; padding: 0 !important; }
  .gt-kaart, .gt-contactkaart, .gt-badge { box-shadow: none !important; border: 1px solid #999 !important; background: #fff !important; }
  .gt-kaart, .gt-contactkaart, .gt-faq__item, .e-n-accordion-item, figure, img { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .gt-knop, .wp-block-button__link, .elementor-button { background: none !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
  a { color: #000 !important; }
  .site-footer, .site-info, .gt-footer { background: none !important; }
}