/*
 Description:  SoulDiscovery Site Header Variables Style Sheet
 Author:       Timothy Disney
 Author URI:   https://www.timothydisney.co.uk
 Version:      1.0
 Domain:       https://www.souldiscovery.co.uk
*/

/* ----------------------------- Style Sheet ----------------------------- */
/* INDEX:
- Header
-- Desktop Header Formatting
-- Mobile Header Formatting
-- Main Menu
-- Menu Shopping Cart
-- Filter Menu
--- Filter Menu Left
--- Filter Menu Right
--- Filter Widget
--- Filter Widget (Blog Specific Settings)
--- Filter Widget (Podcast Specific Settings)
--- Filter Widget (Shop Specific Settings)
--- Search Widget
-- Global Hero Settings
-- Index Hero Section
--- Index Hero Blog Section
--- Index Hero Podcast Section
--- Index Hero Shop Section
-- Default Hero Section
-- Contact Hero Section
-- Podcast Hero Section
-- Shop Hero Section
- Responsive Formatting
*/

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ---------------------------------------------------------- Header Formatting ---------------------------------------------------------- */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

header {}

.header-global {background-color: var(--sd_blue-dk);}
.header-global .text-lightBlue {font-weight: bold;}


/* ---------------------------------------------------------- Desktop Header Formatting ---------------------------------------------------------- */

.header-desktop > * {margin-block-start: 0rem;}
.header-desktop {
    color: var(--white);
    position: relative;
    display: grid;
     grid-template-columns: 1fr 30% 1fr;
     justify-content: stretch;
     align-items: stretch;
    z-index: 50;
}

.header-desktop-social {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 12px 0px 12px 20px;
    font-family: brown_lt, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: flex;
     justify-content: flex-start;
     align-items: center;
}

.header-desktop-logo {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    padding: 20px 20px 10px 20px;
    border-radius: 0px 0px 14px 14px;
    display: flex;
     justify-content: center;
     align-items: center;
}
.header-desktop-logo img {max-width: 300px !important;}

.header-desktop-nav {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    padding: 12px 20px 12px 0px;
    font-family: brown_lt, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: flex;
     justify-content: flex-end;
     align-items: baseline;
     gap: 10px;
}
.nav-contact-link-desktop {display: inline;}


/* ---------------------------------------------------------- Mobile Header Formatting ---------------------------------------------------------- */

.header-mobile {
    color: var(--white);
    position: relative;
    padding: 15px 30px;
    z-index: 50;
    display: none;
}

.header-mobile-logo {padding: 15px 0px;}
.header-mobile-logo img {max-width: 250px !important;}

.header-mobile-menu {}
.header-mobile-menu .material-icons-round {font-size: 40px;}
.header-mobile-menu-docker {
    display: none;
    background-color: var(--sd_blue-dk);
}

