/* ============================================================
   MOTIVATION.SE — Category Colour System
   Brand spec: 2px top line on article cards + label colour.
   No category should dominate over Turkos (#1FA3B8).

   Usage in Wagtail templates:
     <article class="article-card cat-ledarskap" ...>
     or: <article data-category="ledarskap" ...>
   ============================================================ */

/* ── Colour tokens ────────────────────────────────────────── */
:root {
  --cat-ledarskap:  #1FA3B8;   /* Turkos  — primary */
  --cat-motivera: #E8765A;   /* Korall */
  --cat-karriar:    #5B63C7;   /* Indigo */
  --cat-halsa:      #4E9E6B;   /* Skog */
  --cat-coacha:     #D6A537;   /* Bärnsten */
}

/* ── Data-attribute approach ──────────────────────────────── */
[data-category="ledarskap"]  {
  --cat-color: var(--cat-ledarskap);
  --cat-bg:    rgba(31, 163, 184, 0.08);
}
[data-category="motivera"] {
  --cat-color: var(--cat-motivera);
  --cat-bg:    rgba(232, 118, 90, 0.08);
}
[data-category="karriar"] {
  --cat-color: var(--cat-karriar);
  --cat-bg:    rgba(91, 99, 199, 0.08);
}
[data-category="halsa"] {
  --cat-color: var(--cat-halsa);
  --cat-bg:    rgba(78, 158, 107, 0.08);
}
[data-category="coacha"] {
  --cat-color: var(--cat-coacha);
  --cat-bg:    rgba(214, 165, 55, 0.08);
}

/* ── Class-based approach ─────────────────────────────────── */
.cat-ledarskap  { --cat-color: var(--cat-ledarskap);  --cat-bg: rgba(31,163,184,0.08);  }
.cat-motivera { --cat-color: var(--cat-motivera); --cat-bg: rgba(232,118,90,0.08);  }
.cat-karriar    { --cat-color: var(--cat-karriar);    --cat-bg: rgba(91,99,199,0.08);   }
.cat-halsa      { --cat-color: var(--cat-halsa);      --cat-bg: rgba(78,158,107,0.08);  }
.cat-coacha     { --cat-color: var(--cat-coacha);     --cat-bg: rgba(214,165,55,0.08);  }

/* ── 2px top line on article cards (brand spec) ───────────── */
.article-card[data-category],
.list-article[data-category],
.article-card.cat-ledarskap,
.article-card.cat-motivera,
.article-card.cat-karriar,
.article-card.cat-halsa,
.article-card.cat-coacha,
.list-article.cat-ledarskap,
.list-article.cat-motivera,
.list-article.cat-karriar,
.list-article.cat-halsa,
.list-article.cat-coacha {
  border-top: 2px solid var(--cat-color);
}

/* ── Category label text colour ───────────────────────────── */
[data-category] .card-tag,
[data-category] .list-tag,
[data-category] .meta-tag,
[data-category] .hero-tag,
[data-category] .featured-tag,
[data-category] .mini-tag,
[data-category] .related-tag,
[data-category] .list-divider {
  color: var(--cat-color);
}

/* .list-article-divider is the subject-page variant of the same divider
   (ledarskap mockup) — without it the line stayed teal while the label
   took the topic colour. */
[data-category] .list-divider,
[data-category] .list-article-divider {
  background: var(--cat-color);
  color: transparent;
}

/* ── Section banner colour accent ─────────────────────────── */
.category-banner[data-category] .category-eyebrow {
  color: var(--cat-color);
}

/* ── Utility: coloured top border ─────────────────────────── */
.cat-border-ledarskap  { border-top: 2px solid var(--cat-ledarskap); }
.cat-border-motivera { border-top: 2px solid var(--cat-motivera); }
.cat-border-karriar    { border-top: 2px solid var(--cat-karriar); }
.cat-border-halsa      { border-top: 2px solid var(--cat-halsa); }
.cat-border-coacha     { border-top: 2px solid var(--cat-coacha); }

/* ── Utility: coloured text ───────────────────────────────── */
.cat-text-ledarskap  { color: var(--cat-ledarskap); }
.cat-text-motivera { color: var(--cat-motivera); }
.cat-text-karriar    { color: var(--cat-karriar); }
.cat-text-halsa      { color: var(--cat-halsa); }
.cat-text-coacha     { color: var(--cat-coacha); }

/* ── Utility: light background tints ─────────────────────── */
.cat-bg-ledarskap  { background: rgba(31,163,184,0.08);  }
.cat-bg-motivera { background: rgba(232,118,90,0.08);  }
.cat-bg-karriar    { background: rgba(91,99,199,0.08);   }
.cat-bg-halsa      { background: rgba(78,158,107,0.08);  }
.cat-bg-coacha     { background: rgba(214,165,55,0.08);  }

/* ── Category pill / label chip ───────────────────────────── */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  color: var(--cat-color, var(--accent-dark, #157E90));
  background: var(--cat-bg, var(--tag-bg, #E3F3F6));
}

/* ── Navigation active state ──────────────────────────────── */
nav a.active-ledarskap  { color: var(--cat-ledarskap) !important; }
nav a.active-motivera { color: var(--cat-motivera) !important; }
nav a.active-karriar    { color: var(--cat-karriar) !important; }
nav a.active-halsa      { color: var(--cat-halsa) !important; }
nav a.active-coacha     { color: var(--cat-coacha) !important; }

/* ── Wagtail template tag helper ─────────────────────────── */
/*
   In your Wagtail template, apply the category as a data attribute:

   <article class="article-card" data-category="{{ page.category.slug }}">

   Or as a class:

   <article class="article-card cat-{{ page.category.slug }}">

   Category slugs must match: ledarskap | motivera | karriar | halsa | coacha
*/