/*!
Theme Name: storms
Theme URI: https://github.com/yhabteab/storms/
Author: Yonas Habteab
Author URI: https://github.io/yhabteab/
Description: High quality and super fast block based WordPress theme with WooCommerce support.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 8.0
License: MIT
License URI: LICENSE
Text Domain: storms
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

storms WordPress theme, (C) 2026 Yonas Habteab.
storms is distributed under the terms of the GPL.
*/

/* Amazon SALE BADGE COLOR:           "background": "rgb(204, 12, 57) !important", */
body {
    font-family: Open Sans, Arial, sans-serif;
    /** background-color: #f5f5f5; */
    -webkit-font-smoothing: antialiased;

    /** WordPress site blocks */
    .wp-site-blocks {
        min-height: 100vh; /* Ensure it takes up full height */
        display: flex;
        flex-direction: column;

        main {
            flex: 1; /* This makes the main content area grow to fill space */
        }

        > * {
            margin-block-start: revert;
        }
    }
}

/** General pages content min height */
.products-container, .error404 .unknown-page {
    min-height: var(--wp--custom--content-vh-height);
}

input:not([type="submit"]), select, textarea {
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--bg-cream) !important;

    &:not(.aws-search-field) {
        font-size: var(--wp--preset--font-size--normal);
        border-radius: var(--wp--custom--minimal-rounded-corners);
        border: 1px solid var(--wp--preset--color--bg-soft-gray);

        &:focus-visible {
            border: none;
            outline: 2px solid var(--wp--preset--color--terracotta);
        }
    }
}

/** Woocommerce product catalog sorting */
.woocommerce.wc-block-catalog-sorting {
    flex-basis: 25%;

    .woocommerce-ordering .orderby {
        outline: none;
        padding: .5em;
        cursor: pointer;
        line-height: 1.1em;
        width: 100%;
        border: 1px solid darkgray;
        border-radius: var(--wp--custom--minimal-rounded-corners);
        font-size: var(--wp--preset--font-size--normal) !important;

        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right .7em top 50%;
        background-size: .65em auto;
    }
}

/** Woocommerce product price discount (the original price on the left side) */
.wc-block-components-product-price del {
    color: var(--wp--preset--color--bright-red);
}

/** Woocommerce global product rating styles */
.wc-block-components-product-rating {
    color: var(--wp--preset--color--orange);
}

/** Advanced Woocommerce Search (aws) result banner */
.aws-search-result, .aws-container .aws-search-field, .aws-container .aws-search-btn {
    color: var(--wp--preset--color--deep-brown);
    border: 1px solid transparent !important;
    font-size: var(--wp--preset--font-size--normal);

    &:is(.aws-search-result) {
        border-top: 1px solid var(--wp--preset--color--primary) !important;
        background-color: var(--wp--preset--color--bg-cream);
    }
}

/** Global styles */

.minimal-rounded {
    border-radius: var(--wp--custom--minimal-rounded-corners);
}

.rounded-corners {
    overflow: hidden;
    border-radius: var(--wp--custom--rounded-corners);
}

.natural-shadow {
    box-shadow: var(--wp--preset--shadow--natural);
}

.highlighted-shadow {
    border: 1px solid var(--wp--preset--color--gray);
    box-shadow: var(--wp--preset--shadow--highlighted);
}

/** Announcement bar widget */

.announcement-bar,
.announcement-bar .announcement-controls,
.announcement-controls .list-controls {
    max-height: var(--wp--custom--controls-vh-height);

    &:is(.announcement-bar) {
        margin-bottom: unset;

        @media only screen and (max-width: 680px) {
            display: none; /* Hide the announcement bar on mobile devices */
        }
    }
}

.announcement-controls .list-controls {
    min-width: 0; /** Allow to shrink the flex items when the windows gets smaller */
    padding: 0 var(--wp--preset--font-size--large);

    &:is(:last-child) .left {
        justify-content: flex-end;
    }

    .left {
        padding: 0 !important;
        height: var(--wp--custom--controls-vh-height);
        display: flex;
        align-items: center;
    }

    .lists {
        display: inline-flex;
        align-items: baseline;

        li.list {
            margin-right: 1em;
            gap: unset;

            &:not(:last-child) {
                margin-bottom: unset !important;
            }

            .text {
                margin-left: 0.2em;
                font-size: 0.7em !important;
                text-wrap: nowrap;

                &.link {
                    text-decoration: underline;
                }
            }

            i.icon {
                font-size: .5em !important;
                width: 1.5em !important;
                height: 1.5em !important;
            }
        }

    }
}

/** Site header */

