/* ==========================================================================
   Snehasish Portfolio - main stylesheet
   Values are ported from the portfolio repo (src/index.css, tailwind.config.js
   and the per-component CSS). Tailwind utilities are written out as plain CSS.
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------
   The first block is copied 1:1 from portfolio/src/index.css :root.          */
:root {
  --primary-color: #0a192f;
  --background-color: #0a192f;
  --background-transparent: rgba(10, 25, 47, 0.75);
  --secondary-color: #37e784;
  --text-color: #ccd6f6;
  --font-size-base: 16px;
  --spacing-unit: 8px;
  --transition-time: 0.3s;
  --caption-color: #87bdf8;
  --content-color: #8892b0;
  --min-padding: 16px;
  --vw-scale: 7.5vw;

  /* Derived tokens (Tailwind opacity / shadow utilities used by the portfolio) */
  --secondary-10: rgba(55, 231, 132, 0.1);
  --secondary-20: rgba(55, 231, 132, 0.2);
  --secondary-30: rgba(55, 231, 132, 0.3);
  --shadow-cta: 4px 4px 0 0 var(--secondary-color);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Poppins', system-ui, sans-serif;

  /* Card borders. The portfolio CSS says "border-secondary border-opacity-10
     hover:border-opacity-30", but Tailwind cannot apply opacity to a colour
     that is a CSS variable, so the live site renders a solid green 1px border.
     These match what the live site shows; switch both to var(--secondary-10)
     and var(--secondary-30) if you fix that in the portfolio. */
  --card-border: var(--secondary-color);
  --card-border-hover: var(--secondary-color);

  /* Blog-only additions (not in the portfolio) */
  --code-bg: #06111f;
  --header-height: 5.5rem;
  --reading-width: 860px;

  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

img, svg, video, iframe {
  max-width: 100%;
}

img, video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-time) ease-in-out;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--secondary-color);
  color: var(--primary-color);
}

:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 3px;
  border-radius: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem 1rem;
  clip: auto;
  background: var(--secondary-color);
  color: var(--primary-color);
  border-radius: var(--radius);
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* 3. Shared utilities (same class names as the portfolio) -------------------- */
.text-secondary {
  color: var(--secondary-color);
}

.text-regular {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--content-color);
}

@media (min-width: 768px) {
  .text-regular {
    font-size: 1.125rem;
  }
}

.section-container {
  width: 85%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--min-padding), calc(var(--vw-scale) - var(--min-padding)));
  padding-right: max(var(--min-padding), calc(var(--vw-scale) - var(--min-padding)));
}

/* Reading column for posts and pages. Wider share of the viewport on phones
   than the portfolio container, so code blocks stay usable. */
.section-container--narrow {
  width: 100%;
  max-width: calc(var(--reading-width) + 2 * max(20px, 5vw));
  padding-left: max(20px, 5vw);
  padding-right: max(20px, 5vw);
}

.button,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--spacing-unit) 1.25rem;
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary-color);
  cursor: pointer;
  line-height: 1.5;
}

.cta-button {
  transition:
    box-shadow var(--transition-time),
    transform var(--transition-time);
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-cta);
  color: var(--secondary-color);
}

.cta-button--lg {
  padding: 1rem 1.75rem;
}

.pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--secondary-color);
  border-radius: 9999px;
  color: var(--secondary-color);
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  transition: all var(--transition-time);
}

a.pill:hover,
a.pill:focus-visible {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 4. Header (portfolio: components/header/header.css) ------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--background-transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
  padding: 1.5rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--text-color);
  white-space: nowrap;
}

.site-brand:hover {
  color: var(--secondary-color);
}

.site-brand img {
  width: 2rem;
  height: 2rem;
}

.site-brand .custom-logo {
  width: auto;
  height: 2.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav,
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  counter-reset: nav-item;
}

.nav > li {
  position: relative;
  counter-increment: nav-item;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--transition-time) ease-in-out;
}

