/*
Theme Name: twentytwentyone Child
Description: A child theme of the Twenty Twenty One WP Theme
Author: Chance of Outdoors
Author URI: chanceofoutdoors.com
Template: twentytwentyone
Version: 1.0
*/



/***############### General Styling Reset and Setup: reset, grid, typography, general classes and divs.  Mobile-first styling setup. ***/
/*No Reset styles*/

/*For ease of development and maintainability, combine an element's width, padding, margin, and border into a final value, and enable this on all elements. */
/*Also reduce the chance of font-resizing on mobile devices.*/
html { box-sizing: border-box; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }

/* General Resuable Classes */
.hidden-sr-only { display: block; clip-path: polygon(0 0, 0 0, 0 0, 0 0); overflow: hidden; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; }
.width-100-percent { width: 100%; }
.clear-both { clear: both; }

/*No typography, no general styling classes included*/

/***########## End of General Styling Reset and Setup ****/







/***############### Beginning of Website-specific style sheet. ****/
/*Site color scheme.  Tetrad color scheme, with 30 degrees variation.  */
/*
Color 1: #9b7653     (155, 118, 83)   earth brown
Color 2: #3e4869     (62, 72, 105)    dark blue
Color 3: #9b8553     (155, 133, 83)   light brown
Color 4: #34595f     (52, 89, 95)     dark blue-green
*/

:root {
    /*Brand colors*/
    --color-1: #9b7653;
    --color-2: #3e4869;
    --color-3: #9b8553;
    --color-4: #34595f;
    
    /*Brand Theme Conversion*/
    --global--color-gray: var(--color-1);
    
    /*Header*/
    --branding--title--font-size-mobile: var(--heading--font-size-h4);
    --branding--title--font-size: 2.75rem;  
    
}


/*Basic styling*/


/*General Theme styling*/
body { font-size: 16px; }
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
body .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { outline: 2px solid var(--color-1); outline-offset: 2px; }
.site-content { position: relative; }
.post-thumbnail, 
.entry-content .wp-audio-shortcode, 
.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 
[class*="inner-container"] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 
.default-max-width { max-width: var(--responsive--alignwide-width); }


