/*
Theme Name: SportZone Pro
Theme URI: https://sportzonepro.com/
Author: SportZone
Description: Premium sports booking + online store WordPress theme. Supports multi-sport court/session booking, WooCommerce store, memberships, and trainer profiles. Built with zero plugin dependencies for the booking system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: sportzone-pro
Tags: sports, booking, woocommerce, dark, premium
*/

/* ============================================================
   GLOBAL DESIGN TOKENS
   ============================================================ */
:root {
    /* Core Palette */
    --sz-bg:          #ffffff;
    --sz-bg2:         #ffffff;
    --sz-surface:     #ffffff;
    --sz-card:        #ffffff;
    --sz-card2:       #ffffff;
    --sz-overlay:     rgba(255, 255, 255, 0.85);

    /* Accent Colors (Chocolate Browns) */
    --sz-green:       #4E342E;
    --sz-green2:      #3E2723;
    --sz-green-glow:  rgba(78, 52, 46, 0.12);
    --sz-gold:        #d7ccc8;
    --sz-gold2:       #bcaaa4;
    --sz-red:         #d84315;

    /* Text */
    --sz-text:        #211a16;
    --sz-text2:       #5c4d43;
    --sz-muted:       #8d7b6e;

    /* Border */
    --sz-border:      rgba(93, 64, 55, 0.15);
    --sz-border2:     rgba(93, 64, 55, 0.08);

    /* Shadows */
    --sz-shadow:      0 20px 60px rgba(93, 64, 55, 0.1);
    --sz-glow:        0 0 40px rgba(93, 64, 55, 0.1);

    /* Layout */
    --sz-inner:       1400px;
    --sz-radius:      12px;
    --sz-radius2:     20px;
    --sz-radius3:     8px;

    /* Typography */
    --sz-font-head:   'Oswald', 'Arial Narrow', sans-serif;
    --sz-font-body:   'Inter', Arial, sans-serif;

    /* Transitions */
    --sz-ease:        cubic-bezier(0.23, 1, 0.32, 1);
    --sz-duration:    0.3s;

    /* Header */
    --sz-header-h:    80px;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    background: var(--sz-bg);
    color: var(--sz-text);
    font-family: var(--sz-font-body);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
ul { list-style: none; }

/* Layout container */
.sz-container {
    width: min(calc(100% - clamp(24px, 5vw, 80px)), var(--sz-inner));
    margin-inline: auto;
}
.sz-section {
    padding: clamp(60px, 8vw, 120px) 0;
}
.sz-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(32px, 5vw, 56px);
}
.sz-section-head h2 {
    font-family: var(--sz-font-head);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sz-text);
}
.sz-section-head h2 span {
    color: var(--sz-green);
}
.sz-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sz-green);
    border: 1px solid var(--sz-border);
    padding: 8px 18px;
    border-radius: 40px;
    transition: all var(--sz-duration) var(--sz-ease);
}
.sz-view-all:hover {
    background: var(--sz-green-glow);
    border-color: var(--sz-green);
}

/* Buttons */
.sz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sz-font-head);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--sz-radius3);
    border: none;
    cursor: pointer;
    transition: all var(--sz-duration) var(--sz-ease);
}
.sz-btn-primary {
    background: var(--sz-green);
    color: #ffffff;
}
.sz-btn-primary:hover {
    background: var(--sz-green2);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(93, 64, 55, 0.25);
}
.sz-btn-outline {
    background: transparent;
    color: var(--sz-green);
    border: 2px solid var(--sz-green);
}
.sz-btn-outline:hover {
    background: var(--sz-green);
    color: #ffffff;
    transform: translateY(-2px);
}
.sz-btn-ghost {
    background: rgba(93, 64, 55, 0.05);
    color: var(--sz-text);
    border: 1px solid var(--sz-border2);
    backdrop-filter: blur(10px);
}
.sz-btn-ghost:hover {
    background: rgba(93, 64, 55, 0.1);
    border-color: var(--sz-green);
    color: var(--sz-green);
}

/* Glass card */
.sz-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius2);
}

/* Utility */
.sz-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 40px;
    background: var(--sz-green-glow);
    color: var(--sz-green);
    border: 1px solid var(--sz-border);
}
.site-main { width: 100%; }