@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Montserrat&family=Open+Sans:wght@400;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap'); */

/* STANDARD SIZES 

1200px - main content area width
1000px - landscape orientation photo in content article
600px - text width and portrait orientation photo width in content article
550px - breakpoint for narrow devices

*/

/* BASE STYLES */

HTML { font-size: 100%; }

BODY { font-family: 'IM Fell English Regular', 'EB Garamond', serif; margin: 0; }
/* BODY { font-family: 'Newsreader', 'IM Fell English Regular', 'EB Garamond', serif; margin: 0; } */

BODY A:has(> SUP),
.footnotes A.footnote-back { text-decoration: none !important; }

/* HEADER STYLES */

HEADER {
    text-align: center; 
    background-color: #083947;
    /* border-style: double; border-width: 5px; border-color: white; */
    display: flex;
    justify-content: center;
    align-items: center;
}

HEADER DIV.header-logo {
    margin-right: 0.8rem;
}

HEADER DIV.header-logo IMG {
    opacity: 1.0;
}

HEADER A.site-name { 
    font-family: "IM Fell English SC", serif; 
    font-size: 4rem; 
    text-decoration: none;
    color: white; 
    white-space: nowrap;
    overflow: hidden;
}

/* Responsive changes to header */
@media screen and (max-width: 550px) {
    HEADER A.site-name { 
        font-size: 2em; 
    }
}

NAV.top-nav {
    background: black;
    color: white;
}

NAV DIV.top-nav-inner {
    padding: 0.25em 0;
}

NAV DIV.top-nav-inner A {
    text-decoration: none;
    color: white;
}

/* GENERAL STYLES */

DIV.section-front {
    height: 150px; 
}

