/* =========================================================
   DARK MODE PALETTE
========================================================= */
:root {
  --ai-dark-bg: #16191e;          /* page background (grey) */
  --ai-dark-bg-header: #1c1f25;   /* header / nav / dropdown */
  --ai-dark-bg-card: #1b1f24;     /* cards / post cards */
  --ai-dark-bg-soft: #1f2329;     /* widgets / TOC / teasers */
  --ai-dark-border: #2a2f36;
  --ai-dark-border-soft: #323841;

  --ai-dark-text: #d6dbe3;
  --ai-dark-text-muted: #9ea4af;
  --ai-dark-heading: #ffffff;

  --ai-dark-link: #7db4ff;
  --ai-dark-link-hover: #a7cdff;
}

/* =========================================================
   GLOBAL
========================================================= */
.dark-mode html,
.dark-mode body,
.dark-mode .l-viewport {
  background: var(--ai-dark-bg) !important;
  color: var(--ai-dark-text) !important;
}

.dark-mode body {
  text-rendering: optimizeLegibility;
}

.dark-mode p,
.dark-mode span,
.dark-mode li,
.dark-mode small,
.dark-mode strong,
.dark-mode time {
  color: var(--ai-dark-text) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--ai-dark-heading) !important;
}

.dark-mode a {
  color: var(--ai-dark-link) !important;
}

.dark-mode a:hover {
  color: var(--ai-dark-link-hover) !important;
}

/* Subtle horizontal rules only when explicitly used */
.dark-mode hr,
.dark-mode .gh-content hr {
  border: 0;
  border-top: 1px solid var(--ai-dark-border-soft) !important;
}

/* =========================================================
   HEADER + NAV + DROPDOWN
========================================================= */

/* Remove any gradients/overlays */
.dark-mode .c-header::before,
.dark-mode .c-header::after,
.dark-mode .c-header__inner::before,
.dark-mode .c-header__inner::after,
.dark-mode .l-viewport::before,
.dark-mode .l-viewport::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Solid dark header with a single bottom line
   (this is the ONLY line above the tags) */
.dark-mode .c-header,
.dark-mode .c-header__inner,
.dark-mode .c-nav-wrap {
  background: var(--ai-dark-bg-header) !important;
  border-bottom: 1px solid var(--ai-dark-border) !important;
  box-shadow: none !important;
}

.dark-mode .c-logo__img {
  filter: brightness(0.9);
}

.dark-mode .c-nav__link {
  color: var(--ai-dark-text) !important;
}

.dark-mode .c-nav__link--current {
  color: var(--ai-dark-heading) !important;
}

/* Dropdown menu */
.dark-mode .c-nav__dropDown,
.dark-mode .c-nav__dropDown-menu,
.dark-mode .c-nav__dropDown-menu li,
.dark-mode .c-nav__dropDown-menu a {
  background: var(--ai-dark-bg-header) !important;
  color: var(--ai-dark-text) !important;
  border-color: var(--ai-dark-border) !important;
  box-shadow: none !important;
}

.dark-mode .c-nav__dropDown-menu a:hover {
  background: var(--ai-dark-bg-soft) !important;
  color: var(--ai-dark-heading) !important;
}

/* Search icon and sun/moon + header buttons:
   remove 3D shadows and strong outlines */
.dark-mode .c-nav__icon-search,
.dark-mode .c-nav__icon-search *,
.dark-mode .c-nav__item .c-btn,
.dark-mode .c-nav__item button,
.dark-mode .c-nav__item a.c-btn,
.dark-mode #ai-dark-toggle {
  background: var(--ai-dark-bg-header) !important;
  border: 1px solid var(--ai-dark-border-soft) !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark-mode .c-nav__icon-search svg path,
.dark-mode .c-nav__icon-search svg line {
  stroke: var(--ai-dark-text-muted) !important;
}

/* Remove focus glow around header buttons */
.dark-mode .c-nav__item .c-btn:focus,
.dark-mode .c-nav__item button:focus,
.dark-mode .c-nav__item a.c-btn:focus,
.dark-mode #ai-dark-toggle:focus {
  box-shadow: none !important;
  outline: 1px solid var(--ai-dark-border-soft) !important;
}

