/*
Theme Name: FBuzzer Lite
Version: 1.3.8
Text Domain: fbuzzer-lite
Description: Sticky mobile header; robust mobile nav; 3-col dropdowns (2-col for World Football & European Cups); news-style homepage with sidebar lists and 6-post club sections.
*/
:root{--bg:#fff;--ink:#0b1220;--muted:#667085;--brand:#ff6a00;--header-bg:#0a0a0d;--header-ink:#ff6a00;--footer-bg:#0a0a0d;--footer-ink:#ff6a00;--card:#fff;--ring:#e5e7eb;--max:1140px;--radius:16px;--gap:16px;--gap2:24px;--shadow:0 6px 20px rgba(0,0,0,.06);--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px;display:block}figure{margin:0}
.container{max-width:var(--max);margin-inline:auto;padding:0 16px}
.main{padding:8px 0 22px}.prose>*:first-child{margin-top:0}
.breadcrumbs{font-size:13px;color:var(--muted);margin:6px 0}
.header{position:sticky;top:0;z-index:60;background:var(--header-bg);color:var(--header-ink);border-bottom:1px solid #151515;transition:box-shadow .2s ease}
.header.stuck{box-shadow:0 6px 14px rgba(0,0,0,.25)}
.header-inner{display:flex;align-items:center;gap:14px;padding:10px 0;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--header-ink)}
.brand-logo{width:40px;height:40px;border-radius:10px;background:#fff;object-fit:cover}
.site-title{color:var(--header-ink);font-weight:800 !important}
.nav-toggle{display:none;margin-left:auto;background:#181818;border:1px solid #2a2a2f;color:var(--header-ink);padding:8px 10px;border-radius:10px;font-weight:800}
.nav{margin-left:auto;overflow:visible}
.menu{list-style:none;display:flex;gap:8px;margin:0;padding:0;white-space:nowrap;flex-wrap:nowrap}
.menu>li{position:relative}
.menu>li>a{display:inline-block;padding:6px 9px;border-radius:10px;color:var(--header-ink);font-size:13px;font-weight:700}
.menu>li:hover>a{background:#181818;text-decoration:none}
.menu .sub-menu{position:absolute;top:calc(100% + 8px);left:0;right:auto;background:#0f0f12;color:#fff;border:1px solid #1f1f24;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.35);padding:8px;display:grid;grid-template-columns:repeat(3, minmax(200px, 1fr));gap:0;min-width:260px;width:max-content;max-width:min(calc(var(--max) - 32px),96vw);white-space:normal;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s, transform .16s;will-change:transform,left,right;overflow:auto;max-height:70vh}
.menu > li.two-col > .sub-menu{ grid-template-columns:repeat(2, minmax(200px,1fr)); }
.menu .sub-menu li{display:block}.menu .sub-menu a{display:block;padding:9px 12px;color:#eaeaea;font-size:14px;border-radius:8px;text-align:left}
.menu .sub-menu a:hover{background:#19191d;color:#fff;text-decoration:none}.menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sub-menu .sub-menu{left:100%; top:-8px; right:auto}
.layout{display:flex;gap:var(--gap2);align-items:flex-start;flex-wrap:wrap}
.layout-main{flex:1 1 720px;min-width:0}
.layout-side{flex:0 0 320px}
@media(max-width:980px){.layout-side{flex:1 1 100%}}
.hero-card{margin-bottom:var(--gap2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap2)}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.card-media{aspect-ratio:16/9;background:#eee;display:block;object-fit:cover;border-radius:12px 12px 0 0}
.card-body{padding:14px}
.card-title{font-weight:800;font-size:18px;margin:0 0 6px;line-height:1.35}
.card-title a{color:var(--ink)}.card-title a:hover{text-decoration:underline}
.card-excerpt{color:var(--muted);font-size:15px;margin:0 0 10px}
.card-meta{font-size:13px;color:var(--muted)}
.toc{border:1px solid var(--ring);background:#fff;border-radius:12px;padding:16px}
.toc h4{margin:0 0 10px;font-size:14px;letter-spacing:.02em;color:var(--brand)}
.toc ul{margin:0;padding-left:18px}.toc li{margin:6px 0}
.section{margin:22px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:20px;font-weight:800;margin:0;color:var(--ink)}
.content-layout{display:flex;gap:var(--gap2);align-items:flex-start;flex-wrap:wrap}
.content-main{flex:1 1 680px;min-width:0}
.content-side{flex:0 0 320px}
@media(max-width:980px){.content-side{flex:1 1 100%}}
.prose h1,.prose h2,.prose h3{line-height:1.15}
.prose h1{font-size:clamp(26px,4.5vw,40px)}
.prose h2{font-size:clamp(20px,3vw,28px)}
.prose h3{font-size:clamp(18px,2.2vw,22px)}
.prose p{margin:12px 0}
.prose blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--brand);background:#fff;border-radius:8px}
.single-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;background:#fff;padding:4px 8px;border:1px solid var(--ring);border-radius:999px}
.footer{margin-top:24px;background:var(--footer-bg);color:var(--footer-ink);border-top:1px solid #151515}
.footer-inner{padding:20px 0;font-size:14px;display:grid;grid-template-columns:1fr;gap:16px}
.footer-top{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.footer .widget-title{color:var(--footer-ink)}
.footer .footer-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.footer .footer-menu a{color:var(--footer-ink)}.footer .footer-menu a:hover{opacity:.85}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1c1c1f;padding-top:12px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .nav{display:none !important;position:absolute;left:0;right:0;top:100%;background:#0f0f12;border:1px solid #1f1f24;border-radius:12px;margin-top:8px;padding:10px}
  .header.open .nav{display:block !important}
  .menu{flex-direction:column;gap:4px;white-space:normal}
  .menu>li>a{padding:10px 12px;border-radius:8px;background:#0f0f12}
  .menu .sub-menu{position:static;max-width:100%;width:100%;display:none;border:none;border-top:1px solid #1f1f24;border-radius:8px 8px 12px 12px;box-shadow:none;padding:8px 0;background:#0f0f12;grid-template-columns:1fr;max-height:none}
  .menu li.open > .sub-menu{display:block}
  .menu .sub-menu a{padding:10px 12px}
}
.archive-header{text-align:center;margin:8px 0 12px}.archive-title{font-size:28px;font-weight:800;margin:0}
@media (max-width:860px){
  .nav { display:none !important; }
  .nav.show { display:block !important; } /* ← makes the menu appear */
}
@media (max-width:860px){
  .nav { display: none !important; }      /* hidden by default on mobile */
  .nav.show { display: block !important; } /* shown when button toggles .show */
  .menu { flex-direction: column; gap: 4px; }
  .menu .sub-menu { display: none; }
  .menu .sub-menu.show { display: block; }
}


/* ===== Improved readability for article body on light background ===== */
.entry-content,
.post-content,
.single-post-content,
.article-content{
    font-size:19px;
    line-height:1.8;
    color:#111;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    letter-spacing:0.2px;
}
.entry-content p,
.post-content p,
.single-post-content p,
.article-content p{
    margin-bottom:1.2em;
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.post-content h2,
.post-content h3,
.post-content h4,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.article-content h2,
.article-content h3,
.article-content h4{
    margin-top:1.4em;
    margin-bottom:0.6em;
    line-height:1.4;
    color:#000;
}
.entry-content a,
.post-content a,
.single-post-content a,
.article-content a{
    color:#ff7a00;
    text-decoration:none;
}
.entry-content a:hover,
.post-content a:hover,
.single-post-content a:hover,
.article-content a:hover{
    text-decoration:underline;
}
@media(max-width:768px){
.entry-content,
.post-content,
.single-post-content,
.article-content{
    font-size:18px;
    line-height:1.7;
}
}