/*
Theme Name: Capuchin - Block Theme FSE v1.0
Theme URI: 
Author: 
Author URI: 
Description: Capuchin - Block Theme Full Site Editor with WooCommerce ver. 1.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capuchin-block-theme-fse-v1-0
Tags: 
*/

:root {
    --light-grey:               #ececec;
    --dark-grey:                #999;
    --identity-light-blue:      #6bb4d5;
    --identity-light-yellow:    #faefde;
    --identity-turquoise:       #78c4bc;
    --identity-turquoise-dark:  #72bab2;
    --identity-light-navy:      #edf2f5;
    --identity-medium-navy:     #d8dcde;
    --identity-navy:            rgb(39, 76, 113);
    --identity-red:             #e94b3c;
    --identity-dark-red:        #be1e2d;
    --identity-darker-red:      #851621;
    --identity-blue:            #0078ff;
    --identity-dark-blue:       #0054ff;
    --identity-green:           #4dfa7f;
    --identity-dark-green:      #36ad58;
    --identity-yellow:          rgba(250,234,169,1);
    --identity-orange:          #fa974d;
    --identity-dark-orange:     #cf7f42;
    --identity-magenta:         #f509c4;
    /* GDPR Cookie Popup        #1863DC; */
    --ff-trs: "trs", sans-serif;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsLight.woff2') format('woff2'),
        url('assets/fonts/trsLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsLightOblique.woff2') format('woff2'),
        url('assets/fonts/trsLightOblique.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsMedium.woff2') format('woff2'),
        url('assets/fonts/trsMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsMediumOblique.woff2') format('woff2'),
        url('assets/fonts/trsMediumOblique.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsBlack.woff2') format('woff2'),
        url('assets/fonts/trsBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsBlackOblique.woff2') format('woff2'),
        url('assets/fonts/trsBlackOblique.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsBold.woff2') format('woff2'),
        url('assets/fonts/trsBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsBoldOblique.woff2') format('woff2'),
        url('assets/fonts/trsBoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsStandard.woff2') format('woff2'),
        url('assets/fonts/trsStandard.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'trs';
    src: url('assets/fonts/trsStandardOblique.woff2') format('woff2'),
        url('assets/fonts/trsStandardOblique.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: 
    url("assets/fonts/fa-regular-400.woff2") format("woff2"),
    url("assets/fonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: 'Font Awesome 5 Free SOLID';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: 
    url("assets/fonts/fa-solid-900.woff2") format("woff2"),
    url("assets/fonts/fa-solid-900.woff") format("woff");
}


html, body {
    height: 100%;
}

/* main {
    padding-inline: 2em;
} */

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#page,
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 100% of viewport height */
}

main {
    margin-block-end: 2em !important;
}

.wp-block-post-content,
.site-content {
  flex: 1; /* Takes remaining space */
}

header {
    position: fixed;
    width: 100%;
    z-index: 5;
}

footer {
    margin-top: auto;
    flex-shrink: 0;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

strong {
    font-weight: bold;
}

/* Desktop Navigation Primary */
.capuchin__nav-primary li a {
    transition: all .3s ease-in-out;
    padding-inline: .3rem;
    padding-block: .2em;
}

.capuchin__nav-primary li a:hover {
    background-color: var(--identity-navy);
    color: var(--identity-light-navy) !important;
}

.capuchin__nav-primary .wp-block-navigation__submenu-container {
    flex-flow: row nowrap !important;
}

.capuchin__nav-primary .wp-block-navigation__submenu-container a {
    background-color: var(--identity-turquoise);
    color: var(--identity-light-navy) !important;
    padding-inline: 1em;
    padding-block: .3rem;
}
/* END Desktop Navigation Primary */

.breadcrumb-home-icon::after {
    content: '\f015';
    font-family: 'Font Awesome 5 Free SOLID';
    display: inline-block;
    color: var(--identity-turquoise);
    padding-inline-end: .3em;
}

.woocommerce-breadcrumb {
    padding-inline: 0.5em !important;
    padding-block: 1em !important;
    font-size: 1.5em !important;
    font-weight: 500 !important;
    color: var(--identity-navy) !important;
    margin: 0 !important;
}

img.wp-block-cover__image-background:hover {
    transform: scale(1.3);
}

.capuchin-base_padding-margins {
    padding-inline: 2em;
    padding-block: 1em;
    margin-bottom: 2em;
}

.capuchin-base_div {
    padding-inline: 2em;
    padding-block: 1em;
    margin-bottom: 2em;
    border-radius: 2em;
    background-color: #fff;
}

.header__icons {
    position: relative;
    right: 1em;
    display: flex;
    flex-flow: row nowrap;
    gap: .7em;
}

.wp-block-categories-list .cat-item, 
.wc-block-product-categories-list--depth-0 > li {
    border-bottom: 1px dotted var(--identity-turquoise-dark);
    margin-block-end: 1em;
}

.woocommerce-MyAccount-navigation a,
.wp-block-categories-list .cat-item a,
.wc-block-product-categories-list-item a {
    border-radius: .2em;
    color: var(--identity-navy) !important;
    font-weight: 500;
    text-decoration: none !important;
    text-transform: uppercase;
    padding: 0 .5em .2em .5em;
    transition: all 100ms ease-in;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:active,
.wp-block-categories-list .cat-item a:hover,
.wc-block-product-categories-list-item a:hover {
    background-color: var(--identity-orange) !important;
    color: #fff !important;
    text-transform: uppercase;
}

.woocommerce-MyAccount-content input {
    font-size: 1em !important;
}

.woocommerce-MyAccount-content table {
    font-size: 1em !important;
}

.wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item {
    margin-left: 0.6em;
}

/* Product Attributes pills: */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
}

:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked)) {
    background-color: var(--identity-turquoise);
    color: #fff;
    font-weight: bold;
}

.wc-block-components-checkout-return-to-cart-button {
    background-color: var(--identity-turquoise);
    color: #fff;
    padding: 1em 2em;
    border-radius: 1em;
    text-indent: 1em;
    text-align: center;
}

.wc-block-components-checkout-return-to-cart-button svg {
    width: 48px;
}

form.variations_form select,
form.variations_form select option {
    background-color: var(--identity-turquoise);
    color: #fff;
}

.woocommerce-MyAccount-navigation a {
    font-size: 1.2em;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:active {
    background-color: var(--identity-orange);
    color: #fff;
}


.woocommerce-Addresses > div {
    outline: 1px solid var(--identity-medium-navy);
    box-sizing: border-box;
    padding: 1em;
}

.woocommerce-Address address {
    line-height: 1.5em;
    font-style: normal;
}

.woocommerce-account main .woocommerce {
    max-width: 1600px !important;
}

.capuchin__aws-search-overlay {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateY(100%);
    width: 100dvw;
    height: 100dvh;
    transition: all 300ms ease-in-out;
    z-index: 600;
    overflow-y: scroll;
    padding-block-start: 2em;
    /* padding-inline: 2em;*/
    padding-block-end: 6em;
}

.capuchin-aws-search-overlay-opened {
    transform: translateY(0);
}


/* Search Related */
/* AWS Search Form */
#aws-search-overlay-open img,
#aws-search-overlay-close img {
    cursor: pointer;
}

.aws-search-field__capuchin-custom {
    border-radius: .5em 0 0 .5em !important;
    font-family: var(--ff-trs);
    font-weight: normal;
    font-size: 1.2em;
}

.aws-search-field__wrapper {
    display: flex;

}

.aws-search-field__trigger {
    flex-grow: 1;
    font: normal 1.2em var(--ff-trs);
    color: #fff;
    padding: .5em 1em;
    background-color: transparent;
    background-image: url('assets/images/icon-mobile-menu-search-field.svg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    max-width: 480px;
    height: auto;
    min-height: 60px;
}
/* END AWS Search Form */

.woocommerce-result-count {
    font-weight: bold;
    color: unset !important;
}



#mobile-menu-toggle,
#mobile-menu-close,
#aws-search-overlay-open img {
    cursor: pointer;
}


/* Real Simple Featured Video Plugin */
.rsfv-has-video video.rsfv-video, .rsfv-has-video iframe.rsfv-video {
    aspect-ratio: unset !important;
}


/* Contact Form 7 Plugin */
.wpcf7-form {
    border: 1px solid var(--identity-medium-navy);
    border-radius: 1em;
    padding: calc(0.667em + 2px) calc(1.333em + 2px); 
}
.wpcf7-form input,
.wpcf7-form textarea {
    font-size: 1.2em !important;
    font-family: var(--ff-trs) !important;
    padding: .5rem .5rem !important;
    border-radius: .2em !important;
    border: 1px solid #333 !important;
    max-width: 95% !important;
}

.wpcf7-form input[type="submit"] {
    background-color: var(--identity-orange);
    color: #fff !important;
    border: none !important;
    border-radius: 1em !important;
    cursor: pointer !important;
    padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:active {
    /* background-color: var(--identity-dark-orange); */
}

.wpcf7-response-output {
    padding: .5em 1em !important;
    font-size: 1.2em;
    border-radius: .5em;
}
/* END Contact Form 7 Plugin */



/* Netopia Card Payment Styling */
#radio-control-wc-payment-method-options-netopiapayments__label {
    background-image: url('assets/images/netopia-payment-options.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    padding: .5em;

    @media (max-width: 500px) { 
        background-size: 55%;
    }
}




/* Product Catalog SELECT Dropdown */
.wc-block-catalog-sorting select,
.mobile__product-category-select select {
    background-color: var(--identity-turquoise);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: right 8px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z'/%3E%3C/svg%3E");
    color: #fff !important;
    padding: .5em;
    padding-right: 2em;
    font-size: .7em;
    appearance: none;
    border-radius: .5em;
    border: none;
    font-family: var(--ff-trs);
    /* max-width: 80%; */
}

.wc-block-catalog-sorting select option,
.mobile__product-category-select select option {
    color: #fff !important;
    background-color: var(--identity-turquoise);
    font-family: var(--ff-trs);
}

.wc-block-product-categories__button {
    background-color: var(--identity-orange);
    border: none;
    color: #fff;
    font-weight: bold;
    margin-inline-start: .5em;
    padding-inline: 1em;
    border-radius: .5em;
}

.wc-block-product-filters__open-overlay span {
    font-size: 1.2em;
}

.wc-block-product-filters__overlay-content {
    padding-block-start: 2em;
}
/* END Product Catalog SELECT Dropdown */




/* First page bento / splash */
.bento-splash {
    margin-bottom: 2em;
}

.bento-splash > *,
.bento-splash__promotions {
    display: flex;
    position: relative;
    border-radius: 1em;
    overflow: hidden;
    align-items: center;
    justify-content: center;    
    background-size: cover;
}

.bento-splash div video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.bento-splash__promotions video {
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -70%) !important;
}

.bento-splash img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.bento-splash div a {
    display: block;
    width: 100%;
    height: 100%;
    transition: 200ms all ease-in-out;
}

.bento-splash div a h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 900;
    position: absolute;
    bottom: .2em;
    left: 0.5em
}

