/*
Theme Name: 2NM News
Theme URI: https://2nmnews.com
Author: 2NM NEWS
Author URI: https://2nmnews.com
Description: A wire-service styled news theme for 2NM NEWS — dark/light mode, a live headline ticker, category-driven front page sections, and translation-ready strings for multilingual plugins like Polylang or WPML. Built for independent world news publishing.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 2nm-news
*/

:root{
  --paper:#ECE9E1;
  --paper-raised:#F5F3EC;
  --ink:#1A1A18;
  --ink-soft:#4A473F;
  --rule:#C9C4B4;
  --rule-strong:#1A1A18;
  --wire-red:#A82B1C;
  --signal:#2B4C5E;
  --signal-soft:#5A7788;
  --font-display:'Source Serif 4', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}
html.dark{
  --paper:#131311;
  --paper-raised:#1B1A17;
  --ink:#E9E6DC;
  --ink-soft:#A8A398;
  --rule:#39362E;
  --rule-strong:#E9E6DC;
  --wire-red:#D9563F;
  --signal:#7FA6BC;
  --signal-soft:#5A7788;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}

/* ===== Masthead ===== */
.topbar{
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:7px 24px; flex-wrap:wrap; gap:6px;}
.topbar .stamp{color:var(--wire-red); font-weight:600;}
.topbar-right{display:flex; align-items:center; gap:18px;}
select.lang{
  background:transparent; border:1px solid var(--rule); color:var(--ink-soft);
  font-family:var(--font-mono); font-size:11px; padding:3px 6px; cursor:pointer;
}
.toggle-btn{
  background:transparent; border:1px solid var(--rule); color:var(--ink);
  font-family:var(--font-mono); font-size:11px; padding:3px 10px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em;
}
.toggle-btn:hover{border-color:var(--rule-strong);}

.masthead{padding:30px 0 18px; text-align:center; border-bottom:3px solid var(--rule-strong);}
.masthead .eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:10px;
}
.masthead h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(42px,7vw,72px);
  letter-spacing:-.01em; margin:0; line-height:.95;
}
.masthead h1 span{color:var(--wire-red);}
.masthead .tagline{
  font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--ink-soft); margin-top:8px;
}

nav.sections{
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase;
}
nav.sections .wrap{display:flex; gap:26px; padding:12px 24px; overflow-x:auto;}
nav.sections a{white-space:nowrap; color:var(--ink-soft); padding-bottom:3px; border-bottom:2px solid transparent;}
nav.sections a:hover, nav.sections a.active{color:var(--ink); border-color:var(--wire-red);}

/* ===== Ticker (signature element) ===== */
.ticker{
  background:var(--rule-strong); color:var(--paper);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em;
  overflow:hidden; white-space:nowrap; position:relative;
}
.ticker-track{
  display:inline-block; padding-left:100%;
  animation:scroll 55s linear infinite;
  padding-top:6px; padding-bottom:6px;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
.ticker-track span{margin-right:40px;}
.ticker-track span::before{content:"◆ "; color:var(--wire-red);}
.ticker-track a{color:var(--paper);}

/* ===== Layout ===== */
main{padding:36px 0 60px;}
.grid-hero{display:grid; grid-template-columns:1.6fr 1fr; gap:36px; border-bottom:1px solid var(--rule); padding-bottom:36px; margin-bottom:36px;}
@media (max-width:860px){ .grid-hero{grid-template-columns:1fr;} }

.dateline{font-family:var(--font-mono); font-size:11px; color:var(--wire-red); letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px;}
.dateline .loc{color:var(--ink-soft); font-weight:400;}

.photo{
  width:100%; aspect-ratio:16/9; background:
    repeating-linear-gradient(135deg, var(--signal-soft) 0px, var(--signal-soft) 2px, var(--signal) 2px, var(--signal) 4px);
  position:relative; margin-bottom:14px; filter:saturate(.85);
}
.photo::after{
  content:attr(data-cred); position:absolute; bottom:6px; right:8px;
  font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,.75); letter-spacing:.05em;
}
.photo.small{aspect-ratio:4/3;}

