/*
Theme Name: Psyarabic Child
Theme URI: https://psyarabic.com/
Author: psyarabic.com
Author URI: https://psyarabic.com/
Description: Child theme of Extendable for علم النفس بالعربي — Arabic RTL psychology magazine: clean article typography, Cairo/Tajawal fonts, reading time, table of contents, FAQ and infographic styling. No page builder dependency.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: extendable
Text Domain: psyarabic-child
Tags: rtl, arabic, blog, magazine, psychology, block-theme, full-site-editing
*/

/* ============================================================
   Psyarabic Child — custom styles (loaded after Extendable)
   RTL is native: WordPress loads style-rtl automatically.
   Keep this file lean: layout lives in theme.json + templates.
   ============================================================ */

/* ---------- Article typography ---------- */
.single .entry-content,
.page .entry-content {
	font-size: 1.125rem;
	line-height: 2;
}

.single .entry-content h2 {
	font-size: 1.6rem;
	margin-top: 2.5rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--wp--preset--color--accent, #2a9d8f);
}

.single .entry-content h3 {
	font-size: 1.3rem;
	margin-top: 2rem;
	color: var(--wp--preset--color--primary, #1b2a4a);
}

.single .entry-content p { margin-bottom: 1.4rem; }

.single .entry-content img {
	border-radius: 12px;
}

/* ---------- Infographic / in-article figures ---------- */
.psyarabic-figure,
.single .entry-content figure {
	margin: 2rem auto;
	text-align: center;
}

.psyarabic-figure img { max-width: 100%; height: auto; }

.psyarabic-figure figcaption,
.single .entry-content 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 (from psyarabic-tools plugin) ---------- */
.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 (from psyarabic-tools plugin) ---------- */
.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 (from psyarabic-tools plugin) ---------- */
.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;
}

/* ---------- Post meta line ---------- */
.psyarabic-meta {
	color: #666;
	font-size: .95rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	align-items: center;
}

/* ---------- Archive cards ---------- */
.psyarabic-card .wp-block-post-title a { text-decoration: none; }
.psyarabic-card .wp-block-post-title a:hover { text-decoration: underline; }

/* ---------- Breadcrumbs ---------- */
.psyarabic-breadcrumbs { font-size: .9rem; color: #666; }
.psyarabic-breadcrumbs a { text-decoration: none; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.single .entry-content,
	.page .entry-content { font-size: 1.05rem; }
	.psyarabic-toc { padding: 1rem; }
}

/* ============================================================
   v1.1 — UX / accessibility / speed additions
   Live baseline 2026-11-11: home 278 KB / ~1.9s, article 259 KB /
   ~2.5s, 15–16 scripts + 12 stylesheets (bundle plugins), no
   featured images (old uploads 404). These rules fix what the
   theme can fix without touching content or the database.
   ============================================================ */

/* ---------- Sticky header + anchor offset ---------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 1px 0 rgba(27, 42, 74, .08);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.single .entry-content h2[id],
.single .entry-content h3[id] { scroll-margin-top: 90px; }

/* ---------- Reading progress bar (markup in single.html, JS in functions.php) ---------- */
.psyarabic-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	z-index: 60;
	background: transparent;
	pointer-events: none;
}
.psyarabic-progress > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--accent, #2a9d8f);
}

/* ---------- Back to top ---------- */
.psyarabic-top {
	position: fixed;
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 60;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #1b2a4a);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.psyarabic-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Cards: hover lift, category badge ---------- */
.psyarabic-card {
	transition: transform .18s ease, box-shadow .18s ease;
}
.psyarabic-card:hover {
	transform: translateY(-3px);
}
.psyarabic-card .wp-block-post-featured-image img {
	transition: transform .3s ease;
}
.psyarabic-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.psyarabic-card .taxonomy-category a {
	display: inline-block;
	background: var(--wp--preset--color--sand, #f4ede4);
	color: var(--wp--preset--color--primary, #1b2a4a);
	border-radius: 999px;
	padding: .1rem .7rem;
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
}

/* ---------- 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 (plugin shortcode) ---------- */
.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; }

/* ---------- Focus visibility (keyboard users) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #2a9d8f);
	outline-offset: 2px;
}

/* ---------- Hero on home ---------- */
.psyarabic-hero .wp-block-post-title { font-size: 1.9rem; }
.psyarabic-hero .wp-block-post-featured-image img { border-radius: 12px; }

/* ---------- Print: article only ---------- */
@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.psyarabic-share,
	.psyarabic-related,
	.wp-block-comments,
	.psyarabic-progress,
	.psyarabic-top { display: none !important; }
	.single .entry-content { font-size: 12pt; line-height: 1.9; }
}