/* ============================================================
   BLOG STYLES  (edit anything below to change how the blog looks)
   ============================================================
   The variables in :root control every article + the listing page.
   Change a value, save, upload — every blog post updates.
   ============================================================ */

:root {
  /* ---- FONTS ---- */
  --blog-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --blog-heading-font: "Archivo", "Inter", sans-serif;

  /* ---- ARTICLE TITLE (H1) ---- */
  --blog-title-size: clamp(2rem, 4.5vw, 3.4rem);
  --blog-title-weight: 900;
  --blog-title-color: #ffffff;
  --blog-title-style: italic;   /* set to "normal" if you don't want italic */

  /* ---- SECTION HEADINGS (H2) ---- */
  --blog-h2-size: 1.6rem;
  --blog-h2-weight: 800;
  --blog-h2-color: #ffffff;
  --blog-h2-style: italic;
  --blog-h2-transform: uppercase;   /* set to "none" for mixed case */
  --blog-h2-margin-top: 40px;
  --blog-h2-margin-bottom: 14px;

  /* ---- SUB-HEADINGS (H3) ---- */
  --blog-h3-size: 1.2rem;
  --blog-h3-color: #ffffff;
  --blog-h3-weight: 800;

  /* ---- BODY TEXT ---- */
  --blog-body-size: 1.08rem;     /* main paragraph size */
  --blog-body-line: 1.75;         /* line-height */
  --blog-body-color: #d5dae4;
  --blog-body-margin: 18px;       /* space between paragraphs */

  /* ---- ARTICLE READING WIDTH ---- */
  --blog-content-width: 720px;

  /* ---- LINKS INSIDE ARTICLES ---- */
  --blog-link-color: #f5a623;     /* gold */
  --blog-link-hover: #ffffff;

  /* ---- QUOTES / EMPHASIS ---- */
  --blog-quote-bar: #f5a623;
  --blog-quote-color: #ffffff;
  --blog-quote-size: 1.25rem;

  /* ---- META (author / date / read time) ---- */
  --blog-meta-color: #8a909c;
  --blog-meta-size: 0.85rem;

  /* ---- BLOG CATEGORY EYEBROW ---- */
  --blog-eyebrow-color: #2f6fed;
  --blog-eyebrow-size: 0.95rem;
}

/* ============================================================
   ARTICLE LAYOUT — you shouldn't need to touch this
   Change the variables above instead.
   ============================================================ */

