/* 
CREDITS
fslightbox.js Plugin:
https://fslightbox.com/

Two Line Toggle (Burger Menu): 
https://codepen.io/rylanharper/pen/MoqBeG
*/
/* ----------------------- Fonts ----------------------- */
/* ------------------ Main Variables ------------------ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=IM+Fell+Great+Primer+SC&family=IM+Fell+Great+Primer:ital@0;1&display=swap');
:root{
  /*these variables are used with fslightbox*/
  --background-color:#F5F2E9; /*EFECE3*/
  --text-color:#444;
  --link-color:#716E65;
  --link-hover-color:#AEA99C;
  --body-font:"EB Garamond";
  --text-size:clamp(1.05em, 2.4vw, 1.175em);
  
    --title-font:"IM Fell Great Primer SC", serif;
    --nav-links-font:"IM Fell Great Primer", serif;

    /*header heights*/
    --header-height:3.15em; /* should be as tall or taller than logo image */
    --logo-image-height:3.15em; /* 3em or larger recommended */
    --number-of-links:4; /*used in a calculation for the gradient bg in the mobile menu*/
    
    /*container and gallery variables*/
    --container-max-width:1200px;
    --DESKTOP-gallery-columns: 4;
    --TABLET-gallery-columns: 3;
    --MOBILE-gallery-columns: 2;

    /*thumbnail aspect ratio and gap between thumbnails*/
    --thumbnail-aspect-ratio:1/1;
    --gallery-gap: clamp(10px, 1.5vw, 0.75em);

    /*visibility of logo image and text on desktop (1000px+) */
    --DESKTOP-logo-image-display:block;
    --DESKTOP-logo-text-display:block;

    /*visibility of logo image and text on tablets (700px - 100px) */
    --TABLET-logo-image-display:block;
    --TABLET-logo-text-display:block;

    /*visibility of logo image and text on mobile (700px and less) */
    --MOBILE-logo-image-display:block;
    --MOBILE-logo-text-display:none;
}
/* ----------------------- General ----------------------- */
body{
    background-color: var(--background-color);
    color:var(--text-color);
    font-family: var(--body-font);
    font-size:var(--text-size);
    padding:0;
    margin:0;
}
.modetoggle{
  background-color:var(--link-color);
  padding:0 0.5em 0.1em 0.5em;
  color:var(--background-color);
  border-radius:0.2em
}
.modetoggle:hover{
  color:var(--background-color)!important;
  background-color:var(--link-hover-color)!important;
}
img, video{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}
a{
    color:var(--link-color);
    text-decoration: none;
}
a:hover{
    color:var(--link-hover-color);
}
h1, h2{
    font-family:var(--title-font);
    margin:0;
    padding:0;
}
h1{ 
    /*used for site title only*/
    font-size:clamp(1.75em, 3vw, 2em);
    color:var(--link-color);
}
h2{ 
    /*used for gallery and post titles*/
    font-size:clamp(1.25em, 1.5vw, 1.5em);
    text-align: center;
    color:var(--link-color);
}
h2 small{
    font-size:clamp(1em, 1.5vw, 1.25em);
}
.centered{
    /*can use with text, images, and other elements that you'd like centered
    however, you can also use something like <span style="text-align:center"> 
    instead of this, and it will work regardless of what you have in your 
    css stylesheet */
    text-align:center;
}
summary{
    font-family:var(--title-font);
    font-weight:500;
    font-size:clamp(1.15rem, 1.5vw, 1.25rem); 
    text-align: center;
    margin-top:1em;
}
hr{
    margin:1em 0;
    border-top: 1px dashed var(--link-hover-color);
    border-left: none;
    border-right: none;
    border-bottom: none;
}
/* -------------------- Major Layout Styling -------------------- */
#container{
    max-width:var(--container-max-width);
    padding:1em;
    display:grid;
    gap:1em;
    margin:0 auto;
}
header{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-between;
    position:static;
    height:var(--header-height);
}
#narrow{
  max-width:650px;
  width:100%;
  margin:0 auto;
}
/* -------------------- Header -------------------- */
#logo{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: start;
    gap:1em;
}
#logo img{
    max-height:var(--logo-image-height);    
    width:auto;
    display:var(--DESKTOP-logo-image-display);
}
#logo h1{
    display:var(--DESKTOP-logo-text-display);
    white-space: nowrap;
}
#burger-toggle{display:none;}
.mobile-spacer{ 
    /*invisible on desktop/tablet, used in mobile 
    to prevent links and toggle button from overlapping */
    height:0;
    display:none;
}
#nav-links{
    background-color:none;
}
#nav-links a{
  font-family:var(--nav-links-font);
}
#nav-links ul{
    font-family:var(--body-font);
    font-weight:400;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: end;
    gap:clamp(1.5em, 3vw, 2em);
    list-style-type: none;
    padding:0;
    margin:0;
}
.on-link{
    color:var(--text-color)!important;
    font-weight:bold;
}
/* -------------------- Gallery -------------------- */
#gallery{
    grid-template-columns: repeat(var(--DESKTOP-gallery-columns), 1fr);
    display: grid;
    gap:var(--gallery-gap);
}
#gallery a{
    transition:.25s ease-in-out;
    position:relative;
    display:grid;
    gap:calc(var(--gallery-gap) - 0.25em);
}
#gallery a:hover{
    transform:scale(1.03);
    transition:.25s ease-in-out;
}
#gallery img, #gallery video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.gallery-thumb{
  aspect-ratio:var(--thumbnail-aspect-ratio);
  filter: drop-shadow(0 4px 2px #EAE6DB); /*#E4E0D6*/
  overflow:hidden;
}
.gallery-title{
    text-align:center;
    color:var(--link-color);
}
/* ------------------- Flex/Grid for Posts------------------- */
#custom-flex{
    display:flex;
    flex-direction: row;
}
#custom-grid{
    display:grid;
    grid-auto-flow: column;
}
#custom-flex-column{
    display:flex;
    flex-direction: column;
}
#custom-flex, #custom-grid, #custom-flex-column{
    margin:clamp(10px, 1.5vw, 1em) 0;
    gap:var(--gallery-gap);
    margin:0;
    padding:0;
    align-items: center;
}
#custom-flex a, #custom-grid a, #custom-flex-column a{
    text-decoration: underline dashed var(--link-hover-color);
}
.custom-text p:first-child{
    margin-top:0;
}
.custom-text p:last-child{
    margin-bottom:0;
}
.custom-image{
    line-height:0;
}
/* ----------------------- Tablet ----------------------- */
@media (min-width:700px) and (max-width:1000px) {
    #logo img{
        display:var(--TABLET-logo-image-display)
    }
    #logo h1{
        display:var(--TABLET-logo-text-display)
    }
    #gallery, .result-gallery{
        grid-template-columns: repeat(var(--TABLET-gallery-columns), 1fr);
    }
}
/* ----------------------- Mobile ----------------------- */
@media (max-width:700px) {
    #logo img{
        display:var(--MOBILE-logo-image-display)
    }
    #logo h1{
        display:var(--MOBILE-logo-text-display)
    }
    #gallery, .result-gallery{
        grid-template-columns: repeat(var(--MOBILE-gallery-columns), 1fr);
    }
    #similar-gallery{
        grid-template-columns: repeat(2, 1fr);
    }
    #gallery a:hover, #similar-gallery a:hover, .result-gallery a:hover{
        transform:none;
        opacity:0.75;
        transition:.25s ease-in-out;
    }
    .collapsible-flex{
        flex-direction: column!important;
    }
    .collapsible-grid{
        grid-auto-flow: row!important;
        grid-template-columns: 1fr!important;
    }
}
/* ---------- Start of mobile burger menu code ---------- */
/*comment this section out if you don't want to use the 
toggle button + popup menu*/
@media (max-width:700px) {
    header{
        justify-content: center;
    }
    #burger-toggle:checked + #nav-links {height:100%;opacity:1;}
    /* Two Line toggle by Rylan Harper: 
    https://codepen.io/rylanharper/pen/MoqBeG */
    .burger-wrapper{
        position:absolute;
        top:15px;
        right:15px;
        z-index:11;
    }
    .burger {
        z-index:11;
        display: flex;
        align-items:center;
        justify-content:center;
        outline: none;
        height: var(--header-height);
        width: 3.5rem;
        border: 0px;
        background: transparent;
        transition: all 250ms ease-out;
        cursor: pointer;
    }
    .burger:before, .burger:after {
        content: '';
        width: 25px;
        height: 2px;
        position: absolute;
        background: var(--link-color);
        transition: all 250ms ease-out;
        will-change: transform;
    }
    .burger:before {
        transform: translateY(-3px);
    }
    .burger:after {
        transform: translateY(3px);
    }
    /* line transition */
    .active.burger:before {
        width: 25px;
        height: 2px;
        transform: translateY(0) rotate(45deg);
    }
    .active.burger:after {
        transform: translateY(0) rotate(-45deg);
    }
    /* nav link popup */
    #nav-links{
        z-index:10;
        position:absolute;
        background-image:
            linear-gradient(
                to bottom,  
                var(--background-color) calc((2*var(--header-height)) 
                + (var(--number-of-links)*1.5em)), 
                transparent
            );
        top:0;
        right:0;
        text-align:right;
        height:0;
        width:100%;
        padding:0 30px;
        margin:0;
        overflow:hidden;
        transition: .25s ease-in-out;
        font-size:1.5em;
        justify-content:right!important;
    }
    #nav-links ul{
        gap:.5em;
        display:flex;
        flex-direction:column;
        align-items:right!important;
        justify-content:right!important;
    }
    .mobile-spacer{
        height:var(--header-height);
        display:block;
    }
}
/* ---------- End of mobile burger menu code ---------- */