@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
--SI_White: #FFFFFF;
--SI-Black: #363636;
--SI-blue: #17378D;
--SI-gold: #DAA700;
--SI-Graphite: #4E4E4E;
--SI-Green: #AFCA0A;
--SI-Orange: #EB7F31;
--SI-purple: #7A2182;
--SI-Rose-red: #E94F35;
--SI-Yellow: #FFD400;
--transparent: transparent;
--grey: grey;
--lightgrey: lightgrey;
--lightgrey1: #efefef;
--lightgrey2: #e6e6e6;
--lightgrey3: #696969;
--lightergrey: #dedede;
--darkgrey: #585858;
--whitesmoke: whitesmoke;
--black: #383838;
--lightergrey: #dedede;
--light-darkgrey: #d8d8d8;
--grey1: #bbbbbb;
--grey-green: #effff1;
--grey2: #ebebeb;
--default-white: white;
--default-darkwhite: #f3f3f3;
--sw-info-color: #3490dc;
--layout-row-shaddow-color-light: rgba(0,0,0,0.1);
--layout-row-shaddow-color-dark: rgba(0,0,0,0.2);
--calendar-selection-background-color: white;
--theme-heading-color: black;
--theme-heading1-color: black;
--theme-heading2-color: black;
--theme-heading3-color: black;
--theme-body-font-color: #424242;
--theme-color-lighten-10: hsl(var(--theme-color),40%);
--theme-color-lighten-20: hsl(var(--theme-color),30%);
--theme-color-darken-10: hsl(var(--theme-color),60%);
--theme-color-darken-20: hsl(var(--theme-color),70%);
--donate-wizard-button-next-color: #585858;
--theme-font-color: darkwhite;
--theme-color-contrast: whitesmoke;
--theme-color: var(--SI-Graphite);
--theme-nav-backgroundcolor: var(--SI-Yellow);
--theme-nav-color: var(--SI-Black);
--default-black: var(--black);
--default-grey: var(--grey);
--navbar-background-color: var(--theme-nav-backgroundcolor);
--navbar-collapsed-background-color: var(--whitesmoke);
--navbar-font-color: var(--theme-nav-color);
--navbar-collapsed-font-color: var(--default-black);
--page-title-border-color: var(--theme-color);
--footer-background-color: var(--theme-color);
--footer-font-color: var(--theme-color-contrast);
--cta-events-date-border-color: var(--theme-color);
}

/* ============================================================
   SOROPTIMIST INTERNATIONAL NORGESUNIONEN
   portalcustom.css — StyreWeb overstyring

   INNHOLD:
   1.  CSS-variabler
   2.  Generelle StyreWeb-resetter
   3.  Hero venstre  — layout, typografi, knapper
   4.  Hero høyre    — karusell-container
   5.  Karusell      — slides, overlay, tekst, nav
   6.  Mission-bokser
   7.  Stats-band
   8.  Hero kalender
   9.  Artikler forside
   10. Media queries

   ============================================================ */

/* DIV  */

.layout__row:has(.media-footer) {
  position: relative !important;
  overflow: hidden !important;
}

.soro-footer-logo {
display: none;
  position: absolute !important;
  bottom: -40px !important;
  left: -40px !important;
  width: 280px !important;
  height: auto !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: invert(1);
  mix-blend-mode: screen;
}

.board-members {
font-size: 1.6rem !important; 
}

header.navbar--sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transition: transform 0.3s ease !important;
}

.footer-site {
  position: static !important;
  bottom: auto !important;
  margin-top: 0 !important;
}


.footer-site__copyright {
color: var(--soro-navy-deep);
}


/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--soro-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--soro-navy);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--soro-gold);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #555b6a var(--soro-cream);
}

/* ============================================================
   1. CSS-VARIABLER
   ============================================================ */

:root {
  /* Norgesunionen identitetsfarger */
  --soro-navy:       #1a2540;
  --soro-navy-mid:   #1c2a45;
  --soro-navy-deep:  #243358;
  --soro-gold:       #c9a84c;
  --soro-gold-light: #f0dfa0;
  --soro-cream:      #f8f6f1;
  --soro-border:     #e8e2d6;
  --soro-muted:      #6b7280;
  --soro-white:      #ffffff;
  --soro-serif:      'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --soro-sans:       'Barlow', system-ui, sans-serif;

  --soro-shadow: rgba(106, 26, 65, 0.15) 0px 8px 24px;

  /* SI Global brand-farger */
  --si-yellow:   #FFD400;
  --si-black:    #363636;
  --si-graphite: #4E4E4E;
  --si-blue:     #17378D;
  --si-green:    #AFCA0A;
  --si-orange:   #EB7F31;
  --si-purple:   #7A2182;
  --si-rosered:  #E94F35;
  --si-gold-si:  #DAA700;

--hero-height: clamp(520px, 65vh, 900px);
}


.layout__row--margintop-50 {
margin-top: 80px;
}

@media (min-width: 900px) {
.layout__row--margintop-50 {
margin-top: 120px;
 }
}

/* ============================================================
   2. GENERELLE STYREWEB-RESETTER
   ============================================================ */

.widget > div[style*="margin: 5px"] {
  margin: 0 !important;
  padding: 0 !important;
}

.widget > section > div[style*="margin: 5px"] {
  margin: 0 !important;
}

h1, h2, h3, h4 {
font-family: var(--soro-serif);
}

html {
  font-family: var(--soro-sans);
  color: var(--soro-navy-deep);
}
   

.body-container {
  position: static !important;
  overflow: visible !important;
  inset: auto !important;
}

body {
font-size: 1.68rem;
}

.page-title {
    font-size: clamp(3.5rem, 3vw, 5rem);
}

.htmlbox {
font-size: clamp(1.8rem, 3vw, 2rem);
line-height: 1.5;
}
/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  background: var(--soro-white) !important;
  border-bottom: 1px solid var(--soro-border) !important;
  color: var(--si-black) !important;
  justify-content: center !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
  min-height: 90px;
    align-items: center;

  visibility: hidden;
}


.navbar__body {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
}

@media (min-width: 769px) {
.navbar__body {
  max-width: 95% !important;
 }
}

/* ── LOGO / BRANDING ── */

.navbar__branding {
  flex-shrink: 0 !important;
}

.navbar__link {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
}

.navbar__logo {
  height: 110px !important;
  width: auto !important;
  max-height: 110px !important;
  display: block !important;
  margin: 0 !important;
}

