/*
Theme Name: The Judge's Picks
Theme URI: https://thejudgespicks.com
Author: The Judge's Picks
Description: Custom theme for The Judge's Picks — a sports picks subscription site with a server-side 24-hour paywall, structured pick data, and a rolling 30-day record. Built on the brand design tokens.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: judges-picks
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --jp-navy:#0A1F3D; --jp-white:#FFFFFF; --jp-green:#6FAF2D; --jp-silver:#D9DCE1;
  --jp-red:#C0392B; --jp-pending:#8A93A6;
  --jp-navy-800:#0E274B; --jp-navy-700:#143156;
  --jp-green-dark:#5C9325; --jp-green-tint:rgba(111,175,45,0.14);
  --jp-red-tint:rgba(192,57,43,0.12);
  --jp-text-muted:#B7C0D0; --jp-border:rgba(217,220,225,0.16);
  --jp-radius-md:10px; --jp-radius-lg:16px; --jp-radius-pill:999px;
  --jp-display:"Barlow Condensed","Oswald",system-ui,sans-serif;
  --jp-body:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--jp-navy); color:var(--jp-white); font-family:var(--jp-body);
  line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:var(--jp-green); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto;}

/* ---- Layout ---- */
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.narrow{max-width:760px;}

/* ---- Nav ---- */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(10,31,61,0.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--jp-border);}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.site-nav .brand img{height:38px; width:auto; display:block;}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{color:var(--jp-white); font-weight:600; font-size:15px;}
.nav-links a:hover{color:var(--jp-green); text-decoration:none;}
.nav-cta{background:var(--jp-green); color:var(--jp-navy)!important; padding:9px 18px;
  border-radius:var(--jp-radius-pill); font-weight:800;}
.nav-cta:hover{background:var(--jp-green-dark); text-decoration:none;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--jp-white); margin:5px 0;}

/* ---- Typography ---- */
.eyebrow{display:inline-block; font-family:var(--jp-display); font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--jp-green); font-size:15px; margin-bottom:14px;}
h1{font-family:var(--jp-display); font-weight:800; font-size:clamp(38px,6vw,64px);
  line-height:1.02; letter-spacing:.5px;}
h2{font-family:var(--jp-display); font-weight:700; font-size:clamp(26px,3.5vw,36px);
  letter-spacing:.4px; margin-bottom:16px;}
h3{font-family:var(--jp-display); font-weight:700; font-size:24px; letter-spacing:.3px;}
.lede{color:var(--jp-text-muted); font-size:19px; max-width:640px;}
.page-head{padding:64px 0 32px; text-align:center;}
.page-head .lede{margin:18px auto 0;}

/* ---- Prose ---- */
.prose{font-size:17px; color:#E7ECF4;}
.prose p{margin:0 0 20px;}
.prose strong{color:var(--jp-white);}
.prose .pull{font-family:var(--jp-display); font-weight:700; font-size:26px; line-height:1.25;
  color:var(--jp-green); border-left:3px solid var(--jp-green); padding:6px 0 6px 22px; margin:32px 0;}

/* ---- Buttons ---- */
.btn{display:inline-block; background:var(--jp-green); color:var(--jp-navy); font-weight:800;
  letter-spacing:.3px; padding:14px 28px; border-radius:var(--jp-radius-pill); border:0;
  cursor:pointer; font-size:16px;}
.btn:hover{background:var(--jp-green-dark); text-decoration:none;}
.btn-ghost{background:transparent; color:var(--jp-white); border:1.5px solid var(--jp-silver);}
.btn-ghost:hover{background:rgba(217,220,225,0.08);}

/* ---- Cards / sections ---- */
.section{padding:56px 0; border-top:1px solid var(--jp-border);}
.card{background:var(--jp-navy-800); border:1px solid var(--jp-border);
  border-radius:var(--jp-radius-lg); padding:28px;}

/* ============================================================
   RECORD BADGE (rolling 30-day)
   ============================================================ */
.record-bar{background:var(--jp-navy-800); border-bottom:1px solid var(--jp-border); padding:14px 0;}
.record-bar .wrap{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.record-badge{display:inline-flex; align-items:center; gap:14px;}
.record-badge .big{font-family:var(--jp-display); font-size:30px; font-weight:800; line-height:1;}
.record-badge .w{color:var(--jp-green);} .record-badge .l{color:var(--jp-red);}
.record-badge .dash{color:var(--jp-silver);}
.record-badge .cap{font-size:12px; letter-spacing:2px; color:var(--jp-text-muted);
  text-transform:uppercase; text-align:left; line-height:1.3;}

/* ============================================================
   PICK CARDS + PAYWALL
   ============================================================ */
.picks-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px;}
.pick{background:var(--jp-navy-800); border:1.5px solid var(--jp-border);
  border-radius:var(--jp-radius-lg); padding:22px; display:flex; flex-direction:column;}
.pick-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.sport-tag{display:inline-block; border:2px solid var(--jp-green); background:var(--jp-green-tint);
  color:var(--jp-green); font-family:var(--jp-display); font-weight:700; letter-spacing:2px;
  padding:4px 14px; border-radius:var(--jp-radius-pill); font-size:15px;}
.pick-time{font-size:13px; color:var(--jp-text-muted);}
.pick-matchup{font-family:var(--jp-display); font-size:26px; font-weight:700; margin:4px 0 14px;}
.pick-body{font-size:17px;}
.pick-call{display:inline-flex; align-items:center; gap:10px; font-family:var(--jp-display);
  font-weight:700; font-size:22px; color:var(--jp-white); background:var(--jp-navy);
  border:1px solid var(--jp-border); border-radius:var(--jp-radius-md); padding:12px 18px;}
.pick-locked{display:flex; align-items:center; gap:12px; padding:14px;
  background:rgba(217,220,225,0.06); border:1px dashed var(--jp-silver);
  border-radius:var(--jp-radius-md);}
.pick-locked img{width:30px; height:30px;}
.pick-locked .txt{font-size:14px; color:var(--jp-silver);}
.pick-locked a{font-weight:700;}
.pick-result{display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--jp-display); font-weight:700; font-size:18px; letter-spacing:.5px;}
.pick-result img{width:26px; height:26px;}
.pick-result.win{color:var(--jp-green);}
.pick-result.loss{color:var(--jp-red);}
.pick-result.pending{color:var(--jp-pending);}

