/* =========================================================================
   Sofia Distans — sofiadistans.stockholm.se
   Rebuilt front page. Colour tokens, type scale and spacing are taken
   verbatim from the original Colibri/Althea theme output.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  --colibri-color-1: rgb(31, 126, 231);
  --colibri-color-1--variant-1: #b9cfe7;
  --colibri-color-1--variant-2: #6ca6e7;
  --colibri-color-1--variant-3: #1f7ee7;
  --colibri-color-1--variant-4: #145092;
  --colibri-color-1--variant-5: #08213d;
  --colibri-color-2: rgb(249, 205, 2);
  --colibri-color-3: rgb(252, 122, 35);
  --colibri-color-4: rgb(254, 189, 189);
  --colibri-color-5: rgb(255, 255, 255);
  --colibri-color-6: rgb(0, 0, 0);
  --colibri-color-7: rgb(245, 250, 253);
  --colibri-color-8: rgb(254, 189, 89);

  --text: rgb(102, 102, 102);
  --heading: rgb(51, 51, 51);
  --footer-bg: rgb(243, 243, 243);
  --border: rgb(221, 221, 221);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  text-align: left;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: #fff;
}

img { max-width: 100%; height: auto; border: 0; }

a {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.5;
  color: var(--colibri-color-1);
}

p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.h-lead p {
  margin-bottom: 16px;
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1.5;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  margin: 0 0 16px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--heading);
}
h1 { font-weight: 300; font-size: 3.375em; line-height: 1.26; }
h2 { font-weight: 300; font-size: 2.625em; line-height: 1.143; }
h3 { font-weight: 600; font-size: 2.25em;  line-height: 1.25; }
h4 { font-weight: 600; font-size: 1.25em;  line-height: 1.6; }
h5 { font-weight: 600; font-size: 1.125em; line-height: 1.55; }
h6 { font-weight: 600; font-size: 1em;     line-height: 1.6; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  display: block;
  top: 5px; left: 5px;
  width: auto; height: auto;
  clip-path: none;
  z-index: 100000;
  padding: 15px 23px 14px;
  background-color: #ddd;
  color: #444;
  font-size: 1em;
  line-height: normal;
  text-decoration: none;
}

/* ------------------------------------------------------------- utilities */
.h-svg-icon { display: inline-block; line-height: 0; fill: currentColor; box-sizing: content-box; }
.h-svg-icon svg { width: 100%; height: 100%; display: block; }
.h-icon__icon.h-svg-icon svg { width: 28px; height: 28px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }

[class*="h-"], .h-global-transition-all, .h-global-transition-all * {
  transition-duration: 0.5s;
}

/* ------------------------------------------------------------ containers */
.h-container-boxed,
.h-container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 576px)  { .h-container-boxed { max-width: 540px; } }
@media (min-width: 768px)  { .h-container-boxed { max-width: 720px; } }
@media (min-width: 1024px) { .h-container-boxed { max-width: 960px; } }
@media (min-width: 1200px) { .h-container-boxed { max-width: 1232px; } }

/* ------------------------------------------------------------------ grid
   Colibri breakpoints: mobile <= 767, tablet 768–1023, desktop >= 1024.
   Gutter padding lands on `.h-column`, inner padding on `.h-column__inner`,
   so the two add up exactly as they do in the original theme.            */
.h-row-container { position: relative; }

.h-row {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}
.h-row--center { justify-content: center; }

.h-column { min-width: 0; }
.h-column__inner { position: relative; max-width: 100%; }
.h-column__inner > .h-y-container { width: 100%; }

