/* -----------------------------------------------------------------------
   Blog — custom styles (Bootstrap 5 base)
   ----------------------------------------------------------------------- */

/* Fonts */
@font-face {
  font-family: Interstate;
  src: url("../fonts/interstate.woff") format("woff"),
       url("../fonts/interstate.ttf") format("truetype");
}

@font-face {
  font-family: Proximanova;
  src: url("../fonts/proxima-nova.woff") format("woff"),
       url("../fonts/proxima-nova.ttf") format("truetype");
}

body {
  font-family: Proximanova, system-ui, sans-serif;
}

/* ---- Brand colour ---- */
:root {
  --loop-green: #5db433;
  --loop-green-dark: #4a8f28;

  /* Light-mode surface / text tokens */
  --blog-text:        #212529;
  --blog-text-muted:  #6c757d;
  --blog-surface:     #f8f9fa;
  --blog-pill-bg:     #e9ecef;
  --blog-pill-text:   #495057;
  --blog-placeholder: linear-gradient(135deg, #e9f5e1, #c8e6b0);
  --blog-shadow:      rgba(0, 0, 0, .12);
}

[data-bs-theme="dark"] {
  --blog-text:        #d0d0d0;
  --blog-text-muted:  #8a8a8a;
  --blog-surface:     #1a1a1a;
  --blog-pill-bg:     #2a2a2a;
  --blog-pill-text:   #c0c0c0;
  --blog-placeholder: linear-gradient(135deg, #1a2e1a, #1f3d1f);
  --blog-shadow:      rgba(0, 0, 0, .4);
}

.green { color: var(--loop-green); }

/* ---- Index — featured hero ---- */
.blog-featured-card { border-radius: .5rem; overflow: hidden; }

.blog-featured-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .blog-featured-img { height: 260px; }
}

.featured-overlay {
  background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.7));
}

/* ---- Category filter pills ---- */
.blog-pill {
  background-color: var(--blog-pill-bg);
  color: var(--blog-pill-text);
  font-size: .8rem;
  padding: .35em .75em;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.blog-pill:hover {
  background-color: var(--loop-green);
  color: #fff;
}

.blog-pill-active {
  background-color: var(--loop-green);
  color: #fff;
  font-size: .8rem;
  padding: .35em .75em;
  text-decoration: none;
}

/* ---- Post cards ---- */
.blog-post-card { border-radius: .5rem; transition: box-shadow .2s; }
.blog-post-card:hover { box-shadow: 0 .5rem 1.5rem var(--blog-shadow) !important; }

.blog-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: .5rem .5rem 0 0;
}

.blog-card-img-placeholder {
  height: 190px;
  background: var(--blog-placeholder);
  border-radius: .5rem .5rem 0 0;
}

/* ---- Post titles ---- */
.blog-post-title { text-transform: uppercase; letter-spacing: .03em; }

/* ---- Detail page — centered readable column ---- */
.blog-article-wrap { max-width: 740px; }

.detail_title {
  color: var(--loop-green);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Post body */
.blog-post {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--blog-text);
}


.blog-post h2,
.blog-post h3,
.blog-post h4 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-weight: 700;
  color: var(--blog-text);
}

.blog-post a { color: var(--loop-green); }
.blog-post a:hover { color: var(--loop-green-dark); }

.blog-post blockquote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--blog-text-muted);
}

/* ---- Index filter bar ---- */
.blog-search-wrap { flex: 0 0 auto; }

.blog-search-input {
  width: 220px;
  border-color: #ced4da;
  border-radius: 2rem;
  padding-left: .9rem;
}

.blog-search-input:focus {
  border-color: var(--loop-green);
  box-shadow: 0 0 0 .2rem rgba(93,180,51,.2);
}

/* ---- Sidebar cards (shared) ---- */
.side-card { border-color: var(--loop-green); }
.side-card .card-header {
  background-color: var(--loop-green);
  color: #fff;
}

/* ---- More Articles grid (bottom of post page) ---- */
.blog-more-card { transition: box-shadow .2s, border-color .2s; }
.blog-more-card:hover {
  box-shadow: 0 .25rem .75rem var(--blog-shadow);
  border-color: var(--loop-green) !important;
}

.blog-more-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-more-thumb-placeholder {
  width: 80px;
  height: 80px;
  background: var(--blog-placeholder);
}

.blog-related-title {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Author card ---- */
.blog-author-card { border-color: #dee2e6; }

.blog-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--loop-green);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Embed block ---- */
/* The oEmbed iframe renders at the dimensions the provider returns.
   Flex centering keeps portrait / narrow embeds centred within the article column
   rather than left-aligned. max-height caps unusually tall embeds. */
.blog-embed-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 680px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.blog-embed-wrap iframe {
  max-width: 100%;
  display: block;
  border: none;
}

/* ---- CTA block — colours set via JS from data-bg/data-btn, shape only here ---- */
.cta-block { border-radius: .5rem; transition: background-color .3s, color .3s; }

/* Force all text inside a CTA to inherit the contrast colour set on .cta-block via
   inline style (by the template and JS). !important is required because rules like
   .blog-post h3 { color: var(--blog-text) } have equal specificity and would otherwise
   win over plain `color: inherit`. The value is still fully dynamic — children track
   whatever colour JS sets on the parent .cta-block. */
.cta-block p,
.cta-block h2,
.cta-block h3,
.cta-block h4,
.cta-block li { color: inherit !important; }
.cta-image-wrap { text-align: center; }
.cta-image { width: 160px; height: 160px; object-fit: cover; }
.cta-btn { transition: background-color .3s, color .3s; }

/* ---- Callout / Notice block ---- */
.callout {
  border-left: 4px solid;
  border-radius: 0 .375rem .375rem 0;
}

.callout-info    { background: #e7f3fe; border-color: #2196f3; color: #0d47a1; }
.callout-tip     { background: #e9f5e1; border-color: var(--loop-green); color: #2d6a0f; }
.callout-warning { background: #fff8e6; border-color: #ff9800; color: #7a4a00; }
.callout-danger  { background: #fdecea; border-color: #f44336; color: #7f1a14; }

[data-bs-theme="dark"] .callout-info    { background: #0d2137; border-color: #2196f3; color: #90caf9; }
[data-bs-theme="dark"] .callout-tip     { background: #0d1f0d; border-color: var(--loop-green); color: #a5d6a7; }
[data-bs-theme="dark"] .callout-warning { background: #241a00; border-color: #ff9800; color: #ffcc80; }
[data-bs-theme="dark"] .callout-danger  { background: #240d0d; border-color: #f44336; color: #ef9a9a; }

.callout-heading { font-weight: 700; }
.callout p:last-child { margin-bottom: 0; }

.pullquote-accent { border-color: var(--loop-green) !important; }

figure img { width: 100%; object-fit: contain; }

/* ---- Footer ---- */
.blog-footer { background-color: var(--blog-surface); }

.blog-back-to-top:hover { color: var(--loop-green) !important; }

.blog-social-link {
  color: var(--blog-text-muted);
  transition: color .15s;
  line-height: 1;
}

.blog-social-link:hover { color: var(--loop-green); }

/* ---- Dark mode toggle ---- */
.blog-theme-toggle { padding: .25rem .4rem; line-height: 1; }

/* Show moon in light mode, sun in dark mode */
.theme-icon-dark { display: none; }

[data-bs-theme="dark"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark  { display: inline; }