/**
 * Tussenjaar Content Styling
 * Extracted from inline styles for better performance and maintainability
 */

/* ========================================
   IMAGE HIDING - Legacy WordPress Images
   ======================================== */

.section-content img[width="64"][height="64"],
.section-content img.tjimage,
.section-content img[src*="/2017/02/"],
.prose img[width="64"],
.prose img[height="64"] {
  display: none !important;
}

/* ========================================
   TYPOGRAPHY - Two-Tier System
   ======================================== */

/* TIER 1: Main Content (Larger - 16px → 18px) */
.section-content p,
.section-content > p,
.section-content div > p,
.section-content div div p,
.section-content * p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #374151 !important;
  max-width: 75ch;
}

/* TIER 2: Box Content + Reviews (Smaller - 14px → 16px) */
.box-text,
.review-content p,
.review-content li,
.review-content > p,
.review-content div > p,
.review-content * p {
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
}

.box-text {
  display: block;
}

/* Headings inside content */
.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4 {
  font-weight: 700 !important;
  color: #111827 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

.section-content h2 {
  font-size: 1.875rem !important;
}

.section-content h3 {
  font-size: 1.5rem !important;
}

.section-content h4 {
  font-size: 1.25rem !important;
}

/* Links */
.section-content a {
  color: #2563eb !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
}

.section-content a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* Strong/Bold text */
.section-content strong,
.section-content b {
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ========================================
   LISTS - Styled with Blue Background
   ======================================== */

.section-content ul,
.section-content ol {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
  background-color: rgba(239, 246, 255, 0.5) !important;
  border: 2px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  list-style: none !important;
}

.section-content li {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  margin-bottom: 0.75rem !important;
  padding-left: 2rem !important;
  position: relative !important;
}

/* Checkmark icon before each list item */
.section-content ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-color: #2563eb !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
}

/* Number markers for ordered lists */
.section-content ol {
  counter-reset: list-counter !important;
}

.section-content ol li::before {
  content: counter(list-counter) !important;
  counter-increment: list-counter !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-color: #2563eb !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.section-content li:last-child {
  margin-bottom: 0 !important;
}

/* ========================================
   WORDPRESS LEGACY - tjgrijsblok Styling
   ======================================== */

.section-content #tjgrijsblok,
.section-content div#tjgrijsblok,
.section-content .tjgrijsblok,
.section-content div.tjgrijsblok,
.section-content p.tjgrijsblok,
.section-content span.tjgrijsblok,
.section-content [class*="tjgrijsblok"],
.section-content [id*="tjgrijsblok"] {
  display: block !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
  background-color: rgba(239, 246, 255, 0.5) !important;
  border: 2px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  list-style: none !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
}

/* Reset nested UL/OL inside tjgrijsblok */
.section-content #tjgrijsblok ul,
.section-content #tjgrijsblok ol,
.section-content div#tjgrijsblok ul,
.section-content div#tjgrijsblok ol,
.section-content .tjgrijsblok ul,
.section-content .tjgrijsblok ol,
.section-content div.tjgrijsblok ul,
.section-content div.tjgrijsblok ol,
.section-content p.tjgrijsblok ul,
.section-content p.tjgrijsblok ol,
.section-content span.tjgrijsblok ul,
.section-content span.tjgrijsblok ol,
.section-content [class*="tjgrijsblok"] ul,
.section-content [class*="tjgrijsblok"] ol,
.section-content [id*="tjgrijsblok"] ul,
.section-content [id*="tjgrijsblok"] ol {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  list-style: none !important;
}

/* List items inside tjgrijsblok */
.section-content #tjgrijsblok li,
.section-content #tjgrijsblok ul li,
.section-content #tjgrijsblok ol li,
.section-content div#tjgrijsblok li,
.section-content .tjgrijsblok li,
.section-content .tjgrijsblok ul li,
.section-content .tjgrijsblok ol li,
.section-content div.tjgrijsblok li,
.section-content p.tjgrijsblok li,
.section-content span.tjgrijsblok li,
.section-content [class*="tjgrijsblok"] li,
.section-content [id*="tjgrijsblok"] li {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  margin-bottom: 0.75rem !important;
  padding-left: 2rem !important;
  position: relative !important;
  display: list-item !important;
}

/* Checkmark icons for tjgrijsblok list items */
.section-content #tjgrijsblok li::before,
.section-content #tjgrijsblok ul li::before,
.section-content #tjgrijsblok ol li::before,
.section-content div#tjgrijsblok li::before,
.section-content .tjgrijsblok li::before,
.section-content .tjgrijsblok ul li::before,
.section-content .tjgrijsblok ol li::before,
.section-content div.tjgrijsblok li::before,
.section-content p.tjgrijsblok li::before,
.section-content span.tjgrijsblok li::before,
.section-content [class*="tjgrijsblok"] li::before,
.section-content [id*="tjgrijsblok"] li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-color: #2563eb !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
}

