/*
Theme Name: LM-Template
Author: Lennart Möller
Author URI: https://www.lennartmoeller.com/
Description: Minimalistic Wordpress Theme
*/

/*
This css-file is a config-file for all css-files in this template.
*/

:root {
    /* TECHNICAL */
    --customvh: 100vh;
    --customvh: calc(var(--vh, 1vh) * 100);
    --m_button-size: 23px;

    /* GENERAL */
    --div-space: 50px;
    --content-width: 700px;

    /* HEADER */
    /* general */
    --header-height: 90px;
    --header-height-small: 50px;
    --header-height-mobile: 50px;
    --header-border: none;
    --header-scroll-shadow-bottom: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
    --svg-height: 21px;
    /* logo */
    --logo-width-desktop: 200px;
    --logo-width-mobile: 230px;
    --logo-margin-desktop: 12px;
    --logo-margin-mobile: 8px;
    /* menu */
    --opacity-menu-elements: 0.7;
    --opacity-menu-elements-hover: 1;
    --opacity-menu-elements-neg: 1;
    --opacity-menu-elements-neg-hover: 1;
    --opacity-submenu-elements: 0.6;
    --opacity-submenu-elements-hover: 1;
    --menu-items-spacing: 15px;
    --item-underline-height: 1px;
    --item-underline-distance: 4px;
    --submenu-distance: 18px;
    --submenu-border: 1px solid rgb(235, 235, 235);
    --m_menu-border-thickness: 1px;
    --m_menu-border-color: var(--lightgrey-color);
    --logo-menu-space: 30px;
    /* featured image */
    --feat-img-overlay: rgba(34, 34, 34, 0.3);

    /* FOOTER */
    --footer-height: 50px;
    --social-button-size: 22px;
    --footer-border: none;

    /* TRANSITIONS */
    --transition-speed-slow: 0.5s;
    --transition-speed-fast: 0.3s;

    /* FONTS */
    --font: "PT Sans", sans-serif;
    --font-headline: "PT Sans", sans-serif;
    --font-menu: "Lato", sans-serif;
    --font-size-menu: 12px;
    --font-size-submenu: 12px;
    --font-size-m_menu: 17px;
    --font-size-m_submenu: 16px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-h4: 18px;
    --font-size-p: 15px;
    --font-size-footer: 11px;
    --font-size-button: 13px;
    --font-size-input: 15px;
    --font-letter-spacing-h2: 0px;
    --font-letter-spacing-h3: 0px;
    --font-letter-spacing-h4: 0px;
    --font-transform-h2: none;
    --font-transform-h3: none;
    --font-transform-h4: none;
    --font-weight-menu: 500;
    --font-weight-menu-neg: 600;
    --font-weight-submenu: 500;
    --font-weight-h2: 700;
    --font-weight-h3: 700;
    --font-weight-h4: 700;
    --font-weight-p: 400;
    --font-weight-p-a: 500;
    --font-weight-button: 500;
    --font-weight-footer: 500;
    --text-transform-menu: uppercase;
    --text-transform-footer: uppercase;
    --letter-spacing-menu: 0.5px;
    --letter-spacing-submenu: 1px;
    --letter-spacing-button: 0.5px;
    --letter-spacing-footer: 0.5px;
    --line-height: 24px;

    /* COLORS */
    /* backgrounds */
    --background-body: white;
    --background-body-half-opacity: #7f7f7f;
    --background-header: white;
    --background-header-neg: linear-gradient(90deg, #2d0f41 0%, #5a0c0c 100%);
    --background-submenu: white;
    --background-content: none;
    --background-footer: white;
    --background-m_menu: white;
    /* buttons */
    --background-button: #666;
    --background-button-hover: #888;
    --border-color-button: #5d5d5d;
    --font-color-button: white;
    --font-color-button-hover: white;
    /* font color */
    --font-color: #484848;
    --font-color-header: black;
    --font-color-header-hover: black;
    --font-color-header-neg: white;
    --font-color-header-neg-hover: white;
    --font-color-footer: black;
    --font-color-submenu: black;
    --font-color-submenu-hover: var(--akzent-color);
    --font-color-h2: black;
    --font-color-h3: black;
    --font-color-h4: black;
    --font-color-link: var(--akzent-color);
    --font-color-link-hover: var(--akzent-color);
    /* underlines */
    --menu-underline-current: var(--font-color-header);
    --menu-underline-current-neg: var(--font-color-header-neg);
    --menu-underline-hover: var(--akzent-color);
    --menu-underline-neg-hover: white;
    --underline-color-link: transparent;
    --underline-color-link-hover: var(--akzent-color);
    /* input fields */
    --input-font-color: rgba(0, 0, 0, 1);
    --input-font-color-focus: rgba(0, 0, 0, 1);
    --input-border: var(--lightgrey-color);
    --input-border-focus: rgba(0, 0, 0, 0.6);
    /* mixed */
    --akzent-color: #dc0043;
    --lightgrey-color: lightgrey;
    --whitegrey-color: #f3f3f3;

    --logo-small-mainsite: url(../../../uploads/logos/lmr/logo_lmr_org_left.png);
    --logo-small-mainsite-neg: url(../../../uploads/logos/lmr/logo_lmr_neg_left.png);
}

@media screen and (min-width: 600px) {
    :root {
        --font-size-m_menu: 20px;
        --font-size-m_submenu: 18px;
    }
}

@media screen and (max-width: 999px) {
    h2 {
        margin-top: 2vw;
    }
}

@media screen and (max-width: 550px) {
    :root {
        --font-size-h2: 28px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
    }
    h2 {
        word-wrap: break-word;
    }
}