/* every sized column shares this base */
.h-col-auto, .h-col-md-auto, .h-col-lg-auto,
.h-col-3, .h-col-md-3, .h-col-lg-3,
.h-col-4, .h-col-md-4, .h-col-lg-4,
.h-col-6, .h-col-md-6, .h-col-lg-6,
.h-col-12, .h-col-md-12, .h-col-lg-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
/* Colibri sizes "auto" columns to an equal share of the row */
.h-col-auto { flex: 1 1 0%; width: auto; max-width: 100%; min-width: 0; }
.h-col-3    { flex: 0 0 25%;      max-width: 25%; }
.h-col-4    { flex: 0 0 33.33333%; max-width: 33.33333%; }
.h-col-6    { flex: 0 0 50%;      max-width: 50%; }
.h-col-12   { flex: 0 0 100%;     max-width: 100%; }
@media (min-width: 768px) {
  .h-col-md-auto { flex: 1 1 0%; width: auto; max-width: 100%; min-width: 0; }
  .h-col-md-3    { flex: 0 0 25%;      max-width: 25%; }
  .h-col-md-4    { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .h-col-md-6    { flex: 0 0 50%;      max-width: 50%; }
  .h-col-md-12   { flex: 0 0 100%;     max-width: 100%; }
}
@media (min-width: 1024px) {
  .h-col-lg-auto { flex: 1 1 0%; width: auto; max-width: 100%; min-width: 0; }
  .h-col-lg-3    { flex: 0 0 25%;      max-width: 25%; }
  .h-col-lg-4    { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .h-col-lg-6    { flex: 0 0 50%;      max-width: 50%; }
  .h-col-lg-12   { flex: 0 0 100%;     max-width: 100%; }
}

/* vertical rhythm inside a column */
.h-y-container > *:not(:last-child) { margin-bottom: 20px; }
.h-y-container > *:last-child       { margin-bottom: 0; }
.h-y-container .h-heading > *,
.h-y-container .h-heading > * > * { margin-bottom: 0; }
.h-text > p:last-child { margin-bottom: 0; }

/* horizontal rhythm (button groups) */
.h-x-container-inner {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: -20px;
}
.h-x-container-inner > * {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 20px;
}

.h-section > div { z-index: 1; }

/* ---- inner padding scale (mobile / tablet / desktop) ---- */
.h-px-0 { padding-left: 0;    padding-right: 0; }
.h-px-2 { padding-left: 10px; padding-right: 10px; }
.h-px-3 { padding-left: 15px; padding-right: 15px; }
.v-inner-0 { padding-top: 0;    padding-bottom: 0; }
.v-inner-2 { padding-top: 10px; padding-bottom: 10px; }
.v-inner-3 { padding-top: 15px; padding-bottom: 15px; }
@media (min-width: 768px) {
  .h-px-md-0 { padding-left: 0;    padding-right: 0; }
  .h-px-md-2 { padding-left: 10px; padding-right: 10px; }
  .h-px-md-3 { padding-left: 15px; padding-right: 15px; }
  .v-inner-md-0 { padding-top: 0;    padding-bottom: 0; }
  .v-inner-md-2 { padding-top: 10px; padding-bottom: 10px; }
  .v-inner-md-3 { padding-top: 15px; padding-bottom: 15px; }
}
@media (min-width: 1024px) {
  .h-px-lg-0 { padding-left: 0;    padding-right: 0; }
  .h-px-lg-2 { padding-left: 15px; padding-right: 15px; }
  .h-px-lg-3 { padding-left: 30px; padding-right: 30px; }
  .v-inner-lg-0 { padding-top: 0;    padding-bottom: 0; }
  .v-inner-lg-2 { padding-top: 15px; padding-bottom: 15px; }
  .v-inner-lg-3 { padding-top: 30px; padding-bottom: 30px; }
}

/* ---- visibility helpers ---- */
@media (min-width: 1024px) { .h-hide-lg { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .h-hide-md { display: none; } }
@media (max-width: 767px) { .h-hide-sm { display: none; } .h-hide-sm-force { display: none !important; } }

/* ---- gutters ---- */
.gutters-row-0 { padding-left: 0;    padding-right: 0; }
.gutters-row-2 { padding-left: 10px; padding-right: 10px; }
.gutters-row-v-0 { padding-top: 0;    padding-bottom: 0; }
.gutters-row-v-2 { padding-top: 10px; padding-bottom: 10px; }
.gutters-col-0 { margin-left: 0; margin-right: 0; }
.gutters-col-0 > [class*='h-col-'] { padding-left: 0; padding-right: 0; }
.gutters-col-2 { margin-left: -10px; margin-right: -10px; }
.gutters-col-2 > [class*='h-col-'] { padding-left: 10px; padding-right: 10px; }
.gutters-col-v-0 { margin-top: 0; margin-bottom: 0; }
.gutters-col-v-0 > [class*='h-col-'] { padding-top: 0; padding-bottom: 0; }
.gutters-col-v-2 { margin-top: -10px; margin-bottom: -10px; }
.gutters-col-v-2 > [class*='h-col-'] { padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 768px) {
  .gutters-row-md-0 { padding-left: 0;    padding-right: 0; }
  .gutters-row-md-2 { padding-left: 10px; padding-right: 10px; }
  .gutters-row-v-md-0 { padding-top: 0;    padding-bottom: 0; }
  .gutters-row-v-md-2 { padding-top: 10px; padding-bottom: 10px; }
  .gutters-col-md-0 { margin-left: 0; margin-right: 0; }
  .gutters-col-md-0 > [class*='h-col-'] { padding-left: 0; padding-right: 0; }
  .gutters-col-md-2 { margin-left: -10px; margin-right: -10px; }
  .gutters-col-md-2 > [class*='h-col-'] { padding-left: 10px; padding-right: 10px; }
  .gutters-col-v-md-0 { margin-top: 0; margin-bottom: 0; }
  .gutters-col-v-md-0 > [class*='h-col-'] { padding-top: 0; padding-bottom: 0; }
  .gutters-col-v-md-2 { margin-top: -10px; margin-bottom: -10px; }
  .gutters-col-v-md-2 > [class*='h-col-'] { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 1024px) {
  .gutters-row-lg-0 { padding-left: 0;    padding-right: 0; }
  .gutters-row-lg-2 { padding-left: 15px; padding-right: 15px; }
  .gutters-row-v-lg-0 { padding-top: 0;    padding-bottom: 0; }
  .gutters-row-v-lg-2 { padding-top: 15px; padding-bottom: 15px; }
  .gutters-col-lg-0 { margin-left: 0; margin-right: 0; }
  .gutters-col-lg-0 > [class*='h-col-'] { padding-left: 0; padding-right: 0; }
  .gutters-col-lg-2 { margin-left: -15px; margin-right: -15px; }
  .gutters-col-lg-2 > [class*='h-col-'] { padding-left: 15px; padding-right: 15px; }
  .gutters-col-v-lg-0 { margin-top: 0; margin-bottom: 0; }
  .gutters-col-v-lg-0 > [class*='h-col-'] { padding-top: 0; padding-bottom: 0; }
  .gutters-col-v-lg-2 { margin-top: -15px; margin-bottom: -15px; }
  .gutters-col-v-lg-2 > [class*='h-col-'] { padding-top: 15px; padding-bottom: 15px; }
}

/* ============================== NAVIGATION ============================== */
.page-header { position: relative; }

.h-navigation {
  display: flex;
  background-color: rgba(245, 250, 253, 0.52);
  padding-top: 17px;
  padding-bottom: 17px;
}

.h-navigation .h-column__inner { justify-content: center; }
.nav-col--logo { text-align: right; }
/* The menu column resolves to 1080px on the original (the menu list is
   sized to its widest wrapped row); it may shrink but never grows. */
.nav-col--menu { text-align: center; }
@media (min-width: 1024px) {
  .nav-col--menu { flex: 0 1 1080px; }
}
/* tablet: the offcanvas panel still sizes the menu column to 576px,
   so logo + menu stay centred as a 707px pair */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-col--menu { flex: 0 1 576px; }
}
@media (max-width: 767px) {
  .nav-col--menu { flex: 1 1 auto; }
}

.h-logo { display: flex; justify-content: flex-end; align-items: center; padding: 0; }
.h-logo a { display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 24px; text-decoration: none; }
.h-logo__image { max-height: 111px; width: auto; }

/* ---- desktop menu ---- */
.h-menu { position: relative; width: 100%; }

.colibri-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.colibri-menu > li {
  position: relative;
  margin: 0 10px;
  padding: 10px 20px;
}
.colibri-menu > li > a {
  display: inline-flex;
  align-items: center;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 2em;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: rgb(0, 0, 0);
  white-space: nowrap;
}
.colibri-menu > li:hover,
.colibri-menu > li.hover { background-color: #fff; }
.colibri-menu > li:hover > a,
.colibri-menu > li.hover > a,
.colibri-menu > li.current_page_item > a { color: var(--colibri-color-3); }

.arrow-wrapper {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  color: rgb(0, 0, 0);
}
.arrow-wrapper svg { width: 8px; height: 13px; box-sizing: content-box; display: block; }
.colibri-menu > li:hover > a .arrow-wrapper,
.colibri-menu > li.hover > a .arrow-wrapper,
.colibri-menu > li.current_page_item > a .arrow-wrapper { color: var(--colibri-color-3); }

/* ---- dropdowns ---- */
.colibri-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 5px;
  right: 5px;
  min-width: 260px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 60;
  text-align: left;
}
.colibri-menu > li:hover > .sub-menu,
.colibri-menu > li.hover > .sub-menu,
.colibri-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.colibri-menu .sub-menu li {
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid rgba(128, 128, 128, .2);
}
.colibri-menu .sub-menu li:first-child { border-radius: 5px 5px 0 0; }
.colibri-menu .sub-menu li:last-child  { border-bottom: 0; border-radius: 0 0 5px 5px; }
.colibri-menu .sub-menu li > a {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(0, 0, 0);
  display: block;
}
.colibri-menu .sub-menu li:hover > a { color: var(--colibri-color-3); }

/* ---- hamburger / offcanvas ---- */
.h-mobile-menu { display: none; align-items: center; justify-content: flex-end; }
.h-hamburger-button { display: inline-block; line-height: 0; }
.h-hamburger-icon {
  display: inline-block;
  box-sizing: content-box;
  padding: 5px;
  fill: var(--colibri-color-1);
}
.h-hamburger-icon svg { height: 24px; width: auto; display: block; }

@media (max-width: 1023px) {
  .h-menu .h-main-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    transform: translateX(100%);
    transition: transform .4s ease;
    overflow-y: auto;
    padding: 70px 0 30px;
    z-index: 1000;
  }
  body.offcanvas-open .h-menu .h-main-menu { transform: translateX(0); }
  body.offcanvas-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
  }
  .h-mobile-menu { display: flex; justify-content: flex-start; }
  .nav-row { flex-wrap: nowrap; }
  .colibri-menu { display: block; }
  .colibri-menu > li { margin: 0; padding: 0; }
  .colibri-menu > li > a { display: flex; justify-content: space-between; padding: 12px 24px; font-size: 17px; width: 100%; }
  .colibri-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    left: auto; right: auto;
    background: #f7f7f7;
    display: none;
  }
  .colibri-menu > li.open > .sub-menu { display: block; }
  .colibri-menu .sub-menu li { background: transparent; padding: 8px 24px 8px 38px; }
  .colibri-menu > li.open > a .arrow-wrapper { transform: rotate(180deg); }
}

