/*
 * HairConnect — de gebruikershandleiding.
 *
 * De waarden komen uit packages/tokens/tokens.css — verander ze daar, niet hier.
 * Ze staan hieronder herhaald omdat deze pagina's bewust geen buildstap hebben:
 * de handleiding moet ook renderen op een server waar de frontends nog niet
 * gebouwd zijn, en dan mag ze niet van een bundel afhangen.
 *
 * De vorm volgt de backoffice: charcoal balk bovenaan, ivoren grond, koper als
 * enige accent.
 */

:root {
  --hc-charcoal: #1f1f1f;
  --hc-graphite: #333333;
  --hc-copper: #c48a6a;
  --hc-copper-100: #f4e9e2;
  --hc-copper-400: #cfa287;
  --hc-copper-700: #8a5940;
  --hc-cream: #f4e9e2;
  --hc-ivory: #fafaf8;

  --hc-neutral-0: #ffffff;
  --hc-neutral-100: #f3f2ef;
  --hc-neutral-200: #e6e4df;
  --hc-neutral-300: #cfccc5;
  --hc-neutral-400: #a5a19a;
  --hc-neutral-500: #78746d;
  --hc-neutral-600: #565350;
  --hc-neutral-700: #3d3b39;

  --hc-nav-fg: #d8d5d1;
  --hc-radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--hc-ivory);
  color: var(--hc-graphite);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--hc-copper-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- balk bovenaan -------------------------------------------------------- */

.hc-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hc-charcoal);
  color: var(--hc-nav-fg);
}

.hc-topbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hc-wordmark {
  color: #f4f1ee;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.hc-wordmark span {
  color: var(--hc-copper-400);
}

.hc-topbar__label {
  color: var(--hc-neutral-400);
  font-size: 13px;
  border-left: 1px solid rgb(255 255 255 / 0.15);
  padding-left: 16px;
}

.hc-search {
  position: relative;
  margin-left: auto;
  width: min(300px, 40vw);
}

.hc-search input {
  width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.06);
  color: #f4f1ee;
  font: inherit;
  font-size: 14px;
}

.hc-search input::placeholder {
  color: var(--hc-neutral-400);
}

.hc-search input:focus {
  outline: 2px solid var(--hc-copper);
  outline-offset: 1px;
}

.hc-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--hc-neutral-0);
  border: 1px solid var(--hc-neutral-200);
  border-radius: var(--hc-radius);
  box-shadow: 0 12px 30px rgb(31 31 31 / 0.18);
}

.hc-search__results a {
  display: block;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hc-neutral-100);
  color: var(--hc-graphite);
  text-decoration: none;
}

.hc-search__results a:hover {
  background: var(--hc-copper-100);
}

.hc-search__cat {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hc-neutral-500);
}

.hc-search__title {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.hc-search__empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--hc-neutral-500);
}

.hc-langs {
  display: flex;
  gap: 2px;
}

.hc-langs a {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--hc-neutral-400);
  text-decoration: none;
}

.hc-langs a:hover {
  color: #f4f1ee;
  text-decoration: none;
}

.hc-langs a.is-active {
  background: var(--hc-graphite);
  color: var(--hc-copper-400);
}

.hc-button {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--hc-copper);
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hc-button:hover {
  background: var(--hc-copper-400);
  text-decoration: none;
}

/* --- raster --------------------------------------------------------------- */

.hc-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.hc-sidebar {
  width: 240px;
  flex: 0 0 240px;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.hc-sidebar__group {
  margin: 18px 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.hc-sidebar__group a {
  color: var(--hc-neutral-500);
}

.hc-sidebar__group.is-active a {
  color: var(--hc-copper-700);
}

.hc-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-sidebar li a {
  display: block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--hc-neutral-700);
}

.hc-sidebar li a:hover {
  background: var(--hc-neutral-100);
  text-decoration: none;
}

.hc-sidebar li a.is-active {
  background: var(--hc-cream);
  color: var(--hc-copper-700);
  font-weight: 600;
}

.hc-main {
  flex: 1;
  min-width: 0;
}

/* --- koppen en lijsten ---------------------------------------------------- */

.hc-page-title {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hc-charcoal);
}

.hc-lead {
  margin: 0 0 28px;
  font-size: 17px;
  color: var(--hc-neutral-600);
  max-width: 60ch;
}

.hc-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--hc-copper-700);
}

.hc-crumbs {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--hc-neutral-400);
}

.hc-crumbs a {
  color: var(--hc-neutral-500);
}

.hc-crumbs span {
  margin: 0 6px;
}

.hc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.hc-card {
  display: block;
  padding: 18px;
  background: var(--hc-neutral-0);
  border: 1px solid var(--hc-neutral-200);
  border-radius: var(--hc-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-card:hover {
  border-color: var(--hc-copper);
  box-shadow: 0 6px 18px rgb(31 31 31 / 0.06);
  text-decoration: none;
}

.hc-card__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--hc-charcoal);
}

