/*

// Custom Properties

*/

:root {

    /* Colors */

    --primary: #1B52BF;
    --primary-text: white;

    --dark: black;

    --canvas-light-h: 25; 
    --canvas-light-s: 100%; 
    --canvas-light-l: 97%;
    --canvas-light-o: 1;
    
    --canvas: hsla(
        var(--canvas-light-h),
        var(--canvas-light-s),
        var(--canvas-light-l),
        var(--canvas-light-o)
    );

    --canvas-border: hsla(0, 0%, 50%, 0.375);

    --body-font-family: 'EB Garamond', serif;
    
    --body-line-height: 1.4;
    
    --medium-width: calc( var(--narrow-width) * 2.25);
    --wide-width: calc( var(--narrow-width) * 3.25);

    --button-text-transform: uppercase;
    --button-letter-spacing: 0.125em;

    --form-field-padding-x: 0.75em;
}

.grid > li > a {
    --header-margin-bottom: 0.25em;
    --paragraph-margin-bottom: 0.5em;
}

#introduction .backdrop {
    --backdrop-fixed-height: 300px;
}

#the-latest [class*="grid--divider"] {
    --grid-divider-border-y-color: currentColor;
}

#dont-miss [class*="grid--divider"] {
    --grid-divider-border-x-color: currentColor;
}

/*

// Prefers Color Scheme

*/

@media (prefers-color-scheme: light) {

    :root {
        --primary: #1753cc;
        /* --subtle-fill-opacity: 3.75%; */
    }

    .opacity-color-scheme {
        filter: opacity(50%);
    }

    #site-nav {
        background-color: hsla(25, 100%, 97%, 0.875);
    }
}

@media (prefers-color-scheme: dark) {

    :root {
        --primary: #0055ff;
        /* --canvas: hsla(0, 0%, 0%, 0.90); */
    }

    .theme-canvas--prefers {
        --dark-border: hsla(0, 0%, 100%, 0.2);
    }

    .opacity-color-scheme {
        filter: opacity(33%);
    }

    #site-nav {
        background-color:  hsla(0, 0%, 0%, 0.875);
    }

}

/*

// Sans-serif Font

*/

.button,
.backdrop__media__credit,
.sans-serif {
    font-family: 'Lato', sans-serif;
}

.grid > li > a {
    display: block;
    width: 100%;
    height: 100%;
}

.grid > li > a:hover,
.grid > li > a:focus {
    text-decoration: unset !important;
    opacity: 0.95;
}

/*

// Global Header (Custom)

*/

.site-nav {
    --site-nav-padding-x: var(--spacer-2);
    --site-nav-padding-y: var(--spacer-2);

    display: grid;

    align-items: center;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-areas:
        "toggle-menu brand toggle-search"
        "nav nav nav"
        "search search search";

    font-size: var(--font-size-sm);
}

.site-nav__brand,
.site-nav__toggle-menu,
.site-nav__toggle-search,
.site-nav__search
 {
    padding: var(--site-nav-padding-y) var(--site-nav-padding-x);
}

.site-nav__brand {
    grid-area: brand;
    display: flex;
    justify-content: center;
    align-self: center;
}

.site-nav__toggle-menu {
    grid-area: toggle-menu;
}

.site-nav__nav {
    grid-area: nav;
}

.site-nav__toggle-search {
    grid-area: toggle-search;

    display: flex;
    justify-content: end;
}

.site-nav__search {
    grid-area: search;
}

@media (min-width: 1340px) {

    .site-nav {
        grid-template-areas:
            "nav brand search";
    }

    .site-nav__toggle-menu,
    .site-nav__toggle-search {
        display: none;    
    }

    .site-nav__nav,
    .site-nav__search {
        display: flex;
        height: auto;
        overflow: unset;
        visibility: visible;
        transition: none;
    }

    .site-nav__search {
        justify-content: end;
    }
}