/*
    (c)2021 - visuallizard.com

    General Layout Styles.
    Sets major blocking to elements that appear across the site in different templates.
    All can be removed and started from scratch or elements can be adjusted individually.
*/

.container {
/*
    Set site maximum width only here and use this class to centre and contain the content in browser window.
    Use "max-width" instead of "width" for auto-responsiveness.
    Keep horizontal padding to prevent content touching viewport edges. Adjust them in responsive.css for specific breakpoint if needed.

*/
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.full-bleed {
/*     alternative to .full-width - https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/ */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.site-header {
    display: block;
    position: relative;
    padding: 2rem 0 0 0;
    z-index: 5;
    background: #fff;
}
    .site-header > .container {
        text-align: center;
    }


.site-title {
    margin: 0 auto 1rem auto;
    transform: rotate(-1deg);
    transform-origin: center center;
}
    .site-title > a {
        text-decoration: none;
        color: inherit;
        line-height: 1;
    }
    .site-title:hover > a {

    }


/* Search Form */
.search-form {
    float: right;
    display: inline-flex;
    margin: .5em 0;
}
    .search-input {

    }
    .search-button {
        border-radius: 0;
    }


/* ! Announcement Ribbon */
.announcement {
    display: block;
    background: #006699;
    padding: 2rem 0;
    color: #fff;
    text-align: center;
}
    .announcement * {
        color: inherit;
    }
    .announcement > .container div > *:last-child {
        margin-bottom: 0;
    }
    .announcement h2 {
        margin: 0 0 0.5rem 0;
    }
    .announcement a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
    }
    .announcement a:hover {
        color: #000;
    }


/*     ! SECTIONS    */
main {
    position: relative;
    z-index: 3;
}
main::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("../../img/woodtexture.jpg");
    background-repeat: repeat;
    background-position: center top;
    opacity: 0.1;
}
    main .container {
        z-index: 2;
        max-width: 900px;
        padding: 2rem 0;
    }
    main div.galleries-set,
    main div.gallery-set {
        max-width: 1200px;
    }


    /* ! Regions for Layout Module */
    .region-row {
        display: flex;
    }
        .region-cell {
            width: 100%;
            padding: 2rem 5%;
        }
        .region-cell:first-child {
            padding-left: 0;
        }
        .region-cell:last-child {
            padding-right: 0;
        }


/* ! NAVIGATIONS  */
/* General for all levels and navs: */
.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-item {
    display: block;
    position: relative;
    vertical-align: top;
}
.nav-link {
    display: block;
    padding: .75rem 2rem;
    border: 1px solid #000;
    border-radius: 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: all .2s;

    line-height: 1.25;
}
.nav-link:hover {
    background: #006699;
    color: #fff;
}
.nav-item[data-nav-status='has-active'] > .nav-link {
    background: #006699;
    color: #fff;
}
.nav-item[data-nav-status='active'] > .nav-link {
    background: #006699;
    color: #fff;
}

    /*     Main nav specific (opinionated) */
    .main-nav {
        padding: 1rem 0;
    }

    /* Level 1 (horizontal) */
    .main-nav .nav-1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        column-gap: 1rem;
        font-size: 1.25rem;
    }
    .main-nav .nav-1 > li {

    }
    .main-nav .nav-1 > li > a {
        text-align: center;
    }

    /* all sub-lists (drop-downs & drop-sides) */
    .main-nav .sub-list {
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        width: 200px;
        margin: 0;
        padding: 0;

        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

        transition: all 0s;
        z-index: 1000;
    }
    .main-nav li              > .sub-list { visibility: hidden;  opacity: 0; transform: scale(.95); }
    .main-nav li:hover        > .sub-list { visibility: visible; opacity: 1; transform: scale(1); transition-duration: .3s; }
    .main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; transform: scale(1); }

    .main-nav .sub-list .sub-list { left: 100%; }

    .main-nav :nth-last-child(1) > .nav-2,
    .main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

    .main-nav :nth-last-child(1) > .nav-2 .nav-list,
    .main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

    .main-nav :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
    .main-nav :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after { transform: scaleX(-1); }



    /* Level 2 (the only drop-down ) */
    .main-nav .nav-2 {
        top: 100%;
    }

    .main-nav .nav-2 > li {

    }
    .main-nav .nav-2 > li > a {

    }


    /* Has-subs Chevron indicators */
    .main-nav .has-sub > .nav-link {
        padding-right: 1.5em;
    }
    .main-nav .has-sub > .nav-link:after {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: .25em;
        content: " ";
        background: no-repeat right center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23setColorCodeHere' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
        display: block;
        width: 1em;
        height: 1em;
        background-size: 100%;
        transform-origin: center center;
    }
    .main-nav .nav-1 > .has-sub > .nav-link:after {
        transform: rotate(90deg);
    }


