/*
Theme Name:   FSC Identity (Jannah Child)
Theme URI:    https://fsc.org.sa/
Description:  إعادة تنسيق بصري (Re-skin) لموقع اتحاد الغرف السعودية وفق الهوية الجديدة — الكحلي والذهبي والرملي وخط Jali Arabic. قالب ابن لقالب Jannah: لا يغيّر أي محتوى أو ترتيب، يغيّر الشكل فقط.
Author:       FSC
Template:     jannah
Version:      1.0.0
Text Domain:  jannah-fsc
*/

/* =========================================================
   1) خط الهوية — Jali Arabic
   ========================================================= */
@font-face{font-family:"Jali Arabic";src:url("assets/fonts/JaliArabic-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jali Arabic";src:url("assets/fonts/JaliArabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jali Arabic";src:url("assets/fonts/JaliArabic-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Jali Arabic";src:url("assets/fonts/JaliArabic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* =========================================================
   2) رموز الهوية البصرية الرسمية
   ========================================================= */
:root{
  --fsc-navy:#002856;
  --fsc-gold:#BC965C;
  --fsc-sand:#D6D1CA;
  --fsc-steel:#4D6784;
  --fsc-gold-2:#D1B486;
  --fsc-sand-2:#E2DFD8;
  --fsc-navy-950:#001B3B;
  --fsc-navy-800:#0A3663;
  --fsc-steel-600:#3A5270;
  --fsc-gold-700:#9A7842;
  --fsc-gold-50:#F6F0E6;
  --fsc-bg:#F7F5F2;
  --fsc-ink:#16283D;
  --fsc-muted:#5C6B7C;
  --fsc-line:rgba(0,40,86,.11);
  --fsc-grad:linear-gradient(120deg,var(--fsc-navy),var(--fsc-steel) 52%,var(--fsc-gold));
  --fsc-grad-soft:linear-gradient(120deg,var(--fsc-navy),#123f72);
  --fsc-grad-gold:linear-gradient(120deg,var(--fsc-gold-700),var(--fsc-gold) 55%,var(--fsc-gold-2));
  --fsc-shadow:0 24px 60px -28px rgba(0,40,86,.30);
  --fsc-shadow-sm:0 10px 30px -18px rgba(0,40,86,.36);
  --fsc-r:18px;
}

/* =========================================================
   3) الأساس — الخط والخلفية
   ========================================================= */
html body,
.wf-active body,
body #tie-wrapper,
body .entry p,
body .entry li,
body input,
body select,
body textarea,
body button{
  font-family:"Jali Arabic",system-ui,-apple-system,"Segoe UI",sans-serif !important;
}
.wf-active .logo-text,
.wf-active h1,.wf-active h2,.wf-active h3,.wf-active h4,.wf-active h5,.wf-active h6,
.wf-active .the-subtitle,
.wf-active #main-nav .main-menu > ul > li > a,
.wf-active blockquote p,
h1,h2,h3,h4,h5,h6,.the-subtitle,.post-title,.entry-title,.section-title{
  font-family:"Jali Arabic",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:600;
}
body{
  background-color:#F7F5F2 !important;
  background-color:var(--fsc-bg) !important;
  color:#16283D;
  color:var(--fsc-ink);
  line-height:1.85;
}
#tie-wrapper{background-color:#F7F5F2 !important;background-color:var(--fsc-bg) !important}
body p,body li,body .entry{color:var(--fsc-ink)}

/* =========================================================
   4) الروابط واللون المميّز (استبدال الأخضر بالكحلي/الذهبي)
   ========================================================= */
a{color:var(--fsc-navy)}
a:hover{color:var(--fsc-gold-700)}
#tie-body .entry a,
#tie-body .comment-list .comment-content a,
#tie-body q a,#tie-body blockquote a{
  color:var(--fsc-navy) !important;
  box-shadow:inset 0 -1px 0 rgba(188,150,92,.55);
}
#tie-body .entry a:hover{color:var(--fsc-gold-700) !important}
#tie-body .post-title a:hover,
#tie-body .widget li a:hover,
#tie-body .mag-box-title h3 a,
#tie-body .block-more-button,
#tie-body a:hover .post-title{color:var(--fsc-gold-700) !important}
::selection{background-color:var(--fsc-navy);color:#fff}
::-moz-selection{background-color:var(--fsc-navy);color:#fff}

/* =========================================================
   5) الهيدر — الشريط العلوي والقائمة الرئيسية
   ========================================================= */
#top-nav,
#top-nav .comp-sub-menu,
#top-nav.fixed-nav{
  background:#001B3B !important;
  background:var(--fsc-navy-950) !important;
  border:0 !important;
  color:#fff;
}
#top-nav *,
#top-nav .top-menu > ul > li > a,
#top-nav .tie-alignleft a,
#top-nav .tie-alignright a,
#top-nav .breaking-news-nav a{color:#EAF0F7 !important}
#top-nav .top-menu > ul > li > a:hover,
#top-nav a:hover{color:var(--fsc-gold-2) !important}
#top-nav .social-icons-item a:hover span{color:var(--fsc-gold-2) !important}

/* في تخطيط الهيدر الحالي يقع الشعار داخل شريط القائمة الكحلي */
#theme-header,
#theme-header .logo-container,
#theme-header .logo-wrapper,
#theme-header .header-layout-1-logo{
  background-color:#0A3663 !important;
  background-color:var(--fsc-navy-800) !important;
  border:0 !important;
}
#theme-header #main-nav,
#theme-header #main-nav.fixed-nav,
#main-nav .main-menu-wrapper,
#theme-header .main-nav-wrapper{
  background:#0A3663 !important;
  background:var(--fsc-grad-soft) !important;
  border:0 !important;
  box-shadow:0 10px 30px -22px rgba(0,40,86,.55);
}
#main-nav .main-menu > ul > li > a,
#main-nav .menu > li > a,
#main-nav .components a,
#main-nav .components .search-bar input,
#main-nav #mobile-menu-icon .menu-text{
  color:#fff !important;
  font-weight:600;
  letter-spacing:.01em;
}
#main-nav .main-menu > ul > li > a:hover,
#main-nav .menu > li:hover > a,
#main-nav .components a:hover{color:var(--fsc-gold-2) !important}
#main-nav .main-menu .menu > li.tie-current-menu,
.main-menu .menu > li.tie-current-menu{
  border-bottom-color:var(--fsc-gold) !important;
}
#main-nav .main-menu .menu > li.tie-current-menu > a{color:var(--fsc-gold-2) !important}
/* القوائم المنسدلة */
#main-nav .menu-sub-content,
#main-nav .mega-menu .mega-menu-block,
#main-nav ul.sub-menu{
  background:#fff !important;
  border-top:3px solid var(--fsc-gold) !important;
  border-radius:0 0 14px 14px;
  box-shadow:var(--fsc-shadow-sm);
}
#main-nav .menu-sub-content a,
#main-nav ul.sub-menu li a{color:var(--fsc-ink) !important}
#main-nav .menu-sub-content a:hover,
#main-nav ul.sub-menu li a:hover{color:var(--fsc-navy) !important;background:var(--fsc-gold-50)}
/* مبدّل اللغة يظهر كزر */
#main-nav .menu-item-language > a,
#top-nav .menu-item-language > a{
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:100px;
  padding:4px 14px !important;
  line-height:1.9;
}
#main-nav .menu-item-language > a:hover{border-color:var(--fsc-gold-2)}