/* "1. _about" numbering from the portfolio header */
.nav > li > a::before {
  content: counter(nav-item) '.';
  font-weight: 700;
  color: var(--secondary-color);
}

.nav a:hover,
.nav a:focus-visible,
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_item > a {
  color: var(--secondary-color);
}

/* Dropdown (the Legal menu) */
.nav .sub-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 15rem;
  padding: 0.5rem 0;
  background: var(--primary-color);
  border: 1px solid var(--secondary-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition:
    opacity var(--transition-time),
    transform var(--transition-time),
    visibility var(--transition-time);
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0.75rem);
}

/* Bridges the gap between the item and its dropdown so hover is not lost */
.nav .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav .sub-menu a {
  display: flex;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--content-color);
}

.nav .sub-menu a:hover,
.nav .sub-menu a:focus-visible {
  color: var(--secondary-color);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary-color);
  font-size: 1.25rem;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .site-header__inner {
    padding: 1rem 1.25rem;
    min-height: 4.5rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    max-height: calc(100vh - 4.5rem);
    padding: 1.25rem 1.5rem 1.75rem;
    overflow-y: auto;
    background: var(--primary-color);
    border-bottom: 1px solid var(--secondary-10);
    box-shadow: var(--shadow-xl);
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .nav .sub-menu,
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0 0 0 1.5rem;
    border: 0;
    border-left: 1px solid var(--secondary-20);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav .sub-menu a {
    padding: 0.375rem 0 0.375rem 1rem;
  }

  .nav .menu-item-has-children::after {
    display: none;
  }
}

/* 5. Page shell ------------------------------------------------------------ */
.site-content {
  min-height: 70vh;
  padding-top: 6rem; /* .app { pt-24 } */
}

.section {
  padding: 4rem 0; /* py-16 */
}

.section-title {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--secondary-color);
  text-align: left;
}

.section-subtitle {
  max-width: 56rem;
  margin-bottom: 3rem;
  color: var(--content-color);
}

.section-subtitle p + p {
  margin-top: 0.75rem;
}

/* 6. Hero (portfolio: components/main/main.css) ------------------------------ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 62vh;
  padding: 2rem 0 3rem;
}

.hero .section-container {
  width: 85%;
}

.big-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 80px);
  line-height: 1.5;
  color: #fff;
}

.big-text h1 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  margin: 0.15em 0;
}

.big-text .caption {
  color: var(--caption-color);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {
  .big-text .caption {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 768px) {
  .big-text .caption {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .big-text .caption {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .big-text .caption {
    font-size: 3rem;
    line-height: 1.1;
  }
}

.self-description {
  margin-top: 1rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .self-description {
    max-width: 42rem;
  }
}

.hero .cta-button {
  margin-top: 1.5rem;
}

/* 7. Article cards (portfolio: components/articles/articles.css) ------------- */
.articles-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .articles-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .articles-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--primary-color);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-time);
}

.article-card:hover,
.article-card:focus-within {
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-xl);
}

.article-image-container {
  position: relative;
  display: block;
  height: 12rem; /* h-48 */
  overflow: hidden;
}

.article-image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-time) ease-in-out;
}

.article-image-overlay {
  position: absolute;
  inset: 0;
  background: var(--secondary-color);
  opacity: 0;
  transition: opacity var(--transition-time) ease-in-out;
}

.article-card:hover .article-image-container img {
  transform: scale(1.05);
}

.article-card:hover .article-image-overlay {
  opacity: 0.2;
}

.article-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 1rem;
}

.article-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Whole card is clickable through the title link */
.article-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.article-excerpt {
  flex-grow: 1;
  margin-bottom: 1rem;
  color: var(--content-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--content-color);
}

.article-date,
.article-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.article-link {
  position: relative;
  z-index: 2;
  color: var(--secondary-color);
  transition: color 0.2s;
}

.article-link:hover {
  color: #fff;
}

