/* ==========================================================================
   Namekon Blog - Lightweight Snippets & Component Styles
   Optimized for clean HTML, readability, and Mediavine Ad Injection compatibility
   ========================================================================== */

/* 1. Callouts & Notice Boxes */
.snip-tip,
.callout-tip {
    background: #e8f4fd;
    border-left: 4px solid #2271b1;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 24px 0;
    color: #1e293b;
    font-size: 15px;
    line-height: 1.6;
}

.snip-tip strong,
.callout-tip strong {
    color: #0c4a6e;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}

.snip-tip p,
.callout-tip p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #1e293b;
}

.snip-warning,
.callout-warning {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 24px 0;
    color: #78350f;
    font-size: 15px;
    line-height: 1.6;
}

.snip-warning strong,
.callout-warning strong {
    color: #92400e;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}

.snip-warning p,
.callout-warning p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #78350f;
}

/* 2. Key Takeaways & Highlights List */
.snip-takeaways {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0284c7;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 26px 0;
}

.snip-takeaways strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 8px;
}

.snip-takeaways ul {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    font-size: 14px;
    line-height: 1.65;
}

.snip-takeaways li {
    margin-bottom: 6px;
}

.snip-takeaways li:last-child {
    margin-bottom: 0;
}

/* 3. Interactive Call-To-Action (CTA) Banners */
.snip-cta,
.reusable-cta-banner {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 24px 20px;
    margin: 32px 0;
    text-align: center;
}

.snip-cta h3,
.reusable-cta-banner h3 {
    margin: 0 0 10px;
    color: #0369a1;
    font-size: 18px;
    font-weight: 700;
}

.snip-cta p,
.reusable-cta-banner p {
    margin: 0 0 18px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.snip-btn {
    display: inline-block;
    background: #2271b1;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.2s ease, transform 0.15s ease;
}

.snip-btn:hover {
    background: #135e96;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* 4. Comparison & Feature Tables */
.snip-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 24px 0;
    font-size: 14px;
}

.snip-table th {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
}

.snip-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.snip-table tr:nth-child(even) td {
    background: #fafafa;
}

.snip-table tr:last-child td {
    border-bottom: none;
}

/* 5. Pros & Cons 2-Column Grid */
.snip-pros-cons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 26px 0;
}

.snip-pros {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 18px;
}

.snip-pros strong {
    color: #166534;
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}

.snip-pros ul {
    margin: 0;
    padding-left: 20px;
    color: #15803d;
    font-size: 13.5px;
    line-height: 1.6;
}

.snip-cons {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 18px;
}

.snip-cons strong {
    color: #991b1b;
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}

.snip-cons ul {
    margin: 0;
    padding-left: 20px;
    color: #b91c1c;
    font-size: 13.5px;
    line-height: 1.6;
}

/* 6. FAQ Accordions (Native Details/Summary) */
.snip-faq {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 14px 0;
    cursor: pointer;
}

.snip-faq summary {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
    outline: none;
}

.snip-faq p,
.snip-faq div {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

/* 7. Stylized Quote Block */
blockquote.snip-quote {
    background: #fafafa;
    border-left: 4px solid #3b82f6;
    margin: 26px 0;
    padding: 18px 24px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #334155;
}

blockquote.snip-quote p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
}

blockquote.snip-quote cite {
    display: block;
    font-size: 13px;
    color: #64748b;
    font-style: normal;
    font-weight: 600;
}

/* 8. Author Bio Box */
.snip-author {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-top: 36px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.snip-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2271b1;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.snip-author-info h4 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 15px;
}

.snip-author-info p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}