/**
 * SAT Houtini Theme Override
 *
 * Adapts SimRacing Affiliate Tables to match Houtini.com's
 * GeneratePress editorial design language.
 *
 * Design tokens derived from Chrome DevTools computed styles audit:
 *   Body: "Frank Ruhl Libre", serif — 20px/30px — #222
 *   Headings: Inter, sans-serif — 700-800 weight
 *   GP accent: #745acc (purple)
 *   GP contrast: #222, #444, #666
 *   GP base: #888, #fafafa, #fff
 *   Links: #222, no text-decoration
 *   Native tables: transparent headers, bold text, 0.8px borders, 10px padding
 *
 * Loaded conditionally when site is houtini.com
 * Specificity matches sat-professional-styles.css (body .sat-products-container prefix)
 */

/* ==========================================================================
   1. CSS Custom Properties — Houtini palette
   ========================================================================== */
:root {
    /* Override SAT brand colours with Houtini/GP tokens */
    --sat-header-bg: #fafafa;
    --sat-header-text: #222222;
    --sat-header-border: #dddddd;
    --sat-accent: #745acc;
    --sat-accent-hover: #5d45a8;
    --sat-accent-light: rgba(116, 90, 204, 0.08);

    /* Override the original SAT brand variables used throughout */
    --sat-header-blue: #fafafa;
    --sat-header-blue-dark: #dddddd;

    /* Typography — inherit from GP theme */
    --sat-font-family: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
    --sat-font-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Preserve functional colours but soften to editorial tones */
    --sat-text-dark: #222222;
    --sat-text-medium: #666666;
    --sat-text-light: #888888;
    --sat-border-light: #dddddd;
    --sat-bg-white: #ffffff;
    --sat-bg-hover: #fafafa;
    --sat-link-blue: #222222;
}


/* ==========================================================================
   2. Container — softer shadow, editorial border, tighter base font
   ========================================================================== */
body .sat-products-container {
    font-family: var(--sat-font-heading) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    border: 0.8px solid var(--sat-border-light) !important;
    border-radius: 4px !important;
}


/* ==========================================================================
   3. Table header — light editorial style (not dark navy)
   ========================================================================== */
body .sat-products-container .sat-products-table thead th {
    background: var(--sat-header-bg) !important;
    color: var(--sat-header-text) !important;
    font-family: var(--sat-font-heading) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 0.8px solid var(--sat-header-border) !important;
    padding: 8px 10px !important;
}

/* Sort indicator — use dark text instead of white */
body .sat-products-container .sat-products-table thead th .sat-sort-indicator {
    color: var(--sat-text-medium) !important;
}

body .sat-products-container .sat-sortable:hover {
    background: #f0f0f0 !important;
}


/* ==========================================================================
   4. Product rows — serif body text, editorial spacing
   ========================================================================== */
body .sat-products-container .sat-products-table tbody td {
    font-family: var(--sat-font-heading) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--sat-text-dark) !important;
    border-bottom: 0.8px solid #eee !important;
    padding: 8px 10px !important;
}

body .sat-products-container .sat-products-table tbody tr:hover {
    background-color: var(--sat-bg-hover) !important;
}

/* Product title — heading font, link style matches Houtini */
body .sat-products-container .sat-title-link {
    font-family: var(--sat-font-heading) !important;
    font-weight: 600 !important;
    font-size: 9px !important;
    color: var(--sat-text-dark) !important;
    text-decoration: none !important;
}

body .sat-products-container .sat-title-link:hover {
    color: var(--sat-accent) !important;
    text-decoration: none !important;
}


/* ==========================================================================
   5. Prices — keep green for GBP but align with editorial style
   ========================================================================== */
body .sat-products-container .sat-price-link {
    font-family: var(--sat-font-heading) !important;
    font-size: 10px !important;
    border-radius: 3px !important;
}


/* ==========================================================================
   6. Merchant links — dark text, subtle hover (not bright blue)
   ========================================================================== */
body .sat-merchant-text {
    color: var(--sat-text-dark) !important;
}

