/* ------------------------------------------------------------------
   assets/thema.css – fallback styling + kleurenschema + typografie
   ------------------------------------------------------------------*/

/* 1) (Optioneel) Fonts importeren – haal weg als je ze via PHP enqueue’t */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* KLEUREN */
  --clr-accent:        #C77F65;   /* accent */
  --clr-link:          #046BD2;   /* link normaal */
  --clr-link-hover:    #045CB4;   /* link hover */
  --clr-heading:       #C67E50;   /* h1‑h6 */
  --clr-body:          #3E4A52;   /* bodytekst */
  --clr-border:        #C67E50;   /* randen */
  --clr-site-bg:       #E8D8C3;   /* volledige site achtergrond */
  --clr-content-bg:    #f4f3f3;   /* achtergrond van content/kaarten */

  /* LAYOUT / EFFECTS */
  --thema-gap:         1rem;
  --thema-radius:      8px;
  --thema-shadow:      0 2px 6px rgba(0,0,0,0.12);
  --thema-shadow-hov:  0 4px 12px rgba(0,0,0,0.18);
  --thema-trans:       .2s ease-in-out;
}

/* -------------------------------------------------------------
   TYPOGRAFIE & BODY
   -------------------------------------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  background: var(--clr-site-bg);
  color: var(--clr-body);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Londrina Solid", cursive;
  font-weight: inherit;
  color: var(--clr-heading);
  line-height: 1.2;
  margin-top: 0;
}

/* Specifieke groottes per heading */
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

/* Titel ~1 cm naar beneden én ruimte onder de titel */
.thema-single header h1 {
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Extra zekerheid voor de intro direct na de titel */
.thema-single header h1 + p {
  margin-top: 0;  /* voorkomt dubbele spacing */
}

/* Links */
a {
  color: var(--clr-link);
  text-decoration: none;
  transition: color var(--thema-trans);
}
a:hover,
a:focus {
  color: var(--clr-link-hover);
}

/* -------------------------------------------------------------
   CONTAINER / CONTENT BACKGROUND
   -------------------------------------------------------------*/
.content-bg,
.thema-single,
.wimade-content,
.site-content {
  background: var(--clr-content-bg);
  padding: 1rem;
  border-radius: var(--thema-radius);
}

/* -------------------------------------------------------------
   GRID LAYOUTS
   -------------------------------------------------------------*/
.wimade-thema-grid,
.thema-grid,
.thema-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--thema-gap);
}

/* Kolom-utils voor shortcode/grids (desktop) */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) {
  .wimade-thema-grid,
  .thema-grid,
  .thema-gallery {
    grid-template-columns: repeat(3, 1fr); /* default 3 kolommen */
  }
}

/* -------------------------------------------------------------
   CARDS / ITEMS
   -------------------------------------------------------------*/
.wimade-thema-item,
.thema-item,
.thema-gallery__item {
  background: var(--clr-content-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--thema-radius);
  overflow: hidden;
  box-shadow: var(--thema-shadow);
  display: block;
  color: var(--clr-body);
  transition: box-shadow var(--thema-trans), transform var(--thema-trans);
}

.wimade-thema-item:hover,
.thema-item:hover,
.thema-gallery__item:hover {
  box-shadow: var(--thema-shadow-hov);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   IMAGES
   -------------------------------------------------------------*/
.thema-gallery__img,
.wimade-thema-thumb img,
.thema-item img,
.thema-gallery img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--thema-trans);
}

.thema-gallery__item:hover .thema-gallery__img {
  transform: scale(1.03);
}

/* -------------------------------------------------------------
   TITELS & TEKST IN CARDS
   -------------------------------------------------------------*/
.wimade-thema-title,
.thema-item h2,
.thema-item__title {
  text-align: center;
  margin: 0.5rem 0;
  font-size: 1.1rem;
  color: var(--clr-heading);
}

.wimade-thema-excerpt,
.thema-item p,
.thema-item__excerpt {
  color: var(--clr-body);
  opacity: 0.85;
  text-align: center;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

/* -------------------------------------------------------------
   INTRO-TEKST OP SINGLE
   -------------------------------------------------------------*/
.thema-single .intro-text {
  font-size: 1.1rem;
  color: var(--clr-body);
  opacity: 0.9;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* -------------------------------------------------------------
   RESPONSIVE TWEAKS
   -------------------------------------------------------------*/
@media (max-width: 480px) {
  .wimade-thema-title,
  .thema-item h2 { font-size: 1rem; }

  .wimade-thema-excerpt,
  .thema-item p { font-size: 0.85rem; }
}

/* -------------------------------------------------------------
   Thumbnail onderschrift (optioneel)
   -------------------------------------------------------------*/
.thema-photo-name {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--clr-heading);
  text-align: center;
}

/* -------------------------------------------------------------
   Galerie-caption (optioneel, op detailpagina)
   -------------------------------------------------------------*/
.thema-gallery__caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--clr-heading);
  text-align: center;
}