/*Header*/
.site-header { display: block; position: relative; max-width: 100%; min-height: 250px; padding-top: calc(0.75 * var(--global--spacing-vertical)); padding-bottom: calc(3 * var(--global--spacing-vertical)); z-index: 101; }
.header-inner-wrapper { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: var(--global--spacing-vertical); max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; }
.site-branding { display: none; padding: 10px; border: 2px solid rgba(42, 42, 42, 1); border-radius: 4px; background-color: rgba(155, 118, 83, 0.94); }
.site-header:not(.has-logo).has-title-and-tagline .site-branding { max-width: calc(100% - 100px) }
.site-title { font-size: calc(0.95 * var(--branding--title--font-size-mobile)); font-weight: 600; text-shadow: 1.5px 2px rgba(42, 42, 42, 1); color: rgba(255, 255, 255, 1); }
.page-header { border-bottom: 0; }
.site-main > * { margin-top: 0; margin-bottom: 0; }
.site-title > a { text-decoration: none; font-weight: 600; }
.site-title a:hover, 
.site-title a:focus { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #ffffff; text-decoration-thickness: 2px; color: rgba(255, 255, 255, 1); }
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: inherit; }
.site-description { text-shadow: 0.75px 1px rgba(42, 42, 42, 1); font-weight: 600; color: #ffffff; }


/*Nav*/
.primary-navigation-open .menu-button-container { background-color: rgba(155, 118, 83, 1); }
.primary-navigation > .primary-menu-container { background-color: rgba(155, 118, 83, 1); }

.primary-navigation .menu-button-container .mobile-title-container__title { font-size: var(--global--font-size-md); font-weight: 600; color: rgba(255, 255, 255, 1); text-shadow: 1.5px 2px rgba(42, 42, 42, 1); }
.primary-navigation a:hover, 
.primary-navigation a:link, 
.primary-navigation a:visited { color: rgba(255, 255, 255, 1); transition: 0.1s ease-in; }
.primary-navigation a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { outline: none; background: none; }

.menu-button-container .button.button,
.menu-button-container .button:focus:not(.has-background) { color: #ffffff; }
.primary-navigation-open .menu-button-container .button.button { color: var(--color-1); }

.menu-button-container { display: block; position: fixed; width: 100%; padding-top: 5px; padding-bottom: 5px; background-color: rgba(155, 118, 83, 0.70); }
.mobile-title-container { position: absolute; top: 2px; left: 15px; }

.menu-button-container #primary-mobile-menu { color: var(--global--color-white); }


/*Search*/
.search-controls { display: none; }
.search-form.show .search-controls { display: block; position: relative; top: 70px; }
.search-form .search-form__search-icon { display: block; position: absolute; top: 18px; right: 92px; cursor: pointer; color: #ffffff; }
.search-form .search-form__search-icon:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }
.search-form .search-form__close-search-icon { display: none; position: absolute; top: 18px; right: 92px; cursor: pointer; color: #ffffff; }
.search-form .search-form__close-search-icon:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }

#searchForm.show .search-form__search-icon { display: none; }
#searchForm.show .search-form__close-search-icon { display: block; }


/*Content*/


/*Widget area*/
.widget-area { margin-top: var(--global--spacing-vertical); }

input[type="submit"] { transition: 0.1s ease-in; }
input[type="submit"]:hover { transition: 0.1s ease-in; }


/*Footer*/
.footer-content-section { }
.footer-section { text-align: center; }

.footer-navigation-inner-wrapper { list-style-type: none; }
.footer-navigation-inner-wrapper li { padding-bottom: 12px; font-size: 18px; }
.footer-navigation-inner-wrapper li a { text-decoration: none; }
.footer-navigation-inner-wrapper li.current-menu-item a { text-decoration: underline; }

.footer-navigation-wrapper li .svg-icon { transform: scale(1.2); }
.footer-navigation-wrapper li .svg-icon:hover { transform: scale(1.5); }

.site-footer > .site-info .site-name { font-size: var(--global--font-size-lg); }
.site-footer > .site-info .copyright-info { margin-top: calc(0.5 * var(--global--spacing-vertical)); }   


/*General styling*/
:root .is-huge-text, 
:root .has-huge-font-size { font-size: var(--global--font-size-xl); }
:root .is-gigantic-text, 
:root .has-gigantic-font-size { font-size: var(--global--font-size-xl); }
.singular .entry-title,
.entry-title { font-size: var(--global--font-size-lg); color: var(--color-2); }
.singular .entry-header { margin-bottom: 0; border-bottom: 0; }


/*Search page*/
.search-results .page-header { padding-bottom: 50px; }
.search-results .site-main > article > .entry-footer { padding-top: 0; padding-bottom: 50px; margin-top: 0; }
.search-results .post-thumbnail .wp-post-image { max-width: 300px !important; margin: 30px 0 30px 0; }


/*Blog post pages*/
.entry-footer { max-width: var(--responsive--alignwide-width); }
.comments-area { max-width: var(--responsive--alignwide-width); }


/*Plugin customizations.*/
/*General Testimonials*/
.testimonials-container__heading { font-size: var(--heading--font-size-h3); }
.testimonial { padding-bottom: 60px; }
.testimonial:last-of-type { padding-bottom: 0; }
.testimonial__title { clear: none; font-size: 24px; }


/*Slick.js and Advanced Custom Fields*/
button:not(:hover):not(:active):not(.has-background) { background-color: transparent; }
.primary-navigation-open .slick-slider { display: none; }
div.slick-dotted.slick-slider { position: relative; height: 267px; margin-bottom: 50px; }
.slick-slider .slick-list { }
.slick-slider .slide { position: relative; margin: 4px 20px 4px 20px; border-radius: 4px; }
.slick-slider .slide:focus,
.slick-slider .slide:focus-visible { outline: 4px solid var(--color-1); }
.slide__title { position: absolute; top: 0; left: 0; right: 0; padding: 6px 15px; text-align: center; font-size: 18px;
               background-color: rgba(255, 255, 255, 0.90); }
.slide__image-container { position: relative; height: 220px; }
.slide__image { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.slide__content { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 4px 4px;
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) ); color: #ffffff; }
.slide__description { padding: 5px 10px; text-align: center; }
.slide__description a { color: #ffffff; text-decoration: none; }
.slide__description a:hover { text-decoration: underline 1px dotted #ffffff; }
.slide__description a:hover .slide__description-link-arrow { font-style: italic; }

/*Arrows*/
.slick-slider .slick-prev,
.slick-slider .slick-next { position: absolute; top: 257px; z-index: 11; width: 24px; height: 20px; font-size: 24px; }
.slick-slider .slick-prev { left: 10%; }
.slick-slider .slick-next { right: 10%; }
.slick-slider .slick-prev::before, 
.slick-slider .slick-next::before { font-size: 24px; color: var(--color-1); }
.slick-slider .slick-prev:focus,
.slick-slider .slick-next:focus,
.slick-slider .slick-prev:focus-visible,
.slick-slider .slick-next:focus-visible { outline: 2px solid var(--color-1); } 

/*Dots*/
.slick-slider .slick-dots { bottom: -42px; }
.slick-slider .slick-dots li button:focus,
.slick-slider .slick-dots li button:focus-visible { outline: 2px solid var(--color-1); )}
.slick-slider .slick-dots li button::before { border-radius: 2px; background-color: var(--color-1); color: var(--color-1); transition: 0.1s ease-in; }
.slick-slider .slick-dots li button:hover::before, 
.slick-slider .slick-dots li button:focus::before { opacity: 0.45; transition: 0.1s ease-in; }
.slick-slider .slick-dots li.slick-active button::before { color: var(--color-1); transition: 0.1s ease-in; }

/*Add a pause and play button as an extra button.*/
.pause-play-button-container { position: relative; top: 6px; }
.slick-slider #pausePlayButton { display: block; width: 24px; height: 44px; padding: 0; border: 0; 
                                 margin-left: auto; margin-right: auto; outline-offset: 0; 
                                 opacity: 0.75; font-size: 26px; font-weight: bold; color: var(--color-1); cursor: pointer; transition: 0.1s ease-in; }
.slick-slider #pausePlayButton:hover { opacity: 1; transition: 0.1s ease-in; }


/*WooCommerce*/
.site-main .woocommerce-products-header { padding-bottom: calc(2 * var(--global--spacing-vertical)); margin-top: 0; margin-bottom: 0; }
.page-title { font-size: var(--global--font-size-lg); }

.home #main [class*="woocommerce columns-"] { max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; }

.woocommerce-cart #main .entry-header { padding-top: 0; }

.woocommerce-account #main .woocommerce { max-width: var(--responsive--alignwide-width); padding-left: 0; padding-right: 0; }


/*Contact Form 7*/
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--color-1); }