.site-header {
    .main-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "logo account-cart" "search search";
        column-gap: 0.5em;

        .header-brand {
            grid-area: logo;
            border-radius: 0.38em;
        }

        .aws-container {
            grid-area: search;
            padding-bottom: .6em;

            .aws-search-field {
                padding-left: 1em;
                border-radius: 0.2em 0 0 0.2em !important;
            }

            .aws-search-btn {
                border-radius: 0 0.2em 0.2em 0 !important;
                background-color: var(--wp--preset--color--orange) !important;

                .aws-search-btn_icon {
                    color: inherit !important;
                }
            }
        }

        .customer-account-and-cart {
            grid-area: account-cart;

            .customer-account .avatar:not(.fa-user) {
                margin-top: .4em;
            }

            .wc-block-mini-cart__icon, .customer-account .avatar, .my-wishlist .fa-heart {
                line-height: 2em;
                font-size: 1.5rem;
                color: var(--wp--preset--color--white);

                &:hover {
                    cursor: pointer;
                    color: var(--wp--preset--color--orange);
                }
            }

            .alg-wc-wl-icon-wrapper .alg-wc-wl-counter {
                top: 7px;
                background-color: var(--wp--preset--color--orange);
                color: var(--wp--preset--color--primary);
            }

            .wc-block-mini-cart__button .wc-block-mini-cart__badge {
                font-size: .7em;
            }
        }

        @media only screen and (min-width: 600px) {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas: "logo search account-cart";

            .aws-container {
                padding-bottom: unset;
            }
        }
    }

    .menu-container .secondary-menu {
        z-index: 10;

        .wp-block-navigation-item {
            padding: .1em .8em;
            border: 1px solid transparent;
            border-radius: .1em;

            &:is(.current-menu-item) {
                color: #fff;
                border-bottom: 3px solid var(--wp--preset--color--sunny-yellow);
                background-color: var(--wp--preset--color--warm-wood-brown);
            }

            &:not(.current-menu-item):hover {
                border: 1px solid var(--wp--preset--color--orange);
            }
        }
    }
}

/** Product categories / Special Offers / Popular products / Shop */

.product {
    /*background-color: var(--wp--preset--color--gray);*/
    border-radius: var(--wp--custom--minimal-rounded-corners);

    .product-content .product-info .column-right .container .product-summary {
        .title-and-rating .wc-block-components-product-rating__container {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
        }
    }
}

.products-container {
    align-items: flex-start !important;

    .sidebar-categories {
        top: .5em;
        position: sticky;
        min-height: 70vh;
        box-shadow: var(--wp--preset--shadow--right-sided);

        /** Mobile view */
        display: flex;
        justify-content: space-between;
        align-items: center;

        .wp-block-navigation {
            margin-top: 0;
        }
        /** Mobile view end */

        .wp-block-navigation__responsive-container-content,
        .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
        .wp-block-navigation-item {
            align-items: stretch;
        }

        .wp-block-navigation-item {
            padding: .4em;

            &:is(.current-menu-item), &:hover {
                color: var(--wp--preset--color--white);
                background-color: var(--wp--preset--color--secondary);
                border-bottom: 1px solid var(--wp--preset--color--gray);
            }

            .wp-block-navigation-submenu, a {
                width: 99.8% !important;
            }
        }

        @media only screen and (min-width: 600px) {
            display: revert;

            .wp-block-navigation {
                margin-top: revert;
            }
        }
    }
}

/** My Account page */
.account-page {
    .page-columns .navigation-container > .navigation ul.lists .list:hover {
        cursor: pointer;

        i.icon, a.link.text {
            color: var(--wp--preset--color--terracotta) !important;
        }
    }

    .page-content {
        max-height: var(--wp--custom--content-vh-height);
        overflow-y: scroll;

        .woocommerce .account-content {
            float: left !important;
        }
    }
}

/** Cart page */
.cart-page {
    header hr.separator {
        flex: 40;
    }

    .cart-items {
        padding: var(--wp--preset--font-size--medium);
    }

    .cart-totals {
        padding-left: var(--wp--preset--font-size--small);
        padding-right: var(--wp--preset--font-size--small);
    }

    .empty-cart {
        .with-empty-cart-icon:before {
            background-color: var(--wp--preset--color--bg-orange);
        }

        .new-in-store .wp-block-heading {
            padding-bottom: var(--wp--preset--font-size--medium);
        }
    }
}

/** Checkout page */

.checkout-page .content .checkout {
    .checkout-fields, .checkout-totals {
        padding: var(--wp--preset--font-size--medium);

        &:is(.checkout-totals){
            margin-top: unset;
            padding-top: unset;
        }
    }
}

/** Order Confirmation page */

.order-confirmation {
    header {
        width: 70%;
    }

    .order-totals-container {
        .order-totals table {
            border-collapse: collapse;
            border: none;

            thead tr {
                background-color: var(--wp--preset--color--secondary);
                color: var(--wp--preset--color--white);
            }

            th, td {
                text-align: left !important;
            }

            tbody tr:nth-of-type(even) {
                background-color: var(--wp--preset--color--gray);
            }

            tfoot tr:is(:last-child) {
                background-color: var(--wp--preset--color--gray);
            }
        }
    }
}

/** Contact us page */

.contactus {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);

    .wpcf7-text, .wpcf7-select, .wpcf7-textarea, .wpcf7-number, .wpcf7-quiz {
        width: 95%;
        font-weight: 500;
        padding: 0.2em .5em;

        &:not(.wpcf7-textarea) {
            line-height: 2em;
        }
    }

    .wpcf7 .wpcf7-submit {
        cursor: pointer;
        padding: .575rem .75rem .575rem .75rem;
        color: #fff;
        border: none;
        background-color: var(--wp--preset--color--warm-wood-brown);
        font-size: var(--wp--preset--font-size--normal);
        border-radius: var(--wp--custom--minimal-rounded-corners);

        &:hover {
            background-color: var(--wp--preset--color--emerald-green);
        }
    }

    @media only screen and (max-width: 600px) {
        padding-right: var(--wp--preset--spacing--20);
        padding-left: var(--wp--preset--spacing--20);

        .address-column .embedded-site-map iframe {
            width: 350px; /** Embedded google map width on mobile */
        }
    }
}

.refund-and-returns-policy, .entry-content .privacy-policy {
    width: 70%;
}

/* LoginPress Login/Register pages AND the main site footer */

.site-footer {
    justify-content: space-between; /** Move the copyright text to the end */
}

.footer-wrapper {
    bottom: 0 !important;
}