/* Importerar typsnitten Lexend och Gloria Hallelujah från Google Fonts.
   Lexend används som huvudtypsnitt för god läsbarhet och Gloria Hallelujah
   används endast till bildtexter för ett handskrivet utseende. */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

/* CSS-variabler används för att samla webbplatsens färger på ett ställe.
   Det gör designen mer konsekvent och förenklar framtida ändringar. */
:root {
  --color-primary: #315d5e;
  --color-secondary: #435f3a;
  --color-accent: #cca663;
  --color-text-dark: #2c3539;
  --color-bg-light: #f5f8f8;
  --color-border-subtle: #e0eae9;
  --color-utbildning: #3a6b6c;
  --color-stod: #0f766e;
  --color-ekonomi: #15803d;
  --utbildning: #356A8A;
  --stod: #0f766e;
  --ekonomi: #15803d;
  --primary: var(--color-primary);
  --accent: var(--color-secondary);
  --detail: var(--color-accent);
  --text: var(--color-text-dark);
  --bg: var(--color-bg-light);
  --border-soft: var(--color-border-subtle);
  --white: #ffffff;
}

/* Grundinställningar för hela webbplatsen.
   Anger standardtypsnitt, textfärg och bakgrundsfärg. */
body {
  font-family: 'Lexend', sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-soft);
}

/* Anpassar Bootstrap-menyn med egna färger och mellanrum
   för att passa webbplatsens grafiska profil. */
.navbar {
  align-items: center;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar .nav-link {
  margin: 0 auto;
  color: var(--text);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--primary);
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.btn-menu {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.menu-spacing {
  margin-left: auto;
  padding-left: 24px;
}

.search-spacing {
  margin-right: auto;
}

.header-btn,
.menu-spacing .btn,
.search-spacing .btn-primary {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-menu:hover,
.btn-menu:focus,
.btn-menu:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* Gemensam design för webbplatsens knappar.
   Rundade hörn och tydliga färger gör dem lätta att upptäcka. */
.btn-nais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11.2px 17.6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--color-secondary);
  color: var(--white);
  font-weight: 600;
}

.btn-fk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 11.2px 17.6px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--color-secondary);
  color: var(--white);
  font-weight: 600;
}

.btn-csn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11.2px 17.6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--color-secondary);
  color: var(--white);
  font-weight: 600;
}

/* Byter färg när användaren håller muspekaren över knappen
   för att ge visuell återkoppling. */
.btn-csn:hover,
.btn-csn:focus,
.btn-csn:active,
.btn-fk:hover,
.btn-fk:focus,
.btn-fk:active,
.btn-nais:focus,
.btn-nais:hover,
.btn-nais:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.btn-nais .nais-logo {
  width: 70px;
  height: auto;
  filter: brightness(0) invert(1);
}

.btn-fk .fk-logo {
  width: 200px;
  height: auto;
}

.btn-csn .csn-logo {
  width: 40px;
  height: auto;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  line-height: 1;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(91, 131, 82, 0.35);
  background-color: var(--color-secondary);
  color: var(--white);
}

.icon-circle i {
  line-height: 1;
}

/* Gemensam utformning för informationskort.
   Skugga och ram hjälper till att skilja korten från bakgrunden. */
.card {
  border: 1px solid var(--border-soft);
  background-color: var(--white);
  box-shadow: 0 2px 8px rgba(58, 107, 108, 0.06);
}

.card-title {
  color: var(--primary);
  font-size: 21.6px;
}

.card-body {
    padding: 1.5rem;
}

.card h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.education-section {
  background-color: #f8fbfb;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 24px;
}

/* Skapar en horisontell process i fyra steg med Flexbox.
   Layouten ändras automatiskt på mindre skärmar. */
.nais-process-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Gör ikonerna stora och cirkelformade för att skapa
   ett tydligt visuellt flöde mellan stegen. */
.nais-process-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 10px 0;
}

.nais-process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 74px;
  color: #435f3a;
  font-size: 2.8rem;
  line-height: 1;
}

.nais-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: #435f3a;
  color: var(--white);
  box-shadow: none;
  font-size: 4.8rem;
  flex: 0 0 auto;
}

.nais-step-icon i {
  line-height: 1;
}

.nais-step-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  max-width: 220px;
}

.nais-step-number {
  color: #323f48;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
}

.nais-step-meta h3 {
  margin: 0;
  color: #323f48;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.15;
}

.nais-step-meta p {
  margin: 0;
  color: #323f48;
  font-size: 0.9rem;
  line-height: 1.45;
}

.dropdown-item.active {
    font-weight: 600;
    background-color: transparent;
    color: #24323f;
}

.area-utbildning .page-header {
    border-bottom: 4px solid #356A8A;
}

.area-utbildning .npf-card:hover {
    border-color: #356A8A;
}

.area-stod .page-header {
    border-bottom: 4px solid #0f766e;
}

.area-stod .npf-card:hover {
    border-color: #0f766e;
}

.area-ekonomi .page-header {
    border-bottom: 4px solid #15803d;
}

.area-ekonomi .npf-card:hover {
    border-color: #15803d;
}

