/*
Theme Name: Giornale Notizie Online
Theme URI: https://example.com/themes/giornalenotizie
Author: viraltrends
Author URI: https://example.com
Description: Temă news ultra-ușoară, grid 3 coloane (desktop), 1 coloană (mobil), fără sidebar/comentarii, Related Posts, SEO & Discover Ready. Compatibilă LiteSpeed + Rank Math.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: giornalenotizie
*/

:root{
  --blue:#007BFF;
  --blue-dark:#0056B3;
  --text:#333333;
  --bg:#FFFFFF;
  --muted:#F5F5F5;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eaeaea;
}
.topbar{
  max-width:var(--maxw); margin:auto; display:flex; align-items:center; gap:16px;
  padding:10px 16px;
}
.brand{font-weight:800; letter-spacing:.2px}
.brand a{color:var(--blue); text-decoration:none; font-size:20px}
.nav-toggle{display:none; margin-left:auto; font-size:20px; background:#fff; border:1px solid #eee; border-radius:10px; padding:6px 10px}
.primary-nav{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
.primary-nav a{color:#444; text-decoration:none; padding:8px 10px; border-radius:8px}
.primary-nav a:hover{background:var(--muted); color:var(--blue-dark)}

@media (max-width:720px){
  .primary-nav{display:none}
  .nav-toggle{display:block}
  .primary-nav.open{display:flex; flex-direction:column; gap:0; padding:8px 0}
  .primary-nav.open a{padding:10px 12px}
}

/* Hero */
.hero{ max-width:var(--maxw); margin:12px auto; padding:0 16px; }
.hero .hero-card{ position:relative; border-radius:16px; overflow:hidden; background:var(--muted); }
.hero .hero-card img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover }
.hero .hero-text{
  position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}
.hero .hero-text h1{margin:0 0 6px; font-size:clamp(20px,3.2vw,32px)}
.hero .hero-text p{margin:0; opacity:.9}

/* Containers & grid */
.container{max-width:var(--maxw); margin:auto; padding:0 16px}
.grid{ display:grid; gap:16px; margin:16px 0 40px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:720px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr);} }

.card{ background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.06) }
.card a{ color:inherit; text-decoration:none; display:block }
.card img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover }
.card .meta{ padding:12px 14px 0; font-size:12px; color:#666; display:flex; gap:8px; flex-wrap:wrap }
.card h2{ padding:6px 14px 0; margin:0; font-size:18px }
.card p{ padding:8px 14px 16px; margin:0; color:#555 }

/* Single article */
.article{ max-width:860px; margin:18px auto 40px; padding:0 16px }
.article h1{ font-size:clamp(24px,3.3vw,38px); margin:8px 0 6px }
.article .byline{ color:#666; font-size:14px; margin-bottom:14px }
.article figure{ margin:0 0 18px; border-radius:16px; overflow:hidden; background:var(--muted) }
.article img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover }
.article .content{ font-size:18px }
.article .content p{ margin:0 0 18px }
.article .content h2{ margin:22px 0 10px; font-size:22px }

/* Related */
.related{ max-width:var(--maxw); margin:28px auto 40px; padding:0 16px }
.related h3{ margin:0 0 12px; font-size:20px }
.related .grid .card h2{ font-size:16px }

/* Footer */
.site-footer{ border-top:1px solid #eee; margin-top:32px; background:#fff }
.footer-inner{ max-width:var(--maxw); margin:auto; padding:22px 16px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between }
.footer-links a{ color:#666; text-decoration:none; margin-right:12px }
.footer-links a:hover{ color:var(--blue-dark) }

/* Buttons & utilities */
.button{ display:inline-block; background:var(--blue); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none }
.button:hover{ background:var(--blue-dark) }
.hidden{ display:none }