/**
 * Mærker A–Z (brand index) – scoped til .sk-brand-index
 * Matcher SkoleABC tokens og child theme. Kun påvirkning inden for .sk-brand-index.
 */
.sk-brand-index {
  --sk-bi-ink: var(--sk-ink, #0a1e33);
  --sk-bi-muted: var(--sk-muted, #546372);
  --sk-bi-line: var(--sk-line, rgba(10, 30, 51, 0.1));
  --sk-bi-bg: var(--sk-bg, #f6f8fb);
  --sk-bi-card: var(--sk-card, #fff);
  --sk-bi-primary: var(--sk-primary, #1e7a4a);
  --sk-bi-radius: var(--sk-r-sm, 8px);
  --sk-bi-s1: var(--sk-s1, 8px);
  --sk-bi-s2: var(--sk-s2, 16px);
  --sk-bi-s3: var(--sk-s3, 24px);
  --sk-bi-fs0: var(--sk-fs-0, 14px);
  --sk-bi-fs1: var(--sk-fs-1, 16px);
  --sk-bi-fs2: var(--sk-fs-2, 18px);
  --sk-bi-fs3: var(--sk-fs-3, 22px);
  --sk-bi-lh: var(--sk-lh, 1.5);
}

/* Main title */
.sk-brand-index__main-title {
  margin: 0 0 var(--sk-bi-s2);
  font-size: var(--sk-bi-fs3);
  line-height: var(--sk-bi-lh);
  color: var(--sk-bi-ink);
}

.sk-brand-index__intro {
  margin: 0 0 var(--sk-bi-s2);
  font-size: var(--sk-bi-fs1);
  line-height: var(--sk-bi-lh);
  color: var(--sk-bi-muted);
}

/* A–Z nav – sticky, chips */
.sk-brand-index__nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sk-bi-card);
  border: 1px solid var(--sk-bi-line);
  border-radius: var(--sk-bi-radius);
  padding: var(--sk-bi-s1) var(--sk-bi-s2);
  margin: var(--sk-bi-s2) 0;
  box-shadow: 0 2px 8px rgba(10, 30, 51, 0.05);
}

.sk-brand-index__nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.sk-brand-index__nav-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 8px;
  font-size: var(--sk-bi-fs0);
  font-weight: 600;
  color: var(--sk-bi-ink);
  text-decoration: none;
  background: var(--sk-bi-bg);
  border: 1px solid var(--sk-bi-line);
  border-radius: var(--sk-bi-radius);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sk-brand-index__nav-letter:hover,
.sk-brand-index__nav-letter:focus {
  color: var(--sk-bi-primary);
  border-color: var(--sk-bi-primary);
  outline: none;
}

.sk-brand-index__nav-letter--empty {
  color: var(--sk-bi-muted);
  background: #eee;
  border-color: #ddd;
  cursor: default;
  font-weight: 500;
}

/* Sections wrapper – flere kolonner på desktop = kortere scroll */
.sk-brand-index__sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sk-bi-s2);
}

@media (min-width: 900px) {
  .sk-brand-index__sections {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .sk-brand-index__sections {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sk-brand-index__section {
  margin-bottom: 0;
  padding-bottom: var(--sk-bi-s2);
  border-bottom: 1px solid var(--sk-bi-line);
  break-inside: avoid;
}

.sk-brand-index__section:last-of-type {
  border-bottom: none;
}

.sk-brand-index__section-title {
  margin: 0 0 var(--sk-bi-s1);
  font-size: var(--sk-bi-fs2);
  color: var(--sk-bi-ink);
}

/* Brand grid – flere kolonner så listen fordeler sig bredere, kortere side */
.sk-brand-index__grid {
  list-style: none;
  margin: 0 0 var(--sk-bi-s1);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--sk-bi-s2);
}

@media (min-width: 480px) {
  .sk-brand-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .sk-brand-index__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .sk-brand-index__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .sk-brand-index__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.sk-brand-index__grid a {
  color: var(--sk-bi-ink);
  text-decoration: none;
  font-size: var(--sk-bi-fs1);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.sk-brand-index__grid a:hover {
  color: var(--sk-bi-primary);
  border-bottom-color: var(--sk-bi-primary);
}

.sk-brand-index__empty {
  margin: 0 0 var(--sk-bi-s1);
  font-size: var(--sk-bi-fs0);
  color: var(--sk-bi-muted);
}

.sk-brand-index__top {
  margin: 0;
  font-size: var(--sk-bi-fs0);
}

.sk-brand-index__top a {
  color: var(--sk-bi-muted);
  text-decoration: none;
}

.sk-brand-index__top a:hover {
  color: var(--sk-bi-primary);
  text-decoration: underline;
}

/* SEO block */
.sk-brand-index__seo {
  margin-top: var(--sk-bi-s3);
  padding-top: var(--sk-bi-s2);
  border-top: 1px solid var(--sk-bi-line);
}

.sk-brand-index__seo-title {
  font-size: var(--sk-bi-fs2);
  margin: var(--sk-bi-s2) 0 var(--sk-bi-s1);
  color: var(--sk-bi-ink);
}

.sk-brand-index__seo-title:first-child {
  margin-top: 0;
}

.sk-brand-index__faq-q {
  font-size: var(--sk-bi-fs1);
  margin: var(--sk-bi-s2) 0 var(--sk-bi-s1);
  color: var(--sk-bi-ink);
}

.sk-brand-index__seo p,
.sk-brand-index__seo ul {
  margin: 0 0 var(--sk-bi-s1);
  font-size: var(--sk-bi-fs1);
  line-height: var(--sk-bi-lh);
  color: var(--sk-bi-ink);
}

.sk-brand-index__seo ul {
  padding-left: 1.25rem;
}

.sk-brand-index__seo a {
  color: var(--sk-bi-ink);
  text-decoration: underline;
}

.sk-brand-index__seo a:hover {
  color: var(--sk-bi-primary);
}