/* Psyarabic Tools — shortcode styles (theme-independent).
   Moved here from the Psyarabic Child theme in v1.1.9 so the
   shortcode blocks (TOC, FAQ, related, share, author box,
   infographics) keep their styling under any theme, including
   Jannah. Colours fall back to the site palette when the theme
   does not define the --wp--preset variables. */

.psyarabic-figure img { max-width: 100%; height: auto; }
.psyarabic-figure figcaption { font-size: .9rem; color: #666; margin-top: .5rem; }

.psyarabic-infographic {
	background: var(--wp--preset--color--sand, #f4ede4);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 2rem 0;
}
.psyarabic-infographic h3 { margin-top: 0; }

/* ---------- Table of contents ---------- */
.psyarabic-toc {
	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0 2rem;
}
.psyarabic-toc > strong { display: block; font-size: 1.1rem; margin-bottom: .5rem; }
.psyarabic-toc ul { margin: 0; padding-inline-start: 1.25rem; }
.psyarabic-toc li { margin: .35rem 0; line-height: 1.7; }
.psyarabic-toc a { text-decoration: none; }
.psyarabic-toc a:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.psyarabic-faq { margin: 2rem 0; }
.psyarabic-faq details {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: .9rem 1.1rem;
	margin-bottom: .7rem;
	background: #fff;
}
.psyarabic-faq summary { cursor: pointer; font-weight: 700; }
.psyarabic-faq summary::marker { color: var(--wp--preset--color--accent, #2a9d8f); }
.psyarabic-faq details p { margin: .6rem 0 0; }

/* ---------- Related posts ---------- */
.psyarabic-related { margin: 3rem 0 1rem; }
.psyarabic-related h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.psyarabic-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.psyarabic-related li { border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; }
.psyarabic-related li img { width: 100%; height: auto; display: block; }
.psyarabic-related li a { display: block; padding: .8rem 1rem 1rem; text-decoration: none; font-weight: 700; line-height: 1.6; }

/* ---------- Share buttons ---------- */
.psyarabic-share ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.psyarabic-share a { display: inline-block; border: 1px solid #ddd; border-radius: 999px; padding: .35rem .9rem; text-decoration: none; font-weight: 700; }
.psyarabic-share a:hover { background: var(--wp--preset--color--sand, #f4ede4); border-color: var(--wp--preset--color--accent, #2a9d8f); }

/* ---------- Author box ---------- */
.psyarabic-author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--wp--preset--color--sand, #f4ede4);
	border-radius: 12px;
	padding: 1.25rem;
	margin: 2rem 0;
}
.psyarabic-author-box img { border-radius: 50%; flex-shrink: 0; }
.psyarabic-author-box strong { display: block; margin-bottom: .25rem; }
.psyarabic-author-box p { margin: 0; }