/*
Theme Name: TopAiTool
Theme URI: https://topaitool.net
Author: TopAiTool
Description: Professional AI Tools Directory - Next.js UX on WordPress
Version: 5.0.0
License: GPL v2
Text Domain: topaitool
*/

:root {
  --primary: #f97316;
  --primary-dark: #ea580c;
  --primary-light: #ffedd5;
  --secondary: #0f172a;
  --bg-light: #f8fafc;
  --text-dark: #1e293b;
  --text-light: #64748b;
  --border: #e2e8f0;
  --radius: 16px;
  --shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
  --shadow-hover: 0 20px 35px -8px rgba(249,115,22,0.15);
  --gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', -apple-system, sans-serif; color:var(--text-dark); line-height:1.5; background:#fff; }
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.container-narrow { max-width:900px; margin:0 auto; padding:0 1.5rem; }

/* HEADER */
.site-header { border-bottom:1px solid var(--border); background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); position:sticky; top:0; z-index:50; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo { font-size:1.7rem; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:2rem; }
.nav-links a { text-decoration:none; color:var(--text-light); font-weight:500; }
.nav-links a:hover { color:var(--primary); }

/* HERO SEARCH */
.hero { text-align:center; padding:4rem 0 3rem; }
.hero h1 { font-size:clamp(2.5rem,6vw,3.8rem); font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:1.25rem; color:var(--text-light); max-width:700px; margin:0 auto 2rem; }
.search-wrapper { max-width:700px; margin:0 auto; }
.search-box { display:flex; background:white; border:2px solid var(--border); border-radius:60px; padding:0.5rem; box-shadow:var(--shadow); transition:all 0.2s; }
.search-box:focus-within { border-color:var(--primary); box-shadow:var(--shadow-hover); }
.search-box input { flex:1; border:none; padding:1rem 1.5rem; font-size:1.1rem; outline:none; background:transparent; }
.search-box button { background:var(--primary); color:white; border:none; padding:1rem 2rem; border-radius:50px; font-weight:600; cursor:pointer; }
.search-box button:hover { background:var(--primary-dark); }
.search-suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; margin-top:1.5rem; }
.suggestion { background:var(--bg-light); padding:0.5rem 1.2rem; border-radius:40px; font-size:0.9rem; color:var(--text-light); cursor:pointer; border:1px solid var(--border); }
.suggestion:hover { background:var(--primary); color:white; border-color:var(--primary); }

/* STATS */
.stats { display:flex; justify-content:center; gap:3rem; margin:3rem 0; }
.stat-item { text-align:center; }
.stat-num { font-size:2.2rem; font-weight:700; color:var(--primary); }
.stat-label { color:var(--text-light); }

/* BREADCRUMBS */
.breadcrumbs { padding:1rem 0; color:var(--text-light); font-size:0.9rem; }
.breadcrumbs a { color:var(--primary); text-decoration:none; }
.breadcrumbs span { margin:0 0.5rem; }

/* CATEGORY GRID */
.section-title { font-size:2rem; font-weight:700; margin:3rem 0 1.5rem; text-align:center; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:1rem; }
.cat-card { background:var(--bg-light); border-radius:var(--radius); padding:1.5rem 0.5rem; text-align:center; border:1px solid var(--border); transition:0.2s; text-decoration:none; color:inherit; }
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary); }
.cat-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.cat-name { font-weight:600; }
.cat-count { font-size:0.85rem; color:var(--text-light); }

