:root {
    --abitti-font-family: "Noto Sans";
    --abitti-font-size-navi: 1.1em;

    --abitti-fi-primary-blue: #006ed2;
    --abitti-fi-dark-blue: #00529e;
    --abitti-fi-background-blue: #e9f4ff;
    --abitti-fi-background-grey: #F6F6F7;
    --abitti-fi-text-black: #000;

    --abitti-fi-dark-orange: #c25700;
    --abitti-fi-background-orange: #fff0e3;

    --abitti-fi-paragraph-width: 854px;
}

body {
    font-family: var(--abitti-font-family) !important;
}

/* Top navigation banner */

#masthead {
    background: var(--abitti-fi-primary-blue);
    font-family: var(--abitti-font-family);
    font-size: var(--abitti-font-size-navi);
    height: 64px;

    .site-branding {
        display: inline-flex;

        h1.site-title,
        p.site-title {
            visibility: hidden;
        }

        a {
            background-image: url(elements/abitti-white.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 32px;
            width: 100%;
            display: inline-block;
            margin-left: 20px;
        }
    }

    .container {
        padding: 0;
        max-width: 1380px;
        height: 64px;

        .site-branding-container {
            height: 64px;
            display: flex;
            align-items: center;
        }
    }

    .main-navigation {
        div>ul>li>a {
            height: 24px;
        }

        a.has-dropdown {
            pointer-events: none;
        }
    }

    .main-navigation.toggled {
        margin-bottom: 0;
    }
}

@media (max-width: 1399px) {
    #masthead.responsive-menu .menu-toggle {
        display: flex;
        align-items: center;
    }

    #masthead .main-navigation div>ul {
        display: none;
    }

    #masthead .main-navigation.toggled div>ul {
        display: block;
    }

    #site-navigation {
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    #masthead .main-navigation div>ul {
        height: 64px;
        display: flex;
        align-items: center;
    }

    #site-navigation {
        max-width: 85%;
    }
}


/* Navigation */

#site-navigation {
    a {
        color: #FFF;
        font-family: "Noto Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    &.main-navigation {
        .sub-menu {
            background: var(--abitti-fi-primary-blue);
            top: 26px;
            padding-top: 18px;
            border-top: 0;
        }
    }

    &.main-navigation.toggled {
        &>div>ul>li {
            border-top: 2px solid #fff;

            &>a {
                font-size: 20px;
            }
        }

        ul {
            &>li[class*="children"] {
                &>span {
                    width: 100%;
                    height: 58px;
                    text-align: right;
                }

                &>span::after {
                    display: inline-block;
                    color: #fff;
                    content: '' !important;
                    background-image: url("elements/icon-chevron-down-white.svg");
                    background-size: contain;
                    width: 10px;
                    height: 7px;
                    margin-right: 32px;
                }

                &.up>span::after {
                    background-image: url("elements/icon-chevron-up-white.svg");
                }

            }

            a[href="https://oma.abitti.fi"]::after {
                display: inline-block;
                content: '';
                background-size: contain;
                margin-left: 8px;
                vertical-align: baseline;
                background-image: url("elements/icon-link-external-white.svg");
                width: 16px;
                height: 16px;
            }

            li {
                a {
                    background: var(--abitti-fi-primary-blue);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 85vw;
                }
            }

            ul {
                top: 27px;
                border-top: 0;
                background: var(--abitti-fi-primary-blue);

                display: flex;
                flex-direction: column;
                align-content: flex-start;
                align-items: center;
                justify-content: flex-start;

                padding-top: 0;
                margin-left: 28px;

                li {
                    a {
                        padding: 7px 16px;
                        line-height: 26px;
                        color: #fff;
                        background: var(--abitti-fi-primary-blue);

                    }
                }

                .menu-item {
                    height: 40px;
                    align-self: stretch;
                }
            }
        }

        li {
            &:not(.up) {
                .sub-menu {
                    display: none;
                }
            }
        }

        .menu-toggle::after {
            content: '';
            background-size: contain;
            background-image: url('elements/icon-close-white.svg');
            width: 30px;
            height: 30px;
            display: block;
        }
    }

    &.main-navigation:not(.toggled) .menu {
        li {
            &>a:hover {
                border-bottom: 0;
            }

            a[href="https://oma.abitti.fi"] {
                color: var(--abitti-fi-dark-blue);
                border: 1px solid var(--abitti-fi-dark-blue);
                background: #FFF;
                display: inline-flex;
                box-sizing: content-box;
                padding: 7px 16px;
                align-items: center;
                border-radius: 4px;
                margin-left: 50px;
            }
        }

        &>.menu-item {
            border-bottom: 2px solid var(--abitti-fi-primary-blue);
        }

        &>.menu-item:not(:has(a[href="https://oma.abitti.fi"])):hover {
            border-color: #fff;
        }

        &>.current-page-ancestor, &>.current-menu-item {
            border-color: #fff;
        }

        li>.sub-menu>li>a:hover {
            background: var(--abitti-fi-dark-blue);
        }
    }

    .menu-toggle::after {
        content: '';
        background-size: contain;
        background-image: url('elements/icon-menu.svg');
        width: 30px;
        height: 30px;
        display: block;
    }

    .menu-item-has-children a::after {
        display: none;
    }

    .menu-search {
        display: none;
    }
}

