/*
Theme Name: Wave
Text Domain: Wave
Author: Noli Alickaj
Author URI: https://wavecode.no
*/

html {
    scroll-behavior: smooth;
}

:root {
    --blue: #00476B;
    --red: #CE3734;
    --grey: #DBD1CD;
    --white: #fff;
    --offwhite: #f7f7f7;
}

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    font-family: 'roboto';
    font-weight: 400;
    color: var(--blue);
    margin: 0;
    padding: 0;
    font-size: 20px;
}


@font-face {
    font-family: 'roboto';
    src: url('/wp-content/themes/wavecode/assets/fonts/roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto';
    src: url('/wp-content/themes/wavecode/assets/fonts/roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto';
    src: url('/wp-content/themes/wavecode/assets/fonts/roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto';
    src: url('/wp-content/themes/wavecode/assets/fonts/roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* ----------------- BASICS ----------------- */
h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: 1.2;
    font-weight: 700;
}
p {
    margin: 0;
    line-height: 1.4;
}
.content p {
    margin-bottom: 20px;
}
a {
    text-decoration: none;
    vertical-align: bottom;
    color: var(--red);
}
img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
strong {
    font-weight: 500;
}
hr {
    width: 100%;
    color: var(--border);
}


/* ----------------- EDITOR ----------------- */
.editor p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.editor p:last-child {
    margin-bottom: 0;
}
.editor ul {
    margin: 0;
    margin-bottom: 24px;
    padding-left: 22px;
}
.editor li {
    margin-bottom: 10px;
    line-height: 1.4;
}
.editor a {
    color: var(--purple);
    text-decoration: underline;
}
.editor h1, .editor h2, .editor h3, .editor h4, .editor h5 {
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: 600;
}
.editor img {
    margin-top: 25px;
    margin-bottom: 25px;
    /*border-radius: 20px;*/
}


/* ----------------- HEADER ----------------- */
.header {
    position: relative;
    z-index: 99;
    padding: 30px 0;
}
.header .logo {
    width: 100%;
    max-width: 200px;
    height: auto;
}


/* ----------------- NAV ----------------- */
.header nav {
    display: flex;
    align-items: center;
    gap: 36px;
}
.header nav a {
    color: var(--dark);
    font-size: 20px;
}

.menu--mobile {
    border-bottom: 1px solid var(--blue);
}
.menu--mobile a {
    display: block;
    width: 100%;
    color: var(--dark);
    border-top: 1px solid var(--blue);
    padding: 14px 0;

    font-size: 20px;
    font-weight: 500;
}


/* ----------------- FOOTER ----------------- */
.footer {
    padding-top: 100px;
    padding-bottom: 100px;
}


/* ----------------- LAYOUT ----------------- */
.wrapper {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-right: 50px;
}


/* ----------------- HERO ----------------- */
.hero {
    min-height: 600px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 30px;
}

/* ----------------- GRID ----------------- */
.grid--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}
.grid--2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.grid--auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid--3-2 {
    display: grid;
    grid-template-columns: 3fr 2fr;
}

.col-gap--l {
    column-gap: 100px;
}
.col-gap--m {
    column-gap: 50px;
}
.col-gap--s {
    column-gap: 20px;
}
.row-gap--l {
    row-gap: 100px;
}
.row-gap--m {
    row-gap: 50px;
}
.row-gap--s {
    row-gap: 20px;
}

.grid--content {
    padding: 70px;
}


/* ----------------- SERVICES ----------------- */
.services .box {
    background: var(--offwhite);
    padding: 25px 20px;
    border-radius: 10px;
}

.employees .box {
    background: var(--offwhite);
    padding: 40px 40px;
    border-radius: 10px;
}

.contact.box {
    background: var(--offwhite);
    padding: 80px 70px;
    border-radius: 10px;
}


/* ----------------- CAREER ----------------- */
.career {
    width: 100%;
}
.career .item {
    background: var(--offwhite);
    padding: 32px 40px;
    border-radius: 10px;
    width: 100%;
    max-width: 1000px;
}
.career .item:hover {
    background: #f2f2f2;
}


/* ----------------- REFERENCES ----------------- */
.post-type-archive-referanse .reference img {
    object-fit: cover;
    aspect-ratio: 3/2;
    border-radius: 10px;
}


/* ----------------- WIDTH ----------------- */
.width--xl {
    width: 100%;
    max-width: 1000px;
}
.width--l {
    width: 100%;
    max-width: 800px;
}
.width--m {
    width: 100%;
    max-width: 580px;
}


/* ----------------- PADDING ----------------- */
.pad-t--xl {
    padding-top: 160px;
}
.pad-t--l {
    padding-top: 100px;
}
.pad-t--m {
    padding-top: 60px;
}
.pad-t--s {
    padding-top: 40px;
}

.pad-b--xl {
    padding-bottom: 160px;
}
.pad-b--l {
    padding-bottom: 100px;
}
.pad-b--m {
    padding-bottom: 60px;
}
.pad-b--s {
    padding-bottom: 40px;
}


/* ----------------- FONT SIZES ----------------- */
.font--xl {
    font-size: 60px;
}
.font--l {
    font-size: 40px;
}
.font--m {
    font-size: 30px;
}
.font--s {
    font-size: 24px;
}
.font--xs {
    font-size: 16px;
}


/* ----------------- FONT WEIGHT ----------------- */
.font--500 {
    font-weight: 500;
}
.font--400 {
    font-weight: 400;
}


/* ----------------- GAP ----------------- */
.gap--xxl {
    gap: 120px;
}
.gap--xl {
    gap: 80px;
}
.gap--l {
    gap: 40px;
}
.gap--m {
    gap: 20px;
}
.gap--s {
    gap: 10px;
}
.gap--xs {
    gap: 5px;
}

.gap--pb {
    gap: 80px;
}


/* ----------------- BACKGROUND ----------------- */
.bg--blue {
    background: var(--blue);
}
.bg--red {
    background: var(--red);
}
.bg--grey {
    background: var(--grey);
}
.bg--offwhite {
    background: var(--offwhite);
}
.bg--white {
    background: var(--white);
}


/* ----------------- COLOR ----------------- */
.color--blue {
    color: var(--blue);
}
.color--red {
    color: var(--red);
}
.color--grey {
    color: var(--grey);
}
.color--white {
    color: var(--white);
}


/* ----------------- BUTTON ----------------- */
.btn {
    min-width: 140px;
    width: fit-content;
    height: fit-content;
    padding: 18px 22px;
    border-radius: 10px;

    font-size: 18px;
    line-height: 1;
    border: 2px solid;
    text-align: center;

    transition: 0.2s ease;
}
.btn.primary {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}
.btn.secondary {
    color: var(--red);
    border-color: var(--red);
}
.btn.secondary:hover {
    background: var(--red);
    color: var(--white);
}

.btn.white {
    background: var(--white);
    border-color: var(--white);
    color: var(--blue);
}


/* ----------------- GALLERY ----------------- */
.gallery--item {
    display: block;
    overflow: hidden;
}
.gallery--img {
    aspect-ratio: 3/2;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}


/* ----------------- OTHER ----------------- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rounded {
    border-radius: 10px;
}

.top {
    margin-top: 30px;
}

.partner--logo {
    width: auto;
    height: 80px;
    border-radius: 0;
}


/* ----------------- TABLET ----------------- */
@media (max-width: 992px) {
    .grid--2 {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }

    .grid--3 {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    .header nav {
        display: none;
    }

    .services .box {
        padding: 30px 20px;
    }


}


/* ----------------- MOBILE ----------------- */
@media (max-width: 768px) {
    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid--3 {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }

    .gallery--img {
        height: auto;
    }

    .hero {
        padding: 100px 20px;
        min-height: auto;
    }
    .hero .flex--row {
        width: 100%;
    }
    .hero .btn {
        width: 100%;
    }


    .font--xl {
        font-size: 42px;
    }
    .font--l {
        font-size: 32px;
    }
    .font--m {
        font-size: 26px;
    }

    .gap--xxl {
        gap: 60px;
    }
    .gap--xl {
        gap: 50px;
    }
    .gap--l {
        gap: 30px;
    }
    .gap--m {
        gap: 15px;
    }

    .pad-t--xl {
        padding-top: 100px;
    }
    .pad-t--l {
        padding-top: 60px;
    }
    .pad-t--m {
        padding-top: 40px;
    }
    .pad-t--s {
        padding-top: 20px;
    }

    .pad-b--xl {
        padding-bottom: 100px;
    }
    .pad-b--l {
        padding-bottom: 60px;
    }
    .pad-b--m {
        padding-bottom: 40px;
    }
    .pad-b--s {
        padding-bottom: 20px;
    }

    .partner {
        padding: 50px 20px;
    }

    .career .item article {
        align-items: start;
    }

    .grid--content {
        padding: 80px 40px;
    }

    .builder.grid--2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .contact.box {
        padding: 70px 30px;
    }

}