/*
Theme Name: Weta Woods
Text Domain: wetawoods
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Custom Theme Developed for WetaWoods.co.nz
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: Ioan Nicholls
Author URI: https://mesorchoo.com

*/

:root {
    --site-width:1200px;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: inherit;
    box-sizing: border-box;
}

body.page-template-template-cover.admin-bar nav.site-nav {
    margin-top:46px;
}
@media (min-width:783px) {
    body.page-template-template-cover.admin-bar nav.site-nav {
        margin-top:32px;
    }
}


nav.site-nav {
    padding: 0 min(2vw, 2rem);
    z-index: 1000;
    width: 100%;
    color: #fff;
    display: flex;
    position: sticky;
    top:0;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    font-size: min(5vw, 1.4rem);
    backdrop-filter: blur(0);
    transition: background-color, backdrop-filter 0.5s ease-in-out;
}
.page-template-template-cover nav.site-nav {
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
}

nav.site-nav.with-bg {
    background-color: rgba(0, 0, 0, 0.8);
    /* backdrop-filter: blur(2rem); */
}

nav.site-nav .left {
    display: flex;
    gap: 2rem;
}

nav.site-nav a {
    text-decoration: none;
}

nav.site-nav a svg {
    width: min(15vw, 5rem);
    height: min(15vw, 5rem);
}








section.hero {
    z-index:-1;
    height: 90vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom:3rem;
}

section.hero>img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroblur 5s ease-in-out alternate-reverse infinite;
}

section.hero>.content {
    animation: herofadein 2s forwards;
    font-size: clamp(2rem, 7vw, 5rem);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.hero>.content svg {
    width: min(15vw, 5rem);
    height: min(15vw, 5rem);
    color:greenyellow;
}

section.hero>.content>h1 {
    letter-spacing: -2px;
    margin:0;
}
section.hero>.content>p {
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 5vw, 3rem);
    color: #ddd;
    font-weight:200;
}

section.hero>.content>.subtitle {
    margin-top: 10vh;
    font-size: clamp(0.5rem, 2vw, 1.4rem);
}
section.hero>svg {
    color:#fff;
    position:absolute;
    bottom:0;
}

@keyframes heroblur {
    from {
        filter: blur(2vw) brightness(0.5);
    }

    to {
        filter: blur(5vw) brightness(0.5);
    }
}

@keyframes herofadein {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}






aside.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 90vw;
    max-width: 300px;
    transform: scaleX(0);
    transition: transform 100ms;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    z-index: 10000;
}

aside.sidebar.open>.backdrop {
    position: absolute;
    z-index: -1;
    top: 0;
    right: -1000vw;
    bottom: 0;
    left: -1000vw;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

aside.sidebar>.content {
    background-color: #fff;
    flex: 1 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3rem 1rem 1rem;
}

aside.sidebar.left {
    left: 0;
    transform-origin: left;
}

aside.sidebar.right {
    right: 0;
    transform-origin: right;
}

aside.sidebar.open {
    transform: scaleX(1);
}

aside.sidebar>.close-button {
    position: absolute;
    right: 0;
    background-color: #fff;
    /* width:3rem;
            height:3rem; */
}

aside.sidebar>.content details>summary {
    padding: 1rem 0;
}


aside.sidebar>.content ul {
    list-style-type: none;
}
aside.sidebar button.close-button {
    background: none;
    border: none;
    min-width: 2rem;
    height: 2rem;
}






main {
    padding: 0.5rem 1rem;
}
main>* {
    max-width:var(--site-width);
    margin-left:auto !important;
    margin-right:auto !important;
}

main p {
    max-width:600px;
    margin:0 auto;
    line-height:1.6em;
}

main blockquote p {
    position: relative;
}
main blockquote p::before {
    font-family:'Times New Roman', Times, serif;
    content:'“';
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    transform:translate(-70%, -30%);
    font-size:10rem;
    color:yellowgreen;
}


h1 {
    max-width: var(--site-width);
    margin:0 auto 2rem;
}
h1::after {
    content:'';
    display:block;
    height:5px;
    background-image: linear-gradient(45deg, yellowgreen, forestgreen);
}
body.page-template-template-cover h1::after {
    display:none;
}
.screen-reader-text {
    display:none;
}
a.button, button.button {
    border:none;
    text-decoration: none;
    background-color: greenyellow;
    background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
    font-weight: bold;
    padding: 1em 2em;
    border-radius: 0.25em;
    max-width: 300px;
}

a.button:hover,
button.button:hover {
    background-image: none;
}




/**
* WORDPRESS BLOCKS
**/
.wp-block-image .aligncenter figcaption {
    text-align: center;
}

.wp-block-separator.is-style-wide {
    border:none;
    background-color:gray;
    height:1px;
    background-image:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.4));
}
.wp-block-column figure img {
    width:100%;
    height:100%;
}
.wp-block-columns.no-collapse {
    gap:0.5rem;
}
.wp-block-columns.no-collapse>* {
    flex-basis:0 !important;
}



