/* ============================================================
   CMS Theme — theme.css
   Bootstrap 5 base + personalizzazioni
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  /* Valori di default — sovrascitti inline dal template base.php */
  --primary:        #0d6efd;
  --secondary:      #6c757d;
  --accent:         #fd7e14;
  --font-heading:   'Inter', sans-serif;
  --font-body:      'Inter', sans-serif;

  /* Light mode */
  --bg:             #ffffff;
  --bg-alt:         #f8f9fa;
  --text:           #212529;
  --text-muted:     #6c757d;
  --border:         #dee2e6;
  --card-bg:        #ffffff;
  --card-shadow:    0 2px 8px rgba(0,0,0,.06);

  /* Transition */
  --transition:     all .25s ease;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
.dark-mode {
  --bg:           #0f172a;
  --bg-alt:       #1e293b;
  --text:         #e2e8f0;
  --text-muted:   #94a3b8;
  --border:       #334155;
  --card-bg:      #1e293b;
  --card-shadow:  0 2px 8px rgba(0,0,0,.3);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:     var(--font-body);
  background:      var(--bg);
  color:           var(--text);
  transition:      background .3s, color .3s;
  line-height:     1.6;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color:       var(--text);
}

a { color: var(--primary); transition: var(--transition); }
a:hover { opacity: .85; }

img { max-width: 100%; height: auto; }

/* ── Header / Navbar ────────────────────────────────────────── */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    1030;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: background .3s;
}

#mainNav .navbar-brand { font-weight: 700; }
#mainNav .nav-link {
  font-weight:    500;
  font-size:      .9rem;
  padding:        .5rem .85rem;
  border-radius:  6px;
  transition:     var(--transition);
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active { background: var(--bg-alt); color: var(--primary); }
#mainNav .dropdown-menu {
  border:     1px solid var(--border);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
  background: var(--card-bg);
}
#mainNav .dropdown-item { color: var(--text); font-size: .88rem; }
#mainNav .dropdown-item:hover { background: var(--bg-alt); }

/* Dark mode navbar */
.dark-mode #mainNav { background: var(--bg-alt); border-color: var(--border); }

/* ── Slider ─────────────────────────────────────────────────── */
.cms-slider { position: relative; overflow: hidden; }
.cms-slider .carousel-item img {
  width:      100%;
  object-fit: cover;
  max-height: var(--slider-height, 520px);
}
.cms-slider .carousel-caption {
  background:    rgba(0,0,0,.45);
  border-radius: 12px;
  padding:       1.5rem 2rem;
  bottom:        2.5rem;
  backdrop-filter: blur(4px);
}
.cms-slider .carousel-caption h2 { font-size: clamp(1.2rem, 4vw, 2rem); margin-bottom: .5rem; }
.cms-slider .carousel-caption p  { font-size: clamp(.85rem, 2vw, 1.1rem); opacity: .9; }

/* ── Section ────────────────────────────────────────────────── */
.section      { padding: 5rem 0; }
.section-sm   { padding: 3rem 0; }
.section-alt  { background: var(--bg-alt); }
.section-dark { background: #1e293b; color: #e2e8f0; }

.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.section-title .lead { color: var(--text-muted); max-width: 600px; margin: .5rem auto 0; }
.section-title .title-line {
  display: block; width: 50px; height: 4px;
  background: var(--primary); margin: .75rem auto 0; border-radius: 2px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.cms-card {
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: 12px;
  box-shadow:    var(--card-shadow);
  transition:    var(--transition);
  overflow:      hidden;
}
.cms-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); transform: translateY(-2px); }

/* ── Blog card ──────────────────────────────────────────────── */
.post-card .post-thumb { height: 200px; object-fit: cover; width: 100%; }
.post-card .post-meta  { font-size: .78rem; color: var(--text-muted); }
.post-card .post-title { font-size: 1.05rem; font-weight: 700; margin: .5rem 0; }
.post-card .post-excerpt { font-size: .88rem; color: var(--text-muted); }

