/*
Theme Name: Maanlantaren
Theme URI: https://maanlantaren.nl
Author: Maanlantaren
Description: Antroposofisch geïnspireerd thema voor Maanlantaren.nl
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: maanlantaren
WooCommerce: true
*/

/* ============================================================
   EIGEN FONTS
   ============================================================ */
@font-face {
  font-family: 'BaarZeitgeist';
  src: url('fonts/BaarZeitgeist.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BaarPhilos';
  src: url('fonts/BaarPhilos.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BaarPhilos';
  src: url('fonts/BaarPhilosBold.ttf') format('truetype');
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BaarPhilos';
  src: url('fonts/BaarPhilosItalic.ttf') format('truetype');
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BaarPhilos';
  src: url('fonts/BaarPhilosBoldItalic.ttf') format('truetype');
  font-weight: bold; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BaarGoetheanis';
  src: url('fonts/BaarGoetheanis.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --groen-donker:  #27500A;
  --groen-midden:  #3B6D11;
  --groen-licht:   #639922;
  --groen-zacht:   #C0DD97;
  --groen-pale:    #EAF3DE;
  --amber:         #BA7517;
  --amber-licht:   #FAC775;
  --amber-pale:    #FAEEDA;
  --rood-donker:   #6B1A1A;
  --tekst:         #2a2520;
  --tekst-zacht:   #5a5248;
  --tekst-licht:   #8a8278;
  --rand:          #d8d2c8;
  --achtergrond:   #faf7f2;
  --wit:           #ffffff;
  --radius:        8px;
  --radius-groot:  14px;
  --max-breedte:   1100px;
  --font-display:  'BaarZeitgeist', Georgia, serif;
  --font-kop:      'BaarPhilos', Georgia, serif;
  --font-body:     Georgia, 'Times New Roman', serif;
}

/* ============================================================
   BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--achtergrond);
  color: var(--tekst);
  font-size: 17px;
  line-height: 1.75;
}

a { color: var(--groen-midden); text-decoration: none; }
a:hover { color: var(--groen-donker); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: normal;
  line-height: 1.25;
  color: var(--tekst);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.site-wrapper { max-width: var(--max-breedte); margin: 0 auto; padding: 0 1.5rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: var(--groen-donker);
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 3px solid var(--amber);
}

.header-inner {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-logo-img {
  height: 52px;
  width: auto;
  border-radius: 50%;
  border: 2px solid var(--amber);
  object-fit: cover;
}
.site-logo-tekst {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--amber-licht);
  letter-spacing: 0.02em;
  line-height: 1;
}
.site-logo-link:hover .site-logo-tekst { color: #fff; text-decoration: none; }

.hoofd-navigatie ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 1.75rem;
}
.hoofd-navigatie a {
  font-family: var(--font-kop);
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  transition: color 0.15s;
  letter-spacing: 0.01em;
}
.hoofd-navigatie a:hover,
.hoofd-navigatie .current-menu-item a,
.hoofd-navigatie .current-menu-ancestor a {
  color: var(--amber-licht);
  text-decoration: none;
}

.mobiel-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}

/* ============================================================
   HERO
   ============================================================ */
.ml-hero {
  background: var(--groen-pale);
  border-bottom: 1px solid var(--groen-zacht);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ml-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(192,221,151,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.ml-hero h1 {
  font-family: var(--font-kop);
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--groen-donker);
  max-width: 620px;
  margin: 0 auto 1rem;
  font-weight: normal;
}
.ml-hero p {
  font-size: 18px;
  color: var(--groen-midden);
  max-width: 500px;
  margin: 0 auto 1.75rem;
  font-style: italic;
}
.hero-knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   KNOPPEN
   ============================================================ */
.knop {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--radius);
  font-family: var(--font-kop);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid var(--groen-midden);
  letter-spacing: 0.02em;
}
.knop-primair { background: var(--groen-midden); color: var(--wit); }
.knop-primair:hover { background: var(--groen-donker); border-color: var(--groen-donker); color: var(--wit); text-decoration: none; }
.knop-secundair { background: transparent; color: var(--groen-donker); }
.knop-secundair:hover { background: var(--groen-zacht); text-decoration: none; }

/* ============================================================
   SECTIES
   ============================================================ */
.ml-sectie { padding: 2.5rem 0; }
.ml-sectie-titel {
  font-family: var(--font-kop);
  font-size: 24px;
  font-weight: normal;
  color: var(--tekst);
  margin-bottom: 0.2rem;
}
.ml-sectie-subtitel { font-size: 14px; color: var(--tekst-licht); margin-bottom: 1.5rem; font-style: italic; }
.ml-scheider { border: none; border-top: 1px solid var(--rand); margin: 0; }

/* ============================================================
   CATEGORIEKAARTEN
   ============================================================ */
.categorieen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}
.categorie-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  padding: 1.25rem 1rem;
  text-align: center;
  display: block;
  color: var(--tekst);
  transition: border-color 0.15s, transform 0.15s;
}
.categorie-kaart:hover {
  border-color: var(--groen-licht);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--tekst);
}
.cat-icoon { font-size: 30px; margin-bottom: 8px; }
.cat-naam { font-family: var(--font-kop); font-size: 14px; }
.cat-aantal { font-size: 12px; color: var(--tekst-licht); margin-top: 3px; font-style: italic; }