.sticky .article-title::before {
  content: '* ';
  color: var(--caption-color);
}

/* 8. Pagination ------------------------------------------------------------ */
.pagination,
.comments-pagination {
  margin-top: 3rem;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: var(--spacing-unit) 0.875rem;
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius);
  color: var(--secondary-color);
  transition:
    box-shadow var(--transition-time),
    transform var(--transition-time);
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-cta);
}

.page-numbers.current {
  background: var(--secondary-color);
  color: var(--primary-color);
  font-weight: 700;
}

.page-numbers.dots {
  border-color: transparent;
  color: var(--content-color);
}

/* 9. Single post / page ------------------------------------------------------ */
.entry-header {
  margin-bottom: 2.5rem;
}

.entry-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--content-color);
}

.entry-path a {
  color: var(--secondary-color);
}

.entry-path a:hover {
  color: #fff;
}

.entry-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1.2;
  color: #fff;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--content-color);
}

.entry-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.entry-meta a:hover {
  color: var(--secondary-color);
}

.entry-thumbnail {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.entry-thumbnail img {
  display: block;
  width: 100%;
}

/* Long-form content: .text-regular rhythm from the portfolio */
.entry-content {
  color: var(--content-color);
  font-size: 1rem;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .entry-content {
    font-size: 1.0625rem;
  }
}

.entry-content > * + * {
  margin-top: 1.5rem;
}

.entry-content::after {
  content: '';
  display: table;
  clear: both;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2.75rem;
  line-height: 1.35;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.entry-content h1,
.entry-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.entry-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.entry-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--caption-color);
}

.entry-content h5,
.entry-content h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.entry-content strong,
.entry-content b {
  font-weight: 600;
  color: var(--text-color);
}

.entry-content a {
  color: var(--secondary-color);
  text-decoration: underline;
  text-decoration-color: var(--secondary-30);
  text-underline-offset: 0.2em;
}

.entry-content a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.entry-content a strong {
  color: inherit;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
  margin-top: 0.5rem;
}

.entry-content li::marker {
  color: var(--secondary-color);
}

.entry-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
  background: var(--secondary-10);
  border-left: 3px solid var(--secondary-color);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--text-color);
}

.entry-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--content-color);
}

.entry-content hr {
  height: 1px;
  margin: 3rem 0;
  border: 0;
  background: var(--secondary-20);
}

.entry-content img {
  border-radius: var(--radius-lg);
}

.entry-content figure {
  max-width: 100%;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--content-color);
  text-align: center;
  opacity: 0.85;
}

.entry-content .alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}

.entry-content .alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}

.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Inline code */
.entry-content :not(pre) > code,
.comment-content :not(pre) > code {
  padding: 0.15em 0.4em;
  background: rgba(135, 189, 248, 0.1);
  border-radius: var(--radius);
  color: var(--caption-color);
  font-size: 0.9em;
}

/* Code blocks without a language class; prism.css takes over when there is one */
.entry-content pre,
.comment-content pre {
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--secondary-10);
  border-radius: var(--radius-lg);
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
}

.entry-content pre code {
  font-family: inherit;
  font-size: inherit;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.entry-content .wp-block-table {
  overflow-x: auto;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--secondary-20);
  text-align: left;
  vertical-align: top;
}

.entry-content thead,
.entry-content tfoot {
  border-bottom: 0;
  border-top: 0;
}

.entry-content th {
  color: var(--secondary-color);
  font-weight: 600;
  background: var(--secondary-10);
}

/* Core blocks */
.entry-content .wp-block-button__link,
.wp-block-button__link {
  padding: var(--spacing-unit) 1.25rem;
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary-color);
  text-decoration: none;
  transition:
    box-shadow var(--transition-time),
    transform var(--transition-time);
}

.entry-content .wp-block-button__link:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-cta);
  color: var(--secondary-color);
}

.entry-content .wp-block-separator {
  border: 0;
}