/* الشعار الجديد بألوان الهوية */
#logo img.logo_normal,
#logo img.logo_2x,
#sticky-logo img,
#mobile-header-components #logo img,
.mobile-header-centered #logo img{content:url("assets/img/logo-white.png")}
#logo img,#sticky-logo img{max-height:74px;width:auto}
#footer #footer-logo img,
.site-footer #footer-logo img{content:url("assets/img/logo-white.png")}

/* الهيدر للجوال */
#mobile-menu,
#mobile-header-wrapper,
.mobile-header-components{background:var(--fsc-grad-soft) !important}
#mobile-menu a,#mobile-menu .menu li a,
#mobile-header-wrapper a,
#mobile-menu-icon .menu-text{color:#fff !important}
#mobile-menu a:hover{color:var(--fsc-gold-2) !important}

/* =========================================================
   6) عناوين الأقسام — كحلي مع خط ذهبي
   ========================================================= */
#tie-body .section-title,
#tie-body .the-section-title,
#tie-body .mag-box-title,
#tie-body .mag-box-title h3,
#tie-body .widget-title,
#tie-body .widget-title .the-subtitle,
#tie-body #comments-title,
#tie-body .comment-reply-title{
  color:#002856 !important;
  color:var(--fsc-navy) !important;
  font-weight:700 !important;
  letter-spacing:0;
}
#tie-body .mag-box-title:after,
#tie-body .section-title:after,
#tie-body .widget-title:after,
#tie-body #footer .widget-title:after{
  background:#BC965C !important;
  background:var(--fsc-grad-gold) !important;
  height:3px !important;
  border-radius:3px;
}
#tie-body .section-title-centered .the-section-title:after{background:var(--fsc-grad-gold) !important}