.navbar__text-container {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.navbar__firmname {
  font-family: var(--soro-sans) !important;
  font-size: 14px ;
  font-weight: 700 !important;
  color: var(--si-black) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  display: block !important;
}

.navbar__text {
  font-family: var(--soro-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--soro-muted) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  display: block !important;
}

/* ── NAV-LENKER ── */

.navbar__collapse {
  display: flex !important;
}

.navbar__nav {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 64px !important;
}

.navbar__nav li {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  position: relative !important;
}

.navbar__nav li a {
    font-family: var(--soro-sans) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: none;
    color: var(--soro-navy-mid);
    text-decoration: none !important;
    padding: 0 16px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    transition: color 0.2s, background 0.2s !important;
}

.navbar__nav li a:hover {
  color: var(--si-black) !important;
  background: var(--soro-cream) !important;
}

/* Aktiv side */
.navbar__nav li a.active,
.navbar__nav li:has(a.active) > a {
  color: var(--si-black) !important;
  border-bottom: 3px solid var(--si-yellow) !important;
  background: var(--soro-cream);
}

/* ── DROPDOWN ── */

.navbar .dropdown {
  position: relative !important;
}

.navbar .dropdown__toggle {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.navbar .dropdown__chevron {
  font-size: 9px !important;
  margin-left: 4px !important;
  transition: transform 0.25s !important;
  color: var(--soro-muted) !important;
}

.navbar .dropdown__chevron--active {
  transform: rotate(180deg) !important;
}

.navbar .dropdown__menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--soro-white) !important;
  border: none;
  border-radius: 0 0 2px 2px !important;
  min-width: 200px !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  z-index: 200 !important;
  box-shadow: none !important;
}

.navbar .dropdown__menu--show {
  height: auto !important;
  max-height: 600px !important;
  transition: max-height 0.3s ease-in !important;
  overflow: visible !important;
  border: 1px solid var(--soro-border) !important;
  border-top: 3px solid var(--si-yellow) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.navbar .dropdown__menu li {
  height: auto !important;
  display: block !important;
  border-bottom: 1px solid var(--soro-border) !important;
}

.navbar .dropdown__menu li:last-child {
  border-bottom: none !important;
}

.navbar .dropdown__menu li a {
  font-family: var(--soro-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--si-black) !important;
  padding: 12px 20px !important;
  height: auto !important;
  display: block !important;
  border-bottom: none !important;
}

.navbar .dropdown__menu li a:hover {
  background: var(--soro-cream) !important;
  color: var(--si-black) !important;
}

/* ── HAMBURGER ── */

.navbar__bars {
  display: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 64px !important;
  width: 44px !important;
  align-items: center !important;
}

.navbar__bar {
  display: block !important;
  background: var(--soro-navy-mid);
  border-radius: 2px !important;
  transition: transform 0.2s, margin 0.2s !important;
  margin: 0 !important;
}

.navbar__bar--close-1 {
  transform: rotate(-45deg) !important;
  margin-top: 8px !important;
}

.navbar__bar--close-2 {
  transform: rotate(45deg) !important;
  margin-top: -10px !important;
}

/* ── MOBILMENY ── */

.navbar__collapse--show {
  font-family: var(--soro-sans) !important;
  background: var(--soro-white) !important;
  border-left: none !important;
  border-top: 1px solid var(--soro-border) !important;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08) !important;
  position: fixed !important;
  top: 64px !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  z-index: 99 !important;
  transition: none !important;
}

.navbar__collapse--show .navbar__nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  padding: 0 !important;
}

.navbar__collapse--show .navbar__nav li {
  height: auto !important;
  border-bottom: 1px solid var(--soro-border) !important;
  display: block !important;
}

.navbar__collapse--show .navbar__nav li:last-child {
  border-bottom: none !important;
}

.navbar__collapse--show .navbar__nav li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--si-black) !important;
  padding: 18px 24px !important;
  height: auto !important;
  display: flex !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
}

.navbar__collapse--show .navbar__nav li a:hover {
  background: var(--soro-cream) !important;
  border-left-color: var(--si-yellow) !important;
}

/* Dropdown i mobilmeny */
.navbar__collapse--show .dropdown__menu {
  position: static !important;
  border: none !important;
  border-top: 1px solid var(--soro-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--soro-cream) !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.navbar__collapse--show .dropdown__menu--show {
  height: auto !important;
  max-height: 600px !important;
  overflow: visible !important;
}

.navbar__collapse--show .dropdown__menu li a {
  padding: 14px 24px 14px 40px !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  border-left: none !important;
}

/* ── RESPONSIV ── */

/* navbar__collapse-dynamic settes av StyreWebs checkNavbarWidth()
   når navlinksene ikke får plass. Vi behandler den likt som
   navbar__collapse--show men uten full-screen overlay */
.navbar__collapse-dynamic {
  position: absolute !important;
  top: 110px !important;
  right: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  background: var(--soro-white) !important;
  border: 1px solid var(--soro-border) !important;
  border-top: 3px solid var(--si-yellow) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
  overflow: hidden !important;
  display: none !important;
}

.navbar__collapse-dynamic.navbar__collapse--show {
  display: block !important;
}

.navbar__collapse-dynamic .navbar__nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  padding: 0 !important;
}

.navbar__collapse-dynamic .navbar__nav li {
  height: auto !important;
  border-bottom: 1px solid var(--soro-border) !important;
  display: block !important;
}

.navbar__collapse-dynamic .navbar__nav li a {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--si-black) !important;
  padding: 16px 20px !important;
  height: auto !important;
  display: flex !important;
   justify-content: space-between;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;

}

.navbar__collapse-dynamic .navbar__nav li a:hover {
  background: var(--soro-cream) !important;
  border-left-color: var(--si-yellow) !important;
}

.navbar__collapse-dynamic .dropdown__menu {
  position: static !important;
  border: none !important;
  border-top: 1px solid var(--soro-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--soro-cream) !important;
}

.navbar__collapse-dynamic .dropdown__menu li a {
  padding: 12px 20px 12px 36px !important;
  font-size: 16px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  border-left: none !important;
}

/* Vis hamburger når dynamic-klassen er satt */
.navbar__body-dynamic .navbar__bars {
  display: flex !important;
}

.navbar__body-dynamic .navbar__collapse:not(.navbar__collapse--show):not(.navbar__collapse-dynamic) {
  display: none !important;
}

@media (max-width: 769px) {
  .navbar__body {
    padding: 0 24px !important;
  }
  .navbar__collapse:not(.navbar__collapse--show) {
    display: none !important;
  }
  .navbar__bars {
    display: flex !important;
  }
}

@media (max-width: 520px) {
  .navbar__body {
    padding: 0 16px !important;
  }
  .navbar__firmname {
    font-size: 12px;
  }
}

/* ============================================================
   3. HERO VENSTRE
   Scope: .soro-hero
   ============================================================ */


.layout__row:has(.soro-hero) {
min-height: var(--hero-height);
}

