/* Custom CSS v3.5 - Laatste update: 2026-03-13 */

/* ============================================================
   INSTELBARE VARIABELEN
   Pas deze twee waarden aan als de layout niet klopt:
   --nav-hoogte   : totale zichtbare hoogte van de menubalk
   --hero-max     : gewenste hero-hoogte op grote schermen
   ============================================================ */
:root {
  --nav-hoogte: 90px;   /* Foundation topbar 65px + hr + schaduw/marge */
  --hero-max:   941px;  /* Originele hero-hoogte (geldt als er genoeg ruimte is) */
}
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

/* === HOME-PAGE TITEL ALTIJD CENTER === */
body.home .page-title {
  text-align: center !important;
}

/* Sticky navigation menu - alleen op desktop (>1024px) */
@media only screen and (min-width: 1025px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}

/* Fix overflow that blocks sticky */
@media only screen and (min-width: 1025px) {
  .top-bar {
    overflow: visible;
  }
  
  .site-header .stick {
    overflow: visible;
  }
}

/* Mobiel: menu standaard ingeklapt */
@media only screen and (max-width: 1024px) {
  .top-bar-section {
    display: none;
  }
  
  .top-bar-section.expanded {
    display: block;
  }
}

/* Hamburger menu kleuren - MOBIEL */
@media only screen and (max-width: 1024px) {
  /* Standaard: witte "Menu" tekst */
  .toggle-topbar.menu-icon a span::after {
    color: #ffffff !important;
  }
  
  /* Wanneer menu open is: zwarte "Menu" tekst */
  .top-bar.expanded .toggle-topbar.menu-icon a span::after {
    color: #000000 !important;
  }
  
  /* Ook de hamburger icoon zelf wit maken standaard */
  .toggle-topbar.menu-icon a {
    color: #ffffff !important;
  }
  
  /* En zwart wanneer menu open is */
  .top-bar.expanded .toggle-topbar.menu-icon a {
    color: #000000 !important;
  }
}

/* Home-page items mobiel: full width onder elkaar */
@media only screen and (max-width: 1024px) {
  .featured-posts .row {
    display: block !important;
  }
  
  .featured-posts .large-4.columns {
    width: 100% !important;
    display: block !important;
    margin-bottom: 2rem;
  }
  
  .featured-posts article {
    width: 100% !important;
  }
  
  /* Featured posts titels ALTIJD links uitlijnen op mobiel */
  .featured-posts .entry-header,
  .featured-posts .entry-title,
  .featured-posts h2,
  .featured-posts h3 {
    text-align: left !important;
  }
  
  /* Logo op HOME-PAGE mobiel: 90% van container breedte met padding */
  .home-header-bg .site-branding {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 90% !important;
  }
  
  .home-header-bg .site-branding img.logo {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* Logo op SUB-PAGINA's mobiel: 60% van origineel, links uitlijnen met marge */
  .bg-image-header .site-branding {
    margin-left: 15px !important; /* Marge van de linkerrand */
    margin-right: auto !important;
    display: block !important;
    text-align: left !important;
  }

  .bg-image-header .site-branding img.logo {
    max-width: 40% !important;
    height: auto !important;
  }
  
  /* SUB-PAGINA's: alle titels links uitlijnen op mobiel */
  .entry-header,
  .entry-title,
  h1, h2, h3, h4, h5, h6 {
    text-align: left !important;
  }
  
  /* Footer widget titles altijd center */
  .footer-wrap .widget-title {
    text-align: center !important;
  }
}

#page {
  overflow: visible;
}

/* Hero header: slim gecombineerde hoogte
   - Op grote schermen (viewport > ~1031px) geldt de originele --hero-max (941px).
   - Op kleinere schermen krimpt de hero mee tot viewport - --nav-hoogte,
     zodat het menu en logo altijd zichtbaar blijven.
   - min() kiest automatisch de kleinste van de twee waarden.
   - Pas --nav-hoogte en --hero-max bovenaan dit bestand aan indien nodig.   */
.home-header-bg {
  height: min(var(--hero-max), calc(100vh - var(--nav-hoogte)));
  min-height: 350px; /* Absolute ondergrens voor heel kleine schermen */
}

/* === TYPOGRAPHY === */
/* Koppen: Playfair Display */
h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.entry-title,
.home-hero h1 {
  font-family: 'Playfair Display', serif !important;
}

/* Tekst: Lato */
body {
  font-family: 'Lato', sans-serif !important;
}

p,
.entry-content,
.button,
button,
input,
select,
textarea,
.top-bar-section ul li > a {
  font-family: 'Lato', sans-serif !important;
}

/* === KLEUREN === */
/* Primaire kleur - donkerbruin #73462b */
a {
  color: #73462b;
}

a:hover,
a:focus {
  color: #af8028;
}

