@use "./vars" as v;
@use "./components";


// ---- main theme & layout

.page {
    padding-bottom: 5rem;

    a {
        color: var(--link-fg);
        text-decoration: underline;

        &:hover {
            color: var(--link-hv-fg);
        }
    }

    section.container {
        margin-top: v.$mp-3;
        margin-bottom: v.$mp-4;

        &:not(:last-child) {
            padding-bottom: calc(v.$mp-4 / 2);
            // border-bottom: 2px var(--break-color) solid;
        }

        > .title, h3.title {
            font-size: var(--title-2-sz);
            clear: both;
            margin: v.$mp-3 0;
        }

    }

    *[data-oembed-url] {
        clear: both;
    }
}



// ---- components
.dropdown-item {
    font-size: unset !important
}

.vc-weekday-1, .vc-weekday-7 {
    color: var(--secondary-color) !important;
}


.schedules {
    padding-top: 0;
    margin-bottom: calc(0rem - v.$mp-3) !important;
}

.schedule {
    display: inline-block;
    margin: v.$mp-3;
    margin-left: 0rem;
    padding: v.$mp-2;
    text-color: var(--main-color);
    background-color: var(--main-color-light);

    .heading {
        padding: 0em;
    }

    .day {
        font-weight: v.$weight-bold;
        margin-right: v.$mp-3;
    }
}


// -- buttons, forms
@include components.button;

.actions {
    display: flex;
    flex-direction: row;
    gap: v.$mp-3;
    justify-content: right;

    &.no-label label {
        display: none;
    }

    button, .action, a {
        justify-content: center;
        min-width: 2rem;
        padding: v.$mp-2;

        .not-selected { opacity: 0.6; }
        .icon { margin: 0em !important; }
        label { margin-left: v.$mp-2; }
    }

}

.label, .textarea, .input, .select {
    font-size: v.$text-size;
}

.field.is-horizontal {
    display: flex;
    flex-direction: horizontal;

    .label { min-width: 7rem }
    .control {
        flex: 1;
        > * {
            width: 100%;
        }

    }
}

@media screen and (min-width: v.$screen-small) {
    comment.textarea {
        height: calc( v.$text-size * 7 ) !important;
    }
}

.navbar-item.active, .table tr.is-selected {
    color: var(--secondary-color);
    background-color: var(--main-color);
}


// -- headings
.title {
    text-transform: uppercase;
    &.is-3 { margin-top: v.$mp-3; }
}


// ---- main navigation
.navs {
    position: relative;
}

.nav {
    display: flex;
    background-color: var(--nav-bg);

    &:empty {
        display: none;
    }

    .burger {
        display: none;
        background-color: var(--nav-bg);
    }

    .nav-item {
        padding: v.$mp-2;
        flex-grow: 1;
        flex-shrink: 1;
        text-align: center;

        font-family: var(--heading-font-family);
        text-transform: uppercase;
        color: var(--nav-fg) !important;

        .icon:first-child, .icon + span {
            text-align: center;
            vertical-align: top;
            display: inline-block;
        }

        &:hover {
            background-color: var(--nav-hv-bg);
            color: var(--nav-hv-fg);
        }

        &.active {
            background-color: var(--nav-active-bg);
            color: var(--nav-active-fg) !important;
        }
    }

    .nav-menu {
        display: flex;
        flex-grow: 1;

        .dropdown-content {
            font-size: v.$text-size;
            min-width: 15rem;
        }
    }

    &.primary {
        height: var(--nav-primary-height);

        .nav-menu {
            flex-grow: 1;
        }

        .nav-brand {
            display: inline-block;
            padding: v.$mp-3;
            flex-grow: 0;
            flex-shrink: 1;

            img {
                height: 100%;
            }
        }

        .nav-item {
            font-size: var(--nav-fs);
            font-weight: v.$weight-bold;
            white-space: nowrap;
        }
    }

    &.secondary {
        background-color: var(--nav-secondary-bg);
        //position: absolute;
        //width: 100%;
        //box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);

        justify-content: right;
        //display: none;

        .nav.primary:hover + &,
        &:hover {
            display: flex;
            top: var(--nav-primary-height);
            left: 0rem;
        }

        .nav-item {
            font-size: var(--nav-2-fs);
        }
    }
}