.soro-hero {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.soro-hero > div,
.soro-hero section {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.soro-hero .widget,
.soro-hero .widget > div {
  overflow: visible !important;
}

.soro-hero .zigzag-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: var(--hero-height) !important;
  background: var(--soro-navy) !important;
  gap: 0 !important;
  margin: 0 !important;
}

.soro-hero .zigzag-list__content-container {
  padding: 72px 56px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--soro-navy) !important;
  overflow: hidden !important;
  max-height: none !important;
  min-height: var(--hero-height) !important;
  justify-content: center;
}

@media (max-width: 769px) {
.soro-hero .zigzag-list__content-container {
padding: 72px 20px !important;
}
}


.soro-hero .zigzag-list__content {
  display: flex !important;
  flex-direction: column !important;
  padding: 0;
  max-width: 55ch;
overflow: hidden !important; 
height: auto !important;
}

.soro-hero .zigzag-list__image-container {
  display: none !important;
}


/* Eyebrow — SI Yellow label */
.soro-hero .soro__eyebrow {
  display: inline-block !important;
  font-family: var(--soro-sans) !important;
  font-size: clamp(20px, 3vw, 2.3rem);
  font-weight: 500!important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--soro-white) !important;
  background: none;
  border: none !important;
  padding: 0;
  margin-bottom: 20px !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Tittel */
.soro-hero .zigzag-list__heading {
  font-family: var(--soro-sans) !important;
  font-size: clamp(38px, 4vw, 65px) !important;
  font-weight: 700 !important;
  color: var(--soro-white) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}

/* Ingress */
.soro-hero .zigzag-list__content > div {
    font-family: var(--soro-sans) !important;
    font-weight: 300 !important;
    color: var(--soro-white);
    line-height: 1.5;
    margin-bottom: 36px !important;
    letter-spacing: normal;
    font-size: clamp(20px, 2vw, 2.2rem);
}