.section-title {
  color: var(--primary);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.section-description {
  color: var(--text);
  margin-bottom: 16px;
}

body.page-gy-info {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
}

body.page-gy-info .comparison-section > h1,
body.page-gy-info .comparison-section h2,
body.page-gy-info .comparison-section h3,
body.page-gy-info .comparison-section h4 {
  color: var(--color-primary);
}

body.page-gy-info .comparison-section {
  background-color: var(--white);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(49, 93, 94, 0.06);
}

body.page-gy-info .comparison-section .lead,
body.page-gy-info .comparison-section p,
body.page-gy-info .comparison-section li {
  color: var(--color-text-dark);
}

body.page-gy-info .card {
  border-color: var(--color-border-subtle);
  box-shadow: 0 2px 8px rgba(49, 93, 94, 0.06);
}

body.page-gy-info .card h3,
body.page-gy-info .card h4 {
  color: var(--color-primary);
}

body.page-gy-info .icon-circle {
  background-color: var(--color-secondary);
  color: var(--white);
  border-color: rgba(67, 95, 58, 0.3);
}

body.page-gy-info a {
  color: var(--color-primary);
}

.support-info-section .card h2 {
  color: var(--primary);
}

body.page-gymnasieskolor .support-info-section .card {
  border-color: #356A8A !important;
}

/* Styling för glossary/terms sektion */
.glossary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glossary-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: baseline;
}

.glossary-item:last-child {
  border-bottom: none;
}

.glossary-term {
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0;
  font-size: 13px;
}

.glossary-definition {
  margin: 0;
  color: var(--color-text-dark);
  line-height: 1.5;
  font-size: 13px;
}

/* Responsive design för glossary */
@media (max-width: 768px) {
  .glossary-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .glossary-term {
    font-weight: 600;
    font-size: 13px;
  }
}

/* Döljer radio-knapparna och använder etiketter som klickbara filterknappar.
   Filtreringen sker enbart med CSS. */
.filter-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter-groups-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin: 10px 0 16px;
}

@media (max-width: 992px) {
  .filter-groups-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .filter-groups-row {
    grid-template-columns: 1fr;
  }

  .filter-group--wide {
    grid-column: span 1;
  }
}

.filter-group {
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fbfcfa;
  height: fit-content;
}

.filter-group--wide {
  grid-column: span 2;
}

.filter-group--elevantal .filter-group__summary {
  font-size: 12px;
}

.filter-group--elevantal .section-description {
  font-size: 13px;
}

.filter-group__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary);
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}

.filter-group__summary::after {
  content: '▾';
  font-size: 14px;
  line-height: 1;
  color: var(--color-secondary);
}

.filter-group[open] .filter-group__summary::after {
  content: '▴';
}

.filter-group__summary::-webkit-details-marker {
  display: none;
}

.filter-selection-indicator {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: rgba(58, 107, 108, 0.1);
  border: 1px solid rgba(58, 107, 108, 0.2);
  color: var(--color-primary);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

body.page-gymnasieskolor .filter-group__summary .filter-selection-indicator,
body.page-resursgymnasium .filter-group__summary .filter-selection-indicator {
  margin: 0;
}

body.page-gymnasieskolor .filter-group__summary .program-inriktning-pill-indicator,
body.page-resursgymnasium .filter-group__summary .program-inriktning-pill-indicator {
  margin: 0;
}

.region-area-pill-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: rgba(58, 107, 108, 0.16);
  border: 1px solid rgba(58, 107, 108, 0.28);
  color: var(--color-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.program-inriktning-pill-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: rgba(58, 107, 108, 0.16);
  border: 1px solid rgba(58, 107, 108, 0.28);
  color: var(--color-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

body.page-gymnasieskolor .region-filter-buttons .filter-pill.active-pill .region-area-pill-indicator,
body.page-resursgymnasium .region-filter-buttons .filter-pill.active-pill .region-area-pill-indicator {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.56);
  color: var(--white);
}

body.page-gymnasieskolor .program-filter-buttons .filter-pill.active-pill .program-inriktning-pill-indicator,
body.page-resursgymnasium .program-filter-buttons .filter-pill.active-pill .program-inriktning-pill-indicator {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.56);
  color: var(--white);
}

.filter-group .filter-buttons-container {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.filter-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background-color: var(--white);
  color: var(--color-text-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 24px;
}

.filter-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-pill.active-pill {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.count-filters-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  max-width: 760px;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f1 100%);
}

.count-filters-row > .section-description {
  grid-column: 1 / -1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.student-count-filter-panel {
  margin: 8px 0 16px;
  width: 100%;
}

.student-count-group {
  width: 100%;
}

.filter-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
}

.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(58, 107, 108, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ef 100%);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  transition: all 0.2s ease;
}

.filter-reset-btn:active {
  transform: translateY(1px);
}

.filter-reset-btn:hover {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, #f7fbf5 0%, #ecf4e8 100%);
}

.filter-reset-btn.is-confirmed {
  border-color: #2e7d32;
  background: linear-gradient(180deg, #f2fbf2 0%, #def3df 100%);
  color: #1f5f24;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.14);
}

.filter-reset-btn .reset-icon-success,
.filter-reset-btn .reset-label-success {
  display: none;
}

.filter-reset-btn.is-confirmed .reset-icon-default,
.filter-reset-btn.is-confirmed .reset-label-default {
  display: none;
}

.filter-reset-btn.is-confirmed .reset-icon-success,
.filter-reset-btn.is-confirmed .reset-label-success {
  display: inline;
}

.filter-reset-btn:focus-visible {
  outline: 2px solid rgba(58, 107, 108, 0.28);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .count-filters-row {
    grid-template-columns: 1fr;
  }
}

.student-count-values {
  font-weight: 600;
  color: var(--color-secondary);
}

.student-count-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.student-count-sliders {
  position: relative;
  height: 42px;
  display: block;
  width: 100%;
}

.student-count-track,
.student-count-range {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
}

.student-count-track {
  background: rgba(67, 95, 58, 0.18);
}

.student-count-range {
  background: var(--color-secondary);
}

.student-count-sliders input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.student-count-sliders input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.student-count-sliders input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--color-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  cursor: pointer;
}

.student-count-sliders input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: 0;
}

.student-count-sliders input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--color-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  cursor: pointer;
}

#filter-students-min {
  z-index: 3;
}

#filter-students-max {
  z-index: 4;
}

