/*
Theme Name: Psykologisk Metod
Description: Psykologisk Metod Wordpress Theme
Author: Gullström & Co
Template: flatsome
Version: 3.0
*/

/*************** Imports  ***************/
@font-face {
    font-family: "PT Sans Bold";
    src: url('fonts/pt-sans-bold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "PT Sans Regular";
    src: url('fonts/pt-sans-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "PT Sans Bold Italic";
    src: url('fonts/pt-sans-bold-italic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "Inter Bold";
    src: url('fonts/Inter-Bold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "Inter Regular";
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-display: swap;
}
.grecaptcha-badge { 
    visibility: hidden;
}

.screen-reader-text {
    background-color: #000!important;
    color: white!important;
}

:root {
    --padding-size-xs: 30px;
    --padding-size-sm: 60px;
    --padding-size: 90px;
    --padding-size-lg: 120px;
    
    --body-font-size-sm: .9rem !important; 
    --body-font-size: 1rem !important;
    --body-font-size-lg: 1.1rem !important; 
    --h1-size: 3rem !important; 
    --h2-size: 2.5rem !important; 
    --h3-size: 1.25rem !important; 
    --h4-size: 1rem !important; 
    --h5-size: 0.75rem !important; 
    --h6-size: 0.70rem !important; 
    --btn-size: 0.75rem 1.5rem !important;

    --body-font-family: "Inter Regular", sans-serif!important;
    --bold-body-font-family: "Inter Bold", sans-serif!important;
    --heading-font-family: "PT Sans Bold", sans-serif!important;
    --heading-alt-family: "PT Sans Bold Italic", sans-serif!important;
    --font-weight: normal!important;

}

@media only screen and (max-width: 849px) {
    :root {
        --padding-size-sm: 30px!important;
        --padding-size: 30px!important;
        --padding-size-lg: 30px!important;
        --body-font-size: 1rem!important; 
        --h1-size: 2rem!important; 
        --h2-size: 1.5rem!important; 
        --h3-size: 1.25rem!important; 
        --h4-size: 1rem!important; 
        --h5-size: 0.75rem!important; 
        --h6-size: 0.70rem!important; 
        --btn-size: 0.75rem 1.5rem!important;        
    }
}

/*************** Typograhy  ***************/

body {
    & p {
        font-family: var(--body-font-family);
        font-size: var(--body-font-size);
        font-weight: var(--font-weight);

        & a {text-decoration: underline!important;}
    }

    & strong {
        font-family: var(--bold-body-font-family);
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight);
}

h2 em, h3 em {
    font-family: var(--heading-alt-family);
}

h1 {font-size: var(--h1-size);}
h2, .h2, h3.h2 {font-size: var(--h2-size);}
h3, .h3, h2.h3 {font-size: var(--h3-size);}
h4 {font-size: var(--h4-size);}
h5 {font-size: var(--h5-size);}
h6 {font-size: var(--h6-size);}

.lighter {
    font-family: var(--body-font-family);
}

h2:has(.count-up) {
    margin-bottom: 0;
}

.sub-text {
    & p {
        font-family: var(--bold-body-font-family);
        text-transform: uppercase;
        margin-bottom: .5rem;
    }
}

.two-col ul {
    column-count: 2;
}

@media only screen and (max-width: 849px) {
    .text-right {
        text-align: left;
    }
}

/*************** Background classes (change class names if needed, but not variable names)  ***************/
.bg-klippa {background-color: var(--brand-color-1)!important;}
.bg-sten {background-color: var(--brand-color-2)!important;}
.bg-krita {background-color: var(--brand-color-3)!important;}
.bg-sno {background-color: var(--brand-color-4)!important;}
.bg-brand-color-5 {background-color: var(--brand-color-5)!important;}
.bg-beige {background-color: #EAE7E2!important;}
.bg-pink {background-color: #BEA5DF!important;}
.bg-green {background-color: var(--fs-color-success)!important;}
.bg-blue {background-color: #A9CDFF!important;}
/*************** Color classes (change class names if needed, but not variable names)  ***************/
.color-brand-color-1 {color: var(--brand-color-1)!important;}
.color-brand-color-2 {color: var(--brand-color-2)!important;}
.color-brand-color-3 {color: var(--brand-color-3)!important;}
.color-brand-color-4 {color: var(--brand-color-4)!important;}
.color-brand-color-5 {color: var(--brand-color-5)!important;}
.color-black {color: black!important;}
/*************** Global paddings  ***************/
.py {padding: var(--padding-size) 0px!important;}
.py-lg {padding: var(--padding-size-lg) 0px!important;}
.py-sm {padding: var(--padding-size-sm) 0px!important;}
.pl {padding-left: var(--padding-size)!important;}
.pt {padding-top: var(--padding-size)!important;}
.pt-lg {padding-top: var(--padding-size-lg)!important;}
.pb {padding-bottom: var(--padding-size)!important;}
.pb-lg {padding-bottom: var(--padding-size-lg)!important;}
.pb-sm {padding-bottom: var(--padding-size-sm)!important;}
.pb-xs {padding-bottom: 30px!important;}
.p-xs {padding: var(--padding-size-xs)!important;}
.m-0 {margin: 0!important;}
/*************** Buttons  ***************/
.button:not(.icon, .back-to-top), .wpcf7-submit {
    padding: var(--btn-size);
    font-size: var(--body-font-size);
    font-family: var(--bold-body-font-family)!important;
    font-weight: normal!important;
    line-height: 1;

    & span {line-height: 1;}
}

.button:not(.icon).primary {

    & span {

    }
}

.button:not(.icon).secondary {
    
    & span {

    }
}

.button:not(.icon).is-link {
    padding: 0;
    min-height: unset;
    & span {

    }
}

.button:not(.icon, .back-to-top).is-outline {
    
    & span {

    }
}

/*************** Header & Navigation  ***************/
@media only screen and (min-width: 1460px) {
    .header-inner {
        padding: 0 calc(4rem + 45px);
    }
}
header {
    .nav {
        & li {
            & a {
                font-family: var(--body-font-family);
                font-weight: var(--font-weight);
                font-size: var(--body-font-size-lg);
            }

            & li {
                width: 100%!important;
            }
        }
    }

    & .nav-left {
        justify-content: center;
    }

    & .nav-dropdown-simple {
        padding: 1rem;
    }

    & .nav-heading>a:hover {
        background-color: unset!important;
    }

    & .nav-dropdown-col>a {
        font-family: var(--heading-font-family)!important;
        font-weight: var(--font-weight)!important;
        text-transform: unset!important;
        font-size: var(--h3-size)!important;
    }

    & .header-button-1 .button {
        background-color: #A9CDFF;
        color: black;
    }
}
.header:not(.transparent) {
    .nav {
        & li {
            & a {
            }
        }
    }
}

.header.transparent {
    .nav {
        & li {
            & a {
                color: black;
            }
        }
    }
}

.off-canvas-center.mfp-bg.mfp-ready {
    opacity: .95;
}

.mobile-sidebar {
    & .nav-vertical>li>a {
        font-weight: normal;
        font-family: var(--heading-font-family);
    }
}

@media only screen and (max-width: 1140px) {
    #logo {
        width: 120px!important;
    }

    .header {
        .nav {
            & li {
                & a {
                    font-family: var(--body-font-family);
                    font-weight: var(--font-weight);
                    font-size: var(--body-font-size);
                }

                & li {
                    width: 100%!important;
                }
            }
        }
    }

    .nav-spacing-xlarge>li {
        margin: 0 .5rem;
    }
}

@media only screen and (max-width: 849px) {
    #logo {
        width: 150px!important;
    }

    .header-button-1 {
        flex-shrink: 0;

        & .button {
            font-size: var(--body-font-size-sm)!important;
            padding: .5rem 1rem!important;
            line-height: 1;
        }
    }
}

/*************** Frontpage  ***************/
.ux-logo-link {
    & img {
        object-fit: contain;
    }
}
@keyframes imgZoom {
    0% {transform: scale(100%);}
    50% {transform: scale(130%);}
    100% {transform: scale(100%);}
}
.zoom {
    & img {
        animation: imgZoom 60s infinite;
    }
}
.frontpage-hero {
    height: calc(100vh - 90px);
    align-items: flex-end;

    & h1 {
        font-size: 4rem !important;
    }

    & .hero-text p {
        padding-right: 10%;
        font-size: var(--body-font-size-lg);
        margin-bottom: 0;
    }

    & img {
        animation: imgZoom 60s infinite;
    }

    & .row:not(.align-bottom) {
        padding-bottom: 160px;
    }
}


.dnv-mark-width{
    width: 100px !important;
}

.frontpage-hero .dnv-mark img {
    animation: none;
}

.dnv-no-zoom img {
    animation:none !important;
}

.dnv-mark {
    position: absolute;
    top: 60px;
    right: calc(4rem + 15px + 45px);
    width: 100px !important;
    z-index: 50;
}

@media screen and (max-width: 850px) {
    .dnv-mark {
        top:20px;
        width: 70px !important;
        }
}

@media screen and (max-width: 1460px) {
    .dnv-mark {
        right: calc(15px + 45px);
        }
}

@media screen and (min-width: 850px) {
    .col-divided {
        border-right: 1px solid #000000 !important;
    }
}

@media screen and (max-height: 1130px) {
    .frontpage-hero .row:not(.align-bottom) {
        padding-bottom: 20px !important;
    }
    .frontpage-hero h1 {
        font-size: 3.5rem !important;
    }
}


@media only screen and (max-width: 1400px) {
    .frontpage-hero {
        height: auto!important;
        padding-top: 120px!important;
        & h1 {
            font-size: 3rem !important;
        }
        & .row:not(.align-bottom) {
            padding-bottom: 0px;
        }
    } 
    
}

@media only screen and (max-width: 849px) {
    .frontpage-hero {
        height: auto!important;
        padding-top: 120px!important;

        & .section-bg {
            left: 0!important;
        }

        & h1 {
            font-size: 2rem !important;
        }

        & .row:not(.align-bottom) {
            padding-bottom: unset;
        }

        & .hero-text p {
            padding-right: unset;
            margin-bottom: 1rem;
        }
    }
    
}

@media only screen and (max-width: 48em) {
    
    
}
/*************** Sections  ***************/
.half-bg-left {

    & .section-bg {
        width: 50%;
        height: auto;
    }

    & .row > .col:nth-child(2) {
        & .col-inner {
            padding-left: 60px;
        }
    }
}

.half-bg-right {

    & .section-bg {
        left: 50%;
        width: 50%;
        height: auto;
    }

    & .row:first-child > .col:nth-child(1) {
        &  .col-inner {
            padding-right: 60px;
        }
    }
}

@media only screen and (max-width: 849px) {
    .half-bg-right, .half-bg-left {
        flex-direction: column;
        padding-top: 0!important;
        & .section-bg {
            flex-basis: 100%;
            width: 100%;
            position: relative;
            left: unset;
            top: unset;
            aspect-ratio: 16 / 10;
            margin-bottom: 30px!important;
            transform: none!important;
        }
    }

    .half-bg-left {
        & .row > .col:nth-child(2) {
            & .col-inner {
                padding-left: unset;
            }
        }
    }

    .half-bg-right {
        & .row:first-child > .col:nth-child(1) {
            &  .col-inner {
                padding-right: unset;
            }
        }
    }

    .is-full-height {
        padding-top: 30px!important;
        height: auto!important;
    }
}

.col-inner:has(.quote-slider) {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 150px;
        background-color: #A9CDFF;
    }
}

.quote-slider {
    & .row .col:first-child .img {
        padding: 30px 60px 60px 0;
    }
    & .col-inner:has(p) {
        padding: 0 90px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;

        & p {
            font-size: var(--body-font-size-lg);
        }

        & .img {
            width: 4rem!important;
        }

        & p:last-child {
            margin-bottom: 0;
        }
    }
    & .flickity-page-dots {
        left: unset;
        right: 30px;
        bottom: 30px;
    }
}

@media only screen and (max-width: 849px) {
    .col-inner:has(.quote-slider) {
        &:before {
            left: 0;
        }
    }

    .quote-slider {
        & .row .col:first-child .img {
            padding: 30px;
        }
    & .col-inner:has(p) {
        padding: 30px!important;
        display: flex;
        flex-direction: column;
        justify-content: center;

        & p {
            font-size: var(--body-font-size-lg);
        }

        & .img {
            width: 2rem!important;
        }

        & p:last-child {
            margin-bottom: 0;
        }
    }
    & .flickity-page-dots {
        left: unset;
        right: 30px;
        bottom: 30px;
    }
}
}

/*************** Rows & Columns  ***************/
@media only screen and (min-width: 1460px) {
    .row-full-width {
        padding: 0 4rem;
    }
}

.row.align-equal .banner {
    min-height: 100%;
}

.col-inner.rounded, .col.rounded>.col-inner {
    border-radius: 20px;
    overflow: hidden;
}

.ar-1-1:not(.col) {
    aspect-ratio: 1 / 1!important;
}

.ar-1-1 .col-inner {
    aspect-ratio: 1 / 1!important;
}

.align-right {
    margin-left: auto;
}

@media only screen and (max-width: 849px) {
    .row-collapse .col-inner:has(p) {
        padding: 0 15px
    }
}

.stack .text {
    flex-shrink: 0;
}

/*************** Boxes ***************/

.icon-box-left .icon-box-img {
    width: auto!important;
    height: 60px;

    & .icon-inner {
        display: flex;
        align-items: center;
    }
}

.icon-box-left {
    & h2 {
        line-height: 1!important;
    }
}

.icon-box-left .icon-box-img svg {
    min-height: 60px;
    max-height: 60px;
    padding: 0!important;
    overflow: visible!important;
    width: auto;
}

.usp-section {
    & .icon-box-left .icon-box-img {
        width: auto!important;
        height: 30px;
    
        & .icon-inner {
            display: flex;
            align-items: center;
        }
    }
    
    & .icon-box-left {
        & h2 {
            line-height: 1!important;
        }
    }
    
    & .icon-box-left .icon-box-img svg {
        min-height: 30px;
        max-height: 30px;
        padding: 0!important;
        overflow: visible!important;
        width: auto;
    }
}

.post-item {
    & .col-inner, .box, .box-text {
       
    }

    & .badge.post-date {
        top: 0;
        right: 0!important;
        left: unset;
    }
    
    & .button {
        position: absolute;
        right: 30px;
        bottom: 30px;
        margin: 0;
        transition: all .3s ease-in-out;
    }

    &:hover {
        cursor: pointer;
    }
}
.article-inner {
    & img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}
.box {
    & .box-image {

    }

    & .box-text {

    }
}
.icon-box-left {
    align-items: center;
}

.icon-box.big {
    display: flex;
    flex-direction: column;
    height: 100%;

    & .icon-box-img {
        margin-bottom: auto!important;
    }

    & h3 {
        margin-top: .5rem;
        margin-bottom: 1rem;
    }
}
.test-box svg path {
    fill: #A9CDFF!important;
}
.badge-inner {
    background-color: #BEA5DF;
    color: black;
}

/*************** Tabs & Accordions  ***************/
.tabbed-content {
    & .nav:not(.nav-test) {
        width: 50%;
    }
    & .tab {
        border: 0;
        & a {
            font-family: var(--heading-font-family);
            font-size: var(--h2-size);
            justify-content: flex-end;
            padding: 1rem 4rem 1rem 0;
            text-align: right;
            
            &:before {
                background-color: #4C7C7E;
            }
        }

        & a.test-category {
            font-family: var(--heading-font-family);
            font-size: var(--h3-size);
            justify-content: flex-end;
            padding: 0;
        }
    }

    & li .divider {
        font-family: var(--heading-font-family);
        font-size: var(--h3-size);
        justify-content: flex-end;
        padding: 0 1rem;
    }

    & .tab.active {
        & a {
            color: #4C7C7E;
        }
    }

    & .tab:not(.active){
        & a {
            color: black;
        }
    }

    & .tab-panels:not(.tab-panels-test) {
        padding: 0 0rem 0rem 4rem;;
    }
}

.tabbed-content .col-inner {
    display: flex;
    flex-direction: column;
}

.tabbed-content .col-inner p{
    flex-grow: 1;
}



@media only screen and (max-width: 849px) {
    .tabbed-content {
        & .nav:not(.nav-test) {
            width: 100%;
            margin-bottom: 2rem;
            justify-content: center;
        }
        & .tab {
            border: 0;
            & a {
                font-family: var(--heading-font-family);
                font-size: var(--body-font-size-lg);
                justify-content: flex-start;
                padding: 0;
                text-align: right;
                
                &:before {
                    background-color: #4C7C7E;
                }
            }
    
            & a.test-category {
                font-family: var(--heading-font-family);
                font-size: var(--body-font-size-lg);
                justify-content: flex-end;
                padding: 0;
            }
        }
    
        & li .divider {
            font-family: var(--heading-font-family);
            font-size: var(--body-font-size-lg);
            justify-content: flex-end;
            padding: 0 .5rem;
        }

        & .nav.nav-test {
            justify-content: center;
        }
    
        & .tab.active {
            & a {
                color: #4C7C7E;
            }
        }
    
        & .tab:not(.active){
            & a {
                color: black;
            }
        }
    
        & .tab-panels:not(.tab-panels-test) {
            padding: 2rem;
            background-color: #EAE7E2;
        }
    }
}

.accordion {

    & .accordion-item {
        margin-bottom: 1rem;
    }

    .accordion-title {
        border-top: none;
        background-color: var(--brand-color-4);
        padding: 1rem 1.5rem;
        font-family: var(--bold-body-font-family);
    }

    .toggle {
        left: auto;
        right: 0;
    }
}

/*************** Subpage  ***************/
.subpage-title {
    height: auto;
    min-height: 400px;
    padding-top: 190px!important;

    & .is-divider {
        : none;
    }
}

.blog-featured-title {
    background-color: #EAE7E2;

    & .title-overlay {display: none;}

    & * {
        color: black!important;
        text-shadow: none;
    }
}

.blog-single {
    background-color: #f1f1f1;
}

article.post {
    padding: 30px;
    background-color: white;
}

.col:has(article.post) {
    margin-top: -90px;
}

.post-thumbnail img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

@media only screen and (max-width: 1400px) {
    
    
}

@media only screen and (max-width: 849px) {
    .subpage-title {
        height: auto;
        min-height: auto!important;
        padding-top: 0!important;

        & .section-bg {
            aspect-ratio: 16 / 13!important;
        }
    }
}

@media only screen and (max-width: 48em) {
    
    
}

/*************** Footer  ***************/
.absolute-footer {
    display: none;
}
.footer-stack {
    align-items: center!important;
}


@media only screen and (max-width: 1400px) {
    
    
}

@media only screen and (max-width: 849px) {
    
    
}

@media only screen and (max-width: 48em) {
    
    
}

/*************** Contact Form 7  ***************/
.wpcf7 {

    & input[type=text], input[type=tel], input[type=email], textarea {
        box-shadow: none!important;
        border: none;
        outline: 0;
        padding: 2rem;
        margin: 0;
    }

    label {
        color: currentColor;
        visibility: hidden;
        max-height: 0px!important;
        margin: 0!important;
        line-height: 0;
        font-size: 0;
        position: absolute;
    }

    & input:focus, textarea:focus {
        box-shadow: none!important;
    }

    & textarea {
        resize: none!important;
    }
    & select {
        border:none !important;
        box-shadow: none;
        margin-bottom: 0 !important;

    }

}