/*
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.1
License: GPL-2.0-or-later
Text Domain: giornalenotizie
*/

:root{
  /* Albastru corporativ - mai închis și profesionist */
  --blue: #1E40AF;        /* Albastru premium */
  --blue-dark: #1E3A8A;   /* Albastru închis */
  --blue-light: #3B82F6;  /* Albastru deschis */
  
  /* Neutre sofisticate */
  --text: #1F2937;        /* Gri închis (text principal) */
  --text-light: #6B7280;  /* Gri mediu (text secundar) */
  --bg: #FFFFFF;          /* Alb pur */
  --muted: #F8FAFC;       /* Gri foarte deschis (fundaluri) */
  --border: #E5E7EB;      /* Gri pentru borduri */
  
  --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:var(--bg); 
  border-bottom: 2px solid var(--blue);
  box-shadow: 0 2px 12px rgba(30, 64, 175, 0.08);
}
.topbar{
  max-width:var(--maxw); margin:auto; display:flex; align-items:center; gap:16px;
  padding:12px 16px;
}
.brand{font-weight:800; letter-spacing:.2px}
.brand a{color:var(--blue); text-decoration:none; font-size:22px; font-weight:700}
.nav-toggle{display:none; margin-left:auto; font-size:20px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer}
.primary-nav{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
.primary-nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:500; transition:all 0.3s ease}
.primary-nav a:hover{background:var(--muted); color:var(--blue); transform:translateY(-1px)}

@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; background:var(--bg); border:1px solid var(--border); border-radius:12px; margin-top:8px}
  .primary-nav.open a{padding:12px 16px; border-bottom:1px solid var(--muted)}
  .primary-nav.open a:last-child{border-bottom:none}
}

/* Hero */
.hero{ max-width:var(--maxw); margin:16px auto; padding:0 16px; }
.hero .hero-card{ position:relative; border-radius:16px; overflow:hidden; background:var(--muted); box-shadow:0 10px 40px rgba(0,0,0,0.1)}
.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:20px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(30, 64, 175, 0.85) 100%);
}
.hero .hero-text h1{margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); font-weight:700}
.hero .hero-text p{margin:0; opacity:.95; font-size:16px}

/* Containers & grid */
.container{max-width:var(--maxw); margin:auto; padding:0 16px}
.grid{ display:grid; gap:20px; margin:20px 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:var(--bg); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  transition:all 0.3s ease; position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-light));
  opacity:0; transition:opacity 0.3s ease;
}
.card:hover{ 
  transform:translateY(-4px); 
  box-shadow:0 8px 30px rgba(30, 64, 175, 0.12);
  border-color:var(--blue-light);
}
.card:hover::before{ opacity:1 }
.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:var(--text-light); display:flex; gap:8px; flex-wrap:wrap }
.card h2{ padding:8px 14px 0; margin:0; font-size:18px; font-weight:600; color:var(--text) }
.card p{ padding:8px 14px 16px; margin:0; color:var(--text-light); line-height:1.5 }

/* Single article */
.article{ max-width:860px; margin:20px auto 40px; padding:0 16px }
.article h1{ font-size:clamp(26px,3.3vw,40px); margin:8px 0 6px; font-weight:700; color:var(--text) }
.article .byline{ color:var(--text-light); font-size:14px; margin-bottom:16px }
.article figure{ margin:0 0 20px; border-radius:16px; overflow:hidden; background:var(--muted); box-shadow:0 4px 12px rgba(0,0,0,0.05) }
.article img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover }
.article .content{ font-size:18px; line-height:1.7 }
.article .content p{ margin:0 0 20px; color:var(--text) }
.article .content h2{ margin:24px 0 12px; font-size:24px; font-weight:600; color:var(--text) }

/* Related */
.related{ max-width:var(--maxw); margin:32px auto 40px; padding:0 16px }
.related h3{ margin:0 0 16px; font-size:22px; font-weight:600; color:var(--text) }
.related .grid .card h2{ font-size:16px }

/* Footer */
.site-footer{ border-top:2px solid var(--blue); margin-top:40px; background:var(--bg); padding:20px 0 }
.footer-inner{ max-width:var(--maxw); margin:auto; padding:0 16px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center }
.footer-links a{ color:var(--text-light); text-decoration:none; margin-right:16px; transition:color 0.3s ease }
.footer-links a:hover{ color:var(--blue) }

/* Buttons & utilities */
.button{ 
  display:inline-block; 
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color:#fff; padding:12px 24px; border-radius:8px; text-decoration:none;
  font-weight:600; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(30, 64, 175, 0.3);
  border:none; cursor:pointer;
}
.button:hover{ 
  background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  transform:translateY(-2px); box-shadow:0 4px 15px rgba(30, 64, 175, 0.4);
}
.hidden{ display:none }

/* Breadcrumbs */
.breadcrumbs{ 
  margin-bottom:20px; font-size:14px; color:var(--text-light);
}
.breadcrumbs a{ color:var(--blue); text-decoration:none }
.breadcrumbs a:hover{ text-decoration:underline }

/* Social Share */
.social-share{ 
  margin:20px 0; padding:16px 0; border-top:1px solid var(--border); 
  border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center;
}
.social-share span{ font-weight:500; color:var(--text) }
.social-share a{ 
  color:var(--blue); text-decoration:none; padding:6px 12px; border:1px solid var(--blue);
  border-radius:6px; transition:all 0.3s ease; font-size:14px;
}
.social-share a:hover{ background:var(--blue); color:white }

/* Post Navigation */
.post-navigation{
  display: flex; justify-content: space-between; margin: 30px 0; padding: 20px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.nav-previous a, .nav-next a{
  color: var(--blue); text-decoration: none; font-weight: 500; padding: 8px 16px;
  border: 1px solid var(--border); border-radius: 8px; transition: all 0.3s ease;
}
.nav-previous a:hover, .nav-next a:hover{
  background: var(--blue); color: white; border-color: var(--blue);
}

/* Reading Time */
.reading-time{
  color: var(--blue); font-weight: 500;
}