/****************** CSS VARIABLER (farver mv.) ******************/

:root {
  /* Brand-farver */
  --color-brun:      #915A44;
  --color-gylden:    #CB9F56;
  --color-rosa:      #F8F4F2;
  --color-beige:     #E9DCD5;
  --color-sand:      #D8C2AE;
  --color-grey:      #F1EAE3;
  --color-blaa:      #B1C1CB;
  --color-orange:    #BB7A5C;
  --color-lyserod:   #F3E0DA;
  --color-knaekket:  #FFFDFA;
  --color-tekst:     #2E0E04;

  /* Funktionelle farver */
  --color-cross:      #C00000;
  --color-cross-soft: #bb4a4a;
  --color-checkmark:  #52a676;
  --color-placeholder:#a6a6a6;
}


/****************** SECTION-MØNSTER (artikel-fluid) ******************/
/*
   Sådan bruges det i en artikel der skal være fuld bredde:

     <div class="article-fluid">
       <section class="section section-rosa">
         <div class="container">
           ... indhold ...
         </div>
       </section>
       <section class="section section-beige">
         <div class="container">...</div>
       </section>
     </div>

   Artikler UDEN .article-fluid renderes som normalt (Bootstrap container).
*/

/* Aktivér fluid main-body når artiklen pakkes i .article-fluid */
#sp-main-body:has(.article-fluid) > .container,
#sp-main-body:has(.article-fluid) > .container-fluid {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Fjern også padding/margin på artikel-wrapperen så sektioner går edge-to-edge */
.article-fluid,
.item-page:has(> .article-fluid) {
  margin: -15px 0 -15px 0;
  padding: 0;
}

/* Section-base: standard top/bund-padding for fuld-bredde sektioner */
.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Section farve-varianter (bruger CSS-variablerne ovenfor) */
.section-rosa     { background-color: var(--color-rosa); }
.section-beige    { background-color: var(--color-beige); }
.section-brun     { background-color: var(--color-brun); color: #fff; }
.section-sand     { background-color: var(--color-sand); }
.section-grey     { background-color: var(--color-grey); }
.section-blaa     { background-color: var(--color-blaa); }
.section-orange   { background-color: var(--color-orange); color: #fff; }
.section-lyserod  { background-color: var(--color-lyserod); }
.section-white    { background-color: #fff; }
.section-knaekket { background-color: var(--color-knaekket); }
.section-gylden   { background-color: var(--color-gylden); color: #fff; }


/********************** General farve og størrelse *************************/

#sp-header {
  background-color: #ffffff;
  height: 80px;
}

#sp-menu {
  padding-right: 30px;
}

#sp-main-body {
  background-color: var(--color-knaekket);
}

@media only screen and (min-width: 768px) {
  #sp-main-body {
    min-height:calc(100vh - 280px);
  }
}

@media only screen and (min-width: 768px) {
  .min-height-special:not(.layout-edit) #sp-main-body {
    min-height: 400px !important; /* eller den højde du ønsker */
  }
}


#sp-footer {
  background-color: var(--color-grey);
  
}

/* Fjerner margin i toppen af SP-MAIN-BODY */
.article-details .article-can-edit {
  margin-bottom: 0px;
  display: none !important;
}

/*********************** Tekst formater og størrelser ********************/

p {
  color: var(--color-tekst);
}

li {
  color: var(--color-tekst);
}

p.big {
  line-height: inherit;
}

p.yellow {
  color: var(--color-gylden);
}

p.white {
  color: #ffffff;
}

.white {
  color: #ffffff !important;
}

a, a:active, a:hover, a:visited {
  color: var(--color-gylden);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald";
  color: var(--color-gylden);
}

h1.paragraph, h2.paragraph, h3.paragraph, h4.paragraph, h5.paragraph, h6.paragraph {
  font-family: "Montserrat";
}

h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
  color: #ffffff;
}

p.black, p span.black, h1.black, h2.black, h3.black, h4.black, h5.black, h6.black, a.black {
  color: var(--color-tekst);
}

p.brun, p span.brun, h1.brun, h2.brun, h3.brun, h4.brun, h5.brun, h6.brun, a.brun, a.span.brum {
  color: var(--color-brun);
}