/* =========================================================
   TAG STRIP (TOP TAG MENU)
   Only the header line above it remains
========================================================= */
.dark-mode .c-tags-list-container,
.dark-mode .c-tags-list-wrap {
  background: var(--ai-dark-bg-header) !important;
  border: none !important; /* no extra lines here */
}

.dark-mode .c-tags-list__link {
  color: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-tags-list__link--current,
.dark-mode .c-tags-list__link:hover {
  color: var(--ai-dark-heading) !important;
  border-color: var(--ai-dark-link) !important;
}

/* =========================================================
   SINGLE POST PAGE — REMOVE ALL OUTLINES
========================================================= */

/* Outer post card */
.dark-mode .c-post,
.dark-mode .c-post__inner {
  background: var(--ai-dark-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Layout wrappers around title/description/meta */
.dark-mode .c-post__header,
.dark-mode .c-post__hero,
.dark-mode .c-post__title-wrap,
.dark-mode .c-post__content,
.dark-mode .c-post__meta,
.dark-mode .c-post-author,
.dark-mode .c-post .o-grid,
.dark-mode .gh-content,
.dark-mode .gh-content > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tag pill on right (e.g. "jesus") */
.dark-mode .c-post__tags,
.dark-mode .c-post__tags a,
.dark-mode .c-post-tags a,
.dark-mode .c-tags a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Koenig cards inside post */
.dark-mode .kg-card {
  background: var(--ai-dark-bg-soft) !important;
  border: 1px solid var(--ai-dark-border) !important;
  box-shadow: none !important;
}

/* Code blocks */
.dark-mode pre,
.dark-mode code {
  background: #15181e !important;
  color: #e6e9ef !important;
  border: 1px solid var(--ai-dark-border-soft) !important;
}

/* Blockquotes */
.dark-mode blockquote {
  border-left: 3px solid var(--ai-dark-link) !important;
}

/* Author box at bottom of post (if present) */
.dark-mode .c-post-author,
.dark-mode .c-post-author__inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mini author card version */
.dark-mode .c-card-author-mini {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .c-card-author-mini__media img {
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .c-card-author-mini__name {
  color: var(--ai-dark-heading) !important;
}

.dark-mode .c-card-author-mini__bio {
  color: var(--ai-dark-text-muted) !important;
}

/* =========================================================
   HOMEPAGE POST CARDS (FEED)
========================================================= */
.dark-mode .c-post-card,
.dark-mode .c-post-card__content,
.dark-mode .c-post-card--featured,
.dark-mode .c-story-card,
.dark-mode .c-story-card__inner {
  background: var(--ai-dark-bg-card) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.dark-mode .c-post-card__title {
  color: var(--ai-dark-heading) !important;
}

.dark-mode .c-post-card__excerpt {
  color: var(--ai-dark-text) !important;
}

.dark-mode .c-post-card__meta,
.dark-mode .c-post-card time {
  color: var(--ai-dark-text-muted) !important;
}

/* =========================================================
   TABLE OF CONTENTS
========================================================= */
.dark-mode .c-table-of-contents {
  background: var(--ai-dark-bg-soft) !important;
  border: 1px solid var(--ai-dark-border) !important;
  box-shadow: none !important;
}

.dark-mode .c-table-of-contents__heading {
  color: var(--ai-dark-heading) !important;
}

.dark-mode .c-table-of-contents__list-link {
  color: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-table-of-contents__list-link.is-active-link,
.dark-mode .c-table-of-contents__list-link:hover {
  color: var(--ai-dark-link) !important;
}

/* =========================================================
   SIDEBAR / WIDGETS / NEWSLETTER / FEATURED POSTS
========================================================= */
.dark-mode .c-sidebar {
  background: transparent !important;
}

.dark-mode .c-widget {
  background: var(--ai-dark-bg-soft) !important;
  border: 1px solid var(--ai-dark-border) !important;
  box-shadow: none !important;
}

/* Widget title bar */
.dark-mode .c-title-bar,
.dark-mode .c-title-bar__title {
  background: var(--ai-dark-bg-header) !important;
  border-bottom: 1px solid var(--ai-dark-border-soft) !important;
  color: var(--ai-dark-heading) !important;
}

/* Featured posts teasers */
.dark-mode .c-teaser {
  background: var(--ai-dark-bg-soft) !important;
  border: none !important;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.dark-mode .c-teaser__title {
  color: var(--ai-dark-heading) !important;
}

.dark-mode .c-teaser__date {
  color: var(--ai-dark-text-muted) !important;
}

/* Newsletter */
.dark-mode .c-subscribe {
  background: var(--ai-dark-bg-soft) !important;
  border: none !important;
}

.dark-mode .c-subscribe__title {
  color: var(--ai-dark-heading) !important;
}

.dark-mode .c-subscribe-form__input {
  background: var(--ai-dark-bg-header) !important;
  color: var(--ai-dark-text) !important;
}

/* =========================================================
   SOCIAL + SHARE ICONS
========================================================= */
.dark-mode .c-social-icons {
  background: var(--ai-dark-bg-soft) !important;
  border: none !important;
}

.dark-mode .c-social-icons__item a,
.dark-mode .c-social-icons__icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .c-social-icons__item svg path,
.dark-mode .c-social-icons__item svg use {
  fill: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-social-icons__item:hover svg path,
.dark-mode .c-social-icons__item:hover svg use {
  fill: var(--ai-dark-link) !important;
}

/* Share icons under post */
.dark-mode .c-share__item {
  margin-right: 0.35rem;
}

.dark-mode .c-share__link {
  background: var(--ai-dark-bg-soft) !important;
  border-radius: 999px !important;
  border: 1px solid var(--ai-dark-border-soft) !important;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dark-mode .c-share__icon svg path,
.dark-mode .c-share__icon svg use {
  fill: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-share__item:hover .c-share__link {
  border-color: var(--ai-dark-link) !important;
}

.dark-mode .c-share__item:hover .c-share__icon svg path,
.dark-mode .c-share__item:hover .c-share__icon svg use {
  fill: var(--ai-dark-link) !important;
}

/* =========================================================
   FOOTER
========================================================= */
.dark-mode .c-footer,
.dark-mode .c-footer__inner {
  background: var(--ai-dark-bg-header) !important;
  color: var(--ai-dark-text-muted) !important;
  border-top: 1px solid var(--ai-dark-border) !important;
}

.dark-mode .c-footer a {
  color: var(--ai-dark-link) !important;
}

/* =========================================================
   FORMS / BUTTONS
========================================================= */
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode button,
.dark-mode .c-btn {
  background: var(--ai-dark-bg-soft) !important;
  color: var(--ai-dark-text) !important;
  border: 1px solid var(--ai-dark-border-soft) !important;
}

.dark-mode ::placeholder {
  color: var(--ai-dark-text-muted) !important;
}

/* =========================================================
   DARK MODE TOGGLE
========================================================= */
#ai-dark-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 18px;
}

/* =========================================================
   FINAL HEADER LINE REMOVAL — KILL ALL REMAINING FRAMES
========================================================= */

/* remove all outlines / inset borders Krabi injects */
.dark-mode .c-header,
.dark-mode .c-header__inner,
.dark-mode .c-logo,
.dark-mode .c-nav-wrap,
.dark-mode .c-nav,
.dark-mode .c-nav--left,
.dark-mode .c-nav--right,
.dark-mode .o-plain-list,
.dark-mode .o-container,
.dark-mode .c-header__inner > *,
.dark-mode .c-nav__item,
.dark-mode .c-nav__item > * {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* o-container wrapper in header creates a phantom horizontal line */
.dark-mode .c-header .o-container {
  background: var(--ai-dark-bg-header) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* remove inset frame around search button + sun/moon toggle */
.dark-mode .c-nav__icon-search,
.dark-mode .toggle-search-button,
.dark-mode #ai-dark-toggle,
.dark-mode .c-nav__item button,
.dark-mode .c-nav__item .c-btn {
  background: var(--ai-dark-bg-header) !important;
  border: 1px solid var(--ai-dark-border-soft) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* remove the weird double-line directly under nav */
.dark-mode .c-header__inner::after,
.dark-mode .c-nav-wrap::after,
.dark-mode .c-header__inner::before,
.dark-mode .c-nav-wrap::before {
  content: none !important;
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* remove line around the logo container */
.dark-mode .c-logo,
.dark-mode .c-logo * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* remove top line ABOVE the categories */
.dark-mode .c-tags-list-container::before,
.dark-mode .c-tags-list-wrap::before {
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   FINAL FIX — REMOVE BOX AROUND SUN + SEARCH BUTTONS
========================================================= */

/* All header interactive buttons */
.dark-mode .c-nav__item button,
.dark-mode .c-nav__item .c-btn,
.dark-mode .toggle-search-button,
.dark-mode #ai-dark-toggle,
.dark-mode .c-btn--outline,
.dark-mode .c-btn--small {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Inside search button */
.dark-mode .toggle-search-button * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove inset shadow Krabi injects */
.dark-mode .c-nav__item button,
.dark-mode .c-nav__item .c-btn {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Remove the focus outline glow */
.dark-mode .c-nav__item button:focus,
.dark-mode .toggle-search-button:focus,
.dark-mode #ai-dark-toggle:focus,
.dark-mode .c-btn--outline:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Titles float with no background, no bar, no shadow */
.dark-mode .c-title-bar,
.dark-mode .c-title-bar__title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove Krabi underline bar */
.dark-mode .c-title-bar__title::before,
.dark-mode .c-title-bar__title::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Keep proper spacing between title and its box */
.dark-mode .c-title-bar {
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
}

/* Widget wrapper becomes fully invisible */
.dark-mode .c-widget {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
}

/* The REAL panel (posts box) */
.dark-mode .c-widget > .c-teaser,
.dark-mode .c-widget > .c-card-author-mini,
.dark-mode .c-widget > .c-teaser:first-child,
.dark-mode .c-widget > div:not(.c-title-bar) {
  background: #1b1f24 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin: 0 0 25px 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   ARCHIVE TITLE (Tags, Authors, Search Results, etc.)
========================================================= */

/* Container */
.dark-mode .c-archive {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 25px 0 !important;
}

/* Title text */
.dark-mode .c-archive__title {
  color: var(--ai-dark-heading) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

/* Remove default Ghost underline bar */
.dark-mode .c-archive__title::before,
.dark-mode .c-archive__title::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   TAG CARD — REMOVE WHITE BOX + DARK MODE RESTYLE
========================================================= */

.dark-mode .c-tag-card__content {
  background: var(--ai-dark-bg-soft) !important;   /* same dark box as posts */
  border: 1px solid var(--ai-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--ai-dark-text) !important;
}

/* Tag card title */
.dark-mode .c-tag-card__title,
.dark-mode .c-tag-card__title a {
  color: var(--ai-dark-heading) !important;
}

/* Description text */
.dark-mode .c-tag-card__description {
  color: var(--ai-dark-text-muted) !important;
}

/* Prevent Krabi card wrapper from adding any light borders/shadows */
.dark-mode .c-tag-card,
.dark-mode .c-tag-card * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================================================
   TAG CARD — SUBTLE LIFT / SHADOW FOR DARK MODE
========================================================= */

.dark-mode .c-tag-card__content {
  background: rgba(255, 255, 255, 0.015) !important; /* barely visible tint */
  border-radius: 12px !important;
  padding: 28px !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(2px); /* smooths blending */
}

/* Ensure wrapper stays invisible */
.dark-mode .c-tag-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.dark-mode .c-teaser {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* =========================================================
   FIX: POST TAG LINKS (they are blending into background)
========================================================= */
.dark-mode .c-post__tags a,
.dark-mode .c-tags a,
.dark-mode .c-post-tags a {
    background: rgba(255,255,255,0.06) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    color: var(--ai-dark-heading) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.dark-mode .c-post__tags a:hover {
    background: rgba(255,255,255,0.12) !important;
    color: var(--ai-dark-link) !important;
}


/* =========================================================
   FIX: AUTHOR CARD ON POST (c-card-author)
========================================================= */
.dark-mode .c-card-author,
.dark-mode .c-card-author__content {
    background: rgba(255,255,255,0.02) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    padding: 24px !important;
    color: var(--ai-dark-text) !important;
}

.dark-mode .c-card-author__name a {
    color: var(--ai-dark-heading) !important;
}

.dark-mode .c-card-author__media img {
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

.dark-mode .c-card-author__content a svg path {
    fill: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-card-author__content a:hover svg path {
    fill: var(--ai-dark-link) !important;
}


/* =========================================================
   FIX: COMMENTS CONTAINER (outer shell)
========================================================= */
.dark-mode .u-bg-secondary,
.dark-mode .u-border {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* =========================================================
   FINAL DARK MODE FIX PACK
   (Tags, Author Box, Comments Wrapper, Comments iframe)
========================================================= */

/* ---------------------------------------------------------
   TAG PILLS inside posts
--------------------------------------------------------- */
.dark-mode .c-post__tags a,
.dark-mode .c-tags a,
.dark-mode .c-post-tags a {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    color: var(--ai-dark-link) !important;
    box-shadow: none !important;
}

.dark-mode .c-post__tags a:hover,
.dark-mode .c-tags a:hover,
.dark-mode .c-post-tags a:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: var(--ai-dark-link) !important;
    color: var(--ai-dark-link-hover) !important;
}


/* =========================================================
   INLINE AUTHOR CARD (c-card-author)
   Unified elevated look matching tag archive panel
========================================================= */

.dark-mode .c-card-author {
    background: var(--ai-dark-bg-soft) !important;
    border: 1px solid var(--ai-dark-border-soft) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    margin: 30px 0 !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.22) !important;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Media / Image */
.dark-mode .c-card-author__media img {
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Content block */
.dark-mode .c-card-author__content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Name title */
.dark-mode .c-card-author__name,
.dark-mode .c-card-author__name a {
    color: var(--ai-dark-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Social icons (X/Twitter) using SVG) */
.dark-mode .c-card-author__content svg path,
.dark-mode .c-card-author__content svg use {
    fill: var(--ai-dark-link) !important;
}

.dark-mode .c-card-author__content a:hover svg path {
    fill: var(--ai-dark-link-hover) !important;
}

/* Remove Ghost/Krabi unwanted borders around anything */
.dark-mode .c-card-author *,
.dark-mode .c-card-author__media,
.dark-mode .c-card-author__content {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}



/* =========================================================
   COMMENTS WRAPPER (outer white box)
========================================================= */
.dark-mode .u-bg-secondary,
.dark-mode .u-border,
.dark-mode .u-bg-secondary.u-border,
.dark-mode .u-p-32 {
    background: var(--ai-dark-bg-soft) !important;
    border: 1px solid var(--ai-dark-border-soft) !important;
    color: var(--ai-dark-text) !important;
    box-shadow: none !important;

}

/* =========================================================
   GHOST COMMENTS CTA (Start the conversation)
   Force proper dark mode text & backgrounds
========================================================= */

/* CTA wrapper */
.dark-mode section[data-testid="cta-box"] {
    background: transparent !important;
    color: rgba(255,255,255,0.85) !important;
}

/* All text inside */
.dark-mode section[data-testid="cta-box"] * {
    color: rgba(255,255,255,0.85) !important;
}

/* Main heading */
.dark-mode section[data-testid="cta-box"] h1 {
    color: rgba(255,255,255,0.95) !important;
}

/* Subtext paragraph */
.dark-mode section[data-testid="cta-box"] p {
    color: rgba(255,255,255,0.7) !important;
}

/* "Already a member?" text */
.dark-mode section[data-testid="cta-box"] p.text-md {
    color: rgba(255,255,255,0.55) !important;
}

/* Sign in */
.dark-mode section[data-testid="cta-box"] button[data-testid="signin-button"] {
    color: var(--ai-dark-link) !important;
}

/* Sign up button (keep blue, but readable text) */
.dark-mode section[data-testid="cta-box"] button[data-testid="signup-button"] {
    color: #fff !important;
}

/* Tailwind text-black override */
.dark-mode .text-black {
    color: rgba(255,255,255,0.95) !important;
}

/* Tailwind neutral override (text-neutral-600) */
.dark-mode .text-neutral-600 {
    color: rgba(255,255,255,0.7) !important;
}

/* Tailwind opacity text override */
.dark-mode .text-[rgba(0,0,0,0.4)] {
    color: rgba(255,255,255,0.5) !important;
}

  /* =========================================================
   AUTHOR PAGE — FULL DARK MODE FIX
   (Header panel, name, media, social links, tag pills)
========================================================= */

/* Author wrapper */
.dark-mode .c-author {
    background: var(--ai-dark-bg-soft) !important;
    border: 1px solid var(--ai-dark-border-soft) !important;
    border-radius: 14px !important;
    padding: 30px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important;
}

/* Author image (no box/border) */
.dark-mode .c-author__media img {
    border: none !important;
    box-shadow: none !important;
}

/* Author name */
.dark-mode .c-author__title {
    color: var(--ai-dark-heading) !important;
}

/* Author social links list */
.dark-mode .c-author__links,
.dark-mode .c-author__links-item,
.dark-mode .c-author__links a {
    color: var(--ai-dark-link) !important;
    background: transparent !important;
    border: none !important;
}

/* Hover color for socials */
.dark-mode .c-author__links a:hover {
    color: var(--ai-dark-link-hover) !important;
}

/* Posts count (icon + text) */
.dark-mode .c-author__links-item {
    color: var(--ai-dark-text-muted) !important;
}

/* Icon color in posts count */
.dark-mode .c-author__links-icon svg use,
.dark-mode .c-author__links-icon svg path {
    fill: var(--ai-dark-text-muted) !important;
}

/* =========================================================
   TAG ARCHIVE PAGE — DARK MODE ELEVATED PANEL
========================================================= */

.dark-mode .c-archive {
    background: var(--ai-dark-bg-soft) !important;
    border: 1px solid var(--ai-dark-border-soft) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    margin-bottom: 35px !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

/* Title */
.dark-mode .c-archive__title {
    color: var(--ai-dark-heading) !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 10px !important;
}

/* Remove Ghost underline decoration */
.dark-mode .c-archive__title::before,
.dark-mode .c-archive__title::after {
    content: none !important;
    display: none !important;
}

/* Description / tagline */
.dark-mode .c-archive__description {
    color: var(--ai-dark-text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Ensure no accidental inner borders */
.dark-mode .c-archive * {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* =========================================================
   AUTHOR PAGE — TEXT IN POST LISTING
========================================================= */
.dark-mode .c-post-card__title a {
    color: var(--ai-dark-heading) !important;
}

.dark-mode .c-post-card__excerpt {
    color: var(--ai-dark-text) !important;
}

.dark-mode .c-post-card__date {
    color: var(--ai-dark-text-muted) !important;
}

.dark-mode .c-post-card__authors-names a {
    color: var(--ai-dark-link) !important;
}

.dark-mode .c-post-card__authors-names a:hover {
    color: var(--ai-dark-link-hover) !important;
}

/* visible */
.dark-mode .c-nav-toggle__icon,
.dark-mode .c-nav-toggle__icon::before,
.dark-mode .c-nav-toggle__icon::after {
    background-color: var(--ai-dark-heading) !important; /* strong white lines */
    height: 3px !important;
    border-radius: 2px !important;
    width: 24px !important;  /* made larger for visibility */
}

/* Ensure spacing between lines */
.dark-mode .c-nav-toggle__icon::before {
    top: -7px !important;
}
.dark-mode .c-nav-toggle__icon::after {
    top: 7px !important;
}

/* Remove any theme-imposed faint borders */
.dark-mode .c-nav-toggle,
.dark-mode .c-nav-toggle * {
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   RESTORED HAMBURGER (previous working version)
   + FIX: no stuck top bar in arrow/X mode
========================================================= */

/* BASIC POSITIONING — (this was working before) */
.dark-mode .c-nav-toggle__icon {
    background: #ffffff !important;         /* the middle bar */
    width: 24px !important;
    height: 3px !important;
    display: block !important;
    position: relative !important;
    border-radius: 3px !important;
    transition: all 0.25s ease-in-out !important;
}

/* top + bottom bars */
.dark-mode .c-nav-toggle__icon::before,
.dark-mode .c-nav-toggle__icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: #ffffff !important;
    border-radius: 3px !important;
    transition: all 0.25s ease-in-out !important;
}

/* correct vertical layout from the older working version */
.dark-mode .c-nav-toggle__icon::before {
    top: -7px !important;    /* top bar */
}

.dark-mode .c-nav-toggle__icon::after {
    top: 7px !important;     /* bottom bar */
}

/* =========================================================
   CLOSE / ARROW STATE (previous version but fixed)
========================================================= */

/* FIX: remove the *base bar only* in close mode */
.dark-mode .c-nav-toggle--close .c-nav-toggle__icon {
    background: transparent !important;  /* removes stuck top bar */
}

/* turn middle bar invisible */
.dark-mode .c-nav-toggle--close .c-nav-toggle__icon {
    opacity: 1 !important; /* keep container visible */
}

/* TOP BAR rotates and moves to center */
.dark-mode .c-nav-toggle--close .c-nav-toggle__icon::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
}

/* BOTTOM BAR rotates and moves to center */
.dark-mode .c-nav-toggle--close .c-nav-toggle__icon::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
}

/* Ensure nothing else draws outlines (from earlier work) */
.dark-mode .c-nav-toggle,
.dark-mode .c-nav-toggle * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hide by default (desktop) */
#ai-dark-toggle-mobile {
    display: none;
}

/* Show on all mobile + tablets up to 1366px (iPad Pro 12.9") */
@media (max-width: 1366px) {
    #ai-dark-toggle-mobile {
        display: inline-block !important;
        font-size: 26px;
        padding: 6px 10px;

        /* MUCH larger spacing from hamburger */
        margin-right: 32px !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: var(--ai-dark-text) !important;
    }
}

/* Extra safety — no shadows ever */
.dark-mode #ai-dark-toggle-mobile,
#ai-dark-toggle-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   HIDE ALL DARK MODE BUTTONS INSIDE MOBILE MENU
   (#ai-dark-toggle = desktop, #ai-dark-toggle-mobile = mobile)
========================================================= */

/* Hide DESKTOP toggle if it gets cloned into mobile nav */
.c-nav--mobile #ai-dark-toggle,
.c-nav__list--mobile #ai-dark-toggle,
.c-nav-wrap #ai-dark-toggle,
.c-mobile-menu #ai-dark-toggle,
.c-nav #ai-dark-toggle {
    display: none !important;
}

/* Hide MOBILE toggle if it gets cloned into mobile nav */
.c-nav--mobile #ai-dark-toggle-mobile,
.c-nav__list--mobile #ai-dark-toggle-mobile,
.c-nav-wrap #ai-dark-toggle-mobile,
.c-mobile-menu #ai-dark-toggle-mobile,
.c-nav #ai-dark-toggle-mobile {
    display: none !important;
}

/* Force BOTH toggles to appear ONLY in the real header */
.c-header__inner > #ai-dark-toggle,
.c-header__inner > #ai-dark-toggle-mobile {
    display: inline-block !important;
}

/* =========================================================
   MORPHING SUN / MOON ICON (Option B)
========================================================= */
.ai-toggle-icon {
    width: 24px;
    height: 24px;
    display: block;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.45s ease, opacity 0.35s ease, stroke 0.3s ease;
}

/* Light mode: sun visible, moon hidden */
.ai-toggle-icon.sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.ai-toggle-icon.moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

/* Dark mode: moon visible, sun hidden */
.dark-mode .ai-toggle-icon.moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.dark-mode .ai-toggle-icon.sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

/* =========================================================
   FINAL FIX — FORCE TABLES INTO DARK MODE (OVERRIDES INLINE STYLES)
========================================================= */

.dark-mode table,
.dark-mode tbody,
.dark-mode thead,
.dark-mode tfoot {
  background: var(--ai-dark-bg-soft) !important;
  color: var(--ai-dark-text) !important;
  border-color: var(--ai-dark-border) !important;
}

.dark-mode tr {
  background: transparent !important;
}

.dark-mode th,
.dark-mode td {
  background: #1c2128 !important;          /* dark cell background */
  color: var(--ai-dark-text) !important;   /* force readable text */
  border: 1px solid var(--ai-dark-border-soft) !important;
}

/* Headings inside tables */
.dark-mode th strong,
.dark-mode td strong,
.dark-mode th em,
.dark-mode td em {
  color: var(--ai-dark-heading) !important;
}

/* Remove any forced inline white backgrounds */
.dark-mode td[style],
.dark-mode th[style],
.dark-mode tr[style] {
  background: #1c2128 !important;
  color: var(--ai-dark-text) !important;
  border-color: var(--ai-dark-border-soft) !important;
}

/* Hover clarity */
.dark-mode tbody tr:hover td {
  background: #232931 !important;
}

/* Optional subtle row separation */
.dark-mode tbody tr:nth-child(even) td {
  background: #1f242b !important;
}