/* Self-hosted JetBrains Mono (OFL, see /fonts/jetbrains-mono/OFL.txt). */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono/latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono/latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  /* Techy palette: near-black navy, electric cyan primary, violet accent. */
  --background: oklch(0.145 0.025 262);
  --foreground: oklch(0.97 0.005 250);
  --card: oklch(0.19 0.03 262);
  --card-foreground: var(--foreground);
  --primary: oklch(0.82 0.14 200);
  --primary-foreground: oklch(0.15 0.03 262);
  --secondary: oklch(0.26 0.035 262);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2 0.03 262);
  --muted-foreground: oklch(0.86 0.02 255);
  --accent: oklch(0.6 0.22 295);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3 0.035 262);
  --input: oklch(0.3 0.035 262);
  /* Headings, buttons and badges use --font-sans; body text keeps Inter via --font-body. */
  --font-sans: "JetBrains Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "JetBrains Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Site-specific touches on top of the Mercury tokens. */
.dark body {
  background-color: var(--background);
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, oklch(0.6 0.22 295 / 0.18), transparent 70%),
    radial-gradient(50rem 30rem at 0% 10%, oklch(0.82 0.14 200 / 0.12), transparent 70%),
    linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}

.dark h1 {
  background: linear-gradient(90deg, var(--foreground) 30%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dark ::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Monospace accents: headings, nav, buttons, footer utility row. Running text stays Inter. */
.dark body {
  font-family: var(--font-body);
}

.dark :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: -0.04em;
}

/* Mercury buttons have no dedicated class; this matches its button.twig base classes. */
.dark :is(.navbar a, .site-footer--bottom-col, .accordion--title, a.group.rounded-lg.font-medium, button.group.rounded-lg.font-medium) {
  font-family: var(--font-mono);
}

/* Breathing room for long-form node content such as blog posts. */
.dark .path-node article :is(h2, h3) {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.dark .path-node article h2 {
  font-size: var(--text-2xl);
}

.dark .path-node article h3 {
  font-size: var(--text-xl);
  color: var(--primary);
}

.dark .navbar a {
  font-size: 0.875rem;
}

.dark .path-node article {
  max-width: 75ch;
}

/* Blog feed (views.view.blog): fields rendered as cards in a responsive grid. */
.blog-feed .view-content {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .blog-feed .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .blog-feed .view-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.blog-card:hover,
.blog-card:focus-within {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.blog-card__field-featured-image {
  margin: -1.5rem -1.5rem 0.25rem;
}

.blog-card__field-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-card__created {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--primary);
}

.blog-card__created::before {
  content: "// ";
}

.blog-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* Whole card is clickable through the title link. */
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card__title a:focus-visible {
  outline: none;
}

.blog-card:has(a:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.blog-card__field-description {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.blog-feed .view-empty {
  color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
}