#filter-class-min {
  z-index: 3;
}

#filter-class-max {
  z-index: 4;
}

.student-count-sliders input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid rgba(67, 95, 58, 0.45);
  outline-offset: 2px;
}

.student-count-sliders input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid rgba(67, 95, 58, 0.45);
  outline-offset: 2px;
}

.student-count-sliders input[type="range"]:hover::-webkit-slider-thumb,
.student-count-sliders input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.05);
}

.student-count-sliders input[type="range"]:active::-webkit-slider-thumb,
.student-count-sliders input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.08);
}

.student-count-sliders input[type="range"] {
  width: 100%;
  accent-color: var(--color-secondary);
}

/* CSS använder :checked och syskonselektorer (~) för att markera
   vilket filter som är aktivt utan att JavaScript behöver användas. */
#filter-all:checked ~ .filter-buttons-container .btn-all,
#filter-stockholm:checked ~ .filter-buttons-container .btn-stockholm,
#filter-gotaland:checked ~ .filter-buttons-container .btn-gotaland,
#filter-skane:checked ~ .filter-buttons-container .btn-skane,
#filter-uppsala:checked ~ .filter-buttons-container .btn-uppsala,
#filter-sormland:checked ~ .filter-buttons-container .btn-sormland,
#filter-ostergotland:checked ~ .filter-buttons-container .btn-ostergotland,
#filter-jonkoping:checked ~ .filter-buttons-container .btn-jonkoping,
#filter-kronoberg:checked ~ .filter-buttons-container .btn-kronoberg,
#filter-kalmar:checked ~ .filter-buttons-container .btn-kalmar,
#filter-gotland:checked ~ .filter-buttons-container .btn-gotland,
#filter-blekinge:checked ~ .filter-buttons-container .btn-blekinge,
#filter-halland:checked ~ .filter-buttons-container .btn-halland,
#filter-gotaland:checked ~ .filter-buttons-container .btn-gotaland,
#filter-varmland:checked ~ .filter-buttons-container .btn-varmland,
#filter-orebro:checked ~ .filter-buttons-container .btn-orebro,
#filter-vastmanland:checked ~ .filter-buttons-container .btn-vastmanland,
#filter-dalarna:checked ~ .filter-buttons-container .btn-dalarna,
#filter-gavleborg:checked ~ .filter-buttons-container .btn-gavleborg,
#filter-vasternorrland:checked ~ .filter-buttons-container .btn-vasternorrland,
#filter-jamtland-harjedalen:checked ~ .filter-buttons-container .btn-jamtland-harjedalen,
#filter-vasterbotten:checked ~ .filter-buttons-container .btn-vasterbotten,
#filter-norrbotten:checked ~ .filter-buttons-container .btn-norrbotten,
#filter-norrland:checked ~ .filter-buttons-container .btn-norrland {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}


#filter-area-all:checked ~ .area-filter-panel .area-filter-buttons .btn-area-all,
#filter-area-jarfalla:checked ~ .area-filter-panel .area-filter-buttons .btn-area-jarfalla,
#filter-area-kungsholmen:checked ~ .area-filter-panel .area-filter-buttons .btn-area-kungsholmen,
#filter-area-hammarby-sjostad:checked ~ .area-filter-panel .area-filter-buttons .btn-area-hammarby-sjostad,
#filter-area-ostermalm:checked ~ .area-filter-panel .area-filter-buttons .btn-area-ostermalm,
#filter-area-sodermalm:checked ~ .area-filter-panel .area-filter-buttons .btn-area-sodermalm,
#filter-area-liljeholmen:checked ~ .area-filter-panel .area-filter-buttons .btn-area-liljeholmen,
#filter-area-sollentuna:checked ~ .area-filter-panel .area-filter-buttons .btn-area-sollentuna,
#filter-area-alvsjo:checked ~ .area-filter-panel .area-filter-buttons .btn-area-alvsjo,
#filter-area-tumba:checked ~ .area-filter-panel .area-filter-buttons .btn-area-tumba,
#filter-area-danderyd:checked ~ .area-filter-panel .area-filter-buttons .btn-area-danderyd,
#filter-area-sodertalje:checked ~ .area-filter-panel .area-filter-buttons .btn-area-sodertalje,
#filter-area-tyreso:checked ~ .area-filter-panel .area-filter-buttons .btn-area-tyreso,
#filter-area-vallentuna:checked ~ .area-filter-panel .area-filter-buttons .btn-area-vallentuna,
#filter-area-gustavsberg:checked ~ .area-filter-panel .area-filter-buttons .btn-area-gustavsberg,
#filter-area-balsta:checked ~ .area-filter-panel .area-filter-buttons .btn-area-balsta,
#filter-area-norrtalje:checked ~ .area-filter-panel .area-filter-buttons .btn-area-norrtalje,
#filter-area-nacka:checked ~ .area-filter-panel .area-filter-buttons .btn-area-nacka {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

#filter-support-all:checked ~ .support-filter-panel .support-filter-buttons .btn-support-all,
#filter-support-ast:checked ~ .support-filter-panel .support-filter-buttons .btn-support-ast,
#filter-support-studio:checked ~ .support-filter-panel .support-filter-buttons .btn-support-studio {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

#filter-program-all:checked ~ .program-filter-panel .program-filter-buttons .btn-program-all,
#filter-program-sa:checked ~ .program-filter-panel .program-filter-buttons .btn-program-sa,
#filter-program-es:checked ~ .program-filter-panel .program-filter-buttons .btn-program-es,
#filter-program-na:checked ~ .program-filter-panel .program-filter-buttons .btn-program-na,
#filter-program-te:checked ~ .program-filter-panel .program-filter-buttons .btn-program-te,
#filter-program-ima:checked ~ .program-filter-panel .program-filter-buttons .btn-program-ima,
#filter-program-in:checked ~ .program-filter-panel .program-filter-buttons .btn-program-in,
#filter-program-ee:checked ~ .program-filter-panel .program-filter-buttons .btn-program-ee,
#filter-program-bf:checked ~ .program-filter-panel .program-filter-buttons .btn-program-bf,
#filter-program-ek:checked ~ .program-filter-panel .program-filter-buttons .btn-program-ek {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.area-filter-panel {
  display: none;
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel {
  display: block;
}