.header-mobile-nav {
    font-family: brown_lt, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.nav-contact-link-mobile {display: none;}

.header-mobile-social {}


/* ---------------------------------------------------------- Main Menu ---------------------------------------------------------- */



/* ---------------------------------------------------------- Menu Shopping Cart ---------------------------------------------------------- */

.header-cart-link {
    display: flex;
     justify-content: center;
     align-items: center;
     gap: 3px;
}
.header-cart-link:hover {
    color: var(--sd_orange);
    text-decoration: none;
}
.header-cart-link .material-icons-round {font-size: unset;}

.header-cart-count {margin: 2px 0px -2px 0px;}


/* ---------------------------------------------------------- Filter Menu ---------------------------------------------------------- */

.filter-bar, .filter-bar > * {margin-block-start: 0rem;}
.filter-bar {
    font-family: brown_rg, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: x-large;
    padding: 12px 25px 5px 25px;
    background-color: var(--sd_grey-lt);
    position: relative;
     top: -55px;
    display: grid;
     grid-template-columns: auto auto;
     align-items: start;
     justify-content: stretch;
}

.filter-bar-link-text {font-size: 28px;}


/* ----------------------------- Filter Menu Left ----------------------------- */
.filter-bar-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.filter-bar-button, .filter-bar-button-off {
    width: fit-content;
    display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 5px;
}
.filter-bar-button {cursor: pointer;}
.filter-bar-button:hover {color: var(--sd_blue-md);}
.filter-bar-button.active {color: var(--sd_blue);}
.filter-bar-button.active:hover {color: var(--sd_red);}

.filter-bar-button .material-icons-round,
.filter-bar-button-off .material-icons-round {
    margin: 2px 0px 0px 0px;
    font-size: 28px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.filter-bar-button.active .material-icons-round {
    transform: rotate(90deg);
}

.filter-bar-button .filter-bar-link-text {}

.filter-bar-button-off {
    opacity: 0.5;
    color: var(--sd_blue);
}


/* ----------------------------- Filter Menu Right ----------------------------- */
.filter-bar-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
     justify-content: flex-end;
     align-items: flex-start;
     gap: 5px;
}
.filter-bar-right .filter-bar-link-text {padding: 0px 40px 0px 0px;}


/* ----------------------------- Filter Widget ----------------------------- */

.filter-bar-options {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    max-height: 0;
    font-size: large;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}
.filter-bar-options.active {
    opacity: 1;
}

.filter-column {
    /* height: 100%; */
    padding: 10px;
    border-radius: 8px;
    background-color: var(--white);
}
.filter-column label {cursor: pointer;}
.filter-column label:hover {color: var(--sd_grey-dk);}

.filter-column .material-icons-round {color: var(--sd_buff);}

.filter-subcategories {
    padding: 0px 0px 0px 10px;
    display: flex;
     flex-direction: column;
}

.filter-count {
    color: var(--white);
    background: var(--sd_blue);
    padding: 4px 3px;
    border-radius: 6px;
    font-size: 0.75em;
    opacity: 0.6;
    vertical-align: text-top;
}

.filter-form-submit {
    margin: 0px 0px 5px 0px;
    display: flex;
     flex-direction: row;
     justify-content: flex-start;
}

.filter-submit, .shop-filter-submit {background-color: var(--sd_blue-form);}
.filter-submit:hover, .shop-filter-submit:hover {background-color: var(--sd_blue-form-hv);}
.filter-clear, .shop-filter-clear {background-color: var(--sd_red);}
.filter-clear:hover, .shop-filter-clear:hover {background-color: var(--sd_red-hv);}


/* ----------------------------- Filter Widget (Blog Specific Settings) ----------------------------- */

.filter-form {
    display: grid;
     grid-template-columns: auto auto auto;
     /* align-items: start; */
     gap: 10px;
}

.filter-form .filter-column:nth-child(3) {grid-column: 1 / 2; grid-row: 1 / 2}
.filter-form .filter-column:nth-child(4) {grid-column: 1 / 2; grid-row: 2 / 3}
.filter-form .filter-column:nth-child(5) {grid-column: 1 / 2; grid-row: 3 / 4}
.filter-form .filter-column:nth-child(6) {grid-column: 2 / 3; grid-row: 1 / 4;}
.filter-form .filter-column:nth-child(7) {grid-column: 3 / 4; grid-row: 1 / 4;}

.filter-form .filter-form-submit {grid-column: 1 / 4;}


/* ----------------------------- Filter Widget (Podcast Specific Settings) ----------------------------- */

.filter-podcast {
    display: flex;
     gap: 12px;
}

.filter-podcast-link {
    display: flex;
     gap: 5px;
}


/* ----------------------------- Filter Widget (Shop Specific Settings) ----------------------------- */

.shop-filter-form {
    display: grid;
     grid-template-columns: auto auto;
     gap: 10px;
}

.shop-filter-form .filter-form .filter-column:nth-child(3) {grid-column: 1 / 2; grid-row: 1 / 2}
.shop-filter-form .filter-form .filter-column:nth-child(4) {grid-column: 2 / 3; grid-row: 1 / 2}

.shop-filter-form .filter-form-submit {grid-column: 1 / 3;}


/* ----------------------------- Search Widget ----------------------------- */

.filter-bar .search-form {
	position: absolute;
	 right: 20px;
	 top: 8px;
}

.filter-bar .search-form label {
    padding: 5px 0px 5px 100px;
    cursor: pointer;
}

.filter-bar .search-field {
    width: 1px;
    height: 37px;
	padding: 0px 5px 0px 40px;
    border: none;
	cursor: pointer;
	background-color: transparent;
	background-image: url(../images/icons/search.svg);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	position: relative;
	-webkit-transition: width 0.4s ease, background 400ms ease;
	transition:         width 0.4s ease, background 400ms ease;
}

.filter-bar .search-field:focus {
	width: 300px;
	border: 2px solid var(--sd_buff);
	outline: 0px;
    cursor: text;
    background-color: var(--white);
}

.search-form .search-submit {display: none;}

.filter-bar input:-internal-autofill-selected {
    width: 300px;
    padding: 0px 3px 0px 8px;
	border: 2px solid var(--sd_buff);
}


/* ---------------------------------------------------------- Global Hero Settings ---------------------------------------------------------- */

.hero-index, .hero-default, .hero-contact, .hero-podcast, .hero-shop {
    color: var(--white);
    font-family: brown_rg, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: xx-large;
    margin-block-start: 0rem;
    border-bottom: 7px solid var(--sd_blue-dk);
    position: relative;
     top: -55px;
    z-index: 10;
}

.hero-default, .hero-contact, .hero-podcast, .hero-shop {
    height: 300px;
    background-color: var(--sd_blue-dk);
     background-repeat: no-repeat;
     background-size: cover;
    display: flex;
     justify-content: center;
     align-items: flex-end;
}

.hero-title {
    width: 100%;
    display: flex;
     align-items: center;
     justify-content: center;
}
.hero-default .hero-title, .hero-contact .hero-title, .hero-podcast .hero-title, .hero-shop .hero-title {padding: 0px 0px 10px 0px;}

#hero-title-text {
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.7s ease;
    opacity: 1;
}
#hero-title-text.fade {opacity: 0;}

