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

/* === Skip link === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .5rem 1rem;
  background: #1a6fad;
  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: #1a6fad; }

/* === 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: #1a6fad;
  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: #21ba45; color: #fff; border-color: #21ba45; opacity: 1; }

/* === Heading anchors === */
.heading-anchor {
  margin-left: .4rem;
  color: #999;
  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: #f9fafb;
  border: 1px solid #e2e8f0;
  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: #555;
}
#TableOfContents ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#TableOfContents li { margin: .2rem 0; }
#TableOfContents ul ul { padding-left: 1rem; }
#TableOfContents a {
  color: #444;
  text-decoration: none;
  transition: color .15s;
}
#TableOfContents a:hover { color: #1a6fad; }
#TableOfContents a.toc-active {
  color: #1a6fad;
  font-weight: 600;
}

/* === Blog feed === */
.blog-feed-container {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.blog-feed-item {
  border-bottom: 1px solid #e8e8e8;
  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: #888;
  margin-bottom: .5rem;
}
.blog-feed-meta time { font-variant-numeric: tabular-nums; }
.blog-feed-meta .tag-link {
  background: #eef4fb;
  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: #1a6fad; }
.blog-feed-summary {
  color: #555;
  line-height: 1.65;
  margin: 0 0 .75rem;
}
.blog-feed-readmore {
  font-size: .85rem;
  font-weight: 600;
  color: #1a6fad;
  text-decoration: none;
}
.blog-feed-readmore:hover { text-decoration: underline; }

/* === Focus styles === */
:focus-visible {
  outline: 3px solid #1a6fad;
  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: #1a6fad;
  color: #fff;
}
.hero-cta a:first-child:hover { background: #155d96; }
.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; }