/* ============================================================
   Smartegia - Stile personalizzato
   ============================================================ */

/* Variabili */
:root {
    --primary: #4F46E5;
    --primary-light: #EEF2FF;
    --secondary: #7C3AED;
    --dark: #111827;
    --gray: #6B7280;
    --light-bg: #F9FAFB;
    --font-body: 'Inter', sans-serif;
    --font-article: 'Merriweather', Georgia, serif;
    --radius: 0.75rem;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg: 0 4px 6px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--dark); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { transition: color .15s; }

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 1030; }
.navbar { padding: .75rem 0; }
.navbar-brand { font-size: 1.5rem; letter-spacing: -.5px; }
.nav-link { font-weight: 500; color: #374151 !important; padding: .5rem .75rem !important; border-radius: 6px; }
.nav-link:hover { background: var(--primary-light); color: var(--primary) !important; }
.dropdown-menu { border: none; box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: .5rem; min-width: 220px; }
.dropdown-item { border-radius: 6px; padding: .5rem .75rem; font-size: .9rem; }
.dropdown-item:hover { background: var(--primary-light); color: var(--primary); }

/* Barra categorie */
.category-bar { overflow: hidden; }
.category-pill {
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #374151;
    font-size: .78rem;
    font-weight: 500;
    padding: .3rem .7rem;
    border-radius: 20px;
    transition: all .15s;
    white-space: nowrap;
}
.category-pill:hover {
    background: var(--cat-color, var(--primary));
    color: white !important;
    border-color: transparent;
}

/* Ricerca header */
.search-form .form-control { border-radius: 20px 0 0 20px; font-size: .85rem; }
.search-form .btn { border-radius: 0 20px 20px 0; border-color: #D1D5DB; }

/* ============================================================
   HERO
   ============================================================ */
.hero-section { background: linear-gradient(160deg, #F9FAFB 0%, var(--primary-light) 100%); padding: 4rem 0; }
.hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; font-weight: 900; }

.hero-illustration { position: relative; height: 380px; }
.hero-main-img { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 1.5rem; }
.floating-card { position: absolute; z-index: 2; min-width: 160px; border-radius: .75rem; }
.floating-card.card-1 { top: -10px; right: -10px; animation: float 4s ease-in-out infinite; }
.floating-card.card-2 { bottom: 30px; left: -10px; animation: float 4s ease-in-out infinite .8s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ============================================================
   CARDS ARTICOLI
   ============================================================ */
.article-card { border-radius: var(--radius); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }

.article-thumb, .featured-img { height: 200px; object-fit: cover; }
.featured-img { height: 340px; }
.article-thumb-placeholder, .featured-img-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.featured-img-placeholder { height: 340px; }

.card-side-img { width: 100px; object-fit: cover; flex-shrink: 0; }
.card-side-img-placeholder {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.category-card { border-radius: var(--radius); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }
.category-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   FORUM
   ============================================================ */
.forum-category-card { border-radius: var(--radius); transition: box-shadow .2s; }
.forum-category-card:hover { box-shadow: var(--shadow-lg) !important; }

/* ============================================================
   CONTENUTO ARTICOLO (typography)
   ============================================================ */
.article-content {
    font-family: var(--font-article);
    font-size: 1.05rem;
    line-height: 1.85;
    color: #1F2937;
}
.article-content h2, .article-content h3 { font-family: var(--font-body); font-weight: 800; margin-top: 2.5rem; margin-bottom: 1rem; }
.article-content h2 { font-size: 1.6rem; }
.article-content h3 { font-size: 1.25rem; }
.article-content p  { margin-bottom: 1.5rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.article-content li { margin-bottom: .5rem; }
.article-content blockquote {
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
    padding: 1rem 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0;
    font-style: italic;
}
.article-content img   { border-radius: var(--radius); margin: 1.5rem 0; }
.article-content code  { background: #F3F4F6; padding: .1em .4em; border-radius: 4px; font-size: .9em; color: #DC2626; }
.article-content pre   { background: #1F2937; color: #F9FAFB; padding: 1.5rem; border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; }
.article-content pre code { background: none; color: inherit; padding: 0; font-size: .9rem; }
.article-content a     { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; }
.article-content a:hover { text-decoration: none; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.article-content th, .article-content td { padding: .75rem 1rem; border: 1px solid #E5E7EB; }
.article-content th    { background: var(--primary-light); font-weight: 700; }
.article-content .callout { padding: 1rem 1.5rem; border-radius: var(--radius); margin: 1.5rem 0; }
.article-content .callout-info    { background: #EFF6FF; border-left: 4px solid #3B82F6; }
.article-content .callout-success { background: #F0FDF4; border-left: 4px solid #22C55E; }
.article-content .callout-warning { background: #FFFBEB; border-left: 4px solid #F59E0B; }
.article-content .callout-danger  { background: #FEF2F2; border-left: 4px solid #EF4444; }

/* ============================================================
   PAGINAZIONE
   ============================================================ */
.pagination { gap: .25rem; justify-content: center; flex-wrap: wrap; }
.page-link { border-radius: 8px !important; border: 1px solid #E5E7EB; color: var(--dark); font-weight: 500; padding: .5rem .9rem; }
.page-link:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
.page-item.disabled .page-link { opacity: .4; }

/* ============================================================
   SEGNALIBRO BUTTON
   ============================================================ */
.bookmark-btn { transition: all .2s; }
.bookmark-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ============================================================
   FORUM - thread
   ============================================================ */
.post-solution { border-left: 4px solid #22C55E; background: #F0FDF4; }
.user-badge-admin    { background: #FEF2F2; color: #DC2626; }
.user-badge-author   { background: #EFF6FF; color: #2563EB; }
.user-badge-moderator { background: #F0FDF4; color: #16A34A; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-section { background: linear-gradient(135deg, var(--primary), var(--secondary)); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { font-size: .9rem; }
.footer-link:hover { color: white !important; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1F2937;
    color: white;
    padding: 1rem 0;
    border-top: 3px solid var(--primary);
}

/* ============================================================
   ADMIN PANEL (base)
   ============================================================ */
.admin-sidebar { width: 260px; min-height: 100vh; background: #1E1B4B; }
.admin-sidebar .nav-link { color: #C7D2FE !important; border-radius: 8px; margin-bottom: 2px; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,.1); color: white !important; }
.admin-content { flex: 1; background: #F8FAFC; min-height: 100vh; }

/* ============================================================
   UTILITIES
   ============================================================ */
.min-w-0 { min-width: 0; }
.fw-black { font-weight: 900; }
.rounded-xl { border-radius: 1rem !important; }
.bg-primary-subtle { background-color: var(--primary-light) !important; }
.text-primary { color: var(--primary) !important; }

/* Scroll to top button */
#scrollTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: opacity .2s;
    cursor: pointer;
}
#scrollTop.show { display: flex; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .hero-section { padding: 2.5rem 0; }
    .featured-img { height: 220px; }
    .article-content { font-size: 1rem; }
}

/* ============================================================
   Ricerca live (suggerimenti dropdown)
   ============================================================ */
.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}
.search-suggestion-item {
    display: flex;
    align-items: center;
    padding: .55rem .85rem;
    font-size: .875rem;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
}
.search-suggestion-item:last-child { border-bottom: 0; }
.search-suggestion-item:hover { background: #f5f3ff; color: var(--primary); }

/* ============================================================
   Accessibilità: focus visibile coerente
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .45);
    outline-offset: 2px;
    border-radius: 4px;
}