/* ============================================================
   WOOCOMMERCE PRODUCT CARDS
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(59,109,17,0.1);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 0;
  margin: 0 !important;
}

/* Placeholder als geen afbeelding */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-kop) !important;
  font-size: 15px !important;
  font-weight: normal !important;
  padding: 0.75rem 0.875rem 0.25rem !important;
  color: var(--tekst) !important;
  line-height: 1.35 !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-kop) !important;
  font-size: 16px !important;
  color: var(--groen-donker) !important;
  padding: 0 0.875rem !important;
  font-weight: normal !important;
}

.woocommerce ul.products li.product .button {
  margin: auto 0.875rem 0.875rem !important;
  display: block !important;
  text-align: center !important;
  background: #0000a4 !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-kop) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border: none !important;
  transition: background 0.15s !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .button:hover {
  background: #00008c !important;
  color: #fff !important;
}

/* Badge / onsale */
.woocommerce ul.products li.product .onsale {
  background: var(--amber-pale) !important;
  color: var(--amber) !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  border: 1px solid var(--amber-licht) !important;
  font-family: var(--font-kop) !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 3px 10px !important;
  line-height: 1.6 !important;
  top: 10px !important;
  left: 10px !important;
}

/* Enkelvoudige productpagina */
.woocommerce div.product .product_title {
  font-family: var(--font-kop) !important;
  font-weight: normal !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  color: var(--tekst) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--groen-donker) !important;
  font-family: var(--font-kop) !important;
  font-size: 24px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--tekst-zacht) !important;
  font-style: italic;
}
.woocommerce a.button.product_type_external,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #0000a4 !important;
  color: #fff !important;
  font-family: var(--font-kop) !important;
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #00008c !important;
  color: #fff !important;
}

/* Tabs op productpagina */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-kop) !important;
  color: var(--tekst-zacht) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--groen-donker) !important;
}

/* Shop pagina titel */
.woocommerce-products-header__title,
.woocommerce-page h1.page-title {
  font-family: var(--font-kop) !important;
  font-weight: normal !important;
  color: var(--groen-donker) !important;
}

/* Breadcrumb WooCommerce */
.woocommerce .woocommerce-breadcrumb {
  font-size: 13px !important;
  color: var(--tekst-licht) !important;
  font-style: italic;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--tekst-licht) !important; }

/* ============================================================
   OVER ONS BAND
   ============================================================ */
.over-band {
  background: var(--amber-pale);
  border-top: 1px solid var(--amber-licht);
  border-bottom: 1px solid var(--amber-licht);
  padding: 3rem 1.5rem;
  text-align: center;
}
.over-band h2 {
  font-family: var(--font-kop);
  font-size: 24px;
  font-weight: normal;
  color: var(--amber);
  margin-bottom: 0.75rem;
}
.over-band p { font-size: 16px; color: var(--tekst-zacht); max-width: 560px; margin: 0 auto; font-style: italic; }

/* ============================================================
   DISCLAIMER
   ============================================================ */
.ml-disclaimer {
  background: var(--wit);
  border-top: 1px solid var(--rand);
  padding: 1rem 1.5rem;
  font-size: 11px;
  color: var(--tekst-licht);
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--groen-donker);
  color: rgba(255,255,255,0.7);
  padding: 2.5rem 1.5rem;
}
.footer-inner {
  max-width: var(--max-breedte);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--amber-licht);
  margin-bottom: 0.4rem;
}
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.45); font-style: italic; }
.footer-nav { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.footer-nav a { font-family: var(--font-kop); font-size: 13px; color: rgba(255,255,255,0.6); }
.footer-nav a:hover { color: var(--amber-licht); text-decoration: none; }
.footer-copy {
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* ============================================================
   REGULIERE PAGINA'S
   ============================================================ */
.pagina-inhoud {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  padding: 1.75rem 2rem;
  font-size: 16px;
  color: var(--tekst-zacht);
  line-height: 1.8;
  max-width: 720px;
}
.pagina-inhoud h2 {
  font-size: 20px;
  margin: 1.5rem 0 0.5rem;
  color: var(--groen-donker);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { text-align: left; }
}
@media (max-width: 640px) {
  .hoofd-navigatie { display: none; }
  .hoofd-navigatie.open {
    display: block;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--groen-donker);
    border-bottom: 2px solid var(--amber);
    padding: 1rem 1.5rem;
    z-index: 199;
  }
  .hoofd-navigatie.open ul { flex-direction: column; gap: 1rem; }
  .mobiel-toggle { display: block; }
  .ml-hero { padding: 2.5rem 1rem; }
  .categorieen-grid { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}