.bento-splash__promotions {
    background-color: #333;
    margin-bottom: 1rem;
    margin-top: 1rem;
    /* outline: 1px solid red; */
    grid-column: 1 / span 12;
    grid-row: 1 / span 3;
}

.bento-splash__promotions a h2 {
    background-color: rgba(39,76,113,0.35);
    padding: 0.25em;
}

.bento-splash__coffee {
    grid-column: 1 / span 6;
    grid-row: 4 / span 4;
}

.bento-splash__chocolate {
    grid-column: 7 / span 6;
    grid-row: 4 / span 2;
}

.bento-splash__tea {
    grid-column: 7 / span 6;
    grid-row: 6 / span 2;
}

.bento-splash__courses {
    grid-column: 1/ span 4;
    grid-row: 8 / span 4;
}

.bento-splash__merch {
    grid-column: 5/ span 4;
    grid-row: 8 / span 4;
}

.bento-splash__accessories {
    grid-column: 9/ span 4;
    grid-row: 8 / span 4;
}
/* END First page bento / splash */


/* Shop / Category / Archive - Product Query Loop Grid */
.product-grid-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
    border-radius: 1em;
}

.product-grid-item a {
}

.product-grid-item picture {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.product-grid-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 300ms ease;
}

.product-grid-item:hover img {
    transform: scale(1.2);
}

