/*
Theme Name: Sideline Report
Theme URI: https://example.com/sideline-report
Author: Your Newsroom
Author URI: https://example.com
Description: A photo-forward WordPress theme for local high school and college sports coverage. Bold SportsCenter-style header, clean article layouts, category hubs, and a home page "Latest News" feed built for game-night galleries.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sideline-report
Tags: news, blog, photography, two-columns, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready, sticky-post
*/

:root{
  --sr-ink:#16181d;
  --sr-paper:#ffffff;
  --sr-muted:#5b6169;
  --sr-line:#e5e7eb;
  --sr-soft:#f4f5f7;
  --sr-dark:#101216;
  --sr-accent:#c8102e;              /* overridden by Customizer > Sideline Report Options */
  --sr-head:"Barlow Condensed",Oswald,Impact,"Arial Narrow",sans-serif;
  --sr-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sr-wrap:1200px;
  --sr-radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sr-body);
  color:var(--sr-ink);
  background:var(--sr-paper);
  line-height:1.65;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sr-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--sr-head);line-height:1.05;margin:0 0 .4em;letter-spacing:.01em;text-transform:uppercase}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
p{margin:0 0 1.2em}

.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sr-accent);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--sr-dark);color:#fff}
.site-header a{color:#fff}
.site-header__bar{max-width:var(--sr-wrap);margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 20px;min-height:64px}
.site-title{display:flex;align-items:center;gap:10px;font-family:var(--sr-head);font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;font-weight:700}
.site-title:hover{text-decoration:none}
.site-title__mark{width:10px;height:26px;background:var(--sr-accent);display:inline-block;transform:skewX(-12deg)}
.custom-logo{max-height:40px;width:auto}

.site-nav{margin-left:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.site-nav li{position:relative}
.site-nav a{display:block;padding:10px 14px;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;border-radius:var(--sr-radius)}
.site-nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.site-nav .current-menu-item>a,.site-nav .current_page_item>a{box-shadow:inset 0 -3px 0 var(--sr-accent)}
.site-nav ul ul{position:absolute;left:0;top:100%;background:var(--sr-dark);min-width:200px;flex-direction:column;padding:6px;display:none;box-shadow:0 12px 24px rgba(0,0,0,.3);z-index:60}
.site-nav li:hover>ul,.site-nav li:focus-within>ul{display:flex}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span:not(.screen-reader-text){width:26px;height:3px;background:#fff;display:block}

/* ---------- Ticker ---------- */
.ticker{background:#000;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:stretch}
.ticker__label{background:var(--sr-accent);color:#fff;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.08em;padding:8px 16px;font-size:.9rem;display:flex;align-items:center;white-space:nowrap}
.ticker__track{display:flex;overflow-x:auto;scrollbar-width:none}
.ticker__track::-webkit-scrollbar{display:none}
.ticker__item{color:#d8dade;font-size:.9rem;padding:8px 18px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.08)}
.ticker__item:hover{color:#fff;text-decoration:none}

/* ---------- Layout ---------- */
.site-main{max-width:var(--sr-wrap);margin:0 auto;padding:28px 20px 72px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.5fr 1fr;background:var(--sr-dark);color:#fff;border-radius:var(--sr-radius);overflow:hidden;margin-bottom:44px}
.hero__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hero__body{padding:32px}
.hero__body a{color:#fff}
.hero__title{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:.15em 0 .3em}
.hero__excerpt{color:#c4c7cd;font-family:var(--sr-body)}
.hero .entry-meta{color:#9aa0a8}

/* ---------- Section head ---------- */
.home-section{margin-bottom:48px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid var(--sr-ink);padding-bottom:8px;margin-bottom:22px}
.section-head__title{margin:0;font-size:1.6rem;position:relative}
.section-head__title::before{content:"";position:absolute;left:0;bottom:-11px;width:64px;height:3px;background:var(--sr-accent)}
.section-head__link{font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:var(--sr-muted)}

/* ---------- Card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.card{display:flex;flex-direction:column;background:var(--sr-paper)}
.card__media{display:block;overflow:hidden;border-radius:var(--sr-radius);background:var(--sr-soft)}
.card__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__media--empty{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--sr-soft),#e9ebef)}
.card__body{padding:14px 2px 0}
.card__title{font-size:1.25rem;margin:.25em 0}
.card__title a{color:var(--sr-ink)}
.card__title a:hover{color:var(--sr-accent);text-decoration:none}

.eyebrow{display:inline-block;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--sr-accent);font-weight:600}
.eyebrow:hover{text-decoration:none}
.entry-meta{font-size:.82rem;color:var(--sr-muted);font-family:var(--sr-body)}
.entry-meta a{color:var(--sr-muted)}

/* ---------- Archive header ---------- */
.archive-header{margin-bottom:28px;border-bottom:1px solid var(--sr-line);padding-bottom:18px}
.archive-header__title{margin:0}
.archive-header__desc{color:var(--sr-muted);margin-top:6px}
.breadcrumb{font-size:.82rem;color:var(--sr-muted);font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.breadcrumb a{color:var(--sr-muted)}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;padding:6px 12px;border:1px solid var(--sr-line);border-radius:999px;color:var(--sr-ink)}
.chip:hover,.chip.is-active{background:var(--sr-ink);color:#fff;border-color:var(--sr-ink);text-decoration:none}

/* ---------- Single ---------- */
.content-wrap{max-width:820px;margin:0 auto}
body.has-sidebar .content-wrap{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.single__header{margin-bottom:20px}
.single__title{margin:.1em 0 .25em}
.single__meta{color:var(--sr-muted);font-size:.9rem}
.single__media{margin:0 0 26px}
.single__media img{width:100%;border-radius:var(--sr-radius)}
.single__media figcaption{font-size:.82rem;color:var(--sr-muted);padding-top:8px}
.entry-content{font-size:1.08rem}
.entry-content h2{margin-top:1.6em}
.entry-content img{border-radius:var(--sr-radius);margin:1.2em 0}
.entry-content figure{margin:1.6em 0}
.entry-content figcaption{font-size:.82rem;color:var(--sr-muted);text-align:center;padding-top:6px}
.entry-content blockquote{border-left:4px solid var(--sr-accent);margin:1.5em 0;padding:.2em 0 .2em 1.2em;font-size:1.15rem}
.wp-block-gallery{margin:1.6em 0}
.tag-list{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.tag-list a{font-size:.8rem;background:var(--sr-soft);padding:4px 10px;border-radius:999px;color:var(--sr-muted)}

/* ---------- Sidebar / widgets ---------- */
.sidebar{position:sticky;top:96px}
.widget{margin-bottom:32px;font-size:.95rem}
.widget__title{font-size:1.15rem;border-bottom:2px solid var(--sr-ink);padding-bottom:6px;margin-bottom:12px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:6px 0;border-bottom:1px solid var(--sr-line)}

/* ---------- Photo wall ---------- */
.photo-wall{columns:3 260px;column-gap:14px}
.photo-wall__item{display:block;position:relative;margin:0 0 14px;break-inside:avoid;border-radius:var(--sr-radius);overflow:hidden}
.photo-wall__item img{width:100%}
.photo-wall__caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;padding:28px 12px 10px;opacity:0;transition:opacity .25s}
.photo-wall__item:hover .photo-wall__caption{opacity:1}
.photo-wall__item:hover{text-decoration:none}

/* ---------- Pagination ---------- */
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:40px}
.pagination a,.pagination span,.nav-links a,.nav-links span{font-family:var(--sr-head);padding:8px 14px;border:1px solid var(--sr-line);border-radius:var(--sr-radius);color:var(--sr-ink)}
.pagination .current,.nav-links .current{background:var(--sr-accent);color:#fff;border-color:var(--sr-accent)}
.pagination a:hover,.nav-links a:hover{background:var(--sr-soft);text-decoration:none}

/* ---------- Comments ---------- */
.comments{max-width:820px;margin:48px auto 0}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list ol.children{list-style:none;padding-left:24px}
.comment-body{padding:16px 0;border-bottom:1px solid var(--sr-line)}
.comment-author{font-weight:600}
.comment-meta{font-size:.8rem;color:var(--sr-muted)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:10px;border:1px solid var(--sr-line);border-radius:var(--sr-radius);font:inherit;margin-top:4px}

/* ---------- Buttons / forms ---------- */
button,input[type=submit],.wp-block-button__link{background:var(--sr-accent);color:#fff;border:0;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.04em;padding:11px 22px;border-radius:var(--sr-radius);cursor:pointer;font-size:1rem}
.search-form{display:flex;gap:8px}
.search-form input[type=search]{flex:1;padding:10px 12px;border:1px solid var(--sr-line);border-radius:var(--sr-radius);font:inherit}

/* ---------- Footer ---------- */
.site-footer{background:var(--sr-dark);color:#c4c7cd;margin-top:64px}
.site-footer a{color:#fff}
.site-footer__inner{max-width:var(--sr-wrap);margin:0 auto;padding:44px 20px;display:flex;flex-direction:column;gap:16px}
.site-footer__brand{font-family:var(--sr-head);font-size:1.6rem;color:#fff;text-transform:uppercase}
.footer-menu{list-style:none;display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:0;font-family:var(--sr-head);text-transform:uppercase;letter-spacing:.03em;font-size:.95rem}
.site-footer__widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.site-footer__widgets .widget__title{color:#fff;border-color:rgba(255,255,255,.25)}
.site-footer__widgets li{border-color:rgba(255,255,255,.12)}
.site-footer__credit{font-size:.82rem;margin:0;color:#8b9098}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:64px 0 auto 0;background:var(--sr-dark);margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .site-nav.is-open{max-height:80vh;overflow:auto;border-top:1px solid rgba(255,255,255,.1)}
  .site-nav ul{flex-direction:column;gap:0;padding:8px}
  .site-nav a{padding:14px}
  .site-nav ul ul{position:static;display:block;box-shadow:none;padding-left:12px}
  .hero{grid-template-columns:1fr}
  body.has-sidebar .content-wrap{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media(max-width:560px){
  body{font-size:16px}
  .card-grid{grid-template-columns:1fr;gap:24px}
  .photo-wall{columns:2 150px}
  .hero__body{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}