.lead h2{font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); line-height:1.05; margin:0 0 12px; font-weight:700;}
.lead h2 a:hover{color:var(--wire-red);}
.lead p.dek{font-size:16px; color:var(--ink-soft); line-height:1.55; margin:0 0 12px; max-width:56ch;}
.byline{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}

.side-list{display:flex; flex-direction:column; gap:22px;}
.side-item{padding-bottom:20px; border-bottom:1px solid var(--rule);}
.side-item:last-child{border-bottom:none; padding-bottom:0;}
.side-item h3{font-family:var(--font-display); font-size:19px; line-height:1.2; margin:6px 0 6px; font-weight:600;}
.side-item h3 a:hover{color:var(--wire-red);}
.side-item .cat{font-family:var(--font-mono); font-size:10px; color:var(--signal); text-transform:uppercase; letter-spacing:.08em;}

.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; flex-wrap:wrap; gap:8px;}
.section-head h2{
  font-family:var(--font-display); font-size:24px; margin:0; font-weight:700;
  border-left:4px solid var(--wire-red); padding-left:12px;
}
.section-head a{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase;}
.section-head a:hover{color:var(--wire-red);}

.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:48px;}
@media (max-width:860px){ .story-grid{grid-template-columns:1fr;} }
.card h3{font-family:var(--font-display); font-size:20px; margin:8px 0 8px; line-height:1.2; font-weight:600;}
.card h3 a:hover{color:var(--wire-red);}
.card p{font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0;}

.briefs{
  display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:24px 0; margin-bottom:48px;
}
@media (max-width:700px){ .briefs{grid-template-columns:1fr;} }
.brief-row{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule);}
.brief-row:last-child{border-bottom:none;}
.brief-time{font-family:var(--font-mono); font-size:10px; color:var(--wire-red); min-width:52px; padding-top:3px;}
.brief-body h4{margin:0 0 4px; font-family:var(--font-display); font-size:16px; font-weight:600;}
.brief-body h4 a:hover{color:var(--wire-red);}
.brief-body span{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); text-transform:uppercase;}

.entry-content p{margin:0 0 20px;}
.entry-content h2,.entry-content h3{font-family:var(--font-display); margin:32px 0 14px;}
.entry-content img{margin:20px 0;}
.entry-content blockquote{
  border-left:3px solid var(--wire-red); margin:24px 0; padding:4px 0 4px 20px;
  font-family:var(--font-display); font-style:italic; color:var(--ink-soft);
}
.entry-content a{color:var(--signal); text-decoration:underline;}

footer{border-top:3px solid var(--rule-strong); padding:34px 0; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:24px;}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h5{font-family:var(--font-mono); color:var(--ink); text-transform:uppercase; letter-spacing:.08em; font-size:11px; margin:0 0 12px;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.foot-grid a:hover{color:var(--wire-red);}
.foot-bottom{border-top:1px solid var(--rule); padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.foot-brand{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink);}
.foot-brand span{color:var(--wire-red);}

/* ===== Comments ===== */
.comments-area{margin-top:48px; border-top:1px solid var(--rule); padding-top:32px;}
.comments-area .comment-list{list-style:none; margin:0; padding:0;}
.comments-area .comment-body{border-bottom:1px solid var(--rule); padding:16px 0;}
.comments-area textarea, .comments-area input[type="text"], .comments-area input[type="email"], .comments-area input[type="url"]{
  width:100%; font-family:var(--font-body); border:1px solid var(--rule); background:var(--paper-raised); color:var(--ink); padding:10px; margin-bottom:12px;
}
.comments-area .form-submit input{
  background:var(--wire-red); color:#fff; border:none; padding:10px 20px; cursor:pointer; text-transform:uppercase; font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
}

/* Accessibility */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--wire-red); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
}