/* ============================================================
   CFI BLOG — CUSTOM OVERRIDES v2.1
   Premium Enterprise Design System
   Paste into: WP Admin → Appearance → Customize → Additional CSS
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. ROOT TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
  --color-navy-950:  #00102e !important;
  --color-navy-900:  #001850 !important;
  --color-navy-600:  #003750 !important;
  --color-cyan-400:  #00bafb !important;
  --color-cyan-500:  #009fd8 !important;
  --color-gold:      #f7b731 !important;
  --color-gold-dark: #e09800 !important;
  --color-bg:        #ffffff !important;
  --color-bg-light:  #f6faff !important;
  --color-bg-muted:  #eef4fb !important;
  --color-border:    #ddeaf5 !important;
  --color-text:      #111c2d !important;
  --color-text-body: #253345 !important;
  --color-text-muted:#4d6475 !important;
  --color-text-soft: #7a95a8 !important;
  --shadow-sm:  0 2px 10px rgba(0,55,80,0.07) !important;
  --shadow-md:  0 4px 24px rgba(0,55,80,0.10) !important;
  --shadow-lg:  0 8px 44px rgba(0,55,80,0.13) !important;
  --shadow-xl:  0 16px 64px rgba(0,55,80,0.16) !important;
}

/* ────────────────────────────────────────────────────────────
   2. BODY & GLOBAL
   ──────────────────────────────────────────────────────────── */