/* TOOLS GRID - RESPONSIVE 3/2/1 */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (max-width: 992px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* TOOL CARD */
.tool-card { background:white; border-radius:var(--radius); padding:1.5rem; border:1px solid var(--border); transition:all 0.2s; }
.tool-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:transparent; }
.tool-header { display:flex; gap:1rem; margin-bottom:1rem; }
.tool-icon { width:48px; height:48px; background:var(--bg-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary); border:1px solid var(--border); }
.tool-info h3 { font-size:1.2rem; margin-bottom:0.2rem; }
.tool-cat { font-size:0.85rem; color:var(--text-light); }
.tool-desc { color:var(--text-light); margin:0.8rem 0; font-size:0.95rem; }
.tool-meta { display:flex; justify-content:space-between; align-items:center; margin:1rem 0; }
.rating { display:flex; align-items:center; gap:0.3rem; }
.stars { color:#fbbf24; letter-spacing:2px; }
.price-badge { padding:0.2rem 0.8rem; border-radius:40px; font-size:0.75rem; font-weight:600; }
.price-free { background:#dcfce7; color:#166534; }
.price-freemium { background:#fef9c3; color:#854d0e; }
.price-paid { background:#fee2e2; color:#991b1b; }
.tool-footer { display:flex; gap:0.5rem; }
.btn-visit { flex:1; background:var(--primary); color:white; text-align:center; padding:0.7rem; border-radius:40px; font-weight:500; text-decoration:none; }
.btn-visit:hover { background:var(--primary-dark); }
.vote-btn { display:flex; align-items:center; gap:0.3rem; padding:0 1rem; border:1px solid var(--border); border-radius:40px; cursor:pointer; }

/* PAGE HEADER */
.page-header { text-align: center; padding: 2rem 0 1rem; }
.page-header h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.page-header p { color: #64748b; font-size: 1.1rem; max-width: 700px; margin: 0 auto; }

/* CATEGORY HEADER */
.category-header { text-align: center; padding: 2rem 0 1rem; }
.category-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.category-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.category-description { color: #64748b; max-width: 700px; margin: 0.5rem auto; }
.category-count { display: inline-block; margin-top: 0.5rem; }

/* SINGLE TOOL */
.single-tool { padding: 1.5rem 0 3rem; }
.single-thumbnail-wrapper { margin-bottom: 1.5rem; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); background: #f8fafc; border: 1px solid #e2e8f0; }
.single-thumbnail { display: block; width: 100%; height: auto; max-height: 350px; object-fit: contain; background: white; }
.single-header { margin-bottom: 1.5rem; }
.single-title { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.single-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.single-rating { display: flex; align-items: center; gap: 0.3rem; }
.single-rating .stars { color: #fbbf24; font-size: 1.3rem; letter-spacing: 2px; }
.single-cta { margin: 1.5rem 0; }
.btn-visit-large { display: inline-block; padding: 1rem 2.5rem; font-size: 1.1rem; border-radius: 60px; background: var(--gradient); color: white; font-weight: 600; text-decoration: none; box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05); transition: all 0.2s; }
.btn-visit-large:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: white; }
.single-content { font-size: 1.05rem; line-height: 1.7; }
.single-content h2 { font-size: 1.6rem; margin: 2rem 0 1rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; }
.single-content h3 { font-size: 1.3rem; margin: 1.5rem 0 0.8rem; }
.single-content p { margin-bottom: 1.2rem; }

/* PAGINATION */
.pagination { display:flex; justify-content:center; gap:0.5rem; margin:3rem 0; }
.pagination a, .pagination span { padding:0.5rem 1rem; border:1px solid var(--border); border-radius:8px; color:var(--text-dark); }
.pagination .current { background:var(--primary); color:white; border-color:var(--primary); }

/* FOOTER */
.site-footer { background:var(--secondary); color:#94a3b8; padding:3rem 0 1.5rem; margin-top:4rem; text-align:center; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; margin:1.5rem 0; }
.footer-links a { color:#cbd5e1; text-decoration:none; }
.footer-links a:hover { color:white; }

/* MOBILE */
@media (max-width:640px) {
  .single-title { font-size: 1.6rem; }
  .btn-visit-large { display: block; text-align: center; width: 100%; }
}

/* Fix H1 duplicato - Assicura che solo l'header mostri il titolo */
.single-content h1 {
    display: none;
}

/* ==========================================================================
   TOOLS GRID - RESPONSIVE 2/3/4 COLONNE (v3.0)
   ========================================================================== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }
}

/* Tool Card v3 - Con immagine */
.tool-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 35px -12px rgba(249,115,22,0.12);
    border-color: transparent;
}

.tool-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f8fafc;
}

.tool-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tool-card:hover .tool-card-image img {
    transform: scale(1.05);
}

.tool-card-icon {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
}

.tool-card-content {
    padding: 1.25rem;
}

/* Ad Banners */
.ad-widget {
    margin: 2rem 0;
    text-align: center;
}

.content-ad {
    margin: 1.5rem 0;
}

.footer-ad {
    margin-top: 2rem;
}

/* Pricing Table */
.pricing-table {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.pricing-plan {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    flex: 1 1 250px;
    text-align: center;
}

.pricing-plan.featured {
    border-color: #f97316;
    box-shadow: 0 10px 30px -5px rgba(249,115,22,0.15);
}

.pricing-plan h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.pricing-plan .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f97316;
    margin-bottom: 1.5rem;
}

.pricing-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.pricing-plan li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}