/*
Theme Name: FootballPredictions
Description: Custom theme for the free football predictions site — hero, sidebars for paid-site banners, and a self-managed "Match" content type for the upcoming matches list.
Version: 1.1
Author: Built with Claude
*/

:root{
  --bg:#080F14; --ink:#F2F5F4; --muted:#8598A3;
  --mint:#33D17A; --mint-dim:#1E8E56;
  --violet:#8B7CF6; --gold:#E8C070;
  --glass:rgba(18,32,40,0.6); --glass-border:rgba(255,255,255,0.08);
  --row:#0E1920; --row-border:rgba(255,255,255,0.08);
}
*{box-sizing:border-box;}
html{ background:var(--bg); scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,'Inter','Segoe UI',Arial,sans-serif;
  position:relative;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

.mesh{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(110px); }
.blob.b1{ width:520px; height:520px; background:var(--mint); opacity:0.14; top:-180px; left:-60px; }
.blob.b2{ width:480px; height:480px; background:var(--violet); opacity:0.11; top:20px; right:-160px; }

header.site-header, .hero, .layout, footer{ position:relative; z-index:1; }

/* --- Header / logo / nav --- */
header.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; border-bottom:1px solid rgba(255,255,255,0.06);
  max-width:1400px; margin:0 auto; gap:20px; flex-wrap:wrap;
}
.logo{ display:flex; flex-direction:column; line-height:1; text-decoration:none; }
.logo .l1{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.3rem; color:var(--ink); letter-spacing:0.2px; display:flex; align-items:center; }
.logo .l1 svg{ width:0.85em; height:0.85em; margin:0 1px; }
.logo .l2{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.5px;
  background:linear-gradient(100deg, var(--mint), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-top:1px;
}
.logo .l2 span{ color:var(--muted); -webkit-text-fill-color:var(--muted); font-weight:400; }

nav.primary-nav{ display:flex; align-items:center; gap:26px; font-size:0.9rem; color:var(--muted); flex-wrap:wrap; }
nav.primary-nav a{ text-decoration:none; color:var(--muted); }
nav.primary-nav a:hover, nav.primary-nav a.active{ color:var(--mint); }
.nav-cta{
  background:linear-gradient(120deg, var(--mint), var(--mint-dim));
  color:#08120D !important; font-weight:700; font-size:0.85rem;
  padding:9px 18px; border-radius:8px;
  box-shadow:0 4px 16px rgba(51,209,122,0.25);
}

/* --- Hero: H1 only, no subtext, always one line --- */
.hero{ text-align:center; padding:46px 24px 34px; }
.hero h1{
  font-family:'Oswald',sans-serif; font-weight:600;
  line-height:1.2; margin:0; letter-spacing:-0.3px;
  font-size:clamp(1.3rem, 4.2vw, 2.3rem);
  white-space:nowrap;
}

/* --- Layout: 1 banner each side by default, main center --- */
.layout{ max-width:1400px; margin:0 auto; padding:30px 24px 20px; display:grid; grid-template-columns:200px 1fr 200px; gap:24px; }
.sidebar{ display:flex; flex-direction:column; gap:20px; }
.banner{
  border:1px solid var(--glass-border); border-radius:14px; background:var(--glass);
  backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,0.3);
  aspect-ratio:1/2.1; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:0.8rem; text-decoration:none; text-align:center; padding:16px;
  overflow:hidden;
}
.banner img{ width:100%; height:100%; object-fit:cover; }

.match-list{ display:flex; flex-direction:column; gap:30px; scroll-margin-top:24px; }