body,
.cfi-blog-body {
  background-color: #f4f8fd !important;
  color: #111c2d !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ────────────────────────────────────────────────────────────
   3. NAVBAR
   ──────────────────────────────────────────────────────────── */
.navbar-cfi {
  background: linear-gradient(90deg, #001033 0%, #002855 60%, #003060 100%) !important;
  border-bottom: 1px solid rgba(0,186,251,0.10) !important;
}
.navbar-cfi.scrolled {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow: 0 1px 0 #ddeaf5, 0 4px 28px rgba(0,40,85,0.09) !important;
}

/* ────────────────────────────────────────────────────────────
   4. HERO
   ──────────────────────────────────────────────────────────── */
.blog-hero-bg {
  background: linear-gradient(145deg,
    #00102e 0%, #001c4a 22%, #003055 48%,
    #004a70 72%, #006898 100%) !important;
}
.blog-hero-bg::before {
  background:
    radial-gradient(ellipse 65% 75% at 68% 42%, rgba(0,186,251,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 20% 80%, rgba(0,40,80,0.20) 0%, transparent 55%) !important;
}
.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.28) !important;
  letter-spacing: -0.02em !important;
}
.hero-subtitle { color: rgba(255,255,255,0.72) !important; }
.hero-badge {
  background: rgba(0,186,251,0.16) !important;
  border: 1px solid rgba(0,186,251,0.32) !important;
  color: #7ddeff !important;
  box-shadow: 0 0 20px rgba(0,186,251,0.12) !important;
}

/* ────────────────────────────────────────────────────────────
   5. CATEGORY FILTER BAR
   ──────────────────────────────────────────────────────────── */
.cat-filter-bar {
  background: rgba(246,250,255,0.97) !important;
  border-bottom: 1.5px solid #ddeaf5 !important;
  box-shadow: 0 2px 16px rgba(0,55,80,0.05) !important;
}
.cat-pill {
  color: #2d4a60 !important;
  background: #ffffff !important;
  border: 1.5px solid #d8e8f4 !important;
  font-weight: 600 !important;
}
.cat-pill:hover {
  background: #e8f6ff !important;
  border-color: #00bafb !important;
  color: #005880 !important;
  text-decoration: none !important;
}
.cat-pill.active {
  background: linear-gradient(135deg, #003750 0%, #0090c8 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 14px rgba(0,144,200,0.30) !important;
}

/* ────────────────────────────────────────────────────────────
   6. BLOG CARDS
   ──────────────────────────────────────────────────────────── */
.blog-card {
  background: #ffffff !important;
  border: 1px solid #ddeaf5 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,55,80,0.06), 0 1px 3px rgba(0,55,80,0.04) !important;
}
.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,55,80,0.14), 0 4px 12px rgba(0,55,80,0.08) !important;
  border-color: rgba(0,186,251,0.30) !important;
}
.card-cat-badge {
  background: rgba(0,14,38,0.72) !important;
  border: 1px solid rgba(0,186,251,0.22) !important;
  color: #a8e8ff !important;
  backdrop-filter: blur(8px) !important;
}
.card-cat-badge:hover {
  background: #00bafb !important;
  color: #001c40 !important;
  border-color: transparent !important;
}
.card-body { background: #ffffff !important; padding: 22px 22px 20px !important; }
.card-date, .card-read, .card-sep { color: #7a95a8 !important; font-size: 12px !important; }
.card-title, a.card-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: #001c40 !important;
  line-height: 1.36 !important;
  text-decoration: none !important;
}
.card-title:hover, a.card-title:hover { color: #0090c8 !important; }
.card-excerpt { color: #4d6475 !important; font-size: 13.5px !important; }
.card-footer  { border-top: 1px solid #edf4fb !important; }
.card-author-name { color: #1a2d3f !important; font-size: 12.5px !important; font-weight: 600 !important; }
.card-read-link   { color: #00a8e8 !important; font-size: 12.5px !important; font-weight: 700 !important; }
.card-read-link:hover { color: #003750 !important; text-decoration: none !important; }

/* ────────────────────────────────────────────────────────────
   7. FEATURED CARD
   ──────────────────────────────────────────────────────────── */
.featured-card {
  background: #ffffff !important;
  border: 1px solid #ddeaf5 !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 28px rgba(0,55,80,0.10) !important;
}
.featured-title, a.featured-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: #001c40 !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  text-decoration: none !important;
}
.featured-title:hover { color: #0090c8 !important; }
.featured-excerpt { color: #4d6475 !important; line-height: 1.72 !important; }
.featured-footer  { border-top: 1px solid #edf4fb !important; }

/* ────────────────────────────────────────────────────────────
   8. POST CONTENT — H1 H2 H3 H4 H5 P
   ──────────────────────────────────────────────────────────── */
.post-content {
  font-size: 1.06rem !important;
  line-height: 1.86 !important;
  color: #253345 !important;
}

.post-content h1 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
  font-weight: 400 !important;
  color: #001c40 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.2rem !important;
}
.post-content h2 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(1.45rem, 2.5vw, 1.75rem) !important;
  font-weight: 400 !important;
  color: #001c40 !important;
  line-height: 1.26 !important;
  letter-spacing: -0.015em !important;
  margin: 2.8rem 0 1.1rem !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #ddeaf5 !important;
  position: relative !important;
}
.post-content h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 44px !important; height: 2px !important;
  background: linear-gradient(90deg, #00bafb, #003750) !important;
  border-radius: 2px !important;
}
.post-content h3 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(1.2rem, 2vw, 1.42rem) !important;
  font-weight: 400 !important;
  color: #002a48 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.012em !important;
  margin: 2.2rem 0 0.9rem !important;
  padding-left: 14px !important;
  border-left: 3px solid #00bafb !important;
}
.post-content h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #002040 !important;
  line-height: 1.38 !important;
  margin: 1.9rem 0 0.7rem !important;
}
.post-content h5,
.post-content h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #2d4460 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 1.6rem 0 0.6rem !important;
}
.post-content p {
  color: #253345 !important;
  font-size: 1.04rem !important;
  line-height: 1.88 !important;
  margin: 0 0 1.55rem !important;
}
.post-content a {
  color: #0077bb !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,119,187,0.30) !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
}
.post-content a:hover {
  color: #003750 !important;
  text-decoration-color: #003750 !important;
}
.post-content strong, .post-content b {
  font-weight: 700 !important;
  color: #101e30 !important;
}

/* ────────────────────────────────────────────────────────────
   9. LISTS
   ──────────────────────────────────────────────────────────── */
.post-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 1.55rem !important;
}
.post-content ul li {
  position: relative !important;
  padding: 5px 0 5px 26px !important;
  margin-bottom: 2px !important;
  color: #253345 !important;
  font-size: 1.04rem !important;
  line-height: 1.8 !important;
}
.post-content ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 4px !important; top: 14px !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #00bafb 0%, #003750 100%) !important;
  box-shadow: 0 0 0 2px rgba(0,186,251,0.15) !important;
}
.post-content ul ul { margin: 4px 0 8px 8px !important; }
.post-content ul ul li::before {
  width: 6px !important; height: 6px !important;
  background: none !important;
  border: 2px solid #00bafb !important;
  box-shadow: none !important; top: 13px !important;
}
.post-content ol {
  list-style: none !important;
  counter-reset: cfi-ol !important;
  padding-left: 0 !important;
  margin: 0 0 1.55rem !important;
}
.post-content ol li {
  counter-increment: cfi-ol !important;
  position: relative !important;
  padding: 5px 0 5px 36px !important;
  margin-bottom: 4px !important;
  color: #253345 !important;
  font-size: 1.04rem !important;
  line-height: 1.8 !important;
}
.post-content ol li::before {
  content: counter(cfi-ol) !important;
  position: absolute !important;
  left: 0 !important; top: 6px !important;
  width: 24px !important; height: 24px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #003750 0%, #006a96 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important; font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(0,55,80,0.22) !important;
}

/* ────────────────────────────────────────────────────────────
   10. BLOCKQUOTE
   ──────────────────────────────────────────────────────────── */
.post-content blockquote {
  margin: 2.4rem 0 !important;
  padding: 24px 28px 24px 32px !important;
  background: linear-gradient(135deg,
    rgba(0,186,251,0.06) 0%,
    rgba(0,55,80,0.04) 100%) !important;
  border: none !important;
  border-left: 4px solid #00bafb !important;
  border-radius: 0 16px 16px 0 !important;
  box-shadow: 0 3px 18px rgba(0,55,80,0.07) !important;
  position: relative !important;
}
.post-content blockquote::before {
  content: '\201C' !important;
  position: absolute !important;
  top: -4px !important; left: 14px !important;
  font-size: 4rem !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: rgba(0,186,251,0.20) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.post-content blockquote p {
  color: #002a48 !important;
  font-style: italic !important;
  font-size: 1.08rem !important;
  line-height: 1.76 !important;
  margin: 0 0 8px !important;
}
.post-content blockquote cite {
  display: block !important;
  margin-top: 12px !important;
  font-size: 0.87rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #7a95a8 !important;
}

/* ────────────────────────────────────────────────────────────
   11. IMAGES
   ──────────────────────────────────────────────────────────── */
.post-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 2rem auto !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 32px rgba(0,55,80,0.13),
    0 2px 8px rgba(0,55,80,0.08),
    0 0 0 1px rgba(0,55,80,0.05) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.post-content img:hover {
  box-shadow: 0 16px 52px rgba(0,55,80,0.18), 0 4px 14px rgba(0,55,80,0.10) !important;
  transform: scale(1.01) !important;
}
.post-content figure { margin: 2.2rem 0 !important; }
.post-content figcaption {
  font-size: 12.5px !important;
  color: #7a95a8 !important;
  font-style: italic !important;
  margin-top: 10px !important;
  text-align: center !important;
}
.post-content .wp-block-image img {
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,55,80,0.13), 0 0 0 1px rgba(0,55,80,0.05) !important;
}

/* ────────────────────────────────────────────────────────────
   12. CODE
   ──────────────────────────────────────────────────────────── */
.post-content :not(pre) > code {
  background: rgba(0,186,251,0.09) !important;
  color: #c0392b !important;
  border: 1px solid rgba(0,186,251,0.22) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  font-family: 'Fira Code', Consolas, monospace !important;
  font-size: 0.875em !important;
  font-weight: 500 !important;
}
.post-content pre {
  background: #0a1628 !important;
  color: #c9d8e8 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 24px 26px !important;
  margin: 2rem 0 !important;
  overflow-x: auto !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.28) !important;
}

/* ────────────────────────────────────────────────────────────
   13. HR
   ──────────────────────────────────────────────────────────── */
.post-content hr {
  border: none !important;
  height: 1px !important;
  margin: 3rem auto !important;
  width: 64px !important;
  background: linear-gradient(90deg, transparent, #00bafb, transparent) !important;
  border-radius: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   14. TABLE — PREMIUM ENTERPRISE DESIGN
   ════════════════════════════════════════════════════════════ */

/* ── Scroll wrapper (auto-injected via JS or manually wrap) ── */
.post-content .table-wrap,
.post-content .wp-block-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 6px -1px rgba(0,55,80,0.04),
    0 10px 32px rgba(0,55,80,0.10),
    0 0 0 1px rgba(0,55,80,0.06) !important;
  margin: 2.4rem 0 !important;
}

/* ── Table base ── */
.post-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14.5px !important;
  margin: 2.4rem 0 !important;
  background: #ffffff !important;
  box-shadow:
    0 4px 6px -1px rgba(0,55,80,0.04),
    0 10px 32px rgba(0,55,80,0.10),
    0 0 0 1px rgba(0,55,80,0.06) !important;
  table-layout: auto !important;
}

/* ── THEAD ── */
.post-content thead {
  position: relative !important;
}
.post-content thead tr {
  background: linear-gradient(130deg,
    #001c40 0%,
    #003060 40%,
    #004a78 75%,
    #0060a0 100%) !important;
  position: relative !important;
}

/* ── TH — header cells ── */
.post-content th {
  padding: 16px 22px !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  border: none !important;
  position: relative !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

/* Cyan accent line under each th */
.post-content th::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,186,251,0.50) 30%,
    rgba(0,186,251,0.80) 60%,
    transparent 100%) !important;
}

/* Vertical separator between th cells */
.post-content th:not(:last-child)::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important; top: 25% !important; bottom: 25% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.12) !important;
}