.entry-content .wp-block-pullquote {
  padding: 2rem 0;
  border-top: 1px solid var(--secondary-20);
  border-bottom: 1px solid var(--secondary-20);
  color: var(--caption-color);
  text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: inherit;
}

.entry-content .alignwide,
.entry-content .alignfull {
  max-width: none;
}

@media (min-width: 1100px) {
  .entry-content .alignwide {
    margin-left: -5rem;
    margin-right: -5rem;
  }
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--content-color);
}

.entry-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--secondary-20);
}

.entry-footer__label {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary-color);
}

/* Previous / next */
.post-navigation {
  margin-top: 3rem;
}

.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
  }

  .post-navigation .nav-next {
    grid-column: 2;
    text-align: right;
  }
}

.post-navigation a {
  display: block;
  height: 100%;
  padding: 1.5rem;
  background: var(--primary-color);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-time);
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
  border-color: var(--card-border-hover);
}

.post-navigation .nav-subtitle {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--secondary-color);
}

.post-navigation .nav-title {
  color: var(--content-color);
  font-weight: 500;
}

/* 10. Plugin content inside posts ------------------------------------------- */

/* Spectra table of contents. Spectra prints per-post inline colours, so the
   colour rules need !important to win. */
.entry-content .wp-block-uagb-table-of-contents .uagb-toc__wrap {
  width: 100%;
  padding: 1.5rem !important;
  background: var(--secondary-10) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
}

.entry-content .wp-block-uagb-table-of-contents .uagb-toc__title {
  margin-bottom: 1rem;
  font-family: var(--font-mono) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--secondary-color) !important;
}

.entry-content .wp-block-uagb-table-of-contents .uagb-toc__list-wrap ol,
.entry-content .wp-block-uagb-table-of-contents .uagb-toc__list-wrap ul {
  margin: 0;
  padding-left: 1.25rem;
}

.entry-content .wp-block-uagb-table-of-contents .uagb-toc__list-wrap li {
  font-family: var(--font-mono) !important;
  font-size: 0.9375rem !important;
  color: var(--content-color) !important;
}

.entry-content .wp-block-uagb-table-of-contents a {
  color: var(--content-color) !important;
  text-decoration: none;
}

.entry-content .wp-block-uagb-table-of-contents a:hover {
  color: var(--secondary-color) !important;
}

/* Spectra info box */
.entry-content .wp-block-uagb-info-box {
  padding: 1.5rem !important;
  background: var(--secondary-10) !important;
  border-radius: var(--radius-lg) !important;
}

.entry-content .wp-block-uagb-info-box .uagb-ifb-title,
.entry-content .wp-block-uagb-info-box .uagb-ifb-title-prefix {
  font-family: var(--font-mono) !important;
  color: var(--secondary-color) !important;
}

.entry-content .wp-block-uagb-info-box .uagb-ifb-desc {
  font-family: var(--font-mono) !important;
  color: var(--content-color) !important;
}

.entry-content .wp-block-uagb-info-box svg {
  fill: var(--secondary-color) !important;
}

.entry-content .wp-block-uagb-info-box .uagb-ifb-separator {
  border-top-color: var(--secondary-30) !important;
}

/* YARPP related posts: used by yarpp-template-portfolio.php, with a fallback
   for YARPP's built-in "Thumbnails" template. */
.related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--secondary-20);
}

.related-posts .articles-container {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .related-posts .articles-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.related-posts .article-image-container {
  height: 9rem;
}

.related-posts .article-title {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0;
}

.related-posts .article-title a,
.yarpp-related a {
  color: inherit;
  text-decoration: none;
}

.yarpp-related > h3 {
  color: var(--secondary-color);
}

.yarpp-related .yarpp-thumbnails-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail {
  width: 11rem;
  height: auto;
  margin: 0;
  padding: 0.75rem;
  background: var(--primary-color);
  border: 1px solid var(--secondary-10);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-time);
}

.yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail:hover {
  border-color: var(--secondary-30);
}

.yarpp-related .yarpp-thumbnail > img {
  width: 100%;
  height: auto;
  margin: 0 0 0.5rem;
}

.yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
  width: auto;
  max-height: none;
  margin: 0;
  color: var(--content-color);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.yarpp-related > p:last-child {
  display: none; /* "Powered by YARPP" */
}

/* Ninja Forms (Contact Us) */
.nf-form-cont {
  color: var(--content-color);
  font-family: var(--font-mono);
}

.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-form-fields-required {
  color: var(--text-color);
  font-weight: 500;
}

.nf-form-cont .ninja-forms-req-symbol,
.nf-form-cont .nf-error-msg {
  color: #ff7b72;
}

.nf-form-cont .nf-field-element input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
.nf-form-cont .nf-field-element textarea,
.nf-form-cont .nf-field-element select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--secondary-20);
  border-radius: var(--radius);
  color: var(--text-color);
  font-family: var(--font-mono);
  transition: border-color var(--transition-time);
}

.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element textarea:focus,
.nf-form-cont .nf-field-element select:focus {
  border-color: var(--secondary-color);
  outline: none;
}

.nf-form-cont .nf-field-element input[type='button'],
.nf-form-cont .nf-field-element input[type='submit'] {
  padding: var(--spacing-unit) 1.25rem;
  background: transparent;
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius);
  color: var(--secondary-color);
  font-family: var(--font-mono);
  cursor: pointer;
  transition:
    box-shadow var(--transition-time),
    transform var(--transition-time);
}

.nf-form-cont .nf-field-element input[type='button']:hover,
.nf-form-cont .nf-field-element input[type='submit']:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-cta);
  background: transparent;
  color: var(--secondary-color);
}

.nf-response-msg {
  color: var(--secondary-color);
}

/* CookieYes / GDPR Cookie Consent bar. The plugin sets colours inline from its
   own settings; these keep it on-brand until you change them there. */
#cookie-law-info-bar,
.cli-modal .cli-modal-content {
  background-color: var(--primary-color) !important;
  color: var(--text-color) !important;
  font-family: var(--font-mono) !important;
  border-top: 1px solid var(--secondary-30);
}

#cookie-law-info-bar .cli-plugin-button,
#cookie-law-info-bar .cli_action_button {
  background-color: transparent !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: var(--radius) !important;
  color: var(--secondary-color) !important;
}

#cookie-law-info-bar a,
.cli-modal a {
  color: var(--secondary-color) !important;
}

/* AdSense units */
.entry-content ins.adsbygoogle,
.site-content .google-auto-placed {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* 11. Comments -------------------------------------------------------------- */
.comments-area {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--secondary-20);
}

.comments-title,
.comment-reply-title {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.comment-reply-title small {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.comment-list,
.comment-list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-list .children {
  margin-top: 1rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--secondary-20);
}

.comment-list > li + li,
.comment-list .children > li + li {
  margin-top: 1rem;
}

.comment-body {
  padding: 1.5rem;
  background: var(--primary-color);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--content-color);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-color);
}

.comment-author .avatar {
  border-radius: 9999px;
}

.comment-author .fn {
  font-weight: 600;
  font-style: normal;
}

.comment-author .says {
  display: none;
}

.comment-content {
  color: var(--content-color);
  line-height: 1.7;
}

.comment-content > * + * {
  margin-top: 0.75rem;
}

.comment-content a,
.comment-metadata a:hover,
.comment-author a:hover,
.logged-in-as a,
.comment-notes a {
  color: var(--secondary-color);
}

.comment-awaiting-moderation {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--caption-color);
  font-size: 0.875rem;
}

.comment-body .reply {
  margin-top: 1rem;
}

.comment-reply-link {
  font-size: 0.875rem;
  color: var(--secondary-color);
}

.comment-reply-link:hover {
  color: #fff;
}