@media only screen and (min-width: 576px) {
  p, a, li, button, .btn, #accordionfaq .accordion-button, #accordionfaq-beige .accordion-button, #accordionfaq-beige-two .accordion-button, p a {
    font-family: "Montserrat";
    font-size: 1.2rem;
  }


  p.special, p span.special {
    font-family: "Tangerine";
    font-size: 2.5rem;
    line-height: 2.7rem;;
  }

  p.big, p span.big, p.big a {
    font-size: 1.5rem;
    /*font-weight: bold;*/
  }

  p.big-special, p span.big-special {
    font-family: "Tangerine";
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 3.4rem;
  }

  p.small, p span.small {
    font-size: 1rem;
  }

  p.small-special, p span.small-special {
    font-size: 1.8rem;
    font-family: "Tangerine";
    line-height: 2rem;
  }

  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h1.special, h1 span.special {
    font-family: "Tangerine";
    font-size: 6rem;
    font-weight: bold;
  }

  h2.special, h2 span.special {
    font-family: "Tangerine";
    font-size: 4.5rem;
    font-weight: bold;
  }

  h3.special, h3 span.special {
    font-family: "Tangerine";
    font-size: 3.5rem;
    font-weight: bold;
  }

  /* Blog side overskrifter på blogs */
  .item-content h2, .item-content h2 a {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 575px) {
  p, a, li, button, .btn, #accordionfaq .accordion-button, #accordionfaq-beige .accordion-button, #accordionfaq-beige-two .accordion-button, p a {
    font-family: "Montserrat";
    font-size: 1rem;
  }

  p.special, p span.special {
    font-family: "Tangerine";
    font-size: 2rem;
    line-height: 2.2rem;
  }

  p.big, p span.big, p.big a{
    font-size: 1.4rem;
    /*font-weight: bold;*/
  }

  p.big-special, p span.big-special {
    font-family: "Tangerine";
    font-size: 2.2rem;
    font-weight: bold;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }

  h1.special, h1 span.special {
    font-family: "Tangerine";
    font-size: 4rem;
    font-weight: bold;
  }

  h2.special, h2 span.special {
    font-family: "Tangerine";
    font-size: 3rem;
    font-weight: bold;
  }
}



ul.li-mt-3 li, ol.li-mt-3 li {
  margin-top: 0.5rem;
}

ul.li-mt-5 li, ol.li-mt-5 li {
  margin-top: 1.8rem;
}

/**** BULLET-LISTER MED IKONER ****/

/* Fælles base for alle ikon-bullets med absolut placering (ikon til venstre for tekst) */
ul.redcross,
ul.checkmarks,
ul.checkmarks-box,
ul.greenmarks,
ul.redmarks,
ul.star,
ul.leaf,
ul.waterdrop,
ul.mixed,
ul.diamant {
  list-style-type: none;
  padding: 0;
}

ul.redcross       li,
ul.checkmarks     li,
ul.checkmarks-box li,
ul.greenmarks     li,
ul.redmarks       li,
ul.star           li,
ul.leaf           li,
ul.waterdrop      li,
ul.mixed          li,
ul.diamant        li {
  position: relative;
  padding-left: 40px;
}

ul.redcross       li::before,
ul.checkmarks     li::before,
ul.checkmarks-box li::before,
ul.redmarks       li::before,
ul.star           li::before,
ul.leaf           li::before,
ul.waterdrop      li::before,
ul.mixed          li::before,
ul.diamant        li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24px;
}

/* Ikon + farve pr. variant */
ul.redcross       li::before { content: "\2716"; color: var(--color-cross); }   /* ✖ */
ul.checkmarks     li::before { content: "\2714"; color: var(--color-tekst); }   /* ✔ */
ul.checkmarks-box li::before { content: "☑\FE0F"; }                             /* ☑️ */
ul.redmarks   li::before { content: "\274C"; color: var(--color-cross-soft); }  /* ❌ */
ul.star       li::before { content: "\2728"; color: var(--color-gylden); }      /* ✨ */
ul.leaf       li::before { content: "🌿"; }
ul.waterdrop  li::before { content: "\1F4A7"; }                                 /* 💧 */
ul.diamant    li::before { content: "❖"; color: var(--color-tekst); font-size: 28px; }

/* Greenmarks: hvidt flueben i grøn afrundet boks (særlig styling) */
ul.greenmarks li::before {
  content: "\2714";
  color: #fff;
  background-color: var(--color-checkmark);
  border-radius: 20%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
}

/* Mixed: ikon vælges pr. li-class */
ul.mixed li.pill::before      { content: "\1F48A"; }  /* 💊 */
ul.mixed li.waterdrop::before { content: "\1F4A7"; }  /* 💧 */
ul.mixed li.leaf::before      { content: "\1F33F"; }  /* 🌿 */


/**** Inline-block bullets (bruger margin-left negativ trick — ingen padding/positioning) ****/

ul.yellow,
ul.center li,
ul.arrow  li {
  list-style: none;
}

