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

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
}

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

@font-face {
    font-display: swap;
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Orbitron-Medium.ttf') format('truetype');
}

:root, html {

    /* Primary colors */
    --turkis-ci: #00AAA7;
    --black-ci: #231F20;
    --turkis-web: #79B7B8;
    --dark-turkis-web: #9B2321;
    --dark-turkis-web-hover: #1A6364;

    /* Complementary Colors */
    --yellow: #F0AC00;
    --yellowLight: #F9DE99;
    --turkisLightWeb: #E4F1F1;

    /* Neutral Colors */
    --neutral-100: #1a1a1a;
    --neutral-90: #424242;
    --neutral-80: #616161;
    --neutral-70: #757575;
    --neutral-60: #9E9E9E;
    --neutral-50: #C2C2C2;
    --neutral-40: #E0E0E0;
    --neutral-30: #EDEDED;
    --neutral-20: #CDCDCD;
    --neutral-10: #e3e3e3;

    /* card drop shadow */
    --box-shadow: 4px 4px 12px 0px rgba(118, 118, 118, 0.10);

    /* headline variables */
    --main-headline-font-family: "Orbitron";
    --main-headline-font-weight: 500;
    --main-headline-font-style: normal;
    --main-headline-color: var(--black-ci, #231F20);

    /* bodytext variables */
    --body-font-family: "Montserrat";
    --body-font-weight: 400;
    --body-font-style: normal;
    --body-color: var(--neutral-90, #424242);

    /* spacings */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-xxl: 80px;
    --space-xxxl: 128px;
}


/* Headline definitions */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--main-headline-font-family);
    font-style: var(--main-headline-font-style);
    font-weight: var(--main-headline-font-weight);
    color: var(--main-headline-color);
    margin: 0;
    padding: 0;
}

h1, .h1 {
    font-size: 36px;
    line-height: 46px;

    @media screen and (min-width: 1024px){
        font-size: 74px;
        line-height: 93px;
    }
}

h2, .h2 {
    font-size: 33px;
    line-height: 39.6px;

    @media screen and (min-width: 1024px){
        font-size: 60px;
        line-height: 78px;
    }
}

h3, .h3 {
    font-size: 30px;
    line-height: 39px;

    @media screen and (min-width: 1024px){
        font-size: 40px;
        line-height: 50px;
    }
}

h4, .h4 {
    font-size: 24.4px;
    line-height: 31.3px;

    @media screen and (min-width: 1024px){
        font-size: 34px;
        line-height: 44.2px;
    }
}

h5, .h5 {
    font-size: 20px;
    line-height: 28.8px;

    @media screen and (min-width: 1024px){
        font-size: 28.13px;
        line-height: 36.569px;
    }
}

h6, .h6 {
    font-size: 18px;
    line-height: 24px;

    @media screen and (min-width: 1024px){
        font-size: 22.5px;
        line-height: 29.25px;
    }
}

body,
#content p,
.wp-block-list li,
.font-body {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    color: var(--body-color);
    font-size: 16px;
    line-height: 26.6px;

    @media screen and (min-width: 1024px){
        font-size: 20px;
        line-height: 28.8px;
    }
}

.bold {
    font-weight: bold;
    font-size: 24px;
}

.not-bold {
    font-weight: 400;
}

.description {
    font-size: 13.3px;
    line-height: 20px;
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    color: var(--body-color);

    @media screen and (min-width: 1024px){
        font-size: 14px;
        line-height: 22px;
    }
}

