/*
 * AI Auto Publisher - article design.
 * Inherits the theme's fonts and colors so it fits any theme (light or dark).
 * Change the accent in your theme's Customizer > Additional CSS:
 *   :root { --aiap-accent: #b4232a; }
 */
:root {
	--aiap-accent: #1f6f5c;
}

.aiap-box {
	margin: 1.75em 0;
	padding: 1.1em 1.35em 1.1em 1.25em;
	border-left: 4px solid var(--aiap-accent);
	border-radius: 0 6px 6px 0;
	background: rgba(31, 111, 92, 0.07);
	background: color-mix(in srgb, var(--aiap-accent) 7%, transparent);
}

.aiap-box-title {
	margin: 0 0 0.5em;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--aiap-accent);
}

.aiap-box ul {
	margin: 0;
	padding-left: 1.2em;
}

.aiap-box li {
	margin: 0.35em 0;
}

.aiap-box li::marker {
	color: var(--aiap-accent);
}

/* "Read also" is navigation, so it is quieter than the takeaways. */
.aiap-related {
	border-left-width: 2px;
	background: transparent;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.aiap-related a {
	font-weight: 600;
}

/* Tables scroll inside their own box on phones. */
.aiap-table {
	margin: 1.75em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.aiap-table table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.95em;
}

.aiap-table th,
.aiap-table td {
	padding: 0.65em 0.85em;
	text-align: start;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	vertical-align: top;
}

.aiap-table th {
	font-weight: 700;
	border-bottom: 2px solid var(--aiap-accent);
}

.aiap-table tr:nth-child(even) td {
	background: rgba(128, 128, 128, 0.06);
}

/* FAQ: native, keyboard-accessible disclosure. */
.aiap-faq {
	margin: 2.25em 0 1.5em;
}

.aiap-faq details {
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.aiap-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 0.9em 2em 0.9em 0;
	position: relative;
	font-weight: 600;
}

.aiap-faq summary::-webkit-details-marker {
	display: none;
}

.aiap-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3em;
	line-height: 1;
	color: var(--aiap-accent);
}

.aiap-faq details[open] summary::after {
	content: "\2212";
}

.aiap-faq summary:focus-visible {
	outline: 2px solid var(--aiap-accent);
	outline-offset: 2px;
}

.aiap-faq details p {
	margin: 0 0 1em;
}

/* Right-to-left languages (Urdu, Arabic, Persian...). */
[dir="rtl"] .aiap-box {
	border-left: 0;
	border-right: 4px solid var(--aiap-accent);
	border-radius: 6px 0 0 6px;
	padding: 1.1em 1.25em 1.1em 1.35em;
}

[dir="rtl"] .aiap-related {
	border-right-width: 2px;
}

[dir="rtl"] .aiap-faq summary {
	padding: 0.9em 0 0.9em 2em;
}

[dir="rtl"] .aiap-faq summary::after {
	right: auto;
	left: 0.25em;
}

/* Sources: small print at the end. */
.aiap-sources {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid rgba(128, 128, 128, 0.25);
	font-size: 0.88em;
}

.aiap-sources .aiap-box-title {
	color: inherit;
	font-size: 1em;
}

.aiap-sources ul {
	margin: 0;
	padding-left: 1.2em;
}