/* PaperMod campaign palette on Stack (light / dark). Sky tint #c4e2e4 from feuille de chou (Marie - LSL). */
/* Tighter vertical rhythm (Stack defaults are roomy) */
html[data-scheme="light"],
html[data-scheme="dark"] {
  --section-separation: 22px;
  --main-top-padding: 16px;
}

@media (min-width: 1280px) {
  html[data-scheme="light"],
  html[data-scheme="dark"] {
    --main-top-padding: 24px;
  }
}

html[data-scheme="light"] {
  --body-background: #faf8ec;
  --accent-color: #1b5745;
  --accent-color-darker: #133d30;
  --accent-color-text: #faf8ec;
  --body-text-color: #3d4a42;

  --card-background: #ffffff;
  --card-background-selected: color-mix(in srgb, #c4e2e4 20%, #f4f1e6);
  --card-text-color-main: #1f2924;
  --card-text-color-secondary: #4a5750;
  --card-text-color-tertiary: #5c6a62;
  --card-separator-color: color-mix(in srgb, #c4e2e4 32%, rgba(27, 87, 69, 0.14));

  --blockquote-background-color: color-mix(in srgb, #c4e2e4 26%, #f4f1e6);
  --link-background-color: 27, 87, 69;
}

html[data-scheme="dark"] {
  /* Slightly separated surfaces + higher-contrast text (WCAG-friendly) */
  --body-background: #121816;
  --accent-color: #a8d4c4;
  --accent-color-darker: #8fbcab;
  --accent-color-text: #0d1210;
  --body-text-color: rgba(255, 255, 255, 0.9);

  --card-background: #1b2220;
  --card-background-selected: rgba(168, 212, 196, 0.14);
  --card-text-color-main: #f0f5f3;
  --card-text-color-secondary: rgba(240, 245, 243, 0.88);
  --card-text-color-tertiary: rgba(240, 245, 243, 0.76);
  --card-separator-color: rgba(168, 212, 196, 0.22);

  --blockquote-background-color: color-mix(in srgb, #c4e2e4 16%, #252d2a);
  --link-background-color: 168, 212, 196;
}

/* Stack never sets body text color; paragraphs inherit black → invisible on dark bg */
html[data-scheme="dark"] body {
  color: var(--body-text-color);
}

/* Home intro / prose sitting on main background */
html[data-scheme="dark"] .home-intro.article-content,
html[data-scheme="dark"] .home-intro.article-content p,
html[data-scheme="dark"] .home-intro.article-content li {
  color: var(--card-text-color-main);
}

html[data-scheme="dark"] .home-intro.article-content figcaption,
html[data-scheme="dark"] .home-intro.article-content em {
  color: var(--card-text-color-secondary);
}

/* Sidebar logo: crisp SVG scaling */
.site-avatar .site-logo {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

html[data-scheme="light"] .site-avatar .site-logo {
  background: rgba(27, 87, 69, 0.06);
}

/* Main column uses theme padding + our smaller --main-top-padding */
main.main {
  gap: var(--section-separation);
}

/* Home intro: trim empty margin around the blurb */
.home-intro.article-content {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.home-intro.article-content > p:first-child {
  margin-top: 0;
}

.home-intro.article-content > p:last-child {
  margin-bottom: 0;
}

/* List cards: stack image full-width (no accidental side “void”) */
.article-list article .article-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Featured photos on list: shorter band = less empty feel */
.article-list article .article-image {
  width: 100%;
  align-self: stretch;
  aspect-ratio: 16 / 9;
  max-height: min(26vh, 220px);
  overflow: hidden;
  background: var(--card-background-selected);
}

.article-list article .article-image a {
  display: block;
  height: 100%;
}

.article-list article .article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-list article .article-details {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  gap: 0.65rem;
}

.article-list article .article-title {
  font-size: 1.85rem;
}

@media (min-width: 1280px) {
  .article-list article .article-title {
    font-size: 2rem;
  }
}

.article-list article .article-meta {
  gap: 0.5rem;
}

/* Sidebar: don’t stretch the nav to fill the viewport (removes huge gap above language / theme) */
@media (min-width: 768px) {
  .left-sidebar #main-menu {
    flex-grow: 0;
  }

  .left-sidebar #main-menu .menu-bottom-section {
    margin-top: 1rem;
  }
}

/* Single post hero: a bit taller, centered crop */
.article-page .main-article .article-header .article-image img {
  max-height: min(58vh, 520px);
  object-fit: cover;
  object-position: center;
}

/* Welcome block on home: if you add an image later, keep it modest */
.home-intro.article-content img {
  max-width: 100%;
  max-height: min(280px, 38vh);
  width: auto;
  height: auto;
  border-radius: var(--card-border-radius, 10px);
}

/* --- Sidebar menu: larger on desktop; compact + scroll on phones --- */
#main-menu {
  font-size: 1.65rem;
  line-height: 1.35;
}

#main-menu li a {
  padding: 0.35rem 0;
  min-height: 2.75rem;
  font-weight: 500;
}

#main-menu li.current a {
  font-weight: 700;
}

#main-menu .menu-bottom-section {
  font-size: 1.5rem;
}

#main-menu .menu-bottom-section ol.menu {
  gap: var(--spacing-lg, 20px);
}

#main-menu #i18n-switch select,
#main-menu #dark-mode-toggle span {
  font-size: 1.45rem;
}

#main-menu li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #main-menu {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  #main-menu li a {
    min-height: 2.4rem;
    padding: 0.25rem 0;
  }

  #main-menu .menu-bottom-section {
    font-size: 1.3rem;
  }

  #main-menu #i18n-switch select,
  #main-menu #dark-mode-toggle span {
    font-size: 1.25rem;
  }

  /* Drawer must not fill the whole viewport */
  #main-menu.show {
    max-height: min(calc(100vh - 5.5rem), 22rem) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1280px) {
  #main-menu {
    font-size: 1.55rem;
  }
}

/* Home intro: tables without theme table-wrapper still scroll */
@media (max-width: 767px) {
  .home-intro.article-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home-intro.article-content table {
    min-width: min(100%, 36rem);
  }
}