DIV.main-content { 
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

DIV.main-content IMG.featured {
    max-width: 100%;
}

DIV.main-content DIV.block-text {
    max-width: 600px;
    margin: 0 auto;
}

H1, H2, H3, H4, H5, H6 { font-family: "IM Fell English", serif; color: #083947; }

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { 
    /* Any header that immediately follows another header */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #aaaaaa; 
    margin-block-start: -1em;
}

/* Handle max width - 1200px */

NAV DIV.top-nav-inner,
DIV.main-content,
DIV.section-front { 
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1199px) {
    NAV,
    DIV.main-content,
    DIV.section-front { 
		margin: 0;
		border: 0;
		padding: 0 10px;
	}
} 
@media screen and (max-width: 550px) {
    DIV.section-front { 
		padding: 0;
	}
} 

/* STANDARD LAYOUTS */

/* 3 column grid */

.grid3-container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: calc(33% - 0.67rem) calc(33% - 0.67rem) calc(33% - 0.67rem);
}

.grid3-container > DIV.hero-image {
    grid-column: 1 / span 2;
}

.grid3-container > DIV.hero-text A {
    text-decoration: none; color: black;
}

.grid3-container > :is(h1, h2, h3, h4, h5, h6) {
    grid-column: 1 / span 3;
}

DIV.grid3-container > A {
    text-decoration: none;
    color: black;
}
.grid3-container DIV.alt { background: #083947; padding: 1rem; color: white; }
.grid3-container DIV.alt :is(h1, h2, h3, h4, h5, h6),
.grid3-container DIV.alt :is(h1, h2, h3, h4, h5, h6) A
 { color: white; text-decoration: none; }

.grid3-container IMG { max-width: 100%; }

.grid3-container .grid-item IMG ~ H3 { margin-top: 1rem; } 

.grid3-container .grid-item > :is(h1, h2, h3, h4, h5, h6),
.grid3-container .hero-text :is(h1, h2, h3, h4, h5, h6) { 
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.grid3-container .hero-text DIV.item-label,
.grid3-container .grid-item DIV.item-label {
    /* Appears above an item heading in a grid layout */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #cccccc; 
    text-transform: uppercase;
    font-size: 0.8rem;
}

.grid3-container .grid-item IMG ~ DIV.item-label {
    margin-top: 0.5rem;
}

.grid3-container .grid-item DIV.item-label ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0.5rem;
}
@media screen and (max-width: 550px) {
    .grid3-container {
        display: block;
    }
    .grid3-container > A,
    .grid3-container DIV.hero-text {
        margin-bottom: 3rem;
        display: block;
        background-color: #087694;
    }
    .grid3-container > A DIV.grid-item,
    .grid3-container > DIV.hero-text {
        padding-bottom: 10px;
    }
    
    .grid3-container > A :is(h1, h2, h3, h4, h5, h6),
    .grid3-container .hero-text :is(h1, h2, h3, h4, h5, h6),
    .grid3-container .grid-item DIV.item-label,
    .grid3-container .hero-text DIV.item-label,
    .grid3-container DIV.item-description {
        padding: 0 10px;
        color: white;
    }

    .grid3-container DIV.hero-text > :is(h1, h2, h3, h4, h5, h6),
    .grid3-container DIV.hero-text > DIV.item-label,
    .grid3-container DIV.grid-item > :is(h1, h2, h3, h4, h5, h6):first-child
     {
        padding-top: 10px;
    }
    
    .grid3-container > A DIV.alt :is(h1, h2, h3, h4, h5, h6) {
        padding: 0;
    }
}

/* Header with photo box */

DIV.header-2box { 
    display: grid; 
    grid-gap: 1rem; 
    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
    background-color: #083947;
    color: white;
}

DIV.header-2box > DIV { padding: 1rem; }
DIV.header-2box > DIV IMG { max-width: 100%; }
DIV.header-2box > DIV :is(h1, h2, h3, h4, h5, h6):first-child { color: white; }

@media screen and (max-width: 550px) {
    DIV.header-2box { 
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        background: white;
    }
    DIV.header-2box > DIV H1:first-child { color: black; }
    DIV.header-2box H1 {
        margin-top: 0;
    }
}

/* PAGE SPECIFIC STYLES: HOMEPAGE */

BODY.template-homepage DIV.main-content { padding-top: 1rem; }

/* PAGE SPECIFIC STYLES: MAP */

BODY.template-map DIV.header-2box > DIV:first-child { 
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
BODY.template-map DIV.header-2box > DIV:nth-child(2) { 
    position: relative; 
}

BODY.template-map DIV.header-2box > DIV:nth-child(2) .view-in-interactive { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #08394788;
    padding: 0.8rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    border-radius: 5px;
}
BODY.template-map DIV.header-2box > DIV:nth-child(2) A DIV.view-in-interactive {
    color: white;
    text-decoration: none;
}

BODY.template-map DIV.header-2box > DIV:nth-child(2) A DIV.view-in-interactive I {
    margin-right: 0.5rem;
}

@media screen and (max-width: 550px) {
    BODY.template-map DIV.header-2box > DIV:first-child { 
        order: 2;
        padding: 0;
    }
    BODY.template-map DIV.header-2box > DIV:nth-child(2) { 
        order: 1;
        padding: 0;
        margin: 0 -10px;
    }
    BODY.template-map DIV.header-2box > DIV:nth-child(2) A DIV.view-in-interactive {
        font-size: 0.8rem;
    }
    DIV.page-body IMG { max-width: 100%; height: auto; }
}

/* PAGE SPECIFIC STYLES: MAP INDEX */

BODY.template-map-index { }

/* PAGE SPECIFIC STYLES: MAP SEARCH */

BODY.template-map-search { }

BODY.template-map-search FORM.mapsearch { display: flex; }
BODY.template-map-search INPUT#autocomplete { flex-grow: 1; }
BODY.template-map-search FORM.mapsearch DIV.search-icon { padding-left: 1rem; }        

BODY.template-map-search .autocomplete-suggestions { font-family: 'Open Sans', sans-serif; }
BODY.template-map-search DIV.autocomplete-suggestion { 
    font-family: 'Open Sans', sans-serif; 
    border: 1px solid #ccc;
    padding: 0.25rem;
}