@use "./vars" as v;
@import "./vendor";
@import "./helpers";

//-- helpers/modifiers
//-- forms
input.half-field:not(:active):not(:hover) {
    border: none;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
}


//-- general
:root {
    --body-bg: #fff;
    --text-color: black;
    --text-color-light: #555;
    --break-color: rgb(225, 225, 225, 0.8);

    --main-color: #EFCA08;
    --main-color-light: #F4da51;
    --main-color-dark: #F49F0A;
    --secondary-color: #00A6A6;
    --secondary-color-light: #4cc0c0;
    --secondary-color-dark: #007ba8;

    --disabled-color: #aaa;
    --disabled-bg: #eee;
    --link-fg: #00A6A6;
    --link-hv-fg: var(--text-color);

    --nav-primary-height: 3rem;
    --nav-secondary-height: 2.5rem;
    --nav-fg: var(--text-color);
    --nav-bg: var(--main-color);
    --nav-secondary-bg: var(--main-color-light);
    --nav-hv-fg: var(--button-hv-fg);
    --nav-hv-bg: var(--button-hv-bg);
    --nav-active-fg: var(--button-active-fg);
    --nav-active-bg: var(--button-active-bg);
    --nav-fs: 1rem;
    --nav-2-fs: 0.9rem;
}


:root {
    font-size: 14px;
}

body {
    background-color: var(--body-bg);
}


@mixin mobile-small {
    .grid { @include grid-1; }
}


body.mobile {
    @include mobile-small;
}

@media screen and (max-width: v.$screen-smaller) {
    @include mobile-small;
}

@media screen and (max-width: v.$screen-normal) {
    html { font-size: 16px !important; }
}

@media screen and (max-width: v.$screen-wider) {
    html { font-size: 20px !important; }
}

@media screen and (min-width: v.$screen-wider) {
    html { font-size: 20px !important; }
}

h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
    font-family: var(--heading-font-family);
}


.container:empty {
    display: none;
}

.header-cover {
    display: flex;
    flex-direction: column;
}


.modal .dropdown-menu {
    z-index: 50,
}