/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 3.9
*/


/* =========================
   Globala variabler
   ========================= */

:root {
  --color-white: #fff;
  --color-accent: #e67e22;
  --color-accent-alt: #f28c28;
  --color-text-dark: #2c3e50;
  --color-brand-dark: #1e3a5f;
  --color-bg-light: #EDF0F2;
  --color-bg-dark: #1E3A5F;

  --startsektioner-space-top: clamp(40px, 18.18px + 6.82vw, 100px);
  --startsektioner-space-bottom: clamp(40px, 25.45px + 4.55vw, 80px);
  --startsektioner-h2-size: clamp(40px, calc(32.78px + 1.852vw), 55px);

  --arrow-color: var(--color-accent);
  --divider-color: var(--color-accent);
  --divider-width: 2px;
  --arrow-size: 45px;
  --arrow-gap: 30px;
  --arrow-hover-shift: 4px;
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='3' y1='12' x2='17' y2='12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpolyline points='13 6 19 12 13 18' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --h3-inline-space: 20px;
  --paragraph-inline-space: 20px;
  --paragraph-bottom-space-for-arrow: 54px;

  --nestedkol-title-width: clamp(100px, 12vw, 160px);
  --nestedkol-column-gap: 24px;
  --nestedkol-row-gap: 10px;
}

@media only screen and (max-width: 999px) {
  :root {
    --h3-inline-space: 0;
    --paragraph-inline-space: 0;
  }
}

.background-darkblue .row-bg-layer {background-color: var(--color-bg-dark) !important;}
.background-lightblue .row-bg-layer {background-color: var(--color-bg-light) !important;}
#top nav {margin-right: 0;}

.home #header-outer[data-lhe="animated_underline"] nav > ul >li#menu-item-390 > a .menu-title-text:after {border:0}
body #footer-outer #copyright p {opacity: 0.8;}
body #footer-outer #copyright p span {opacity: 0.6;}
#copyright .col.span_5 {margin-bottom:0 !important;}
#footer-outer #copyright {padding: 15px 0 !important;}

/* =========================
   Sidfotmeny
   ========================= */

.menu-sidfotmeny-container ul {list-style-type: none; padding: 0; padding-bottom: clamp(20px, 4vw, 60px); margin: 0; display: flex; flex-direction: column; gap: 0;}
.menu-sidfotmeny-container li {display: block; margin: 0; padding: 0;}
.menu-sidfotmeny-container a,
.sidfot a {display: block; text-decoration: none; line-height: 1.3; margin: 0; padding: 0; color: var(--color-white) !important; transition: color 0.2s ease;}
.menu-sidfotmeny-container a:hover,
.sidfot a:hover {color: var(--color-accent) !important;}
.sidfot p {line-height: 1.3;}


/* =========================
   Startsektioner – generell spacing
   ========================= */

.wpb_row.startsektioner,
.vc_row.startsektioner {padding-top: var(--startsektioner-space-top) !important; padding-bottom: var(--startsektioner-space-bottom) !important; margin-bottom: 0 !important;}

.wpb_row.startsektioner h2,
.vc_row.startsektioner h2 {font-size: var(--startsektioner-h2-size) !important; line-height: 1 !important; color: var(--color-brand-dark) !important; margin-bottom: 30px !important; font-weight: 400 !important;}

.wpb_row.startsektioner h2 strong,
.vc_row.startsektioner h2 strong {font-weight: 600 !important;}


/* =========================
   Gemensam pil-rendering
   ========================= */

