/*
Theme Name:  Wegwijzer in Ierland
Theme URI:   https://wegwijzer-in-ierland.com
Author:      Codesurf
Author URI:  https://codesurf.nl
Description: Custom thema voor Wegwijzer in Ierland. Nederlandstalige informatiegids voor Nederlanders in Ierland.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     Proprietary
Text Domain: wegwijzer
*/

/* ============================================================
   INHOUDSOPGAVE
   1.  CSS Custom Properties (variabelen)
   2.  Reset & Base
   3.  Typography
   4.  Layout helpers
   5.  Topbar
   6.  Navigatie
   7.  Hero
   8.  Stats bar
   9.  Pillar cards
   10. Article list
   11. Sidebar
   12. Topics section
   13. Archive / categoriepagina
   14. Single artikel
   15. Bedrijvengids
   16. Footer
   17. Widgets
   18. Formulieren
   19. Utilities
   20. Responsive
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   Pas hier kleuren, fonts en spacing aan zonder andere code
   te wijzigen.
   ============================================================ */
:root {

  /* Hoofdkleuren */
  --color-primary:        #2A7A52;   /* Groen — knoppen, links, accenten */
  --color-primary-dark:   #1A4D35;   /* Donkergroen — header, hover */
  --color-primary-mid:    #3DAA72;   /* Midgroen — highlights */
  --color-primary-light:  #E6F4ED;   /* Lichtgroen — achtergronden */
  --color-primary-pale:   #F2FAF6;   /* Bleekgroen — secties */

  /* Accentkleuren */
  --color-accent:         #C4581F;   /* Oranje — CTA zoekknop */
  --color-accent-dark:    #A84719;   /* Donkeroranje — hover */
  --color-gold:           #C8993A;   /* Goud — optioneel accent */

  /* Neutrale kleuren */
  --color-dark:           #1C1C1C;   /* Bijna zwart — hoofdtekst */
  --color-mid:            #555555;   /* Grijs — subtekst */
  --color-muted:          #888888;   /* Lichtgrijs — metadata */
  --color-border:         #DDDDDD;   /* Randkleur */
  --color-stone:          #F7F4F0;   /* Warme achtergrond */
  --color-white:          #FFFFFF;

  /* Tekst op donkere achtergrond */
  --color-text-on-dark:          rgba(255,255,255,1);
  --color-text-on-dark-muted:    rgba(255,255,255,0.75);
  --color-text-on-dark-subtle:   rgba(255,255,255,0.5);

  /* Sociale media */
  --color-facebook:       #1877F2;

  /* ── Typografie ── */
  --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:     'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   22px;
  --font-size-xl:   28px;
  --font-size-2xl:  36px;
  --font-size-3xl:  48px;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.75;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Layout ── */
  --max-width:        1180px;
  --max-width-narrow:  820px;
  --sidebar-width:     320px;
  --content-gap:        48px;

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 6px 28px rgba(26,77,53,0.15);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;

  /* ── Nav ── */
  --nav-height: 68px;
}