/*
Theme Name: PadelOne
Theme URI: https://example.com/padelone
Author: Your Name
Author URI: https://example.com
Description: Lightweight one-page theme for padel court bookings with app deep-link buttons.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: padelone
Tags: one-column, custom-colors, custom-logo, custom-menu, responsive-layout, accessibility-ready
*/
:root { --po-primary:#0b6cff; --po-secondary:#00c16a; --po-bg:#0a0a0a; --po-surface:#111111; --po-text:#ffffff; --po-muted:#c9d1d9; }
html { scroll-behavior:smooth; } *{ box-sizing:border-box }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--po-text); background: radial-gradient(1200px 800px at 90% -10%, rgba(11,108,255,.25), transparent 60%), radial-gradient(900px 700px at 10% 110%, rgba(0,193,106,.18), transparent 60%), var(--po-bg); line-height:1.6 }
.container{ width:min(1100px,92%); margin:0 auto }
.site-header{ position:sticky; top:0; z-index:1000; background:rgba(10,10,10,.72); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06) }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px }
.brand .logo{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--po-primary), var(--po-secondary)) }
.nav-menu{ display:flex; gap:1.1rem; align-items:center }
.nav-menu a{ color:var(--po-muted); text-decoration:none; font-weight:500 }
.nav-menu a:hover,.nav-menu a:focus{ color:#fff }
.nav-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.15); color:#fff; padding:.5rem .7rem; border-radius:10px }
@media (max-width:880px){ .nav-toggle{ display:block } .nav-menu{ position:absolute; right:4%; top:64px; background:var(--po-surface); padding:.8rem; border-radius:14px; border:1px solid rgba(255,255,255,.08); display:none; flex-direction:column; width:220px } .nav-menu.open{ display:flex } }
.hero{ padding:84px 0 64px; background: radial-gradient(1000px 500px at 0% 0%, rgba(11,108,255,.25), transparent 60%) }
.hero .grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center }
@media (max-width:880px){ .hero .grid{ grid-template-columns:1fr } }
.kicker{ color:var(--po-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.15em; font-size:.78rem }
.hero h1{ margin:.4rem 0 1rem; line-height:1.1; font-size:clamp(2rem, 1rem + 3.2vw, 3.25rem) }
.hero p{ color:var(--po-muted); font-size:1.05rem }
.cta-row{ margin-top:1.25rem; display:flex; gap:.8rem; flex-wrap:wrap }
.btn,.btn-outline{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; padding:.8rem 1.1rem; border-radius:14px; font-weight:700 }
.btn{ background:var(--po-primary); color:#fff } .btn:hover{ filter:brightness(1.06) }
.btn-outline{ border:1px solid rgba(255,255,255,.18); color:#fff } .btn-outline:hover{ background:rgba(255,255,255,.06) }
.app-badges{ display:flex; gap:.6rem; flex-wrap:wrap } .app-badges a img{ height:44px; display:block; border-radius:10px; border:1px solid rgba(255,255,255,.08) }
.section{ padding:68px 0 } .section h2{ font-size:clamp(1.4rem, 1rem + 2vw, 2.2rem); margin:0 0 .6rem } .section p.lead{ color:var(--po-muted); margin-top:.2rem }
.card-grid{ margin-top:1.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
@media (max-width:880px){ .card-grid{ grid-template-columns:1fr } }
.card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1.1rem; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.card h3{ margin-top:.4rem }
.gallery{ margin-top:1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.08) }
@media (max-width:880px){ .gallery{ grid-template-columns:repeat(2,1fr) } }
.faq details{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.8rem 1rem }
.faq details+details{ margin-top:.6rem } .faq summary{ cursor:pointer; font-weight:700 }
.site-footer{ padding:48px 0 72px; color:var(--po-muted); border-top:1px solid rgba(255,255,255,.08) }
.site-footer a{ color:#fff; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.3) } .site-footer a:hover{ border-bottom-style:solid }
.copy{ margin-top:.6rem; font-size:.95rem; color:var(--po-muted) }