/**
 * Theme Name: PEOTools
 * Theme URI: https://peotools.com
 * Description: Official theme for PEOTools — warm paper & ink design system. Clean, trustworthy, conversion-focused. Full WooCommerce + Portal support. v2.0
 * Author: PEOTools
 * Version: 2.0.1
 * License: GPL-2.0-or-later
 * Text Domain: peotools
 * Tags: woocommerce, custom-colors
 * Requires at least: 6.5
 * Requires PHP: 8.2
 */

/* ============================================
 *  DESIGN SYSTEM TOKENS
 *  ============================================ */
:root {
    --paper:        #f4efe6;
    --paper-deep:   #ece5d4;
    --ink:          #0e0d0b;
    --ink-soft:     #25221d;
    --ink-mute:     #5a544a;
    --rule:         #cdc4b0;
    --rule-soft:    #ddd5bf;
    --accent:       #b8551f;
    --accent-deep:  #8a3e15;
    --accent-soft:  #d4793e;

    --display: 'Merriweather', Georgia, serif;
    --body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --max-width: 1240px;
}

/* Base */
body {
    font-family: var(--body);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ink);
}

h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
}

/* CTA Buttons */
.cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 14px;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    text-decoration: none;
    transition: all 140ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.cta-pill:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--paper);
}

.cta-pill.accent {
    background: var(--accent);
    border-color: var(--accent);
}

.cta-pill.ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.cta-pill.ghost:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(244, 239, 230, 0.92);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule-soft);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
}

.wordmark {
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 0;
}

.wordmark .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
    margin: 0 7px 2px 0;
}

/* Footer */
.site-footer {
    background: var(--ink);
    color: var(--paper);
    padding: 60px 0 32px;
    font-size: 14px;
}

/* Reveal animation (used on homepage) */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* WooCommerce basic overrides */
.woocommerce ul.products li.product {
    border: 1px solid var(--rule);
    padding: 24px;
    background: #fff;
}

/* ── Checkout page ──────────────────────────────────────────────────────── */

/* 1. Remove title */
.woocommerce-checkout h1.wp-block-heading,
.woocommerce-checkout .page-title,
.woocommerce-checkout h1:first-of-type { display: none !important; }

/* 2. Two-column layout: form left, order summary right */
.woocommerce-checkout .wp-block-woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 48px !important;
    align-items: start !important;
    max-width: 1000px !important;
    margin: 40px auto !important;
    padding: 0 24px !important;
}

/* Fields block stays left */
.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block {
    grid-column: 1 !important;
}

/* Order summary moves to right column */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 32px !important;
}

/* Hide product thumbnail */
.woocommerce-checkout .wc-block-components-order-summary-item__image {
    display: none !important;
}

@media (max-width: 768px) {
    .woocommerce-checkout .wp-block-woocommerce-checkout {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: static !important;
    }
}