ul.yellow li         { color: var(--color-gylden); }
ul.yellow li::before { content: "\2022"; color: var(--color-gylden); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

ul.center li::before { content: "\2022"; font-weight: bold; display: inline-block; width: 2em; margin-left: -2em; }

ul.arrow  li::before { content: "\2713"; color: #000; display: inline-block; width: 2em; margin-left: -2em; }


@media only screen and (max-width: 575px) {
  h2 {
    font-size: 2.2rem;
  }

  h2.special, h2 span.special {
    font-family: "Tangerine";
    font-size: 3.5rem;
    font-weight: bold;
  }
}

.h-60 {
  height: 60% !important;
}


/****** BLOG TYPOGRAPHY ******/
.special {
  font-family: "Tangerine";
}

.yellow {
  color: var(--color-gylden);
}

/********************* HEADER **************************/
#sp-header {
  padding-left: 20px !important;
  padding-right: 20px;
}


/*** MENU ***/
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li > a:active {
  font-size: 1.2rem;
  color: var(--color-gylden);
  font-family: "Oswald" !important;
  text-transform: uppercase;

}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
  font-size: 1.2rem;
  color: var(--color-gylden);
  font-family: "Oswald";
  text-transform: uppercase;
}


.sp-megamenu-parent {
  padding: 7px 10px 0 0;
}


.sp-megamenu-parent>li>a, .sp-megamenu-parent>li span {
  padding: 0 12px;
}


.sp-dropdown {
  margin-top: -7px !important;
}

/** Submenu **/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover, .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:active {
  color: var(--color-gylden);
}

.sp-megamenu-parent>li:hover>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
  color: var(--color-gylden);
}

.sp-dropdown-mega li.menu_item a {
    color: var(--color-gylden);
}

@media only screen and (max-width: 992px) {
  #sp-menu {
    padding-top: 5px;
  }
}

/* Bruger ikon mobil */
.bruger-ikon-modul {
  padding-top: 4px;
}

@media only screen and (max-width: 575px) {
  .bruger-ikon {
    color: var(--color-gylden);
    font-size: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .bruger-ikon {
    color: var(--color-gylden);
    font-size: 22px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .bruger-ikon {
    color: var(--color-gylden);
    font-size: 22px;
  }
}


.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  font-size: 1.2rem;
}

.mit-omraade .fa-user {
  padding-right: 8px;
}

.mit-omraade span::after {
  display: none;
}

.mit-område .sp-dropdown {
  min-width: 200px !important;
  width: auto !important;
}

/* Jeg tilbyder menu */
.menu-text {
  font-size: 0.9rem;
}



/********************** OFFCANVAS ************************/
.offcanvas-menu .offcanvas-inner ul.menu>li a:hover, .offcanvas-menu .offcanvas-inner ul.menu>li a:focus, .offcanvas-menu .offcanvas-inner ul.menu>li span:hover, .offcanvas-menu .offcanvas-inner ul.menu>li span:focus {
  color: var(--color-gylden);
}


/** Viser alle submenu items i offcanvas **/
.menu-parent .menu-child {
    display: block !important;
}

.menu-parent .menu-toggler {
    display: none !important;
}


/********************** FOOTER **************************/
#sp-footer a, #sp-footer a:hover, #sp-footer a:active {
  color: var(--color-gylden);
}


/********************* CONTENT **************************/

/*** BACKGROUNDS ***/
.bg-grey {
  background-color: var(--color-grey);
}