.area-filter-panel .filter-pill {
  display: none;
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel .filter-pill {
  display: inline-flex;
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel .filter-pill[hidden] {
  display: none;
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(58, 107, 108, 0.18);
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel .section-description {
  font-size: 12.5px;
  margin-bottom: 6px;
}

body.page-gymnasieskolor .filter-group--region .area-filter-panel .filter-pill {
  font-size: 11.5px;
  line-height: 1.2;
  padding: 3px 7px;
}

body.page-gymnasieskolor .region-filter-buttons .inline-area-group {
  flex-basis: 100%;
  margin: 4px 0 8px;
  margin-left: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(58, 107, 108, 0.08);
  box-shadow: inset 0 0 0 1px rgba(58, 107, 108, 0.12);
}

body.page-gymnasieskolor .region-filter-buttons .inline-area-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.page-gymnasieskolor .region-filter-buttons .inline-area-pill {
  font-family: inherit;
  font-weight: inherit;
  font-size: 10.5px;
  line-height: 1.15;
  padding: 2px 6px;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(58, 107, 108, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--color-primary);
}

body.page-gymnasieskolor .region-filter-buttons .inline-area-pill--all {
  background-color: rgba(58, 107, 108, 0.16);
  border-color: rgba(58, 107, 108, 0.28);
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-group,
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-group {
  flex-basis: 100%;
  margin: 4px 0 8px;
  margin-left: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(58, 107, 108, 0.08);
  box-shadow: inset 0 0 0 1px rgba(58, 107, 108, 0.12);
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pills,
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill,
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill {
  font-family: inherit;
  font-weight: inherit;
  font-size: 10.5px;
  line-height: 1.15;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(58, 107, 108, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--color-primary);
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="medier"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="medier"] {
  justify-content: flex-start;
  text-align: left;
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="natur-samhalle"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="natur-samhalle"] {
  justify-content: flex-start;
  text-align: left;
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="design-produktutveckling"],
body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="informations-medieteknik"],
body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="samhallsbyggande-miljo"],
body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="pedagogiskt-socialt"],
body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="dator-kommunikationsteknik"],
body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="fordonsskadeteknik"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="design-produktutveckling"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="informations-medieteknik"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="samhallsbyggande-miljo"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="pedagogiskt-socialt"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="dator-kommunikationsteknik"],
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill[data-inriktning-id="fordonsskadeteknik"] {
  justify-content: flex-start;
  text-align: left;
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill.active-pill,
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill.active-pill {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

body.page-gymnasieskolor .program-filter-buttons .inline-inriktning-pill--all,
body.page-resursgymnasium .program-filter-buttons .inline-inriktning-pill--all {
  background-color: rgba(58, 107, 108, 0.16);
  border-color: rgba(58, 107, 108, 0.28);
}

/* "Alla kommuner"-knappen ska alltid synas när panelen är öppen */
.area-filter-panel .btn-area-all {
  display: inline-flex;
}

/* Grid används för att placera skolkorten i ett jämnt rutnät.
   Antalet kolumner anpassas senare med media queries. */
.results-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  column-gap: 18px;
  row-gap: 20px;
  margin-bottom: 24px;
}

/* Fallback: visa kort om JavaScript inte körs i förhandsgranskning.
  När JS är aktivt läggs .js-filters på body och då styrs synlighet via .is-visible. */
.school-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 260px;
  height: 100%;
  min-width: 0;
  background-color: var(--white);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(58, 107, 108, 0.06);
  text-decoration: none;
  color: inherit;
  justify-content: flex-start;
}

/* Kort med flera campus behöver kunna växa med sitt innehåll, men inte vara onödigt höga. */
.school-card--campus {
  min-height: 220px;
  height: auto;
}

.folkschool-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 360px;
  height: auto;
  background-color: var(--white);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(58, 107, 108, 0.06);
  text-decoration: none;
  color: inherit;
}

.folkif-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 280px;
  height: auto;
  background-color: var(--white);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(58, 107, 108, 0.06);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

.larvux-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 280px;
  height: auto;
  background-color: var(--white);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(58, 107, 108, 0.06);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

.school-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

body.js-filters .school-card,
body.js-filters .folkschool-card,
body.js-filters .school-card-link {
  display: none !important;
}

body.js-filters .school-card.is-visible {
  display: flex !important;
  flex-direction: column;
}

body.js-filters .folkschool-card.is-visible {
  display: flex !important;
  flex-direction: column;
}

body.js-filters .school-card-link.is-visible {
  display: flex !important;
}

.school-card h3 {
  color: var(--color-primary);
  font-size: 17.6px;
  margin-bottom: 10.4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.folkschool-card h3 {
  color: var(--color-primary);
  font-size: 17.6px;
  margin-bottom: 10.4px;
}

.school-card-header {
  margin-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0.5rem;
}

.school-results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(225px, auto);
  row-gap: 16px;
  column-gap: 18px;
  align-items: stretch;
}

.school-results-summary {
  margin: 12px 0 12px;
  font-size: 14px;
}

body:not(.js-filters) .folkschool-results .school-card {
  display: flex;
}

body:not(.js-filters) .folkif-results .school-card {
  display: flex;
}


.folkschool-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(360px, auto);
  row-gap: 12px;
  align-items: stretch;
}

