@font-face {
    font-family: 'BrandonGrotesqueWeb-Regular';
    src: url('fonts/BrandonGrotesqueWeb/35C0BF_0_0.eot');
    src: url('fonts/BrandonGrotesqueWeb/35C0BF_0_0.eot?#iefix') format('embedded-opentype'),
    url('fonts/BrandonGrotesqueWeb/35C0BF_0_0.woff2') format('woff2'),
    url('fonts/BrandonGrotesqueWeb/35C0BF_0_0.woff') format('woff'),
    url('fonts/BrandonGrotesqueWeb/35C0BF_0_0.ttf') format('truetype');
}

@font-face {
    font-family: "AbrilTitling-SemiCondensed";
    src: url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.eot");
    src: url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.eot?#iefix") format("embedded-opentype"),
    url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.woff") format("woff"),
    url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.woff2") format("woff2"),
    url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.ttf") format("truetype"),
    url("fonts/AbrilTitlingSemicondensedRegular/09755dee4c7d7bce773c5ccf14d5393d.svg#Abril Titling SemiCondensed W") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@property --brand-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #92aca0;
}

@property --brand-color-bold {
    syntax: "<color>";
    inherits: false;
    initial-value: #80978c;
}

* {
    box-sizing: border-box;
}

/* RESET */
html, body {
    margin: 0;
    padding: 0;

    font-size: 16px;
    font-family: "BrandonGrotesqueWeb-Regular", sans-serif;
    color: rgb(0, 48, 87);
}

::selection {
    background: rgba(170, 138, 0, 0.25);
}

img::selection {
    background: transparent;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;

    font-family: "AbrilTitling-SemiCondensed", serif;
}

h1 {
    font-size: 2.6rem;
}

h2 {
    font-size: 2.3rem;
}

h3 {
    font-size: 2.0rem;
}

h4 {
    font-size: 1.7rem;
}

h5 {
    font-size: 1.4rem;
}

h6 {
    font-size: 1.1rem;
}

/* Links */
a {
    color: #000;
}

a:hover {
    color: var(--brand-color-bold);
}

/* Buttons */

.button {
    width: max-content;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgb(146, 172, 160);
    background: #87AEA1;
    font-size: 16px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    color: #000;
    text-align: center;
    text-decoration: none;
    line-height: 1;
}

.button:hover {
    border: 1px solid rgb(146, 172, 160);
    background: #508A77;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #000;
}

.button:disabled {
    border-color: darkgray;
    background-color: lightgray;
    border-bottom-width: 1px;
    color: gray;
    cursor: default;
}

.button::selection {
    background: none;
}

/* Top bar */

#vt-logo {
    width: 144px;
    height: 64px;
    text-align: center;
    float: left;
    background: url("images/vt_logo.png") no-repeat;
    background-size: contain;
    background-position: center;
}

nav {
    position: sticky;
    top: 0;
    background: #fff;

    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);

    width: 100%;
    margin: 0 auto;
}

#vt-main-logo {
    width: 480px;
    padding: 32px;
    margin: 0 auto;
    display: block;
    background: #fff;
    border-radius: 16px;
}

#vt-navbar {
    width: 100%;
    max-width: 1000px;
    height: 64px;
    margin: 0 auto;

    background: #fff;
}

#vt-logo {
    display: block;
    margin: 0 auto;
    float: none;
}

#vt-mobile-nav-toggle {
    position: absolute;
    right: 0;
    display: block;
}

#vt-menu {
    float: none;
    display: none;
    background: #fff;
    white-space: nowrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#vt-menu li {
    float: none;
}

#vt-menu a {
    display: block;
    text-align: center;
}

#vt-navbar {
    z-index: 1999;
}

#vt-menu-scrim {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    top: 0;
    z-index: -1;
}

#vt-menu:after {
    content: '';
    clear: both;
    display: block;
}

#vt-menu a {
    display: block;
    padding: 0 16px;
    height: 64px;
    line-height: 64px;

    color: rgb(0, 48, 87);
    text-decoration: none;
}

#vt-menu a.active, #vt-mobile-nav-toggle.active {
    color: #fff;
    background: var(--brand-color);
}

#vt-menu a:hover {
    color: #fff;
    background: var(--brand-color-bold);
}

#vt-mobile-nav-toggle {
    width: 64px;
    height: 64px;
    padding: 16px;

    display: block;
    cursor: pointer;
}

