@theme {
  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 976px;

  /* Colors */
  --color-primary: #f97316;
  --color-primary-soft: #ffedd5;

  --color-body: #ffffff;
  --color-headings: #ffffff;
  --color-body-muted: #1a1a1a;

  --color-surface: #FFFAF8;
  --color-surface-alt: #111111;

  --color-footer:#333;


   /* New: navigation links */
  --color-nav-link: #111111; /* default, adjust as you like */

  /* Typography */
  --font-sans: Cabin, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Merriweather, ui-serif, Georgia, "Times New Roman", serif;

  /* Layout tokens */
  --container-content: 72rem; /* → max-w-content */
  --spacing-section: 5rem;    /* → py-section */
  --spacing-section-lg: 7rem; /* → py-section-lg */

  /* Radius + Shadows */
  --radius-card: 1rem;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.15);

  --color-primary-hover-soft: rgba(249, 115, 22, 0.16);
  --color-border-soft: rgba(148, 163, 184, 0.25);


    --color-surface-soft: rgba(15, 23, 42, 0.6);
  --color-surface-border-strong: rgba(15, 23, 42, 0.7);
  --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.45);
}


@layer components {

  .site-footer {
    background:var(--color-footer);
  }

  #post-toc-card {
    z-index: 20;              /* sit above other widgets */
  }

  #post-toc-card {
    background-color: #020617; /* or whatever your dark surface colour is */
    z-index: 20;
  }
  /* TOC basic styling */
  #post-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #post-toc li {
    margin: 0.25rem 0;
    font-size: 1rem; /* text-sm */
    border-bottom: solid 1px #757373;
    padding-bottom:5px;
  }

  #post-toc a {
    text-decoration: none;
    color: inherit;
    opacity: 0.85;
    transition: opacity 150ms ease, color 150ms ease;
  }

  #post-toc a:hover {
    opacity: 1;
    color: var(--color-primary);
  }

  /* Indent h3 items a bit */
  #post-toc li.toc-level-3 {
/*
    font-size: 0.8rem;
    opacity: 0.8; */
  }

  /* Sticky card on desktop */
  @media (min-width: 1024px) {
    #post-toc-card {
      /* position: sticky; */
      top: 1.5rem;
    }
  }
}


/* Align logo flush with container edge */
.sm-navbar .sm-brand {
  padding-left: 0;
  margin-left: 0;
}


/* Remove built-in SmartMenus navbar padding */
.sm-navbar {
  padding: 0 !important;
}


.header-cta {
  text-decoration: none !important;
}


.site-container { max-width: var(--site-max-width); margin-inline:auto; }
/* Make section descriptions readable on dark customizer sidebar */
#customize-controls .description {
    color: #ffffff !important;
}




.widget,
.wp-block-group.is-style-widget {
  background: var(--color-widget-bg);
  color: var(--color-widget-text);
}

.widget-title,
.widget .wp-block-heading {
  color: var(--color-widget-heading);
}

.widget a {
  color: var(--color-widget-link);
}

.widget a:hover {
  text-decoration: underline;
}


/* =========================================
   Content cards (Blog + Projects etc.)
   ========================================= */

.blog-card,
.project-card {
  background-color: var(--card-bg, var(--color-surface-soft));
  color: var(--card-text, rgb(var(--color-body)));
}

/* Card headings */
.blog-card h1,
.blog-card h2,
.blog-card h3,
.blog-card h4,
.blog-card h5,
.blog-card h6,
.project-card h1,
.project-card h2,
.project-card h3,
.project-card h4,
.project-card h5,
.project-card h6 {
  color: var(
    --card-heading,
    var(--card-text, rgb(var(--color-body)))
  );
}

/* Muted text (excerpt/meta) */
.blog-card .text-body-muted,
.project-card .text-body-muted {
  color: var(--card-text-muted, rgba(255, 255, 255, 0.85));
}

/* Links inside cards */
.blog-card a,
.project-card a {
  color: var(--card-link, rgb(var(--color-primary)));
}

.blog-card .card-text,
.project-card .card-text {
  color: var(--card-text, rgb(var(--color-body)));
}



/* AFTER – only the main site footer */
.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
}

.site-footer a {
  color: inherit;
}

.footer .footer-bottom {
  border-top: 1px solid var(--color-footer-border);
}



/* Kill widget background ONLY inside the footer */
.site-footer .widget_block,
.site-footer .widget {
    background: none !important;
    border: none !important;
}