// ---- breadcrumbs
.breadcrumbs {
    text-align: right;
    padding: v.$mp-3 0rem;
    font-size: v.$text-size-smaller;
    padding-bottom: 0;
    margin-bottom: 0;

    &:empty { display: none; }

    a + a {
        padding-left: 0;

        &:before {
            content: "/";
            margin: 0 v.$mp-2;
        }
    }
}


@media screen and (max-width: v.$screen-normal) {
    .page {
        margin-top: var(--nav-primary-height);
    }

    .navs {
        z-index: 100000;
        position: fixed;
        display: flex;
        left: 0;
        right: 0;
        top: 0;

        .nav:first-child {
            flex-grow: 1;
        }

        .nav + .nav {
            flex-grow: 0 !important;
        }
    }

    .nav {
        justify-content: space-between;

        .burger {
            display: unset;
            margin-left: auto;
        }

        .nav-menu {
            display: block;
            position: absolute;
            background-color: var(--nav-secondary-bg);
            left: 0;
            top: 100%;
            width: 100%;
            box-shadow: 0em 0.5em 0.5em rgba(0,0,0,0.05);

            .nav-item {
                display: block;
                font-weight: v.$weight-normal;
                font-size: var(--nav-fs);
            }
        }

        .nav-menu:not(.active) {
            display: none !important
        }
    }
}


nav li {
    list-style: none;

    a, .button {
        font-size: v.$text-size-medium;
    }
}


.nav-urls {
    display: flex;
    flex-direction: row;

    margin-top: v.$mp-3;
    text-align: right;

    > a:only-child {
        margin-left: auto;
    }

    li {
        list-style: none;
    }

    .urls {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        gap: v.$mp-3;
        justify-content: center;

        a:not(:last-child) {
            margin-right: v.$mp-3;
        }

    }

    .left {
        flex-grow: 0;
        text-align: left;
    }

    .right {
        flex-grow: 0;
        text-align: right;
    }
}

// ---- page header
.header {
    &.preview-header {
        //display: flex;
        align-items: start;
        gap: v.$mp-3;
        min-height: unset;
        padding-top: v.$mp-3 !important;

    }

    .headings {
        width: unset;
        flex-grow: 1;
        padding-top: 0 !important;

        display: flex;
        flex-direction: column;
    }

    &.has-cover {
        min-height: calc( var(--header-height) / 3 );
    }
}


.header-cover:not(:only-child) {
    float: right;
    position: relative;
    z-index: 30;
    background-color: var(--body-bg);
    margin: 0 0 v.$mp-4 v.$mp-4;

    .cover {
        max-width: calc(var(--header-height) * 2);
        height: var(--header-height);
    }
}
.header-cover:only-child {
    width: 100%;
}

@media screen and (max-width: v.$screen-small) {
    .container.header {
        width: calc( 100% - v.$mp-2 );

        .headings {
            width: 100%;
            clear: both;
        }

        .header-cover {
            float: none;
            margin: 0;
            text-align: center;
        }

        .cover {
            margin-left: auto;
            margin-right: auto;
            max-height: calc(var(--cover-h) * 1);
            max-width: calc(var(--cover-w) * 2);
        }
    }
}


// ---- ---- detail
.page-content {
    margin-top: v.$mp-6;

    &:not(:last-child) {
        margin-bottom: v.$mp-6;
    }
}


// ---- ---- list
.list-item {
    &.logs {
        .track {
            margin-right: v.$mp-3;
            .icon {
                margin-right: v.$mp-2;
                color: var(--secondary-color-dark);
            }
        }
    }

    &:nth-child(3n):not(.wide) .media,
    {
        border-color: var(--main-color-dark) !important;
    }

    &:nth-child(3n+1):not(.wide) .media,
    {
        border-color: var(--secondary-color-dark) !important;
    }
}



// ---- responsive
@media screen and (max-width: v.$screen-normal) {
    .page .container {
        margin-left: v.$mp-4;
        margin-right: v.$mp-4;
    }
}

@media screen and (max-width: v.$screen-small) {
    .page .container {
        margin-left: v.$mp-2;
        margin-right: v.$mp-2;
    }
}