/*
Theme Name: Joogo Apparel
Theme URI: https://joogoapparels.com
Author: Joogo Group
Author URI: https://joogoapparels.com
Description: Custom sportswear & sublimation landing theme for Joogo Apparel. Fully customizable from Appearance → Customize — hero, badges, marquee, sports, features, shop cards, about, testimonials, contact and footer.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joogo-apparel
Tags: e-commerce, custom-colors, custom-logo, custom-menu
*/

/* ============ TOKENS (defaults, overridden by Customizer inline CSS) ============ */
:root{
  --jg-primary:#1F3BE0;        /* Joogo blue */
  --jg-secondary:#7C3AED;      /* Joogo purple */
  --jg-dark:#0A0F2C;           /* deep navy */
  --jg-dark-2:#101740;
  --jg-light:#F5F6FB;
  --jg-white:#FFFFFF;
  --jg-text:#1B2040;
  --jg-muted:#6B7194;
  --jg-radius:14px;
  --jg-font-display:'Archivo Black',system-ui,sans-serif;
  --jg-font-body:'Archivo',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--jg-font-body);color:var(--jg-text);background:var(--jg-white);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--jg-primary);text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--jg-secondary);outline-offset:2px}
.jg-container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--jg-font-display);line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
.jg-eyebrow{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:var(--jg-secondary);margin-bottom:12px}
.jg-section{padding:88px 0}
.jg-section--tight{padding:56px 0}
.jg-section-title{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:14px}
.jg-section-sub{color:var(--jg-muted);max-width:640px;margin-bottom:36px}