.folkif-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(280px, auto);
  row-gap: 12px;
  align-items: stretch;
}

.campus-container {
  display: flex;
  gap: 1.5rem;    /* Mer luft mellan korten */
  margin-top: 1rem;
}

.campus-unit {
  background-color: #fcfcfc;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 8px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  /* Flexbox för att hantera innehåll internt */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Säkerställer vänsterställning */
  gap: 2px; /* Mellanrum mellan badges och lista */
  margin-top: 0;
}


body.js-filters .college-unit {
  display: flex;
}

body.js-filters .college-unit.is-hidden {
  display: none;
}

body.js-filters .campus-unit.is-hidden {
  display: none;
}

.campus-unit:hover,
.campus-unit:focus {
  color: inherit;
  text-decoration: none;
}

.campus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.school-card--munkagard .campus-unit--wide {
  width: 100%;
}

.school-card--munkagard .campus-unit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.school-card--munkagard .campus-unit-row .campus-unit {
  margin-top: 0;
}

/* Justera märkena inuti campus-enheten */
.campus-unit .badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  font-size: 11px;
  text-align: left;
  padding: 2px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}

.folkif-card .badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  font-size: 14px;
  text-align: left;
  padding: 3px 7px;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}

.larvux-card .badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  font-size: 15px;
  text-align: left;
  padding: 3px 7px;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}

