/* Aligns Ananke with the Les Salles palette (cf. PaperMod lessalles.css). Sky #c4e2e4 = feuille de chou template (Marie - LSL). */
:root {
  --ls-cream: #faf8ec;
  --ls-cream-muted: #f4f1e6;
  --ls-primary: #1b5745;
  --ls-secondary: #572f1b;
  --ls-tertiary: #88a062;
  --ls-accent-sky: #c4e2e4;
  --ls-ink: #1f2924;
  --ls-ink-muted: #3d4a42;
}

/* One sans stack: theme still uses .athelas on single posts and .serif unless overridden in config. */
body.ma0 {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--ls-cream) !important;
  color: var(--ls-ink);
}

body.ma0 .serif {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Single-post title (layouts/single.html uses .sans-serif) */
main article.flex-l h1.f1 {
  font-weight: 600;
  color: var(--ls-primary);
  letter-spacing: -0.02em;
}

/* Home “More” links: same weight as summary titles */
main section h1.f3,
main section h2.f5 a.link {
  font-weight: 600;
  color: var(--ls-ink);
}

main section h2.f5 a.link:hover {
  color: var(--ls-primary);
}

/* Section kicker, metadata — theme uses .helvetica */
.helvetica,
.tracked.ttu {
  font-family: "Source Sans 3", system-ui, sans-serif !important;
  letter-spacing: 0.04em;
  color: var(--ls-tertiary);
}

/* Brand surfaces (header without hero, footer) */
.bg-dark-green {
  background-color: var(--ls-primary) !important;
}

/* Hero photos: nav sits on a solid strip; optional title-only shadow (menu links stay flat) */

.ananke-hero--photo {
  background-size: cover;
  background-position: center center;
}

.ananke-hero--photo .ananke-topnav {
  background-color: color-mix(in srgb, var(--ls-primary) 88%, #071210);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
}

.ananke-hero--photo .ananke-topnav .ananke-nav-bar > a.f3 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Same nav type scale on solid headers (bg-dark-green) and photo-hero strip */
.ananke-topnav .ananke-nav-bar > a.f3 {
  font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.55rem);
  font-weight: 600;
}

.ananke-topnav .ananke-nav-menu a.ananke-nav-link,
.ananke-topnav .ananke-i18n-list a {
  font-size: clamp(1.02rem, 0.55vw + 0.88rem, 1.2rem);
  font-weight: 500;
}

.ananke-topnav .ananke-i18n-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

.ananke-topnav .ananke-nav-toggle svg {
  width: 24px;
  height: 24px;
}

.ananke-hero-text h1,
.ananke-hero-text h2,
.ananke-hero-text .ananke-hero-desc {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(0, 0, 0, 0.35);
}

/* In-content links */
main .nested-links a,
main .link.blue,
main article .link {
  color: var(--ls-primary);
  transition: color 0.15s ease;
}

main .nested-links a:hover,
main .link.blue:hover,
main article .link:hover {
  color: var(--ls-secondary);
}

/* Summary / list “read more” and titles */
main .summary-with-image .link.black,
main .summary .link.black,
main h2 a.link {
  color: var(--ls-ink);
}

main .summary-with-image .link.black:hover,
main .summary .link.black:hover,
main h2 a.link:hover {
  color: var(--ls-primary);
}

/* Tag pills */
.tags a.link,
main .br-pill.link {
  border-color: color-mix(in srgb, var(--ls-primary) 35%, #ccc);
  color: var(--ls-primary);
}

.tags a.link:hover {
  background-color: color-mix(in srgb, var(--ls-accent-sky) 22%, var(--ls-cream-muted));
}

/* Contextual menu / aside boxes */
.bg-light-gray {
  background-color: var(--ls-cream-muted) !important;
}

/* Home intro block */
.home main article.nested-links {
  color: var(--ls-ink-muted);
}

/* Footer contrast */
footer[role="contentinfo"] a.hover-white:hover {
  color: #fff !important;
}

/* —— Mobile nav: same pattern as municipal / PaperMod (floating panel under bar) —— */
.ananke-nav-shell {
  position: static;
}

/* Touch target ≥ 44px; icon stays modest */
.ananke-nav-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem;
}

.ananke-nav-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

@media screen and (max-width: 59.9375em) {
  .ananke-nav-shell {
    position: relative;
    z-index: 50;
  }

  /* Light card under the title row; readable like municipal / PaperMod */
  .ananke-nav-drawer {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.35rem;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: 0.55rem 0.7rem;
    gap: 0;
    background: var(--ls-cream);
    color: var(--ls-ink);
    border: 1px solid color-mix(in srgb, var(--ls-primary) 22%, #c8d4cf);
    border-radius: 10px;
    box-shadow: none;
    max-height: min(75vh, 24rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .ananke-nav-drawer.is-open {
    display: flex;
  }

  /* Readable text inside the light panel (beats Tachyons .white-90 on links) */
  .ananke-nav-drawer.is-open a {
    color: var(--ls-primary);
  }

  .ananke-nav-drawer.is-open a:hover {
    color: var(--ls-secondary);
  }

  .ananke-nav-drawer .ananke-nav-menu li {
    display: block !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ls-primary) 12%, transparent);
  }

  .ananke-nav-drawer .ananke-nav-menu li:last-child {
    border-bottom: none;
  }

  .ananke-nav-drawer .ananke-nav-link {
    padding: 0.5rem 0.15rem;
    font-size: 0.94rem;
    line-height: 1.35;
  }

  /* Language row at bottom of drawer after menu + social */
  .ananke-nav-drawer .ananke-i18n-block {
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--ls-primary) 12%, transparent);
  }

  .ananke-nav-drawer .ananke-i18n-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.25rem;
    padding: 0.5rem 0.1rem;
  }

  .ananke-nav-drawer .ananke-i18n-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ls-ink-muted);
    line-height: 1.3;
    flex-shrink: 0;
  }

  .ananke-nav-drawer .ananke-i18n-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
  }

  .ananke-nav-drawer .ananke-i18n-list li {
    display: block !important;
    padding: 0 !important;
    margin: 0;
  }

  .ananke-nav-drawer .ananke-i18n-list a {
    font-size: 0.94rem;
    font-weight: 600;
    padding: 0.2rem 0;
    line-height: 1.35;
  }

  .ananke-nav-drawer .ananke-nav-menu {
    margin-top: 0;
    width: 100%;
  }

  .ananke-nav-drawer .ananke-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding-top: 0.25rem;
    margin-top: 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--ls-primary) 10%, transparent);
  }

  .ananke-nav-drawer .ananke-social-link {
    padding-top: 0.35rem !important;
  }

  .ananke-nav-drawer .ananke-socials a .icon svg {
    width: 26px;
    height: 26px;
  }
}