/* Knapper-wrapper */
.soro-hero .zigzag-list__content > div:last-child {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

/* Primærknapp — SI Yellow */
.soro-hero .soro-hero__btn-primary {
  font-family: var(--soro-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--si-black) !important;
  background: var(--si-yellow) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: opacity 0.2s !important;
}

.soro-hero .soro-hero__btn-primary:hover {
  opacity: 0.88 !important;
}

/* Sekundærknapp */
.soro-hero .soro-hero__btn-secondary, .soro-frontpage__yt .soro-hero__btn-secondary {
  font-size: 18px !important;
  font-weight: 400 !important;
  color:  var(--soro-cream) !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  padding: 0 0 2px 0 !important;
  text-decoration: none !important;
  display: inline-block !important;
transition: color 0.2s, transform 0.2s !important;
margin: 0;

}

.soro-hero .soro-hero__btn-secondary:hover , .soro-frontpage__yt .soro-hero__btn-secondary:hover {
  color: var(--soro-gold) !important;
    transform: translateX(2px);
}


/* ============================================================
   4. HERO HØYRE — KARUSELL-KOLONNE
   ============================================================ */

.layout__row--two-col .layout__column--two-col-two {
  display: flex !important;
  flex-direction: column !important;
}

.layout__column--two-col-two .layout__column--sectionwrapper,
.layout__column--two-col-two .widget,
.layout__column--two-col-two section {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.soro-hero__carousel {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.soro-hero__carousel > div[style*="margin: 5px"] {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  position: relative !important;
}

.soro-hero__carousel .zigzag-list {
  display: none !important;
}

/* Hero-rad gap-fix */
.layout__row:has(.soro-hero) .layout__row__columnwrapper {
  gap: 0 !important;
  grid-gap: 0 !important;
   grid-template-columns: 2fr 1.5fr;
}


@media only screen and (max-width: 768px) {
.layout__row:has(.soro-hero) .layout__row__columnwrapper {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   5. KARUSELL
   Scope: .soro-carousel og barn (bygges av JS)
   ============================================================ */

.soro-carousel {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--soro-cream) !important;
  height: var(--hero-height);
}


@media (max-width: 752px) {
.soro-carousel {
  max-height: 370px !important;
}
}

.soro-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.7s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.soro-slide--active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

.soro-slide__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.soro-slide__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgb(8 10 18 / 36%) 0%, rgb(8 10 18 / 21%) 45%, rgb(8 10 18 / 9%) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.soro-slide__overlay::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255, 255, 255, 0.018) 40px,
    rgba(255, 255, 255, 0.018) 41px
  ) !important;
}

.soro-slide__body {
  position: relative !important;
  z-index: 2 !important;
  padding: 40px 48px 80px !important;
}

/* Prosjektnummer — SI Yellow label */
.soro-slide__num {
  font-family: var(--soro-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--si-black) !important;
  background: var(--si-yellow) !important;
  padding: 3px 8px !important;
  display: none !important;
  margin-bottom: 12px !important;
  text-shadow: none !important;
}

.soro-slide__title {
  font-family: var(--soro-serif) !important;
  font-size: clamp(40px, 2.6vw, 46px) !important;
  font-weight: 700 !important;
  color: var(--soro-white) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important;
}

.soro-slide__text {
  font-family: var(--soro-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.5 !important;
  max-width: 340px !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Les mer — SI Yellow */
.soro-slide__link {
  font-family: var(--soro-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--soro-white) !important;
  background: none !important;
  text-decoration: underline !important;
  text-shadow: none !important;
  display: inline-block !important;
  transition: opacity 0.2s !important;
}

.soro-slide__link:hover {
  opacity: 0.85 !important;
}

/* Nav-bar */
.soro-carousel__nav {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 32px 20px !important;
  background: linear-gradient(to top, rgb(126 122 114) 0%, transparent 100%) !important
    max-width: 94%;
    justify-content: space-between;
    margin-inline: auto;
}

.soro-carousel__pills {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.soro-carousel__pill {
  height: 3px !important;
  width: 8px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s !important;
}

.soro-carousel__pill--active {
  width: 28px !important;
  background: #f1ebce !important;
}

.soro-carousel__arrows {
  display: flex !important;
  gap: 8px !important;
}

.soro-carousel__arrow {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, border-color 0.2s !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 0 !important;
}

.soro-carousel__arrow:hover {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.soro-carousel__arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255, 255, 255, 0.85) !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

.soro-carousel__pause {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  opacity: 0 !important;
  transition: opacity 0.25s !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.soro-carousel:hover .soro-carousel__pause {
  opacity: 1 !important;
}

.soro-carousel__pause span {
  display: block !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   FORSIDEBOKSER 
   Scope: .soro-forsidebokser
   ============================================================ */

.soro-forsidebokser .datalist-card__button {
  transition: transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
 width: 100%;
}

.soro-forsidebokser .datalist-card:hover .datalist-card__button {
  transform: translateX(4px) !important;
}

.soro-forsidebokser {
  margin: 0 !important;
  padding: 0 !important;
}



.soro-forsidebokser .grid__sm--4 {
grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 580px) {
.soro-forsidebokser .grid__sm--4 {
grid-template-columns: 1fr;
 }
}
.soro-forsidebokser .datalist-card {
  cursor: pointer !important;
}

/* Nullstill StyreWebs font-awesome-lite ::before på datalist-card */
.soro-forsidebokser .datalist-card::before {
  display: none !important;
  content: none !important;
}


.soro-forsidebokser .fa-arrow-right.datalist-card__icon {
  margin-bottom: 10px !important;
}

.soro-forsidebokser > div[style*="margin: 5px"],
.soro-forsidebokser section {
  margin: 0 !important;
  padding: 0 !important;
}

/* Grid */
.soro-forsidebokser .grid__sm--3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--soro-border) !important;
  border: 1px solid var(--soro-border) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: unset !important;
}

.soro-forsidebokser .datalist-card__button-text {
    visibility: visible;
    opacity: 1;
    max-width: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
    margin-right: 0;
}



/* Kort */
.soro-forsidebokser .datalist-card {
  background: var(--soro-white) !important;
  border: 1px solid #f3efeb;
  border-radius: 2px !important;
  margin: 0 !important;
  padding: 2rem 3rem 0 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  transition: background 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}



.soro-forsidebokser .datalist-card:hover {
  background: var(--soro-cream) !important;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgb(187 187 187 / 15%) 0px 0px 0px 1px;
}

/* Ikon (injisert av JS) */
.soro-forsidebokser .datalist-card__icon {
  font-size: 3rem !important;
  color: var(--soro-border) !important;
  display: block !important;
  margin-bottom: 1.5rem;
}


.fa-arrow-right:before {
font-size: 13px !important;
color: var(--soro-navy-deep);
}


/* Header og body reset */
.soro-forsidebokser .datalist-card__body {
  text-align: left !important;
  padding: 0 !important;
}

.soro-forsidebokser .datalist-card__header {
  display: none !important;
}

/* Tittel */
.soro-forsidebokser .datalist-card__heading {
  font-family: var(--soro-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--si-black) !important;
  padding: 0 0 10px 0 !important;
  margin: 0 !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
}

/* Innhold */
.soro-forsidebokser .datalist-card__content {
  padding: 0 !important;
}

.soro-forsidebokser .datalist-card__content div {
  font-family: var(--soro-sans) !important;
  font-size:clamp(16px, 3vw, 1.8rem);
  font-weight: 400 !important;
  color: var(--soro-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.soro-forsidebokser .datalist-card__button {
    background-color: transparent;
    padding: 0;
    margin-block: 2rem;
    display: flex;
    justify-content: flex-end;
}


/* Responsiv */
@media (max-width: 960px) {
 .soro-forsidebokser .grid__sm--3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .soro-forsidebokser .grid__sm--3 {
    grid-template-columns: 1fr !important;
  }
}




/* ============================================================
   FILM-SEKSJON
   Scope: .soro-frontpage__yt
   Zigzag-liste: venstre = tekst, høyre = YouTube embed
   ============================================================ */

.layout__row:has(.soro-frontpage__yt) {
  background: var(--soro-cream) !important;
  padding: 6rem 0 !important;
}

.soro-frontpage__yt {
  margin: 0 !important;
  padding: 0 !important;
}

.soro-frontpage__yt > div[style*="margin: 5px"] {
  margin: 0 !important;
  padding: 0 !important;
}

.soro-frontpage__yt .soro-yt-url {
  display: none !important;
}

/* Grid: to like kolonner */
.soro-frontpage__yt .zigzag-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  background: var(--soro-cream) !important;
  align-items: center !important;
}

/* Venstre: tekstkolonne */
.soro-frontpage__yt .zigzag-list__content-container {
  background: var(--soro-cream) !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
    padding: 0 16px;
    max-width: 55ch;

}

.soro-frontpage__yt .zigzag-list__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
  height: auto !important;
  overflow: visible !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
}

/* Tittel */
.soro-frontpage__yt .zigzag-list__heading {
  font-family: var(--soro-serif) !important;
  font-size: clamp(28px, 3vw, 55px) !important;
  font-weight: 700 !important;
  color: var(--soro-navy) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px 0 !important;
}

/* Ingress */
.soro-frontpage__yt .zigzag-list__content > div {
  font-family: var(--soro-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--soro-navy) !important;
  line-height: 1.5 !important;
  margin-bottom: 32px !important;
}

/* Knapp-wrapper */
.soro-frontpage__yt .zigzag-list__content > div:last-child {
  margin-bottom: 0 !important;
}

/* Sekundærknapp — mørk på lys bakgrunn */
.soro-frontpage__yt .soro-hero__btn-secondary {
  color: var(--soro-navy) !important;
  border-bottom: 1px solid var(--soro-navy) !important;
  font-size: 18px !important;
}

/* Høyre: embed-kolonne — padding-hack for 16:9 */
.soro-frontpage__yt .zigzag-list__image-container {
  position: relative !important;
  background: #000 !important;
  display: block !important;
  height: 0 !important;
  padding-bottom: 56.25% !important;
  align-self: stretch !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* iframe injisert av JS */
.soro-frontpage__yt .soro-yt-embed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* Responsiv */
@media (max-width: 768px) {
  .soro-frontpage__yt .zigzag-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  .soro-frontpage__yt .zigzag-list__content-container {
    margin-bottom: 4rem;
   padding: 0;
  }

  .soro-frontpage__yt .zigzag-list__image-container {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
  }
}



/* ============================================================
   8. HERO KALENDER
   Scope: .soro-hero-calendar
   ============================================================ */
.nearest-first{
    display: flex;
    flex-direction: column-reverse;
}

.soro-hero-calendar > div[style*="margin: 5px"],
.soro-hero-calendar section {
  margin: 0 !important;
  padding: 0 !important;
}

.soro-hero-calendar .cta-events {
  background: var(--soro-white) !important;
  color: var(--si-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.soro-hero-calendar .cta-events__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
  grid-gap: 2rem;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 72px !important;
  margin: 0;
  width: 100%;
}



.soro-hero-calendar .cta-events__event-description {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  padding-right: 32px !important;
}

.soro-hero-calendar .cta-events__event-description p {
  display: none !important;
}

/* Aktiviteter-label — SI Yellow */
.soro-hero-calendar .cta-events__event-description-heading,
.soro-hero-calendar .cta-events__event-description h1 {
  font-family: var(--soro-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--soro-navy-deep) !important;
  background: var(--si-yellow) !important;
  padding: 12px !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 2px;
display: none;
}


.soro-hero-calendar .grid__md--2 {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
}


.soro-hero-calendar .cta-events__event {
display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px !important;
    padding: 2rem 12px !important;
    height: 100% !important;
    text-decoration: none !important;
    color: var(--soro-muted) !important;
    transition: background 0.15s !important;
   border-radius: 4px;
}

.soro-hero-calendar .cta-events__event:hover {
  background: var(--soro-cream) !important;
}

.soro-hero-calendar .cta-events__date {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-right: none !important;
  border-right-width: 0 !important;
  --cta-events-date-border-width: 0px !important;
}

.soro-hero-calendar .cta-events__number {
  font-family: var(--soro-sans) !important;
  font-size: 4rem !important;
  font-weight: 700 !important;
  color: var(--soro-navy-deep);
  line-height: 1 !important;
  word-break: normal !important;
}

.soro-hero-calendar .cta-events__date > span:last-child {
  font-family: var(--soro-sans) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
   color: var(--si-gold-si);
  line-height: 1.2 !important;
}

.soro-hero-calendar .cta-events__location {
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  padding-left: 10px !important;
  border-left: 2px solid var(--si-yellow) !important;
  min-width: 0 !important;
  font-size: 16px;
}

.soro-hero-calendar .cta-events__location-heading {
  font-family: var(--soro-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--soro-navy-deep);
  line-height: 1.35 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 19ch;
}



/* ============================================================
   SORO - ARTIKLER
   ============================================================ */


:root {
--articles-padding: clamp(3rem, 4vw, 6rem);
}

.soro-articles-header {
  background: var(--soro-cream);
  max-width: 1440px;
  margin: 0 auto;
   padding: var(--articles-padding);
}

.layout__row:has(.soro-articles-header) {
background: var(--soro-cream);
}


.soro-articles-header .page-title {
    font-size: 5rem;
    color: #1a2540;
    background: var(--soro-cream);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--si-yellow);
    padding-bottom: 1px;
    transition: gap 0.2s;
    font-weight: 700;

}

.soro-articles {
  background: var(--soro-cream);
  padding: var(--articles-padding);
max-width: 1440px;
    margin-inline: auto;
padding-bottom: 10rem;
}

.soro-articles .grid_2.alpha {
  display: none !important;
}

.soro-articles .articlelist.grid_10 {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.soro-articles .grid_12 {
  max-width: 1440px;
  margin: 0 auto;
}

.soro-articles .articlelist {
  display: grid !important;
  grid-template-columns: 1.4fr 2fr !important;
  gap: 0 48px !important;
  align-items: start !important;
}

.soro-articles .articlelist article:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 / 9 !important;
  background: var(--soro-white) !important;
  border-radius: 16px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--soro-shadow);
  border: 2px solid var(--soro-border);
}

.soro-articles .articlelist article:nth-child(n+2) {
  grid-column: 2 !important;
  border-bottom: 1px solid var(--soro-border) !important;
  padding: 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
   transition: .2s ease;
}

.soro-articles .clear { display: none !important; }

.soro-articles .articlelist article:nth-child(n+8) {
  display: none !important;
}

/* Featured artikkel */

.soro-articles article:nth-child(1) .pull-left {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.soro-articles article:nth-child(1) .pull-left a {
  display: block !important;
}

.soro-articles article:nth-child(1) .pull-left a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  float: none !important;
}

.soro-articles article:nth-child(1) .article_details {
  display: none !important;
}

.soro-articles article:nth-child(1) .media-body {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.soro-articles article:nth-child(1) .media-heading {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--si-yellow) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 28px !important;
}

.soro-articles article:nth-child(1) .media-heading a {
  color: var(--soro-navy) !important;
  text-decoration: none !important;
}

.soro-articles article:nth-child(1) p:not(.article_details) {
  font-size: 16px !important;
  color: var(--soro-navy) !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
  padding: 0 28px !important;
  margin-bottom: 20px !important;
}

.soro-articles article:nth-child(1) .bigLink {
  padding: 0 0 28px 28px !important;
  margin-top: auto;
  display: block !important;
}

.soro-articles article:nth-child(1) .bigLink a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--soro-navy) !important;
  color: var(--soro-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  transition:  0.2s ease !important;
  text-decoration: none !important;
}

.soro-articles article:nth-child(1) .bigLink a:hover {
transform: translateX(2px);
}

/* Meta */

.soro-article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.soro-articles article:nth-child(1) .soro-article-meta {
  padding: 20px 28px 10px 28px;
}

.soro-articles article:nth-child(n+2) .soro-article-meta {
  padding: 0;
}

.soro-article-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--si-yellow);
  color: var(--soro-navy);
  font-size: 14px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
}

.soro-article-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--soro-navy);
  flex-shrink: 0;
}

