/* =========================================
   pSEO Tool Site - Custom Styles
   ========================================= */

/* Custom Scrollbar for Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #404040;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tool Option Buttons (Active State) */
.tool-option-btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Word Counter / Stats Panel Grid */
.stat-item {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    border-radius: 0.25rem;
    text-align: center;
    transition: border-color 0.3s ease;
}
.stat-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.stat-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
}
.stat-label {
    font-size: 0.75rem;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

/* Textarea and Input focus ring override for pure black bg */
.tool-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Smooth transitions for internal linking cards */
a.group {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
a.group:hover {
    transform: translateY(-2px);
}

/* Details/Summary FAQ styling tweaks */
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    margin-bottom: 0.5rem;
}
/* AI Content Styles */
.ai-content { color: #d4d4d8; font-size: 1rem; line-height: 1.75; }
.ai-content h2 { font-family: 'Outfit', sans-serif; font-size: 1.875rem; font-weight: 700; color: #ffffff; margin-top: 2.5rem; margin-bottom: 1.25rem; letter-spacing: -0.025em; }
.ai-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 600; color: #ffffff; margin-top: 2rem; margin-bottom: 1rem; letter-spacing: -0.025em; }
.ai-content h4 { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: #e4e4e7; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.ai-content p { margin-bottom: 1.25rem; }
.ai-content ul, .ai-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.ai-content ul { list-style-type: disc; }
.ai-content ul ul { list-style-type: circle; margin-top: 0.5rem; margin-bottom: 0; }
.ai-content ol { list-style-type: decimal; }
.ai-content li { margin-bottom: 0.5rem; }
.ai-content a { color: #818cf8; text-decoration: none; transition: color 0.2s; }
.ai-content a:hover { color: #a5b4fc; text-decoration: underline; }
.ai-content strong { color: #ffffff; font-weight: 600; }
.ai-content pre { background-color: #030303; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2); }
.ai-content code { background-color: rgba(255, 255, 255, 0.1); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875em; color: #a7f3d0; }
.ai-content pre code { background-color: transparent; padding: 0; color: #e4e4e7; border-radius: 0; }
.ai-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: left; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.ai-content th, .ai-content td { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ai-content th { background-color: rgba(255, 255, 255, 0.03); font-weight: 600; color: #ffffff; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; font-family: 'Outfit', sans-serif; }
.ai-content tbody tr:last-child td { border-bottom: none; }
.ai-content tbody tr:hover { background-color: rgba(255, 255, 255, 0.02); }