/*
Theme Name: UPL Auction Theme
Theme URI: https://auction.theuas.in
Description: Grand live-auction companion theme for the Universal Premier League. Built to pair with the UPL Auction GRAND plugin on the auction subdomain. Stadium-night aesthetic with a live stage front page, registered players, and last season's auction archive.
Version: 1.0.0
Author: TheUAS
Author URI: https://theuas.in
Text Domain: upl-auction-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
    --navy: #0A1929;
    --navy2: #102341;
    --flood: #0B5394;
    --flood-l: #2E7BD6;
    --amber: #F59E0B;
    --amber-d: #D97706;
    --green: #1A6B3F;
    --red: #B83227;
    --ink: #0F172A;
    --ink2: #334155;
    --ink3: #64748B;
    --line: #E2E8F0;
    --soft: #F1F5F9;
    --card: #FFFFFF;
    --f-disp: 'Saira Condensed', system-ui, sans-serif;
    --f-body: 'Manrope', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    --wrap: 1180px;
    --hdr-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--f-body);
    color: var(--ink);
    background: var(--soft);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--hdr-h);
}
a { color: var(--flood); text-decoration: none; }
img { max-width: 100%; height: auto; }

.uag-container { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

/* ===== Header ===== */
.uag-site-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--hdr-h); z-index: 100;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy2) 100%);
    border-bottom: 2px solid var(--amber);
    box-shadow: 0 4px 18px rgba(6,15,28,.3);
}
.uag-site-header .uag-container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.uag-brand { display: flex; align-items: center; gap: 10px; }
.uag-brand-logo { font-family: var(--f-disp); font-size: 26px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.uag-brand-logo b { color: var(--amber); }
.uag-brand-tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7E93AD; }

.uag-nav { display: flex; align-items: center; gap: 4px; }
.uag-nav a {
    color: #C7D5E6; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 9px;
    transition: .15s; letter-spacing: .01em;
}
.uag-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.uag-nav a.is-active { color: var(--navy); background: var(--amber); }

.uag-nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.uag-nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }

@media (max-width: 820px) {
    .uag-nav-toggle { display: flex; }
    .uag-nav {
        position: fixed; top: var(--hdr-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--navy2); padding: 8px 18px 16px; border-bottom: 2px solid var(--amber);
        transform: translateY(-130%); transition: transform .25s ease; box-shadow: 0 12px 24px rgba(0,0,0,.4);
    }
    .uag-nav.is-open { transform: translateY(0); }
    .uag-nav a { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
}

/* ===== Main ===== */
.uag-main { padding: 26px 0 60px; }

/* ===== Hero ===== */
.uag-hero {
    text-align: center; padding: 38px 18px 26px; margin-bottom: 8px;
    position: relative;
}
.uag-hero h1 {
    font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; line-height: .95;
    font-size: clamp(40px, 9vw, 86px); letter-spacing: -.01em; color: var(--navy);
}
.uag-hero h1 .a { color: var(--flood); }
.uag-hero h1 .b { color: var(--amber); }
.uag-hero p { color: var(--ink3); font-size: 16px; font-weight: 500; margin-top: 10px; }
.uag-hero .uag-live-dot {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; padding: 6px 14px; border-radius: 999px;
}
.uag-hero .uag-live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: uagLive 1.4s infinite; }
@keyframes uagLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ===== Home quick cards ===== */
.uag-home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 760px) { .uag-home-cards { grid-template-columns: 1fr; } }
.uag-hc {
    display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 22px; transition: .18s; position: relative; overflow: hidden;
}
.uag-hc::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--ac, var(--flood)); }
.uag-hc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,.14); }
.uag-hc-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--ac, var(--flood)); color: #fff; font-family: var(--f-disp); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.uag-hc h3 { font-family: var(--f-disp); font-size: 24px; font-weight: 800; color: var(--navy); text-transform: uppercase; line-height: 1; }
.uag-hc p { color: var(--ink3); font-size: 14px; margin-top: 8px; }
.uag-hc-go { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--flood); }

/* ===== Generic page content ===== */
.uag-page { background: transparent; }
.uag-page-inner { }
.uag-page-title { font-family: var(--f-disp); font-size: clamp(30px, 6vw, 48px); font-weight: 900; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }

/* WordPress content basics for non-shortcode pages */
.uag-content h2 { font-family: var(--f-disp); font-size: 28px; font-weight: 800; color: var(--navy); margin: 22px 0 10px; }
.uag-content h3 { font-size: 20px; font-weight: 700; margin: 18px 0 8px; }
.uag-content p { margin: 0 0 14px; }
.uag-content a { text-decoration: underline; }

/* ===== Footer ===== */
.uag-site-footer { background: var(--navy); color: #9DB2CC; padding: 30px 0; margin-top: 40px; }
.uag-site-footer .uag-container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.uag-foot-brand { font-family: var(--f-disp); font-size: 20px; font-weight: 800; color: #fff; text-transform: uppercase; }
.uag-foot-brand b { color: var(--amber); }
.uag-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.uag-foot-links a { color: #9DB2CC; font-size: 14px; font-weight: 600; }
.uag-foot-links a:hover { color: #fff; }
.uag-foot-copy { font-size: 12px; color: #607a98; width: 100%; }

/* 404 */
.uag-404 { text-align: center; padding: 70px 20px; }
.uag-404 h1 { font-family: var(--f-disp); font-size: 90px; font-weight: 900; color: var(--navy); }
.uag-404 p { color: var(--ink3); margin: 10px 0 20px; }
.uag-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--flood); color: #fff; border-radius: 10px; padding: 11px 22px; font-weight: 700; }