.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* Om du vill ha badge-raden kompakt */
.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.campus-row {
  display: flex;
  flex-direction: column; /* Stapla vertikalt om det är trångt */
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.campus-item {
  font-size: 0.85rem; /* Mindre text för att få plats */
  border-bottom: 1px dotted #ccc;
  padding-bottom: 2px;
}

.campus-unit h4,
 .campus-unit h5 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.folkif-card .school-details li {
  font-size: 15px !important;    /* Denna ändrar texten */
  line-height: 1.5 !important;   /* Radavståndet */
  margin-bottom: 1px !important; /* Marginal mellan raderna */
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Specifik CSS som endast påverkar listor i .campus-unit */
.campus-unit .school-details {
  margin-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  line-height: 1.2;
}

.campus-unit .school-details:empty,
.campus-unit .school-details:not(:has(li)) {
  display: none;
  margin-top: 0;
  padding-top: 0;
}

.campus-unit .school-details li {
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.campus-unit .school-details li span,
.campus-unit .school-details li i {
  font-size: 11px;
  line-height: 1.2;
}

.campus-unit .school-details li i {
  width: 12px;
  min-width: 12px;
  color: var(--color-secondary);
}

/* Liten typografijustering endast för Westerlundska-units. */
body.page-gymnasieskolor .school-card--westerlundska .campus-unit .badge {
  font-size: 9.5px;
  line-height: 1.1;
  padding: 2px 5px;
}

body.page-gymnasieskolor .school-card--westerlundska .campus-unit .school-details li {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

body.page-gymnasieskolor .school-card--westerlundska .campus-unit .school-details li span,
body.page-gymnasieskolor .school-card--westerlundska .campus-unit .school-details li i {
  font-size: 11px !important;
}

/* Program badges inuti campus units får radbryta och minska font-size vid behov. */
body.page-gymnasieskolor .campus-unit .program-badge {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

/* Liten typografijustering endast för Rinmangymnasiet-campuskort. */
body.page-gymnasieskolor .school-card--rinman .campus-unit .badge {
  font-size: 11px !important;
  line-height: 1.1;
  padding: 2px 4px;
}

body.page-gymnasieskolor .school-card--rinman .campus-unit .badge i {
  font-size: 11px !important;
  margin-right: 3px;
}

body.page-gymnasieskolor .school-card--rinman .campus-unit .program-badge {
  font-size: 11.5px !important;
  padding: 3px 5px;
  white-space: nowrap;
  overflow-wrap: normal;
}

body.page-gymnasieskolor .school-card--rinman .campus-unit .school-details li {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.page-gymnasieskolor .school-card--rinman .campus-unit .school-details li span,
body.page-gymnasieskolor .school-card--rinman .campus-unit .school-details li i {
  font-size: 11px !important;
}

.school-details {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.school-details li {
  margin-bottom: 0;
  line-height: 1.3;
  color: var(--color-text-dark);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.school-summary {
  margin: 6px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-dark);
}

body.page-gymnasieskolor .school-card--dense {
  padding: 12px;
  min-height: 220px;
}

body.page-gymnasieskolor .school-card--dense h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

body.page-gymnasieskolor .school-card--dense .badges,
body.page-gymnasieskolor .school-card--dense .badge-row-fixed,
body.page-gymnasieskolor .school-card--dense .badge-row-fluid {
  gap: 4px;
}

body.page-gymnasieskolor .school-card--dense .badge {
  font-size: 10.5px;
  line-height: 1.15;
  padding: 3px 7px;
}

body.page-gymnasieskolor .school-card--dense .school-summary {
  margin: 4px 0 6px;
  font-size: 11px;
  line-height: 1.3;
}

body.page-gymnasieskolor .school-card--dense .school-details,
body.page-gymnasieskolor .school-card--dense .school-details li,
body.page-gymnasieskolor .school-card--dense .school-details li span,
body.page-gymnasieskolor .school-card--dense .school-details li i {
  font-size: 10.5px;
  line-height: 1.15;
}

body.page-gymnasieskolor .school-card:not(.school-card--westerlundska):not(.school-card--rinman):not(.school-card--dense) .school-details {
  font-size: 13px !important;
  line-height: 1.25 !important;
  gap: 4px !important;
}

body.page-gymnasieskolor .school-card:not(.school-card--westerlundska):not(.school-card--rinman):not(.school-card--dense) .school-details li,
body.page-gymnasieskolor .school-card:not(.school-card--westerlundska):not(.school-card--rinman):not(.school-card--dense) .school-details li span,
body.page-gymnasieskolor .school-card:not(.school-card--westerlundska):not(.school-card--rinman):not(.school-card--dense) .school-details li i {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.page-gymnasieskolor .school-card .school-details {
  font-size: 13px !important;
  line-height: 1.25 !important;
  gap: 4px !important;
}

body.page-gymnasieskolor .school-card .school-details li {
  font-size: 13px !important;
  line-height: 1.25 !important;
  gap: 4px !important;
}

body.page-gymnasieskolor .school-card .school-details li span,
body.page-gymnasieskolor .school-card .school-details li i {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.page-gymnasieskolor .school-card .school-details li i {
  font-size: 13px !important;
  width: 14px !important;
  min-width: 14px !important;
  margin-right: 4px !important;
}

.school-details li::before {
  content: none;
}

.school-details i {
  color: var(--color-secondary);
  font-size: 11px;
  line-height: 1;
  margin: 0;
}

/* Små etiketter som visar information om region,
   program och andra egenskaper. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 4px;
  margin-bottom: 0;
  min-width: 0;
}

.badge-row-fixed {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.badge-row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.badge {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding: 4.8px 9.6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.badge i {
  margin-right: 4.8px;
}

.program-badge.is-hidden {
  display: none !important;
}

/* Resurs page: keep program badges on one compact line without overflow. */
body.page-resursgymnasium .school-card .badge,
body.page-gymnasieskolor .school-card .badge {
  font-size: 11.5px;
  line-height: 1.25;
  padding: 4.8px 9.6px;
}

body.page-resursgymnasium .school-card .program-badge {
  white-space: nowrap;
}

body.page-gymnasieskolor .school-card .program-badge {
  white-space: nowrap;
}

/* Campuskort med många/långa programetiketter måste få radbryta för att inte spränga enheten visuellt. */
body.page-gymnasieskolor .school-card--campus .program-badge {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.28;
  padding: 4.5px 8.5px;
}

/* Låt campuskort växa med innehåll i stället för att låsas mot rutnätsradens höjd. */
body.page-gymnasieskolor .school-card--campus {
  height: auto;
  min-height: 260px;
}

body.page-gymnasieskolor .school-card--campus .campus-unit {
  overflow: visible;
}


body.page-gymnasieskolor .school-card--dense .program-badge {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.page-gymnasieskolor.js-filters .school-card {
  display: flex !important;
  flex-direction: column;
}

body.page-gymnasieskolor.js-filters .school-card-link {
  display: flex !important;
}

body.page-gymnasieskolor.js-filters .school-card.is-hidden,
body.page-gymnasieskolor.js-filters .school-card-link.is-hidden {
  display: none !important;
}

@media (max-width: 1100px) {
  body.page-resursgymnasium .school-card .badge,
  body.page-gymnasieskolor .school-card .badge {
    font-size: 11.5px;
    padding: 4.8px 9.6px;
  }
}

.region-badge {
  background-color: rgba(58, 107, 108, 0.12);
  color: var(--color-primary);
  margin: 0;
  padding: 4px 8px;
}

.program-badge {
 background-color: rgba(91, 131, 82, 0.12);
 color: var(--color-secondary);
 margin: 0;
 padding: 4px 8px;
 display: inline-flex;
 align-items: center;
 min-width: 0;
 max-width: 100%;
 width: auto;
}

body.area-utbildning .badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 0.15rem;
}

body.area-utbildning .badge-group--programs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin-top: 0.15rem;
}

body.area-utbildning .region-badge,
body.area-utbildning .area-badge,
body.area-utbildning .program-badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.area-utbildning .program-badge {
  display: inline-block;
}

body.area-utbildning .school-card,
body.area-utbildning .school-card-link,
body.area-utbildning .folkif-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

body.area-utbildning .school-card .school-details,
body.area-utbildning .school-card-link .school-details,
body.area-utbildning .folkif-card .school-details {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-start;
}

.school-card a.program-badge,
.school-card a.program-badge:visited,
.school-card a.program-badge:hover,
.school-card a.program-badge:focus,
.school-card a.program-badge:active {
  color: var(--color-secondary);
  text-decoration: none;
}

.program-badge.is-hidden {
  display: none !important;
}

.area-badge {
  background-color: #fff3e0;
  color: #997a3e;
}

.extras-badge {
  background-color: rgba(147, 112, 219, 0.15);
  color: #30253f;
}

.support-badge {
  background-color: rgba(219, 112, 164, 0.15);
  color: #3f252c;
}

/* Fast raden med 2 stycken */
.badge-row-fixed {
  display: flex;
  gap: 10px;
  margin-bottom: 1px; 
}

/* Flytande rad som radbryts automatiskt */
.badge-row-fluid {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px;
}

body.area-utbildning .school-card--campus .school-card-link .school-details,
body.area-utbildning .school-card--munkagard .school-card-link .school-details {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 2px !important;
}

.school-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 0.75rem;
  width: 100%;
  flex-grow: 1;
}

.school-details li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}

.school-details li::before {
  content: none;
}

.school-details i {
  color: var(--color-secondary);
  font-size: 12px;
  line-height: 1;
  margin: 0;
}

.card-text {
  font-size: 15.2px;
  line-height: 1.55;
}

.card-text strong {
  color: var(--primary);
}

.no-requirement {
  color: var(--accent);
  font-weight: 600;
}

.requires-exam {
  color: var(--primary);
  font-weight: 600;
}

a.card {
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.card:hover {
  transform: translateY(-2px);
  border-color: #555;
  box-shadow: 0 6px 16px rgba(58, 107, 108, 0.12);
}

a.card .fa-circle-arrow-right {
  color: var(--accent);
}

.navbar-brand h2 {
  font-size: 20px;
  margin: 0;
}

/* Gemensam layout för sidfoten med tre informationskolumner. */
.site-footer {
  background-color: var(--white);
  border-top: 1px solid var(--border-soft);
  padding: 36px 0 20px;
  margin-top: 48px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.site-footer .footer-title {
  color: var(--primary);
  margin-bottom: 3.2px;
  font-size: 14.4px;
  font-weight: 600;
}

.site-footer .footer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.site-footer .footer-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.site-footer p,
.site-footer li,
.site-footer a {
  color: var(--text);
  font-size: 13.6px;
  line-height: 1.5;
  margin: 0;
}

.site-footer ul {
  margin: 0;
  padding-left: 0;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--primary);
}

.site-footer .footer-links li {
  margin-bottom: 6.4px;
}

.site-footer .footer-bottom {
  border-top: 1px solid var(--border-soft);
  margin-top: 20px;
  padding-top: 14.4px;
  text-align: center;
}

.site-footer .footer-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 5.6px;
  border-radius: 30%;
  background-color: var(--primary);
  color: var(--white);
  transition: background-color 0.2s ease;
}

.site-footer .footer-link-icon:hover {
  background-color: var(--accent);
  color: var(--white);
}

.site-footer .footer-link-icon.icon-linkedin {
  background-color: transparent;
  color: #0A66C2;
  width: 20px;
  height: 20px;
}

.site-footer .footer-link-icon.icon-linkedin:hover {
  background-color: transparent;
  color: #004182;
}

.site-footer .footer-link-icon.icon-linkedin i {
  color: inherit;
  font-size: 19.2px;
  width: auto !important;
  height: auto;
  line-height: 1 !important;
}

footer i {
  height: 30px;
  width: 30px !important;
  text-align: center;
  line-height: 30px !important;
  border-radius:30px;
  color: white;
}

.icon-linkedin {
  background-color: transparent !important;
}

/* Flexbox används för att alla kort ska få samma höjd
   även om innehållet skiljer sig åt. */
.row > .col {
  display: flex;
}

.row > .col .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.education-section .row {
  align-items: stretch;
}

.education-section .row > .col {
  flex: 0 0 100%;
  max-width: 100%;
}

.row > .col .card .card-body {
  display: flex;
  flex-direction: column;
}
.row > .col .card .card-body p:last-child {
  margin-top: auto;
}

.card {
    padding: 10px;
    border: 2px solid #d8dde2;
    border-radius: 10px;
    margin-bottom: 10px;
}


/* Grundkort */
.npf-card {
    border-color: #d8dde2;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.npf-card.economy-support-card {
    border-color: #356A8A !important;
}

/* Hover - ingen rörelse */
.npf-card:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}


/* Fokus */
.npf-card:focus-within {
    outline: 3px solid;
    outline-offset: 3px;
}


/* Ikoner */
.card-icon {
    transition: color 0.2s ease;
}

/* Områdesfärger */
.card-utbildning .card-icon {
    color: #356A8A;
}

.card-stod .card-icon {
    color: #0f766e;
}

.card-ekonomi .card-icon {
    color: #15803d;
}


/* CTA-ikoner neutrala */
.npf-card .cta {
    color: #6b7280;
    font-size: 0.95rem;
}

.npf-card .cta i {
    color: #4F8063;
}


/* Hover på kategori */
.card-utbildning:hover,
.card-utbildning:focus-within {
    border-color: #356A8A !important;
}

.card-stod:hover,
.card-stod:focus-within {
    border-color: #0f766e !important;
}

.card-ekonomi:hover,
.card-ekonomi:focus-within {
    border-color: #15803d !important;
}

/*
.card-utbildning {
  background-color: #D7E9F6; 
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.card-stod {
  background-color: #D9ECDC;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.card-ekonomi {
  background-color: #F4E7CC; 
  border-color: var(--color-accent); 
  color: var(--color-primary);
}

.economy-support-card {
  border: 2px solid var(--primary);
}

.education-card:hover,
.support-card:hover,
.economy-card:hover,
.economy-support-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
} 
*/

.economy-support-card .card-body h2 {
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.5rem !important;
  color: var(--primary) !important;
}

.terms-glossary-section > p.fw-bold {
  color: var(--primary) !important;
}

/* Ger bilden ett polaroidliknande utseende för att tydligt
   skilja fotografiet från övrigt innehåll. */
   .polaroid {
  display: inline-block;
  background: white;
  padding: 10px 10px 25px;
  margin: 10px;
  box-shadow: 0 4px 8px #00000033;
  text-align: center;
}

/* Använder CSS Grid för att placera text och bild bredvid varandra.
   På små skärmar staplas innehållet automatiskt. */
.about-creator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  align-items: flex-start;
  gap: 24px;
}

.about-creator-layout .list-unstyled {
  min-width: 0;
  margin-bottom: 0;
}

.about-creator-layout .polaroid {
  justify-self: end;
  margin: 0;
}

.polaroid img {
  display: block;
  margin: 0 auto;
  max-width: min(100%, 330px);
  height: auto;
}

.polaroid figcaption {
  margin-top: 10px;
  margin-bottom: 0;
  font-family: 'Gloria Hallelujah';
  font-size: 18px;
  color: #271003;
}

.error-container {
    padding: 80px 20px;
    text-align: center;
  }
.error-code {
  font-size: 8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
}
.error-message {
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: var(--color-text-dark);
}
.btn-lg {
  padding: 12px 30px;
  font-size: 1.2rem;
}

.wider-card-col {
  max-width: 450px; /* Justera detta värde för att få den bredd du vill ha */
  flex: 0 0 100%;
}

.navbar {
    padding-bottom: 20px;
    box-shadow: 0 2px 10px rgba(44, 53, 57, 0.08);
}

.header-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}


.logo-wrapper {
    flex: 0 0 auto;
}


.site-logo {
    height: 70px;
    width: auto;
    display: block;
}


.search-area {
    flex: 1;
    max-width: 400px;
}


.search-area form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
  position: relative;
}


.search-area input {
    height: 38px;
    flex: 1;
    min-width: 0;
}


.search-area button,
.menu-spacing .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

.search-suggestions {
  position: absolute;
  left: 0;
  right: auto;
  width: 100%;
  top: calc(100% + 6px);
  z-index: 1200;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(44, 53, 57, 0.14);
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}

.search-suggestion-item {
  margin: 0;
}

.search-suggestion-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}

.search-suggestion-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.search-suggestion-description {
  font-size: 12px;
  color: #5d6e73;
}

.search-suggestion-btn:hover,
.search-suggestion-item.is-active .search-suggestion-btn {
  background: rgba(49, 93, 94, 0.10);
}

.search-suggestion-empty {
  padding: 10px;
  font-size: 13px;
  color: #5d6e73;
}


.menu-spacing {
    flex: 0 0 auto;
}


.menu-spacing .dropdown {
    display: flex;
}

.menu-spacing .dropdown-toggle {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 38px;
    height: 38px;
}

.header-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.program-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    transition: transform .2s ease;
}