/* ================================= HERO ================================= */
.h-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 714px;
  padding-top: 200px;
  padding-bottom: 200px;
  background-color: var(--footer-bg);
  color: #fff;
}
.h-hero p, .h-hero h1, .h-hero h2, .h-hero h3,
.h-hero h4, .h-hero h5, .h-hero h6 { color: #fff; }

div.cp-video-bg {
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.cp-video-bg__video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
}
.h-hero .overlay-image-layer { background-color: rgb(0, 0, 0); opacity: 0.5; }

.h-hero > .h-container-boxed { position: relative; z-index: 2; }
.hero-column { text-align: left; }
.hero-column .h-y-container > *:not(:last-child) { margin-bottom: 0; }

.hero-heading h1 {
  font-weight: 800;
  font-size: 4.8em;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: left;
  color: #fff;
}
.hero-kicker { font-size: 40.704px; font-weight: 300; }

.hero-lead { padding-top: 20px; padding-bottom: 40px; text-align: left; }
.hero-lead p {
  margin-bottom: 16px;
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1.5;
  color: #fff;
}
.hero-lead p:last-child { margin-bottom: 0; }

.hero-buttons { text-align: left; }
/* fixed width, exactly as the original — it overflows on narrow screens,
   which `body { overflow-x: hidden }` then clips */
.h-button__outer {
  display: inline-flex;
  flex: 0 0 411px;
  width: 411px;
}
.h-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--colibri-color-8);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: rgb(0, 0, 0);
  border: 0;
  border-radius: 5px;
  padding: 18px 0;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.5);
}
.h-button:hover, .h-button:focus {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* =============================== SECTIONS =============================== */
.h-section {
  position: relative;
  display: flex;                    /* d-flex align-items-center on the original */
  align-items: center;
}
.h-section > .h-container-boxed { width: 100%; }
.h-section-global-spacing { padding-top: 90px; padding-bottom: 90px; }

/* --- Aktuellt just nu --- */
.h-section.section-news {
  background-color: #F5FAFD;
  padding-top: 50px;
}
.heading-left { text-align: left; }
.heading-left h1 { text-align: left; }

/* --- feature cards --- */
.h-section.section-cards {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--colibri-color-7);
  z-index: 1;                       /* card shadow spills over the next section */
}
.cards-container { margin-top: -50px; }
.cards-row {
  background-color: #fff;
  box-shadow: 0 4px 10px 2px rgba(74, 74, 74, 0.3);
}
.card-col {
  text-align: center;
  border-right: 1px solid var(--border);
}
.card-col--last { border-right: 0; }
.card-heading h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}
.card-col .h-text p { text-align: center; }

