/* Mirrors the look of max-richter.dev (src/layouts/theme.css + Layout.astro). */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/nunito-v26-latin-300.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/roboto-v30-latin-300.woff2") format("woff2");
}

:root {
  --neutral-800: #16161e;
  --neutral-500: #252530;
  --neutral-400: #2c2c3a;
  --neutral-300: #414152;
  --neutral-100: #d5d5d7;
  --neutral-000: #f1f1f4;
  --fill: #cb5a5a;

  --border-radius-sm: 10px;
  --border-radius-md: 20px;

  --background-dark: var(--neutral-000);
  --background: var(--neutral-000);
  --surface: #e4e4ea;
  --pill: var(--neutral-100);
  --card: var(--neutral-000);
  --noise-opacity: 0.3;
  --outline: var(--neutral-300);
  --text: var(--neutral-800);
  --text-light: black;

  color-scheme: light;
}

.dark {
  --background-dark: var(--neutral-800);
  --background: var(--neutral-500);
  --surface: var(--neutral-400);
  --pill: var(--neutral-400);
  --card: linear-gradient(to bottom right, var(--neutral-500), var(--neutral-800));
  --noise-opacity: 1;
  --outline: var(--neutral-400);
  --text: var(--neutral-100);
  --text-light: white;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background-dark);
}

body {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  background: var(--background-dark);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

header,
main {
  padding: 0.5rem 3rem;
}

@media (max-width: 700px) {
  header,
  main {
    padding: 0.5rem 1rem;
  }
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--background-dark);
}

a {
  color: inherit;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 3rem;
  margin: 1rem 0;
}

nav .logo {
  display: flex;
  flex: none;
  height: 36px;
}

nav .logo svg {
  height: 100%;
  width: auto;
  fill: var(--fill);
}

nav ul {
  display: flex;
  flex: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  flex: 1;
  display: flex;
  border: 1px solid var(--outline);
  border-right: none;
  background: var(--background);
}

nav li:first-child {
  border-bottom-left-radius: var(--border-radius-md);
}

nav li:last-child {
  border-right: 1px solid var(--outline);
  border-top-right-radius: var(--border-radius-md);
}

nav li a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

nav li a:hover {
  text-decoration: underline;
}

#theme {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
}

#theme svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#theme .sun,
.dark #theme .moon {
  display: none;
}

.dark #theme .sun {
  display: block;
}

/* ── Article ─────────────────────────────────────────────────────────────── */

.top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.top-info .muted {
  opacity: 0.5;
}

.top-info .source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fill);
}

.top-info .source svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Resource header ─────────────────────────────────────────────────────── */

article .meta {
  margin-top: -0.5rem;
  opacity: 0.7;
}

article img.cover {
  display: block;
  width: 100%;
  margin: 1rem 0;
  border-radius: var(--border-radius-md);
  box-shadow:
    0px 1px 1px rgba(3, 7, 18, 0.02),
    0px 5px 4px rgba(3, 7, 18, 0.03),
    0px 12px 9px rgba(3, 7, 18, 0.05),
    0px 20px 15px rgba(3, 7, 18, 0.06),
    0px 32px 24px rgba(3, 7, 18, 0.08);
}

/* Reviews float a half-width poster next to the text, like the website. */
article.resource-Review img.cover {
  float: left;
  width: 50%;
  margin: 0 1rem 1rem 0;
}

article.resource-Review::after {
  content: "";
  display: block;
  clear: both;
}

article {
  padding-bottom: 3rem;
  overflow-wrap: break-word;
}

article h1,
article h2,
article h3,
article h4 {
  color: var(--text-light);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1.25;
}

article > h1:first-child {
  font-size: 2.25rem;
  margin-top: 0.5rem;
}

article h1 {
  font-size: 28px;
}

article h2 {
  font-size: 22px;
  margin-top: 2rem;
}

article h3 {
  font-size: 18px;
  margin-top: 1.5rem;
}

article p,
article li {
  font-size: 16px;
}

article a {
  color: var(--fill);
}

article img,
article video,
article iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm);
}

article hr {
  border: none;
  border-top: 1px solid var(--outline);
  margin: 2rem 0;
}

article blockquote {
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--fill);
  background: var(--background);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* Task lists */
article li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.25rem;
}

article input[type="checkbox"] {
  accent-color: var(--fill);
  margin-right: 0.4rem;
}

/* Code */
article code,
article pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

article code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--surface);
}

article pre {
  padding: 20px;
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  line-height: 1.45;
}

/* Shiki's github-dark background, as in the website's code blocks. */
article pre.chroma {
  background: #24292e;
}

article pre code {
  padding: 0;
  background: none;
  font-size: 0.85em;
}

/* Tables */
article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem 0;
}

article th,
article td {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--outline);
  text-align: left;
}

article th {
  background: var(--background);
  font-weight: 400;
}

/* ── Lists (notes with `list:` in their frontmatter) ─────────────────────── */
/* Mirrors HeroCard on max-richter.dev. */

.list-search {
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  border: 1px solid var(--outline);
  border-radius: 5px;
  background: var(--card);
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 3rem;
}

.card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--outline);
  border-radius: 0 var(--border-radius-md) 0 var(--border-radius-md);
  background: var(--card);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(noise.webp);
  background-size: 200px;
  opacity: var(--noise-opacity);
  pointer-events: none;
}

.card.has-cover {
  grid-template-columns: 1fr 200px;
  min-height: 200px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 2rem;
}

.card h2 {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--text-light);
}

.card h2 a {
  color: inherit;
  text-decoration: none;
}

.card p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pills span {
  padding: 2px 11px;
  border-radius: 14px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0.7;
  background: var(--pill);
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: auto;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  background: var(--pill);
  text-decoration: none;
}

.read-more svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The cover fills whatever height the text needs instead of setting it. */
.card-cover {
  position: relative;
}

.card-cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-left: 1px solid var(--outline);
}

@media (max-width: 450px) {
  .card.has-cover {
    grid-template-columns: none;
    grid-template-rows: 200px 1fr;
  }

  .card-cover {
    order: -1;
  }

  .card-cover img {
    border-left: none;
    border-bottom: 1px solid var(--outline);
  }

  .card h2 {
    font-size: 1.75rem;
  }
}