.arrow-icon-mask {background-color: var(--arrow-color); -webkit-mask-image: var(--arrow-icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--arrow-icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain;}

.arrowandlinecol:not(.nolink) .arrowandline p a::after,
.pilknapp .link_text .text::after,
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a::after,
.startsektioner.nestedkol .arrowandline p a::after,
.startfokus.ver2 .wpb_text_column p a::after {content: ""; width: var(--arrow-size); height: var(--arrow-size); background-color: var(--arrow-color); pointer-events: none; transition: transform 0.2s ease; -webkit-mask-image: var(--arrow-icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--arrow-icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain;}

.arrowandlinecol:not(.nolink) .arrowandline p a:hover::after,
.pilknapp .link_text:hover .text::after,
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a:hover::after,
.startsektioner.nestedkol .arrowandline p a:hover::after,
.startfokus.ver2 .wpb_text_column p a:hover::after {transform: translateX(var(--arrow-hover-shift));}


/* =========================
   Textblock med linje + pil
   ========================= */

.arrowandlinecol .arrowandline {border-bottom: var(--divider-width) solid var(--divider-color); padding-bottom: 18px; margin-bottom: 30px;}
.arrowandlinecol .arrowandline h3 {margin: 0 0 10px; line-height: 1.2; font-size: clamp(1.125rem, 1.011rem + 0.48vw, 1.375rem);}
.arrowandlinecol:not(.nolink) .arrowandline h3 a {display: block; padding-left: var(--h3-inline-space); padding-right: var(--h3-inline-space); color: var(--color-text-dark); text-decoration: none; transition: color 0.2s ease; font-weight: 700 !important;}
.arrowandlinecol:not(.nolink) .arrowandline h3 a:hover {color: var(--color-accent);}
.arrowandlinecol .arrowandline p {margin: 0; line-height: 1.5;}
.arrowandlinecol:not(.nolink) .arrowandline p a {display: block; position: relative; padding-left: var(--paragraph-inline-space); padding-right: var(--paragraph-inline-space); padding-bottom: var(--paragraph-bottom-space-for-arrow); text-decoration: none; color: var(--color-text-dark); transition: color 0.2s ease;}
.arrowandlinecol:not(.nolink) .arrowandline p a:hover {color: var(--color-accent);}
.arrowandlinecol:not(.nolink) .arrowandline p a::after {position: absolute; right: var(--paragraph-inline-space); bottom: 0; margin-right: 30px;}


/* =========================
   CTA-knapp med samma pil
   ========================= */

.pilknapp .link_text {color: var(--color-accent); transition: color 0.2s ease;}
.pilknapp .link_text:hover {color: var(--color-accent);}
.pilknapp .link_text .text {display: inline-flex; align-items: center;}
.pilknapp .link_text .text::after {display: inline-block; margin-left: var(--arrow-gap); flex: 0 0 var(--arrow-size);}
.pilknapp.litenknapp a {font-weight: 600;}


/* =========================
   Maxbredder och typografi
   ========================= */

.maxbredd {font-size: 22px;}

.maxbredd1,
.maxbredd2,
.maxbredd3,
.sidfot p,
.sidfot .menu-sidfotmeny-container a {max-width: 480px; font-size: 22px;}

.maxbredd3 {max-width: 430px;}

.maxbredd p,
.maxbredd1 p,
.maxbredd2 p,
.maxbredd3 p {line-height: 1.3;}

.maxbredd h2,
.maxbredd1 h2,
.maxbredd2 h2,
.maxbredd3 h2 {letter-spacing: -0.04em;}

.sidfot .maxbredd3 {max-width: 350px;}

@media only screen and (max-width: 999px) {
  .maxbredd,
  .maxbredd1,
  .maxbredd2,
  .maxbredd3,
  .sidfot p {max-width: 100% !important; font-size: 18px; margin-bottom: 20px !important;}

  .sidfot .menu-sidfotmeny-container a {max-width: 100%; font-size: 20px;}
  .startfokus.ver2 {padding: 20px !important;}
}


/* =========================
   Startfokus-sektion
   ========================= */

.startfokus {border-left: 1px solid var(--divider-color); border-right: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color); box-sizing: border-box; padding: 40px !important;}
.startfokus .eyebrow,
.startfokus .wpb_text_column {margin-bottom: 0;}
.startfokus .eyebrow p {margin: 0; color: var(--color-white); text-transform: uppercase; font-weight: 500; line-height: 1.1; letter-spacing: 0.04em; font-size: clamp(0.825rem, 0.76rem + 0.5vw, 1.1rem);}
.startfokus h2 {letter-spacing: -0.05em; margin: 0; padding-top: clamp(32px, 6vw, 90px); padding-bottom: clamp(32px, 6vw, 90px); color: var(--color-white); font-weight: 400; line-height: 1.1; font-size: clamp(2.4rem, 1.23rem + 3.27vw, 4.6875rem);}
.startfokus.ver2 h2 {font-size: clamp(2.5rem, 1.1rem + 2.8vw, 3.5rem); padding-top: 0; padding-bottom: 50px;}
.startfokus h2 strong {font-weight: 600;}
.startfokus .pilknapp {padding-bottom: clamp(0px, -29.09px + 9.09vw, 70px);}
.startfokus .pilknapp .link_text {color: var(--color-accent-alt); text-transform: uppercase; font-weight: 600; line-height: 1.1; font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem); transition: color 0.2s ease;}
.startfokus .pilknapp .link_text:hover {color: var(--color-white);}