/**
*   WOOCOMMERCE
**/
.woocommerce.columns-4 {
    max-width: var(--site-width);
    margin:0 auto;
}
.woocommerce-result-count {
    text-align: center;
    margin-top:2rem;
    font-weight:200;
}
ul.products,
ul.wc-block-grid__products {
    list-style-type: none;
    max-width:var(--site-width);
    display:flex;
    gap:3rem;
    flex-wrap:wrap;
    justify-content: center;
    margin:5rem auto;
}
ul.products>li.product,
ul.wc-block-grid__products>li {
    flex:1 1 50%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    text-align:center;
    padding:1em;
    max-width:300px !important;
    position:relative;
}
img.attachment-woocommerce_thumbnail,
.wc-block-grid__products .wc-block-grid__product-image img {
    border-radius:50%;
    width:min(60vw, 200px) !important;
    height:min(60vw, 200px);
    border: solid 4px olivedrab;
    /* max-width:60vw;
    max-height:60vw; */
}
ul.products>li.product>a,
ul.wc-block-grid__products>li>a {
    text-decoration: none;
}
ul.products>li.product h2,
ul.wc-block-grid__products>li .wc-block-grid__product-title {
    letter-spacing:-0.05em;
}
ul.products>li.product .onsale,
ul.wc-block-grid__products .wc-block-grid__product-onsale {
    font-size:.9rem;
    border:1px solid #43454b;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight:600;
    position:absolute;
    background-color:firebrick;
    color:#fff;
    padding:0em 0.75em;
    margin-top:2rem;
    transform:rotate(-5deg);
    left:10%;
}
ul.products>li.product .price,
ul.wc-block-grid__products .price {
    display:block;
    text-align: center;
    margin:0.5rem 0;
    font-size:1.5rem;
}

ul.products>li.product ins,
ul.wc-block-grid__products ins {
    text-decoration: none;
}
ul.products>li.product del,
ul.wc-block-grid__products del {
    color:#333;
    font-size:1rem;
    font-weight:200;
}
ul.products>li.product del + ins,
ul.wc-block-grid__products del+ins {
    color:firebrick;
    font-weight:bold;
    font-size:1.5rem;
}
a.add_to_cart_button {
    display:block;
    background-color:greenyellow;
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.3));
    text-transform: uppercase;
    font-weight:bold;
    padding:1em 2em;
    border-radius:0.25em;
    max-width:300px;
    margin:0 auto;
    color:inherit;
}

a.add_to_cart_button:hover,
a.add_to_cart_button:active {
    background-image:none;
}

form.woocommerce-ordering {
    display:block;
    width:180px;
    margin:0 0 0 auto;
    text-align: right;

}
form.woocommerce-ordering:hover,
form.woocommerce-ordering:focus {
    background-color:rgba(153, 205, 50, 0.123);
}
form.woocommerce-ordering select.orderby {
    display:block;
    border:none;
    background-color:transparent;
    width:180px;
    padding:0.5em 0;
    font-weight:200;
}
form.woocommerce-ordering::after {
    content: '';
    display: block;
    margin:0 0 0 auto;
    height: 1px;
    background-image: linear-gradient(45deg, yellowgreen, forestgreen);
}


