/*
Theme Name: ColorMag Child Cluj360
Theme URI: https://cluj360.ro
Description: Child Theme modernizat pentru ColorMag - optimizat pentru viteză, mobil și SEO.
Author: Cluj360
Template: colormag
Version: 1.0
*/

/* === Reset & Base === */
html { font-size: 100%; scroll-behavior: smooth; }
body { font-size: 18px; line-height: 1.7; font-family: 'Poppins', Arial, sans-serif; color: #222; background: #fff; margin:0; padding:0; }
a { color: #0056b3; text-decoration: underline; font-weight: 600; transition: color 0.2s ease; }
a:hover, a:focus { color: #003d80; outline:none; }

/* === Titluri === */
h1 { font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:#111; }
h2 { font-size:2rem; font-weight:600; margin-bottom:0.8rem; color:#222; }
h3 { font-size:1.5rem; font-weight:600; margin-bottom:0.6rem; color:#333; }

/* === Layouts === */
.container { width:90%; max-width:1200px; margin:auto; }
.grid { display:grid; gap:1.5rem; }
.grid-2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }

/* === Carduri === */
.card, .cluj360-card, .featured-card, .blog-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); overflow:hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover, .cluj360-card:hover, .featured-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.card img, .cluj360-card img, .featured-card img, .blog-card img { width:100%; height:auto; display:block; }
.card-content { padding:1rem; }

/* === Butoane === */
.btn, .btn-search, .btn-random { display:inline-block; padding:0.7rem 1.4rem; border-radius:8px; font-weight:600; text-align:center; transition: background 0.2s ease; }
.btn { background:#0056b3; color:#fff !important; text-decoration:none; }
.btn:hover, .btn:focus { background:#003d80; outline:none; }
.btn-search { background:#ffb400; color:#111; }
.btn-search:hover, .btn-search:focus { background:#e69c00; }
.btn-random { background:#00c8ff; color:#111; }
.btn-random:hover, .btn-random:focus { background:#00a6cc; }

/* === Breadcrumbs & Tags === */
.breadcrumb, .post-tags { font-size:0.9rem; color:#555; margin-bottom:1rem; }
.breadcrumb a, .post-tags a { color:#0056b3; text-decoration:underline; }

/* === Hero Section === */
.hero-section { position:relative; text-align:center; padding:6rem 1rem; color:#fff; background:linear-gradient(135deg, #0056b3 0%, #0077e6 100%); overflow:hidden; }
.hero-section::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:url('hero-bg.jpg') center/cover no-repeat; opacity:0.15; z-index:0; }
.hero-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.25); z-index:1; }
.hero-inner { position:relative; z-index:2; max-width:800px; margin:auto; }
.hero-inner h1 { font-size:3rem; font-weight:700; margin-bottom:1rem; line-height:1.2; text-shadow:0 2px 6px rgba(0,0,0,0.4); }
.hero-inner p { font-size:1.4rem; margin-bottom:2rem; text-shadow:0 1px 4px rgba(0,0,0,0.3); }
.hero-search { display:flex; max-width:600px; margin:auto 0 1.5rem; gap:0.5rem; }
.hero-search input { flex:1; padding:0.8rem 1rem; border-radius:8px; border:none; font-size:1rem; }
.hero-search button { cursor:pointer; }

/* === Responsive === */
@media(max-width:768px) {
  body { font-size:16px; }
  h1 { font-size:2rem; }
  h2 { font-size:1.6rem; }
  h3 { font-size:1.3rem; }
  .hero-search { flex-direction:column; gap:0.5rem; }
  .hero-search button, .btn-random { width:100%; text-align:center; }
}