/* Site overrides on top of the Archie theme (themes/archie/assets/css/main.css).
   Dark-mode counterparts live in custom-dark.css (bundled into the dark stylesheet). */

/* ---------- Layout & responsive ---------- */
img { box-sizing: border-box; height: auto; } /* 3px border must not push images past 100%; keep aspect ratio with width/height attributes */

@media screen and (max-width: 600px) {
  html { font-size: 16px; }                   /* 15px is small on phones */
  body { margin: 0; }
  .content { padding: 0 1rem; }               /* comfortable side gutters */
}

/* ---------- Type hierarchy ---------- */
h1 { font-size: 1.7rem; line-height: 1.3; }
h2 { font-size: 1.35rem; line-height: 1.35; }
h3 { font-size: 1.15rem; }
h4, h5, h6 { font-size: 1rem; }
h1.title { margin-top: 1em; }                 /* post / page title */
@media screen and (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}

/* Article text: lists and tl;dr in the same font as paragraphs (UI and code stay mono) */
.body li, .tldr { font-family: 'Fira Sans', sans-serif; line-height: 1.5; }
.body li { margin: 0.25rem 0; }

/* ---------- Contrast (WCAG AA for small text) ---------- */
.meta, time { color: #666; }
blockquote { color: #5c5c5c; }

/* ---------- Header / navigation ---------- */
header nav a { margin-right: 0.6rem; }
@media screen and (max-width: 600px) {
  header nav a { margin-right: 0.35rem; }
  header nav .nav-sep { display: none; }   /* keeps the theme toggle on the same line as the menu */
}

/* ---------- Home: hero, featured, latest ---------- */
.hero { margin-bottom: 2.5rem; }
.hero h1 { font-size: 1.8rem; margin-bottom: 0.3rem; }
.hero p { margin: 0.4rem 0; }
.hero p.hero-role { font-size: 1.15rem; font-weight: bold; margin-top: 1rem; }
.hero-focus { color: #666; }
.hero-links a { margin-right: 0.2rem; }
.list-item .title { margin-top: 1.5em; }
.list-item.featured .title { margin-top: 1em; margin-bottom: 0.2rem; }

/* ---------- Articles list ---------- */
.list-item h2.title { margin-bottom: 0.2rem; }
.list-item .description { margin: 0.3rem 0 0; font-family: 'Fira Sans', sans-serif; line-height: 1.5; }

/* ---------- Post footer: tags, share, related, prev/next ---------- */
.post-tags { margin-top: 2rem; }
ul.tags { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding-left: 0; margin: 0.5rem 0; }
ul.tags li { text-indent: 0; }
.sharebuttons, .sharebuttons ul { display: flex; margin: 0.25rem 0; align-items: center; flex-wrap: wrap; }
.sharebuttons { margin-top: 1rem; }
.sharebuttons ul { padding: 0; }
.sharebuttons ul li { list-style: none; margin: 0; text-indent: 0; }
.sharebuttons ul li:before { content: ''; }
.sharebuttons ul li a { display: block; padding: 0.4rem; margin: 0 0.15rem; border-bottom: none; }
.sharebuttons ul li a:hover { background: none; }
.sharebuttons ul li a svg { width: auto; height: 1.3rem; display: block; max-height: none; }
.sharebuttons .will-change { transition: 250ms; }
.sharebuttons li > a:hover .will-change, .sharebuttons li > a:focus-visible .will-change { fill: #444; }
.related { margin-top: 2rem; }
.related h3 { margin-top: 0; }
.post-nav {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid #ddd;
}
.post-nav .newer { margin-left: auto; text-align: right; }

/* ---------- Footer ---------- */
.footer-social { display: flex; align-items: center; gap: 0.9rem; margin-right: 1.2rem; }
.footer-social .soc { padding: 0.25rem 0; }
@media screen and (max-width: 600px) {
  footer { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .footer-social { margin-right: 0; }
}

/* ---------- Dark-mode toggle (inline SVG icons, see partials/icon.html) ---------- */
#dark-mode-toggle {
  background: none; border: 0; margin: 0; padding: 0.25rem;
  color: inherit; cursor: pointer; line-height: 0; vertical-align: middle;
}
#dark-mode-toggle .icon-sun { display: none; }

/* ---------- 404 ---------- */
#nf-joke { font-size: 1.3rem; color: inherit; }

/* ---------- Copy button on code blocks (js/copy-code.js) ---------- */
.highlight { position: relative; }
.copy-code {
  position: absolute; bottom: 0.4rem; right: 0.4rem;   /* top-right is the theme's language label */
  font: 0.75rem 'Roboto Mono', monospace; line-height: 1;
  padding: 0.35rem 0.55rem; border-radius: 4px; cursor: pointer;
  color: #f8f8f2; background: #3e3d32; border: 1px solid #75715e;
  opacity: 0; transition: opacity 150ms;
}
.highlight:hover .copy-code, .copy-code:focus-visible, .copy-code.copied { opacity: 1; }
.copy-code:hover { background: #49483e; }
@media (hover: none) { .copy-code { opacity: 1; } }   /* touch screens: always visible */

/* ---------- Projects ---------- */
.list-item.project { margin-bottom: 2rem; }
.list-item.project .description { margin-top: 0.6rem; }
.project-links { margin: 0.8rem 0 0; }
.project-related { margin-top: 0.6rem; font-family: 'Fira Sans', sans-serif; }
.project-related ul { margin: 0.3rem 0 0; }