/* This is the base CSS document */


/* =============== Color Root =============== */

:root {
    /* ======= our colors ======= */
    --color-white: #F5F5F5;
    /*var(--color-white)*/

    --color-light-blue: #D2DFFF;
    /*var(--color-light-blue)*/

    --color-blue: #171777;
    /*var(--color-blue)*/

    --color-yellow: #FFEEAC;
    /*var(--color-yellow)*/

    --color-light-coral-red: #FF7777;
    /*var(--color-light-coral-red)*/

    --color-pastel-pink: #FFACAC;
    /*var(--color-pastel-pink)*/

    --color-grey: #BDBDBD;
    /*var(--color-grey)*/


    /* ======= primary color ======= */
    --color-primary: var(--color-blue);
    /*var(--color-primary)*/


    /* ======= specific colors ======= */
    --header-bg-color: var(--color-light-blue);
    /*var(--page-bg-color)*/

    --page-bg-color: var(--color-white);
    /*var(--page-bg-color)*/

    --footer-bg-color: var(--color-blue);
    /*var(--page-bg-color)*/

    --text-color: var(--color-blue);
    /*var(--text-color)*/
}


/* =============== Body =============== */

body {
    margin: 0px;
    background-color: var(--page-bg-color);
}


/* =============== Typography | mobile =============== */

/* H1 text - banner title */
h1 {
    font-family: "Poppins", sans-serif;
    font-size: 90px;
    font-weight: 900;
    font-style: normal;
    color: var(--text-color);
    margin: 0px;
}


/* H2 text - banner */
h2 {
    font-family: "Poppins", sans-serif;
    font-size: 35px;
    font-weight: 900;
    font-style: normal;
    color: var(--text-color);
    margin: 0px;
}


/* H3 text - subheading 1 - regular */
h3 {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-color);
    line-height: 150%;
    margin: 0px;
}


/* H4 text - numbers */
h4 {
    font-family: "Poppins", sans-serif;
    font-size: 64px;
    font-weight: 900;
    font-style: normal;
    color: var(--text-color);
    line-height: 100%;
    margin: 0px;
}


/* p text - body text - regular */
p {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-color);
    line-height: 150%;
    margin: 0px;
}


/* modifier - bold */
.bold {
    font-weight: 700;
}


/* modifier - black */
.black {
    font-weight: 900;
}


/* modifier - italic */
.italic {
    font-style: italic;
}


/* modifier - light */
.light {
    font-weight: 300;
}


/* p text - small body text */
p.small {
    font-size: 12px;
}


/* =============== Header | mobile =============== */

.header-mobile {
    padding: 0px 15px 0px 15px;
    background: var(--header-bg-color);
    position: sticky;
    max-width: 900px;
    top: 0;
    z-index: 500;
}