/* Remove margin from last items */
.section-content #tjgrijsblok li:last-child,
.section-content .tjgrijsblok li:last-child,
.section-content [class*="tjgrijsblok"] li:last-child,
.section-content [id*="tjgrijsblok"] li:last-child {
  margin-bottom: 0 !important;
}

/* Handle paragraphs in tjgrijsblok */
.section-content #tjgrijsblok p,
.section-content div#tjgrijsblok p,
.section-content .tjgrijsblok p,
.section-content div.tjgrijsblok p,
.section-content p.tjgrijsblok p,
.section-content span.tjgrijsblok p,
.section-content [class*="tjgrijsblok"] p,
.section-content [id*="tjgrijsblok"] p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  margin-bottom: 0.75rem !important;
}

.section-content #tjgrijsblok p:last-child,
.section-content .tjgrijsblok p:last-child,
.section-content [class*="tjgrijsblok"] p:last-child,
.section-content [id*="tjgrijsblok"] p:last-child {
  margin-bottom: 0 !important;
}

/* ========================================
   QUOTE BLOCKS
   ======================================== */

.section-content .quote {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
  background-color: rgba(243, 244, 246, 0.8) !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 0.5rem !important;
  font-style: italic !important;
  color: #4b5563 !important;
}

.section-content .quote p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin-bottom: 0.5rem !important;
}

.section-content .quote p:last-child {
  margin-bottom: 0 !important;
}

.section-content blockquote {
  border-left: 4px solid #3b82f6 !important;
  padding-left: 1.5rem !important;
  margin: 2rem 0 !important;
  font-style: italic !important;
  color: #6b7280 !important;
}

/* ========================================
   REVIEW CONTENT STYLING
   ======================================== */

.review-content {
  color: #4b5563;
}

.review-content h2,
.review-content h3,
.review-content h4 {
  font-weight: 600 !important;
  color: #111827 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.review-content h2 {
  font-size: 1.25rem !important;
}

.review-content h3 {
  font-size: 1.125rem !important;
}

.review-content ul,
.review-content ol {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  padding-left: 1.5rem !important;
}

.review-content a {
  color: #2563eb !important;
  text-decoration: none !important;
}

.review-content a:hover {
  text-decoration: underline !important;
}

.review-content strong {
  font-weight: 600 !important;
  color: #111827 !important;
}

/* ========================================
   IMAGES - Spacing and Alignment
   ======================================== */