.match-row{
  position:relative;
  background:
    linear-gradient(100deg, rgba(51,209,122,0.07) 0%, transparent 42%, transparent 58%, rgba(139,124,246,0.07) 100%),
    var(--row);
  border:1px solid var(--row-border);
  border-radius:18px;
  box-shadow:0 16px 34px rgba(0,0,0,0.45);
  padding:24px 30px;
  display:grid; grid-template-columns:80px 1fr auto 1fr 80px;
  align-items:center; gap:22px;
  overflow:hidden;
  transition:transform 0.25s, box-shadow 0.25s;
}
.match-row:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(0,0,0,0.55); }
.match-row .watermark{ position:absolute; right:-30px; top:50%; transform:translateY(-50%) rotate(-12deg); width:180px; height:180px; opacity:0.035; pointer-events:none; z-index:0; }
.match-index{
  position:absolute; top:14px; left:-30px; transform:rotate(-45deg); width:120px; text-align:center; padding:3px 0;
  background:linear-gradient(100deg, var(--mint), var(--mint-dim)); color:#08120D;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:0.62rem; letter-spacing:1px;
  box-shadow:0 4px 10px rgba(0,0,0,0.35); z-index:2;
}
.trace-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible; }
.trace-path{ fill:none; stroke:#2c2b2b; stroke-width:1.5px; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.4s ease, stroke 0.2s ease; }
.match-row:hover .trace-path{ stroke-dashoffset:0; stroke:var(--mint); }
.crest{ position:relative; z-index:1; width:66px; height:72px; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)); transition:transform 0.25s; }
.match-row:hover .crest{ transform:scale(1.06); }
.crest img, .crest svg{ width:100%; height:100%; object-fit:contain; }
.team-block{ position:relative; z-index:1; text-align:left; }
.team-block.right{ text-align:right; }
.league{ display:inline-block; color:var(--mint); font-size:0.72rem; font-weight:700; letter-spacing:0.6px; padding-bottom:6px; margin-bottom:8px; border-bottom:2px solid rgba(51,209,122,0.5); }
.team-block.right .league{ border-bottom-color:rgba(139,124,246,0.55); color:var(--violet); }
.team-name{ font-family:'Oswald',sans-serif; font-size:1.18rem; letter-spacing:0.2px; }

.prediction-badge{ position:relative; z-index:1; background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:12px 20px; text-align:center; min-width:150px; }
.prediction-badge .label{ font-size:0.62rem; color:var(--muted); letter-spacing:1.4px; margin-bottom:5px; font-weight:600; }
.prediction-badge .pick{ font-family:'Oswald',sans-serif; font-size:1.02rem; font-weight:600; color:var(--gold); white-space:nowrap; }
.prediction-badge .odds{ color:var(--muted); font-weight:400; font-size:0.85rem; margin-left:4px; }
.analysis-link{
  display:inline-block; margin-top:8px; font-size:0.72rem; font-weight:600;
  color:var(--mint); text-decoration:none; letter-spacing:0.2px;
}
.analysis-link:hover{ text-decoration:underline; }

.match-date{ text-align:center; font-size:0.72rem; color:var(--muted); letter-spacing:0.5px; margin-top:-16px; }
.no-matches{ text-align:center; color:var(--muted); padding:40px; }

/* --- Below-predictions SEO blurb --- */
.intro-blurb{
  max-width:760px; margin:44px auto 10px; text-align:center;
  color:var(--muted); font-size:0.95rem; line-height:1.75; padding:0 24px;
}
.intro-blurb strong{ color:var(--ink); }

