/* ============================================================
   TechNewz — Public Site Styles
   Design: "Signal" — ink navy + circuit-blue accent, terminal-
   style monospace metadata on a clean editorial grid.
   ============================================================ */

:root{
  --ink:#0E1116;
  --ink-soft:#171B22;
  --paper:#FAFAF9;
  --paper-dim:#F1F1EF;
  --text:#14161B;
  --text-dim:#5B6270;
  --line:#E4E4E1;
  --signal:#3B5BFF;
  --signal-dim:#EEF1FF;
  --amber:#FF9F1C;
  --radius:12px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

.container{max-width:1180px;margin:0 auto;padding:0 20px;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0 0 10px;}

/* -------- Header -------- */
.site-header{
  background:var(--ink);
  color:#fff;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid #23272f;
}
.header-inner{display:flex;align-items:center;gap:24px;height:68px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;flex-shrink:0;}
.logo-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--signal),#7C3AED);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.5px;font-family:var(--font-mono);
}
.main-nav{display:flex;gap:22px;flex:1;overflow-x:auto;}
.main-nav a{font-size:14px;font-weight:500;color:#C8CBD3;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;transition:.15s;}
.main-nav a:hover,.main-nav a.active{color:#fff;border-color:var(--signal);}
.search-form{display:flex;align-items:center;background:#1D212A;border-radius:8px;padding:6px 10px;gap:6px;}
.search-form input{background:none;border:none;color:#fff;font-size:13px;width:150px;font-family:var(--font-body);}
.search-form input::placeholder{color:#8A8F9C;}
.search-form input:focus{outline:none;}
.search-form button{background:none;border:none;color:#8A8F9C;cursor:pointer;display:flex;}
.nav-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;}

/* -------- Ad slots -------- */
.ad-slot{margin:18px 0;text-align:center;}
.ad-slot::before{
  content:'ADVERTISEMENT';
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;
  color:var(--text-dim);opacity:.55;margin-bottom:6px;
}
.ad-slot-header{margin:14px auto;}
.ad-slot-sidebar.sticky{position:sticky;top:84px;}
.ad-slot-in-article{margin:32px 0;}

/* -------- Hero -------- */
.hero-section{padding:28px 20px 8px;}
.hero-card{
  display:block;border-radius:var(--radius);min-height:420px;
  background-size:cover;background-position:center;position:relative;overflow:hidden;
  background-color:#1a1d24;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(10,12,16,.92) 0%, rgba(10,12,16,.55) 45%, rgba(10,12,16,.15) 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;
}
.hero-overlay h1{font-size:clamp(24px,4vw,40px);max-width:760px;margin:10px 0;}
.hero-overlay p{max-width:600px;color:#D7D9E0;font-size:15px;margin:0 0 10px;}
.badge{
  display:inline-block;background:var(--signal);color:#fff;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:5px;width:fit-content;
}
.meta{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}
.hero-overlay .meta{color:#B7BAC4;}

.empty-state{padding:60px 20px;text-align:center;}
.empty-state a{color:var(--signal);font-weight:600;}

/* -------- Layout -------- */
.content-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:36px 20px 60px;align-items:start;}
.content-layout.single-col{grid-template-columns:1fr;max-width:800px;}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--ink);}
.section-heading h2,.section-heading h1{margin:0;}
.section-desc{color:var(--text-dim);font-size:14px;}

/* -------- Article grid/cards -------- */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;}
.article-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s, box-shadow .15s;}
.article-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,22,27,.08);}
.article-thumb{display:block;height:150px;background-size:cover;background-position:center;background-color:var(--paper-dim);}
.article-body{padding:16px;}
.tag{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--signal);background:var(--signal-dim);padding:3px 8px;border-radius:4px;margin-bottom:8px;}
.article-body h3{font-size:17px;margin:0 0 8px;}
.article-body h3 a:hover{color:var(--signal);}
.article-body p{font-size:13.5px;color:var(--text-dim);margin:0 0 10px;}

/* -------- Sidebar -------- */
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:22px;}
.widget h4{font-size:14px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-mono);margin-bottom:14px;}
.trending-list{list-style:none;margin:0;padding:0;counter-reset:trend;}
.trending-list li{counter-increment:trend;margin-bottom:14px;}
.trending-list a{display:flex;gap:10px;font-size:13.5px;font-weight:600;}
.trending-list a::before{content:counter(trend);font-family:var(--font-mono);color:var(--signal);flex-shrink:0;}
.trending-list small{display:block;color:var(--text-dim);font-weight:400;font-family:var(--font-mono);font-size:11px;margin-top:2px;}
.category-pills{display:flex;flex-wrap:wrap;gap:8px;}
.category-pills a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;font-weight:500;}
.category-pills a:hover,.category-pills a.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* -------- Article full page -------- */
.article-full h1{font-size:clamp(26px,4vw,38px);margin-top:14px;}
.article-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);display:flex;gap:8px;margin-bottom:18px;}
.article-cover{width:100%;border-radius:var(--radius);margin-bottom:24px;max-height:460px;object-fit:cover;}
.article-content{font-size:17px;line-height:1.8;color:#22242C;}
.article-content p{margin:0 0 20px;}
.article-content img{border-radius:8px;margin:20px 0;}
.article-content h2,.article-content h3{margin-top:32px;}
.share-row{display:flex;gap:14px;align-items:center;margin:32px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;}
.share-row a{font-weight:600;color:var(--signal);}

/* -------- Pagination -------- */
.pagination{display:flex;gap:8px;margin-top:30px;}
.pagination a{padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-mono);font-size:13px;}
.pagination a.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* -------- Pages / forms -------- */
.page-content{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;}
.page-content h1{margin-bottom:16px;}
.contact-form{display:flex;flex-direction:column;gap:16px;margin-top:20px;}
.contact-form label{font-size:13px;font-weight:600;}
.contact-form input,.contact-form textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:14px;}
.btn-primary{background:var(--signal);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer;display:inline-block;font-size:14px;}
.btn-primary:hover{background:#2C48D9;}
.alert{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:16px;}
.alert-success{background:#E7F9EE;color:#137A3F;}
.alert-error{background:#FDE8E8;color:#A11;}

/* -------- Footer -------- */
.site-footer{background:var(--ink);color:#C8CBD3;margin-top:40px;}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:50px 20px 30px;}
.footer-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-mono);margin-bottom:14px;}
.footer-col a{display:block;font-size:13.5px;margin-bottom:9px;color:#AEB2BE;}
.footer-col a:hover{color:#fff;}
.footer-col p{font-size:13px;color:#9096A3;}
.footer-bottom{border-top:1px solid #23272f;padding:18px 20px;font-size:12.5px;color:#8A8F9C;text-align:center;}

/* -------- Responsive -------- */
@media (max-width:900px){
  .content-layout{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .main-nav{position:fixed;top:68px;left:0;right:0;background:var(--ink);flex-direction:column;padding:16px 20px;display:none;gap:14px;}
  .main-nav.open{display:flex;}
  .search-form{display:none;}
  .nav-toggle{display:flex;}
  .footer-inner{grid-template-columns:1fr;}
  .hero-overlay{padding:24px;}
}