/*
Theme Name: ProClubsMarket
Theme URI: https://proclubsmarket.com
Author: ProClubsMarket
Description: Floodlights theme for ProClubsMarket, the transfer market for VPG Pro Clubs. Includes a Live / Maintenance switch in the admin toolbar.
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: proclubsmarket
*/

:root {
  --bg: #0B0F14;
  --surface: #131A22;
  --line: #1F2A36;
  --line-strong: #2A3644;
  --text: #EEF2F6;
  --muted: #9AA7B6;
  --faint: #7F8C9C;
  --accent: #C6FF3D;
  --accent-hover: #D4FF6A;
  --on-accent: #0B0F14;
  --pitch-line: rgba(198, 255, 61, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); }
a:hover { color: #E2FF9A; }

.wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Floodlight glow and pitch markings */
.lights {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60vmax 40vmax at 12% -10%, rgba(198,255,61,0.10), transparent 60%),
    radial-gradient(60vmax 40vmax at 88% -10%, rgba(198,255,61,0.07), transparent 60%);
}
.pitch {
  position: absolute; left: 50%; top: 50%;
  width: min(1100px, 140vw); aspect-ratio: 105 / 68;
  transform: translate(-50%, -50%);
  border: 1px solid var(--pitch-line);
  border-radius: 6px;
}
.pitch::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--pitch-line);
}
.pitch::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 17.4%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid var(--pitch-line); border-radius: 50%;
}
.box { position: absolute; top: 20%; bottom: 20%; width: 15.7%; border: 1px solid var(--pitch-line); }
.box.l { left: 0; border-left: 0; }
.box.r { right: 0; border-right: 0; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 4vw, 40px);
}
.logo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3vw, 28px); letter-spacing: 0.02em; line-height: 1;
  color: var(--text); text-decoration: none;
}
.logo:hover { color: var(--text); }
.logo span { color: var(--accent); }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo { height: 48px; width: auto; }

/* Logo: icon image + live-text wordmark, sharp at any size */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-icon { width: 52px; height: 52px; display: block; flex-shrink: 0; }
.brand-bar { width: 3px; height: 46px; border-radius: 2px; background: var(--accent); transform: skewX(-14deg); flex-shrink: 0; }
.brand-text {
  display: flex; flex-direction: column;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic;
  text-transform: uppercase; line-height: 0.88; letter-spacing: 0.01em;
}
.brand-top { color: #FFFFFF; font-size: 23px; }
.brand-bottom { color: var(--accent); font-size: 32px; }
.brand:hover .brand-top { color: #FFFFFF; }

@media (max-width: 760px) {
  .custom-logo { height: 38px; }
  .brand { gap: 10px; }
  .brand-icon { width: 44px; height: 44px; }
  .brand-bar { height: 38px; }
  .brand-top { font-size: 19px; }
  .brand-bottom { font-size: 26px; }
}
.header-right { display: flex; align-items: center; gap: 16px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.site-nav a { color: #C3CCD7; text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:hover { color: var(--text); }
.pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: #C3CCD7;
  white-space: nowrap;
}

/* Hero */
.hero {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px clamp(16px, 4vw, 40px) 40px;
  max-width: 1080px; width: 100%; margin: 0 auto;
}
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent);
}
.dot { width: 9px; height: 9px; border-radius: 99px; background: var(--accent); animation: pcm-pulse 2s infinite; }
@keyframes pcm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198,255,61,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(198,255,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,255,61,0); }
}
.hero h1 {
  margin: 16px 0 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(56px, 11vw, 132px); line-height: 0.88; letter-spacing: -0.005em;
  text-transform: uppercase;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.lede {
  margin: 22px 0 0; max-width: 36ch;
  font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--muted);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  height: 54px; padding: 0 22px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; text-decoration: none;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn.ghost:hover { border-color: #3A4858; color: var(--text); }

/* Feature cards */
.features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: clamp(36px, 6vw, 64px);
}
.feature {
  background: rgba(19, 26, 34, 0.8); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  backdrop-filter: blur(4px);
}
.feature .num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.12em; color: var(--accent);
}
.feature h2 {
  margin: 8px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase;
}
.feature p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* Position marquee */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track { display: inline-flex; gap: 28px; animation: pcm-slide 40s linear infinite; padding-left: 28px; }
.track span {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.08em; color: #3A4858;
}
.track span.hot { color: var(--accent); }
@keyframes pcm-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Maintenance page */
.pcm-maintenance .hero h1 { font-size: clamp(40px, 11.5vw, 132px); }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-glow {
  position: absolute; left: 0; top: 0;
  width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,255,61,0.17) 0%, rgba(198,255,61,0.06) 38%, rgba(198,255,61,0) 70%);
  pointer-events: none; will-change: transform;
}
@media (max-width: 760px) {
  .fx-glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
}
.status-off {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: #FF6B5E;
}
.status-dot {
  width: 11px; height: 11px; border-radius: 99px; background: #FF3B30;
  animation: pcm-pulse-red 2s infinite;
}
@keyframes pcm-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

/* Admin-only banner while maintenance is on */
.pcm-admin-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: #B42318; color: #FFFFFF; font-size: 14px; line-height: 1.4;
}
.pcm-admin-banner a { color: #FFFFFF; font-weight: 700; text-decoration: underline; }
.pcm-admin-banner a:hover { color: #FFE4E1; }
.pcm-admin-banner-dot { width: 9px; height: 9px; border-radius: 99px; background: #FFFFFF; flex-shrink: 0; }

/* Ordinary pages and posts */
.content {
  flex: 1; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 56px;
  font-size: 17px; line-height: 1.6; color: #D5DCE4;
}
.content h1, .content h2, .content h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; color: var(--text); line-height: 1;
}
.content h1 { font-size: clamp(40px, 7vw, 64px); margin: 12px 0 24px; }
.content h2 { font-size: 30px; margin: 40px 0 12px; }
.content h3 { font-size: 22px; margin: 28px 0 10px; }
.content img { max-width: 100%; height: auto; border-radius: 12px; }
.content article + article { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }

/* Footer */
.site-footer {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 40px) 22px; font-size: 13px; color: var(--faint);
}

@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; }
  .pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .track, .dot, .status-dot { animation: none; }
}