/* GHI blog post: custom CSS for the GHL Blog Post page.
   Paste into the page's Custom CSS in the GHL builder.
   Restyles GHL's Blog Content element and reorders its existing parts with CSS only:
   back link, category, title, date, cover image, article, tags, author box, back to top.
   Fonts: upload Miller Display + Proxima Nova as custom fonts in GHL; Playfair Display / Inter are fallbacks. */

:root {
  --ghi-navy: #1A2433;
  --ghi-gold: #CCA72D;
  --ghi-gold-ink: #75601A;
  --ghi-cream: #F9F2E8;
  --ghi-sand: #E8DED0;
  --ghi-charcoal: #545454;
  --ghi-gray: #767676;
  --ghi-line: #D5D9DE;
  --ghi-display: 'Miller Display', 'Playfair Display', Georgia, serif;
  --ghi-body: 'Proxima Nova', 'Inter', Arial, sans-serif;
}

/* ---------- Layout + order ---------- */
.c-blog-content .blog-html-container-single {
  display: flex !important;
  flex-direction: column;
  max-width: 1088px !important;
  margin: 0 auto !important;
  padding: 48px 24px 96px !important;
  background: transparent !important;
  border: 0 !important;
}
.c-blog-content .blog-html-container-single > * {
  width: 100%;
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.c-blog-content .blog-back-button { order: -3; }
.c-blog-content .blog-content-title + .meta-section-1 { order: -2; }               /* category */
.c-blog-content .blog-content-title { order: -1; }
.c-blog-content .blog-content-title + .meta-section-1 + .meta-section-1 { order: 0; } /* date */
.c-blog-content .blog-cover-image-container { order: 1; max-width: 1040px; }
.c-blog-content .blog-html { order: 2; }
.c-blog-content .blog-tags { order: 3; }
.c-blog-content .blog-author-details { order: 4; }
.c-blog-content .hl-blog-content-back-to-top-container { order: 5; }

/* ---------- Article header ---------- */
.c-blog-content .blog-back-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto;
  align-self: flex-start;
  margin: 0 0 40px !important;
  margin-left: max(0px, calc((100% - 720px) / 2)) !important;
  font-family: var(--ghi-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ghi-navy) !important;
  text-decoration: none !important;
}
.c-blog-content .blog-back-button:hover span { text-decoration: underline; text-decoration-color: var(--ghi-gold); text-underline-offset: 4px; }
.c-blog-content .blog-left-arrow { color: var(--ghi-gold-ink) !important; }
.c-blog-content .blog-category,
.c-blog-content .blog-category a {
  font-family: var(--ghi-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ghi-gold-ink) !important;
  text-decoration: none !important;
}
.c-blog-content .blog-content-title {
  font-family: var(--ghi-display) !important;
  font-weight: 600 !important;
  font-size: 48px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.012em;
  color: var(--ghi-navy) !important;
  text-align: left !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
.c-blog-content .blog-content-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--ghi-gold);
  border-radius: 2px;
  margin-top: 24px;
}
.c-blog-content .blog-date {
  display: block;
  margin-top: 18px;
  font-family: var(--ghi-body) !important;
  font-size: 15px !important;
  color: var(--ghi-gray) !important;
}
.c-blog-content .blog-cover-image-container { margin-top: 44px !important; margin-bottom: 56px !important; }
.c-blog-content .blog-cover-image-container img,
.c-blog-content .blog-content-blog-image {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  border-radius: 10px;
}

/* ---------- Article body ---------- */
.c-blog-content .blog-html {
  font-family: var(--ghi-body) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--ghi-charcoal) !important;
  overflow-wrap: anywhere;
}
.c-blog-content .blog-html p { margin: 0 0 1.3em !important; }
.c-blog-content .blog-html strong,
.c-blog-content .blog-html b { color: var(--ghi-navy); font-weight: 700; }
.c-blog-content .blog-html h2,
.c-blog-content .blog-html h3,
.c-blog-content .blog-html h4 {
  font-family: var(--ghi-display) !important;
  color: var(--ghi-navy) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 2em 0 0.6em !important;
}
.c-blog-content .blog-html h2 { font-size: 32px !important; }
.c-blog-content .blog-html h3 { font-size: 26px !important; }
.c-blog-content .blog-html h4 { font-size: 21px !important; }
.c-blog-content .blog-html a {
  color: var(--ghi-navy) !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: var(--ghi-gold) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}
