/* Claudette brand colors mapped to Starlight CSS variables */
/* Palette: Coral (#E07850), Pink (#F5A0B8), Cream (#FFF8F0), Charcoal (#2A2A30) */

:root {
  --sl-color-accent-low: #3d1e0e;
  --sl-color-accent: #e07850;
  --sl-color-accent-high: #ffeee5;
  --sl-color-white: #f0ebe5;
  --sl-color-gray-1: #ddd5cc;
  --sl-color-gray-2: #b8afa5;
  --sl-color-gray-3: #908880;
  --sl-color-gray-4: #686058;
  --sl-color-gray-5: #3d3832;
  --sl-color-gray-6: #2a2520;
  --sl-color-black: #1c1815;

  --sl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --sl-font-system: var(--sl-font);
  --font-display: "Silkscreen", "Inter", sans-serif;
}

:root[data-theme='light'] {
  --sl-color-accent-low: #fff0e8;
  --sl-color-accent: #c45a35;
  --sl-color-accent-high: #3d1e0e;
  --sl-color-white: #2a2520;
  --sl-color-gray-1: #3d3832;
  --sl-color-gray-2: #686058;
  --sl-color-gray-3: #908880;
  --sl-color-gray-4: #b8afa5;
  --sl-color-gray-5: #ddd5cc;
  --sl-color-gray-6: #f5efe8;
  --sl-color-black: #fff8f0;
}

/* Starlight logo image — pixelated rendering for pixel art */
.site-title img {
  image-rendering: pixelated;
}

/* Header brand title — Silkscreen pixel font to match the footer brand mark */
.site-title span {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Warmer link colors */
:root {
  --sl-color-text-accent: #f0956e;
  --sl-sidebar-width: 14rem;
  --sl-content-width: 55rem;
}

/* ============================================================
   Header — primary nav + centered search.
   The override in `components/SiteTitle.astro` injects a nav
   element alongside the brand lockup; this CSS styles that nav
   and rebalances the header so search sits visually centered. */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.site-nav-links a {
  color: var(--sl-color-gray-2);
  text-decoration: none;
  transition: color 0.12s ease;
  white-space: nowrap;
}
.site-nav-links a:hover {
  color: var(--sl-color-text-accent);
}

/* Center the Starlight search input. Starlight uses CSS Grid for the
   header (not flex), with `grid-template-columns` auto-sized per child.
   Replacing it with `1fr auto 1fr` collapses the search column to its
   button width and gives the side columns equal slack, so the search
   button lands at the viewport midline regardless of side-content size. */
header.header > .header {
  grid-template-columns: 1fr auto 1fr;
}
header.header > .header > .right-group {
  justify-content: flex-end;
}

@media (max-width: 800px) {
  /* On narrow viewports drop the inline nav — Starlight's mobile menu
     surfaces the same destinations through the docs sidebar. */
  .site-nav-links { display: none; }
}
