/* =============================================================
   LEARNLLM.NL — BLOG.CSS
   Wordt ALLEEN geladen op: single posts, blog-archief.
   Laden via functions.php met is_single() || is_home() || is_archive()
   ============================================================= */


/* -----------------------------------------------------------------
   1. BLOG-KAARTEN (WordPress standaard + blokken)
----------------------------------------------------------------- */
.blog-card,
.tutor-starter-post-card,
.wp-block-latest-posts.is-grid li {
  background-color: var(--white) !important;
  border-radius: var(--radius-blog) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.03) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px !important;
}
.blog-card:hover,
.wp-block-latest-posts.is-grid li:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(78,107,255,.10) !important;
}

.blog-thumb, .post-thumbnail, .wp-block-latest-posts__featured-image {
  height: 220px !important;
  background-color: #E2E8F0;
  position: relative;
  overflow: hidden;
  margin: 0 !important;
}
.blog-thumb img, .post-thumbnail img, .wp-block-latest-posts__featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.blog-card .blog-content,
.tutor-starter-post-card .blog-content {
  padding: 25px !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-title, .entry-title, .wp-block-latest-posts__list-item a {
  font-size: 1.25rem !important;
  margin-bottom: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  display: block;
}
.blog-title a:hover, .entry-title a:hover, .wp-block-latest-posts__list-item a:hover {
  color: var(--human-coral) !important;
}

.read-more-link, .more-link {
  color: var(--ai-blue) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: .9rem !important;
  margin-top: auto;
  display: inline-block;
}


/* -----------------------------------------------------------------
   2. BLOG SINGLE (artikelpagina)
----------------------------------------------------------------- */
.blog-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
.blog-sidebar-inner { border-radius: 16px; }

.blog-title { margin: 0 0 14px; line-height: 1.05; font-size: clamp(2rem, 2.4vw, 2.6rem); }

.blog-meta { margin: 0 0 18px; opacity: 0.9; }
.blog-meta-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 6px; }
.blog-author { font-weight: 700; text-decoration: none; color: inherit; }
.blog-meta-dot { opacity: 0.5; }

.blog-single .elementor-post-info { margin: 0 0 8px !important; font-size: 14px; line-height: 1.45; }
.blog-single .elementor-post-info__item--type-date a { pointer-events: none; cursor: default; text-decoration: none; color: inherit; }

#js-reading-time { display: inline-block; margin: 6px 0 12px; color: rgba(0,0,0,0.72); font-size: 14px; }


/* -----------------------------------------------------------------
   3. DEEL-ICONEN
   Merkkleur per platform via href-attribuut. Witte letter.
----------------------------------------------------------------- */
.blog-share { margin: 18px 0; }
.blog-share-title { margin: 0 0 10px; font-weight: 700; opacity: 0.9; }
.blog-share-icons { display: flex; gap: 10px; flex-wrap: wrap; }

.share-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  border: none !important;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: #ffffff !important;
  transition: transform .12s ease, opacity .12s ease;
  opacity: 0.85;
}

