/* Core Stuff */
:root{
    --color-text:rgb(0, 0, 0);
    --color-text-muted:rgb(143, 143, 143);
    --color-text-contrast:rgb(213, 213, 213);

    --header-height: 100px;
    --footer-height: 100px;

    --section-gap: 5vh
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    /* font-size: 1rem; */
    font-size: clamp(1rem, 0.7rem + 0.6vw, 1.375rem);
    margin: 0;
    padding: 0;
    color:var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* color: #636363; */
    font-family: "Cal Sans";
    /* font-family: "Inter"; */
}

a {
    color:var(--color-text-muted);
    text-decoration: none;
}

a:hover {
}

section{
    margin: 0;
    padding: 0;
}

    div.padded{
        /* --padding-sides: calc( 100% / 10 ) */
        /* --padding-sides: 10%; */
        /* padding: 10vh var(--padding-sides); */

        /* padding: 10vh calc( ( ( 100% - 1000px ) / 4 ) + 100px ); */
        
        padding: var(--section-gap) clamp( 15px, (100% - 1000px) / 3, 30% );
    }

.header {
    height:var(--header-height);
}
#content {
    min-height: calc( 100vh - var(--header-height) - var(--footer-height) );
}

#content em{
    background-color: rgb(241, 241, 241);
    padding: 3px;
}

#content em:before {
  content: open-quote;
}

#content em:after {
  content: close-quote;
}


.header .logo {
    height: 100%;
    min-width:200px;
    /* background-color: rgba(157, 0, 0, 0.407); */
    display: flex;
    float: left;
    justify-content: center;
    align-items: center;

    img{
        width:100%;
        height:100%;
        object-fit: contain;
    }

    .page-title{
        padding-left: 20px;
    }
}

/* Menu Settings */
.main-nav{
    /* outline: 2px dashed orange;
    outline-offset: -2px; */
    height: 100%;
    font-family: "Cal Sans";
}

.main-nav ul {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-right: 5vw;
    display: flex;
    flex-direction: row;
    gap:10px;
    align-items: center;
    justify-content: right;
}

.main-nav ul li {
    display: inline-block;
    letter-spacing: normal;
}

.main-nav ul li a {
    position: relative;
    display: block;
    padding:5px;
    white-space: nowrap;
    transition: color .5s;
}

.main-nav > ul > li > a {
    border-radius: 1px;
}

/*Active dropdown nav item */
.main-nav ul li:hover > a {
    color:var(--color-text);
}

/* Selected Dropdown nav item */
.main-nav ul li.selected > a {
    color:var(--color-text);
}
.main-nav ul li.selected:hover > a {
    color:var(--color-text);
    /* cursor: default; */
}

/* Dropdown CSS */
.main-nav ul li {position: relative;}

.main-nav ul li ul {
    position: absolute;
    /* outline: 2px dashed green;
    outline-offset: -2px; */
    min-width: 100%;
    text-align: left;
    z-index: 999;

    display: none;
}
.main-nav ul li ul li {
    display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
    left: 100%;
    top: 0;
}

/* Active on Hover */
.main-nav li:hover > ul {
    display: block;
}

/* Child Indicator */
.main-nav .has-children > a {
    padding-right: 30px;
}
.main-nav .has-children > a:after {
    content: '🞃';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 0;
}

.main-nav .has-children .has-children > a:after {
    content: '\f105';
}



.footer {
    height: var(--footer-height);
    padding: var(--section-gap);
    background-color: #bebebe;
    font-size: .8rem;
}




.modular-image-single{

    .imgwrap{
        /* width:100%; */
        height:10vh;
        /* outline: 2px dashed green;
        outline-offset: -2px; */
        /* position: relative; */
    }

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        display: block;
    }

}





.modular-image-singleXXX{
    /* all but first: */
    /* margin-top: var(--section-gap);  */

    .imgwrap{
        width:100%;
        /* height:30vh; */
        /* outline: 2px dashed green;
        outline-offset: -2px; */
        position: relative;
    }

    .h30{
        height:30vh;
    }
    .h50{
        height:50vh;
    }
    .h70{
        height:90vh;
    }
    .h70{
        height:90vh;
    }

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        display: block;
    }

    .caption{
        position: absolute;
        /* font-size: 3rem; */
        bottom:8vh;
        right:8vh;
        max-width: 40%;
        padding: 3vh;
        padding-right: 2vh;
        background-color: rgba(255, 255, 255, 0.6);
        color:var(--text-color);
        /* outline: 2px dashed green;
        outline-offset: -2px; */
        
        h1,h2,h3,h4{
            margin-top: 0;
        }

        p{
            margin: 0;
            padding: 0;
        }
    }    
}

body section:first-of-type .modular-imagefullwidth{
    margin-top:0;
}


.modular-text{
    padding: var(--section-gap);
    /* outline: 2px dashed green;
    outline-offset: -2px; */

    display: flex;
    flex-direction: row;
    /* gap:50px; */
    /* gap:clamp(15px, 8% ,500px); */
    /* gap: 0 clamp(15px, calc(-13px + 3.5vw), 50px); */
    gap: 0 clamp(15px, calc(-53px + 8.5vw), 100px);
    justify-content: center;
    align-items: center;

}

@media (orientation: portrait) {

    :root{
        /* color:var(--section-gap) */
        --section-gap: 2vh;
    }

    section{
        outline: 2px dashed green;
        outline-offset: -2px;
    }

    div.padded{
        padding: 5vh 20px 10vh 20px;
    }
    .modular-text{
        flex-direction: column;
        gap: 5vh;
    }
    .imgwrap .caption{
        right:0;
        width:100%;
        max-width: 100%;
        text-align: center;
        padding: 1vh;
    }
}