.category-tag {

    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-right: 32px;
    background: var(--neutral-30, #EDEDED);
    color: var(--neutral-80, #616161);

    /* Desktop/H6 */
    font-family: "Atkinson Hyperlegible";
    font-size: 22.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.25px; /* 130% */
}

.link-default {
    color: var(--dark-turkis-web);
    text-align: right;
    font-family: 'Atkinson Hyperlegible';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
        text-decoration: none;
    }
}

/* buttons */

.btn-primary {

    display: inline-flex;
    flex-direction: column;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 7px 0 0 0;
    text-decoration: none;
    background: var(--dark-turkis-web);
    color: var(--neutral-10, #FFF);
    font-family: "Atkinson Hyperlegible";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
    border: solid 2px transparent;

    &:hover {
        background: var(--dark-turkis-web-hover);
    }

    &:active,
    .active {
        text-decoration: underline;
        text-underline-offset: 8px;
    }

    &:focus,
    &:focus-visible {
        text-decoration: underline;
        text-underline-offset: 8px;
        box-shadow: 0 0 0 2px #1E7476;
        border: solid 2px #fff;
    }
}

.btn-secondary {
    display: inline-flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 7px 0 0 0;
    border: 1.5px solid var(--dark-turkis-web);
    text-decoration: none;

    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    color: var(--body-color);
    font-size: 16px;
    line-height: 26.6px;

    @media screen and (min-width: 1024px){
        font-size: 18px;
        line-height: 28.8px;
    }

    &:hover,
    &:active {
        border-radius: 7px 0 0 0;
        border: 1.5px solid #1A6364;
        background: var(--turkisLightWeb);
    }

    &:focus,
    &:focus-visible {
        border-radius: 7px 0 0 0;
        border: 2px solid #FFF;
        background: var(--dark-turkis-web);
        box-shadow: 0 0 0 2px #1E7476;
        color: var(--neutral-10);
        text-decoration: underline;
        text-underline-position: under;
    }
}

.btn-text {
    display: inline-block;
    color: var(--black-ci, #231F20);
    font-family: "Atkinson Hyperlegible";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.25px; /* 162.5% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;


    &:hover {
        text-decoration: none;
    }

    &:focus,
    &:focus-within,
    &:active {
        text-decoration: none;
        outline: dashed 1px var(--neutral-60);
        outline-offset: 2px;
        -moz-outline-radius: 4px;
        border-radius: 4px;
    }

    .indicator {
        margin-left: 12px;
        display: inline-flex;
        padding: 4px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 7px 0px;
        background: var(--dark-turkis-web);
        color: var(--neutral-10);
        border-radius: 7px 0;
        background: var(--dark-turkis-web, #1E7476);

        svg {
            fill: var(--neutral-10, #FFF);
        }
    }
}

/* Select fields */
.profactor-select-field {
    position: relative;
    min-width: 300px;
    max-width: 100%;

    &::after {
        content: url("./icons/arrow-down.svg");
        position: absolute;
        top: 0.75em;
        right: 1em;
        pointer-events: none;
    }

    select {
        display: flex;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--neutral-80, #616161);
        background: var(--neutral-10, #FFF);
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        appearance:none;
        padding-right: 2.5em;
        color: var(--neutral-80, #616161);
        font-family: "Atkinson Hyperlegible";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28.8px; /* 160% */
        width: 100%;

        &:focus,
        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
            -moz-outline-radius: 4px;
            border-radius: 4px;
        }
    }

}



/* spacings margin */
.m-xxs {margin: var(--space-xxs)}
.ml-xxs {margin-left: var(--space-xxs)}
.mt-xxs {margin-top: var(--space-xxs)}
.mr-xxs {margin-right: var(--space-xxs)}
.mb-xxs {margin-bottom: var(--space-xxs)}
.m-xs {margin: var(--space-xs)}
.ml-xs {margin-left: var(--space-xs)}
.mt-xs {margin-top: var(--space-xs)}
.mr-xs {margin-right: var(--space-xs)}
.mb-xs {margin-bottom: var(--space-xs)}
.m-s {margin: var(--space-s)}
.ml-s {margin-left: var(--space-s)}
.mt-s {margin-top: var(--space-s)}
.mr-s {margin-right: var(--space-s)}
.mb-s {margin-bottom: var(--space-s)}
.m-m {margin: var(--space-m)}
.ml-m {margin-left: var(--space-m)}
.mt-m {margin-top: var(--space-m)}
.mr-m {margin-right: var(--space-m)}
.mb-m {margin-bottom: var(--space-m)}
.m-l {margin: var(--space-l)}
.ml-l {margin-left: var(--space-l)}
.mt-l {margin-top: var(--space-l)}
.mr-l {margin-right: var(--space-l)}
.mb-l {margin-bottom: var(--space-l)}
.m-xl {margin: var(--space-xl)}
.ml-xl {margin-left: var(--space-xl)}
.mt-xl {margin-top: var(--space-xl)}
.mr-xl {margin-right: var(--space-xl)}
.mb-xl {margin-bottom: var(--space-xl)}
.m-xxl {margin: var(--space-xxl)}
.ml-xxl {margin-left: var(--space-xxl)}
.mt-xxl {margin-top: var(--space-xxl)}
.mr-xxl {margin-right: var(--space-xxl)}
.mb-xxl {margin-bottom: var(--space-xxl)}
.m-xxxl {margin: var(--space-xxxl)}
.ml-xxxl {margin-left: var(--space-xxxl)}
.mt-xxxl {margin-top: var(--space-xxxl)}
.mr-xxxl {margin-right: var(--space-xxxl)}
.mb-xxxl {margin-bottom: var(--space-xxxl)}

/* spacings padding */
.p-xxs {padding: var(--space-xxs)}
.pl-xxs {padding-left: var(--space-xxs)}
.pt-xxs {padding-top: var(--space-xxs)}
.pr-xxs {padding-right: var(--space-xxs)}
.pb-xxs {padding-bottom: var(--space-xxs)}
.p-xs {padding: var(--space-xs)}
.pl-xs {padding-left: var(--space-xs)}
.pt-xs {padding-top: var(--space-xs)}
.pr-xs {padding-right: var(--space-xs)}
.pb-xs {padding-bottom: var(--space-xs)}
.p-s {padding: var(--space-s)}
.pl-s {padding-left: var(--space-s)}
.pt-s {padding-top: var(--space-s)}
.pr-s {padding-right: var(--space-s)}
.pb-s {padding-bottom: var(--space-s)}
.p-m {padding: var(--space-m)}
.pl-m {padding-left: var(--space-m)}
.pt-m {padding-top: var(--space-m)}
.pr-m {padding-right: var(--space-m)}
.pb-m {padding-bottom: var(--space-m)}
.p-l {padding: var(--space-l)}
.pl-l {padding-left: var(--space-l)}
.pt-l {padding-top: var(--space-l)}
.pr-l {padding-right: var(--space-l)}
.pb-l {padding-bottom: var(--space-l)}
.p-xl {padding: var(--space-xl)}
.pl-xl {padding-left: var(--space-xl)}
.pt-xl {padding-top: var(--space-xl)}
.pr-xl {padding-right: var(--space-xl)}
.pb-xl {padding-bottom: var(--space-xl)}
.p-xxl {padding: var(--space-xxl)}
.pl-xxl {padding-left: var(--space-xxl)}
.pt-xxl {padding-top: var(--space-xxl)}
.pr-xxl {padding-right: var(--space-xxl)}
.pb-xxl {padding-bottom: var(--space-xxl)}
.p-xxxl {padding: var(--space-xxxl)}
.pl-xxxl {padding-left: var(--space-xxxl)}
.pt-xxxl {padding-top: var(--space-xxxl)}
.pr-xxxl {padding-right: var(--space-xxxl)}
.pb-xxxl {padding-bottom: var(--space-xxxl)}

/* Background colors */
.bg-neutral-10 { background-color: var(--neutral-10);}
.bg-neutral-20 { background-color: var(--neutral-20);}
.bg-dark-turkis { background: var(--dark-turkis-web)}
.bg-light-turkis { background: rgba(121, 183, 184, 0.2)}
.bg-black {background: var(--neutral-100)}

/* text colors */
.text-white { color: var(--neutral-10) !important;}

/* gradient animation */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* container sizes */

.container-full {
    width: 100%;
    max-width: 100%;

    div.inner {
        width: 100%;
        max-width: 100%;
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

.container-default {
    width: 100%;
    max-width: 100%;

    .inner{
        width: 100%;
        max-width: 1280px;
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

.container-tiny {
    width: 100%;
    max-width: 100%;

    .inner{
        width: 100%;
        max-width: 958px;
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

/* effects */

.card-shadow {
    box-shadow: var(--box-shadow);
}

.ellipsis-2-lines {
    white-space: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-3-lines {
    white-space: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-4-lines {
    white-space: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-5-lines {
    white-space: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-details {
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
    justify-content: space-between;

    .single-detail-with-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xxs);
    }
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    font-size: 0;

    img:not(.uncover) {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

.gtnbrg-contentarea p a {
    color: inherit;

    &:focus,
    &:active,
    &:hover {
        color: var(--dark-turkis-web);
    }
}