.burger-icon {
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.burgermenu.open .burger-icon {
    display: none; /* Skjul burger-ikonet, når menuen er åben */
}


.burgermenu {
    position: fixed;
    top: 0;
    right: 0;
    height: 300px;
    width: 100vw;
    background-color: #171777;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

.burgermenu ul {
    list-style: none;
    padding: 20px;
}

.burgermenu ul li {
    margin: 20px 0;
}

.burgermenu ul li a {
    font-family: nunito sans;
    color: #D2DFFF;
    text-decoration: none;
    font-size: 1.2em;
}

.burgermenu ul li a.active {
    color: #FF7777;
}

.burgermenu.open {
    transform: translateX(0);
}

.header {
    width: 100%;

    .header__content {
        display: flex;
        height: 60px;
        justify-content: space-between;
        align-items: center;
    }
}

.logo {
    .logo--header {
        height: 44px;
    }
}


/* =============== Header | desktop =============== */

.header-desktop-outer {
    padding: 0px 24px 0px 24px;
    background: var(--header-bg-color);
    position: sticky;

    display: none;
    justify-content: center;
}

.header-desktop {
    width: 100%;
    max-width: 1200px;


    .header-desktop__content {
        display: flex;
        height: 90px;
        justify-content: space-between;
        align-items: center;
    }
}

.logo-desktop {
    height: 64px;
}

.header-menu-desktop {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.menu-highlight {
    color: var(--color-light-coral-red);
}

/* =============== CTA button =============== */

.cta-button {
    /* Neutralizes the default styles on the semantic tag 'button' */
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-decoration: none;

    /* Button style */
    display: flex;
    width: 100%;
    max-width: 125px;
    padding: 10px;
    justify-content: center;
    align-items: center;

    border-radius: 22px;
    background-color: var(--color-light-coral-red);
}

.cta-button:hover {
    background-color: var(--color-blue);

    p {
        color: var(--color-light-coral-red);
    }

}

/* =============== a tag (links) =============== */

a {
    text-decoration: none;
}


/* =============== input (field) =============== */

input {
    border: none;
    text-indent: 10px;
    background-color: var(--color-white);
}



input::placeholder {
    color: var(--color-grey);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


/* =============== Footer | mobile =============== */

footer p {
    color: var(--color-light-blue);
}

.footer {
    padding: 15px;
    background: var(--footer-bg-color);
    display: flex;
    justify-content: center;

    .footer__content {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
}

.link-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .link-list__items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    .logo__db {
        width: 185px;
    }

    .logo__en-af-os {
        height: 70px;
    }
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.contact-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .contact-information__items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.copyright {
    display: flex;
    justify-content: center;
}


/* =============== Footer | desktop =============== */

.footer-desktop {
    display: none;
    justify-content: center;
    background-color: var(--color-blue);
    padding: 0px 24px;

    .footer-desktop__content {
        width: 100%;
        max-width: 1200px;

        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.footer-desktop-information {
    display: flex;
    padding-top: 40px;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;


    .footer-desktop-information__content {
        display: flex;
        flex-direction: row;
        gap: 100px;
    }

    .footer-desktop-information__logoer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 40px;
    }
}

.footer-desktop-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .footer-desktop-links__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-desktop-links__socials {
        display: flex;
        gap: 15px;
    }
}

.footer-desktop-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .footer-desktop-contact__text {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}

.footer-logo-db {
    width: 185px;
}

.footer-logo-en-af-os {
    height: 71px;
}

.copyright-desktop {
    display: flex;
    padding: 40px 0px 15px 0px;
}






/* ========================================================================================== */

/* =============== Media Query =============== */

@media only screen and (min-width: 901px) {

    /* =============== Typography | desktop =============== */

    /* H1 text - banner title */
    h1 {
        font-size: 130px;
    }


    /* H2 text - banner */
    h2 {
        font-size: 60px;
    }


    /* H3 text - subheading 1 - regular */
    h3 {
        font-size: 32px;
    }


    /* H4 text - numbers */
    h4 {
        font-size: 100px;
    }

    /* H5 text - header - menu - text */
    h5 {
        font-family: "Poppins", sans-serif;
        font-size: 18px;
        font-style: normal;
        color: var(--text-color);
        margin: 0px;
    }


    /* p text - body text - regular */
    p {
        font-size: 18px;
    }


    /* p text - small body text */
    p.small {
        font-size: 16px;
    }


    /* p text - extra small body text */
    p.x-small {
        font-size: 12px;
    }


    /* p text - grey body text */
    p.grey {
        color: var(--color-grey);
    }


    /* =============== Header | mobile =============== */

    .header-mobile {
        display: none;
    }


    /* =============== Header | desktop =============== */

    .header-desktop-outer {
        display: flex;
    }


    /* =============== CTA-button =============== */

    .cta-button {
        max-width: 180px;
    }


    /* =============== input (field) =============== */

    input {
        text-indent: 24px;
    }



    input::placeholder {
        font-size: 18px;
    }


    /* =============== Footer | mobile =============== */

    .footer {
        display: none;
    }


    /* =============== Footer | mobile =============== */

    .footer-desktop {
        display: flex;
    }


}