/*Popup Box*/
.ays-pb-modal h2 { font-family: var(--heading--font-family) !important; }
.ays-pb-modal_2 .ays_pb_description > *, 
.ays-pb-modal_2 .ays_pb_timer, 
.ays-pb-modal_2 .ays_content_box p, 
.ays-pb-modal_2 .ays-pb-dismiss-ad > button#ays_pb_dismiss_ad { font-family: var(--entry-content--font-family) !important; }

@media screen and (max-width: 768px) {
  div.ays-pb-modal_2 {
    width: 60% !important;
    max-width: 400px !important;
  }
}

div.ays-pb-modal h2 { word-break: normal; }
.ays-pb-modal hr:nth-of-type(1) { display: none; }

.ays-pb-modal_2 .ays-pb-modal-close { top: 0 !important; right: 3% !important; font-size: 24px; }
.ays-pb-modal_2 .ays-pb-modal-close .ays_pb_material_close_icon { transition: 0.1s ease-in; }
.ays-pb-modal_2 .ays-pb-modal-close:hover .ays_pb_material_close_icon { fill: #9b7653 !important; transition: 0.1s ease-in; }
.ays-pb-modal .modal-image { padding-top: 20px; }


/*Lightweight Cookie Notice*/
@media only screen and (max-width: 700px), screen and (max-height: 640px) {
    
    div#daextlwcnf-cookie-settings-container {
        top: 10% !important;
        width: 220px !important;
        height: 80% !important;
    }
    
    #daextlwcnf-cookie-settings-blurred-header {
        display: none;
    }
    
    div#daextlwcnf-cookie-settings-header {
        width: auto !important;
    }

    div#daextlwcnf-cookie-settings-title {
        line-height: 34px !important;
    }
    
    #daextlwcnf-cookie-settings-blurred-footer {
        display: none;
    }
   
}


