/* =======================================
   Blog Page Styles
   Author: Dominic / Architechs for the Web
   Purpose: Styles specific to /blog/ pages
   ======================================= */

.blog-page {
  font-family: "Open Sans", sans-serif;
  line-height: 1.7;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Blog Header / Title */
.blog-page h1,
.blog-page h2 {
  font-size: 2rem;
  color: #222;
  margin-bottom: 15px;
  font-weight: 700;
}

/* Author & Date */
.blog-page h4 {
  font-size: 1rem;
  color: #666;
  margin-bottom: 25px;
}

.blog-meta {
  font-size: 0.95rem;
  color: #777;
  margin-bottom: 30px;
}

.blog-meta span {
  display: inline-block;
  margin-right: 15px;
}

/* Featured Image */
.blog-page img.featured-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 25px;
}

/* Main Content */
.blog-page .blog-content p {
  margin-bottom: 1.2em;
  font-size: 1rem;
}

.blog-page .blog-content h3,
.blog-page .blog-content h4 {
  color: #111;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

/* Images inside content */
.blog-page .blog-content img {
  max-width: 45%;
  float: right;
  margin: 10px 0 20px 25px;
  border-radius: 6px;
}

/* Lists */
.blog-page .blog-content ul,
.blog-page .blog-content ol {
  margin-left: 30px;
  margin-bottom: 1.2em;
}

/* Clearfix */
.blog-page .blog-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Breadcrumbs (optional) */
.blog-page .breadcrumbs,
.blog-page .blog-breadcrumbs {
  background: #f6f6f6;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.blog-page .blog-breadcrumbs a,
.blog-page .breadcrumbs a {
  color: #0077cc;
  text-decoration: none;
}

.blog-page .blog-breadcrumbs a:hover,
.blog-page .breadcrumbs a:hover {
  text-decoration: underline;
}

/* --- Moved from inline <style> block --- */
.blog-page .custom-content {
  position: relative;
}

.blog-page .custom-content img {
  width: 40%;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px; /* Adds space below the image */
  border-radius: 6px;
}

.blog-page .custom-content p,
.blog-page .custom-content ul,
.blog-page .custom-content ol {
  overflow: hidden; /* Ensures text wraps around the image */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .blog-page .blog-content img,
  .blog-page .custom-content img {
    float: none;
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
}
/* Restore normal bullets in blog content lists */
.blog-page .blog-content ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin-left: 30px !important;
  padding-left: 20px !important;
}

.blog-page .blog-content ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  margin-left: 30px !important;
  padding-left: 20px !important;
}

/* Remove any dash-style pseudo elements that may exist globally */
.blog-page .blog-content ul li::before,
.blog-page .blog-content ol li::before {
  content: none !important;
}
/* ===================================================
   FIX BULLET STYLES INSIDE BLOG PAGE ONLY
   =================================================== */

.blog-page ul,
.blog-page ol {
  margin-left: 25px !important;
  padding-left: 25px !important;
}

/* Reset list bullets (global CSS replaces them with dashes) */
.blog-page ul li,
.blog-page ol li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 5px;
  list-style-type: disc !important;
  list-style-position: outside !important;
}

/* Remove any global pseudo-element dashes or icons */
.blog-page ul li::before,
.blog-page ol li::before {
  content: none !important;
}

/* Optional: if you want circles instead of solid dots */
.blog-page ul {
  list-style-type: circle !important;
}

/* Optional spacing improvement between paragraphs and lists */
.blog-page p + ul,
.blog-page p + ol {
  margin-top: -5px;
}
/* ===================================================
   FIX BULLET STYLES INSIDE BLOG PAGE ONLY
   =================================================== */

.blog-page ul,
.blog-page ol {
  margin-left: 25px !important;
  padding-left: 25px !important;
}

/* UL = bullets */
.blog-page ul li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 5px;
  list-style-type: disc !important;
  list-style-position: outside !important;
}

/* OL = numbers */
.blog-page ol li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 5px;
  list-style-type: decimal !important;
  list-style-position: outside !important;
}