.program-card:hover {
    transform: translateY(-4px);
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.program-card h4 {
    margin: 1rem 1rem .5rem;
    font-size: 1.25rem;
    color:#356A8A;
}

.program-card p {
    margin: 0 1rem 1.25rem;
    line-height: 1.6;
    color: #555;
}

.program-grid.single {
    display: flex;
    justify-content: flex-start;
}

.program-grid.single .program-card {
    width: 100%;
    max-width: 380px; /* samma storlek som övriga kort */
}

/* When JS filter logic is active, only .active-pill should look selected. */
body.js-filters .filter-buttons-container .filter-pill {
  background-color: var(--white) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-primary) !important;
}

body.js-filters .filter-buttons-container .filter-pill.active-pill {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--white) !important;
}

a {
  color: var(--color-primary); /* Bootstrap-grön */
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary-dark);
  text-decoration: none;
}

a:visited {
  color: var(--color-secondary);
}

/* Länkar som är knappar ska alltid ha vit text */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active {
  color: #fff;
  text-decoration: none;
}

.npf-card a, .school-card a, .folkschool-card a, .folkif-card a, .larvux-card a {
  color: var(--color-text-dark);
  text-decoration: none;
}

.npf-card a:hover, .school-card a:hover, .folkschool-card a:hover, .folkif-card a:hover, .larvux-card a:hover {
  color: var(--color-text-dark);
  text-decoration: none;
}