#daextlwcnf-cookie-notice-container #daextlwcnf-cookie-notice-button-1 {
    border: 1px solid var(--color-1) !important;
    color: var(--color-1) !important;
}

#daextlwcnf-cookie-notice-container #daextlwcnf-cookie-notice-button-2 {
    border: 1px solid var(--color-1) !important;
    background: none !important;
    background-color: var(--color-1) !important;
}

#daextlwcnf-cookie-settings-container #daextlwcnf-cookie-settings-button-1 {
    border: 1px solid var(--color-1) !important;
    color: var(--color-1) !important;
}

#daextlwcnf-cookie-settings-container #daextlwcnf-cookie-settings-button-2 {
    border: 1px solid var(--color-1) !important;
    background: none !important;
    background-color: var(--color-1) !important;
}

#daextlwcnf-revisit-cookie-consent-container.daextlwcnf-revisit-consent-trigger {
    background: none !important;
    background-color: var(--color-1) !important;
}



@media only screen and (max-width: 768px){
    /*Plugin customizations.*/
    /*WooCommerce*/
    .woocommerce .woocommerce-products-header__title.page-title, 
    .woocommerce-page .woocommerce-products-header__title.page-title { margin-top: 0; margin-bottom: 0; }
}



@media only screen and (min-width: 482px){
    /*Header*/
    .site-header { position: static; min-height: none; }
    .site-header:not(.has-logo).has-title-and-tagline .site-branding { max-width: none; }
    .header-inner-wrapper { }
    .site-branding { display: block; padding: 20px; }
    
    
    /*Nav*/
    .primary-navigation > .primary-menu-container { background-color: transparent; }
    .primary-navigation .primary-menu-container { margin-left: 0; margin-right: 0; }
    
    .primary-navigation a:hover, 
    .primary-navigation a:link, 
    .primary-navigation a:visited { color: rgba(255, 255, 255, 1); }
    .primary-navigation a:hover,
    .primary-navigation a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(155, 118, 83, 0.7); transition: 0.1s ease-in; }
    
    .menu-button-container { display: none; }
    .mobile-title-container { display: none; }
    
    
    /*Search*/
    .search-form .search-form__search-icon { top: 16px; right: -33px; }
    .search-form .search-form__close-search-icon { top: 16px; right: -33px; }
    .search-form.show .search-controls { top: 20px; }
    
    
    /*General styling*/
    .singular .entry-title,
    .entry-title { font-size: var(--global--font-size-xl); }
    .page-title { font-size: var(--global--font-size-xl); }    
        
    
    /*Blog page*/
    .blog .entry-title { font-size: calc(1.25 * var(--global--font-size-lg)); }
    
    
    /*Search page*/
    .search-results .entry-title { font-size: calc(1.25 * var(--global--font-size-lg)); } 
    
    
    /*Plugin customizations.*/
    /*WooCommerce*/   
    .woocommerce ul.products { justify-content: space-between; }
    .woocommerce ul.products::after, 
    .woocommerce ul.products::before, 
    .woocommerce-page ul.products::after, 
    .woocommerce-page ul.products::before { content: none; }
}



@media only screen and (min-width: 668px){  
    /*Footer*/
    .footer-content-section { }
    .footer-section { }

    
    /*Plugin customizations.*/
    /*WooCommerce*/  
    .woocommerce ul.products.columns-4 li.product { margin-left: 0; margin-right: 0; }
    .woocommerce ul.products[class*="columns-"] li.product, 
    .woocommerce-page ul.products[class*="columns-"] li.product { width: 50% !important; }
}