/* ============================================================
   FORMS
   ============================================================ */
.field{margin-bottom:20px;}
.field label{display:block; font-weight:600; margin-bottom:7px; font-size:14px;}
.field input,.field textarea,.field select{width:100%; background:var(--jp-navy);
  border:1.5px solid var(--jp-border); border-radius:var(--jp-radius-md); padding:13px 15px;
  color:var(--jp-white); font-family:var(--jp-body); font-size:16px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--jp-green);}
.field textarea{min-height:150px; resize:vertical;}

/* ============================================================
   PRICING (sign-up)
   ============================================================ */
.pay-toggle{display:flex; gap:8px; justify-content:center; margin:8px auto 44px;
  background:var(--jp-navy-800); border:1px solid var(--jp-border);
  border-radius:var(--jp-radius-pill); padding:6px; width:max-content;}
.pay-toggle button{background:none; border:0; color:var(--jp-text-muted); font-family:var(--jp-body);
  font-weight:700; font-size:15px; cursor:pointer; padding:10px 26px; border-radius:var(--jp-radius-pill);}
.pay-toggle button.active{background:var(--jp-green); color:var(--jp-navy);}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.plan{background:var(--jp-navy-800); border:1.5px solid var(--jp-border);
  border-radius:var(--jp-radius-lg); padding:28px 24px; display:flex; flex-direction:column;}
.plan.featured{border-color:var(--jp-green); position:relative;}
.plan .flag{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--jp-green); color:var(--jp-navy); font-weight:800; font-size:12px;
  letter-spacing:1px; padding:4px 14px; border-radius:var(--jp-radius-pill); text-transform:uppercase;}
.plan .price{font-family:var(--jp-display); font-weight:800; font-size:46px; line-height:1; margin:12px 0 4px;}
.plan .price small{font-size:17px; color:var(--jp-text-muted); font-weight:600;}
.plan .sub{color:var(--jp-text-muted); font-size:14px; min-height:42px;}
.plan ul{list-style:none; margin:20px 0 24px; display:flex; flex-direction:column; gap:11px;}
.plan li{font-size:15px; padding-left:26px; position:relative; color:#E7ECF4;}
.plan li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px;
  background:var(--jp-green); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}
.plan .btn{margin-top:auto; text-align:center;}
.renew-note{text-align:center; font-size:13px; color:var(--jp-text-muted); margin-top:12px;}
.crypto-note{background:var(--jp-green-tint); border:1px solid var(--jp-green);
  border-radius:var(--jp-radius-md); padding:14px 18px; margin:0 auto 28px; max-width:680px;
  font-size:14px; color:#E7ECF4; text-align:center;}
.coins{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px;}
.coin{background:var(--jp-navy); border:1px solid var(--jp-border); border-radius:var(--jp-radius-pill);
  padding:4px 12px; font-size:13px; font-weight:700; letter-spacing:.5px;}
.hidden{display:none;}

/* ============================================================
   DISCLAIMER + FOOTER
   ============================================================ */
.disclaimer{background:var(--jp-navy-800); border-top:1px solid var(--jp-border);
  padding:32px 0; font-size:13px; color:var(--jp-text-muted); line-height:1.7;}
.disclaimer .wrap{max-width:900px;}
.disclaimer strong{color:var(--jp-silver);}
.rg-line{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-weight:600; color:var(--jp-silver);}
.site-footer{background:var(--jp-navy); border-top:1px solid var(--jp-border); padding:36px 0;
  font-size:14px; color:var(--jp-text-muted);}
.site-footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;}
.site-footer a{color:var(--jp-text-muted);}
.site-footer a:hover{color:var(--jp-green);}

/* ============================================================
   RESPONSIVE + A11Y
   ============================================================ */
:focus-visible{outline:2px solid var(--jp-green); outline-offset:2px;}
@media (max-width:720px){
  .nav-links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column;
    background:var(--jp-navy-800); padding:18px 24px; border-bottom:1px solid var(--jp-border); gap:18px;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .page-head{padding:44px 0 24px;}
  .plans{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;} html{scroll-behavior:auto;}}