.bg-lyserod {
  background-color: var(--color-lyserod);
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-white-knaekket {
  background-color: var(--color-knaekket);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-brun {
  background-color: var(--color-brun);
}

.bg-blaa {
  background-color: var(--color-blaa);
}

.bg-gylden {
  background-color: var(--color-gylden);
}

.bg-sand {
  background-color: var(--color-sand);
}

.bg-beige {
  background-color: var(--color-beige);
}

.bg-rosa {
  background-color: var(--color-rosa);
}



/* Pil billede */
@media only screen and (min-width: 992px) {
  .image-pil {
    width: auto;
    height: auto;
}
}

/* Pil billede */
@media only screen and (max-width: 991px) {
  .image-pil {
    max-width: 150px;
    height: auto;
  }
}


/* Gul border */
.yellow-border {  
  border: 1px solid var(--color-gylden);
  border-radius: 50px;
}

/* Brun border */
.brun-border {  
  border: 1px solid var(--color-brun);
  border-radius: 50px;
}

/* Brun border */
.brun-border-no-radius {  
  border: 1px solid var(--color-brun);
}


/* Billede i nederste venstre hjørne */
@media only screen and (min-width: 768px) {
  .image-left-bottom {
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .image-left-bottom {
    background-image: none !important;
  }
}

/** FORSIDE **/

/**** CARDS FORSIDE ****/
.card-forside .card {
  background-color: transparent;
  border: none;
}

@media only screen and (min-width: 1200px) {
  .card-forside .card-body {
    min-height: 300px;
  }
}


.card-forside .card-header {
  background-color: transparent;
  border: none;
}

/**** Card images *****/
/* Basis styling der gælder for alle skærmstørrelser */
.image-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.img-cover {
  width: 100%;
  object-fit: cover;
}

/* Specifik styling for større skærme */
@media only screen and (min-width: 992px) {
  .image-container {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
  }
  
  .img-cover {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
}


/*** COVER FORSIDE ***/

/* Fælles regler */
.cover-image-background-forside {
  background-position: center top;
  background-repeat: no-repeat;
}

/* Box-bredde: 100% under md, 50% fra md og opad */
.cover-box-forside { width: 100%; }
@media (min-width: 768px) {
  .cover-box-forside { width: 50%; }
}

/* Image: cover/min-height under lg, 100% fra lg og opad */
@media (max-width: 991px)  { .cover-image-background-forside { background-size: cover; min-height: 400px; } }
@media (min-width: 992px)  { .cover-image-background-forside { background-size: 100%; } }
@media (min-width: 1200px) { .cover-image-background-forside { height: calc(100vw * 1050 / 1920); } }

/* Position-override på sm */
@media (min-width: 576px) and (max-width: 767px) {
  .cover-image-background-forside { background-position: right top; }
}

/* Tekst-padding pr. breakpoint (ikke uniform — kan ikke kollapses uden adfærdsændring) */
@media (max-width: 575px)                          { .cover-box-forside-text { padding: 20px; } }
@media (min-width: 576px) and (max-width: 767px)   { .cover-box-forside-text { padding: 40px; } }
@media (min-width: 768px) and (max-width: 991px)   { .cover-box-forside-text { padding: 40px; padding-left: calc(100% - 384px); } }
@media (min-width: 992px) and (max-width: 1199px)  { .cover-box-forside-text { padding-left: calc(100% - 496px); } }
@media (min-width: 1200px) and (max-width: 1399px) { .cover-box-forside-text { padding-left: calc(100% - 600px); padding-right: 30px; } }
@media (min-width: 1400px)                         { .cover-box-forside-text { padding-left: calc(100% - 700px); padding-right: 20px; } }

.cover-box-brun {
  background-color: rgba(145,90,68,0.7);
}

.height-inherit {
  min-height: inherit;
  height: inherit;
}



/* Cover-bokse — samme i alle breakpoints */
.cover-box       { padding: 1.5rem; }
.cover-box-white { padding: 1.5rem; background-color: rgba(255, 253, 250, 0.9); }

/* Cover-image-background varianter (-, -left, -right) deler de fleste regler */
.cover-image-background,
.cover-image-background-left,
.cover-image-background-right {
  background-repeat: no-repeat;
}

@media only screen and (min-width: 992px) {
  .cover-image-background,
  .cover-image-background-left,
  .cover-image-background-right {
    background-position: center top;
    background-size: 100%;
    height: calc(100vw * 1050 / 1920);
  }
}

@media only screen and (max-width: 991px) {
  .cover-image-background,
  .cover-image-background-left,
  .cover-image-background-right {
    background-size: cover;
    min-height: 400px;
  }
  .cover-image-background       { background-position: center top; }
  .cover-image-background-left  { background-position: 10% top;    }
  .cover-image-background-right { background-position: right top;  }
}

.image-background {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.image-background-tilbyder {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
}

/*** Ansøgning takkeside ***/
@media only screen and (min-width: 993px) {
  .tak-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    height:calc(100vw * 1050.0 / 1920.0);
  }

  .tak-box {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.7);
  }
}

@media only screen and (max-width: 992px) {
  .tak-image-background {
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
  }

  .tak-box {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.7);
  }
}



/*** Baggrundsbillede i div som ikke fylder hele skærmen***/

@media only screen and (max-width: 575px) {
  .small-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 250px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .small-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 300px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .small-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 400px;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1199px) {
  .small-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 270px;
  }
}

@media only screen and (min-width: 1200px) {
  .small-image-background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 300px;
  }
}

/** Splash som baggrund **/
.blue-splash-top {
  background-image: url('/../../images/hjemmeside/11_splash_small.png');
  background-repeat: no-repeat;
  background-position: right top;
}

.blue-splash-bund {
  background-image: url('/../../images/hjemmeside/11_splash_small.png');
  background-repeat: no-repeat;
  background-position: left bottom;
}


/*** Indhold i to kolonner ***/
@media only screen and (min-width: 993px) {
  .custom-gap-2 {
    column-count: 2;
    column-gap: 50px;
  }
}

/**** Forside 2 kolonner ****/
.height-2-image {
  height: 100%;
}