.c-blog-content .blog-html ul,
.c-blog-content .blog-html ol { margin: 0 0 1.4em !important; padding-left: 1.3em !important; }
.c-blog-content .blog-html ul { list-style: disc !important; }
.c-blog-content .blog-html ol { list-style: decimal !important; }
.c-blog-content .blog-html li { margin: 0 0 0.55em !important; padding-left: 0.3em; }
.c-blog-content .blog-html li::marker { color: var(--ghi-gold); }
.c-blog-content .blog-html blockquote {
  margin: 2em 0 !important;
  padding: 4px 0 4px 28px !important;
  border-left: 3px solid var(--ghi-gold) !important;
  background: none !important;
}
.c-blog-content .blog-html blockquote p {
  font-family: var(--ghi-display) !important;
  font-style: italic;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: var(--ghi-navy) !important;
  margin: 0 !important;
}
.c-blog-content .blog-html img { max-width: 100% !important; height: auto !important; border-radius: 10px; margin: 0.5em 0; }
.c-blog-content .blog-html iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  margin: 0.5em 0 1.5em;
}
.c-blog-content .blog-html hr { border: 0; border-top: 1px solid var(--ghi-line); margin: 2.5em 0; }

/* ---------- Tags ---------- */
.c-blog-content .blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px !important; padding-top: 32px; border-top: 1px solid var(--ghi-line); }
.c-blog-content .blog-tags .tag {
  font-family: var(--ghi-body) !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--ghi-navy) !important;
  background: #fff !important;
  border: 1px solid var(--ghi-line) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
}

/* ---------- Author box ---------- */
.c-blog-content .blog-author-details {
  margin-top: 32px !important;
  padding: 28px 32px !important;
  background: var(--ghi-cream) !important;
  border: 0 !important;
  border-radius: 14px !important;
}
.c-blog-content .blog-author-container,
.c-blog-content .blog-author { background: transparent !important; border: 0 !important; text-decoration: none !important; }
.c-blog-content .blog-author > div { gap: 18px !important; align-items: center !important; }
.c-blog-content .blog-author-image-post {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
.c-blog-content .blog-author-name {
  font-family: var(--ghi-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ghi-navy) !important;
  margin: 0 !important;
}
.c-blog-content .blog-author-role {
  font-family: var(--ghi-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ghi-gold-ink) !important;
  margin: 4px 0 0 !important;
}
.c-blog-content .blog-author-description {
  font-family: var(--ghi-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ghi-charcoal) !important;
  margin: 14px 0 0 !important;
}
.c-blog-content .author-icons-container,
.c-blog-content .blog-author-social-icons { display: none !important; }

/* ---------- Back to top ---------- */
.c-blog-content .hl-blog-content-back-to-top-container { margin-top: 40px !important; text-align: center; }
.c-blog-content .back-to-top {
  background: none !important;
  border: 0 !important;
  font-family: var(--ghi-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ghi-navy) !important;
  text-decoration: underline;
  text-decoration-color: var(--ghi-gold);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 719px) {
  .c-blog-content .blog-html-container-single { padding: 28px 20px 72px !important; }
  .c-blog-content .blog-back-button { margin-bottom: 28px !important; }
  .c-blog-content .blog-content-title { font-size: 34px !important; }
  .c-blog-content .blog-cover-image-container { margin-top: 32px !important; margin-bottom: 36px !important; }
  .c-blog-content .blog-html { font-size: 17px !important; }
  .c-blog-content .blog-html h2 { font-size: 27px !important; }
  .c-blog-content .blog-html h3 { font-size: 23px !important; }
  .c-blog-content .blog-html blockquote p { font-size: 21px !important; }
  .c-blog-content .blog-author-details { padding: 24px !important; }
}