.custom-link-layer {
  position: relative;
  z-index: 2;
}

/* Valfritt men rekommenderas: ger kortet en hand-pekare så användaren fattar att det är klickbart */
.school-card {
  cursor: pointer;
}

.support-info-section .col {
  flex: 0 0 25%;
  max-width: 25%;
}

@media (max-width: 1200px) {
  .support-info-section .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: white;
  width: 100%;
}

@media (max-width: 767px) {
  .support-info-section .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  .economy-support-card .card-body h2 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.45rem !important;
    color: var(--primary) !important;
  }
}

/* När det börjar bli trångt */
@media (max-width: 1000px) {

    .header-container {
        flex-wrap: wrap;
    }

    .logo-wrapper {
        width: 100%;
        order: 1;
    }

    .search-area {
        order: 2;
        flex: 1;
        max-width: none;
    }

    .menu-spacing {
        order: 3;
    }

    .site-logo {
        height: 55px;
    }
}

@media (max-width: 1200px) {
  .folkschool-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .folkschool-results {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}

@media (max-width: 1200px) {
  .folkif-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .folkif-results {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .campus-grid {
    grid-template-columns: 1fr;
  }
}

  @media (min-width: 992px) {
  .education-section .row > .col {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
  }
}
  /* Anpassning för större surfplattor och mindre laptops */
@media (max-width: 1200px) {
  .nais-process-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .nais-process-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .nais-step-icon {
    width: 130px;
    height: 130px;
    font-size: 3.6rem;
  }
}

/* Anpassning för mobiltelefoner */
@media (max-width: 576px) {
  .nais-process-flow {
    grid-template-columns: 1fr;
  }

  .nais-step-icon {
    width: 120px;
    height: 120px;
    font-size: 3.2rem;
  }
}

/* Anpassar layouten för surfplattor och mobiltelefoner
   så att webbplatsen blir responsiv. */
@media (max-width: 1400px) {
  .nais-step-icon {
    width: 150px;
    height: 150px;
    font-size: 4.2rem;
  }

  .nais-process-arrow {
    padding-top: 64px;
    font-size: 2.4rem;
  }
}

@media (min-width: 768px) {
  .wider-card-col {
    flex: 0 0 50%; /* Tar halva raden på större skärmar */
  }
}


@media (max-width: 767.98px) {
  .about-creator-layout {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .about-creator-layout .list-unstyled {
    min-width: 100%;
  }

  .about-creator-layout .polaroid {
    justify-self: center;
  }
}

body.page-gymnasieskolor .results-section.school-results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 16px;
}

@media (max-width: 1200px) {
  body.page-gymnasieskolor .results-section.school-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.page-gymnasieskolor .results-section.school-results {
    grid-template-columns: 1fr;
  }
}

body.page-resursgymnasium .results-section.school-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 16px;
}

@media (max-width: 1200px) {
  body.page-resursgymnasium .results-section.school-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.page-resursgymnasium .results-section.school-results {
    grid-template-columns: 1fr;
  }
}