/*
Theme Name: Path Consultancy Child
Template: astra
Description: Child-thema voor de restyle van pathconsultancy.nl — navy + mint-groen huisstijl,
  gebaseerd op de goedgekeurde homepage-mockup (sessie 1, augustus 2026). Overschrijft alleen
  opmaak; de rekentool, formulieren en Elementor-content blijven functioneel ongemoeid.
Author: Path Consultancy IT
Version: 1.0.0
*/

/* ==========================================================================
   Tokens — zelfde palet als de mockup. Elementor Global Colors/Fonts krijgen
   deze waarden ook handmatig in wp-admin; deze custom properties zijn het
   houvast voor alle CSS die buiten Elementor's eigen systeem valt.
   ========================================================================== */
:root{
  --pc-ink:#16273A;          /* navy — primaire tekst, donkere secties */
  --pc-ink-soft:#3B4C5D;
  --pc-muted:#54646C;
  --pc-line:#D9E3E0;
  --pc-paper:#F3F6F5;        /* koele, groen-getinte off-white */
  --pc-surface:#FFFFFF;
  --pc-surface-2:#E9F0EE;

  --pc-band:#16273A;         /* donkere-sectie-achtergrond (zelfde als ink) */
  --pc-band-ink:#EAF2EF;
  --pc-band-muted:#9BB2AC;
  --pc-band-line:#2C3E4B;

  --pc-accent:#2FB48C;       /* mint-groen — CTA's, links, accenten */
  --pc-accent-strong:#238D6D;
  --pc-accent-ink:#177355;   /* mint-tekst op licht: voldoende contrast */
  --pc-on-accent:#04231B;    /* tekst op een mint-vlak */

  --pc-ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pc-ff-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pc-ff-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
}

/* Dark-mode: alleen relevant zodra secties/kaarten expliciet op donker draaien
   (data-theme achtige aanpak past niet direct binnen WP/Elementor — dit blok
   is voorbereid maar wordt pas actief als we een donker sectie-type inbouwen). */

/* ==========================================================================
   Basistypografie — overschrijft Astra's defaults zonder Elementor's eigen
   Global Fonts te dupliceren. Kopjes/koppen krijgen Archivo, body IBM Plex Sans.
   ========================================================================== */
body{
  font-family:var(--pc-ff-body);
  color:var(--pc-ink);
  background:var(--pc-paper);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--pc-ff-display);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--pc-ink);
}
a{ color:var(--pc-accent-ink); }
a:hover{ color:var(--pc-accent-strong); }

/* Cijfers, tarieven, percentages consequent in mono — sluit aan bij de
   "we laten de echte cijfers zien"-lijn uit de mockup. Toepassen via de
   klasse .pc-figure op het element (Elementor: custom CSS-klasse per widget). */
.pc-figure{
  font-family:var(--pc-ff-mono);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Knoppen — mint als primaire actiekleur, in lijn met de mockup.
   Astra/Elementor-knoppen gebruiken vaak eigen klassen; deze regels raken de
   meest voorkomende selectors. Definitieve afstemming volgt zodra de echte
   Elementor-templates zichtbaar zijn.
   ========================================================================== */
.ast-button,
button.elementor-button,
a.elementor-button,
.wp-block-button__link{
  background:var(--pc-accent);
  border-color:var(--pc-accent);
  color:var(--pc-on-accent);
  font-family:var(--pc-ff-body);
  font-weight:600;
  border-radius:10px;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.ast-button:hover,
button.elementor-button:hover,
a.elementor-button:hover,
.wp-block-button__link:hover{
  background:var(--pc-accent-strong);
  border-color:var(--pc-accent-strong);
  color:var(--pc-on-accent);
  transform:translateY(-1px);
}

/* ==========================================================================
   Header/menu — navy tekst, mint bij hover/actief.
   ========================================================================== */
.main-header-bar,
.ast-primary-header-bar{
  background:var(--pc-surface);
}
.main-header-menu > .menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-item > .menu-link{
  color:var(--pc-ink);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu .menu-item.current-menu-item > .menu-link{
  color:var(--pc-accent-ink);
}

/* ==========================================================================
   Footer — donkere navy band met mint-accenten, zoals de mockup.
   ========================================================================== */
.ast-small-footer,
footer.site-footer{
  background:var(--pc-band);
  color:var(--pc-band-ink);
}
.ast-small-footer a,
footer.site-footer a{
  color:var(--pc-band-ink);
}
.ast-small-footer a:hover,
footer.site-footer a:hover{
  color:var(--pc-accent);
}