/* public/assets/css/main.css */

/* ===== Geniussuretips Theme ===== */
:root{
  --brand:#1040FF; --accent:#FFC857; --ink:#0F172A;
  --muted:#94A3B8; --surface:#0B1220; --card:#0F1A2E;
  --win:#10B981; --draw:#F59E0B; --loss:#EF4444;
  --radius:14px; --gap:16px; --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden}
body{
  background:#070A12;color:#E5E7EB;
  font-family:"Plus Jakarta Sans",system-ui,Segoe UI,Roboto,Arial;
  overflow-x:hidden;min-width:0;
}
img{max-width:100%;display:block}
a{color:#AECBFF;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:auto;padding:0 16px;overflow-x:hidden}
.section{padding:48px 0}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:50;background:#0A1326;
  border-bottom:1px solid #0f224d
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:12px;padding:0 0
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.3px}
.brand__icon{width:28px;height:28px}
.brand__name{font-size:18px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{color:#D1D5DB}

/* Mobile hamburger toggle (shown on mobile via media query below) */
.mobile-menu-toggle{
  display:block;background:transparent;border:0;color:#fff;
  font-size:24px;cursor:pointer;padding:4px;line-height:1
}

/* Mobile nav behaviour */
@media (max-width:899.98px){
  .nav-wrap{flex-wrap:wrap;padding:8px 0}
  .nav-links{
    display:none;position:fixed;left:0;right:0;top:64px;
    background:#0A1326;border-bottom:1px solid #0f224d;
    flex-direction:column;gap:16px;padding:16px;z-index:60;
    box-shadow:0 4px 12px rgba(0,0,0,.3)
  }
  .nav-links.mobile-open{display:flex}
  .nav-links a{
    padding:12px 0;border-bottom:1px solid #1a2a57;
    font-size:16px;font-weight:600
  }
}

/* Desktop nav keeps inline layout */
@media (min-width:900px){
  .mobile-menu-toggle{display:none}
  .nav-links{
    display:flex !important;position:static;background:transparent;
    border:0;flex-direction:row;padding:0;box-shadow:none
  }
  .nav-links a{padding:0;border:0;font-size:inherit}
}

/* Dropdown */
.dropdown{position:relative}
.dropdown__toggle{
  background:transparent;border:0;color:#D1D5DB;font-weight:700;
  cursor:pointer;padding:6px 0
}
.dropdown__menu{
  position:absolute;top:120%;left:0;min-width:220px;
  background:#0c1a33;border:1px solid #1a2a57;border-radius:12px;
  padding:8px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:60
}
.dropdown.open .dropdown__menu{display:block}
.dropdown__menu li{list-style:none}
.dropdown__menu button{
  width:100%;text-align:left;border:0;background:#0e1d3d;
  color:#c8d3f3;padding:10px 12px;border-radius:10px;margin:4px 0;
  cursor:pointer;border:1px solid #173166
}
.dropdown__menu button:hover{background:#102656}

/* Dropdown mobile widen */
@media (max-width:899.98px){
  .dropdown__menu{
    position:static;width:100%;box-shadow:none;border-radius:8px;margin-top:8px
  }
}
@media (min-width:900px){
  .dropdown__menu{position:absolute;width:220px;top:120%;left:0;margin-top:0}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--surface),#061022)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__text h1{font-size:48px;line-height:1.05;margin:0 0 12px;font-weight:800;color:#fff}
.hero__text p{color:#c9d4ee;margin:8px 0 20px}
.accent{color:var(--accent)}
.hero__cta{display:flex;gap:12px}
.hero__art{
  height:220px;border-radius:18px;background:
  radial-gradient(120px 120px at 70% 40%, rgba(16,64,255,.45), transparent 60%),
  radial-gradient(180px 140px at 30% 70%, rgba(255,200,87,.25), transparent 60%),
  #0B1220; border:1px solid #13224b
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;border:1px solid #1b2a55;
  font-weight:700;letter-spacing:.2px;background:#0E1830;color:#dbe3ff
}
.btn--brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--brand:hover{opacity:.95}
.btn--ghost:hover{border-color:#29417e}

/* Bigger touch targets on mobile */
@media (max-width:900px){
  .btn,.pill,.tab{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* Pills */
.pills{
  position:sticky;top:64px;background:#071024;padding:12px 16px;
  z-index:40;border-bottom:1px solid #0f224d;
  display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none
}
.pills::-webkit-scrollbar{display:none}
.pill{
  border-radius:999px;padding:8px 14px;background:#0E1830;color:#c8d3f3;
  border:1px solid #1a2a57;white-space:nowrap;flex-shrink:0
}
.pill--active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Date switcher */
.date-switch{display:flex;align-items:center;justify-content:center;gap:16px}
.date-switch__label{font-weight:800;letter-spacing:.4px}

/* Tips feed */
.tips-feed{display:flex;flex-direction:column;gap:18px}
.league-group{border:1px solid #162653;border-radius:16px;overflow:hidden;background:#0a1429}
.league-head{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:#0f1f45;border-bottom:1px solid #1a2a57
}
.league-head .flag{font-size:20px}

/* NEW: header labels aligned with rows */
.tip-head{
  display:grid;grid-template-columns: 1.2fr .5fr .7fr .5fr .6fr;
  gap:12px;align-items:center;padding:10px 14px;
  background:#0f1f45;color:#c9d4ee;font-weight:800;letter-spacing:.6px;
  border-bottom:1px solid #1a2a57
}
.tip-head .label{opacity:.9;text-transform:uppercase;font-size:12px}

/* Rows (keep grid same as .tip-head) */
.tip-row{
  display:grid;grid-template-columns: 1.2fr .5fr .7fr .5fr .6fr;
  gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #13224b
}
.tip-row:last-child{border-bottom:none}
@media (max-width:900px){.tip-row{grid-template-columns:1fr;row-gap:6px}}
.teams{font-weight:700}
.odds{font-weight:800}
.badge{border:1px solid #2B3B66;border-radius:999px;padding:6px 10px;color:#e6ecff}
.badge--pick{border-color:var(--accent)}
.meter{height:8px;background:#12203C;border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand);width:0%}

/* Remove match-page link affordance for MVP */
.teams--static .teams-text { cursor: default; text-decoration: none; color: inherit; }

/* Tip rows: mobile card styling */
@media (max-width:900px){
  .tip-head{display:none} /* hide headings on mobile, show in row */
  .league-group{padding:0 4px}
  .tips-feed{gap:16px;padding:0 4px}
  .tip-row{
    background:#0e1d3d;border-radius:12px;margin:12px 8px;
    border:1px solid #1a2a57;padding:14px
  }
  .tip-row .teams{font-size:16px;font-weight:800;margin-bottom:8px}
  .tip-row .odds{
    display:inline-block;background:var(--brand);color:#fff;
    padding:4px 8px;border-radius:6px;font-weight:800;font-size:14px;margin-right:8px
  }
  .tip-row .badge{margin-right:8px}
  .tip-mobile-meta{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px;margin-top:8px
  }
  .tip-mobile-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tip-mobile-right{display:flex;align-items:center;gap:8px}
}

/* Telegram / Articles */
.card{background:var(--card);border-radius:16px;border:1px solid #13224b}
.telegram{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card-article{overflow:hidden}
.card-article img{border-bottom:1px solid #13224b}
.card-article .pad{padding:12px 14px}
.link-more{color:#9fb6ff}

/* Tables (tabs + generic table) */
.tabs{background:#0a1429;border:1px solid #162653;border-radius:16px}
.tabs__list{display:flex;gap:8px;padding:10px;border-bottom:1px solid #13224b}
.tab{padding:8px 12px;border-radius:999px;background:#0E1830;border:1px solid #1a2a57;color:#c8d3f3}
.tab--active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Tabs: horizontal scroll on mobile */
@media (max-width:900px){
  .tabs__list{
    display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px
  }
  .tabs__list::-webkit-scrollbar{display:none}
  .tab{flex-shrink:0;padding:6px 10px;font-size:13px;white-space:nowrap}
}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #1a2745;text-align:left}

/* On small screens, keep big tables scrollable horizontally */
@media (max-width:900px){
  .table{font-size:14px;display:block;overflow-x:auto;white-space:nowrap}
}

/* Stacked card style ONLY for compact tables (Recent Winnings) */
@media (max-width:900px){
  .table--tight{
    display:block;white-space:normal
  }
  .table--tight thead,
  .table--tight tbody,
  .table--tight th,
  .table--tight td,
  .table--tight tr{display:block}
  .table--tight thead tr{position:absolute;top:-9999px;left:-9999px}
  .table--tight tr{
    border:1px solid #1a2745;border-radius:8px;margin-bottom:8px;padding:8px;background:#0e1d3d
  }
  .table--tight td{
    border:none;border-bottom:1px solid #1a2745;position:relative;
    padding-left:25% !important;padding-top:8px;padding-bottom:8px
  }
  .table--tight td:before{
    content:attr(data-label) ": ";position:absolute;left:6px;width:22%;
    padding-right:10px;white-space:nowrap;font-weight:700;color:#c9d4ee
  }
  .table--tight td:last-child{border-bottom:none}
}

/* Footer */
.footer{background:#071024;border-top:1px solid #0f224d}
.footer h4{margin:0 0 8px;font-family:"Bebas Neue",system-ui;letter-spacing:1px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:6px 0}

/* Make article cards fully clickable and add hover affordance */
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{border-color:#1e2f66; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.as-link{pointer-events:none} /* so whole card remains the click target */

/* Article meta + headings */
.article-meta{color:#a7b4d6;font-size:12px;margin-bottom:6px}
.card-article h3{margin:6px 0 12px}

/* Post header: breathing room & clear H1 */
.post-hero{
  background:linear-gradient(180deg, #0b1220, #09101e);
  border-bottom:1px solid #0f224d;
  padding:64px 0 28px;   /* increased top space under sticky nav */
  margin-top:6px;
}
.post-hero h1{
  margin:10px 0 10px;
  font-size:44px;
  line-height:1.15;
  font-weight:800;
  color:#E9EEFF;
}
.breadcrumbs{color:#9fb6ff;font-size:13px;margin-bottom:8px}
.breadcrumbs a{color:#9fb6ff}
.post-meta{color:#a7b4d6;margin-top:6px}

.prose{max-width:880px;margin:0 auto;font-size:16px;line-height:1.7}
.prose h2,.prose h3{margin-top:24px}
.prose p{margin:12px 0}
.post-cover{
  width:100%;border-radius:16px;border:1px solid #13224b;margin:12px 0 20px
}

/* ===== Recent Winnings ===== */
.rw-title{
  position:relative; display:inline-block; padding-bottom:6px;
}
.rw-title:after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:4px; border-radius:4px; background:var(--accent);
}

.table--tight th,.table--tight td{ padding:10px 12px }
.table thead th{
  background:#0b1a34; color:#cfe0ff; font-weight:800; letter-spacing:.4px;
}
.rw-flag{font-size:18px; margin-right:8px}
.rw-match{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.vs-chip{
  background:#ffffff12; color:#e7eeff; border:1px solid #22335f;
  padding:2px 9px; border-radius:999px; font-weight:800; letter-spacing:.2px;
}
.score-ok{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.score-ok i{
  width:18px; height:18px; border-radius:50%;
  display:inline-block; background:var(--win);
}

/* ===== Match page (legacy styles kept; page disabled in MVP) ===== */
.match-hero{
  background:linear-gradient(180deg,#0b1220,#09101e);
  border-bottom:1px solid #0f224d;
  padding:56px 0 28px;
}
.match-hero h1{margin:10px 0 8px;font-size:40px;line-height:1.15;font-weight:800;color:#E9EEFF}
.match-meta{color:#a7b4d6;margin-bottom:18px}
.teams-wrap{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap;margin-top:8px}
.team{text-align:center}
.crest{width:110px;height:110px;border-radius:50%;background:#0e1a34;border:1px solid #182a57;object-fit:cover}
.team-name{font-weight:800;font-size:18px;margin-top:8px}
.vs{font-weight:900;letter-spacing:2px;color:#a7b4d6}
.form{margin-top:10px}
.form-pill{display:inline-block;min-width:28px;text-align:center;border-radius:999px;padding:4px 7px;margin-right:6px;font-weight:800;font-size:12px;border:1px solid #1f315f}
.form-w{background:#38b000;color:#07121f;border-color:#2b7a0b}
.form-d{background:#ffd166;color:#16243f;border-color:#f1c40f}
.form-l{background:#ff6b6b;color:#2b0e0e;border-color:#c0392b}
.form-unknown{background:#2b355a;color:#b5c2e8}

.pred-wrapper{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:22px}
.pred-badge{background:#0f1f45;color:#e9eeff;border:1px solid #2a3c70;border-radius:14px;padding:10px 14px;box-shadow:inset 0 0 0 1px #203363}
.odds-tag{background:#c6922a;color:#0e111a;border-radius:14px;padding:10px 14px;font-weight:800}

.last-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.last-grid{grid-template-columns:1fr 1fr}}
.last-title{
  background:#eef2ff;color:#0e111a;padding:12px 16px;border-radius:16px 16px 0 0;
  font-weight:900;letter-spacing:.3px;margin-bottom:-1px
}
.teams-link{color:#e9eeff;text-decoration:none}
.teams-link:hover{text-decoration:underline}

/* ===== SEO / About block (homepage) ===== */
.seo-block { padding-top: 28px; }
.seo-article { max-width: 980px; margin: 0 auto; }
.seo-article p { color: #c9d5ff; line-height: 1.75; margin: 14px 0 18px; }
.seo-article strong { color: #e9eeff; }

.seo-h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 26px 0 10px;
  font-weight: 900;
  color: var(--accent); /* Amber */
  letter-spacing: .2px;
}
@media (min-width: 900px){
  .seo-h1 { font-size: 34px; }
}

/* ===== Footer nav ===== */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px){
  .footer-grid{
    grid-template-columns: 2fr 1fr 1fr;
    align-items:start;
  }
}
.foot-brand .brand__name{ font-weight:900; }
.foot-title{
  color:#e9eeff;
  font-weight:800;
  margin: 4px 0 10px;
  letter-spacing:.2px;
}
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links li{ margin: 8px 0; }
.foot-links a{
  color:#c9d5ff;
  text-decoration:none;
}
.foot-links a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* ===== Livescore table styling ===== */
.ls-table { width:100%; border-collapse: collapse; }
.ls-table thead th {
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .04em;
  opacity: .75;
}
.ls-table th, .ls-table td { 
  padding: 12px 14px; 
  vertical-align: middle; 
}
.ls-table tbody tr { border-top: 1px solid rgba(255,255,255,.08); }

/* Vertical dividers between columns */
.ls-table td + td, .ls-table th + th {
  border-left: 1px solid rgba(255,255,255,.08);
}

/* Column tweaks */
.ls-league { white-space: nowrap; }
.ls-match  { font-weight: 600; }
.ls-score  { text-align: center; }
.ls-status { width: 70px; text-align: right; }

/* Score badge a bit wider */
.ls-badge { min-width: 64px; text-align: center; }

/* Mobile: hide the League column if space is tight */
@media (max-width: 680px) {
  .ls-table th:nth-child(1), .ls-table td:nth-child(1) { display: none; }
  .ls-status { text-align: center; }
}

/* Livescore toolbar + filter */
.ls-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.ls-filter {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
}
.ls-filter option { color: #000; }  /* ensure options are readable in native dropdown */