/* ============================================================
   canopy-page editions in the site's design
   ============================================================
   The blog (site/blog/<locale>/) is written by canopy-page, not by Vite. Its head
   fragment links site-chrome.css (the site's tokens, header, footer, buttons) and then
   this file, which maps canopy's vocabulary onto those tokens and fits canopy's page to
   the site's frame. canopy's own CSS sits in cascade layers and these rules do not, so
   plain selectors win.

   The site has one scheme — dark. The blog's settings say so (`colorScheme`), so canopy
   draws every page in its dark palette — code highlighting included — whatever the
   reader's system prefers, with no toggle. What is left here is the site's own values,
   stated without a scheme condition.
   ============================================================ */

:root {
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --text-normal: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-faint: #8a8a8a;
  --accent: var(--color-accent);
  --accent-hover: #fb923c;
  --border: var(--color-border);
  --border-strong: #404040;
  --font-ui: var(--font-sans);
  --font-monospace: var(--font-mono);
  --radius-m: var(--radius-md);

  /* the site's neutral grey, where canopy's quote is a cool one */
  --callout-quote: #a3a3a3;   --callout-quote-bg: rgba(163, 163, 163, 0.12);
}

/* ---- Frame: the site's header on top, its footer at the bottom of a short page ---- */

html {
  scroll-padding-top: 80px; /* the sticky header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* The site's base rule colors every link; canopy's colors only its own regions. */
.site-footer .footer-copy a {
  color: var(--color-accent);
}

.canopy-layout {
  flex: 1 0 auto;
  min-height: 0;
}

.canopy-main {
  padding-top: clamp(2rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

/* canopy opens every page with its skip link (accent on the page background, 7.3:1). Shown,
   it has to sit above the sticky header, which shares canopy's z-index of 100. */
.canopy-skip-link:focus {
  z-index: 200;
  font-weight: 600;
}

/* ---- Header: canopy's search and language links inside the site's nav ---- */

.site-nav .site-search {
  display: flex;
}

.site-nav .canopy-search input[type="search"] {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  font-size: 0.875rem;
}

.site-nav .canopy-search input[type="search"]:focus {
  border-color: var(--color-accent);
  outline: none;
}

.site-nav a[aria-current="page"] {
  color: var(--color-text);
}

/* canopy's language links, drawn as the site's language pill */
.lang-switch .canopy-language {
  font-size: inherit;
}

.lang-switch .canopy-language a {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
}

.lang-switch .canopy-language a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

/* ---- Article: the site's type on canopy's measure ---- */

.canopy-content h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 0;
}

.canopy-content h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.canopy-content a:hover {
  opacity: 1;
}

/* The list of articles: each one a card, as the site lists its apps */
.canopy-content .canopy-listing li {
  padding: 1.25rem 1.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
}

.canopy-content .canopy-listing li:hover {
  box-shadow: var(--shadow-card-hover);
}

.canopy-content .canopy-listing .canopy-listing-title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
}

.canopy-content .canopy-listing .canopy-listing-title:hover {
  color: var(--color-accent);
}

.canopy-content .canopy-listing time {
  margin-left: 0;
}

/* ---- After the article ---- */

.canopy-after-article {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.blog-after-post {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.blog-after-post > a:not(.btn) {
  font-weight: 600;
  text-decoration: none;
}

.canopy-content .blog-after-post .btn {
  color: var(--color-text);
}

.canopy-content .blog-after-post .btn:hover {
  color: var(--color-accent);
}

.canopy-content .blog-topics h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.blog-topics ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.5rem 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.blog-topics li {
  margin: 0;
}

.canopy-content .blog-topics li > a:first-child {
  margin-right: 0.375rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---- Narrower screens ---- */

/* canopy-page collapses search to its icon at 40rem, sized for canopy's own top bar. The
   site's header holds the wordmark and four nav items besides, so the full field runs out
   of room sooner (61px of overflow at 660px): collapse it here as canopy-page does there,
   expanding on focus. */
@media (max-width: 56rem) {
  .site-nav .canopy-search input[type="search"] {
    width: 2.25rem;
    padding-right: var(--sp-2);
    transition: width 0.15s ease;
  }

  .site-nav .canopy-search:focus-within input[type="search"] {
    width: 12rem;
  }

  .site-nav .canopy-search-shortcut {
    display: none;
  }
}

/* The nav keeps the site's spacing and wraps rather than overflow */
@media (max-width: 640px) {
  .site-header .container {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    row-gap: 0;
  }

  .site-nav {
    flex-wrap: wrap;
  }
}