/* ── Product card ───────────────────────────────────────────── */
.product-card .product-thumb { height: 220px; object-fit: cover; width: 100%; position: relative; }
.product-card .product-badge {
  position: absolute; top: .75rem; left: .75rem;
  background: var(--accent); color: #fff;
  font-size: .7rem; padding: 3px 10px; border-radius: 20px; font-weight: 600;
}
.product-card .product-name  { font-size: .95rem; font-weight: 600; }
.product-card .product-price { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.product-card .price-old     { font-size: .85rem; text-decoration: line-through; color: var(--text-muted); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background:    var(--primary);
  border-color:  var(--primary);
  color:         #fff !important;
  border-radius: 8px;
  font-weight:   600;
  padding:       .55rem 1.25rem;
}
.btn-primary:hover {
  background:   color-mix(in srgb, var(--primary) 85%, #000);
  border-color: color-mix(in srgb, var(--primary) 85%, #000);
  color:        #fff !important;
}
.btn-outline-primary {
  border-color: var(--primary);
  color:        var(--primary);
  border-radius: 8px;
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background:   var(--card-bg);
  border-color: var(--border);
  color:        var(--text);
  border-radius: 8px;
  transition:   border-color .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 .2rem color-mix(in srgb, var(--primary) 25%, transparent);
  background:   var(--card-bg);
  color:        var(--text);
}
.dark-mode .form-control, .dark-mode .form-select { background: var(--bg-alt); color: var(--text); }

/* ── Cookie Banner ──────────────────────────────────────────── */
#cookieBanner {
  position:   fixed;
  bottom:     0; left: 0; right: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  z-index:    9998;
  padding:    1.25rem;
  transform:  translateY(100%);
  transition: transform .4s ease;
}
#cookieBanner.show { transform: translateY(0); }

/* ── Newsletter ─────────────────────────────────────────────── */
.newsletter-box {
  background:    var(--primary);
  border-radius: 16px;
  padding:       3rem;
  color:         #fff;
  text-align:    center;
}
.newsletter-box input[type=email] {
  max-width:     360px;
  border-radius: 8px 0 0 8px;
  border:        none;
  padding:       .65rem 1rem;
}

/* ── Reviews ────────────────────────────────────────────────── */
.review-card { background: var(--card-bg); border-radius: 12px; padding: 1.5rem; }
.stars { color: #f59e0b; letter-spacing: 2px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background:  var(--bg-alt);
  border-top:  1px solid var(--border);
  padding:     4rem 0 2rem;
  margin-top:  auto;
}
.footer-logo { height: 40px; margin-bottom: 1rem; }
.footer-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
                font-weight: 700; color: var(--primary); margin-bottom: .75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: .88rem;
                   display: block; padding: 3px 0; transition: var(--transition); }
.footer-links a:hover { color: var(--primary); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center;
                   width: 36px; height: 36px; border-radius: 50%;
                   background: var(--bg); border: 1px solid var(--border);
                   color: var(--text); text-decoration: none;
                   transition: var(--transition); font-size: 1rem; }
.footer-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 2rem;
                 font-size: .82rem; color: var(--text-muted); }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-section { background: var(--bg-alt); padding: .75rem 0; border-bottom: 1px solid var(--border); }
.breadcrumb { margin: 0; font-size: .82rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ── Hero (Home) ────────────────────────────────────────────── */
.hero-section {
  background:  linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, #000) 100%);
  color:       #fff;
  padding:     5rem 0;
  position:    relative;
  overflow:    hidden;
}
.hero-section::before {
  content:     '';
  position:    absolute; inset: 0;
  background:  url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Utilities ──────────────────────────────────────────────── */
.fw-700  { font-weight: 700; }
.text-primary-cms { color: var(--primary); }
.bg-primary-cms   { background: var(--primary); }

/* ── Animations ─────────────────────────────────────────────── */
.fade-in { animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }

/* ── Skip to content (accessibility) ───────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 1rem;
  background: var(--primary); color: #fff;
  padding: .5rem 1rem; border-radius: 0 0 6px 6px;
  font-weight: 600; text-decoration: none; z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:768px) {
  .section    { padding: 3rem 0; }
  .section-sm { padding: 2rem 0; }
  .hero-section { padding: 3rem 0; }
  .cms-slider .carousel-item img { max-height: 280px; }
}