/* ! Banners: defaults */
.banners {
    margin-bottom: 2em;
}
    .banner {
        position: relative;
    }
        .banner-link {
            display: block;
        }
            .banner-img {
                display: block;
                width: 100%;
                height: auto;
            }
            .banner-container {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                padding: 1em;
                padding: 5%;

                display: flex;
                align-items: center;
                justify-content: center;
            }
            .upperleft    .banner-container { align-items: flex-start; justify-content: flex-start; }
            .uppercentre  .banner-container { align-items: flex-start; justify-content: center;     text-align: center; }
            .upperright   .banner-container { align-items: flex-start; justify-content: flex-end;   }
            .middleleft   .banner-container { align-items: center;     justify-content: flex-start; }
            .middlecentre .banner-container { align-items: center;     justify-content: center;     text-align: center; }
            .middleright  .banner-container { align-items: center;     justify-content: flex-end;   }
            .lowerleft    .banner-container { align-items: flex-end;   justify-content: flex-start; }
            .lowercentre  .banner-container { align-items: flex-end;   justify-content: center;     text-align: center; }
            .lowerright   .banner-container { align-items: flex-end;   justify-content: flex-end;   }

            .banner-text {
                display: block;
                width: 100%;
                margin: 0;
                max-width: 800px;
                color: #fff;

                text-align: left;
                text-transform: none;
                transition: color .2s;
            }
            .banner-link:hover .banner-text {
                opacity: .5;
            }
                .banner-title {
                    color: inherit;
                    font-size: 50px;
                    font-size: calc(1.5em + 2vw);
                    margin-top: 0;
                    margin-bottom: 0;
                    text-transform: none;
                }
                .banner-subtitle {
                    color: inherit;
                    font-size: 30px;
                    font-size: calc(1em + 2vw);
                    margin-top: 0;
                    margin-bottom: 0;
                    text-transform: none;
                }
                .banner-desc {

                }

    /* ! Banners: Featured - slider */
    .featured-banners {

    }
        .featured-banners .banner-img {
            object-fit: cover;
            min-height: 200px;
            max-height: 500px;
            /* this sets vertical boundaries to Featured Banners
             and prevents them from shrinking or growing beyond set height values
             when viewport is either too short (mobile) or unknowingly large (wide monitors) */
        }

    /* ! Banners: Grid Fixed item width */
    .grid-fixed.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 0;
        padding: 0;
    }
        .grid-fixed .banner {
            display: inline-block;
            width: 25%;
            padding: 1em 1%;
        }
        .grid-fixed .banner-link {
            display: flex;
            align-items: center;
            height: 100%;
        }
        .grid-fixed .banner-img {
            transition: transform .3s;
        }
        .grid-fixed .banner-link:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-fixed .banner-title {
            font-size: 20px;
        }

    /* ! Banners: Grid Flex item width
    (usually for sponsor logos where width is unknown. Set module settings to something like Width:0 and Height:100px ) */
    .grid-flex.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 1em;
        padding: 0;
    }
        .grid-flex .banner {
            width: auto;
            margin: 1em 1%;
            padding: 0;
        }
        .grid-flex .banner-link {

        }
        .grid-flex .banner-img {
            display: block;
            width: auto;
            height: 100%;
            max-height: 100px;
            margin: 0;
            transition: all .3s;
        }
        .grid-flex .banner:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-flex .banner-title {
            font-size: 20px;
        }



/* ! Documents */
.documents {

}
    .doc-category {

    }
        .doc-category-title {

        }
        .doc-category-desc {

        }
    .doc-item {
        margin-bottom: 2rem;
    }
    .doc-desc {

    }
        .doc-desc *:last-child {
            margin-bottom: 0;
        }
    .doc-link {

    }
        .doc-link .icon {
            width: 1em;
            height: 1em;
            min-width: 1em;
            margin-right: .5rem;
        }


/* ! Site Footer  */
footer {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
    margin: 0;
    box-shadow: -500px 0 0 0 #444, 500px 0 0 0 #444;
    background-color: #444;
    color: #fff;
}
    footer .container {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2%;
        row-gap: 1rem;
        padding: 0;
        text-align: center;
    }
/* Social Media styles */
.social-set {
    display: flex;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 0.5rem;
    padding: 0;
    margin: 0;
}
    .social-set .social {
        display: block;
        position: relative;
        flex-basis: 2rem;
        max-width: 2rem;
        height: 2rem;
    }

/* ! Error Pages */
.error-header {
    font-size: 50px;
}
.error-code {
    font-size: 12px;
}