#vt-mobile-nav-toggle:hover {
    background: var(--brand-color);
}

/* Section setups */

.full-height-section {
    min-height: calc(100vh - 64px);
    scroll-margin-top: 64px;
}

.full-height-section > .content {
    width: calc(100% - 32px);
    padding: 32px 16px;
    margin: 0 auto;
}

.full-height-section > .content h1,
.full-height-section > .content h2 {
    text-align: center;
}

.content img {
    max-width: calc(100vw - 64px);
}

.vt-two-col-usp {
    display: flex;
    flex-direction: row;
    column-gap: 64px;
    row-gap: 16px;
    justify-content: center;
}

.vt-two-col-usp > * {
    width: 100%;
    min-width: 100%;
    break-inside: avoid;
}

.vt-two-col-usp {
    flex-direction: column;
    width: 100%;
    row-gap: 16px;
}

.vt-two-col-usp > div {
    width: 100%;
}

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

.vt-offering-col-image {
    width: 128px;
    height: 128px;
    display: block;
    margin: 0 auto;
}

.vt-offering-col-title {
    font-size: 2rem;
}

/* Main content sections */

#hem {
    background-image: url('images/vt_header-w1024.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

#hem .content {
    display: flex;
    flex-direction: column;
    row-gap: 64px;
    align-items: center;
}

#hem .button {
    min-width: min(320px, 100%);
    font-size: 1.2rem;
    max-width: calc(100vw - 64px);
}

#kliniken {
    background: rgba(170, 138, 0, 0.10);
    text-align: center;
}

#om-oss {
    background: rgba(170, 138, 0, 0.10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('images/vt_groupshot-w1024.jpg');

    min-height: calc(100vw / 1.5);
}

#kontakta-oss {
    background: rgb(146, 172, 160, 0.5);
}

#contact-form * {
    display: block
}

#contact-form input[type="text"], #contact-form input[type="email"] {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgb(146, 172, 160);
    margin-bottom: 16px;
}

#contact-form textarea {
    width: 100%;
    height: 192px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgb(146, 172, 160);
}

#contact-form .button {
    width: 100%;
}

#contact-form-success {
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
}

/* Borrowed from https://cssloaders.github.io/ – thanks Vineeth! */
.loader {
    width: 24px;
    height: 24px;
    border: 2px solid var(--brand-color);
    border-top-color: var(--brand-color-bold);
    border-radius: 50%;
    animation: rotation 1s infinite;
    display: none;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Size overrides */
@media (min-width: 720px) {
    .vt-two-col-usp {
        width: 100%;
        flex-direction: row;
        padding: 0 32px;
        column-gap: 32px;
    }

    .vt-two-col-usp > * {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    nav {
        padding: 0 16px
    }

    #vt-logo {
        float: left;
    }

    #vt-menu {
        display: block;
        float: right;
    }

    #vt-menu a {
        display: inline-block;
    }

    #vt-menu li {
        float: left;
    }

    #vt-mobile-nav-toggle {
        display: none;
    }

    .full-height-section > .content {
        width: 100%;
        max-width: 1000px;
        padding: 64px 0;
    }

    .flex-column {
        row-gap: 32px;
    }

    #kontakta-oss .vt-two-col-usp > * {
        width: 25vw;
    }

    .vt-two-col-usp {
        padding: 0 64px;
        column-gap: 64px;
    }
}

/* "Om oss" background image configs */
@media (min-width: 1024px) {
    #hem {
        background-image: url('images/vt_header-w1440.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w1440.jpg');
        min-height: calc(100vh);
    }
}

@media (min-width: 1440px) {
    #hem {
        background-image: url('images/vt_header-w1920.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w1920.jpg');
    }
}

@media (min-width: 1920px) {
    #hem {
        background-image: url('images/vt_header-w2560.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w2560.jpg');
    }
}

@media (min-width: 2560px) {
    #hem {
        background-image: url('images/vt_header-w2880.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w2880.jpg');
    }
}

@media (min-width: 2880px) {
    #hem {
        background-image: url('images/vt_header-w3280.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w3280.jpg');
    }
}

@media (min-width: 3280px) {
    #hem {
        background-image: url('images/vt_header-w3840.jpg');
    }

    #om-oss {
        background-image: url('images/vt_groupshot-w3840.jpg');
    }
}

@media (min-width: 3840px) {
    #om-oss {
        background-image: url('images/vt_groupshot-w6000.jpg');
    }
}