/* First th — rounded top-left */
.post-content thead tr th:first-child {
  border-top-left-radius: 20px !important;
}
/* Last th — rounded top-right */
.post-content thead tr th:last-child {
  border-top-right-radius: 20px !important;
}

/* ── TBODY ── */
.post-content tbody tr {
  transition: background 0.14s ease !important;
  position: relative !important;
}

/* Row stripe — even rows get a soft tinted bg */
.post-content tbody tr:nth-child(even) {
  background: #f6faff !important;
}
.post-content tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

/* Row hover — cyan-tinted highlight + left accent bar */
.post-content tbody tr:hover {
  background: #e8f5ff !important;
  box-shadow: inset 3px 0 0 #00bafb !important;
}

/* Last row — rounded bottom corners */
.post-content tbody tr:last-child td:first-child {
  border-bottom-left-radius: 20px !important;
}
.post-content tbody tr:last-child td:last-child {
  border-bottom-right-radius: 20px !important;
}

/* ── TD — data cells ── */
.post-content td {
  padding: 14px 22px !important;
  color: #1e3145 !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid #e8f0f8 !important;
  transition: background 0.14s !important;
  word-break: break-word !important;
}

/* Remove border on last row */
.post-content tbody tr:last-child td {
  border-bottom: none !important;
}

