/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s5);
  background: var(--cyan);
  color: var(--bg-0);
  padding: 0.5em 1em;
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 9999;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--ease-fast);
}

.skip-link:focus { top: 0; }

/* ─────────────────────────────────────────────────────────────
   SELECTION & SCROLLBAR
───────────────────────────────────────────────────────────── */
::selection      { background: rgba(1, 191, 255, 0.20); color: var(--text-hi); }
::-moz-selection { background: rgba(1, 191, 255, 0.20); color: var(--text-hi); }

::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ─────────────────────────────────────────────────────────────
   ADMIN BAR OFFSET
───────────────────────────────────────────────────────────── */
body.admin-bar .site-header { top: 32px; }

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

/* ─────────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 12px rgba(0, 220, 255, 0.3); }
  50%       { opacity: 1;   text-shadow: 0 0 24px rgba(0, 220, 255, 0.55); }
}

@keyframes nav-item-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */

/* ── Phone portrait ── */
@media (max-width: 480px) {
  html { font-size: 16px; }

  :root {
    --dot-gap: 20px;
    --pad-x: 1.1rem;
  }

  pre {
    font-size: 0.78rem;
    padding: var(--s5) var(--s4);
  }

  blockquote { padding: var(--s4) var(--s5); }

  .alignleft,
  .alignright {
    float: none;
    margin: var(--s6) auto;
    display: block;
  }

  h2 { padding-left: var(--s4); }
}

/* ── Phone landscape / small tablet ── */
@media (min-width: 481px) and (max-width: 768px) {
  html { font-size: 17px; }

  .alignleft,
  .alignright { max-width: 48%; }
}

/* ── Desktop ── */
@media (min-width: 1200px) {
  html { font-size: 19px; }
}

/* ── Large desktop ── */
@media (min-width: 1600px) {
  :root {
    --content-w: 920px;
    --dot-gap: 30px;
  }
}

/* ─────────────────────────────────────────────────────────────
   PRINT
───────────────────────────────────────────────────────────── */
@media print {
  body {
    background: white;
    color: black;
    background-image: none;
    font-size: 12pt;
  }

  body::before { display: none; }

  .site-header,
  .site-footer,
  .comments-area,
  nav { display: none; }

  a { color: black; text-decoration: underline; }

  pre, code {
    background: #f4f4f4 !important;
    color: black !important;
    border: 1px solid #ccc;
  }

  pre::before { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   PERFORMANCE CSS
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { background-attachment: scroll; }
}

.site-header {
  contain: style;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}