.hero-title-graphic-left {
    flex: 1;
    display: flex;
     align-items: center;
     justify-content: flex-end;
}
.hero-title-graphic-right {
    flex: 1;
    display: flex;
     align-items: center;
     justify-content: flex-start;
}


/* ---------------------------------------------------------- Index Hero Section ---------------------------------------------------------- */

.hero-segment {
    margin-block-start: 0rem;
    padding: 0px 0px 15px 0px;
    display: flex;
     justify-content: flex-end;
     align-items: center;
     flex-direction: column;
}

.hero-index {
    display: grid;
     grid-template-columns: auto 42%;
     justify-content: stretch;
     align-items: stretch;
}

.hero-index-link {
    width: stretch;
    position: absolute;
    z-index: 20;
}
.hero-index-link-blog-top {height: 575px; top: 0px;}
.hero-index-link-blog-bot {height: 70px; top: 645px;}
.hero-index-link-podcast {height: 360px; top: 0px;}
.hero-index-link-shop {height: 355px; top: 360px;}

.hero-index-icon {opacity: 85%;}
.hero-index-icon .material-icons-round {font-size: unset;}


/* ----------------------------- Index Hero Blog Section ----------------------------- */

.hero-index-blog {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    height: 700px;
    border-right: 2px solid var(--sd_grey-md);
    background-color: var(--sd_blue-dk);
    background-image: url("../images/hero/splash-blog.jpg");
     background-position: top center;
     background-repeat: no-repeat;
     background-size: cover;
}

.hero-index-blog-icon {font-size: 60px;}

