/* ---------------------------------------------------------------------------
   content.css — shared styling for Fantasy League Lens content/SEO pages.

   index.html, app.html and install.html keep their inline styles (see
   CLAUDE.md). This file exists only so the content pages (/aflw, guides,
   explainers) don't each carry a duplicated copy of the same 150 lines —
   there are several of them and they grow each season.

   Palette is the Logo.png palette, identical to the other pages. If the
   brand colours change, change them here AND in index.html/app.html.
   --------------------------------------------------------------------------- */
:root{
  --bg:#08122d;--card:#101c3f;--card2:#0c1734;--line:#1d2b55;
  --tx:#eaf0fb;--dim:#8d9ac0;--acc:#2dd1b1;--lime:#aef05d;--red:#ff6b7a;--gold:#f0b429;
  --maxw:1080px;--readw:72ch;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--tx);font:16px/1.65 -apple-system,'Segoe UI',Roboto,sans-serif;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--acc);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* ---- header (mirrors index.html) ---- */
header{position:sticky;top:0;z-index:40;background:rgba(8,18,45,.88);backdrop-filter:blur(10px);
       border-bottom:1px solid var(--line);}
header .wrap{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px;}
header .logo{height:42px;display:block;}
header nav{display:flex;gap:20px;margin-left:12px;}
header nav a{color:var(--dim);text-decoration:none;font-size:14px;}
header nav a:hover{color:var(--tx);}
.hactions{margin-left:auto;display:flex;gap:10px;align-items:center;}

.btn{display:inline-block;background:var(--acc);color:#08122d;border:none;text-decoration:none;
     padding:11px 20px;border-radius:9px;cursor:pointer;font-size:15px;font-weight:700;
     font-family:inherit;transition:transform .12s,filter .12s;}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--tx);font-weight:600;}
.btn.ghost:hover{border-color:var(--acc);}
.btn.sm{padding:8px 15px;font-size:14px;}
.btn.big{padding:14px 26px;font-size:16px;}

/* ---- breadcrumb ---- */
.crumb{font-size:13px;color:var(--dim);padding:18px 0 0;}
.crumb a{color:var(--dim);text-decoration:none;}
.crumb a:hover{color:var(--acc);}

/* ---- article ---- */
article{padding:12px 0 60px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card2);
  color:var(--dim);font-size:13px;padding:5px 13px;border-radius:999px;margin-bottom:18px;}
.eyebrow b{color:var(--lime);font-weight:700;}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:800;
   margin-bottom:16px;max-width:20ch;}
h1 em{font-style:normal;color:var(--acc);}
.standfirst{font-size:clamp(17px,2vw,19px);color:#c3cee8;max-width:var(--readw);margin-bottom:12px;}
.byline{color:var(--dim);font-size:13px;margin-bottom:30px;}
h2{font-size:clamp(23px,3vw,31px);line-height:1.2;letter-spacing:-.015em;font-weight:800;
   margin:44px 0 12px;max-width:26ch;}
h3{font-size:19px;font-weight:700;margin:28px 0 7px;}
article p{color:#c3cee8;max-width:var(--readw);margin-bottom:14px;}
article ul,article ol{color:#c3cee8;max-width:var(--readw);margin:0 0 16px 22px;}
article li{margin-bottom:7px;}
article strong{color:var(--tx);}
.dim{color:var(--dim);}
.small{font-size:13.5px;}

/* ---- components ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;}
.card p{margin-bottom:0;color:var(--dim);font-size:15px;}
.card h3{margin-top:0;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:26px 0;}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0;}

.callout{border-left:3px solid var(--acc);background:var(--card2);border-radius:0 12px 12px 0;
         padding:18px 20px;margin:26px 0;max-width:var(--readw);}
.callout p:last-child{margin-bottom:0;}
.callout.gold{border-left-color:var(--gold);}

table{width:100%;border-collapse:collapse;font-size:14.5px;margin:22px 0;}
th{color:var(--dim);text-align:left;font-weight:600;font-size:11.5px;text-transform:uppercase;
   letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:8px 10px;border-bottom:1px solid rgba(29,43,85,.6);color:#c3cee8;vertical-align:top;}
tr:last-child td{border-bottom:none;}
.num{text-align:right;font-variant-numeric:tabular-nums;}

details{border-bottom:1px solid var(--line);padding:15px 0;max-width:var(--readw);}
details summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;gap:12px;align-items:center;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:'+';margin-left:auto;color:var(--acc);font-size:20px;font-weight:400;}
details[open] summary::after{content:'−';}
details p{color:var(--dim);font-size:15px;margin-top:10px;}

.cta-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
          background:var(--card2);padding:34px 0;margin:50px 0 0;}
.cta-band h2{margin-top:0;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.cta-note{color:var(--dim);font-size:13px;margin-top:14px;}

.related{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.related a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;
           text-decoration:none;color:var(--tx);font-size:14.5px;font-weight:600;}
.related a:hover{border-color:var(--acc);}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--dim);font-size:13px;}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
footer a{color:var(--dim);text-decoration:none;}
footer a:hover{color:var(--tx);}
.fine{max-width:60ch;line-height:1.5;}

@media(max-width:720px){
  header nav{display:none;}
  article{padding-top:6px;}
  th,td{padding:7px 6px;font-size:13.5px;}
}