.soro-article-date {
  font-size: 14px;
  color: var(--soro-muted);
  font-weight: 300;
}

/* Nyhetsliste */

.soro-articles article:nth-child(n+2) .pull-left {
  display: none !important;
}

.soro-articles article:nth-child(n+2) .media-body {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.soro-articles article:nth-child(n+2) .media-body p {
font-size: clamp(16px, 3vw, 1.8rem);
margin: 5px 0 0 0;
max-width: 55ch;
}

.soro-articles article:nth-child(n+2) .media-heading {
color: var(--soro-navy) !important;
    text-decoration: none !important;
    transition: color 0.2s;
    font-size: clamp(20px, 3vw, 2.3rem);
    font-family: var(--soro-serif);
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 6px 0 6px 0 !important;
}


.soro-articles article:nth-child(n+2) {
  cursor: pointer;
  transition: background 0.2s, padding 0.2s;
}

.soro-articles article:nth-child(n+2):hover {
/*  background: rgba(60,40,24,0.04) !important; */
transform: translateX(10px);
  border-radius: 0;
}


.soro-articles article:nth-child(n+2) .bigLink {

  display: flex;
  justify-content: flex-end;
}

.kia-news-list-header {
  grid-column: 2 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2rem;
}

.kia-news-list-label {
    font-size: clamp(20px,3vw,2.4rem);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
color: var(--soro-navy-deep);
}

.kia-news-all-link {
  font-size: 18px;
  font-weight: 500;
  color: var(--soro-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--si-yellow);
  padding-bottom: 1px;
  transition: 0.2s ease;
}

.kia-news-all-link:hover { 
transform: translateX(3px);
}



@media (max-width: 900px) {


  /* Artikler*/
  .soro-articles {
    padding: 0 24px 60px 24px;
  }

  .soro-articles .articlelist {
    grid-template-columns: 1fr !important;
  }

  .soro-articles .articlelist article:nth-child(1) {
    grid-row: auto !important;
  }

  .soro-articles .articlelist article:nth-child(n+2) {
    grid-column: 1 !important;
  }

  .kia-news-list-header {
    grid-column: 1 !important;
    margin-top: 6rem;
  }
}


.org-footer {
background-color: var(--soro-navy);
}

.footer-site {
background-color: white;
/*     background-color: var(--soro-navy); */
}



@media (max-width: 645px) {
.footer-site__copyright {
    font-size: 1.1rem;
}
}


.home .layout__row--two-col:has(.educate) {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 2fr 1fr;
    }


.page-title {
    font-size: 3.5rem;
    color: #1a2540;
    border-bottom: none;
}

.page-title-small {
    font-size: 2rem;
    color: #4E4E4E;
    border-bottom: none;
    text-align: center;
}


.important-text {
    font-size: 2.2rem;
    color: white;
    border-bottom: none;
}


.home .layout__row--background-light:has(.sor-meny) {
     background-color: unset;
    background-image: url("https://i.styreweb.com/v1/photoalbum/11730462/yellow-curves-background.jpg?width=800&autorotate=true&width=2500&mode=max");
background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;

}






.home .overskrift_forside {
    letter-spacing: 1.1px;
    font-size: max(2vw, 20px);
    text-align: center;
    font-weight: 600;
    color: #154389;
}

.home .page-title {
text-align: center;
background-color: transparent;
}


.home .panel-hero-image__img-cover {
filter: grayscale(0.5);
}

.home .hero img {
filter: grayscale(0.5);
}





/* ==============================================
   HERO CAROUSEL
   Tilpasset custom CSS for hero-dynamic seksjon
   ============================================== */

section.hero-dynamic {
  --hc-duration:            6000ms;  /* Varighet per slide          */
  --hc-slide-height:        50vh;    /* Høyde på carousel           */
  --hc-slide-height-mobile: 50svh;   /* Høyde på mobil              */
  --hc-transition:          0.65s cubic-bezier(0.77, 0, 0.175, 1); /* Slide-overgang */

  --hc-heading-size:        clamp(2.4rem, 3vw, 5rem);         /* Overskrift      */
  --hc-body-size:           clamp(1.75rem, 1.5vw, 2.9rem);   /* Brødtekst       */
  --hc-btn-size:            clamp(1.75rem, 1.5vw, 1.9rem);   /* Knapp-tekst     */

  --hc-indicator-width:     30px;    /* Bredde på indikator-pille   */
  --hc-indicator-height:    10px;    /* Høyde på indikator-pille    */
  --hc-indicator-gap:       14px;    /* Avstand mellom piller       */
  --hc-indicator-radius:    4px;     /* Avrunding på piller         */

  --hc-hover-overlay:       rgba(0,0,0,0.19);               /* Overlay-farge ved hover    */
  --hc-hover-transition:    0.3s ease;                       /* Hastighet på hover-effekt  */
  --hc-indicator-fill:     var(--net-green);                /* Farge på aktiv fill        */
  --hc-indicator-done:      rgba(255,255,255,0.18);          /* Farge på fullførte piller  */
  --hc-indicator-pending:   #7a218259;          /* Farge på kommende piller   */
  --hc-indicator-active-bg: rgba(255,255,255,0.2);           /* Bakgrunn på aktiv pille    */

   --hc-indicator-bg:  #ffffff96;                                          /* Bakgrunn på indikatorne*/
} 

.hero-dynamic {
  overflow: hidden;
}

.hc-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hc-track {
  display: flex;
  transition: transform var(--hc-transition);
  will-change: transform;
}

.hc-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  position: relative;
  overflow: hidden;
}