/* =========================
   Startsektioner / trekort
   ========================= */

.startsektioner.trekort .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper {display: flex; flex-direction: column; gap: 24px; height: 100%;}

/* Övre textblock */
.startsektioner.trekort .medeyebrow {margin-bottom: 0;}
.startsektioner.trekort .medeyebrow p {margin: 0; line-height: 1.2; padding-bottom: 2px; color: var(--color-bg-light) !important; font-size: 16px;}
.startsektioner.trekort .medeyebrow h2 {margin: 0; line-height: 1.1; font-size: 24px !important; font-weight: 600 !important; color: var(--color-white) !important; letter-spacing: -0.04em;}
.startsektioner.trekort .medeyebrow h2 a {display: block; text-decoration: none; transition: color 0.2s ease; color: var(--color-bg-light) !important;}
.startsektioner.trekort .medeyebrow h2 a:hover {color: var(--color-accent);}

/* Bild */
/* OBS: klassnamnet stavas som i markupen */
.startsektioner.trekort .img-with-aniamtion-wrap {line-height: 0;}
.startsektioner.trekort .img-with-aniamtion-wrap img {display: block; width: 100%; height: auto;}

/* Nedre textblock med pil längst ned till höger */
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type {margin-bottom: 0;}
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p {margin: 0; line-height: 1.4;}
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a {display: block; position: relative; padding-left: 0; padding-right: 0; padding-bottom: var(--paragraph-bottom-space-for-arrow); text-decoration: none; color: var(--color-white); transition: color 0.2s ease;}
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a:hover {color: var(--color-accent);}
.startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a::after {position: absolute; right: 0; bottom: 0;}

@media only screen and (min-width: 1000px) {
  .startsektioner.trekort .wpb_wrapper > .wpb_text_column:not(.medeyebrow):last-of-type p a {min-height: 200px;}
}


/* =========================
   Startsektioner / nestedkol
   ========================= */

.startsektioner.nestedkol .arrowandline {display: grid; grid-template-columns: var(--nestedkol-title-width) minmax(0, 1fr); column-gap: var(--nestedkol-column-gap); row-gap: var(--nestedkol-row-gap); align-items: start; border-top: 2px solid var(--divider-color); border-bottom: 0; padding-top: 18px; padding-bottom: 0; margin-bottom: 18px;}
.startsektioner.nestedkol .arrowandline h3 {grid-column: 1; margin: 0; line-height: 1.2; text-transform: uppercase; font-size: 16px !important; letter-spacing: 0.03em;}
.startsektioner.nestedkol .arrowandline h3 a {display: block; color: var(--color-text-dark); text-decoration: none; transition: color 0.2s ease; padding: 0 !important; font-weight: 600 !important;}
.startsektioner.nestedkol .arrowandline h3 a:hover {color: var(--color-accent);}
.startsektioner.nestedkol .arrowandline p {grid-column: 2; margin: 0; line-height: 1.4;}
.startsektioner.nestedkol .arrowandline p a {display: block; position: relative; padding: 0 0 var(--paragraph-bottom-space-for-arrow) 0; text-decoration: none; color: var(--color-text-dark); transition: color 0.2s ease;}
.startsektioner.nestedkol .arrowandline p a:hover {color: var(--color-accent);}
.startsektioner.nestedkol .arrowandline p a::after {position: absolute; right: 0; bottom: 0;}
.startsektioner.nestedkol .arrowandline:last-child {margin-bottom: 0;}


/* =========================
   Sidfot
   ========================= */

.wpb_row.startsektioner.sidfot,
.vc_row.startsektioner.sidfot {padding-top: 100px !important;}

.startsektioner .footerbottom {position: relative; padding-top: 50px; padding-bottom: 50px;}
.startsektioner .footertop .sidfot-top-right {line-height: 1.4;}

.startsektioner .footertop .sidfot-top-right p,
.startsektioner .footertop .sidfot-top-right h3 {text-align: right;}

.startsektioner .footerbottom h3,
.startsektioner .footerbottom p,
.startsektioner.sidfot h3,
.startsektioner.sidfot p {color: var(--color-white);}

.startsektioner .footerbottom h3,
.startsektioner.sidfot h3 {font-size: clamp(30px, 5vw - 10px, 40px); font-weight: 600;}