/* =========================================================
   7) البطاقات والصناديق
   ========================================================= */
/* البطاقات: تُطبَّق فقط على الصناديق التي يرسمها القالب أصلاً بإطار،
   ولا تُفرض على الكتل التي يجعلها Jannah بلا إطار (content-only وغيرها) */
#tie-body .container-wrapper,
#tie-body .post-item .post-thumb,
#tie-body .stream-item-mag .post-thumb{
  border-color:var(--fsc-line);
  border-radius:var(--fsc-r);
}
#tie-body .mag-box:not(.content-only) > .container-wrapper,
#tie-body .sidebar .container-wrapper,
#tie-body .widget.container-wrapper:not(.widget-content-only){
  box-shadow:var(--fsc-shadow-sm);
}
#tie-body .content-only > .container-wrapper,
#tie-body .widget-content-only,
#tie-body .tabs-box .container-wrapper,
#tie-body .stream-item-mag .container-wrapper,
#tie-body #footer .container-wrapper{
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:transparent;
}
#tie-body .post-thumb img,
#tie-body .post-thumb,
#tie-body .slide-img img{border-radius:14px}
#tie-body .post-item:hover .post-thumb img,
#tie-body .posts-list-half li:hover .post-thumb img{transform:scale(1.04)}
#tie-body .post-thumb img{transition:transform .5s ease}
#tie-body .post-title,
#tie-body .entry-title{color:var(--fsc-navy)}
#tie-body .post-meta,
#tie-body .post-meta a,
#tie-body .meta-item,
#tie-body .date{color:var(--fsc-muted) !important;font-weight:400}
#tie-body .post-cat,
#tie-body .cat-labels a,
#tie-body span.post-cat-wrap a{
  background:var(--fsc-grad-gold) !important;
  color:#fff !important;
  border-radius:100px !important;
  padding:4px 14px !important;
  font-weight:700;
  box-shadow:none !important;
}

/* =========================================================
   8) الأزرار
   ========================================================= */
#tie-body .button,
#tie-body a.button,
#tie-body .more-link,
#tie-body button,
#tie-body input[type="submit"],
#tie-body .gform_button,
#tie-body .rev-btn,
#tie-body .tie-btn,
#tie-body .block-more-button{
  background:#0A3663 !important;
  background:var(--fsc-grad-soft) !important;
  border:1.5px solid transparent !important;
  color:#fff !important;
  border-radius:100px !important;
  font-weight:700 !important;
  padding:12px 28px !important;
  transition:.25s ease !important;
  box-shadow:none !important;
}
#tie-body .button:hover,
#tie-body a.button:hover,
#tie-body .more-link:hover,
#tie-body button:hover,
#tie-body input[type="submit"]:hover,
#tie-body .gform_button:hover,
#tie-body .rev-btn:hover,
#tie-body .tie-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -12px rgba(0,40,86,.55) !important;
  color:#fff !important;
}
#tie-body .block-more-button{
  background:transparent !important;
  color:var(--fsc-gold-700) !important;
  padding:0 !important;
  border:0 !important;
}

/* =========================================================
   9) الحقول والنماذج (Gravity Forms وغيرها)
   ========================================================= */
#tie-body input[type="text"],
#tie-body input[type="email"],
#tie-body input[type="tel"],
#tie-body input[type="url"],
#tie-body input[type="number"],
#tie-body input[type="search"],
#tie-body input[type="password"],
#tie-body select,
#tie-body textarea,
#tie-body .gform_wrapper input:not([type="submit"]),
#tie-body .gform_wrapper textarea,
#tie-body .gform_wrapper select{
  background:#fff !important;
  border:1.5px solid var(--fsc-line) !important;
  border-radius:14px !important;
  color:var(--fsc-ink) !important;
  padding:12px 16px !important;
  transition:.2s ease;
}
#tie-body input:focus,
#tie-body textarea:focus,
#tie-body select:focus{
  border-color:var(--fsc-gold) !important;
  box-shadow:0 0 0 4px rgba(188,150,92,.15) !important;
  outline:0 !important;
}
#tie-body .gform_wrapper .gfield_label,
#tie-body label{color:var(--fsc-navy);font-weight:600}