@media screen and (min-width: 60em) {
  .ananke-nav-toggle {
    display: none !important;
  }

  .ananke-nav-shell {
    position: static;
    z-index: auto;
  }

  /* One horizontal row: site title | menu + social + i18n (i18n last → stays at the right edge) */
  .ananke-topnav .flex-l.justify-between.items-center {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  /* Don’t shrink the title (was clipping with ellipsis at ~960–1200px). Menu wraps inside the drawer instead. */
  .ananke-nav-bar {
    flex: 0 0 auto;
    min-width: min-content;
    max-width: none;
  }

  .ananke-nav-bar > a.f3 {
    white-space: nowrap;
    letter-spacing: -0.02em;
    font-size: clamp(1.2rem, 1.05vw + 1rem, 1.58rem);
  }

  .ananke-topnav .ananke-nav-menu a.ananke-nav-link,
  .ananke-topnav .ananke-i18n-list a {
    font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  }

  .ananke-nav-drawer {
    display: flex !important;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    gap: 0.35rem 1rem;
    row-gap: 0.4rem;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .ananke-nav-drawer .ananke-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    column-gap: 0;
    row-gap: 0.2rem;
  }

  .ananke-nav-drawer .ananke-nav-menu li {
    white-space: nowrap;
  }

  .ananke-nav-drawer .ananke-i18n-block {
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: 0.35rem;
    padding: 0;
    border: none;
  }

  .ananke-i18n-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
  }

  .ananke-i18n-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.95;
    white-space: nowrap;
  }

  .ananke-i18n-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  .ananke-nav-drawer .ananke-socials {
    flex: 0 0 auto;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: 0.15rem;
  }
}

/* —— Mobile: wide tables / code scroll inside article —— */
@media screen and (max-width: 59.9375em) {
  article .nested-copy-line-height {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  article .nested-copy-line-height table {
    min-width: min(100%, 32rem);
  }
}

/* Prose accents (feuille de chou sky) */
main .nested-copy-line-height blockquote {
  margin: 1.15em 0;
  padding: 0.65rem 1rem 0.65rem 1rem;
  border-left: 4px solid var(--ls-accent-sky);
  background: color-mix(in srgb, var(--ls-accent-sky) 12%, var(--ls-cream-muted));
  border-radius: 0 8px 8px 0;
  color: var(--ls-ink-muted);
}

main .nested-copy-line-height hr {
  border: 0;
  height: 2px;
  margin: 1.5em 0;
  background: color-mix(in srgb, var(--ls-accent-sky) 70%, var(--ls-tertiary) 30%);
  border-radius: 1px;
}