.image-two-column {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  aspect-ratio: 1 / 0.56;
}

/*
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image-2-column-subtext {
    height: 330px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .image-2-column-subtext {
    height: 300px;
  }
}

@media only screen and (min-width: 1400px) {
  .image-2-column-subtext {
    height: 280px;
  }
}
*/

/**** HVad vil jeg virkelig ****/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hvad-vil-jeg-virkelig-card h2 {
    font-size: 2.75rem;
  }
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
  .kontakt-box {
    height: 450px;
  }
}

@media only screen and (min-width: 992px) {
  .kontakt-box {
    height: 380px;
  }
}

/**** Splash baggrund ****/
div.splash-image {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
}

.flower-image {
  position: absolute;
  left: 30px;
  bottom: 20px;
  z-index: 1;
}

/**** CARD ****/
.card-footer {
  background-color: inherit;
  border: none;
}

/* Card overskriftsbilleder */
.card-picture {
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

/* Images */
@media only screen and (min-width: 768px) {
  .w-md-50 {
    width: 50% !important;
  }

  .w-md-33 {
    width: 33% !important;
  }

  .w-md-25 {
    width: 25% !important;
  }
}


@media only screen and (min-width: 993px) {
  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-33 {
    width: 33% !important;
  }

  .w-lg-25 {
    width: 25% !important;
  }
}

/***** ACCORDION FAQ ******/

/* Tema-variabler pr. accordion-id (default: grey/gylden) */
#accordionfaq         { --acc-bg: var(--color-grey);  --acc-color: var(--color-gylden); }
#accordionfaq-beige,
#accordionfaq-beige-two { --acc-bg: var(--color-beige); --acc-color: var(--color-brun); }

/* Fælles regler for alle 3 accordions */
:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-item {
  margin-top: 10px;
  background-color: var(--acc-bg);
}

:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-item .accordion-button,
:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-button:not(.collapsed) {
  background-color: var(--acc-bg);
}

:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-button {
  color: var(--acc-color);
  font-weight: bold;
}

:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-button:not(.collapsed),
:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-button:focus {
  box-shadow: none;
  border: 0px;
  color: var(--acc-color);
}

:is(#accordionfaq, #accordionfaq-beige, #accordionfaq-beige-two) .accordion-button::after {
  background-image: none;
  content: "V";
}

/* Rosa-variant af items inden i #accordionfaq */
#accordionfaq .accordion-item-rosa,
#accordionfaq .accordion-item-rosa .accordion-button {
  background-color: var(--color-rosa);
}

/* To-linjes header (kun -beige-two) */
#accordionfaq-beige-two .accordion-button {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}
#accordionfaq-beige-two .accordion-title {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
}
#accordionfaq-beige-two .accordion-title .main-title    { line-height: 1.3; }
#accordionfaq-beige-two .accordion-title .recommendation {
  margin-top: 5px;
  font-size: 0.85em;
  font-weight: normal;
  opacity: 0.8;
}




/**** BLOG ****/
.britta-blog-item .card-body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.britta-blog-item .card {
  padding: 10px;
}

.britta-blog-item img {
  object-fit: cover;
  object-position: top left;
  max-width: 100%;
  height: auto;
}

.brittablog-header h2 a {
  font-family: "Oswald";
  font-size: 2rem;
  line-height: 2.3rem;
}


@media only screen and (max-width: 575px) {
  .britta-blog-article h1, .britta-blog-article h2 {
    font-size: 1.75rem;
  }

  .brittablog-header h2 a {
    font-family: "Oswald";
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}

@media only screen and (min-width: 576px) {
  .britta-blog-article h1, .britta-blog-article h2 {
    font-size: 2.25rem;
  }

  .brittablog-header h2 a {
    font-family: "Oswald";
    font-size: 2rem;
  }

  .brittablog-header h2 {
    line-height: 2.3rem;
  }
}

/****** INTRO TEXT ********/

/* Antag at vi har 3 forskellige skærmstørrelser: stor, medium og lille */
.introtext-xxl { display: none; }
.introtext-xl { display: none; }
.introtext-lg { display: none; }
.introtext-md { display: none; }
.introtext-sm { display: none; }
.introtext-xl { display: none; }

.introtext-xxl p:last-child, .introtext-xl p:last-child, .introtext-lg p:last-child, .introtext-md p:last-child, .introtext-sm p:last-child, .introtext-xs p:last-child  { margin-bottom: 0px;}

/* XL */
@media only screen and (min-width: 1400px) {
  .introtext-xxl { display: block; }
}

/* XL */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .introtext-xl { display: block; }
}

/* LG */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .introtext-lg { display: block; }
}

/* MD */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .introtext-md { display: block; }
}