.startsektioner .footerbottom::before,
.startsektioner .footerbottom::after {content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--divider-color); z-index: 2; pointer-events: none;}

.startsektioner .footerbottom::before {top: 0;}
.startsektioner .footerbottom::after {bottom: 0;}

.footertop h3 {margin-bottom: 20px !important;}

.minmargin { margin-bottom: 100px !important;}

@media only screen and (max-width: 999px) {
  .wpb_row.startsektioner.sidfot,
  .vc_row.startsektioner.sidfot {padding-top: 50px !important;}

  .startsektioner .footertop .sidfot-top-right p,
  .startsektioner .footertop .sidfot-top-right h3 {text-align: left;}

  .startsektioner .footertop .sidfot-top-right h3 {margin-top: 40px;}
	 .minmargin { margin-bottom: 50px !important;}
}


/* =========================
   Startfokus ver2 – paragraph-länk med pil
   ========================= */

.startfokus.ver2 .wpb_text_column p a {display: block; position: relative; padding-bottom: var(--paragraph-bottom-space-for-arrow); text-decoration: none; color: var(--color-white); transition: color 0.2s ease; opacity: 1 !important;}
.startfokus.ver2 .wpb_text_column p a:hover {color: var(--arrow-color);}
.startfokus.ver2 .wpb_text_column p a::after {position: absolute; right: 0; bottom: 0;}


/* =========================
   col2-img-text – layout och centrering
   ========================= */

.col2-img-text .startfokus.ver2 .vc_column-inner,
.col2-img-text .startfokus.ver2 .wpb_wrapper {height: 100%;}

.col2-img-text .startfokus.ver2 .wpb_wrapper {display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box;}
.col2-img-text .startfokus.ver2 .maxbredd3 {width: 100%; max-width: 355px; margin: 0 auto; text-align: left;}
.col2-img-text .startfokus.ver2 .omoss p,
.col2-img-text .startfokus.ver2 .lagkrav p {line-height: 1.5;}


@media only screen and (min-width: 1000px) {
  .col2-img-text > .row_col_wrap_12 > .start-img-col {width: 55%;}
  .col2-img-text > .row_col_wrap_12 > .startfokus.ver2 {width: 45%;}
  .col2-img-text.fifty > .row_col_wrap_12 > .start-img-col {width: 50%;}
  .col2-img-text.fifty > .row_col_wrap_12 > .startfokus.ver2 {width: 50%;}

  .start-img-col img {padding: 50px 90px 50px 0 !important;}
  .footertop h3 {margin-bottom: 60px !important;}
  .sidfot .erbjudande {padding-left: 40px !important;}

  .factscol .arrowandline p,
  .factscol .arrowandline h3 {padding-left: 20px !important; padding-right: 20px !important;}

  .factscol.smallfact .arrowandline p,
  .factscol.smallfact .arrowandline h3 {max-width: 420px;}

  .factscol.smallfact .arrowandline {max-width: 550px;}
  
  .mediumfact .arrowandline p,
  .mediumfact .arrowandline h3 {max-width: 600px;}
	
	
}


/* =========================
   Mobil
   ========================= */
body #footer-outer #copyright p span {padding-left: 20px !important;}

@media only screen and (max-width: 999px) {
  .startsektioner.nestedkol .arrowandline {grid-template-columns: 1fr;}

  .startsektioner.nestedkol .arrowandline h3,
  .startsektioner.nestedkol .arrowandline p {grid-column: 1;}

  .startsektioner.nestedkol .arrowandline h3 {margin-bottom: 10px;}
	body #footer-outer #copyright p span {display:block !important; padding-top: 2px;}
	body #footer-outer #copyright p span {padding-left: 0 !important;}
}


@media only screen and (min-width: 1000px) {
  #top a#logo {visibility: hidden !important; opacity: 0 !important;}
  .desktop-floating-logo {display: block; position: relative; z-index: 50; margin-top: -30px; margin-bottom: 30px;}
  .desktop-floating-logo a,
  .desktop-floating-logo img {display: block;}
  .desktop-floating-logo img {max-width: 360px; width: 100%; height: auto;}
}

@media only screen and (max-width: 999px) {
  #top a#logo {visibility: visible !important; opacity: 1 !important;}
  .desktop-floating-logo {display: none !important;}
	.arrowandlinecol.factscol  {margin-bottom: 30px !important;}
}