/*
Theme Name: الزواج الميسر
Theme URI: https://zwajtd.com
Author: مازن
Description: قالب مخصص لمنصة "الزواج الميسر" — هوية بصرية زرقاء/صفراء، بشريط جانبي لاصق قابل للتوسّع (بنفس آلية ruqya-theme)، وصفحة رئيسية متكاملة مع إضافة الزواج الميسر.
Version: 1.0.0
Text Domain: zawaj-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700;900&display=swap');

/* =========================================================
   نظام الألوان — مطابق لهوية إضافة "الزواج الميسر"
   ========================================================= */
:root{
	--blue-deep:#0B3D75;
	--blue:#1768B3;
	--blue-soft:#E8F1FB;
	--blue-line:#C9DEF2;

	--yellow:#F2B705;
	--yellow-deep:#B5840A;
	--yellow-soft:#FDF3D9;
	--yellow-line:#F0DDA0;

	--red:#C0392B;
	--red-soft:#F8E6E3;

	--ink:#16242E;
	--ink-soft:#55636F;
	--bg:#F7F9FC;
	--line:#E1E6ED;
	--white:#FFFFFF;
	--top-header-h:64px;

	--font-display:'Amiri', serif;
	--font-body:'Tajawal', sans-serif;
}

*{ box-sizing:border-box; }
html, body{ height:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:var(--font-body);
	line-height:1.75;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.zt-wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* =========================================================
   الهيدر العلوي
   ========================================================= */
.zt-header{
	position:relative; z-index:60; height:var(--top-header-h);
	background:rgba(255,255,255,0.96);
	border-bottom:1px solid var(--line);
}

.zt-header-bar{
	display:flex; align-items:center; justify-content:space-between; height:100%;
	max-width:1080px; margin:0 auto; padding:0 24px;
}
.zt-brand{ display:flex; align-items:center; gap:10px; }
.zt-brand .zt-mark{
	width:34px; height:34px; border-radius:50%; background:var(--blue-deep);
	display:flex; align-items:center; justify-content:center; color:var(--yellow);
	font-family:var(--font-display); font-weight:700; font-size:18px; flex:none;
}
.zt-brand .zt-name{
	font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--blue-deep);
}

.zt-cta-btn{
	background:var(--yellow); color:var(--ink); font-weight:700; font-size:13.5px;
	padding:9px 18px; border-radius:999px;
}

/* =========================================================
   التخطيط الرئيسي والشريط الجانبي
   (نفس آلية ruqya-theme: شريط لاصق ٨٠px يتوسّع لـ٣٠٠px عند الضغط
   على عنصر له قائمة فرعية، مع طي تلقائي عند الضغط خارجه)
   ========================================================= */
.zt-main-container{
	display:flex; height:calc(100vh - var(--top-header-h)); overflow:hidden;
	position:relative; width:100%; max-width:100vw;
}
body.admin-bar .zt-main-container{ height:calc(100vh - var(--top-header-h) - 32px); }
@media (max-width:782px){
	body.admin-bar .zt-main-container{ height:calc(100vh - var(--top-header-h) - 46px); }
}

.zt-sidebar{
	width:80px; height:100%; overflow-y:auto; overflow-x:hidden;
	background:linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
	transition:width .4s cubic-bezier(.4,0,.2,1);
	z-index:100; box-shadow:5px 0 20px rgba(0,0,0,.15); flex-shrink:0; cursor:pointer;
	border-top-left-radius:15px;
}
.zt-sidebar.expanded{ width:300px; cursor:default; overflow-x:hidden !important; }

.sidebar-menu{ display:flex; flex-direction:column; padding:20px 0; width:100%; }
.sidebar-menu li{ width:100%; position:relative; z-index:1; }

.sidebar-menu a{
	display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;
	margin:5px 6px; border-radius:8px; height:52px; transition:all .3s ease; padding:0;
	position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
	box-shadow:0 3px 8px rgba(0,0,0,.2); overflow:visible;
}
.zt-sidebar.expanded .sidebar-menu a{ justify-content:flex-start; padding-right:20px; overflow:visible; }
.sidebar-menu a:hover{
	background:var(--blue-deep) !important; box-shadow:0 5px 15px rgba(23,104,179,.5) !important;
	transform:translateX(-3px);
}