.hc-card__count {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--hc-neutral-500);
}

.hc-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--hc-neutral-600);
}

.hc-card li {
  padding: 1px 0 1px 14px;
  position: relative;
}

.hc-card li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--hc-neutral-300);
}

.hc-card__more {
  color: var(--hc-neutral-400);
  font-style: italic;
}

.hc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.hc-list a {
  display: block;
  padding: 13px 16px;
  background: var(--hc-neutral-0);
  border: 1px solid var(--hc-neutral-200);
  border-radius: var(--hc-radius);
  color: inherit;
  text-decoration: none;
}

.hc-list a:hover {
  border-color: var(--hc-copper);
  text-decoration: none;
}

.hc-list__title {
  font-weight: 500;
  color: var(--hc-charcoal);
}

.hc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.hc-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--hc-neutral-100);
  color: var(--hc-neutral-500);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* --- de artikeltekst ------------------------------------------------------ */

.hc-prose {
  max-width: 72ch;
}

.hc-prose h1 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hc-charcoal);
}

.hc-prose h2 {
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hc-neutral-200);
  font-size: 21px;
  font-weight: 600;
  color: var(--hc-charcoal);
}

.hc-prose h3 {
  margin: 24px 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hc-graphite);
}

.hc-prose p,
.hc-prose ul,
.hc-prose ol {
  margin: 10px 0;
}

.hc-prose ul,
.hc-prose ol {
  padding-left: 22px;
}

.hc-prose li {
  margin: 3px 0;
}

.hc-prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--hc-neutral-100);
  color: var(--hc-copper-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

.hc-prose pre {
  padding: 14px 16px;
  border-radius: var(--hc-radius);
  background: var(--hc-charcoal);
  color: #e8e4e0;
  overflow-x: auto;
}

.hc-prose pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.hc-prose blockquote {
  margin: 16px 0;
  padding: 2px 16px;
  border-left: 3px solid var(--hc-copper);
  background: var(--hc-copper-100);
  border-radius: 0 8px 8px 0;
  color: var(--hc-neutral-700);
}

.hc-prose img {
  max-width: 100%;
  border-radius: var(--hc-radius);
  border: 1px solid var(--hc-neutral-200);
}

.hc-prose table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.hc-prose th,
.hc-prose td {
  border: 1px solid var(--hc-neutral-200);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.hc-prose th {
  background: var(--hc-neutral-100);
  font-weight: 600;
}

.hc-prose hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--hc-neutral-200);
}

.hc-updated {
  margin-top: -4px;
  font-size: 13px;
  color: var(--hc-neutral-400);
}

/* --- navigatie onderaan --------------------------------------------------- */

.hc-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--hc-neutral-200);
}

.hc-pager a {
  max-width: 46%;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-charcoal);
}

.hc-pager__next {
  text-align: right;
}

.hc-pager span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hc-neutral-400);
}

.hc-backlink {
  margin-top: 20px;
  font-size: 14px;
}

/* --- voet ----------------------------------------------------------------- */

.hc-footer {
  background: var(--hc-charcoal);
  color: var(--hc-neutral-400);
}

.hc-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
}

.hc-footer__links {
  display: flex;
  gap: 16px;
}

.hc-footer a {
  color: var(--hc-copper-400);
}

/* --- smal scherm ----------------------------------------------------------
   De zijbalk wordt boven de tekst een gewone lijst. Een uitklapmenu zou beter
   zijn, maar dat vraagt JavaScript voor iets wat een kapper op zijn telefoon
   één keer per maand opent. */

@media (max-width: 860px) {
  .hc-shell {
    flex-direction: column;
    gap: 20px;
  }

  .hc-sidebar {
    position: static;
    width: 100%;
    flex: none;
    max-height: 280px;
    padding: 4px 12px 12px;
    background: var(--hc-neutral-0);
    border: 1px solid var(--hc-neutral-200);
    border-radius: var(--hc-radius);
  }

  .hc-page-title,
  .hc-prose h1 {
    font-size: 26px;
  }
}

/* Op een telefoon past de balk niet op één rij: het zoekveld werd een pil van
   veertig pixels en de inlogknop viel van het scherm. De balk breekt daarom in
   twee rijen, met het zoekveld over de volle breedte eronder. Verbergen was de
   makkelijke oplossing, maar dan zoekt een kapper op zijn gsm niets meer. */

@media (max-width: 700px) {
  .hc-topbar__inner {
    height: auto;
    padding: 10px 16px 12px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hc-topbar__label {
    display: none;
  }

  .hc-search {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .hc-langs {
    margin-left: auto;
  }

  .hc-button {
    padding: 6px 12px;
  }
}