/* For små skærme */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .introtext-sm { display: block; }
}

@media only screen and (max-width: 575px) {
  .introtext-sm { display: block; }
}

/********************* BUTTONS ***************************/

.btn-primary {
  color: #ffffff !important;
  background-color: var(--color-gylden) !important;
}

.btn-secondary {
  color: #ffffff !important;
  background-color: var(--color-gylden) !important;
}

.mikropauser .btn-primary {
  color: #ffffff !important;
  background-color: var(--color-brun) !important;
}

/**** Call to action buttons ****/

/* Fælles base — padding, border-bredde, fontvægt */
.btn-cta,
.btn-cta-white, .btn-cta-white-fill,
.btn-cta-yellow, .btn-cta-black,
.btn-cta-brun, .btn-cta-rosa, .btn-cta-beige {
  padding: 1rem 1.75rem !important;
  border: 3px solid !important;
  font-weight: bold !important;
}

/* Pr.-variant: kun farve/baggrund er forskelligt */
.btn-cta            { color: var(--color-gylden) !important; border-color: var(--color-gylden) !important; }
.btn-cta-white      { color: #fff !important;                border-color: #fff !important; }
.btn-cta-white-fill { color: var(--color-tekst) !important;  background-color: #fff !important;                border-color: #fff !important; }
.btn-cta-yellow     { color: #fff !important;                background-color: var(--color-gylden) !important; border-color: var(--color-gylden) !important; }
.btn-cta-black      { color: var(--color-tekst) !important;  border-color: var(--color-tekst) !important; }
.btn-cta-brun       { color: #fff !important;                background-color: var(--color-brun) !important;   border-color: var(--color-brun) !important; }
.btn-cta-rosa       { color: var(--color-gylden) !important; background-color: var(--color-rosa) !important;   border-color: var(--color-rosa) !important; }
.btn-cta-beige      { color: #000 !important;                background-color: var(--color-beige) !important;  border-color: var(--color-beige) !important; }

.btn {
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-hover-border-color: transparent;
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    /*font-size: var(--bs-btn-font-size);*/
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/************************* GURU PRO *****************************/
@media (min-width: 992px) {
  .gru-course-detail.moderm-layout .course-content {
      flex-basis: 100%;
  }
}

.lesson-description {
  color: #6c757d;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-top: 0.25rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*-webkit-line-clamp: 2;  /* begræns til 2 linjer */
  -webkit-box-orient: vertical;
}

.lesson-title {
  display: inline-block;
  word-break: break-word;
  max-width: 100%;
}

.lesson-thumbnail {
  object-fit: cover;
  border-radius: 4px;
}

.lesson-thumbnail-container {
  /*min-width: 80px;
  min-height: 60px;*/
  background-color: #f8f9fa; /* Lysegrå baggrundsfarve som fallback */
}

@media (max-width: 767.98px) {
  .lesson-description {
      padding-left: 0 !important;
  }
}

/************* GURU modal view *****************/
/* Skjul description panel permanent */

/*.guru-lesson .guru-lesson-nav-description {
  display: none !important;
}*/

@media (min-width: 768px) {
  .guru-lesson .guru-lesson-nav-tab .guru-lesson-nav-tabitem {
    flex-basis: 100% !important;
  }
}


.guru-lesson-header-label {
  font-weight: 600;
  font-size: 1.3rem;
}

@media (min-width: 992px) {
  .guru-lesson-header-label {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 576px) {
  .guru-britta-content p, .guru-britta-content a, .guru-britta-content ul, .guru-britta-content button {
    font-family: "Montserrat" !important;
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
    margin-bottom: 1rem !important;
  }

  .guru-britta-content li {
    font-family: "Montserrat" !important;
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
    margin-bottom: 0.5rem !important;
  }
}

@media only screen and (max-width: 575px) {
  .guru-britta-content p, .guru-britta-content a, .guru-britta-content ul, .guru-britta-content button {
    font-family: "Montserrat" !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .guru-britta-content li {
    font-family: "Montserrat" !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

.guru-britta .guru-lesson-nav-module {
  color: #000;
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
}

.guru-britta-nav .guru-lesson-nav-list a {
  font-size: 1rem;
}

ul .guru-lesson-nav-list {
  margin-bottom: 40px;
}

/* Custom CSS for mycourses.php template override */

/* Custom CSS for mycourses.php template override */

/* Table Layout */
.gru-tbl-list {
  border-collapse: separate !important; 
  border-spacing: 0 15px !important;
}

/* Course Rows */
div.guru_row.gru-tbl-row {
  border: none !important;
  margin-bottom: 15px !important;
  background-color: transparent !important;
}

/* Remove borders between rows */
div.uk-table.uk-table-striped.gru-tbl-list div.guru_row.gru-tbl-row {
  border-bottom: none !important;
}

/* Remove striping from table */
.uk-table-striped tbody tr:nth-of-type(odd),
.uk-table-striped tbody tr {
  background: transparent !important;
}

/* Image container styling */
.guru-course-thumb-container {
  padding: 10px;
}

/* Course thumbnail image */
.guru-course-thumb {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Progress bar container styling */
.progress-bar-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

/* Progress bar wrapper */
.progress-bar-wrapper {
  width: 100%;
}

/* Progress bar styling */
.mycourse-progress {
  background-color: #f0f0f0;
}

/* Progress bar color */
.mycourse-progress-bar {
  background-color: var(--color-gylden) !important;
}

/* Column widths */
.col-width-30 {
  width: 30%;
}

.col-width-70 {
  width: 70%;
}

/* Message for no courses */
.guru-no-courses-message {
  text-align: center;
  padding: 20px;
  background-color: transparent;
}



/************************** CONVERT FORMS ******************************/

/**** Gule farver ****/
.brittalolk .cf-control-input input[type="text"], .brittalolk .cf-control-input input[type="email"] {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid 1px #000000;
  border-radius: 0px;
}

.brittalolk .cf-control-input textarea {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid 1px #000000;
  border-radius: 0px;
}

.brittalolk  .cf-control-input ::placeholder {
  color: var(--color-gylden);
  font-size: 1rem;
  font-style: italic;
}

.brittalolk .cf-control-group {
  margin-top: 1.5rem;
}

.brittalolk .cf-control-input-desc {
  color: var(--color-gylden) !important;
}

@media only screen and (max-width: 575px) {
  .brittalolk .cf-label {
    font-size: 1rem !important;
  }
}

@media only screen and (min-width: 576px) {
  .brittalolk .cf-label {
    font-size: 1.2rem !important;
  }
}


/**** Brune farver ****/
.brittalolk-brun .cf-control-input input[type="text"], .brittalolk-brun .cf-control-input input[type="email"], .brittalolk-brun .cf-control-input input[type="tel"] {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid 1px #000000;
  border-radius: 0px;
}

.brittalolk-brun .cf-control-input textarea {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid 1px #000000;
  border-radius: 0px;
}

.brittalolk-brun  .cf-control-input ::placeholder {
  color: var(--color-placeholder);
  font-size: 1rem;
  font-style: italic;
}

.brittalolk-brun .cf-control-group {
  margin-top: 1.5rem;
}

.brittalolk-brun .cf-control-input-desc {
  color: var(--color-brun) !important;
}

@media only screen and (max-width: 575px) {
  .brittalolk-brun .cf-label {
    font-size: 1rem !important;
  }
}

@media only screen and (min-width: 576px) {
  .brittalolk-brun .cf-label {
    font-size: 1.2rem !important;
  }
}



/************************** RS FORM ******************************/

/* Fonts mv. i forms */
@media only screen and (min-width: 575px) {
  .britta-form .form-label, .britta-form #send {
    font-family: "Montserrat";
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 575px) {
  .britta-form .form-label, .britta-form #send {
    font-family: "Montserrat";
    font-size: 1rem;
  }
}

.britta-form #send {
  background-color: var(--color-gylden);
  border-color: var(--color-gylden);
  color: #ffffff;
  font-weight: bold;
  /*padding: 1rem;*/
}


/* Ansøgning til soul support */

#ansog-sensitive input[type="text"], #ansog-sensitive input[type="tel"], #ansog-sensitive input[type="email"], #ansog-sensitive textarea {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid 1px #000000;
  background-color: rgba(255,255,255,0);
  border-radius: 0px;
}

#ansog-sensitive ::placeholder {
  color: var(--color-gylden);
  font-size: 1rem;
  font-style: italic;
}

#ansog-sensitive .rsform-block {
  margin-bottom: 3rem !important;
}

#ansog-sensitive #send {
  background-color: var(--color-gylden);
  border-color: var(--color-gylden);
  color: #ffffff;

}

/*** Spacing utilities — udvider Bootstrap 5 med "-6" (4rem) ***/

.mt-6 { margin-top: 4rem; }
.mb-6 { margin-bottom: 4rem; }
.pt-6 { padding-top: 4rem; }
.pb-6 { padding-bottom: 4rem; }
.p-6  { padding: 4rem; }

@media (min-width: 992px) {
  .mt-lg-6 { margin-top: 4rem; }
  .mb-lg-6 { margin-bottom: 4rem; }
  .pt-lg-6 { padding-top: 4rem; }
  .pb-lg-6 { padding-bottom: 4rem; }
  .p-lg-6  { padding: 4rem; }
}

@media (min-width: 1200px) {
  .mt-xl-6 { margin-top: 4rem; }
  .mb-xl-6 { margin-bottom: 4rem; }
  .pt-xl-6 { padding-top: 4rem; }
  .pb-xl-6 { padding-bottom: 4rem; }
  .p-xl-6  { padding: 4rem; }
}

@media (min-width: 1400px) {
  .mt-xxl-6 { margin-top: 4rem; }
  .mb-xxl-6 { margin-bottom: 4rem; }
  .pt-xxl-6 { padding-top: 4rem; }
  .pb-xxl-6 { padding-bottom: 4rem; }
  .p-xxl-6  { padding: 4rem; }
}


/********************* PAYPLANS *************************/

.pp-checkout-table__desc p {
  /* font-size: 1rem; */
}

#pp .pp-checkout-table td, #pp .pp-checkout-table th {
  padding: .7em .6em .7em 0 !important;
}


#pp .pp-checkout-table__price, #pp .pp-checkout-table__title {
  font-size: 1.2rem !important;
}

#pp .pp-checkout-item__title {
  font-size: 1.4rem !important;
  margin-top: 2.5rem;
  color: var(--color-gylden) !important;
}

@media only screen and (min-width: 576px) {
  .o-form-check__text.newsletter {
    font-size: 1.2rem !important;
  }
}

@media only screen and (max-width: 575px) {
  .o-form-check__text.newsletter {
    font-size: 1rem !important;
  }
  
  #pp .pp-checkout-table__last-col {
    width: 5.5rem !important;  
  }
}

/* Venstre juster teksten i takkebesked ved køb */
#pp .pp-result {
  text-align: left !important;
}

