/*
Theme Name: FeedQ News
Theme URI: https://feedq.live/
Author: FeedQ
Author URI: https://feedq.live/
Description: An ultra-light, hand-built news theme for feedq.live. No frameworks, no jQuery, no webfonts. System font stack, under 15KB of CSS. Homepage hero plus card grid, breaking ticker, category badges, reading time and related posts on articles.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feedq-news
Tags: news, blog, customizer, responsive, accessibility-ready
*/

/* ============ Tokens ============ */
:root{
  --accent:#d02e2e;
  --ink:#16222e;
  --ink-soft:#3d4c5c;
  --muted:#68798a;
  --paper:#ffffff;
  --wash:#f5f7fa;
  --line:#e6ebf1;
  --cat-politics:#c0392b;
  --cat-science:#2471a3;
  --cat-entertainment:#8e44ad;
  --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ============ Utility bar ============ */
.utility{
  background:var(--ink);
  color:#cfd8e3;
  font-size:13px;
}
.utility .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:7px;padding-bottom:7px;
}
.utility .live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ff5b5b;margin-right:6px;vertical-align:1px;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ Masthead ============ */
.masthead{padding:26px 0 18px;text-align:center;border-bottom:1px solid var(--line)}
.masthead .site-title{
  font-size:44px;font-weight:800;letter-spacing:-.03em;margin:0;
}
.masthead .site-title a{color:var(--ink)}
.masthead .site-title a:hover{text-decoration:none}
.masthead .site-title .q{color:var(--accent)}
.masthead .tagline{color:var(--muted);font-size:14px;margin:6px 0 0}

/* ============ Nav ============ */
.mainnav{border-bottom:2px solid var(--ink)}
.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
}
.mainnav a{
  display:block;padding:12px 16px;color:var(--ink);
  font-weight:600;font-size:15px;
}
.mainnav a:hover{color:var(--accent);text-decoration:none}
.mainnav .current-cat a{color:var(--accent)}

/* ============ Ticker ============ */
.ticker{
  background:var(--accent);color:#fff;overflow:hidden;
  display:flex;align-items:stretch;
}
.ticker-label{
  background:rgba(0,0,0,.22);font-weight:800;font-size:13px;
  letter-spacing:.08em;padding:10px 14px;white-space:nowrap;
  display:flex;align-items:center;z-index:2;
}
.ticker-view{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track{
  display:inline-flex;gap:56px;white-space:nowrap;padding-left:20px;
  animation:tick 40s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track a{color:#fff;font-size:14px;font-weight:600}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ Hero ============ */
.hero{margin:28px 0}
.hero-card{
  display:grid;grid-template-columns:1.2fr 1fr;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--paper);
}
.hero-card .hero-media{background:var(--wash);min-height:320px}
.hero-card .hero-media img{width:100%;height:100%;object-fit:cover}
.hero-body{padding:32px;display:flex;flex-direction:column;justify-content:center}
.badge{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--muted);
  padding:4px 10px;border-radius:20px;margin-bottom:12px;
}
.badge.politics{background:var(--cat-politics)}
.badge.science{background:var(--cat-science)}
.badge.entertainment{background:var(--cat-entertainment)}
.hero-body h2{font-size:32px;margin:0 0 12px}
.hero-body h2 a{color:var(--ink)}
.hero-body .excerpt{color:var(--ink-soft);font-size:16px}
.meta{color:var(--muted);font-size:13px;margin-top:14px}
.meta time{margin-right:10px}

/* ============ Card grid ============ */
.section-head{
  display:flex;align-items:center;gap:12px;margin:34px 0 18px;
}
.section-head h2{font-size:22px;margin:0}
.section-head .rule{flex:1;height:2px;background:var(--ink)}
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(22,34,46,.08)}
.card-media{background:var(--wash);aspect-ratio:16/9;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:18px;margin:0 0 8px}
.card-body h3 a{color:var(--ink)}
.card-body .excerpt{color:var(--ink-soft);font-size:14.5px;flex:1}
.card .meta{margin-top:12px}

/* ============ Article ============ */
.article{max-width:760px;margin:0 auto;padding:30px 20px 50px}
.article .kicker{margin-bottom:10px}
.article h1{font-size:38px;letter-spacing:-.02em;margin:0 0 12px}
.article .standfirst{font-size:19px;color:var(--ink-soft);margin-bottom:18px}
.article .featured{margin:22px 0;border-radius:var(--radius);overflow:hidden}
.article .featured img{width:100%}
.article .featured figcaption,
.wp-caption-text{
  font-size:13px;color:var(--muted);padding:8px 4px;
}
.entry-content{font-size:18px}
.entry-content figure{margin:26px 0}
.entry-content figure img{border-radius:8px}
.entry-content figcaption{font-size:13.5px;color:var(--muted)}
.source-attribution{
  border-left:3px solid var(--accent);
  background:var(--wash);
  padding:12px 16px;border-radius:0 8px 8px 0;
  font-size:15px;margin:28px 0;
}
.article-tags{margin:26px 0;font-size:14px;color:var(--muted)}
.article-tags a{
  display:inline-block;border:1px solid var(--line);border-radius:20px;
  padding:3px 12px;margin:0 6px 6px 0;color:var(--ink-soft);font-size:13px;
}
.article-tags a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ============ Related ============ */
.related{margin-top:44px}
.related h2{font-size:22px;margin-bottom:16px}
.related .grid{grid-template-columns:repeat(3,1fr)}

/* ============ Archive header ============ */
.archive-head{padding:30px 0 6px;text-align:center}
.archive-head h1{font-size:34px}
.archive-head p{color:var(--muted)}

/* ============ Pagination ============ */
.pagination{margin:36px 0;text-align:center}
.pagination .page-numbers{
  display:inline-block;padding:8px 14px;margin:0 3px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:15px;
}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ============ Footer ============ */
.site-footer{
  background:var(--ink);color:#aeb9c6;margin-top:56px;font-size:14px;
}
.site-footer .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:26px;padding-bottom:26px;flex-wrap:wrap;
}
.site-footer .fbrand{font-weight:800;font-size:18px;color:#fff}
.site-footer .fbrand .q{color:var(--accent)}
.site-footer a{color:#cfd8e3}

/* ============ Search / 404 ============ */
.searchbox{max-width:560px;margin:26px auto;display:flex;gap:8px}
.searchbox input[type=search]{
  flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;font-family:var(--font);
}
.searchbox button{
  padding:12px 20px;background:var(--accent);color:#fff;border:0;
  border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;
}
.nothing{max-width:640px;margin:40px auto;text-align:center;color:var(--ink-soft)}

/* ============ Responsive ============ */
@media (max-width:900px){
  .hero-card{grid-template-columns:1fr}
  .hero-card .hero-media{min-height:220px}
  .grid,.related .grid{grid-template-columns:repeat(2,1fr)}
  .article h1{font-size:30px}
}
@media (max-width:600px){
  body{font-size:16px}
  .masthead .site-title{font-size:34px}
  .grid,.related .grid{grid-template-columns:1fr}
  .hero-body{padding:22px}
  .hero-body h2{font-size:24px}
  .ticker-label{font-size:11px;padding:10px}
  .utility .wrap{font-size:12px}
}