/* Footer */

#colophon.site-footer {
    .bottom-bar {
        display: none;
    }

    .footer-main {
        background: var(--abitti-fi-background-grey);

        .container {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            max-width: 1460px;
            padding: 32px;
            justify-content: space-between;
            gap: 32px;

            .clear {
                display: none;
            }

            .widget {
                padding: 0;
                margin: 0;
                width: 240px;

                &:nth-child(1) {
                    min-width: 81px;
                    text-align: center;
                }

                &:nth-child(2) {
                    white-space: nowrap;
                }

                img {
                    width: 81px;
                    height: 32px;
                }

                .textwidget {
                    p {
                        color: var(--abitti-fi-dark-blue, #00529E);
                        font-family: "Noto Sans";
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;

                        &:only-child {
                            margin-bottom: 0;
                        }

                        a {
                            color: var(--abitti-fi-dark-blue, #00529E);

                            &:hover {
                                color: var(--abitti-fi-dark-blue, #00529E);
                                text-decoration: underline;
                            }
                        }

                        strong {
                            color: var(--abitti-fi-text-black, #000);
                        }
                    }
                }
            }
        }

        .widget-count-4 {
            width: 0;
        }

    }
}


/* Page headings */

.home #content header.entry-header, .page #content > header.entry-header {
    display: none;
}

.blog #content > header.page-header {
    visibility: hidden;
    height: 0;
}

.single #content > header.entry-header {
    background-color: #ffffff;
}

/* Body blocks */