.wc-block-grid__product-add-to-cart a.added:after,
.wc-block-grid__product-add-to-cart button.added:after {
    content:'✔️' !important;
    font-family:inherit !important;
}


/**
* Mini Sidebar Cart
**/
.woocommerce-mini-cart.cart_list.product_list_widget>* {
    padding-bottom:0.5em;
    margin-bottom:0.5em;
    border-bottom:solid 1px #666;
}
.woocommerce-mini-cart-item.mini_cart_item {
    display:flex;
    align-items:center;
    gap:1rem;
}
.woocommerce-mini-cart-item.mini_cart_item>a {
    display:flex;
    gap:0.5rem;
    text-decoration:none;
    align-items:center;
    font-weight:200;
}
.woocommerce-mini-cart-item.mini_cart_item>a.remove_from_cart_button {
    font-size:2rem;
}
.woocommerce-mini-cart-item.mini_cart_item>a.remove_from_cart_button:hover {
    color:firebrick;
}
.woocommerce-mini-cart-item.mini_cart_item>a:nth-child(2) {
    flex:1;
}
.woocommerce-mini-cart-item.mini_cart_item img {
    width:60px !important;
    height:60px !important;
    border: solid 3px olivedrab;
}
.woocommerce-mini-cart-item.mini_cart_item .quantity {
    display:flex;
    text-align:right;
    font-size:0.8rem;
    flex-direction:column;
}
.woocommerce-mini-cart-item.mini_cart_item .quantity .amount  {
    font-weight:bold;
}
.woocommerce-mini-cart__total.total {
    margin:1rem 0;
    text-align:right;
}
.woocommerce-mini-cart__buttons.buttons {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout {
    text-decoration: none;
    display: block;
    background-color: greenyellow;
    background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
    font-weight: bold;
    padding: 1em 2em;
    border-radius: 0.25em;
    max-width: 300px;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout:hover,
.woocommerce-mini-cart__buttons.buttons .button.checkout:active {
    background-image: none;
}

table.shop_table.shop_table_responsive {
    width:100%;
}
table.shop_table.shop_table_responsive td {
    text-align:right;
}
table.shop_table.shop_table_responsive tbody tr {
    border-bottom:solid 1px #666;
}
table.shop_table.shop_table_responsive th {
    text-align:right;
}
table.shop_table.shop_table_responsive td.product-remove,
table.shop_table.shop_table_responsive th.product-name,
table.shop_table.shop_table_responsive td.product-name,
table.shop_table.shop_table_responsive td.product-thumbnail {
    text-align:left;
}
table.shop_table.shop_table_responsive a {
    text-decoration:none;
}
table.shop_table.shop_table_responsive .remove {
    font-size:2rem;
}
table.shop_table.shop_table_responsive .remove:hover {
    color:firebrick;
}
table.shop_table.shop_table_responsive img {
    width:80px !important;
    height:80px !important;
    border: solid 4px olivedrab;
}
.woocommerce-cart-form .coupon {
    margin-bottom:1em;
    display:flex;
    align-items:center;
    gap:0.5rem;
    justify-content: flex-end;
}
.woocommerce-cart-form .coupon button.button {
    padding:0.25em 1em;
    font-size:0.7em;
}

.woocommerce-message {
    text-align:center;
    font-size:1.4rem;
    font-weight:200;
    margin-bottom: 1em;;
}

.woocommerce-message::before {
    content: '';
    display: block;
    height: 2px;
    background-image: linear-gradient(45deg, yellowgreen, forestgreen);
}
.woocommerce-message::after {
    content: '';
    display: block;
    height: 2px;
    background-image: linear-gradient(45deg, yellowgreen, forestgreen);
}

.wc-proceed-to-checkout .button {
    max-width:100%;
    display:block;
    text-align:center;
    margin:1rem 0;
}

.woocommerce-billing-fields__field-wrapper>p {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}