/* Category Visual Differentiation
 * Each category gets a distinct accent color and headline font.
 * Scoped by WordPress body class (.category-{slug} on archives, 
 * .single-post for single posts with category class injected via PHP).
 */

/* === Font Faces (locally bundled) === */

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/syne-400-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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-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;
}

/* === Category: The Mirror (Yellow / Manrope 400) === */

.category-the-mirror {
  --cat-accent: #FFEE58;
  --cat-font-heading: 'Manrope', sans-serif;
  --cat-font-weight: 400;
}

/* === Category: The Experiment (Sovereign Green / Syne 700) === */

.category-the-experiment {
  --cat-accent: #22c55e;
  --cat-font-heading: 'Syne', sans-serif;
  --cat-font-weight: 700;
}

/* === Category: Developer Voice (Amber / JetBrains Mono 500) === */

.category-developer {
  --cat-accent: #f59e0b;
  --cat-font-heading: 'JetBrains Mono', monospace;
  --cat-font-weight: 500;
}

/* === Category: Process (Deep Purple / Manrope 600) === */

.category-process {
  --cat-accent: #503AA8;
  --cat-font-heading: 'Manrope', sans-serif;
  --cat-font-weight: 600;
}

/* === Category: Backstory (Violet / Syne 800) === */

.category-backstory {
  --cat-accent: #7c3aed;
  --cat-font-heading: 'Syne', sans-serif;
  --cat-font-weight: 800;
}

/* === Application Rules === */

/* 1. Article title on single post */
.single-post .wp-block-post-title,
.single-post h1.entry-title,
.single-post h1.wp-block-heading:first-of-type {
  font-family: var(--cat-font-heading, inherit);
  font-weight: var(--cat-font-weight, 400);
}

/* 2. Category tag/link color */
.wp-block-post-terms a,
.cat-links a {
  color: var(--cat-accent, currentColor);
}

/* 3. Top border on single post entry header */
.single-post .entry-header,
.single-post .wp-block-post-title {
  border-top: 2px solid var(--cat-accent, transparent);
  padding-top: 0.75rem;
}

/* 4. Left border on archive/query loop cards */
.category-the-mirror .wp-block-post,
.category-the-experiment .wp-block-post,
.category-developer .wp-block-post,
.category-process .wp-block-post,
.category-backstory .wp-block-post {
  border-left: 3px solid var(--cat-accent, transparent);
  padding-left: 1rem;
}

/* 5. Category link colors on listing pages (home/blog/archives).
   Home page and blog index don't have category body class,
   so we target via href attribute on the category link. */
.home .wp-block-post-terms a[href*="the-mirror"],
.blog .wp-block-post-terms a[href*="the-mirror"] { color: #FFEE58; }
.home .wp-block-post-terms a[href*="the-experiment"],
.blog .wp-block-post-terms a[href*="the-experiment"] { color: #22c55e; }
.home .wp-block-post-terms a[href*="developer"],
.blog .wp-block-post-terms a[href*="developer"] { color: #f59e0b; }
.home .wp-block-post-terms a[href*="process"],
.blog .wp-block-post-terms a[href*="process"] { color: #503AA8; }
.home .wp-block-post-terms a[href*="backstory"],
.blog .wp-block-post-terms a[href*="backstory"] { color: #7c3aed; }

/* === Light Mode Overrides === */
/* Ensure accent colors have sufficient contrast in light mode */

html.light-mode .category-the-mirror { --cat-accent: #c9a800; }
html.light-mode .category-process { --cat-accent: #503AA8; }

/* Light mode listing page overrides */
html.light-mode .home .wp-block-post-terms a[href*="the-mirror"],
html.light-mode .blog .wp-block-post-terms a[href*="the-mirror"] { color: #c9a800; }
html.light-mode .home .wp-block-post-terms a[href*="process"],
html.light-mode .blog .wp-block-post-terms a[href*="process"] { color: #503AA8; }