/* ==========================================================
   assets/css/global.css
   Dimuat di SEMUA halaman (bukan cuma halaman depan).
   Berisi variabel warna/font, sentuhan warna WooCommerce dasar,
   dan tombol WhatsApp mengambang.
   ========================================================== */

:root {
    --wl-ink: #1B2A4A;
    --wl-ink-deep: #12192E;
    --wl-paper: #FDFCF9;
    --wl-paper-deep: #F1EBDD;
    --wl-seal: #B23B2E;
    --wl-seal-dark: #8F2E23;
    --wl-gold: #B8933E;
    --wl-line: #DDD5C4;
    --wl-ink-soft: #5B6478;

    --wl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --wl-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wl-font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

body {
    font-family: var(--wl-font-body);
    color: var(--wl-ink);
}

h1, h2, h3, h4 {
    font-family: var(--wl-font-display);
}

a {
    color: var(--wl-seal);
}
a:hover {
    color: var(--wl-seal-dark);
}

/* Sentuhan warna dasar untuk tombol & harga WooCommerce di luar halaman depan */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--wl-seal);
    color: #fff;
    border-radius: 4px;
    font-family: var(--wl-font-body);
    font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--wl-seal-dark);
    color: #fff;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--wl-font-mono);
    color: var(--wl-ink);
}

/* Tombol WhatsApp mengambang */
.wl-floating-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wl-seal);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(27, 42, 74, 0.35);
    z-index: 9999;
    transition: transform 0.2s ease, background 0.2s ease;
}
.wl-floating-wa:hover {
    background: var(--wl-seal-dark);
    transform: translateY(-2px);
}
.wl-floating-wa svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

@media (max-width: 600px) {
    .wl-floating-wa {
        right: 14px;
        bottom: 14px;
        width: 50px;
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-floating-wa {
        transition: none;
    }
}