/**
 * SEO Copilot — AI Writer content styling.
 * Enqueued only on singular posts/pages (see SEOC_Head::maybe_enqueue_content_styles).
 *
 * Inline `style=""` attributes can't declare :hover, so anything interactive
 * lives here instead — the generated content only carries class names.
 */

/* ── Whole-article container ─────────────────────────────────── */
.seoc-article-box {
	background: #ffffff;
	border: 1px solid #ece9fb;
	border-radius: 16px;
	padding: 32px clamp(18px, 4vw, 40px);
	box-shadow: 0 2px 10px rgba(30, 27, 75, 0.05);
}
.seoc-article-box > *:first-child { margin-top: 0; }
.seoc-article-box > *:last-child { margin-bottom: 0; }
.seoc-article-box h2 { margin-top: 2em; }
.seoc-article-box h2:first-of-type { margin-top: 0.5em; }

/* ── Quick Answer callout ─────────────────────────────────────── */
.seoc-quick-answer {
	background: #eefcf3;
	border-left: 4px solid #16a34a;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 20px 0;
	transition: box-shadow .2s ease, transform .2s ease;
}
.seoc-quick-answer:hover {
	box-shadow: 0 4px 16px rgba(22, 163, 74, 0.15);
	transform: translateY(-1px);
}
.seoc-quick-answer__label {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #16a34a;
	margin: 0 0 6px;
}
.seoc-quick-answer p { margin: 0; color: #1f2937; font-size: 15px; line-height: 1.6; }

/* ── Call-to-action box ───────────────────────────────────────── */
.seoc-cta-box {
	background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
	border-radius: 16px;
	padding: 32px 28px;
	text-align: center;
	color: #ffffff;
	margin: 32px 0;
}
.seoc-cta-box__eyebrow {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: 700;
	color: #c4b5fd;
	margin: 0 0 8px;
}
.seoc-cta-box__title { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.seoc-cta-box__desc { font-size: 15px; color: #e0d7fb; max-width: 480px; margin: 0 auto 22px; line-height: 1.6; }
.seoc-cta-box__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.seoc-btn {
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.seoc-btn:hover { transform: translateY(-2px); text-decoration: none; }
.seoc-btn--primary { background: #ffffff; color: #1e1b4b; }
.seoc-btn--primary:hover { background: #f3f0ff; box-shadow: 0 6px 16px rgba(255,255,255,0.25); color: #1e1b4b; }
.seoc-btn--whatsapp { background: #25D366; color: #ffffff; }
.seoc-btn--whatsapp:hover { background: #1fb857; box-shadow: 0 6px 16px rgba(37,211,102,0.4); color: #fff; }

/* ── Comparison table ─────────────────────────────────────────── */
.seoc-table-wrap { overflow-x: auto; margin: 24px 0; border-radius: 12px; border: 1px solid #e5e0fa; }
table.seoc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.seoc-table thead th {
	background: #4c1d95;
	color: #fff;
	text-align: left;
	padding: 12px 16px;
	font-weight: 600;
}
table.seoc-table tbody td { padding: 12px 16px; border-bottom: 1px solid #ece9fb; }
table.seoc-table tbody tr { transition: background-color .15s ease; }
table.seoc-table tbody tr:nth-child(even) { background: #faf9ff; }
table.seoc-table tbody tr:hover { background: #f0ebff; }
table.seoc-table tbody tr:last-child td { border-bottom: none; }

/* ── Numbered process steps ───────────────────────────────────── */
.seoc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.seoc-step {
	background: #faf9ff;
	border: 1px solid #ece9fb;
	border-radius: 12px;
	padding: 18px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.seoc-step:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(76,29,149,0.12); border-color: #c4b5fd; }
.seoc-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: #4c1d95; color: #fff; font-weight: 700; font-size: 14px;
	margin-bottom: 10px;
}
.seoc-step__title { font-weight: 700; margin: 0 0 6px; color: #1f2937; }
.seoc-step__desc { font-size: 13px; color: #4b5563; margin: 0; line-height: 1.5; }

/* ── Pros & cons ───────────────────────────────────────────────── */
.seoc-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
@media (max-width: 600px) { .seoc-pros-cons { grid-template-columns: 1fr; } }
.seoc-pros, .seoc-cons { border-radius: 12px; padding: 18px 20px; transition: box-shadow .2s ease; }
.seoc-pros { background: #eefcf3; border: 1px solid #bbf0cd; }
.seoc-cons { background: #fef2f2; border: 1px solid #fbd5d5; }
.seoc-pros:hover, .seoc-cons:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.seoc-pros__title { color: #16a34a; font-weight: 700; margin: 0 0 10px; }
.seoc-cons__title { color: #dc2626; font-weight: 700; margin: 0 0 10px; }
.seoc-pros ul, .seoc-cons ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }

/* ── Badges / pills ───────────────────────────────────────────── */
.seoc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	margin: 0 6px 6px 0;
	transition: transform .15s ease;
}
.seoc-badge:hover { transform: scale(1.05); }
.seoc-badge--blue   { background: #dbeafe; color: #1d4ed8; }
.seoc-badge--purple { background: #ede9fe; color: #6d28d9; }
.seoc-badge--orange { background: #ffedd5; color: #c2410c; }
.seoc-badge--teal   { background: #ccfbf1; color: #0f766e; }
.seoc-badge--green  { background: #dcfce7; color: #15803d; }

/* ── FAQ accordion (native <details>, no JS needed) ─────────────── */
.seoc-faq-item {
	border: 1px solid #ece9fb;
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color .2s ease;
}
.seoc-faq-item:hover { border-color: #c4b5fd; }
.seoc-faq-item summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	color: #1f2937;
	list-style: none;
	position: relative;
}
.seoc-faq-item summary::-webkit-details-marker { display: none; }
.seoc-faq-item summary::after {
	content: '+';
	position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 20px; color: #4c1d95; transition: transform .2s ease;
}
.seoc-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.seoc-faq-item__body { padding: 0 18px 16px; font-size: 14px; color: #4b5563; line-height: 1.6; }