@import "./bms-variables.css";
@import "./bms-fonts.css";

html {
    box-sizing: border-box;
    line-height: 1.55;
    scroll-behavior: smooth;
    /*font-size: 100%;*/
    font-size: 17px;

}

html,
body {
    background: var(--bms-color-bg);
    color: var(--bms-color-body);
    padding: 0;
    margin: 0;
}

body {
    /*font-family: "Roboto", sans-serif;*/
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    /*font-family: Inter, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;*/
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

header {
    min-height: var(--bms-header-height);
    background: var(--bms-color-bg);
    border-bottom: 1px solid var(--bms-color-border-dark);
    padding: 2rem 1vw 0;
}

header #header-banner {
    background: transparent url("../images/logobanner_500_noslogan.png");
    background-repeat: no-repeat;
    background-position: left; 
    opacity: 0.85;
    max-width: var(--bms-body-width);
    margin: 0 auto;
}

header .navbar-container {
    max-width: var(--bms-body-width);    
    margin: 2rem auto 1rem;
}

.navbar-item {
    margin-right: 2.5em;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--bms-footer-height);
    margin-top: 3rem;
    padding: 1rem 0;
    background: var(--bms-color-bg);
    border-top: 1px solid var(--bms-color-border-dark);
    filter: drop-shadow(0 -12px 8px var(--bms-color-bg));
  }

footer #copyright-message,
footer #cookie-message {
    font-size: 0.95rem;
    word-spacing: 0.1rem;
    opacity:0.7;
    padding: 0;
    margin: 0 auto 0.3rem;
    max-width: var(--bms-body-width);
}

/* body content */

#main {
    margin: 2rem auto;
    width: 100%;
    max-width: var(--bms-body-width);
    padding-bottom: calc(var(--bms-footer-height) + 2rem);
}

p, table, ul, ol, dl {
    /*max-width: 80ch;*/
    word-spacing: 0.1rem;
}

/* titles */

h1,
h2,
h3,
h4,
h5,
h6 {
    display: flex;
    align-items: left;
    font-family: helvetica, arial, sans-serif;
    font-weight: 600;
    line-height: 1.3rem;
    color: var(--bms-color-title);
}

h1 {
    font-size: 1.67rem;
}

h2 {
    font-size: 1.3rem;
    margin-top:2em;
}

h3 {
    font-size: 1.2rem;
    margin-top:2em;
}

h4 {
    font-size: 1.1rem;
}

/* links */

a, a:visited, a:hover {
    text-decoration:none!important;
}

a, a:visited {
    color: var(--bms-color-link);
}

a:hover {
    color: var(--bms-color-link-hover);
}

/* images */

figure {
    padding: 0;
    margin: 2rem 0 0;
}

figure.bms-full-width {
    /*text-align: center;*/
}

img {
    width: 100%;
    max-width: var(--bms-body-width);
}

.bms-thumbnail img {
    max-width: 300px;
}

/* details */

summary {
    color: var(--bms-color-link);
    cursor: pointer;
}

summary::marker {
    /*font-size: 1.2em;*/
}

details img {
    max-width: fit-content;
}

/* custom cloaked email */

span.contact {
    display: inline-block;
}


/* ************************************************** */
/* responsive stuff */

@media (max-width: 850px) {
    body {
        padding: 0 1.5rem;
    }
    header {
            max-width: var(--bms-body-width);
    }
}

@media (max-width: 641px) {
    :root { --bms-body-width: 90vw; }

    html {
        h1 {
            font-size: 1.3rem;
        }

        h2 {
            font-size: 1.15rem;
        }

    footer #copyright-message,
    footer #cookie-message {
        font-size: 0.8rem;
        margin-left: 0;
        }
    }

    img#bms-error {
        /*width: 100%;*/
    }

}

@media (max-width: 481px) {
    header #header-banner {
        background-size: 120%;
        margin: 0 auto;
    }    

    .navbar-item {
        font-size: 0.9rem;
        margin-right: 1em;
    }
}