/* PayPlans responsive fix for mobile overflow */
@media (max-width: 767px) {
  #pp .pp-checkout-item__title {
    font-size: 1.2rem !important;
    margin-top: 2.5rem;
    color: var(--color-gylden) !important;
  }  
  
  /* Fix the main container overflow */
    .pp-checkout-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix the problematic Tailwind grid */
    .pp-checkout-item__content .grid {
        display: block !important; /* Override grid on mobile */
        width: 100% !important;
    }
    
    .pp-checkout-item__content .grid > div {
        width: 100% !important;
        margin-bottom: 1rem; /* Add space between fields */
    }
    
    /* Ensure form groups don't overflow */
    .pp-checkout-item__content .o-form-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Fix form control width */
    .pp-checkout-item__content .o-form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Ensure content wrapper doesn't overflow */
    .pp-checkout-item__content {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Fix for the flex layouts in titles */
    .pp-checkout-item__title .flex {
        flex-wrap: wrap;
    }
    
    .pp-checkout-item__title .flex-shrink-0 {
        flex-shrink: 1;
        margin-top: 0.5rem;
    }
}

/* Additional fix for very small screens */
@media (max-width: 480px) {
    .pp-checkout-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .pp-checkout-item__content {
        padding-left: 0;
        padding-right: 0;
    }
}
  


