@font-face{
	font-family: 'ITCHandelGothicArabic';
	src: url('../font/Tajawal-Regular.ttf') format('truetype');
}
@font-face{
	font-family: 'Yuzarsif';
	src: url('../font/Yuzarsif-Regular.ttf') format('truetype');
}
@font-face{
	font-family: 'Amiri';
	src: url('../font/Amiri-Regular.ttf') format('truetype');
}

:root{
	--white: #FFF;
	--black: #000;
	--transformBG: #fffaf6;
	--border: rgba(0,0,0,.2);
	--primary: #775347;
	--primaryHover: rgba(119,83,71,.05);
	--secondery: #fdeedb;
	--seconderyHover: #e4d6c5;
	--thirdly: #c79c78;
	--thirdlyHover: #b38c6c;
	--lightGrey: #f8f8f8;
	--margin: 15px;
	--radius: 8px;
	--transition: 0.46s;
	--pad-x: 12.5%;
}

*,*:before,*:after{
	font-family: 'ITCHandelGothicArabic', serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.swal2-popup { width: 95%; }

body{
	background-color: var(--transformBG);
	display: grid;
	grid-template-areas: "header" "main" "footer";
	gap: 0;
}

body main {
	grid-area: main;
	margin: 0;
	padding: 0;
}

/* ═══════════════════════════════════════════
   ARTICLE HERO — image as background
   ═══════════════════════════════════════════ */
.article-hero {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
}

.article-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.article-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(30,10,5,.82) 0%,
		rgba(40,15,8,.45) 50%,
		rgba(0,0,0,.18) 100%
	);
}

.article-hero-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px var(--pad-x) 28px;
}

.article-hero-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--thirdly);
	color: #fff;
	font-size: 11px;
	padding: 4px 13px;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 12px;
}

.article-hero h1 {
	font-family: 'Yuzarsif', serif;
	font-size: clamp(22px, 3.5vw, 42px);
	color: #fff;
	font-weight: 400;
	line-height: 1.25;
	max-width: 820px;
	margin-bottom: 14px;
}

/* ═══════════════════════════════════════════
   META BAR (date, author) below hero
   ═══════════════════════════════════════════ */
.article-meta-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px var(--pad-x);
	background: #fff;
	border-bottom: 1px solid rgba(119,83,71,.1);
	font-size: 13px;
	color: #888;
}

.article-meta-bar .meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.article-meta-bar .meta-item i { color: var(--thirdly); font-size: 13px; }

.article-meta-bar .meta-item a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.article-meta-bar .meta-item a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   ACTION BAR (opt-btn row)
   ═══════════════════════════════════════════ */
.article-action-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px var(--pad-x);
	background: var(--transformBG);
	border-bottom: 1px solid rgba(119,83,71,.08);
}

.opt-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid rgba(119,83,71,.2);
	background: #fff;
	color: #555;
	font-size: 13px;
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s, transform .15s;
	font-family: 'ITCHandelGothicArabic', serif;
}

.opt-btn i { font-size: 13px; color: var(--thirdly); }

.opt-btn:hover {
	background: var(--secondery);
	border-color: var(--thirdly);
	color: var(--primary);
	transform: translateY(-1px);
}

.opt-btn:hover i { color: var(--primary); }

.opt-btn.report { border-color: rgba(200,50,50,.25); }
.opt-btn.report i { color: #d05252; }
.opt-btn.report:hover { background: rgba(200,50,50,.07); border-color: rgba(200,50,50,.45); color: #b03030; }
.opt-btn.report:hover i { color: #b03030; }

/* ═══════════════════════════════════════════
   ARTICLE BODY
   ═══════════════════════════════════════════ */
main {
	grid-area: main;
}

.article-body-wrap {
	padding: 40px var(--pad-x) 56px;
}

/* rendered markdown / nl2br content */
.article-explain-text {
	font-size: 16.5px;
	line-height: 1.85;
	color: #333;
}

.article-explain-text h1,
.article-explain-text h2,
.article-explain-text h3,
.article-explain-text h4 {
	font-family: 'Yuzarsif', serif;
	color: var(--primary);
	margin: 28px 0 10px;
	line-height: 1.3;
}

.article-explain-text h1 { font-size: 28px; }
.article-explain-text h2 { font-size: 23px; }
.article-explain-text h3 { font-size: 19px; }

.article-explain-text p { margin-bottom: 16px; }

.article-explain-text blockquote {
	border-right: 4px solid var(--thirdly);
	border-left: none;
	margin: 20px 0;
	padding: 14px 18px 14px 12px;
	background: rgba(199,156,120,.08);
	border-radius: 0 8px 8px 0;
	font-family: 'Amiri', serif;
	font-size: 18px;
	color: #555;
	line-height: 1.7;
	direction: rtl;
	text-align: right;
}

.article-explain-text ul,
.article-explain-text ol {
	padding-right: 24px;
	margin-bottom: 16px;
	direction: rtl;
}

.article-explain-text li { margin-bottom: 6px; line-height: 1.75; }

.article-explain-text strong { color: var(--primary); font-weight: 700; }

.article-explain-text em { color: #666; }

.article-explain-text a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-explain-text hr {
	border: none;
	border-top: 1px solid rgba(119,83,71,.15);
	margin: 28px 0;
}

/* Arabic text passages */
.article-explain-text .arabic {
	font-family: 'Amiri', serif;
	font-size: 20px;
	direction: rtl;
	text-align: right;
	line-height: 2;
	color: #3d2218;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer {
	grid-area: footer;
	background-color: var(--primary);
	color: var(--white);
	padding: 32px var(--margin) 16px;
	font-size: 16px;
}

footer .guide {
	margin: 0 var(--pad-x) 20px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin);
}

footer .guide .information { max-width: 100%; }
footer .guide div { flex-grow: 1; }
footer .guide div p { font-size: 15px; line-height: 1.6; }
footer .guide div h4 { font-size: 16px; margin: 6px 0; }

footer .guide div .links {
	margin-left: 6px;
	display: grid;
	gap: 4px;
}

footer .guide div .links a {
	text-decoration: none;
	font-size: 14px;
	color: rgba(255,255,255,.85);
	transition: color .2s;
}

footer .guide div .links a:hover { color: var(--thirdly); }

footer hr {
	margin: 20px var(--pad-x) 12px;
	border: none;
	border-top: 1px solid rgba(255,255,255,.15);
}

footer .copyright {
	margin: 0 var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--margin);
	flex-wrap: wrap;
}

footer .copyright .text p { font-size: 14px; color: rgba(255,255,255,.7); }

footer .copyright .social {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 20px;
}

footer .copyright .social a {
	text-decoration: none;
	color: rgba(255,255,255,.8);
	transition: color var(--transition);
}

footer .copyright .social a:hover { color: var(--secondery); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1000px) {
	:root { --pad-x: 5%; }
	.article-hero { height: 340px; }
}

@media (max-width: 768px) {
	:root { --pad-x: var(--margin); }

	.article-hero { height: 260px; }
	.article-hero h1 { font-size: 20px; }
	.article-hero-content { padding: 20px var(--margin) 16px; }

	.article-meta-bar,
	.article-action-bar { padding-left: var(--margin); padding-right: var(--margin); }

	.article-body-wrap { padding: 28px var(--margin) 40px; }

	.article-explain-text { font-size: 15px; }
	.article-explain-text blockquote { font-size: 16px; }

	.opt-btn span { display: none; }
	.opt-btn { padding: 8px 12px; }

	footer .guide,
	footer hr,
	footer .copyright { margin-left: var(--margin); margin-right: var(--margin); }
}