.comment-respond {
  margin-top: 3rem;
}

.comment-list .comment-respond {
  margin-top: 1.5rem;
}

.comment-form {
  display: grid;
  gap: 1.25rem;
}

.comment-form p {
  margin: 0;
}

.comment-notes,
.logged-in-as,
.no-comments {
  color: var(--content-color);
  font-size: 0.875rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
}

.comment-form .required {
  color: var(--secondary-color);
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea,
.search-form .search-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--secondary-20);
  border-radius: var(--radius);
  color: var(--text-color);
  transition: border-color var(--transition-time);
}

.comment-form input:focus,
.comment-form textarea:focus,
.search-form .search-field:focus {
  border-color: var(--secondary-color);
  outline: none;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  color: var(--content-color);
}

.comment-form-cookies-consent input {
  margin-top: 0.3rem;
  accent-color: var(--secondary-color);
}

/* 12. Search form ------------------------------------------------------------ */
.search-form {
  display: flex;
  gap: 0.75rem;
  max-width: 36rem;
}

.search-form label {
  flex: 1;
}

.search-form .search-field::placeholder {
  color: var(--content-color);
  opacity: 0.7;
}

/* 13. 404 -------------------------------------------------------------------- */
.error-404 .big-text h1 {
  font-size: clamp(72px, 16vw, 160px);
  line-height: 1;
}

.terminal {
  max-width: 42rem;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--code-bg);
  border: 1px solid var(--secondary-10);
  border-radius: var(--radius-lg);
  color: var(--content-color);
  font-size: 0.9375rem;
  line-height: 1.9;
}

.terminal .prompt {
  color: var(--secondary-color);
}

.terminal .path {
  color: var(--caption-color);
}

.error-404 .search-form {
  margin-top: 2rem;
}

/* 14. Footer widgets ("Explore") ----------------------------------------------- */
.site-explore {
  padding: 4rem 0;
}

.widget-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .widget-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* portfolio .skill-card */
.widget {
  min-width: 0;
  padding: 1.5rem;
  background: var(--primary-color);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-time);
}

.widget:hover {
  border-color: var(--card-border-hover);
}

.widget-title,
.widget .wp-block-heading,
.widget .wp-block-search__label {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.widget ul,
.widget ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget li {
  font-size: 0.875rem;
  color: var(--content-color);
}

.widget li + li {
  margin-top: 0.75rem;
}

.widget ul ul {
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--secondary-20);
}

.widget a:hover,
.widget a:focus-visible {
  color: var(--secondary-color);
}

.widget .tagcloud,
.widget .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.widget .tag-cloud-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--secondary-color);
  border-radius: 9999px;
  color: var(--secondary-color);
  font-size: 0.75rem !important;
  line-height: 1rem;
  white-space: nowrap;
  transition: all var(--transition-time);
}

.widget .tag-cloud-link:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.widget .search-form {
  flex-wrap: wrap;
}

.widget .search-form label {
  flex: 1 1 100%;
}

.widget select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--code-bg);
  border: 1px solid var(--secondary-20);
  border-radius: var(--radius);
}

/* 15. Footer (portfolio: components/footer/footer.css) -------------------------- */
.site-footer {
  padding: 2rem 0;
  background: var(--primary-color);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 85%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;
}

.footer-social a {
  display: inline-flex;
  color: var(--secondary-color);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: #fff;
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--content-color);
}

.footer-menu a:hover,
.footer-extra a:hover {
  color: var(--secondary-color);
}

.footer-text,
.footer-extra {
  color: var(--content-color);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer-extra a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 16. Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .cta-button:hover,
  a.page-numbers:hover,
  .article-card:hover .article-image-container img {
    transform: none;
  }
}

/* 17. Print ------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-explore,
  .site-footer,
  .comments-area,
  .post-navigation,
  .related-posts {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .site-content {
    padding-top: 0;
  }

  .entry-content,
  .entry-title {
    color: #000;
  }
}