#content {

    p,
    li {
        align-self: stretch;
        color: var(--abitti-fi-text-black);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        max-width: var(--abitti-fi-paragraph-width);
    }

    a {
        color: var(--abitti-fi-dark-blue);

        &[target='_blank']:after {
            display: inline-block;
            content: '';
            background-size: contain;
            margin-left: 8px;
            vertical-align: baseline;
            background-image: url("elements/icon-link-external-dark-blue.svg");
            width: 12px;
            height: 12px;
        }
    }

    p {
        .intro {
            align-self: stretch;
            color: var(--abitti-fi-text-black, #000);
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
        }

        & + span.copy-the-code-wrap {
            margin-top: -20px;
        }
    }

    /* Headings */

    h1 {
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        margin: 32px 0 24px 0;
    }

    h2 {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }

    h3 {
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
    }

    /* Code blocks */

    .wp-block-code {
        background: #f6f6f7;
        font-family: "Courier 10 Pitch", Courier, monospace;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        hyphens: none;
    }

    code {
        background: #f6f6f7;
        font-family: "Courier 10 Pitch", Courier, monospace;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        hyphens: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .wp-block-preformatted {
        background: #f6f6f7;
        font-family: "Courier 10 Pitch", Courier, monospace;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        hyphens: none;
        color: black;
        background: white;
        border-style: solid;
        border-color: grey black black black;
        border-width: 25px 1px 1px 1px;
        border-radius: 10px;
    }

    /* Blockquote (defaults to blue) */

    blockquote {
        display: flex;
        max-width: var(--abitti-fi-paragraph-width);
        padding: 24px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        border-radius: 8px;
        border: 1px solid var(--abitti-fi-primary-blue);
        background: var(--abitti-fi-background-blue);

        a {
            &:after {
                display: inline-block;
                content: '';
                background-size: contain;
                margin-left: 8px;
            }

            &:not([target]):after {
                background-image: url("elements/icon-link-internal-dark-blue.svg");
                width: 28px;
                height: 20px;
                vertical-align: middle;
            }

            &[target='_blank']:after {
                background-image: url("elements/icon-link-external-dark-blue.svg");
                width: 12px;
                height: 12px;
                vertical-align: baseline;
            }
        }

        p {
            color: var(--abitti-fi-dark-blue);
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            margin-bottom: 8px !important;

            &:last-child,
            &:only-child {
                margin-bottom: 0 !important;
            }

            strong {
                color: var(--abitti-fi-text-black);
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
            }
        }

        /* Blockquote (important/orange) */

        &.important {
            border-color: var(--abitti-fi-dark-orange);
            background: var(--abitti-fi-background-orange);

            p {
                color: var(--abitti-fi-dark-orange);
            }

            a {
                color: var(--abitti-fi-dark-orange);

                &:not([target]):after {
                    background-image: url("elements/icon-link-internal-dark-orange.svg");
                    width: 28px;
                    height: 20px;
                    vertical-align: middle;
                }

                &[target='_blank']:after {
                    background-image: url("elements/icon-link-external-dark-orange.svg");
                    width: 12px;
                    height: 12px;
                    vertical-align: baseline;
                }
            }
        }

        /* Blockquote (info) */

        &.info {
            padding: 0 0 0 40px;
            background-image: url('elements/icon-info.svg');
            background-repeat: no-repeat;
            background-position: left top;
            background-size: 32px;

            width: var(--abitti-fi-paragraph-width);
            background-color: #fff;
            border: 0;

            p {
                color: var(--abitti-fi-text-black);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;

                strong {
                    font-weight: 700;
                }
            }
        }
    }

    /* Abitti front page */

    .abitti-fi-frontpage-hero-image {
        height: auto;
        max-height: 360px;
        width: 100vw;
        max-width: 100%;
        object-fit: cover;
        vertical-align: top;
    }

    .abitti-fi-frontpage-container {
        display: flex;
        justify-content: center;

        .site-main {
            max-width: var(--abitti-fi-paragraph-width);

            .foobar-message {
                .fbr-content {
                    background-color: #FFE1E1;
                }

                .fbr-toggle {
                    background: #F58A8A;
                    border-radius: 0;
                    position: inherit;

                    background-image: url(elements/icon-union-white.svg);
                    background-size: 16px;
                    background-repeat: no-repeat;
                    background-position: center;

                    svg {
                        display: none;
                    }
                }
            }
        }
    }

    .abitti-fi-frontpage-posts {
        padding: 20px 40px;
        margin-top: 24px;
        margin-bottom: 32px;
        max-width: var(--abitti-fi-paragraph-width);
        background-color: var(--abitti-fi-background-blue);

        h2 {
            margin-top: 0;
            margin-bottom: 16px;
        }

        .abitti-fi-frontpage-posts-container {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 41px;

            .abitti-fi-frontpage-post {
                width: 229px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;

                .abitti-fi-frontpage-post-date {
                    color: var(--abitti-fi-text-black);
                    font-family: "Noto Sans";
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }

                .abitti-fi-frontpage-post-title {
                    margin: 0;
                }

                .abitti-fi-frontpage-post-link {
                    color: var(--abitti-fi-dark-blue, #00529E);
                    font-family: "Noto Sans";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 24px;
                }

                .abitti-fi-frontpage-post-link:after {
                    display: inline-block;
                    content: '';
                    background-size: contain;
                    margin-left: 8px;

                    background-image: url("elements/icon-link-internal-dark-blue.svg");
                    width: 28px;
                    height: 20px;
                    vertical-align: middle;
                }
            }
        }
    }


    /* LuckyWP Table of Contents */

    .lwptoc {
        margin: 0;

        .lwptoc_i {
            border-left: 4px solid var(--abitti-fi-primary-blue);
            background: var(--abitti-fi-background-blue);
            padding: 24px 40px;

            .lwptoc_title {
                color: var(--abitti-fi-text-black);
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
                /* 120% */
            }

            .lwptoc_items {
                .lwptoc_item {
                    margin-top: 8px;

                    .lwptoc_item_label {
                        color: var(--abitti-fi-dark-blue, #00529E);
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 24px;
                    }
                }

            }

            /* Hide H1 heading ... */
            &>.lwptoc_items>.lwptoc_itemWrap>.lwptoc_item>.lwptoc_itemWrap {
                margin: 0;
            }

            /* ... and margin */
            .lwptoc_items-visible>.lwptoc_itemWrap>.lwptoc_item>a {
                display: none;
            }
        }

    }



}