/*
Theme Name: MB In Arts
Theme URI: https://mbinarts.com
Author: MB In Arts Studio
Description: Custom block theme for MB In Arts Studio — handcrafted epoxy cups, custom tumblers, and unique resin art. Built on the Twenty Twenty-Four structure with brand colors and typography.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mbinarts
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, e-commerce
*/

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@300;400;700&display=swap');

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: #FDFBF7;
    color: #2D3748;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDFBF7; }
::-webkit-scrollbar-thumb { background: #C8A165; border-radius: 4px; }

/* ── Sticky Navigation Bar ──────────────────────────────────── */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(44,55,72,0.07);
    border-bottom: 1px solid rgba(200,161,101,0.18);
}

/* ── Navigation Links ───────────────────────────────────────── */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
    color: #2D3748 !important;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}

.wp-block-navigation a:hover {
    color: #1B8B98 !important;
}

/* ── Site Logo ──────────────────────────────────────────────── */
.wp-block-site-logo img {
    height: 200px !important;
    width: auto !important;
    object-fit: contain;
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: 'Cinzel', serif;
    line-height: 1.25;
}

/* ── Product Cards ──────────────────────────────────────────── */
.product-card {
    border: 1px solid rgba(44,55,72,0.08);
    box-shadow: 0 2px 8px rgba(44,55,72,0.06);
    transition: box-shadow 0.25s, transform 0.25s;
}

.product-card:hover {
    box-shadow: 0 8px 24px rgba(44,55,72,0.14);
    transform: translateY(-2px);
}

/* ── Process Steps ──────────────────────────────────────────── */
.step-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── FAQ / Details ──────────────────────────────────────────── */
.wp-block-details {
    background: #F9F9F9;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    cursor: pointer;
}

.wp-block-details summary {
    font-weight: 700;
    color: #2D3748;
    list-style: none;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.wp-block-button__link {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    transition: opacity 0.2s, transform 0.15s;
}

.wp-block-button__link:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Section Gold Divider ───────────────────────────────────── */
.gold-divider {
    width: 96px;
    height: 4px;
    background: #C8A165;
    border: none;
    border-radius: 4px;
    margin: 1rem auto 3rem;
}

/* ── YITH Product Add-On Fields ─────────────────────────────── */
.yith-wapo-addon input[type="text"],
.yith-wapo-addon input[type="email"],
.yith-wapo-addon input[type="number"],
.yith-wapo-addon textarea,
.yith-wapo-addon select,
.yith-wapo-fields-wrapper input[type="text"],
.yith-wapo-fields-wrapper input[type="email"],
.yith-wapo-fields-wrapper input[type="number"],
.yith-wapo-fields-wrapper textarea,
.yith-wapo-fields-wrapper select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #2D3748;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.yith-wapo-addon input:focus,
.yith-wapo-addon textarea:focus,
.yith-wapo-fields-wrapper input:focus,
.yith-wapo-fields-wrapper textarea:focus {
    border-color: #C8A165;
    box-shadow: 0 0 0 2px rgba(200,161,101,0.15);
}

/* ── Hero Background Pattern ────────────────────────────────── */
.hero-section {
    background-color: #FDFBF7;
    background-image:
        radial-gradient(#C8A165 0.5px, transparent 0.5px),
        radial-gradient(#1B8B98 0.5px, #FDFBF7 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* ── Dark Section Decorative Blobs ──────────────────────────── */
.custom-section {
    position: relative;
    overflow: hidden;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    border-top: 4px solid #C8A165;
}

.site-footer a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* ── WooCommerce: Button Colors ─────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
    background-color: #1B8B98;
    color: #FFFFFF;
    border-radius: 50px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: none;
    transition: background-color 0.2s, transform 0.15s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: #166f7a;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wp-block-site-logo img {
        height: 140px !important;
    }
}