/********************* ACYMAILING *************************/
.acym_module_form input {
  max-width: 100% !important;
  line-height: 1.5rem !important;
}

.acy-sub-button {
  width: 100% !important;
}

.btn-cta-acy-horizontal {
  padding: 0.5rem 1.5rem !important;
  color: #ffffff !important;
  background-color: var(--color-gylden) !important;
  font-weight: bold !important;
}


#horizontal ::placeholder {
  color: var(--color-gylden);
}

.morgenkaos input[type="button"] {
  width: 100%;
  background-color: var(--color-brun) !important;
  font-weight: bold;
}

.acym_module_success {
    color: var(--color-brun) !important;
    background-color: #fff !important;
}

.mikropauser .acym_module_form input[type="submit"] {
  width: 100%;
  background-color: var(--color-brun) !important;
  font-weight: bold;
}


/********************* FONTS ***************************/

@font-face {
 font-family: 'Montserrat';
 font-style: normal;
 src: url(../fonts/Montserrat-VariableFont_wght.ttf) format('truetype');
}

@font-face {
 font-family: 'Montserrat';
 font-style: italic;
 src: url(../fonts/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
}

@font-face {
 font-family: 'Oswald';
 src: url(../fonts/Oswald-VariableFont_wght.ttf) format('truetype');
}

@font-face {
 font-family: 'Tangerine';
 font-style: normal;
 font-weight: normal;
 src: url(../fonts/Tangerine-Regular.ttf) format('truetype');
}

@font-face {
 font-family: 'Tangerine';
 font-style: normal;
 font-weight: bold;
 src: url(../fonts/Tangerine-Bold.ttf) format('truetype');
}