/* === MENU STYLING === */
.top-bar {
  background-color: #af8028 !important;
}

/* Override app.css witte achtergronden */
.top-bar-section ul li {
  background: #af8028 !important; /* Override white background */
}

.top-bar-section li:not(.has-form) a:not(.button) {
  background-color: #af8028 !important;
  color: #ffffff !important;
}

/* Menu styling met barrel shape - ALLEEN DESKTOP */
@media only screen and (min-width: 1025px) {
  .top-bar-section ul li {
    margin: 0 15px !important; /* 30px totale ruimte tussen items (2x15px) */
  }
  
  .top-bar-section ul li:first-child {
    margin-left: 0 !important;
  }
  
  .top-bar-section ul li:not(.has-form) > a {
    border-radius: 8px / 32.5px !important; /* Barrel shape: hoogte 65px, perfecte curve zijkanten */
  }
  
  .top-bar-section ul li:hover:not(.has-form) > a,
  .top-bar-section li.active:not(.has-form) a:not(.button) {
    background-color: #73462b !important;
  }
}

/* Menu op mobiel - GEEN barrel shape */
@media only screen and (max-width: 1024px) {
  .top-bar-section ul li:hover:not(.has-form) > a {
    background-color: #73462b !important;
  }
}

/* === KNOPPEN MET BARREL SHAPE - accent kleur #af8028 === */
.button,
button,
input[type="submit"],
input[type="button"] {
  background-color: #af8028 !important;
  border-color: #af8028 !important;
  color: #ffffff !important;
  border-radius: 8px / 26px !important; /* Barrel shape: vlakke boven/onder, gebogen zijkanten */
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #73462b !important;
  border-color: #73462b !important;
  color: #ffffff !important;
}

