/*
Theme Name: STRIVE Base
Theme URI: https://strivewebagency.com
Author: STRIVE Web Agency
Author URI: https://strivewebagency.com
Description: STRIVE block theme foundation with twenty-nine curated visual systems for business, commerce, service, horticulture, lifestyle and creative websites.
Version: 0.5.4
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strive-base
*/

/*
 * Keep this stylesheet intentionally small.
 * Standard Gutenberg styling belongs in theme.json.
 * STRIVE Blocks should consume the theme tokens exposed by theme.json.
 */

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
}

.wp-site-blocks {
    min-height: 100vh;
}

/*
 * Page-level sections own their own vertical padding. WordPress normally
 * applies the global blockGap between direct children of .wp-site-blocks,
 * which creates visible strips between Header → Main → Footer even when
 * adjacent sections are full-bleed. Reset only that root-level margin while
 * preserving normal Gutenberg Block spacing inside Groups, Stacks and Grids.
 */
.wp-site-blocks > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

.strive-section {
    padding-block: var(--wp--custom--section--md);
}

.strive-section--small {
    padding-block: var(--wp--custom--section--sm);
}

.strive-section--large {
    padding-block: var(--wp--custom--section--lg);
}

.strive-section--xlarge {
    padding-block: var(--wp--custom--section--xl);
}

.strive-surface {
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
}

.strive-card {
    background: var(--wp--preset--color--surface);
    border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--md);
    box-shadow: var(--wp--custom--shadow--card);
}

.strive-media {
    overflow: hidden;
    border-radius: var(--wp--custom--radius--image);
}

.strive-media img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Product Catalog layout.
 *
 * WooCommerce collapses Product Filters only below 601px by default. Keep the
 * native, accessible filter drawer through tablet widths, then present the
 * filters as a sticky right-hand sidebar on desktop.
 */
.product-catalog-layout {
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xl);
    margin-inline: auto;
    max-width: var(--wp--style--global--wide-size);
    width: 100%;
}

.product-catalog-products {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
}

.product-catalog-filter {
    align-self: flex-start;
    flex: 0 0 clamp(16.5rem, 24vw, 20rem) !important;
    margin-block: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    order: 1;
    position: sticky;
    top: var(--wp--preset--spacing--lg);
}

.admin-bar .product-catalog-filter {
    top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--wp--preset--spacing--lg));
}

@media (max-width: 1024px) {
    .product-catalog-layout {
        flex-direction: column;
        gap: var(--wp--preset--spacing--lg);
    }

    .product-catalog-filter {
        align-self: stretch;
        flex-basis: auto !important;
        order: 0;
        padding: var(--wp--preset--spacing--md) !important;
        position: static;
        width: 100%;
    }

    .product-catalog-filter .wc-block-product-filters {
        display: inline-flex;
        width: 100%;
    }

    .product-catalog-filter .wc-block-product-filters__open-overlay {
        color: var(--wp--preset--color--text);
        cursor: pointer;
        display: flex;
    }

    .product-catalog-filter .wc-block-product-filters__overlay {
        background-color: transparent;
        color: inherit;
        flex-grow: 0;
        inset: 0;
        pointer-events: none;
        position: fixed;
        top: var(--top-padding);
        transition: background-color 0.5s;
    }

    .product-catalog-filter .wc-block-product-filters__overlay-wrapper {
        background: transparent;
        color: inherit;
        height: 100%;
        width: 100%;
    }

    .product-catalog-filter .wc-block-product-filters__overlay-dialog {
        background-color: var(--wc-product-filters-overlay-background-color, var(--wc-product-filters-background-color, Canvas));
        color: var(--wc-product-filters-overlay-text-color, var(--wc-product-filters-text-color, CanvasText));
        inset: 0;
        position: absolute;
        transform: translateY(100vh);
    }

    .product-catalog-filter .wc-block-product-filters__overlay-header {
        display: flex;
    }

    .product-catalog-filter .wc-block-product-filters__overlay-content {
        background: inherit;
        color: inherit;
        flex-grow: 1;
        overflow-y: auto;
        padding-inline: var(--wp--preset--spacing--lg);
    }

    .product-catalog-filter .wc-block-product-filters__overlay-footer {
        display: block;
    }

    .product-catalog-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
        background-color: rgb(95 95 95 / 35%);
        pointer-events: auto;
        z-index: 9999;
    }

    .product-catalog-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        transform: translateY(0);
        transition: transform 0.5s;
    }
}