/* ============ BUTTONS ============ */
.jg-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.jg-btn:hover{transform:translateY(-2px)}
.jg-btn--primary{background:linear-gradient(100deg,var(--jg-primary),var(--jg-secondary));color:#fff;box-shadow:0 10px 26px rgba(31,59,224,.35)}
.jg-btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.jg-btn--wa{background:#25D366;color:#062b16;box-shadow:0 10px 26px rgba(37,211,102,.35)}
.jg-btn svg{width:18px;height:18px;fill:currentColor}

/* ============ HEADER ============ */
.jg-header{position:sticky;top:0;z-index:50;background:var(--jg-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.jg-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.jg-header .custom-logo{max-height:52px;width:auto}
.jg-logo-text{font-family:var(--jg-font-display);color:#fff;font-size:1.4rem;letter-spacing:.03em}
.jg-logo-text span{color:var(--jg-secondary)}
.jg-nav ul{display:flex;gap:28px;list-style:none}
.jg-nav a{color:#E7E9F7;font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;position:relative;padding:6px 0}
.jg-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--jg-secondary);transition:width .2s}
.jg-nav a:hover::after{width:100%}
.jg-header__cta{white-space:nowrap}
.jg-burger{display:none;background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}

/* ============ HERO ============ */
.jg-hero{background:radial-gradient(1100px 560px at 85% -10%,rgba(124,58,237,.45),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(31,59,224,.5),transparent 55%),var(--jg-dark);color:#fff;overflow:hidden;position:relative}
.jg-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:96px 0}
.jg-hero h1{font-size:clamp(2.2rem,5vw,3.9rem);margin-bottom:20px}
.jg-hero h1 em{font-style:normal;background:linear-gradient(100deg,#8FA0FF,var(--jg-secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.jg-hero p{color:#C6CBEA;font-size:1.08rem;max-width:540px;margin-bottom:32px}
.jg-hero__actions{display:flex;gap:16px;flex-wrap:wrap}
.jg-hero__media{position:relative}
.jg-hero__media img{border-radius:calc(var(--jg-radius) + 6px);box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(2deg)}
.jg-hero__media::before{content:"";position:absolute;inset:-16px -16px auto auto;width:120px;height:120px;border-radius:24px;background:linear-gradient(135deg,var(--jg-primary),var(--jg-secondary));opacity:.85;z-index:-1}

/* ============ BADGES ============ */
.jg-badges{background:var(--jg-dark-2);color:#fff;border-top:1px solid rgba(255,255,255,.06)}
.jg-badges__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.jg-badge{padding:28px 24px;border-left:1px solid rgba(255,255,255,.08)}
.jg-badge:first-child{border-left:0}
.jg-badge h3{font-size:1rem;margin-bottom:4px;color:#fff}
.jg-badge p{color:#9FA6CE;font-size:.9rem}

/* ============ MARQUEE (signature) ============ */
.jg-marquee{background:linear-gradient(95deg,var(--jg-primary),var(--jg-secondary));color:#fff;overflow:hidden;transform:rotate(-1.2deg);margin:38px 0;padding:14px 0;box-shadow:0 12px 34px rgba(31,59,224,.3)}
.jg-marquee__track{display:flex;gap:56px;white-space:nowrap;animation:jg-scroll 26s linear infinite;width:max-content}
.jg-marquee__item{font-family:var(--jg-font-display);text-transform:uppercase;font-size:1.25rem;display:flex;align-items:center;gap:56px}
.jg-marquee__item::after{content:"◆";font-size:.8rem;opacity:.8}
@keyframes jg-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.jg-marquee__track{animation:none}}

/* ============ SPORTS PILLS ============ */
.jg-sports{text-align:center}
.jg-sports__pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.jg-pill{padding:12px 26px;border-radius:999px;border:2px solid var(--jg-primary);color:var(--jg-primary);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;transition:all .15s}
.jg-pill:hover{background:var(--jg-primary);color:#fff;transform:translateY(-2px)}

/* ============ FEATURES ============ */
.jg-features{background:var(--jg-light)}
.jg-features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.jg-feature{background:#fff;border-radius:var(--jg-radius);padding:26px;box-shadow:0 6px 24px rgba(16,23,64,.07);border-top:4px solid var(--jg-secondary);transition:transform .15s}
.jg-feature:nth-child(odd){border-top-color:var(--jg-primary)}
.jg-feature:hover{transform:translateY(-5px)}
.jg-feature img{height:150px;width:100%;object-fit:contain;margin-bottom:18px}
.jg-feature h3{font-size:1rem;margin-bottom:8px}
.jg-feature p{color:var(--jg-muted);font-size:.92rem}

/* ============ SHOP CARDS ============ */
.jg-shop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jg-shopcard{position:relative;border-radius:var(--jg-radius);overflow:hidden;background:var(--jg-dark);color:#fff;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;isolation:isolate}
.jg-shopcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .3s}
.jg-shopcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,44,.92) 20%,rgba(10,15,44,.15) 70%);z-index:-1}
.jg-shopcard:hover img{transform:scale(1.06)}
.jg-shopcard .jg-eyebrow{color:#B9A6F5;margin-bottom:4px}
.jg-shopcard h3{font-size:1.25rem;margin-bottom:10px;color:#fff}
.jg-shopcard span{font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;color:#8FA0FF}

/* ============ ABOUT ============ */
.jg-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.jg-about p{color:var(--jg-muted);margin-bottom:26px}
.jg-about__actions{display:flex;gap:14px;flex-wrap:wrap}
.jg-about__media img{border-radius:var(--jg-radius);box-shadow:24px 24px 0 rgba(124,58,237,.18)}

/* ============ TESTIMONIALS ============ */
.jg-testimonials{background:var(--jg-dark);color:#fff}
.jg-testimonials .jg-section-title{color:#fff}
.jg-rating{display:flex;align-items:center;gap:12px;margin-bottom:34px;color:#C6CBEA;font-weight:700}
.jg-rating .stars{color:#FFC53D;letter-spacing:3px;font-size:1.1rem}
.jg-testi__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.jg-testi{background:var(--jg-dark-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--jg-radius);padding:26px;display:flex;flex-direction:column;gap:16px}
.jg-testi p{color:#C6CBEA;font-size:.95rem;flex:1}
.jg-testi cite{font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--jg-secondary)}
.jg-testi cite::before{content:"— "}

/* ============ CONTACT / QUOTE ============ */
.jg-quote{background:linear-gradient(120deg,var(--jg-primary),var(--jg-secondary));color:#fff;text-align:center}
.jg-quote .jg-section-title{color:#fff}
.jg-quote p{color:#E4E1FF;max-width:560px;margin:0 auto 36px}
.jg-quote__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto}
.jg-quote__card{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:var(--jg-radius);padding:26px;color:#fff;transition:transform .15s,background .15s}
.jg-quote__card:hover{transform:translateY(-4px);background:rgba(255,255,255,.2)}
.jg-quote__card h3{font-size:1.02rem;margin-bottom:6px;word-break:break-word;color:#fff}
.jg-quote__card small{color:#E4E1FF}

/* ============ FOOTER ============ */
.jg-footer{background:var(--jg-dark);color:#9FA6CE;padding:72px 0 0}
.jg-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:48px}
.jg-footer h4{font-family:var(--jg-font-display);color:#fff;text-transform:uppercase;font-size:.95rem;margin-bottom:18px}
.jg-footer ul{list-style:none}
.jg-footer li{margin-bottom:10px}
.jg-footer a{color:#9FA6CE}
.jg-footer a:hover{color:#fff}
.jg-footer__about p{margin-top:16px;font-size:.94rem}
.jg-socials{display:flex;gap:12px;margin-top:20px}
.jg-socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.jg-socials a:hover{background:var(--jg-secondary);border-color:var(--jg-secondary);color:#fff}
.jg-socials svg{width:17px;height:17px;fill:currentColor}
.jg-footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;font-size:.85rem}

/* ============ FLOATING WHATSAPP ============ */
.jg-wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .15s}
.jg-wa-float:hover{transform:scale(1.08)}
.jg-wa-float svg{width:30px;height:30px;fill:#fff}

/* ============ INNER PAGES ============ */
.jg-page-hero{background:var(--jg-dark);color:#fff;padding:64px 0;text-align:center}
.jg-page-hero h1{font-size:clamp(1.8rem,4vw,2.8rem)}
.jg-entry{padding:64px 0;max-width:820px;margin:0 auto}
.jg-entry h2{margin:32px 0 12px;font-size:1.4rem}
.jg-entry p,.jg-entry ul,.jg-entry ol{margin-bottom:18px}
.jg-entry ul,.jg-entry ol{padding-left:22px}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .jg-hero__grid,.jg-about__grid{grid-template-columns:1fr}
  .jg-features__grid{grid-template-columns:repeat(2,1fr)}
  .jg-shop__grid{grid-template-columns:repeat(2,1fr)}
  .jg-quote__cards{grid-template-columns:1fr}
  .jg-footer__grid{grid-template-columns:1fr 1fr}
  .jg-hero__media{order:-1}
}
@media (max-width:760px){
  .jg-section{padding:60px 0}
  .jg-nav{position:fixed;inset:73px 0 auto 0;background:var(--jg-dark);padding:20px 24px 30px;transform:translateY(-130%);transition:transform .25s;border-bottom:1px solid rgba(255,255,255,.1)}
  .jg-nav.is-open{transform:translateY(0)}
  .jg-nav ul{flex-direction:column;gap:16px}
  .jg-burger{display:block}
  .jg-header__cta{display:none}
  .jg-badges__grid{grid-template-columns:1fr}
  .jg-badge{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .jg-features__grid,.jg-shop__grid,.jg-footer__grid{grid-template-columns:1fr}
  .jg-hero__grid{padding:56px 0}
}