/* =========================================================
   10) الفوتر
   ========================================================= */
#footer,
.site-footer,
#footer.dark-skin,
.site-footer.dark-skin,
#site-info,
#footer-widgets-container{
  background:#001B3B !important;
  background:linear-gradient(160deg,var(--fsc-navy-950),var(--fsc-navy) 55%,var(--fsc-navy-800)) !important;
  color:#E2DFD8 !important;
  color:var(--fsc-sand-2) !important;
  border:0 !important;
}
#footer:before,.site-footer:before{background:var(--fsc-grad-gold);height:4px;content:"";position:absolute;inset-inline:0;top:0;display:block}
#footer,.site-footer{position:relative}
#footer .widget-title,
#footer .widget-title .the-subtitle,
#footer h4,#footer h3{color:#fff !important}
#footer a,
.site-footer a,
#footer .widget li a,
#site-info a{color:var(--fsc-sand-2) !important}
#footer a:hover,
.site-footer a:hover,
#footer .widget li a:hover{color:var(--fsc-gold-2) !important}
#footer p,#footer li,#footer .copyright-text,#site-info{color:rgba(226,223,216,.82) !important}
#footer .social-icons-item a,
.site-footer .social-icons-item a{
  background:rgba(255,255,255,.08) !important;
  border-radius:12px !important;
}
#footer .social-icons-item a:hover{background:var(--fsc-gold) !important}
#footer .widget{border-color:rgba(255,255,255,.10) !important}

/* =========================================================
   11) تفاصيل إضافية
   ========================================================= */
#go-to-top,#go-to-top-floating{
  background:var(--fsc-grad-gold) !important;
  color:#fff !important;
  border-radius:14px !important;
}
#tie-body .pagination a,
#tie-body .pages-nav a,
#tie-body .page-numbers{
  border-radius:100px !important;
  border:1.5px solid var(--fsc-line) !important;
  color:var(--fsc-navy) !important;
}
#tie-body .pagination .current,
#tie-body .page-numbers.current,
#tie-body .pagination a:hover{
  background:var(--fsc-grad-soft) !important;
  color:#fff !important;
  border-color:transparent !important;
}
#tie-body #breadcrumb,#tie-body #breadcrumb a{color:var(--fsc-muted) !important}
#tie-body #breadcrumb a:hover{color:var(--fsc-gold-700) !important}
#tie-body blockquote,#tie-body q{
  border-inline-start:4px solid var(--fsc-gold) !important;
  background:var(--fsc-gold-50);
  border-radius:0 14px 14px 0;
  color:var(--fsc-navy);
}
.rtl #tie-body blockquote{border-radius:14px 0 0 14px}
#tie-body .tagcloud a,#tie-body .post-tags a{
  border-radius:100px !important;
  border:1px solid var(--fsc-line) !important;
  color:var(--fsc-navy) !important;
}
#tie-body .tagcloud a:hover,#tie-body .post-tags a:hover{
  background:var(--fsc-navy) !important;color:#fff !important;border-color:transparent !important
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fsc-sand-2)}
::-webkit-scrollbar-thumb{background:var(--fsc-steel);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--fsc-navy)}

/* نمط زخرفي خفيف من الهوية في رأس الصفحات الداخلية */
#tie-body .page-header,
#tie-body .entry-header-outer{
  background-image:url("assets/img/pattern-tile.png");
  background-size:190px;
  background-repeat:repeat;
  background-blend-mode:multiply;
}

