/*
Theme Name: Tribuna
Theme URI: https://cutare.xyz
Description: A matchday-broadcast theme for an AI-curated Romanian sports desk. Floodlit ink, stadium-tangerine accent, scoreboard-mono data, and a live headline ticker. Built to pair with Sport Hub Pro.
Author: Sport Hub Pro
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: tribuna
*/

/* ============ tokens ============ */
:root{
  --ink:#0B1014; --ink-2:#141B22; --ink-3:#1C2630; --line:#26313D;
  --chalk:#EEF2F1; --chalk-dim:#C7CFD6; --mute:#8B97A4;
  --accent:#FF5A1F; --accent-press:#E64A12;
  --c1:#FF5A1F; --c2:#14E0A1; --c3:#4DA3FF; --c4:#C77DFF; --c5:#FFC53D; --c6:#FF6B9A;
  --f-display:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:var(--f-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--accent); color:#1a0a00; padding:10px 14px; border-radius:4px; font-family:var(--f-mono)}

/* ============ kicker / mono data ============ */
.kicker{font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--mute)}
.kicker--cat{color:var(--ink); background:var(--accent); padding:3px 8px; border-radius:3px; display:inline-block}

/* ============ ticker (signature) ============ */
.ticker{position:sticky; top:0; z-index:60; background:var(--ink-2); border-bottom:1px solid var(--line); overflow:hidden}
.ticker__row{display:flex; align-items:stretch}
.ticker__live{flex:0 0 auto; display:flex; align-items:center; gap:8px; background:var(--accent); color:#1a0a00; padding:0 16px; font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase}
.ticker__dot{width:8px; height:8px; border-radius:50%; background:#1a0a00; animation:pulse 1.4s ease-in-out infinite}
.ticker__mask{flex:1 1 auto; overflow:hidden; position:relative}
.ticker__track{display:inline-flex; gap:0; white-space:nowrap; padding-block:9px; animation:ticker 42s linear infinite; will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{font-family:var(--f-mono); font-size:.78rem; color:var(--chalk-dim); padding-inline:22px; position:relative}
.ticker__item::before{content:"›"; color:var(--accent); position:absolute; left:4px}
.ticker__item:hover{color:#fff}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}

/* ============ masthead + nav ============ */
.site-header{border-bottom:1px solid var(--line); background:var(--ink)}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:22px}
.brand{display:inline-flex; align-items:baseline; gap:.12em; font-family:var(--f-display); font-weight:900; font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:-.02em; text-transform:uppercase; line-height:1}
.brand__dot{color:var(--accent)}
.brand img{max-height:46px; width:auto}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--chalk); width:44px; height:40px; border-radius:6px; font-size:1.2rem; cursor:pointer}
.nav{display:flex}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.nav a{font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--chalk-dim); padding:9px 12px; border-radius:5px; transition:color .15s,background .15s}
.nav a:hover,.nav .current-menu-item>a{color:#fff; background:var(--ink-3)}
.nav .current-menu-item>a{box-shadow:inset 0 -2px 0 var(--accent)}

/* ============ section heading ============ */
.row-head{display:flex; align-items:center; gap:14px; margin:42px 0 18px}
.row-head h2{font-family:var(--f-display); font-weight:800; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; margin:0}
.row-head .bar{height:14px; width:5px; background:var(--accent); border-radius:2px}
.row-head .rule{flex:1; height:1px; background:var(--line)}

/* ============ lead / hero ============ */
.lead{position:relative; margin-top:30px; border-radius:8px; overflow:hidden; min-height:clamp(340px,52vw,560px); display:flex; align-items:flex-end; background:var(--ink-2)}
.lead__img{position:absolute; inset:0}
.lead__img img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.lead:hover .lead__img img{transform:scale(1.04)}
.lead__scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,20,.05) 0%,rgba(11,16,20,.55) 55%,rgba(11,16,20,.94) 100%)}
.lead__body{position:relative; padding:clamp(20px,4vw,40px); max-width:760px}
.lead__title{font-family:var(--f-display); font-weight:900; letter-spacing:-.025em; line-height:1.03; font-size:clamp(1.9rem,5.2vw,3.6rem); margin:.5rem 0 .4rem}
.lead__title a:hover{color:#fff}
.lead__dek{color:var(--chalk-dim); font-size:1.05rem; max-width:60ch; margin:0}
.lead__meta{margin-top:14px; font-family:var(--f-mono); font-size:.74rem; color:var(--mute)}

/* ============ grid + cards ============ */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px); border-color:#34424F}
.card__media{aspect-ratio:16/10; overflow:hidden; background:var(--ink-3)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--empty{display:flex; align-items:center; justify-content:center}
.card__media--empty span{font-family:var(--f-display); font-weight:900; font-size:2.4rem; color:#2C3742; letter-spacing:-.03em}
.card__body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.card__eyebrow{display:flex; align-items:center; gap:10px}
.card__title{font-family:var(--f-display); font-weight:800; letter-spacing:-.015em; line-height:1.14; font-size:clamp(1.1rem,1.6vw,1.32rem); margin:0}
.card__title a:hover{color:var(--accent)}
.card__excerpt{color:var(--mute); font-size:.95rem; line-height:1.6; margin:0}
.card__foot{margin-top:auto; font-family:var(--f-mono); font-size:.7rem; color:var(--mute); padding-top:6px}

/* lead inside grid flow */
.feed{padding-bottom:30px}

/* ============ pagination ============ */
.pager{display:flex; gap:8px; flex-wrap:wrap; margin:40px 0 10px; font-family:var(--f-mono)}
.pager a,.pager span{padding:9px 14px; border:1px solid var(--line); border-radius:6px; font-size:.8rem; color:var(--chalk-dim)}
.pager a:hover{border-color:var(--accent); color:#fff}
.pager .current{background:var(--accent); color:#1a0a00; border-color:var(--accent)}

/* ============ single ============ */
.article{padding:34px 0 10px}
.article__head{max-width:820px; margin-inline:auto}
.article__meta{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-family:var(--f-mono); font-size:.74rem; color:var(--mute); margin-top:14px}
.article__title{font-family:var(--f-display); font-weight:900; letter-spacing:-.025em; line-height:1.05; font-size:clamp(2rem,5vw,3.4rem); margin:.6rem 0 0}
.article__hero{margin:26px 0; border-radius:8px; overflow:hidden; max-height:620px}
.article__hero img{width:100%; height:auto; object-fit:cover}
.article__hero figcaption{font-family:var(--f-mono); font-size:.72rem; color:var(--mute); padding:8px 4px}
.prose{max-width:720px; margin-inline:auto; font-size:1.075rem}
.prose p{margin:0 0 1.3em}
.prose h2{font-family:var(--f-display); font-weight:800; letter-spacing:-.01em; font-size:1.6rem; margin:2em 0 .5em; line-height:1.2}
.prose h3{font-family:var(--f-display); font-weight:800; font-size:1.28rem; margin:1.6em 0 .4em}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.prose blockquote{margin:1.6em 0; padding:.4em 0 .4em 20px; border-left:4px solid var(--accent); color:var(--chalk-dim); font-size:1.15rem}
.prose img{border-radius:6px; margin:1.2em 0}
.prose ul,.prose ol{padding-left:1.3em; margin:0 0 1.3em}
.prose li{margin:.4em 0}
.article__foot{max-width:720px; margin:34px auto 0; padding-top:22px; border-top:1px solid var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags a{font-family:var(--f-mono); font-size:.72rem; color:var(--chalk-dim); border:1px solid var(--line); padding:5px 10px; border-radius:20px}
.tags a:hover{border-color:var(--accent); color:#fff}

/* read-next */
.readnext{background:var(--ink-2); border-top:1px solid var(--line); margin-top:48px; padding:44px 0}

/* ============ page header (archive/search) ============ */
.page-head{padding:44px 0 6px; border-bottom:1px solid var(--line)}
.page-head .kicker{display:block; margin-bottom:8px}
.page-head h1{font-family:var(--f-display); font-weight:900; letter-spacing:-.025em; line-height:1.04; font-size:clamp(2rem,5vw,3.2rem); margin:0}
.page-head p{color:var(--mute); margin:.6rem 0 0; max-width:60ch}

/* ============ search form ============ */
.searchform{display:flex; gap:8px}
.searchform input[type=search]{flex:1; background:var(--ink-2); border:1px solid var(--line); color:var(--chalk); padding:11px 14px; border-radius:6px; font-family:var(--f-body); font-size:.95rem}
.searchform input[type=search]::placeholder{color:var(--mute)}
.searchform button{background:var(--accent); color:#1a0a00; border:0; padding:0 18px; border-radius:6px; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; cursor:pointer}
.searchform button:hover{background:var(--accent-press)}

/* ============ empty states ============ */
.empty{padding:90px 0; text-align:center}
.empty__code{font-family:var(--f-display); font-weight:900; font-size:clamp(4rem,16vw,9rem); line-height:.9; letter-spacing:-.04em; color:var(--ink-3)}
.empty h1{font-family:var(--f-display); font-weight:800; font-size:1.6rem; margin:.4em 0 .3em}
.empty p{color:var(--mute); max-width:46ch; margin:0 auto 22px}
.empty .searchform{max-width:460px; margin-inline:auto}

/* ============ footer ============ */
.site-footer{background:var(--ink-2); border-top:1px solid var(--line); margin-top:60px; padding:48px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.site-footer h3{font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--mute); margin:0 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:.5em 0}
.site-footer a{color:var(--chalk-dim); font-size:.92rem}
.site-footer a:hover{color:var(--accent)}
.foot-brand .brand{font-size:1.4rem; margin-bottom:10px}
.foot-brand p{color:var(--mute); font-size:.92rem; max-width:42ch}
.foot-bottom{margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--f-mono); font-size:.72rem; color:var(--mute)}
.foot-bottom .disclosure{color:var(--chalk-dim)}

/* ============ responsive ============ */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .nav{position:absolute; left:0; right:0; top:100%; background:var(--ink-2); border-bottom:1px solid var(--line); padding:12px var(--gut); display:none; z-index:50}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; gap:2px}
  .nav a{display:block; padding:12px 10px}
  .site-header{position:relative}
  .grid{grid-template-columns:1fr; gap:20px}
  .foot-grid{grid-template-columns:1fr}
  .article__meta{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .ticker__track{animation:none; transform:none}
}

/* ============ footer quick-legal + cookie bar ============ */
.foot-legal a{color:var(--chalk-dim)}
.foot-legal a:hover{color:var(--accent)}
.foot-legal span{margin:0 6px}

.cookie-bar{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:760px; margin-inline:auto; display:flex; align-items:center; gap:16px; background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:0 14px 44px rgba(0,0,0,.5)}
.cookie-bar[hidden]{display:none}
.cookie-bar__text{margin:0; font-size:.9rem; line-height:1.5; color:var(--chalk-dim)}
.cookie-bar__text a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.cookie-bar__btn{flex:0 0 auto; background:var(--accent); color:#1a0a00; border:0; padding:10px 18px; border-radius:6px; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; cursor:pointer}
.cookie-bar__btn:hover{background:var(--accent-press)}
@media(max-width:560px){ .cookie-bar{flex-direction:column; align-items:stretch; text-align:left} .cookie-bar__btn{width:100%} }

/* ============ homepage category rows ============ */
.row-head h2 a{color:inherit}
.row-head h2 a:hover{color:var(--accent)}
.row-more{flex:0 0 auto; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--mute); white-space:nowrap}
.row-more:hover{color:var(--accent)}
@media(max-width:560px){ .row-more{display:none} }