.blog-article {
  max-width: var(--blog-content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.blog-article .blog-eyebrow {
  color: var(--blog-eyebrow-color);
  font-family: var(--blog-heading-font);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--blog-eyebrow-size);
  margin-bottom: 10px;
}

.blog-article h1 {
  font-family: var(--blog-heading-font);
  font-size: var(--blog-title-size);
  font-weight: var(--blog-title-weight);
  font-style: var(--blog-title-style);
  color: var(--blog-title-color);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.blog-article .blog-meta {
  color: var(--blog-meta-color);
  font-size: var(--blog-meta-size);
  letter-spacing: 0.04em;
  margin-bottom: 30px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.blog-article .blog-meta .dot { opacity: .5; }

.blog-article .blog-body {
  font-family: var(--blog-body-font);
  font-size: var(--blog-body-size);
  line-height: var(--blog-body-line);
  color: var(--blog-body-color);
}

.blog-article .blog-body p {
  margin-bottom: var(--blog-body-margin);
}

.blog-article .blog-body h2 {
  font-family: var(--blog-heading-font);
  font-size: var(--blog-h2-size);
  font-weight: var(--blog-h2-weight);
  font-style: var(--blog-h2-style);
  color: var(--blog-h2-color);
  text-transform: var(--blog-h2-transform);
  letter-spacing: -0.005em;
  margin-top: var(--blog-h2-margin-top);
  margin-bottom: var(--blog-h2-margin-bottom);
  line-height: 1.15;
}

.blog-article .blog-body h3 {
  font-family: var(--blog-heading-font);
  font-size: var(--blog-h3-size);
  font-weight: var(--blog-h3-weight);
  color: var(--blog-h3-color);
  margin-top: 30px;
  margin-bottom: 10px;
}

.blog-article .blog-body strong,
.blog-article .blog-body b {
  color: #ffffff;
  font-weight: 700;
}

.blog-article .blog-body em,
.blog-article .blog-body i {
  color: #e6ecf5;
  font-style: italic;
}

.blog-article .blog-body a {
  color: var(--blog-link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-article .blog-body a:hover { color: var(--blog-link-hover); }

.blog-article .blog-body blockquote {
  border-left: 4px solid var(--blog-quote-bar);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
  font-size: var(--blog-quote-size);
  color: var(--blog-quote-color);
  font-style: italic;
  line-height: 1.5;
}

.blog-article .blog-body ul,
.blog-article .blog-body ol {
  margin: 12px 0 20px 20px;
  padding-left: 8px;
}
.blog-article .blog-body li { margin-bottom: 8px; }

.blog-article .blog-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px auto;
}

.blog-article hr {
  border: none;
  border-top: 1px solid #1f293d;
  margin: 40px 0;
}

/* ============================================================
   SHARE BAR
   ============================================================ */
.share-bar {
  max-width: var(--blog-content-width);
  margin: 40px auto 0;
  padding: 22px 24px;
  border-top: 1px solid #1f293d;
  border-bottom: 1px solid #1f293d;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.share-bar .share-label {
  font-family: var(--blog-heading-font);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: #c7cdd8;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  margin-right: 4px;
}
.share-bar a, .share-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #131a28;
  border: 1px solid #1f293d;
  color: #c7cdd8;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.share-bar a:hover, .share-bar button:hover {
  transform: translateY(-2px);
  color: #fff;
}
.share-bar a.s-fb:hover     { background: #1877F2; border-color: #1877F2; }
.share-bar a.s-in:hover     { background: #0A66C2; border-color: #0A66C2; }
.share-bar a.s-x:hover      { background: #000; border-color: #000; }
.share-bar a.s-mail:hover   { background: #f5a623; border-color: #f5a623; color: #0c1018; }
.share-bar button.s-copy:hover { background: #2f6fed; border-color: #2f6fed; }
.share-bar .copied-msg { font-size: 0.85rem; color: #3fae5a; margin-left: 4px; }

/* Like button + count */
.share-bar .s-like { width: auto; padding: 0 16px; border-radius: 22px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; gap: 8px; }
.share-bar .s-like i { font-size: 1rem; transition: transform .2s ease; }
.share-bar .s-like:hover { background: #f5a623; border-color: #f5a623; color: #0c1018; }
.share-bar .s-like.is-liked { background: #f5a623; border-color: #f5a623; color: #0c1018; }
.share-bar .s-like.is-liked i { transform: scale(1.1); }
.share-bar .like-count { font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; color: #fff; font-size: 1.1rem; min-width: 24px; text-align: left; }

/* ============================================================
   AUTHOR BIO CARD (below article)
   ============================================================ */
.author-bio {
  max-width: var(--blog-content-width);
  margin: 30px auto 0;
  padding: 24px;
  background: #131a28;
  border: 1px solid #1f293d;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
}
.author-bio .author-avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #0c1018;
}
.author-bio .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-bio h4 {
  color: #fff; font-family: var(--blog-heading-font); font-style: italic; text-transform: uppercase;
  font-size: 1rem; margin-bottom: 4px;
}
.author-bio p { color: #c7cdd8; font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* ============================================================
   BACK TO BLOG LINK
   ============================================================ */
.back-to-blog {
  max-width: var(--blog-content-width);
  margin: 30px auto 0;
  padding: 0 24px;
}
.back-to-blog a { color: #8a909c; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.back-to-blog a:hover { color: var(--gold); }

/* ============================================================
   BLOG LISTING PAGE
   ============================================================ */
.blog-list { display: grid; gap: 26px; max-width: 960px; margin: 0 auto; }
.blog-card {
  background: #131a28;
  border: 1px solid #1f293d;
  border-radius: 14px;
  padding: 26px 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: block;
  color: inherit;
  text-decoration: none;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); border-color: #2a3a55; }
.blog-card .bc-eyebrow { color: var(--blog-eyebrow-color); font-family: var(--blog-heading-font); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin-bottom: 8px; }
.blog-card h2 { font-family: var(--blog-heading-font); font-style: italic; text-transform: uppercase; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; margin-bottom: 10px; }
.blog-card p { color: #c7cdd8; margin-bottom: 12px; }
.blog-card .bc-meta { color: #8a909c; font-size: 0.82rem; display: flex; gap: 14px; flex-wrap: wrap; }
.blog-card .bc-meta .dot { opacity: .5; }
.blog-card .bc-more { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; margin-top: 12px; display: inline-block; }