/* Remove any global pseudo-element dashes or icons */
.blog-page ul li::before,
.blog-page ol li::before {
  content: none !important;
}

/* Optional: if you want circles instead of solid dots */
.blog-page ul {
  list-style-type: circle !important;
}

/* Optional spacing improvement between paragraphs and lists */
.blog-page p + ul,
.blog-page p + ol {
  margin-top: -5px;
}
/* ===================================================
   FIX ORDERED (NUMBERED) LISTS TO SHOW NUMBERS
   =================================================== */

.blog-page ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  margin-left: 30px !important;
  padding-left: 20px !important;
}

/* Ensure only UL gets bullets, not OL */
.blog-page ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin-left: 30px !important;
  padding-left: 20px !important;
}

/* Prevent both types from using the same pseudo-element dash */
.blog-page ol li::before {
  content: none !important;
}

/* Adjust line spacing and alignment for numbered items */
.blog-page ol li {
  margin-bottom: 8px;
  padding-left: 5px;
}
.blog-page ol,
.blog-page ol li {
  list-style-type: decimal !important;
}
/* =======================================
   BLOG TEXT SIZE (Slightly Smaller)
   ======================================= */

.blog-page p,
.blog-page li,
.blog-page ul,
.blog-page ol {
  font-size: 16.5px !important; /* perfect mid-size */
  line-height: 1.75 !important;
  color: #2e2e2e !important;
}

/* Paragraph spacing */
.blog-page p {
  margin-bottom: 1.25em !important;
}

/* List item spacing */
.blog-page ul li,
.blog-page ol li {
  margin-bottom: 0.55em !important;
}

/* List margins */
.blog-page ul,
.blog-page ol {
  margin-top: 0.5em !important;
  margin-bottom: 1.2em !important;
}

/* Headings balance */
.blog-page h4,
.blog-page h5 {
  font-size: 20px !important;
  color: #111 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.6em !important;
}
/* =======================================
   FIX: REMOVE BOLD NUMBERING IN OL LISTS
   ======================================= */

/* Make ordered list numbers normal weight */
.blog-page ol li,
.blog-page ol::marker,
.blog-page ol li::marker {
  font-weight: normal !important;
}

/* Ensure list text is normal unless explicitly bolded */
.blog-page ol li,
.blog-page ul li {
  font-weight: normal !important;
}

/* Keep <strong> and <b> tags bold inside blog content */
.blog-page strong,
.blog-page b {
  font-weight: bold !important;
}
/* =======================================
   BLOG TITLE / AUTHOR / DATE / IMAGE SPACING FIX
   ======================================= */

/* Blog title */
.blog-page h4.text-spacing-0 {
  margin-top: 0 !important;
  margin-bottom: 10px !important; /* tighter spacing before author/date */
}

/* Author + Date (the h2 with span) */
.blog-page .custom-content h2 {
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important; /* tighter space before image */
  line-height: 1.3 !important;
}

/* Date inside the span */
.blog-page .custom-content h2 span {
  display: block;
  font-weight: 400;
  font-size: 0.95em;
  line-height: 1.2;
  margin-top: 2px; /* brings date closer to author */
}

/* Image spacing */
.blog-page .custom-content img {
  margin-top: 10px !important;
  margin-bottom: 25px !important; /* balanced space before content */
  display: block;
}

/* Fix excessive spacing for all article headings inside content */
.blog-page .custom-content h2,
.blog-page .custom-content h3,
.blog-page .custom-content h4,
.blog-page .custom-content h5 {
  margin-top: 1.4em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.3;
}

/* Paragraph spacing - to match new vertical rhythm */
.blog-page .custom-content p {
  margin-top: 0;
  margin-bottom: 1.1em;
}
/* =======================================
   FINAL TUNING: Title ↔ Author Spacing
   ======================================= */

/* Add moderate, clean spacing between title and author */
.blog-page h4.text-spacing-0 {
  margin-bottom: 1px !important; /* sweet spot: slightly more breathing room */
  padding-bottom: 0 !important;
}

/* Keep author block tight with date below */
.blog-page .custom-content h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important; /* good space before the image */
  line-height: 1 !important;
}