/* Vertical separator between td cells */
.post-content td:not(:last-child) {
  border-right: 1px solid #edf4fb !important;
}
.post-content th:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── First column — label / key column ── */
.post-content td:first-child {
  font-weight: 600 !important;
  color: #002a48 !important;
  font-size: 14px !important;
  background: transparent !important;
  white-space: nowrap !important;
}

/* ── TFOOT ── */
.post-content tfoot tr {
  background: linear-gradient(90deg, #f0f7ff 0%, #e6f2fb 100%) !important;
}
.post-content tfoot td {
  font-weight: 700 !important;
  color: #002040 !important;
  font-size: 13.5px !important;
  border-top: 2px solid #cce3f5 !important;
  border-bottom: none !important;
  letter-spacing: 0.01em !important;
}

/* ── CAPTION ── */
.post-content table caption {
  caption-side: top !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: #001c40 !important;
  text-align: left !important;
  padding: 0 0 12px 2px !important;
  margin-bottom: 4px !important;
  border-bottom: none !important;
}

/* ── WordPress table block specific ── */
.post-content .wp-block-table table {
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.post-content .wp-block-table {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 6px -1px rgba(0,55,80,0.04),
    0 10px 32px rgba(0,55,80,0.10),
    0 0 0 1px rgba(0,55,80,0.06) !important;
  margin: 2.4rem 0 !important;
}
.post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: #f6faff !important;
}
.post-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background: #ffffff !important;
}
.post-content .wp-block-table figcaption {
  font-size: 12.5px !important;
  color: #7a95a8 !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-style: italic !important;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 640px) {
  .post-content table { font-size: 13px !important; }
  .post-content th    { padding: 12px 14px !important; font-size: 11px !important; }
  .post-content td    { padding: 11px 14px !important; font-size: 13px !important; }
  .post-content td:first-child { white-space: normal !important; }
}