/* --- Footer --- */
footer{ max-width:1400px; margin:60px auto 0; padding:30px 24px 40px; border-top:1px solid rgba(255,255,255,0.07); }
.footer-links{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; font-size:0.85rem; margin-bottom:18px; }
.footer-links a{ text-decoration:none; color:var(--muted); }
.footer-links a:hover{ color:var(--ink); }
.footer-fine{ text-align:center; color:#5E6E76; font-size:0.75rem; line-height:1.8; max-width:700px; margin:0 auto; }
.footer-fine .badge18{
  display:inline-block; border:1px solid #5E6E76; border-radius:4px; padding:1px 6px;
  font-weight:700; color:var(--muted); margin-right:6px; font-size:0.72rem;
}

@media (max-width:980px){
  header.site-header{ padding:16px 20px; }
  nav.primary-nav{ width:100%; justify-content:center; order:3; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; }
  .layout{ grid-template-columns:1fr; }
  main{ order:1; }
  .sidebar{ order:2; flex-direction:row; overflow-x:auto; }
  .banner{ min-width:140px; aspect-ratio:auto; height:100px; }
  .match-row{ grid-template-columns:46px 1fr auto 1fr 46px; padding:16px 18px; gap:10px; }
  .crest{ width:42px; height:46px; }
  .team-name{ font-size:0.9rem; }
  .prediction-badge{ min-width:110px; padding:10px 12px; }
  .prediction-badge .pick{ font-size:0.82rem; }
  .match-index{ font-size:0.5rem; width:100px; top:10px; left:-28px; }
}

/* ==========================================================================
   Inner-page shared layout (VIP Tips Archive, Analysed Tips, Contact Us)
   ========================================================================== */
main.page-main{ max-width:960px; margin:0 auto; padding:24px 24px 60px; }

.page-head{ text-align:center; margin-bottom:18px; }
.page-kicker{ color:var(--mint); font-size:0.75rem; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.page-head h1{ font-family:'Oswald',sans-serif; font-size:1.6rem; margin:0 0 6px; }
.page-head p{ color:var(--muted); font-size:0.85rem; max-width:56ch; margin:0 auto; }

/* --- VIP Tips Archive: month tabs, stat strip, analytics row, table --- */
.month-tabs{ display:flex; gap:6px; overflow-x:auto; margin-bottom:14px; }
.month-tab{
  font-family:'Oswald',sans-serif; background:none; border:1px solid var(--row-border); color:var(--muted);
  padding:6px 14px; font-size:0.82rem; cursor:pointer; white-space:nowrap; border-radius:7px;
  transition:border-color 0.15s, color 0.15s;
}
.month-tab.active{ border-color:var(--mint); color:var(--ink); background:var(--row); }

.stat-strip{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:1px; background:var(--row-border); border:1px solid var(--row-border); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.stat{ background:var(--row); padding:10px 14px; }
.stat .num{ font-family:'Oswald',sans-serif; font-size:1.4rem; line-height:1; }
.stat .num.win{ color:var(--mint); }
.stat .label{ color:var(--muted); font-size:0.68rem; margin-top:3px; }

.analytics-row{ display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:12px; margin-bottom:18px; }
.a-card{ background:var(--row); border:1px solid var(--row-border); border-radius:10px; padding:12px 14px; }
.a-card h2{ font-size:0.68rem; color:var(--muted); font-weight:600; margin:0 0 8px; letter-spacing:0.4px; text-transform:uppercase; }

.pie-card{ display:flex; align-items:center; justify-content:center; gap:10px; height:100%; }
.pie-card .donut-wrap{ flex-shrink:0; }
.pie-card .donut-legend{ font-size:0.75rem; color:var(--muted); line-height:1.5; }
.pie-card .donut-legend b{ color:var(--ink); }

.center-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; }
.form-strip{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.chip{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:0.65rem; font-weight:700; border-radius:5px; color:var(--bg); }
.chip.w{ background:var(--mint); } .chip.l{ background:#E15646; }

.profit-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.profit-total{ font-family:'Oswald',sans-serif; font-size:0.95rem; color:var(--mint); }
.mini-bars{ display:flex; align-items:flex-end; gap:6px; height:44px; position:relative; }
.mini-bars .zero{ position:absolute; left:0; right:0; bottom:22px; height:1px; background:var(--row-border); }
.mb-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:center; }
.mb-bar{ width:100%; max-width:14px; border-radius:2px; }
.mb-bar.pos{ background:var(--mint); align-self:flex-end; }
.mb-bar.neg{ background:#E15646; align-self:flex-start; }
.mb-labels{ display:flex; gap:6px; margin-top:4px; }
.mb-labels span{ flex:1; text-align:center; font-size:0.6rem; color:var(--muted); }

table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; color:var(--muted); font-size:0.72rem; font-weight:400; padding:0 10px 10px; border-bottom:1px solid var(--row-border); }
tbody tr{ border-bottom:1px solid var(--row-border); }
tbody td{ padding:12px 10px; font-size:0.88rem; }
tbody tr:hover{ background:var(--row); }
td.match{ font-weight:600; }
td.odd{ color:var(--gold); font-family:'Oswald',sans-serif; }
.result-cell{ display:flex; align-items:center; gap:8px; }
.result-cell .dot{ width:8px; height:8px; border-radius:50%; }
.result-cell .dot.win{ background:var(--mint); } .result-cell .dot.loss{ background:#E15646; }
.result-text.win{ color:var(--mint); } .result-text.loss{ color:#E15646; }

.pagination{ display:flex; justify-content:center; gap:6px; margin-top:18px; flex-wrap:wrap; }
.page-btn{
  font-family:'Oswald',sans-serif; background:var(--row); border:1px solid var(--row-border); color:var(--muted);
  width:34px; height:34px; border-radius:7px; cursor:pointer; font-size:0.85rem;
}
.page-btn.active{ border-color:var(--mint); color:var(--mint); }
.page-btn:hover{ color:var(--ink); }

.cta-box{
  margin-top:40px; text-align:center; padding:30px 24px; border-radius:14px;
  background:linear-gradient(135deg, rgba(51,209,122,0.08), rgba(139,124,246,0.06));
  border:1px solid var(--glass-border);
}
.cta-box h3{ font-family:'Oswald',sans-serif; font-size:1.3rem; margin:0 0 8px; }
.cta-box p{ color:var(--muted); font-size:0.9rem; margin:0 0 18px; }
.cta-box a{
  display:inline-block; background:linear-gradient(120deg, var(--mint), var(--mint-dim)); color:#08120D;
  font-weight:700; padding:12px 28px; border-radius:10px; text-decoration:none;
}

/* --- Analysed Tips: article grid --- */
.article-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; margin-bottom:30px; }
.article-card{
  background:var(--row); border:1px solid var(--row-border); border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink);
  transition:transform 0.2s, border-color 0.2s;
}
.article-card:hover{ transform:translateY(-3px); border-color:var(--mint-dim); }
.ac-top{ display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; }
.ac-league{ color:var(--mint); font-weight:700; letter-spacing:0.4px; }
.ac-date{ color:var(--muted); }
.ac-title{ font-family:'Oswald',sans-serif; font-size:1.08rem; line-height:1.3; margin:0; }
.ac-excerpt{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin:0; flex-grow:1; }
.ac-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.ac-pick{
  font-family:'Oswald',sans-serif; font-size:0.8rem; color:var(--gold);
  background:rgba(232,192,112,0.08); border:1px solid rgba(232,192,112,0.25);
  padding:4px 10px; border-radius:6px;
}
.ac-read{ font-size:0.8rem; color:var(--mint); font-weight:600; white-space:nowrap; }

@media (max-width:700px){
  .analytics-row{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
}

/* --- Contact form --- */
.contact-form{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.85rem; color:var(--muted); }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea{
  background:var(--row); border:1px solid var(--row-border); border-radius:8px;
  padding:11px 14px; color:var(--ink); font-family:inherit; font-size:0.92rem; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--mint); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.submit-btn{
  align-self:flex-start; background:linear-gradient(120deg, var(--mint), var(--mint-dim));
  color:#08120D; font-weight:700; font-size:0.92rem; padding:12px 26px;
  border:none; border-radius:10px; cursor:pointer;
}
.submit-btn:hover{ opacity:0.92; }

.contact-info-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:10px; }
.info-card{ background:var(--row); border:1px solid var(--row-border); border-radius:12px; padding:16px 18px; }
.info-card h3{ font-family:'Oswald',sans-serif; font-size:0.95rem; margin:0 0 6px; color:var(--mint); }
.info-card p{ color:var(--muted); font-size:0.82rem; line-height:1.5; margin:0; }
.response-time{ text-align:center; color:var(--muted); font-size:0.82rem; margin:0 0 30px; }

@media (max-width:700px){
  .contact-info-row{ grid-template-columns:1fr; }
}

/* --- Single Analysed Tips article --- */
.article-single{ max-width:720px; }
.article-single .page-head{ text-align:left; }
.article-single .page-head p{ margin:0; color:var(--muted); font-size:0.82rem; }
.article-pick-banner{
  display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, rgba(51,209,122,0.1), rgba(139,124,246,0.06));
  border:1px solid var(--glass-border); border-radius:12px; padding:14px 20px; margin-bottom:28px;
}
.article-pick-banner .label{ font-size:0.68rem; color:var(--muted); letter-spacing:1px; font-weight:700; }
.article-pick-banner .pick{ font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--gold); font-weight:600; }
.article-body{ color:var(--ink); font-size:0.98rem; line-height:1.8; }
.article-body h2{ font-family:'Oswald',sans-serif; font-size:1.3rem; margin:32px 0 14px; }
.article-body p{ margin:0 0 18px; }
.article-body strong{ color:var(--mint); }