/*
 * Site overrides on top of the apollo theme.
 * Loaded after the theme CSS via `extra.stylesheets` in config.toml,
 * so the theme itself can be updated without touching this file.
 */

/* ---------- Palette: softer than pure white / near-black ---------- */

:root.light {
  --bg-0: #f6f4ef;          /* warm paper */
  --bg-1: #eeebe4;          /* code, cards */
  --bg-2: #dfdad0;          /* borders */
  --text-0: #2b2b2b;        /* body text */
  --text-1: #5f5c56;        /* meta, dates */
  --text-2: #8a867e;
  --border-color: var(--bg-2);
  --primary-color: #b4463f; /* muted brick red */
  --hover-color: #fdfcf9;
}

:root.dark {
  --bg-0: #1f2227;          /* muted slate */
  --bg-1: #272b31;
  --bg-2: #363b43;
  --text-0: #d6d4ce;        /* off-white, not pure white */
  --text-1: #a19f99;
  --text-2: #7b7973;
  --border-color: var(--bg-2);
  --primary-color: #e08a7e; /* soft coral */
  --hover-color: #1f2227;
}

html,
body {
  background-color: var(--bg-0);
}

/* ---------- Readability ---------- */

:root {
  --font-size-base: 17px;
  --line-height: 1.7;
  --page-width: 760px;
}

html {
  font-size: var(--font-size-base);
}

main p,
main li {
  font-size: 1rem;
}

blockquote {
  color: var(--text-1);
}

time,
.meta {
  color: var(--text-1);
}

/* ---------- Code blocks match the page background ---------- */

pre,
pre.giallo {
  background-color: var(--bg-1) !important;
  border-color: var(--border-color);
  line-height: 1.5;
}

code {
  background-color: var(--bg-1);
}

/* Leave room for the copy button so it doesn't cover short one-liners */
pre:not(.giallo),
pre.giallo .giallo-l {
  padding-right: 2.75rem;
}

/* A "DEFAULT"/"PLAIN" badge carries no information; keep real language labels */
.code-label.label-default,
.code-label.label-plain {
  display: none;
}

/* ---------- Header icons: larger and easier to hit ---------- */

nav .right-nav {
  gap: 0.25rem;
}

.search-button,
nav .right-nav #dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.25rem;
  padding: 0;
  border-radius: 6px;
}

.search-button .search-icon,
nav .right-nav #dark-mode-toggle > img {
  width: 22px;
  height: 22px;
  opacity: 0.8;
}

.search-button:hover,
nav .right-nav #dark-mode-toggle:hover {
  background-color: var(--bg-1);
}

.search-button:hover .search-icon,
nav .right-nav #dark-mode-toggle:hover > img {
  opacity: 1;
}

nav .left-nav .socials .social img {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

/* ---------- Homepage hero ---------- */

.home-hero {
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.home-hero-art {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}

.home-hero h1 {
  margin: 0.5rem 0 0.25rem;
}

.home-hero .section-content p {
  margin: 0;
  color: var(--text-1);
}

.hero-wave {
  transform-origin: 212px 114px;
  animation: hero-wave 2.4s ease-in-out infinite;
}

.hero-sprout {
  transform-origin: 180px 88px;
  animation: hero-sway 4s ease-in-out infinite;
}

@keyframes hero-wave {
  0%, 55%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-18deg); }
  20%, 40% { transform: rotate(8deg); }
}

@keyframes hero-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave, .hero-sprout { animation: none; }
}

/* ---------- Homepage recent posts ---------- */

.home-all-posts {
  margin-top: 1.5rem;
}

/* ---------- Search input: no empty gap on the left, site font ---------- */

.search-modal #searchBar #searchInput {
  padding-left: 1rem;
  font-family: inherit;
}

/* Selected search result: a quiet highlight instead of a solid accent block */
.search-modal #results-container #results > div[aria-selected="true"] {
  background: var(--bg-1);
  box-shadow: inset 3px 0 0 var(--primary-color);
}

.search-modal #results-container #results > div[aria-selected="true"] * {
  color: inherit !important;
}

.search-modal #results-container #results > div[aria-selected="true"] span:first-child {
  color: var(--primary-color) !important;
}