.share-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.share-icon[aria-label*="Facebook"],
.share-icon[href*="facebook"] { background: #1877F2 !important; }

.share-icon[aria-label*="Twitter"],
.share-icon[href*="twitter"],
.share-icon[href*="x.com"] { background: #000000 !important; }

/* X specifiek — kortste letter, donker achtergrond */
.share-icon[aria-label="Deel op X"],
.share-icon[aria-label="X"] { background: #000000 !important; }

.share-icon[aria-label*="LinkedIn"],
.share-icon[href*="linkedin"] { background: #0A66C2 !important; }

.share-icon[aria-label*="WhatsApp"],
.share-icon[aria-label*="Whatsapp"],
.share-icon[href*="whatsapp"],
.share-icon[href*="wa.me"] { background: #25D366 !important; }

.share-icon[aria-label*="mail"],
.share-icon[aria-label*="Mail"],
.share-icon[href^="mailto"] { background: #2D3436 !important; }

/* Fallback */
.share-icon:not([href*="facebook"]):not([href*="twitter"]):not([href*="x.com"]):not([href*="linkedin"]):not([href*="whatsapp"]):not([href*="wa.me"]):not([href^="mailto"]) {
  background: rgba(0,0,0,0.10) !important;
  color: #2D3436 !important;
}


/* -----------------------------------------------------------------
   4. INHOUDSOPGAVE (TOC)
----------------------------------------------------------------- */
.blog-toc {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.toc-toggle {
  width: 100%;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #FF8066;
  color: #ffffff;
  border: 0;
  font-weight: 800;
}

.toc-chevron { opacity: 0.85; }

.toc-list { padding: 10px 14px 14px; display: grid; gap: 8px; }

.toc-list a {
  text-decoration: none !important;
  color: #2D3436 !important;
  opacity: 0.9;
  line-height: 1.3;
}

.toc-list a:hover {
  color: #FF8066 !important;
  opacity: 1;
  text-decoration: underline !important;
}

.toc-item { display: flex; gap: 10px; align-items: baseline; }
.toc-bullet { opacity: 0.55; }


/* -----------------------------------------------------------------
   5. ARTIKEL TYPOGRAFIE + TABELOPMAAK + LIJSTEN
----------------------------------------------------------------- */
.blog-intro,
.blog-single .elementor-widget-theme-post-excerpt,
.blog-single .elementor-widget-theme-post-excerpt * { color: rgba(0,0,0,0.72); }
.blog-single .elementor-widget-theme-post-excerpt { margin: 0 0 18px !important; max-width: 78ch; }

.blog-article__content h2 { margin: 26px 0 10px; line-height: 1.2; }
.blog-article__content h3 { margin: 18px 0 10px; line-height: 1.25; }

.blog-article__content p,
.elementor-widget-theme-post-content p,
.elementor-widget-text-editor p {
  margin: 0 0 1.4em !important;
  max-width: 80ch;
  color: rgba(0,0,0,0.86);
  line-height: 1.65;
}

/* Lijsten: minder ruimte vóór, meer ruimte ná */
.blog-article__content ul,
.blog-article__content ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin: 0.4em 0 1.6em 1.4em !important;
  padding: 0 !important;
  line-height: 1.65;
  color: rgba(0,0,0,0.86);
}

.blog-article__content li,
.elementor-widget-theme-post-content li,
.elementor-widget-text-editor li {
  margin-bottom: 0.35em !important;
  max-width: 80ch;
}

/* Paragraaf direct vóór een lijst: minder marge onderaan */
.blog-article__content p:has(+ ul),
.blog-article__content p:has(+ ol),
.elementor-widget-theme-post-content p:has(+ ul),
.elementor-widget-theme-post-content p:has(+ ol),
.elementor-widget-text-editor p:has(+ ul),
.elementor-widget-text-editor p:has(+ ol) {
  margin-bottom: 0.4em !important;
}

/* Tabelopmaak in artikelen */
.blog-article__content table,
.elementor-widget-theme-post-content table,
.elementor-widget-text-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: .95rem;
  border-radius: 12px;
  overflow: hidden;
}

.blog-article__content table th,
.elementor-widget-theme-post-content table th,
.elementor-widget-text-editor table th {
  background: rgba(0,0,0,0.04);
  font-weight: 800;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.10);
}

.blog-article__content table td,
.elementor-widget-theme-post-content table td,
.elementor-widget-text-editor table td {
  padding: 9px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
  line-height: 1.5;
}

.blog-article__content table tr:nth-child(even) td,
.elementor-widget-theme-post-content table tr:nth-child(even) td,
.elementor-widget-text-editor table tr:nth-child(even) td {
  background: rgba(0,0,0,0.02);
}

/* Eerste h1 geen bovenmarge */
:is(.elementor .elementor-widget-container, .entry-content, .single-post article, .single-post .post-content, .single-post .post-entry, .single-post .content) > h1:first-child { margin-top: 0; }

/* Link-stijlen in artikelen */
.elementor-widget-text-editor p a:hover,
.elementor-widget-text-editor li a:hover,
.elementor-widget-text-editor blockquote a:hover,
.elementor-widget-theme-post-content p a:hover,
.elementor-widget-theme-post-content li a:hover,
.elementor-widget-theme-post-content blockquote a:hover,
.entry-content p a:hover,
.entry-content li a:hover,
.entry-content blockquote a:hover { text-decoration-thickness: 0.12em; }

.elementor-widget-text-editor p a:visited,
.elementor-widget-text-editor li a:visited,
.elementor-widget-theme-post-content p a:visited,
.elementor-widget-theme-post-content li a:visited,
.entry-content p a:visited,
.entry-content li a:visited { opacity: 0.9; }


/* -----------------------------------------------------------------
   6. RESPONSIVE BLOG
----------------------------------------------------------------- */
@media (max-width: 1200px) {
  .blog-single .elementor-widget-theme-post-featured-image img,
  .blog-single .elementor-widget-post-featured-image img { height: 360px !important; }
}
@media (max-width: 980px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar-inner { position: static; }
}
@media (max-width: 767px) {
  .blog-single .elementor-widget-theme-post-featured-image img,
  .blog-single .elementor-widget-post-featured-image img { height: 240px !important; }
  .blog-title, .blog-single h1.elementor-heading-title { max-width: none; }
}