/*
Theme Name:  Bloom & Trowel Child
Theme URI:   https://bloomandtrowelus.shop
Description: Child theme for Kadence — Bloom & Trowel gardening apparel shop
Author:      Lisa | Bloom & Trowel
Author URI:  https://bloomandtrowelus.shop
Template:    kadence
Version:     1.0.0
Text Domain: bloom-trowel-child
Tags:        woocommerce, cottagecore, botanical, custom-colors, custom-logo
*/

/*
 * ─────────────────────────────────────────────────────────
 *  BLOOM & TROWEL — BRAND TOKENS
 * ─────────────────────────────────────────────────────────
 *
 *  Forest Green  : #1E5047  — Primary / brand color
 *  Warm Parchment: #F5EEDB  — Light base / page background
 *  Soft Sage     : #C4D1C7  — Secondary background / accent
 *  Off-white     : #FAF7F0  — Card / surface background
 *  Warm Brown    : #6B4A2A  — Text accent / earthy detail
 *  Dark Text     : #2C2C2C  — Body text
 *
 *  Headline font : Recoleta (self-hosted WOFF2) → see functions.php
 *                  Fallback: 'DM Serif Display', Georgia, serif
 *  Body font     : Figtree (Google Fonts)
 *                  Fallback: system-ui, sans-serif
 *
 * ─────────────────────────────────────────────────────────
 */

/* ─── Reset / Base Overrides ───────────────────────────── */

:root {
    --bt-green:     #1E5047;
    --bt-parchment: #F5EEDB;
    --bt-sage:      #C4D1C7;
    --bt-surface:   #FAF7F0;
    --bt-brown:     #6B4A2A;
    --bt-text:      #2C2C2C;
    --bt-font-head: 'Recoleta', 'DM Serif Display', Georgia, serif;
    --bt-font-body: 'Figtree', system-ui, sans-serif;
    --bt-radius:    6px;
    --bt-radius-lg: 12px;
}

body {
    background-color: var(--bt-parchment);
    color: var(--bt-text);
    font-family: var(--bt-font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* ─── Typography ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
    font-family: var(--bt-font-head);
    color: var(--bt-green);
    font-weight: 400; /* Recoleta looks best at regular weight */
    line-height: 1.2;
}

h1 { font-size: clamp(2rem,   5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem);  }
h3 { font-size: clamp(1.3rem, 3vw, 1.9rem);  }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem);  }

a {
    color: var(--bt-green);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--bt-brown);
}

/* ─── Buttons ───────────────────────────────────────────── */

.wp-block-button__link,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: var(--bt-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--bt-green);
    color: var(--bt-parchment) !important;
    border: 2px solid var(--bt-green);
    border-radius: var(--bt-radius);
    padding: 0.65em 1.5em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--bt-brown);
    border-color: var(--bt-brown);
    color: var(--bt-parchment) !important;
}

/* Ghost / outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--bt-green) !important;
    border-color: var(--bt-green);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--bt-green);
    color: var(--bt-parchment) !important;
}

/* ─── Header / Navigation ───────────────────────────────── */

.site-header,
.kadence-sticky-header {
    background-color: var(--bt-surface);
    border-bottom: 1px solid var(--bt-sage);
}

.main-navigation a,
.kadence-navigation a {
    font-family: var(--bt-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--bt-green);
}

.main-navigation a:hover,
.kadence-navigation a:hover {
    color: var(--bt-brown);
}

/* ─── WooCommerce — Product Cards ───────────────────────── */

.woocommerce ul.products li.product,
.wc-block-grid__product {
    background-color: var(--bt-surface);
    border: 1px solid var(--bt-sage);
    border-radius: var(--bt-radius-lg);
    padding: 1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
    box-shadow: 0 4px 16px rgba(30, 80, 71, 0.12);
    transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
    color: var(--bt-green);
    font-weight: 600;
}

/* ─── WooCommerce — Single Product ─────────────────────── */

.woocommerce div.product .product_title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--bt-green);
    font-size: 1.4rem;
    font-weight: 600;
}

/* ─── WooCommerce — Cart & Checkout ─────────────────────── */

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
    background-color: var(--bt-surface);
    border: 1px solid var(--bt-sage);
    border-radius: var(--bt-radius-lg);
    padding: 1.5rem;
}

/* ─── Footer ────────────────────────────────────────────── */

.site-footer {
    background-color: var(--bt-green);
    color: var(--bt-parchment);
}

.site-footer a {
    color: var(--bt-sage);
}

.site-footer a:hover {
    color: #fff;
}

/* ─── Utility / Block Helpers ───────────────────────────── */

.has-parchment-background-color { background-color: var(--bt-parchment); }
.has-sage-background-color      { background-color: var(--bt-sage); }
.has-forest-green-background-color { background-color: var(--bt-green); }
.has-surface-background-color   { background-color: var(--bt-surface); }

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 768px) {
    body {
        font-size: 0.9375rem;
    }
}