.product-grid-item:hover .product-grid-item-details {
    /* background-color: var(--identity-orange); */
}

.product-grid-item:hover .product-grid-item-title {
    background-color: transparent;
}

.product-grid-item p {
    margin-bottom: unset;
}

.product-grid-item-details {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: auto;
    /* max-height: 35%; */
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.10);
    transition: all 300ms ease;
    bottom: 0;
    padding-inline: .3em;
}

.product-grid-item-title {
    /* font-size: 1.5em; */
    font-size: clamp(1em, 1.2em, 1.5em);
    font-weight: bold;
    color: #fff;
    max-width: 80%;
    padding-inline: .25em;
    transition: all 300ms ease;
    margin-left: .25em;
    text-shadow: 0px 1px #333;
}

.product-grid-item-money {
    position: relative;
    margin-left: auto;
    display: flex;
    align-self: flex-end;
    flex-flow: row nowrap;
    /* background-color: var(--identity-orange); */
    border-radius: 1em 0 1em 0;
    padding: .25em 1em 1em .5em;
    right: 0;
    bottom: 0;
    color: #fff;
    font-weight: bold;
    /* color: var(--identity-navy);
    color: var(--identity-orange); */
    text-shadow: 0px 1px #333;
    
}

.product-grid-item-price {
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    text-shadow: 0px 1px #333;
    margin-right: .65em;
}