.zt-sidebar:not(.expanded) .menu-text{
	opacity:1 !important; visibility:visible !important; white-space:normal !important; word-break:break-word;
	text-align:center; line-height:1.2; font-size:10px !important; font-weight:900 !important; width:50px !important;
	padding:4px 2px; transform:none !important;
}
.zt-sidebar.expanded .menu-text{
	opacity:1 !important; visibility:visible !important; font-size:.92rem !important; font-weight:700 !important;
	width:auto !important; white-space:nowrap; transform:none !important; transition-delay:.1s; color:#fff;
}

.sidebar-expand-hint{ text-align:center; color:rgba(255,255,255,.35); margin-top:20px; }
.sidebar-expand-hint svg{ width:18px; height:18px; }
.zt-sidebar.expanded .sidebar-expand-hint{ display:none; }

.sub-menu{ display:none; background:rgba(0,0,0,.25); margin:0; padding:0; width:100%; }
.zt-sidebar.expanded li.open > .sub-menu{ display:block; animation:zt-slideDown .3s ease-out; }
@keyframes zt-slideDown{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }

.sub-menu li a{
	font-size:.95rem; padding:10px 20px; justify-content:flex-start !important;
	border-bottom:1px solid rgba(255,255,255,.05); height:auto !important; min-height:44px !important;
}
.sub-menu-text{ opacity:0; visibility:hidden; white-space:nowrap; transition:all .3s ease; }
.zt-sidebar.expanded .sub-menu-text{ opacity:1; visibility:visible; }

.zt-sidebar.expanded .menu-item-has-children > a::after{
	content:''; position:absolute; left:24px; top:50%; width:7px; height:7px;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform:translateY(-50%) rotate(45deg); opacity:.5; transition:all .3s; background:none !important;
}
.zt-sidebar.expanded li.open > a::after{ transform:translateY(-50%) rotate(-90deg); opacity:1; color:var(--yellow); }
.zt-sidebar:not(.expanded) .menu-item-has-children > a::after{
	content:'' !important; position:absolute !important; bottom:4px !important; right:8px !important; left:8px !important; top:auto !important;
	height:2px !important; width:auto !important; background:linear-gradient(90deg,transparent,var(--yellow),transparent) !important;
	border-radius:2px !important; transform:none !important; opacity:1 !important;
}

/* الحالة النشطة (الصفحة الحالية) */
html body .zt-sidebar li.current-menu-item > a,
html body .zt-sidebar li.current_page_item > a{
	background:rgba(242,183,5,.18) !important; box-shadow:4px 0 0 0 var(--yellow) inset !important; color:var(--yellow) !important;
}
html body .zt-sidebar li.current-menu-ancestor > a,
html body .zt-sidebar li.current-menu-parent > a{
	background:rgba(242,183,5,.22) !important; box-shadow:4px 0 0 0 var(--yellow) inset !important;
}
.zt-sidebar li.current-menu-item > a .menu-text,
.zt-sidebar li.has-active-child > a .menu-text{ color:var(--yellow) !important; }

@media (max-width:768px){
	.zt-sidebar{ height:100%; border-radius:0; }
	.zt-sidebar.expanded{ width:260px; position:fixed; top:0; right:0; height:100vh; z-index:200; }
}

/* =========================================================
   المحتوى العام (صفحات / تدوينات)
   ========================================================= */
.zt-content{ flex:1; min-width:0; height:100%; overflow-y:auto; padding:24px 16px; background:transparent; }

.content-area{
	background:#fff; padding:28px; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,.04);
	max-width:1100px; margin:0 auto; animation:zt-contentFadeIn .4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes zt-contentFadeIn{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } }

.zt-page-title{
	font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,34px);
	color:var(--blue-deep); margin:0 0 24px; padding-bottom:14px; position:relative;
}
.zt-page-title::after{ content:''; position:absolute; bottom:0; right:0; width:60px; height:3px; background:var(--yellow); }

.zt-article{ max-width:760px; margin:0 auto; }
.zt-article img{ border-radius:14px; margin-bottom:18px; }
.zt-article .zt-meta{ color:var(--ink-soft); font-size:13px; margin-bottom:14px; }
.zt-article p{ margin:0 0 16px; }

.zt-card-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:20px; }
.zt-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.zt-card h3{ color:var(--blue-deep); margin:0 0 8px; font-size:17px; }
.zt-card p{ color:var(--ink-soft); font-size:14px; margin:0; }
.zt-card a.zt-more{ display:inline-block; margin-top:10px; font-weight:700; font-size:13.5px; }

@media (max-width:768px){
	.zt-content{ padding:14px 8px; }
	.content-area{ padding:16px 12px; border-radius:10px; }
}

/* =========================================================
   الصفحة الرئيسية
   ========================================================= */
.zt-hero{ padding:64px 24px 30px; text-align:center; }
.zt-eyebrow{
	display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
	color:var(--yellow-deep); margin-bottom:16px;
}
.zt-eyebrow::before, .zt-eyebrow::after{ content:""; width:18px; height:1px; background:var(--yellow); }
.zt-hero h1{
	font-family:var(--font-display); font-weight:700; font-size:clamp(32px,6vw,52px);
	color:var(--blue-deep); margin:0 0 14px;
}
.zt-hero .zt-sub{ max-width:560px; margin:0 auto 30px; color:var(--ink-soft); font-size:16.5px; }

.zt-hadith-card{
	max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--yellow-line);
	border-radius:18px; padding:26px 24px;
}
.zt-hadith-card p{
	font-family:var(--font-display); font-size:21px; color:var(--blue-deep); margin:0;
}
.zt-hadith-card span{ display:block; margin-top:10px; font-size:12.5px; color:var(--ink-soft); }

.zt-balance-zone{ display:flex; justify-content:center; padding:18px 0 4px; }
.zt-balance-svg{ width:min(480px,100%); height:auto; }

.zt-home-section{ padding:60px 24px; }
.zt-home-section.alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zt-home-section .zt-head{ max-width:640px; margin:0 auto 32px; text-align:center; }
.zt-home-section .zt-head h2{
	font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.4vw,32px);
	color:var(--blue-deep); margin:0 0 10px;
}
.zt-home-section .zt-head p{ color:var(--ink-soft); font-size:15.5px; margin:0; }

.zt-steps{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.zt-step{ background:var(--blue-soft); border-radius:16px; padding:22px; text-align:center; }
.zt-step .zt-step-num{
	width:38px; height:38px; border-radius:50%; background:var(--blue-deep); color:#fff;
	display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
	font-family:var(--font-display); font-weight:700;
}
.zt-step h3{ color:var(--blue-deep); font-size:15.5px; margin:0 0 6px; }
.zt-step p{ color:var(--ink-soft); font-size:13.5px; margin:0; }

.zt-final-cta{ text-align:center; padding:70px 24px; background:var(--blue-deep); color:#fff; }
.zt-final-cta h2{ font-family:var(--font-display); font-size:clamp(24px,4vw,34px); margin:0 0 12px; }
.zt-final-cta p{ color:#CFE0F2; max-width:480px; margin:0 auto 26px; }
.zt-final-cta a{
	display:inline-block; background:var(--yellow); color:var(--ink); font-weight:700;
	padding:13px 28px; border-radius:999px;
}

/* =========================================================
   الفوتر
   ========================================================= */
.zt-footer{ background:var(--ink); color:#A9B7C3; text-align:center; padding:26px 24px; font-size:13px; }
.zt-footer b{ color:#fff; }

@media (max-width:640px){
	.zt-hero{ padding:36px 10px 20px; }
	.zt-hero h1{ font-size:30px; }
	.zt-home-section{ padding:36px 10px; }
	.zt-final-cta{ padding:40px 10px; }
}