/* 02-base.css — global typography, chrome, and reusable primitives */

body {
    font-family: var(--font-sans);
    color: var(--gray-900);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
a { color: var(--brand-green); }

/* ---- Primitives ---- */

.bolao-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.10);
    color: #fff; font-size: var(--size-sm); font-weight: 600;
    backdrop-filter: blur(4px);
}

.bolao-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    transition: transform .18s ease, box-shadow .18s ease;
}
.bolao-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.bolao-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: var(--tint-green); color: var(--tint-green-ink);
    margin-bottom: var(--space-4);
}
.bolao-icon-badge svg { width: 28px; height: 28px; }

.bolao-mono-box {
    font-family: var(--font-mono);
    font-size: var(--size-sm);
    background: rgba(0,0,0,0.05);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: block; margin-top: var(--space-3);
}

/* ---- Buttons (also mapped onto WooCommerce in Task 5) ---- */
.bolao-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-family: var(--font-sans); font-weight: 700; font-size: var(--size-base);
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bolao-btn--gold {
    background: var(--brand-yellow); color: var(--gray-900);
    box-shadow: var(--glow-gold);
}
.bolao-btn--gold:hover { transform: translateY(-2px); background: #ffe838; }
.bolao-btn--ghost {
    background: transparent; color: #fff; border-color: rgba(255,255,255,0.6);
}
.bolao-btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ---- Section bands ---- */
.bolao-section { padding: var(--space-16) var(--space-4); }
.bolao-section__inner { max-width: 1080px; margin: 0 auto; }
.bolao-section--light { background: var(--gray-50); }
.bolao-section--hero {
    background: var(--grad-hero); color: #fff; text-align: center;
}
.bolao-section--cta { background: var(--grad-cta); color: #fff; text-align: center; }
.bolao-section__title { font-size: var(--size-4xl); margin-bottom: var(--space-3); }
.bolao-section__subtitle { font-size: var(--size-lg); color: var(--gray-500); max-width: 640px; margin: 0 auto var(--space-12); }
.bolao-section--hero .bolao-section__subtitle,
.bolao-section--cta .bolao-section__subtitle { color: rgba(255,255,255,0.85); }

/* ---- Header / nav (Astra overrides) ---- */
.main-header-menu .menu-link,
.ast-builder-menu .menu-link { font-family: var(--font-sans); font-weight: 600; }
.site-title, .site-title a { font-family: var(--font-display); font-weight: 800; }

/* "Inscreva-se" menu item rendered as a gold button */
.main-header-menu .menu-item a[href*="inscrever-se"],
.main-header-menu .menu-item a[href*="inscreva-se"],
.ast-builder-menu .menu-item a[href*="inscrever-se"],
.ast-builder-menu .menu-item a[href*="inscreva-se"] {
    background: var(--brand-yellow); color: var(--gray-900);
    border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4);
    box-shadow: var(--glow-gold);
}

/* ---- Footer ---- */
.site-footer, .ast-footer-copyright { font-family: var(--font-sans); }
.site-footer { color: var(--gray-500); }

/* ---- Buttons site-wide (WooCommerce + WP blocks inherit the gold look) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.wc-block-components-button,
.single_add_to_cart_button,
.wp-block-button__link,
.wp-element-button {
    background: var(--brand-yellow) !important;
    color: var(--gray-900) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-sans) !important; font-weight: 700 !important;
    box-shadow: var(--glow-gold);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---- Cards: WooCommerce product / account boxes ---- */
.woocommerce ul.products li.product,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce .woocommerce-order {
    background: #fff; border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
    padding: var(--space-6);
}