/* ===== SportifyHQ WordPress theme: additions on top of the original CSS ===== */

/* Accessibility */
.screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus { position:fixed; top:8px; left:8px; z-index:100000; width:auto; height:auto; clip:auto; background:#fff; color:#111; padding:10px 16px; border-radius:8px; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img { max-width:100%; height:auto; }
body.admin-bar .navbar { top:32px; }
@media (max-width:782px) { body.admin-bar .navbar { top:46px; } }

/* Buttons */
.btn-outline-dark { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; border:2px solid var(--border); color:var(--text); font-weight:600; font-size:14px; transition:.2s; }
.btn-outline-dark:hover { border-color:var(--accent); color:var(--accent); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; font-weight:600; font-size:14px; }

/* Article body typography (content imported from the original site) */
.article-reading { overflow-wrap:anywhere; }
.article-reading img, .article-reading video, .article-reading iframe { max-width:100%; height:auto; border-radius:10px; }
.article-reading table, .bio-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.article-reading th, .article-reading td { border:1px solid var(--border); padding:8px 12px; }
.article-reading pre { overflow-x:auto; }
.bio-content { overflow-wrap:anywhere; }
.bio-content h2, .bio-content h3 { margin:22px 0 10px; }
.bio-content p { margin-bottom:14px; line-height:1.75; }
.share-profile { display:flex; gap:10px; }
.share-profile a, .share-profile button { flex:1; text-align:center; padding:10px; color:#fff; border-radius:8px; border:0; cursor:pointer; transition:opacity .2s; }
.share-profile a:hover, .share-profile button:hover { opacity:.8; }
.sp-fb { background:#1877f2; } .sp-tw { background:#000; } .sp-wa { background:#25d366; }
.share-profile .sp-cp { background:var(--surface2); color:var(--text); border:1.5px solid var(--border); }

/* Pagination dots */
.art-page-dots { padding:0 6px; color:var(--text3); }
.art-pagination { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:32px 0 8px; }
.art-page-btn, .art-page-num { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; font-size:14px; transition:.2s; }
.art-page-num.active { background:var(--accent); border-color:var(--accent); color:#fff; }
a.art-page-btn:hover, a.art-page-num:hover { border-color:var(--accent); color:var(--accent); }
.art-page-btn.disabled { opacity:.4; }
.art-page-numbers { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }

/* Search forms in the filter bars */
form.articles-search-wrap, form.players-search-wrap { margin:0; }
.cat-pill, .sport-pill { text-decoration:none; }

/* Comments */
.comment-compose { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.sfy-field, .comment-compose textarea { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:14px; color:var(--text); background:var(--bg); outline:none; }
.sfy-field:focus, .comment-compose textarea:focus { border-color:var(--accent); }
.comment-compose textarea { min-height:110px; resize:vertical; }
.comment-compose .comment-form-author, .comment-compose .comment-form-email { margin:0; }
.comment-thread .children { margin-left:24px; padding-left:16px; border-left:2px solid var(--border); }
.comment-actions a { color:var(--text3); font-size:12px; font-weight:600; }
.comment-actions a:hover { color:var(--accent); }
.comment-text p { margin-bottom:8px; }

/* Static pages (About / Contact / Privacy / Terms / Disclaimer / Write for us) */
.sfy-page-hero { background:linear-gradient(135deg,#0b1220 0%,#16213a 55%,#2a1020 100%); padding:56px 0 48px; }
.sfy-page-hero .page-hero-inner h1 { color:#fff; font-size:clamp(28px,5vw,44px); }
.sfy-page-wrap { padding:40px 20px 72px; }
.sfy-page { max-width:980px; margin:0 auto; color:var(--text); }
.sfy-page > * + * { margin-top:22px; }
.sfy-lead { font-size:17px; line-height:1.75; color:var(--text2); }
.sfy-lead p { margin:0 0 12px; }
.sfy-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.sfy-card h2 { font-family:"Oswald",sans-serif; font-size:24px; margin:0 0 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sfy-card h3 { font-size:17px; margin:0 0 8px; }
.sfy-card p, .sfy-body p { line-height:1.75; color:var(--text2); margin:0 0 12px; }
.sfy-body ul, .sfy-body ol { padding-left:22px; margin:0 0 12px; line-height:1.75; color:var(--text2); }
.sfy-body a, .sfy-card a:not(.btn) { color:var(--accent-text); text-decoration:underline; }
.sfy-body table { display:block; overflow-x:auto; border-collapse:collapse; max-width:100%; }
.sfy-body th, .sfy-body td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.sfy-ico { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; color:#fff; font-size:18px; flex:0 0 auto; }
.sfy-callout { border-left:4px solid var(--accent); }
.sfy-callout.center { text-align:center; } .sfy-callout.center h2 { justify-content:center; }
.sfy-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--text3); }
.sfy-chips { display:flex; flex-wrap:wrap; gap:10px; }
.sfy-chips.center { justify-content:center; }
.sfy-chips span { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:600; }
.sfy-chips i { color:var(--accent); }
.sfy-toc { background:var(--surface2); border-radius:var(--radius); padding:18px 22px; }
.sfy-toc ol { margin:10px 0 0; padding-left:20px; columns:2; column-gap:32px; line-height:1.9; }
.sfy-toc a { color:var(--text); } .sfy-toc a:hover { color:var(--accent); }
.sfy-page section[id] { scroll-margin-top:90px; }
.sfy-actions { display:flex; gap:12px; flex-wrap:wrap; }
.sfy-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.sfy-eyebrow.center { display:flex; justify-content:center; margin-top:18px; }
.sfy-h2 { font-family:"Oswald",sans-serif; font-size:clamp(24px,4vw,32px); text-align:center; margin:0; }
.sfy-h2 .hl, .sfy-card h2 .hl { color:var(--accent); }
.sfy-sub { text-align:center; color:var(--text3); max-width:640px; margin:-8px auto 0; }
.sfy-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.sfy-stats > div { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center; }
.sfy-stats strong { display:block; font-family:"Oswald",sans-serif; font-size:30px; color:var(--accent); line-height:1.1; }
.sfy-stats span { font-size:13px; color:var(--text3); } .sfy-stats small { display:block; font-size:12px; color:var(--text3); margin-top:4px; }
.sfy-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.sfy-mini { text-align:left; } .sfy-mini .sfy-ico { margin-bottom:12px; }
.sfy-checks { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:12px; }
.sfy-checks li { display:flex; gap:12px; align-items:flex-start; }
.sfy-checks i { color:#fff; background:var(--accent); width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; margin-top:2px; }
.sfy-checks strong { display:block; } .sfy-checks span { color:var(--text3); font-size:14px; }
.sfy-timeline { position:relative; display:grid; gap:18px; padding-left:26px; border-left:3px solid var(--border); }
.sfy-tl-item { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.sfy-tl-item::before { content:""; position:absolute; left:-37px; top:22px; width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); }
.sfy-tl-year { font-size:12px; font-weight:700; color:var(--accent); display:inline-flex; gap:6px; align-items:center; }
.sfy-tl-item h3 { margin:6px 0; } .sfy-tl-item p { margin:0; color:var(--text2); line-height:1.7; }
.sfy-team { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.sfy-member { text-align:center; } .sfy-member img { width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--border); }
.sfy-member .role { color:var(--accent); font-weight:600; font-size:13px; margin-bottom:8px; } .sfy-member small { color:var(--text3); }
.sfy-badge { display:inline-block; padding:3px 10px; border-radius:999px; color:#fff; font-size:11px; font-weight:700; margin-bottom:8px; }
.sfy-faq { display:grid; gap:12px; }
.sfy-faq details { padding:0; } .sfy-faq summary { cursor:pointer; padding:18px 22px; font-weight:600; list-style:none; display:flex; gap:10px; align-items:center; }
.sfy-faq summary::-webkit-details-marker { display:none; }
.sfy-faq summary::after { content:"+"; margin-left:auto; font-size:22px; color:var(--accent); line-height:1; }
.sfy-faq details[open] summary::after { content:"\2212"; }
.sfy-faq .sfy-body { padding:0 22px 18px; }
.sfy-steps { display:grid; gap:14px; }
.sfy-step { display:flex; gap:16px; align-items:flex-start; }
.sfy-num { flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-family:"Oswald",sans-serif; }
.sfy-form { display:grid; gap:14px; }
.sfy-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sfy-form label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--text2); }
.sfy-form input, .sfy-form textarea { width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font:inherit; font-weight:400; outline:none; }
.sfy-form input:focus, .sfy-form textarea:focus { border-color:var(--accent); }
.sfy-form button { justify-self:start; border:0; cursor:pointer; }
.sfy-hp { position:absolute!important; left:-9999px!important; opacity:0; height:0; }
.sfy-404 { text-align:center; padding:90px 20px 110px; max-width:640px; margin:0 auto; }
.sfy-404-code { font-family:"Oswald",sans-serif; font-size:clamp(80px,22vw,160px); line-height:1; color:var(--accent); font-weight:700; }
.sfy-404 h1 { margin:6px 0 10px; } .sfy-404 p { color:var(--text3); margin-bottom:18px; }
[data-theme="dark"] .sfy-card { box-shadow:none; }

/* ===== Extra responsive safeguards ===== */
.main-layout, .articles-layout, .players-layout, .detail-layout, .article-layout { min-width:0; }
.center-content, .articles-center, .players-center, .detail-content, .article-body { min-width:0; }
@media (max-width:900px) {
  .sfy-toc ol { columns:1; }
  .sfy-form-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .sfy-page-wrap { padding:28px 14px 56px; }
  .sfy-card { padding:20px 16px; }
  .sfy-page-hero { padding:40px 0 34px; }
  .sfy-timeline { padding-left:18px; }
  .sfy-tl-item::before { left:-29px; }
  .sfy-step { flex-direction:column; }
  .share-row { flex-wrap:wrap; }
  .art-pagination { gap:6px; } .art-page-btn, .art-page-num { min-width:36px; height:36px; padding:0 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Home sidebar: expandable category list */
button.view-all-cats { width:100%; cursor:pointer; font-family:inherit; }
.category-list-more[hidden] { display:none; }
.category-list-more { margin-top:4px; max-height:420px; overflow-y:auto; scrollbar-width:thin; }