/* ════════════════════════════════════════════════════════════
   15. TOC BOX
   ════════════════════════════════════════════════════════════ */
.toc-box {
  background: linear-gradient(135deg, #f4f9ff 0%, #eef5fb 100%) !important;
  border: 1.5px solid #d8eaf5 !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin: 2.2rem 0 !important;
  box-shadow: 0 2px 12px rgba(0,55,80,0.06) !important;
}
.toc-box-title {
  color: #002040 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
.toc-box a {
  color: #003060 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
.toc-box a:hover { color: #00bafb !important; }
.toc-box a.active { color: #00bafb !important; font-weight: 700 !important; }

/* ────────────────────────────────────────────────────────────
   16. SIDEBAR WIDGETS
   ──────────────────────────────────────────────────────────── */
.sidebar-widget {
  background: #ffffff !important;
  border: 1px solid #ddeaf5 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,55,80,0.06) !important;
  padding: 24px 22px !important;
}
.widget-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 1.05rem !important;
  color: #001c40 !important;
  border-bottom: 1.5px solid #eef4fb !important;
  padding-bottom: 12px !important;
  margin: 0 0 16px !important;
}
.widget-title::after {
  background: linear-gradient(90deg, #003750, #00bafb) !important;
  height: 2.5px !important;
  width: 36px !important;
  border-radius: 3px !important;
}
.popular-title, a.popular-title {
  color: #001c40 !important; font-weight: 600 !important; font-size: 13px !important;
}
a.popular-title:hover { color: #0090c8 !important; }
.popular-meta { color: #7a95a8 !important; font-size: 11.5px !important; }
.popular-item { border-bottom: 1px solid #eef4fb !important; }
.cat-list-name  { color: #1a2d3f !important; font-weight: 500 !important; font-size: 14px !important; }
.cat-list-count {
  background: rgba(0,186,251,0.10) !important;
  color: #007aaa !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
}
.cat-list-item:hover { background: #f0f9ff !important; }
.tag-chip {
  background: #f0f8ff !important;
  color: #1a3a58 !important;
  border: 1px solid #cce3f4 !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-weight: 500 !important;
}
.tag-chip:hover {
  background: #00bafb !important;
  color: #001c40 !important;
  border-color: transparent !important;
  text-decoration: none !important;
}
.newsletter-widget {
  background: linear-gradient(150deg, #00102e 0%, #002850 55%, #003d66 100%) !important;
  border: 1px solid rgba(0,186,251,0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.18) !important;
}
.nl-title    { color: #ffffff !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.nl-subtitle { color: rgba(255,255,255,0.58) !important; }
.nl-label    { color: #52d6ff !important; letter-spacing: 2px !important; }
.nl-input {
  background: rgba(255,255,255,0.10) !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}
.nl-input:focus {
  border-color: #00bafb !important;
  background: rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 0 3px rgba(0,186,251,0.14) !important;
}
.nl-btn {
  background: linear-gradient(135deg, #f7b731 0%, #e09800 100%) !important;
  color: #001c40 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 14px rgba(232,160,0,0.38) !important;
}
.nl-btn:hover {
  background: linear-gradient(135deg, #ffc542 0%, #f0aa00 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(232,160,0,0.46) !important;
}
.sidebar-cta {
  background: linear-gradient(135deg, #f7b731 0%, #e8a800 60%, #d99400 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 24px rgba(232,168,0,0.28) !important;
}
.sidebar-cta-title { color: #001c40 !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.sidebar-cta-text  { color: rgba(0,28,64,0.72) !important; }
.sidebar-cta-btn {
  background: #001c40 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.sidebar-cta-btn:hover { background: #003060 !important; color: #ffffff !important; }

/* ────────────────────────────────────────────────────────────
   17. AUTHOR BOX
   ──────────────────────────────────────────────────────────── */
.author-box {
  background: linear-gradient(135deg, #f4f9ff 0%, #eef5fb 100%) !important;
  border: 1.5px solid #d8eaf5 !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 18px rgba(0,55,80,0.08) !important;
}
.author-name { color: #001c40 !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.author-role { color: #0090c8 !important; letter-spacing: 0.9px !important; }
.author-bio  { color: #4d6475 !important; }
.author-link { color: #00a8e8 !important; font-weight: 700 !important; }
.author-link:hover { color: #003750 !important; }

/* ────────────────────────────────────────────────────────────
   18. SHARE BUTTONS
   ──────────────────────────────────────────────────────────── */
.share-bar {
  background: linear-gradient(135deg, #f4f9ff 0%, #edf6fc 100%) !important;
  border: 1.5px solid #d8eaf5 !important;
  border-radius: 14px !important;
}
.share-bar-label { color: #001c40 !important; font-weight: 700 !important; font-size: 13px !important; }
.share-btn       { border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; }
.share-facebook  { background: #1877f2 !important; }
.share-twitter   { background: #0f1419 !important; }
.share-linkedin  { background: #0a66c2 !important; }
.share-whatsapp  { background: #1da851 !important; }
.share-copy {
  background: #ffffff !important;
  color: #1a2d3f !important;
  border: 1.5px solid #cce3f4 !important;
}
.share-copy:hover { background: #f0f9ff !important; box-shadow: none !important; }

/* ────────────────────────────────────────────────────────────
   19. POST NAVIGATION
   ──────────────────────────────────────────────────────────── */
.post-nav-link {
  background: #ffffff !important;
  border: 1.5px solid #ddeaf5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,55,80,0.05) !important;
}
.post-nav-link:hover {
  border-color: #00bafb !important;
  background: #f0f9ff !important;
  box-shadow: 0 5px 20px rgba(0,186,251,0.14) !important;
  text-decoration: none !important;
}
.post-nav-dir   { color: #7a95a8 !important; font-size: 11px !important; }
.post-nav-title { color: #001c40 !important; font-weight: 600 !important; font-size: 13.5px !important; }

/* ────────────────────────────────────────────────────────────
   20. PAGINATION
   ──────────────────────────────────────────────────────────── */
.pagination .page-numbers {
  background: #ffffff !important;
  border: 1.5px solid #ddeaf5 !important;
  color: #1a2d3f !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.pagination .page-numbers:hover {
  background: #e8f6ff !important;
  border-color: #00bafb !important;
  color: #005880 !important;
}
.pagination .page-numbers.current {
  background: linear-gradient(135deg, #003750 0%, #0090c8 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(0,144,200,0.32) !important;
}

/* ────────────────────────────────────────────────────────────
   21. POST TAGS
   ──────────────────────────────────────────────────────────── */
.post-tag {
  background: #f0f8ff !important;
  color: #1a3a58 !important;
  border: 1px solid #cce3f4 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 13px !important;
}
.post-tag:hover {
  background: #00bafb !important;
  color: #001c40 !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* ────────────────────────────────────────────────────────────
   22. COMMENTS
   ──────────────────────────────────────────────────────────── */
.comment-item {
  background: #ffffff !important;
  border: 1px solid #ddeaf5 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0,55,80,0.05) !important;
}
.comment-item.depth-2 {
  background: #f6faff !important;
  border-color: rgba(0,186,251,0.14) !important;
  margin-left: 36px !important;
}
.comment-author-name { color: #001c40 !important; font-weight: 700 !important; }
.comment-date-str    { color: #7a95a8 !important; }
.comment-text p      { color: #253345 !important; line-height: 1.76 !important; }
.comment-reply-link  { color: #00a8e8 !important; font-weight: 600 !important; }
.comments-title      { color: #001c40 !important; font-family: 'DM Serif Display', Georgia, serif !important; }

/* ────────────────────────────────────────────────────────────
   23. CTA SECTION
   ──────────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(145deg,
    #00102e 0%, #001c4a 25%, #002f5a 55%,
    #004470 80%, #005c88 100%) !important;
}
.cta-trust-item { color: rgba(255,255,255,0.64) !important; }

/* ────────────────────────────────────────────────────────────
   24. FOOTER
   ──────────────────────────────────────────────────────────── */
.cfi-footer {
  background: linear-gradient(165deg, #00091f 0%, #001030 50%, #001840 100%) !important;
  border-top: 1px solid rgba(0,186,251,0.08) !important;
}
.footer-col-title { color: rgba(255,255,255,0.88) !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
.footer-links a   { color: rgba(255,255,255,0.50) !important; }
.footer-links a:hover { color: #52d6ff !important; }
.footer-desc   { color: rgba(255,255,255,0.50) !important; }
.footer-copy   { color: rgba(255,255,255,0.32) !important; }
.footer-status { color: rgba(255,255,255,0.32) !important; }
.social-link {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.55) !important;
}
.social-link:hover {
  background: rgba(0,186,251,0.16) !important;
  border-color: rgba(0,186,251,0.38) !important;
  color: #52d6ff !important;
}

/* ────────────────────────────────────────────────────────────
   25. BUTTONS
   ──────────────────────────────────────────────────────────── */
.btn-primary-cfi {
  background: linear-gradient(135deg, #f7b731 0%, #e09800 100%) !important;
  color: #001c40 !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 16px rgba(232,160,0,0.36), 0 1px 0 rgba(255,255,255,0.18) inset !important;
}
.btn-primary-cfi:hover {
  background: linear-gradient(135deg, #ffc542 0%, #f0aa00 100%) !important;
  color: #001c40 !important;
  box-shadow: 0 7px 26px rgba(232,160,0,0.48) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.btn-outline-cfi {
  border: 2px solid #00bafb !important;
  color: #003750 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.btn-outline-cfi:hover { background: #00bafb !important; color: #001c40 !important; }
.btn-secondary-cfi {
  border: 1.5px solid rgba(255,255,255,0.30) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: 12px !important;
}
.btn-secondary-cfi:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.60) !important;
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────
   26. SEARCH BOX
   ──────────────────────────────────────────────────────────── */
.search-box input[type="search"],
.search-box input[type="text"] {
  border: 1.5px solid #d8e8f5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #111c2d !important;
}
.search-box input:focus {
  border-color: #00bafb !important;
  box-shadow: 0 0 0 3px rgba(0,186,251,0.12) !important;
}
.search-btn {
  background: linear-gradient(135deg, #003750, #0090c8) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.search-box.hero-search input {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}
.search-box.hero-search input:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(0,186,251,0.55) !important;
}

/* ────────────────────────────────────────────────────────────
   27. MODALS
   ──────────────────────────────────────────────────────────── */
.modal-box {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 100px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,186,251,0.08) !important;
}
.modal-title { color: #001c40 !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.modal-sub   { color: #7a95a8 !important; }
.modal-label { color: #002040 !important; font-weight: 600 !important; }
.modal-input {
  border: 1.5px solid #d8e8f5 !important;
  border-radius: 12px !important;
  color: #111c2d !important;
  font-size: 15px !important;
}
.modal-input:focus {
  border-color: #00bafb !important;
  box-shadow: 0 0 0 3px rgba(0,186,251,0.11) !important;
}

/* ────────────────────────────────────────────────────────────
   28. MISC DETAILS
   ──────────────────────────────────────────────────────────── */
#reading-progress {
  background: linear-gradient(90deg, #00bafb 0%, #0090c8 40%, #f7b731 100%) !important;
  height: 3px !important;
  box-shadow: 0 0 8px rgba(0,186,251,0.55) !important;
}
#backToTop {
  background: linear-gradient(135deg, #003750 0%, #00a8d8 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 20px rgba(0,55,80,0.30) !important;
}
#backToTop:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0,55,80,0.38) !important;
}
.load-more-btn {
  background: #ffffff !important;
  border: 1.5px solid #00bafb !important;
  color: #003750 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.load-more-btn:hover {
  background: #00bafb !important;
  color: #001c40 !important;
  box-shadow: 0 6px 22px rgba(0,186,251,0.30) !important;
}
.breadcrumb a { color: rgba(255,255,255,0.62) !important; }
.breadcrumb a:hover { color: #ffffff !important; }
.breadcrumb .sep { color: rgba(255,255,255,0.30) !important; }
.breadcrumb .current { color: #f7b731 !important; font-weight: 600 !important; }
::selection { background: rgba(0,186,251,0.20) !important; color: #001c40 !important; }
::-webkit-scrollbar { width: 5px !important; }
::-webkit-scrollbar-track { background: #eef4fb !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00bafb, #003750) !important;
  border-radius: 4px !important;
}