.hc-slide .zigzag-list {
  display: block;
  position: relative;
  margin: 0 !important;
  grid-template-columns: unset !important;
}

.hc-slide .zigzag-list__image-container {
  display: block;
  width: 100%;
  height: var(--hc-slide-height);
}

.hc-slide .zigzag-list__image-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hc-hover-overlay);
  opacity: 0;
  transition: opacity var(--hc-hover-transition);
  pointer-events: none;
  z-index: 1;
}

.hc-slide .zigzag-list__image {
  width: 100%;
  height: var(--hc-slide-height);
  object-fit: cover;
  object-position: 0 69%;
  display: block;
  transition: transform var(--hc-hover-transition);
}

.hc-slide .zigzag-list__content-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  background: none;
  pointer-events: none;
  z-index: 2;
  transition: transform var(--hc-hover-transition);
  text-align: center;
}

@media (hover: hover) {
  .hc-wrapper:hover .hc-slide .zigzag-list__image-container::after {
    opacity: 1;
  }

  .hc-wrapper:hover .hc-slide .zigzag-list__image {
    transform: scale(1.02);
  }

  .hc-wrapper:hover .hc-slide .zigzag-list__content-container {
    transform: translate(-50%, calc(-50% - 2px));
  }
}

.hc-wrapper,
.hc-track,
.hc-slide,
.hc-slide .zigzag-list,
.hc-slide .zigzag-list__image-container {
  pointer-events: auto;
}

.hc-slide .zigzag-list__content {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 48px;
  height: auto;
  background: #ffffffc7;
  pointer-events: auto;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.hc-slide .zigzag-list__heading {
  color: #17378D;
  font-size: var(--hc-heading-size);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.hc-slide .zigzag-list__content > div:not(:has(a)) {
  color: #17378D;
  font-size: var(--hc-body-size);
  margin-bottom: 16px;
  line-height: 1.4;
  letter-spacing: normal;
    max-width: 37ch;
    font-weight: 400;
    font-family: 'Open Sans';
}

.hc-slide .zigzag-list-angle__button,
.hc-slide .zigzag-list__button {
  display: inline-block;
  padding: 12px 28px;
  background-color: #ffffff;
  color: #111111 !important;
  font-size: var(--hc-btn-size);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, transform 0.15s ease;
  margin: 0;
}

.hc-slide .zigzag-list-angle__button:hover,
.hc-slide .zigzag-list__button:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
}

.hc-slide .zigzag-list-angle__button[style],
.hc-slide .zigzag-list__button[style] {
/*background-color: var(--btn-bg, #066daf) !important;*/
  color: #ffffff !important;
}

.hc-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--hc-indicator-gap);
  align-items: center;
  z-index: 10;
  padding: 10px 16px;
  background: var(--hc-indicator-bg);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.hc-indicator {
  width: var(--hc-indicator-width);
  height: var(--hc-indicator-height);
  border-radius: var(--hc-indicator-radius);
  background: var(--hc-indicator-pending);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hc-indicator:hover {
  transform: scale(1.25);
}

.hc-indicator--active {
  background: var(--hc-indicator-active-bg);
}

.hc-indicator--done {
  background: var(--hc-indicator-done);
}

.hc-indicator--done .hc-indicator__fill {
  display: none;
}

.hc-indicator--pending {
  background: var(--hc-indicator-pending);
}

.hc-indicator__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--hc-indicator-fill);
  border-radius: var(--hc-indicator-radius);
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
  will-change: transform;
}