body .sat-merchant-link:hover .sat-merchant-text {
    color: var(--sat-accent) !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   7. Buy / More Info button — GP purple accent, softer shape
   ========================================================================== */
.sat-more-info-btn {
    background-color: var(--sat-accent) !important;
    border-color: var(--sat-accent) !important;
    border-radius: 4px !important;
    font-family: var(--sat-font-heading) !important;
    font-size: 0.7rem !important;
    padding: 0.4rem 0.9rem !important;
}

.sat-more-info-btn:hover {
    background-color: var(--sat-accent-hover) !important;
    border-color: var(--sat-accent-hover) !important;
    box-shadow: 0 4px 12px rgba(116, 90, 204, 0.3) !important;
}

.sat-more-info-btn:active {
    box-shadow: 0 2px 6px rgba(116, 90, 204, 0.2) !important;
}


/* ==========================================================================
   8. Filter bar — matches editorial border treatment
   ========================================================================== */
.sat-filter-bar {
    background-color: var(--sat-bg-white) !important;
    border: 0.8px solid var(--sat-border-light) !important;
    border-bottom: 0 !important;
    font-family: var(--sat-font-family) !important;
}

.sat-filter-label,
.sat-filter-suffix {
    color: var(--sat-text-medium) !important;
}

.sat-filter-dropdown {
    font-family: var(--sat-font-family) !important;
    border-color: var(--sat-border-light) !important;
    border-radius: 3px !important;
}

.sat-filter-dropdown:focus {
    border-color: var(--sat-accent) !important;
    box-shadow: 0 0 0 3px rgba(116, 90, 204, 0.1) !important;
}


/* ==========================================================================
   9. Stock / availability — keep functional colours, adjust weight
   ========================================================================== */
body .sat-availability.sat-in-stock {
    font-family: var(--sat-font-heading) !important;
    font-size: 10px !important;
}

body .sat-availability.sat-out-stock,
body .sat-availability.sat-out-of-stock,
body .sat-availability.sat-pre-order,
body .sat-availability.sat-limited-stock {
    font-family: var(--sat-font-heading) !important;
    font-size: 10px !important;
}


/* ==========================================================================
   10. Rating — keep stars gold, adjust supporting text
   ========================================================================== */
body .sat-rating-value {
    color: var(--sat-text-medium) !important;
    font-family: var(--sat-font-family) !important;
}

body .sat-review-count {
    color: var(--sat-text-light) !important;
    font-family: var(--sat-font-family) !important;
}

body .sat-no-rating {
    color: var(--sat-text-light) !important;
    font-family: var(--sat-font-family) !important;
}


/* ==========================================================================
   11. Mobile card layout — editorial treatment, compact text
   ========================================================================== */
@media (max-width: 991px) {
    /* Base font size for all mobile card cells */
    body .sat-products-container .sat-products-table td {
        font-family: var(--sat-font-heading) !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    /* Card product title bar — light instead of navy */
    body .sat-products-container .sat-products-table td.sat-col-product {
        background: var(--sat-header-bg) !important;
        background-color: var(--sat-header-bg) !important;
        border-bottom: 0.8px solid var(--sat-header-border) !important;
    }

    body .sat-products-container .sat-products-table td.sat-col-product .sat-title-link {
        color: var(--sat-text-dark) !important;
        font-family: var(--sat-font-heading) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
    }

    /* Card borders — use editorial 0.8px style */
    body .sat-products-container .sat-product-row {
        border: 0.8px solid var(--sat-border-light) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    /* Mobile price — smaller than default, heading font */
    body .sat-products-container .sat-products-table td.sat-col-price .sat-price-link {
        font-family: var(--sat-font-heading) !important;
        font-size: 18px !important;
    }

    /* Mobile labels (Available from, Rating, etc.) */
    body .sat-products-container .sat-products-table td::before {
        font-size: 10px !important;
        font-family: var(--sat-font-heading) !important;
    }
}


/* ==========================================================================
   12. Product images — slightly softer border radius
   ========================================================================== */
body .sat-products-container .sat-product-image {
    border-radius: 3px !important;
}