/* === Color tokens === */
:root {
  --color-primary:      #1a6fad;
  --color-primary-dark: #155d96;
  --color-link:         #4183C4;
  --color-success:      #21ba45;
  --toc-bg:             #f9fafb;
  --toc-border:         #e2e8f0;
  --toc-label:          #555;
  --tag-bg:             #eef4fb;
  --anchor-color:       #999;
  --feed-border:        #e8e8e8;
  --meta-color:         #888;
  --summary-color:      #555;
}

/* === Layout === */
html, body { overflow-x: hidden; }

/* === Skip link === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* === Desktop nav links === */
.nav-desktop-links { display: none; }
@media (min-width: 768px) {
  .nav-desktop-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .nav-desktop-links a {
    color: rgba(255,255,255,.9);
    font-weight: 500;
    text-decoration: none;
    padding: .25rem .5rem;
    border-radius: 4px;
    transition: background .15s;
  }
  .nav-desktop-links a:hover { background: rgba(255,255,255,.15); }
}

/* === Tag contrast fix === */
.tag-link { color: var(--color-primary); }

/* === Article metadata === */
.article-metadata { margin-top: 2rem; }

/* === Mobile code scroll indicator === */
@media (max-width: 767px) {
  pre {
    position: relative;
  }
  pre::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, transparent, rgba(0,0,0,.08));
    pointer-events: none;
  }
}

/* === Reading progress bar === */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 9999;
  pointer-events: none;
}

/* === Copy button === */
pre { position: relative; }
.copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .2rem .6rem;
  font-size: .75rem;
  background: rgba(255,255,255,.15);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.copy-btn.copied { background: var(--color-success); color: #fff; border-color: var(--color-success); opacity: 1; }

/* === Heading anchors === */
.heading-anchor {
  margin-left: .4rem;
  color: var(--anchor-color);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity .15s;
  font-size: .85em;
}
h2:hover .heading-anchor,
h3:hover .heading-anchor { opacity: 1; }

/* === Table of contents === */
.toc-wrapper {
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .9rem;
}
.toc-wrapper > p {
  font-weight: 700;
  margin: 0 0 .5rem;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--toc-label);
}
#TableOfContents ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#TableOfContents li { margin: .2rem 0; }
#TableOfContents ul ul { padding-left: 1rem; }
#TableOfContents a {
  color: var(--color-link);
  text-decoration: none;
  transition: color .15s;
}
#TableOfContents a:hover { color: var(--color-primary); }
#TableOfContents a.toc-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* === Blog feed === */
.blog-feed-container {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.blog-feed-item {
  border-bottom: 1px solid var(--feed-border);
  padding: 1.75rem 0;
}
.blog-feed-item:first-child { padding-top: .5rem; }
.blog-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: .8rem;
  color: var(--meta-color);
  margin-bottom: .5rem;
}
.blog-feed-meta time { font-variant-numeric: tabular-nums; }
.blog-feed-meta .tag-link {
  background: var(--tag-bg);
  padding: .1rem .5rem;
  border-radius: 3px;
  font-size: .75rem;
}
.blog-feed-title {
  font-size: 1.35rem;
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.blog-feed-title a {
  color: inherit;
  text-decoration: none;
}
.blog-feed-title a:hover { color: var(--color-primary); }
.blog-feed-summary {
  color: var(--summary-color);
  line-height: 1.65;
  margin: 0 0 .75rem;
}
.blog-feed-readmore {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.blog-feed-readmore:hover { text-decoration: underline; }

/* === Focus styles === */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Homepage hero CTA === */
.hero-cta {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-cta a {
  padding: .6rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hero-cta a:first-child {
  background: var(--color-primary);
  color: #fff;
}
.hero-cta a:first-child:hover { background: var(--color-primary-dark); }
.hero-cta a:last-child {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.hero-cta a:last-child:hover { background: rgba(255,255,255,.25); }

/* === Site email === */
.site-email { font-size: 1rem; opacity: .85; }

/* === Footnotes (Hugo/Goldmark native [^key] syntax) === */
.footnote-ref {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
}
.footnote-ref:hover { text-decoration: underline; }

.footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--toc-border);
  font-size: .875rem;
  color: var(--meta-color);
  line-height: 1.6;
}
.footnotes > hr { display: none; }
.footnotes ol {
  padding-left: 1.5rem;
  margin: 0;
}
.footnotes li { margin: .4rem 0; }
.footnote-backref {
  color: var(--color-link);
  text-decoration: none;
  margin-left: .25rem;
}
.footnote-backref:hover { color: var(--color-primary); }

/* === Bibliography shortcode === */
.bibliography {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--toc-border);
  font-size: .875rem;
}
.bibliography h2 {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--toc-label);
  margin: 0 0 1rem;
}
.bib-entry {
  display: flex;
  gap: .75rem;
  margin: .6rem 0;
  align-items: baseline;
}
.bib-number {
  flex-shrink: 0;
  min-width: 2rem;
  color: var(--color-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bib-content { line-height: 1.6; color: var(--meta-color); }
.bib-author { font-weight: 500; color: inherit; }
.bib-title  { font-style: italic; }
.bib-year   { color: var(--meta-color); }
.bib-link {
  color: var(--color-link);
  text-decoration: none;
  margin-left: .2rem;
}
.bib-link:hover { color: var(--color-primary); }

/* Inline citation [N] links */
.citation {
  color: var(--color-link);
  font-size: .85em;
  font-weight: 600;
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
}
.citation:hover { text-decoration: underline; }
.citation-error {
  color: #c53030;
  font-size: .85em;
  font-weight: 600;
  vertical-align: super;
}

/* === Dark mode token overrides === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:      #5ba8e5;
    --color-primary-dark: #4a97d4;
    --color-link:         #79b8f3;
    --color-success:      #3dd68c;
    --toc-bg:             #1e2530;
    --toc-border:         #2e3a48;
    --toc-label:          #a0aab4;
    --tag-bg:             #1a2535;
    --anchor-color:       #6b7280;
    --feed-border:        #2e3a48;
    --meta-color:         #9ca3af;
    --summary-color:      #9ca3af;
  }
  .citation-error { color: #fc8181; }
}

/* === Tech marquee (homepage) === */
.tech-marquee-section {
  padding: 1rem 0 2rem;
}
.tech-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.tech-marquee-track {
  display: flex;
  gap: 0.5rem;
  width: max-content;
  animation: tech-marquee-scroll 45s linear infinite;
}
.tech-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes tech-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tech-marquee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  cursor: default;
  transition: background 0.15s;
  min-width: 90px;
}
.tech-marquee-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.tech-marquee-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.15s;
}
.tech-marquee-item:hover .tech-marquee-logo {
  opacity: 1;
}
.tech-marquee-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.tech-marquee-item:hover .tech-marquee-label {
  color: rgba(255, 255, 255, 1);
}