.hc-indicator--done .hc-indicator__fill {
  transform: scaleX(1);
  transition: none;
}

.hc-indicator--pending .hc-indicator__fill {
  transform: scaleX(0);
  transition: none;
}

@media (max-width: 768px) {
  .hc-slide .zigzag-list__image-container,
  .hc-slide .zigzag-list__image {
    height: var(--hc-slide-height-mobile);
  }

  .hc-slide .zigzag-list__content {
    padding: 20px 24px;
    min-width: 80%;
    max-width: 90%;
  }

  .hero-dynamic .zigzag-list__image {
    max-height: 100%;
  }

  .hc-indicators {
    bottom: 6px;
  }
}


/* ==============================================
    MEDIA-ICONS
   ============================================== */

    .icon-wrapper {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin-top: 4rem;
       
    }

    .media_icon {
        width: 50px;
        background-color: rgb(44, 216, 216)
    }

    .fab, .fa-brands {
        font-size: 50px;
        text-align: center;
    }

    .icon-wrapper a {
        text-decoration: none;
        margin: 5px;
        color: white;
        /*color: #005b9e;*/
       transition: .2s ease;
    }

.icon-wrapper a:hover {
    transform: translateX(2px);
}

.layout__row--background-light:has(.media-footer) {
background-color: #1a2540;
}




*/
/* ==============================================
ARTIKLER
   ============================================== */


.aktuelt .article-card__content { 
    background-color: #f8f6f1 !important;
    padding: 1rem 1.5rem;
    border-radius: 10px;
}

.article-card__body-text {
    padding: 10px;
}

.article-card__heading {
    font-size: 2rem;
}

.aktuelt .article-card__text {
    font-size: 1.8rem;
}

.article-card__read-more {
    color: #fff !important;
    padding: 10px;
    text-align: center;
    background-color: #1a2540;
    font-size: 1.8rem;
    font-weight: 600;
    border-radius: 4px;
}

.article__share-icons {
display: none;
}

.aktuelt .article-list-category {
background-color: #f8f6f1;
}

*/










/* =========================
       BUTTON
   ========================= */