/* --- search + badges --- */
.h-section.section-search {
  background-color: var(--colibri-color-7);
  padding-bottom: 27px;
}
.search-col, .badges-col { text-align: center; }

.colibri_search_form .d-flex { display: flex; }
.colibri_search_input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 8px 15px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  outline: none;
}
.colibri_search_input::placeholder { color: #999; font-style: italic; }
.colibri_search_input:focus { border-color: var(--colibri-color-1); }
.colibri_search_button {
  flex: 0 0 auto;
  width: 65px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 3px 3px 0;
  background-color: var(--colibri-color-1);
  cursor: pointer;
  transition: background-color .3s ease;
}
.colibri_search_button:hover { background-color: var(--colibri-color-2); }
.colibri_search_button svg { width: 16px; height: 16px; fill: #ffffff; }

.icon-list { display: flex; justify-content: center; }
.ul-list-icon { list-style: none; margin: 0; padding: 0; }
/* the original wraps every row in a 1px `list-container-divider` with 10px
   padding; collapsed here to the equivalent 43px row height */
.ul-list-icon .list-item { padding: 8.7px 0; }
.list-item-text-wrapper { display: flex; align-items: center; }
.list-icon { display: flex; padding-left: 10px; }
.list-icon svg { width: 16px; height: 16px; fill: var(--colibri-color-1); display: block; }
.list-icon:hover svg { fill: var(--colibri-color-3); }
.list-text {
  margin-left: 10px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

/* ================================ FOOTER ================================ */
.h-section.section-footer {
  background-color: var(--footer-bg);
  padding-top: 16px;
  padding-bottom: 40px;
  margin-top: 0;
}
.footer-col { text-align: center; }
.footer-col .h-y-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
}
.footer-col .h-icon { text-align: center; }

.h-icon { line-height: 0 !important; }
.h-icon__icon {
  display: inline-block;
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 13px;
  margin-bottom: 10px;
  border-radius: 300px;
  background-color: var(--colibri-color-1--variant-2);
  fill: var(--colibri-color-7);
  box-shadow: none;
}
.h-icon__icon svg { width: 28px; height: 28px; display: block; }

.footer-heading h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}
.footer-col .h-text p { text-align: center; }
.footer-col .h-text a { color: var(--text); }
.footer-col .h-text a:hover { color: var(--colibri-color-1); }

.h-spacer-50 { height: 50px; }
.footer-col--logo .h-image img { display: block; margin: 0 auto; }

/* ============================== RESPONSIVE ============================== */

/* ---- tablet: 768px – 1023px ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .h-section-global-spacing { padding-top: 60px; padding-bottom: 60px; }
  h1 { font-size: 3em; }
}

/* ---- mobile: <= 767px ---- */
@media (max-width: 767px) {
  .h-section-global-spacing { padding-top: 30px; padding-bottom: 30px; }
  h1 { font-size: 2.8em; }

  .h-navigation { padding-top: 0; padding-bottom: 0; }
  .h-mobile-menu { justify-content: flex-end; }

  .h-hero { padding-top: 100px; padding-bottom: 150px; }
  .hero-column { text-align: center; }
  .hero-heading h1 { font-size: 3.4em; }

  .cards-row { margin: 15px; }
}

/* ========================= DECORATIVE SHAPE LAYERS ======================== */
/* Overlay textures the theme can place on top of a section background. */
.background-wrapper {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
}
.background-layer { position: absolute; inset: 0; z-index: -10; overflow: hidden; }
.overlay-layer, .shape-layer { position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; }
.overlay-layer { z-index: 1; }
.overlay-image-layer { position: absolute; inset: 0; }
.shape-layer { z-index: 2; background-repeat: no-repeat; background-size: cover; }
/* parallax background: sized to the viewport, not the element */
.paraxify { background-attachment: fixed; background-position: center center; background-size: cover; background-repeat: no-repeat; }
.paraxify--ios.paraxify { background-attachment: scroll; }

.colibri-shape-circles                { background-image: url('../assets/shapes/circles.png'); }
.colibri-shape-circles-2              { background-image: url('../assets/shapes/circles-2.png'); }
.colibri-shape-circles-3              { background-image: url('../assets/shapes/circles-3.png'); }
.colibri-shape-circles-gradient       { background-image: url('../assets/shapes/circles-gradient.png'); }
.colibri-shape-circles-white-gradient { background-image: url('../assets/shapes/circles-white-gradient.png'); }
.colibri-shape-two-circles            { background-image: url('../assets/shapes/two-circles.png'); }
.colibri-shape-dots                   { background-image: url('../assets/shapes/dots.png'); }
.colibri-shape-10degree-stripes       { background-image: url('../assets/shapes/10degree-stripes.png'); }
.colibri-shape-left-tilted-lines      { background-image: url('../assets/shapes/left-tilted-lines.png'); }
.colibri-shape-right-tilted-lines     { background-image: url('../assets/shapes/right-tilted-lines.png'); }
.colibri-shape-right-tilted-strips    { background-image: url('../assets/shapes/right-tilted-strips.png'); }
.colibri-shape-rounded-squares-blue   { background-image: url('../assets/shapes/rounded-squares-blue.png'); }
.colibri-shape-many-rounded-squares-blue { background-image: url('../assets/shapes/many-rounded-squares-blue.png'); }
.colibri-shape-waves                  { background-image: url('../assets/shapes/waves.png'); }
.colibri-shape-waves-inverted         { background-image: url('../assets/shapes/waves-inverted.png'); }

/* ============================ LAYOUT UTILITIES ===========================
   The flex/alignment helpers the page templates lean on. Responsive
   suffixes follow Colibri: `-md-` from 768px, `-lg-` from 1024px.        */
.position-relative { position: relative; }
.h-overflow-hidden { overflow: hidden; }
.w-100 { width: 100%; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }
.flex-basis-100 { flex-basis: 100%; }
.flex-basis-auto { flex-basis: auto; }
.h-flex-basis { flex: 1 0 auto; }
.h-column__v-align { flex: 1 0 auto; max-width: 100%; }
.h-column__content > *:last-child { margin-bottom: 0; }
.h-column__content .h-heading > :last-child { margin-bottom: 0; }

/* the generated pages keep Colibri's container class names */
.h-section-grid-container { flex: 1; }
.h-section-boxed-container { width: 100%; margin-left: auto; margin-right: auto; }
.h-section-fluid-container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 576px)  { .h-section-boxed-container { max-width: 540px; } }
@media (min-width: 768px)  { .h-section-boxed-container { max-width: 720px; } }
@media (min-width: 1024px) { .h-section-boxed-container { max-width: 960px; } }
@media (min-width: 1200px) { .h-section-boxed-container { max-width: 1232px; } }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.align-items-end     { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start   { align-self: flex-start !important; }
.align-self-center  { align-self: center !important; }
.align-self-end     { align-self: flex-end !important; }
.align-self-stretch { align-self: stretch !important; }
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

@media (min-width: 768px) {
  .justify-content-md-start   { justify-content: flex-start !important; }
  .justify-content-md-center  { justify-content: center !important; }
  .justify-content-md-end     { justify-content: flex-end !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-around  { justify-content: space-around !important; }
  .align-items-md-start   { align-items: flex-start !important; }
  .align-items-md-center  { align-items: center !important; }
  .align-items-md-end     { align-items: flex-end !important; }
  .align-items-md-stretch { align-items: stretch !important; }
  .align-self-md-start   { align-self: flex-start !important; }
  .align-self-md-center  { align-self: center !important; }
  .align-self-md-end     { align-self: flex-end !important; }
  .align-self-md-stretch { align-self: stretch !important; }
  .text-md-left   { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right  { text-align: right !important; }
}
@media (min-width: 1024px) {
  .justify-content-lg-start   { justify-content: flex-start !important; }
  .justify-content-lg-center  { justify-content: center !important; }
  .justify-content-lg-end     { justify-content: flex-end !important; }
  .justify-content-lg-between { justify-content: space-between !important; }
  .justify-content-lg-around  { justify-content: space-around !important; }
  .align-items-lg-start   { align-items: flex-start !important; }
  .align-items-lg-center  { align-items: center !important; }
  .align-items-lg-end     { align-items: flex-end !important; }
  .align-items-lg-stretch { align-items: stretch !important; }
  .align-self-lg-start   { align-self: flex-start !important; }
  .align-self-lg-center  { align-self: center !important; }
  .align-self-lg-end     { align-self: flex-end !important; }
  .align-self-lg-stretch { align-self: stretch !important; }
  .text-lg-left   { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right  { text-align: right !important; }
}


/* ============================== COMPONENTS =============================== */
/* video embed — the aspect ratio comes from each page's own rules */
.h-video .video-container { overflow: hidden; position: relative; }
.ratio-inner { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.h-video-main { width: 100%; height: 100%; border: 0; }
/* lokal spelare: fyll 16:9-rutan utan att förvränga bilden */
video.h-video-main { display: block; object-fit: contain; background-color: #000; }
.h-video-main .wp-video { width: auto !important; }
.h-video .h-svg-icon path { cursor: pointer; }

/* Affisch med uppspelningsknapp — används inte av sidorna längre (filmerna
   ligger lokalt och spelas av <video>), men behålls för egna inbäddningar. */
.h-video-poster {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #000;
}
.h-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.h-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  pointer-events: none;
}
.h-video-play svg { width: 100%; height: 100%; display: block; }
.h-video-play__bg {
  fill: #212121;
  fill-opacity: .8;
  transition: fill .2s ease, fill-opacity .2s ease;
}
.h-video-play__arrow { fill: #fff; }
.h-video-poster:hover .h-video-play__bg,
.h-video-poster:focus-visible .h-video-play__bg {
  fill: #f00;
  fill-opacity: 1;
}

/* image with optional offset frame */
.h-image__frame-container-outer { display: block; }
.h-image__frame-container { position: relative; display: inline-block; z-index: 1; max-width: 100%; }
.h-image__frame { position: absolute; top: 0; left: 0; pointer-events: none; }
.h-multiple-image .h-image__frame-container { width: 100%; }
.h-multiple-image .ratio-inner { overflow: hidden; }

/* divider / section separator */
.h-divider { line-height: 0; }
.h-separator {
  width: 100%; max-width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  height: 10%;
  display: flex;
  left: 0;
  pointer-events: none;
}
.h-separator svg { display: block; max-height: 100%; width: 100%; height: 100%; }
.h-section > div.h-separator { z-index: 1; }

/* accordion — collapsed until its title carries .accordion-active */
.h-accordion-item-title { cursor: pointer; }
.h-accordion-item-title > span { flex: 1; }
.h-accordion-item-title .h-accordion-item-title-icon { display: inline-flex; }
.h-accordion-item-title .h-accordion-item-title-icon-right { margin-left: auto !important; }
.h-accordion-item-title .h-accordion-item-title-icon .h-svg-icon { width: 100%; height: 100%; }
.h-accordion-item-title ~ .h-accordion-item-content { height: auto !important; display: none; }
.h-accordion-item-title ~ .h-accordion-item-content__container { display: none; }
.h-accordion-item-title .h-accordion-item-title-active-icon { display: none; }
.h-accordion-item-title .h-accordion-item-title-normal-icon { display: inline-flex; }
.h-accordion-item-title.accordion-active ~ .h-accordion-item-content,
.h-accordion-item-title.accordion-active ~ .h-accordion-item-content__container { display: block; }
.h-accordion-item-title.accordion-active .h-accordion-item-title-active-icon { display: inline-flex; }
.h-accordion-item-title.accordion-active .h-accordion-item-title-normal-icon { display: none; }