.hero-index-blog-info {
    width: 100%;
    padding: 0px 0px 10px 0px;
    background-color: var(--sd_overlay-blue-dk);
    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.hero-index-blog-contributorIcons {
    height: 70px;
    display: flex;
     align-items: flex-end;
     justify-content: center;
     flex-wrap: wrap;
     gap: 8px;
}
.contributorIcon {
    width: 40px;
    margin: 0px 2px;
    transition: all 0.1s ease;}
.contributorIcon:hover {
    width: 44px;
    margin: 0px 0px;
}

.hero-index-blog-graphic {
    height: 4px;
    width: 100%;
    margin: 0px 25px;
    border-radius: 3px;
    background-color: var(--sd_blue);
}


/* ----------------------------- Index Hero Podcast Section ----------------------------- */

.hero-index-podcast {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    border-bottom: 2px solid var(--sd_grey-md);
    background-color: var(--sd_blue-dk);
    background-image: url("../images/hero/splash-podcast.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}

.hero-index-podcast-icon {
    height: stretch;
    font-size: 100px;
    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.hero-index-podcast-icon .material-icons-round {position: relative; top: 40px;}


/* ----------------------------- Index Hero Shop Section ----------------------------- */

.hero-index-shop {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: var(--sd_blue-dk);
    background-image: url("../images/hero/splash-shop.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}

.hero-index-shop-icon {font-size: 60px;}

.hero-index-shop .hero-title {padding: 0px 0px 10px 0px;}

.hero-index-shop-graphic {
    height: 4px;
    width: 100%;
    margin: 0px 25px;
    border-radius: 3px;
    background-color: var(--sd_orange);
}


/* ---------------------------------------------------------- Default Hero Section ---------------------------------------------------------- */

.hero-default {
    background-image: url("../images/hero/hero-default.jpg");
     background-position: bottom center;
}

.hero-default-graphic {
    height: 4px;
    width: 40%;
    margin: 0px 25px;
    border-radius: 3px;
    background-color: var(--sd_orange);
}


/* ---------------------------------------------------------- Contact Hero Section ---------------------------------------------------------- */

.hero-contact {
    background-image: url("../images/hero/hero-contact.jpg");
     background-position: center center;
}

.hero-contact-graphic {
    height: 4px;
    width: 40%;
    margin: 0px 25px;
    border-radius: 3px;
    background-color: var(--sd_orange);
}


/* ---------------------------------------------------------- Podcast Hero Section ---------------------------------------------------------- */

.hero-podcast {
    background-image: url("../images/hero/hero-podcast.jpg");
     background-position: center center;
}
.hero-podcast .hero-title-text, .hero-index-podcast .hero-title-text {padding: 5px 0px 0px 0px;}

.hero-podcast-graphic {
    width: stretch;
    max-width: 200px;
    max-height: 40px;
    margin: 0px 20px;
}


/* ---------------------------------------------------------- Shop Hero Section ---------------------------------------------------------- */

.hero-shop {
    background-image: url("../images/hero/hero-shop.jpg");
     background-position: top center;
}

.hero-shop-graphic {
    height: 4px;
    width: 40%;
    margin: 0px 25px;
    border-radius: 3px;
    background-color: var(--sd_orange);
}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------- Responsive Formatting -------------------------------------------------------- */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media (max-width: 1200px) {
    .nav-contact-link-desktop {display: none;}
    .nav-contact-link-mobile {display: inline;}
}


@media (max-width: 800px) {
    .header-desktop {display: none;}
    .nav-contact-link-desktop {display: none;}
    .nav-contact-link-mobile {display: inline;}

    .header-mobile {
        display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
    }

    .header-mobile-nav {
        width: 90%;
        display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
    }


    .hero-index, .hero-default, .hero-contact, .hero-podcast, .hero-shop {top: 0px;}
    .hero-default, .hero-contact, .hero-podcast, .hero-shop {height: 200px;}

    .hero-segment {padding: 0px 0px 8px 0px;}

    .hero-index {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-index-link-blog-top {height: 116px; top: 0px;}
    .hero-index-link-blog-bot {height: 60px; top: 250px;}
    .hero-index-link-podcast {height: 190px; top: 310px;}
    .hero-index-link-shop {height: 190px; top: 500px;}

    .hero-index-blog {
        height: 300px;
        border-bottom: 2px solid var(--sd_grey-md);
    }
    .hero-index-blog-info {padding: 20px 0px 5px 0px;}
    .hero-index-blog-contributorIcons {
        width: 90%;
        height: unset;
        gap: 5px;
    }

    .hero-index-shop, .hero-index-podcast {height: 180px;}
    .hero-index-shop-icon, .hero-index-podcast-icon {font-size: 60px;}

    .hero-index-podcast-icon {
        height: unset;
        display: block;
    }
    .hero-index-podcast-icon .material-icons-round {top: 0px;}

    .hero-index-shop .hero-title {padding: 0px 0px 0px 0px;}
}


@media (max-width: 400px) {
    .header-mobile-logo img {max-width: 300px !important;}

    .header-mobile-nav {
         justify-content: space-evenly;
    }

    .hero-index-blog-contributorIcons {width: 95%;}
}