.sor-btn-wrapper {
  display: flex;
      justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  z-index: 1;
}


  .soro-btn-primary {
    background: #1a2540;
    color: #ffd400;
    padding: 10px 25px;
    border: 1px solid #f8f6f1;
    border-radius: 3px;
    font-size: 1.8rem;
    text-align: center;
    transition: 0.3s;
    max-width: 300px;
    cursor: pointer;
}


    .soro-btn-primary:hover {
        background: #1a2540;
        border: 1px solid #f8f6f1;
        color: #ffd400;
        transform: none;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    .soro-btn-primary a {
        text-decoration: none;
        color: inherit;
        font-weight: 500;
        letter-spacing: 0.1rem;
    }

.soro-btn-primary a:hover {
       text-decoration: none;
}


.sor-btn-wrapper {
  display: flex;
      justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  z-index: 1;
}


  .sor-btn-primary {
        background: #154389;
        color: white;
        padding: 10px 25px;
        border: 1px solid #154389;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        transition: 0.3s;
        max-width: 300px;
        cursor: pointer;
    
    }
    .sor-btn-primary:hover {
        background: #154389;
        border: 1px solid #154389;
        color: white;
        transform: none;
    }
    .sor-btn-primary a {
        text-decoration: none;
        color: inherit;
        font-weight: 500;
        letter-spacing: 0.1rem;
    }

.sor-btn-primary a:hover {
       text-decoration: none;
}



  .iframe-wrapper--regular{
        display: flex;
        justify-content: center;
       width:100%;
       max-width: min(90vw, 500px);
    }

 .home .educate .iframe-wrapper--regular {
    max-width: min(90vw, 750px);
    margin-top: 10px;
}

  .iframe-wrapper--short{
        display: flex;
        justify-content: center;
       width:500px;
       max-width:90vw;

    }
    
  .iframe-wrapper--regular  iframe {
        aspect-ratio: 16 / 9 ;
        width: 100% !important;
        height: auto !important;
    }

   .iframe-wrapper--short iframe {
        aspect-ratio: 9 / 16 ;
        width: 100% !important;
        height: auto !important;
    }


/* =========================
HVEM ER VI?
   ========================= */
.about .cta-box {
   box-shadow: none;
}

.about .grid__sm--4 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.about .cta-box__button {
    background-color: #f8f6f1;
    color: #154389;
    font-size: 1.8rem;
    text-align: center;
}

.about .cta-box__content-container {
 background-color: #f8f6f1;
height: 120px;
}

.about .layout__row--background-light {
    background: var(--soro-cream) !important;
    padding: 6rem 0 !important;
}

/* =========================
                  FN og FOKUS
   ========================= */
.fn .datalist-card {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}


.fn .datalist-card__button {
    background-color: #ffffff;
    color: #154389 !important;
    font-size: 1.8rem;
}

.fn .grid__sm--3 {
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

.fn-kontakt .grid__sm--2 {
        grid-template-columns: 1fr;
}


.fn-kontakt .article-card-small__image-container {
display:none;
}
.fn-kontakt .article-card-small {
    background-color: #eaedf5;
}

.fn-kontakt .article-card-small__read-more {
    color: #4e4e4e;
    font-size: 1.8rem;
}


.fn-arkiv .article-card-small__image-container {
display:none;
}

.fn-arkiv  .grid__sm--2 {
        grid-template-columns: 1fr;
    }


.fn-arkiv .article-card-small {
    background-color: #eaedf5;
}


.fn-arkiv .article-card-small__read-more {
    color: #4e4e4e;
    font-size: 1.8rem;
}

 
.fokus-kontakt .article-card-small__image-container {
display:none;
}

.fokus-kontakt .grid__sm--2 {
        grid-template-columns: 1fr;
    }


.fokus-kontakt .article-card-small {
    background-color: #eaedf5;
}


.fokus-kontakt .article-card-small__read-more {
    color: #4e4e4e;
    font-size: 1.8rem;
}


.fokus-arkiv .article-card-small__image-container {
display:none;
}

.fokus-arkiv  .grid__sm--2 {
        grid-template-columns: 1fr;
    }


.fokus-arkiv .article-card-small {
    background-color: #eaedf5;
}


.fokus-arkiv .article-card-small__read-more {
    color: #4e4e4e;
    font-size: 1.8rem;
}

/* =========================
                   VÅRE MÅL
   ========================= */


.program .grid__sm--3 {
   grid-template-columns: 1fr;
}


.program .panel-box{
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
height: 395px;
}

.program .panel-box__header{
  background-color: white;
order: 2;
}

.program .panel-box__body{
display: contents;
}
.program .panel-box__content {
  order: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}


.program .panel-box__image {
    margin-top: 10px;
}


.program .panel-box__heading {
    text-align: center;
}

.program h2.panel-box__heading {
      font-weight: 400;
      font-size: 2.2rem;
      color: #2a255f;
}


.program .image-list__button {
   width: 100%;
   text-align: center;
   margin: 5px auto;
   font-size: 1.8rem;

}


.program .accordion {
     border-radius: 0px 0px 5px 5px;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px;
    top: -39px;
    position: relative;
    border-top: none;
}

.program .accordion__header {
background-color: white;
}


/* =========================
SOROPTIMA
   ========================= */


.medlemsblad .panel-box__header {
background-color: #ffffff;
}


/* =========================
AKTUELT
   ========================= */


.aktuelt .article-card {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.aktuelt .article-card__read-more {
  background-color: #17378d;
}





/* =========================
STØTT-OSS
   ========================= */


.bidra .grid__sm--3 {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}


.bidra .panel-box{
 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
 
}


.bidra .panel-box__header{
  background-color: white;
}

.bidra h2.panel-box__heading {
      font-weight: 400;
      font-size: 2.2rem;
      color: #2a255f;
}


/* =========================
KONTAKT
   ========================= */


.kontakt .contact {
    background-color: #ffffff;
}

.kontakt .grid__md--2 {
border: 1px solid #36363626;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

.kontakt .contact__item-heading {
    color: #17378d;
   font-size: 1.8rem;
     background-color: #ffffff;
}
.kontakt .contact__item-description--small {
    font-size: 1.5rem;
        color: #17378d;
}

.kontakt .contact__item {
    font-size: 1.8rem;
}
.kontakt .contact__form-container {
    padding: 10px;
    background-color: #ffffff;
}
/* =========================
STYREOVERSIKT
   ========================= */

.board .grid__sm--3 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.board .board-member__top {
   background-image: unset;
}

.board .board-member__role {
  font-size: 1.8rem;
  color: #363636;
 }


/* =========================
HVA GJØR VI?
   ========================= */


.prosjekt {
    background-color: white;
}


.prosjekt .layout__row--background-light:has(.awards) {
    background-color: var(--soro-cream);
    padding-top: 20px;
    padding-bottom: 45px;
}


.prosjekt .awards .page-title {
background-color: transparent;
}

.prosjekt .zigzag-list-angle {
margin: unset;
}

.fokus-fn .grid__sm--3 {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}
.prosjekt .panel-box{
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
background-color: #f8f6f1;
}

.prosjekt .panel-box__header{
  background-color: #f8f6f1;
order: 2;
}


.prosjekt .panel-box__body{
display: contents;
}

/*
.prosjekt .panel-box__image{
    order: 1;
    margin: 0;
    height: 250px;
}
*/


.prosjekt .panel-box__content {
  order: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}


.prosjekt .panel-box__image {
    margin-top: 10px;
}


.prosjekt .panel-box__heading {
    text-align: center;
}

.prosjekt h2.panel-box__heading {
      font-weight: 400;
      font-size: 2.2rem;
      color: #2a255f;
}


.prosjekt .image-list__button {
   width: 100%;
   text-align: center;
   margin: 5px auto;
   font-size: 1.8rem;

}


.prosjekt .layout__row--background-light {
    background-color: #1a2540;
}


/* =========================
SNLA
   ========================= */

.snla .zigzag-list-angle {
margin: unset;
}

.snla .grid__lg--3 {
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.snla .grid__sm--3 {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 1fr;
}

.snla .accordion__header {
background-color: #ffffff;
}

.snla .accordion__heading {
color: #2a255f;
}

.snla h2.accordion__heading {
font-size: 1.8rem;
}
.snla .accordion__icon {
color: #2a255f;
}

.snla .layout__row--background-light {
    padding: 25px;
    background-color: #7A2182;
}

.snla .article-card {
border-color: #7A2182;
}

.snla .article-card__read-more {
  color: #17378D !important;
  background-color: #ffffff;
}
.snla .article-card__content {
border-radius: 4px;
background-color: white;
}

/* =========================
@MEDIA
   ========================= */


@media (max-width: 582px) {
.fn-container {
  display: flex;
 flex-direction: column;
  width: 100%;
align-items: center;
 }
}

@media only screen and (max-width: 768px) {
    .layout__row--xl {
        padding: 0 20px 0 20px;
    }

  .soro-hero-calendar .cta-events__event {
    border-radius: 0;
    border-bottom: 1px solid var(--soro-border);
  }

 .soro-hero-calendar .grid__md--2 li:last-child .cta-events__event {
    border-bottom: none !important;
  }

.soro-hero-calendar .cta-events__date {
flex-direction: row !important;
gap: 1rem;
 } 
}


@media only screen and (max-width: 768px) {
  .soro-hero-calendar .cta-events__event {
    position: relative !important;
    padding-right: 32px !important;
  }

  .soro-hero-calendar .cta-events__event::after {
    content: '→' !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--si-yellow) !important;
    font-size: 16px !important;
  }
}


/* =========================
   Stats
   ========================= */
.layout__row:has(section.metrics) {
  background: var(--soro-white) !important;
  padding: 64px 16px !important;
}

section.metrics .image-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  justify-content: space-evenly;

}

section.metrics .image-list__container {
  display: block !important;
  grid-template-columns: unset !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}

section.metrics .image-list__content {
  overflow: visible !important;
  line-height: normal !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}

section.metrics .image-list__heading {
  font-family: var(--soro-sans) !important;
  font-size: 5.2rem !important;
  font-weight: 700 !important;
  color: var(--soro-navy) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1 !important;
}

section.metrics .image-list__content > div {
  font-family: var(--soro-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--soro-gold) !important;
  margin: 0 !important;
  text-align: center;
}



.firm-department-attribute {
display: none;
}



/* =========================
   Ildrid forslag
   ========================= */

.soro-hero__carousel{
  background:var(--soro-navy);
}

.soro-hero-calendar .cta-events {
max-width: 90vw;
    margin: 0 auto !important;
}

.soro-hero-calendar .grid__md--2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 1200px) {
.soro-hero-calendar .grid__md--2 {
  grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 769px) {
.soro-hero-calendar .grid__md--2 {
  grid-template-columns: 1fr;
gap: 0;
}
}

@media (max-width: 1100px) {
.layout__column--sidebarright-sidebar .layout__column--sectionwrapper {
max-width: 100%;
 }
}