.section-content img:not([width="64"]):not(.tjimage),
.section-content > img:not([width="64"]):not(.tjimage),
.section-content div img:not([width="64"]):not(.tjimage),
.section-content * img:not([width="64"]):not(.tjimage) {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Extra spacing when image is adjacent to text */
.section-content p + img:not([width="64"]):not(.tjimage),
.section-content img:not([width="64"]):not(.tjimage) + p,
.section-content img:not([width="64"]):not(.tjimage) + h2,
.section-content img:not([width="64"]):not(.tjimage) + h3,
.section-content img:not([width="64"]):not(.tjimage) + h4 {
  margin-top: 4.5rem !important;
}

.section-content img:not([width="64"]):not(.tjimage) + p {
  margin-top: 4.5rem !important;
  padding-top: 0 !important;
}

/* ========================================
   TWO-COLUMN LAYOUT - leftkolom & rightkolom
   ======================================== */

/* Column containers - mobile first (stacked) */
.section-content #leftkolom,
.section-content #rightkolom,
.section-content div#leftkolom,
.section-content div#rightkolom {
  display: block !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
  box-sizing: border-box !important;
}

/* Desktop: True side-by-side layout with float */
@media (min-width: 768px) {
  /* Left column - float left */
  .section-content #leftkolom,
  .section-content div#leftkolom {
    float: left !important;
    width: 48% !important;
    margin-right: 4% !important;
    margin-bottom: 2rem !important;
  }
  
  /* Right column - float left (will sit next to left) */
  .section-content #rightkolom,
  .section-content div#rightkolom {
    float: left !important;
    width: 48% !important;
    margin-bottom: 2rem !important;
  }
  
  /* Clear floats after columns */
  .section-content #rightkolom::after,
  .section-content div#rightkolom::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }
}

/* Images inside column divs - medium size and centered */
.section-content #leftkolom img,
.section-content #rightkolom img,
.section-content div#leftkolom img,
.section-content div#rightkolom img {
  display: block !important;
  width: 100% !important;
  max-width: 350px !important;
  height: auto !important;
  margin: 0 auto 1rem auto !important;
  padding: 0 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Text content inside columns */
.section-content #leftkolom p,
.section-content #rightkolom p,
.section-content div#leftkolom p,
.section-content div#rightkolom p {
  max-width: 100% !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 0.95rem !important;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile: consistent readable sizes */
@media (max-width: 640px) {
  .section-content p,
  .section-content > p,
  .section-content div > p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  
  .section-content li,
  .section-content .tjgrijsblok li,
  .section-content #tjgrijsblok li,
  .section-content [id*="tjgrijsblok"] li {
    font-size: 1rem !important;
  }
  
  .section-content .tjgrijsblok p,
  .section-content #tjgrijsblok p,
  .section-content [class*="tjgrijsblok"] p,
  .section-content [id*="tjgrijsblok"] p {
    font-size: 1rem !important;
  }
  
  .box-text,
  .review-content p,
  .review-content li {
    font-size: 0.875rem !important;
  }
  
  .section-content h2 {
    font-size: 1.5rem !important;
  }
  
  .section-content h3 {
    font-size: 1.25rem !important;
  }
}

/* Tablet and up: two-tier system with larger sizes */
@media (min-width: 768px) {
  /* TIER 1: Main content (18px) */
  .section-content p,
  .section-content > p,
  .section-content div > p,
  .section-content div div p,
  .section-content * p {
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem !important;
  }
  
  /* Lists stay at 16px */
  .section-content li,
  .section-content .tjgrijsblok li,
  .section-content #tjgrijsblok li,
  .section-content [id*="tjgrijsblok"] li {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  
  .section-content .tjgrijsblok p,
  .section-content #tjgrijsblok p,
  .section-content [class*="tjgrijsblok"] p,
  .section-content [id*="tjgrijsblok"] p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  
  /* TIER 2: Box content + reviews (16px) */
  .box-text,
  .review-content p,
  .review-content li,
  .review-content > p,
  .review-content div > p,
  .review-content * p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  
  .section-content h2 {
    font-size: 2rem !important;
  }
  
  .section-content h3 {
    font-size: 1.625rem !important;
  }
  
  .review-content h2 {
    font-size: 1.375rem !important;
  }
  
  .review-content h3 {
    font-size: 1.25rem !important;
  }
}