/* عنصر القائمة النشط فوق الخلفية الكحلية */
#main-nav .main-menu .menu > li.tie-current-menu > a,
#main-nav .main-menu .menu > li.current-menu-item > a,
#main-nav .main-menu .menu > li:hover > a{
  background:rgba(255,255,255,.10) !important;
  border-radius:12px;
  color:var(--fsc-gold-2) !important;
}
#main-nav .main-menu .menu > li.tie-current-menu{
  border-bottom:3px solid var(--fsc-gold) !important;
}
/* شريط البحث والأيقونات داخل القائمة */
#main-nav .components .search-bar,
#main-nav .components #search{
  background:rgba(255,255,255,.10) !important;
  border-radius:100px !important;
  border:0 !important;
}
#main-nav .components input,
#main-nav .components .fa{color:#fff !important}

/* =========================================================
   اتجاه القائمة الرئيسية: من اليمين إلى اليسار
   قالب Jannah لا يُحمّل ملف RTL، فعناصر القائمة تُرصّ من اليسار
   (‎.header-menu .menu li{float:left}‎). نعكسها هنا لتبدأ من اليمين
   بجوار الشعار، ويبقى ترتيب العناصر كما هو في القائمة.
   ========================================================= */
#main-nav .main-menu.tie-alignleft,
#theme-header .main-menu.tie-alignleft{
  width:auto !important;
  float:right !important;
}
#main-nav #main-nav-menu > ul.menu > li,
#theme-header .header-menu > ul.menu > li{
  float:right !important;
}
/* المكوّنات (البحث) تلي القائمة على يسارها */
#main-nav ul.components,
#theme-header ul.components{float:right}
/* القوائم المنسدلة: تُثبَّت أسفل عنصرها وتُحاذى من اليمين */
#main-nav #main-nav-menu > ul.menu > li:not(.mega-menu),
#theme-header .header-menu > ul.menu > li:not(.mega-menu){
  position:relative;
}
#main-nav #main-nav-menu > ul.menu > li:not(.mega-menu) > .menu-sub-content,
#theme-header .header-menu > ul.menu > li:not(.mega-menu) > .menu-sub-content{
  right:0 !important;
  left:auto !important;
}
/* المستويات الأعمق تُفتح نحو اليسار */
#main-nav .menu-sub-content ul.sub-menu,
#theme-header .menu-sub-content ul.sub-menu{
  right:100% !important;
  left:auto !important;
}
#main-nav .menu-sub-content li,
#main-nav ul.sub-menu li{float:none !important;width:100%}
/* منع التفاف عناوين القائمة الرئيسية على سطرين */
#main-nav #main-nav-menu > ul.menu > li > a,
#theme-header .header-menu > ul.menu > li > a{white-space:nowrap}

/* =========================================================
   تصحيحات RTL — قالب Jannah لا يتضمّن ملف تنسيقات للاتجاه العربي،
   فبعض الحشوات والمحاذيات تبقى مبنيّة على اليسار. نعكسها هنا فقط،
   دون أي تغيير في المحتوى أو ترتيبه.
   ========================================================= */
/* الشريط الذهبي أسفل عنوان القسم يبدأ من اليمين تحت العنوان */
#tie-body .the-global-title:after,
#tie-body .mag-box-title:after,
#tie-body .widget-title:after,
#tie-body .section-title:after,
#tie-body #footer .widget-title:after{
  right:0;
  left:auto;
}
/* عنوان الصندوق إلى اليمين ومسافته إلى اليسار */
#tie-body .mag-box-title h3{
  float:right;
  margin-right:0;
  margin-left:20px;
}
/* المسافة البادئة للقوائم داخل المحتوى تكون من اليمين */
/* القوائم العادية داخل المحتوى فقط — قوائم الاختصارات (checklist وغيرها)
   لها تنسيق RTL جاهز في القالب ولا تُمسّ */
#tie-body .entry ul:not([class]),
#tie-body .entry ol:not([class]),
#tie-body .comment-content ul:not([class]),
#tie-body .comment-content ol:not([class]){
  padding-left:0;
  padding-right:15px;
  margin-left:0;
  margin-right:20px;
}
#tie-body .entry li ul:not([class]),
#tie-body .entry li ol:not([class]),
#tie-body .comment-content li ul:not([class]),
#tie-body .comment-content li ol:not([class]){
  margin:5px 15px 0 0;
}
/* عناصر تُحاذى لليسار افتراضياً في القالب */
#tie-body .subscribe-widget .widget-title,
#tie-body .full-width .entry-header-outer .author-info,
#tie-body .one-column-no-sidebar .entry-header-outer .author-info{
  text-align:right;
}
#tie-body .widget-title-icon{right:auto;left:0}