@media only screen and (min-width: 690px){  
    .woocommerce-products-header { border-bottom: 0; }
}



@media only screen and (min-width: 700px){  
    /*Plugin customizations.*/
    /*General Testimonials*/
    .testimonial { padding-bottom: 0; }
}



@media only screen and (min-width: 768px){ 
    /*Header*/
    .site-header { padding-top: calc(1 * var(--global--spacing-vertical)); padding-bottom: calc(5 * var(--global--spacing-vertical)); }
    .site-title { font-size: calc(1.3 * var(--branding--title--font-size-mobile)); } 
    
    
    /*Plugin customizations.*/
    /*Slick.js and Advanced Custom Fields*/
    div.slick-dotted.slick-slider { height: 327px; }
    .slide__image-container { height: 280px; }
    .slide__title { font-size: 22px; }
    .slide__description { }
    
    .slick-slider .slick-prev,
    .slick-slider .slick-next { top: 317px; }
    .slick-slider .slick-prev { left: 32%; }
    .slick-slider .slick-next { right: 32%; }
    
    
    /*WooCommerce*/  
    .woocommerce ul.products[class*="columns-"] li.product, 
    .woocommerce-page ul.products[class*="columns-"] li.product { width: calc(100% / 4 - 16px) !important; }
    
    .woocommerce-checkout #main .woocommerce { max-width: var(--responsive--alignwide-width); padding-left: 0; padding-right: 0; }
    
    
    /*Popup Box*/
  
}



@media only screen and (min-width: 769px){  
    /*Plugin customizations.*/
    /*WooCommerce*/  
    .woocommerce ul.products li.product { margin-bottom: 60px; }
}



@media only screen and (min-width: 822px){
    /*Header*/
    
    
    /*Footer*/
    .site-footer > .site-info .copyright-info { margin-top: initial; margin-left: auto; }
}



@media only screen and (min-width: 1200px) {
    /*Header*/
    .site-header { padding-top: calc(1 * var(--global--spacing-vertical)); padding-bottom: calc(4 * var(--global--spacing-vertical)); }
    .site-title { font-size: calc(0.75 * var(--branding--title--font-size)); }
    .site-description { font-size: 20px; }
        
    
    /*Content*/
    .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { max-width: var(--responsive--alignwide-width); }

    
    /*Footer*/
    .footer-content-section { }
    .footer-section { float: left; width: 33.333333%; }

    
    /*Search page*/
    .page-content .search-form { max-width: calc(0.5 * var(--responsive--alignwide-width)); margin-left: 0; }
    
    
    /*Plugin customizations.*/
    /*Slick.js and Advanced Custom Fields*/
    div.slick-dotted.slick-slider { height: 287px; }
    .slide__image-container { height: 240px; }
    .slide__title { position: absolute; top: 12px; left: 20px; right: auto; border-radius: 2px; text-align: left; }
    .slide__description { font-size: 17px; }
    
    /*Arrows*/
    .slick-slider .slick-prev,
    .slick-slider .slick-next { top: 277px; }
    .slick-slider .slick-prev { left: 39%; }
    .slick-slider .slick-next { right: 39%; }
}



@media only screen and (min-width: 1500px){
    /*Header*/
    .site-header { padding-top: calc(2.4 * var(--global--spacing-vertical)); padding-bottom: calc(9 * var(--global--spacing-vertical)); }
    .site-title { font-size: var(--branding--title--font-size); }
    .site-description { font-size: 22px; }
    
     
    /*Plugin customizations.*/
    /*Slick.js and Advanced Custom Fields*/
    div.slick-dotted.slick-slider { height: 372px; }
    .slick-slider .slide { }
    .slide__title { font-size: 24px; }
    .slide__description { font-size: 20px; }
    .slide__image-container { height: 320px; }
    
    /*Arrows*/
    .slick-slider .slick-prev,
    .slick-slider .slick-next { top: 362px; }
    .slick-slider .slick-prev { left: 42%; }
    .slick-slider .slick-next { right: 42%; }
}