/* Formulier submit button met barrel shape - extra specifiek */
form button[type="submit"],
form input[type="submit"],
.grav-form button[type="submit"],
.grav-form input[type="submit"] {
  background-color: #af8028 !important;
  border-color: #af8028 !important;
  color: #ffffff !important;
  border-radius: 8px / 26px !important;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
.grav-form button[type="submit"]:hover,
.grav-form input[type="submit"]:hover {
  background-color: #73462b !important;
  border-color: #73462b !important;
  color: #ffffff !important;
}

/* Headers en titels */
h1, h2, h3 {
  color: #73462b;
}

/* Footer */
.footer-wrap {
  background-color: #847c5f !important;
  color: #fff !important;
}

.footer-wrap a {
  color: #fff;
}

.footer-wrap a:hover {
  color: #af8028;
}

/* Blockquotes */
blockquote {
  border-left-color: #af8028;
  background-color: rgba(132, 124, 95, 0.1);
}

/* Featured posts home */
.featured-posts .entry-title a {
  color: #73462b;
}

.featured-posts .entry-title a:hover {
  color: #af8028;
}

/* Widget titles */
.widget-title {
  color: #73462b;
  border-bottom-color: #847c5f;
}

/* Links in content */
.entry-content a {
  color: #af8028;
  text-decoration: underline;
}

.entry-content a:hover {
  color: #73462b;
}

/* Knoppen in content met barrel shape - OVERRIDE voor witte tekst */
.entry-content a.button,
.entry-content a.button:hover,
.entry-content a.button:focus,
.entry-content a.button:visited {
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 8px / 26px !important;
}

/* Menu active state */
.top-bar-section li.active:not(.has-form) a:not(.button) {
  background-color: #af8028;
}

/* Social icons */
.textwidget a[href*="facebook"],
.textwidget a[href*="instagram"],
.textwidget a[href*="twitter"] {
  color: #73462b;
  font-size: 1.5em;
  margin-right: 10px;
}

.textwidget a[href*="facebook"]:hover,
.textwidget a[href*="instagram"]:hover,
.textwidget a[href*="twitter"]:hover {
  color: #af8028;
}

/* === FOOTER COMPACTER === */
.footer-wrap .site-footer {
  padding-top: 0.6em !important;
  padding-bottom: 0 !important;
}

.footer-wrap .widget {
  margin-bottom: 0.5em !important;
}

.footer-wrap .widget-title {
  margin-bottom: 0.3em !important;
}

.footer-wrap .textwidget p {
  margin-bottom: 0.3em !important;
}

.footer-wrap .site-info {
  padding-top: 0.3em !important;
  padding-bottom: 0.3em !important;
}

.footer-wrap .row .columns {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === IMAGE STYLING === */
/* Alle images in content krijgen barrel shape en border */
.entry-content img {
  border-radius: 20px / 65px !important; /* Barrel shape: geschaald voor grotere afbeeldingen */
  border: 3px solid #af8028 !important;
  max-width: 100%;
  height: auto;
  padding: 0 !important;
}

/* Standaard images zonder size class: geen margin */
.entry-content img:not([class*="size-"]) {
  margin: 0 !important;
}

/* Uitzonderingen: geen border/radius */
.featured-posts img,
.home .featured-image,
.entry-title img,
article .entry-title img {
  border-radius: 0 !important;
  border: none !important;
}

/* Image sizing classes met gap */
.entry-content img.size-25 { width: calc(25% - 0.75em); height: auto; display: inline-block; margin-right: 1em; vertical-align: top; }
.entry-content img.size-25:nth-child(4n) { margin-right: 0; } /* Elke 4e: geen marge rechts */

.entry-content img.size-33 { width: calc(33.333% - 0.667em); height: auto; display: inline-block; margin-right: 1em; vertical-align: top; }
.entry-content img.size-33:nth-child(3n) { margin-right: 0; } /* Elke 3e: geen marge rechts */

.entry-content img.size-50 { width: calc(50% - 0.5em); height: auto; display: inline-block; margin-right: 1em; vertical-align: top; }
.entry-content img.size-50:nth-child(2n) { margin-right: 0; } /* Elke 2e: geen marge rechts */

.entry-content img.size-75 { width: 75%; height: auto; }

/* Mobiel: kolommen worden 100% */
@media only screen and (max-width: 640px) {
  .entry-content img.size-25,
  .entry-content img.size-33,
  .entry-content img.size-50 {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1em;
    margin-right: 0 !important;
  }
}

/* === COPYRIGHT STYLING === */
/* Niet cursief maken en altijd center */
.footer-wrap .site-info,
.footer-wrap .site-info p {
  font-style: normal !important;
  text-align: center !important;
}

/* Mobiel: linkjes onder elkaar */
@media only screen and (max-width: 640px) {
  .footer-wrap .site-info p {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5em !important;
  }
  
  .footer-wrap .site-info p a {
    display: block !important;
  }
  
  /* Verberg | tekens op mobiel */
  .footer-wrap .site-info .separator {
    display: none !important;
  }
}

/* ============================================================
   TABEL STYLING - Blend met beige achtergrond #E8DDCB
   Update: 2026-03-23
   ============================================================ */

/* Basis tabel styling - warme beige blend */
.entry-content table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: separate;
  border-spacing: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Subtiel wit over beige */
  border: 1px solid rgba(132, 124, 95, 0.25); /* Secundaire kleur border */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(115, 70, 43, 0.08);
}

/* Tabel headers - warme secundaire tint */
.entry-content table thead th,
.entry-content table th {
  background-color: rgba(132, 124, 95, 0.15); /* Secundaire kleur #847c5f */
  color: #73462b;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600;
  font-size: 0.95em;
  text-align: left;
  padding: 0.9em 1em;
  border-bottom: 2px solid rgba(175, 128, 40, 0.25); /* Accent kleur */
}

/* Tabel cellen */
.entry-content table td {
  padding: 0.8em 1em;
  border-bottom: 1px solid rgba(132, 124, 95, 0.15);
  color: #161711;
  font-family: 'Lato', sans-serif !important;
}

/* Laatste rij: geen border onderaan */
.entry-content table tbody tr:last-child td {
  border-bottom: none;
}

/* Hover effect - warme gouden highlight */
.entry-content table tbody tr {
  transition: background-color 0.2s ease;
}

.entry-content table tbody tr:hover {
  background-color: rgba(175, 128, 40, 0.08); /* Accent kleur hover */
}

/* Gestreepte rijen - zeer subtiel beige */
.entry-content table tbody tr:nth-child(even) {
  background-color: rgba(232, 221, 203, 0.3); /* Achtergrond kleur */
}

.entry-content table tbody tr:nth-child(even):hover {
  background-color: rgba(175, 128, 40, 0.12);
}

/* Prijs kolommen: rechts uitlijnen */
.entry-content table td:nth-child(3),
.entry-content table td:nth-child(4),
.entry-content table th:nth-child(3),
.entry-content table th:nth-child(4) {
  text-align: right;
  font-weight: 500;
}

/* Vet voor prijs bedragen - primaire kleur */
.entry-content table td:nth-child(3),
.entry-content table td:nth-child(4) {
  color: #73462b;
  font-weight: 600;
}

/* Eerste kolom: prominenter */
.entry-content table td:first-child {
  font-weight: 500;
  color: #73462b;
}

/* Responsief op mobiel */
@media only screen and (max-width: 640px) {
  .entry-content table {
    font-size: 0.9em;
    border-radius: 5px;
  }
  
  .entry-content table th,
  .entry-content table td {
    padding: 0.7em 0.6em;
  }
  
  /* Maak tabel scrollbaar op kleine schermen */
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet grootte */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .entry-content table {
    font-size: 0.95em;
  }
}