.product-grid-item-details .woocommerce-Price-currencySymbol {
    position: absolute;
    /* top: 55%;
    left: 25%; */
    top: 0;
    right: .55em;
    text-transform: uppercase;
    font-size: .5em;
    font-weight: bold;
}
/* END Shop / Category / Archive - Product Query Loop Grid */


/* Pagination Styles */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .page-numbers {
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
    display: inline-block;
    height: auto;
    padding-block: 0.5em;
    padding-inline: 1em;
    transition: all 200ms ease-in-out;
    background-color: #fff;
    border-radius: .5em;
    text-decoration: none;
    font-weight: 500;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-next:hover {
    background-color: var(--identity-turquoise);
    color: #fff;
}
/* END Pagination Styles */


/* Single Product Page */
/* Coffee Category Specific: Coffee Product Label */
.product-label {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    /* max-width: 20em; */
    margin-bottom: 2rem;
    padding: 1em;
    border: 2px solid var(--identity-turquoise);
    border-radius: 1em;
    margin-top: -1em;
}

.product-label-h3 {
    background-color: var(--identity-turquoise);
    color: #fff;
    font-size: 1.2em;
    max-width: 100%;
    padding: .3em 1em;
    border-radius: .2em .2em 0 0;
}

.product-label-grid-line {
    border-bottom: 1px solid #000;
    margin-top: 2em;
    grid-column-start: 1;
    grid-column-end: 3;
}

.product-label-grid-cell {
    padding-top: .5em;
}

.product-label-key, .product-label-value, .product-grid-item-title, .product-grid-item-subtitle {
    display: block;
}

.product-label-key {
    color: #000;
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
}

.product-label-value {
    color: var(--identity-turquoise);
    font-weight: 500;
    text-transform: uppercase;
}

.product-label-notes {
    text-transform: unset;
}

.product-label-sca {
    display: inline-block;
    border-radius: 50%;
    background-color: var(--identity-turquoise);
    color: #fff;
    font-weight: 100;
    font-size: 2em;
    padding: .25em;
    margin-top: .25em;
    text-align: center;
    width: 2em;
}
/* END Coffee Product Label */

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    z-index: 1 !important;
}
/* END Single Product Page */





/* WooCommerce My Account Forms / Address Fixes */
header.woocommerce-Address-title {
    position: unset !important;
    width: unset !important;
    z-index: unset !important;
}

header.woocommerce-Address-title .edit {
    float: unset !important;
}
/* END WooCommerce My Account Forms / Address Fixes */


/* Desktop Specific Styling */
@media (min-width: 782px) {
    
    .mobile-only {
        display: none !important;
    }

    main {
        margin-block-start: 17rem !important;
    }

    #capuchin__desktop-header {
        background-image: url('assets/images/bg-mountain.jpg');
        background-position: 50% 50%;
        background-size: cover;
    }

    .capuchin__universal-header {
        background-image: none !important;
        margin-top: -12em;
    }

    .bento-splash {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(8, 120px);
        gap: 1.5em;
    }

    .bento-splash {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(11, 120px);
        gap: 1.5em;
    }

    #capuchin-contact_map {
        max-height: 600px;
    }
}
/* END Desktop Specific Styling */

/* Mobile Specific Styling */
@media (max-width: 781px) {

    .capuchin__universal-header {
        padding: 0.5em 1em !important;
    }
    
    .desktop-only {
        display: none !important;
    }

    main {
        margin-block-start: 110px !important;
    }

    .nav-main-mobile {
        position: fixed;
        right: 0;
        transform: translateX(100%);
        width: 100dvw;
        height: 100dvh;
        transition: all 300ms ease-in-out;
        z-index: 555;
        overflow-y: scroll;
    }

    .nav-main-mobile-v2 {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 100dvw;
        height: 100dvh;
        transition: all 300ms ease-in-out;
        z-index: 555;
        overflow-y: scroll;
        padding-block-start: 2em;
        /* padding-inline: 2em;*/
        padding-block-end: 6em;
    }

    .nav-main-mobile-v2__product-links a {
        display: block;
        width: 100%;
        text-decoration: none !important;
    }

    .nav-main-mobile-v2__grid-links a {
        text-decoration: none !important;
    }

    .hnav-opened {
        transform: translateX(0);
        opacity: 1;
    }
    
    .bento-splash {
        display: flex;
        flex-flow: row wrap;
        gap: 1.5em;
        align-items: center;
    }

    .bento-splash > * {
        aspect-ratio: 1;
        flex: 1 1 360px;
    }
}
/* END Mobile Specific Styling */