/*
 * Fuel95 – Main Stylesheet
 * Version: 0.9.0
 * RTL-first, Arabic-first
 */

/* ─── 1. DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --f95-orange:      #FF751F;
  --f95-orange-dark: #e0601a;
  --f95-dark:        #111318;
  --f95-light:       #F7F8FA;
  --f95-white:       #FFFFFF;
  --f95-gray-100:    #F3F4F6;
  --f95-gray-200:    #E5E7EB;
  --f95-gray-400:    #9CA3AF;
  --f95-gray-600:    #4B5563;
  --f95-gray-900:    #111827;

  /* Typography */
  --f95-font:        'Cairo', 'Tajawal', Arial, sans-serif;
  --f95-lh:          1.7;

  /* Spacing */
  --f95-gap-xs:   0.5rem;
  --f95-gap-sm:   0.75rem;
  --f95-gap-md:   1rem;
  --f95-gap-lg:   1.5rem;
  --f95-gap-xl:   2rem;
  --f95-gap-2xl:  3rem;
  --f95-gap-3xl:  4rem;

  /* Radii */
  --f95-r-sm:   4px;
  --f95-r-md:   8px;
  --f95-r-lg:   12px;
  --f95-r-xl:   16px;
  --f95-r-full: 9999px;

  /* Shadows */
  --f95-shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --f95-shadow-md:   0 4px 6px rgba(0,0,0,.07);
  --f95-shadow-lg:   0 10px 15px rgba(0,0,0,.08);
  --f95-shadow-card: 0 2px 8px rgba(0,0,0,.08);

  /* Transitions */
  --f95-tx-fast:   0.15s ease;
  --f95-tx:        0.25s ease;
  --f95-tx-slow:   0.4s ease;

  /* Layout */
  --f95-container: 1200px;
  --f95-content:   760px;
  --f95-gutter:    1rem;

  /* Header */
  --f95-header-h:  64px;
}

/* ─── 2. RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { direction: rtl; font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f95-font); font-size: 1rem; line-height: var(--f95-lh); color: var(--f95-dark); background-color: var(--f95-light); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--f95-tx-fast); }
a:hover { color: var(--f95-orange); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; }

.skip-link { position: absolute; top: -9999px; inset-inline-start: 1rem; background: var(--f95-orange); color: var(--f95-white); padding: .5rem 1rem; border-radius: var(--f95-r-md); z-index: 10000; font-size: .875rem; }
.skip-link:focus { top: 1rem; }
.f95-container { width: 100%; max-width: var(--f95-container); margin-inline: auto; padding-inline: var(--f95-gutter); }
.f95-topbar { background: var(--f95-dark); color: var(--f95-gray-200); font-size: .8125rem; padding: .375rem 0; }
.f95-topbar .f95-container { display:flex; align-items:center; justify-content:center; gap:var(--f95-gap-md); }
.f95-topbar__cta { color:var(--f95-orange); font-weight:600; border-bottom:1px solid transparent; }
.f95-topbar__cta:hover { border-color:var(--f95-orange); }
.f95-header { background:var(--f95-white); box-shadow:var(--f95-shadow-sm); position:sticky; top:0; z-index:1000; }
.f95-header__inner { display:flex; align-items:center; gap:var(--f95-gap-lg); height:var(--f95-header-h); }
.f95-header__logo a,.f95-logo-text { display:flex; align-items:center; font-size:1.5rem; font-weight:800; color:var(--f95-dark); white-space:nowrap; }
.f95-header__logo img { max-height:44px; width:auto; }
.f95-nav { margin-inline-start:auto; }
.f95-nav__list { display:flex; align-items:center; gap:var(--f95-gap-sm); flex-wrap:nowrap; }
.f95-nav__list li a { font-size:.9rem; font-weight:600; padding:.25rem .5rem; border-radius:var(--f95-r-sm); white-space:nowrap; transition:background var(--f95-tx-fast),color var(--f95-tx-fast); }
.f95-nav__list li a:hover,.f95-nav__list li.current-menu-item>a { background:var(--f95-gray-100); color:var(--f95-orange); }
.f95-nav__list > li { position:relative; }
.f95-nav__list .menu-item-has-children > a::after { content:"⌄"; display:inline-block; margin-inline-start:.25rem; font-size:.8em; color:var(--f95-gray-400); }
.f95-nav__list .sub-menu { position:absolute; top:calc(100% + .45rem); inset-inline-start:0; min-width:230px; padding:.5rem; background:var(--f95-white); border:1px solid var(--f95-gray-200); border-radius:var(--f95-r-md); box-shadow:var(--f95-shadow-lg); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--f95-tx-fast),transform var(--f95-tx-fast),visibility var(--f95-tx-fast); z-index:1200; }
.f95-nav__list .sub-menu li a { display:block; padding:.55rem .75rem; }
.f95-nav__list li:hover > .sub-menu,.f95-nav__list li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.f95-header__actions { display:flex; align-items:center; gap:var(--f95-gap-sm); margin-inline-start:var(--f95-gap-md); }
.f95-search-toggle,.f95-menu-toggle { background:none; border:none; cursor:pointer; color:var(--f95-dark); padding:.375rem; border-radius:var(--f95-r-sm); display:flex; align-items:center; justify-content:center; transition:background var(--f95-tx-fast); }
.f95-search-toggle:hover,.f95-menu-toggle:hover { background:var(--f95-gray-100); }
.f95-menu-toggle { display:none; }
.f95-menu-toggle__bar { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform var(--f95-tx),opacity var(--f95-tx); }
.f95-menu-toggle__bar + .f95-menu-toggle__bar { margin-top:5px; }
.f95-header-search { border-top:1px solid var(--f95-gray-200); padding:var(--f95-gap-sm) 0; background:var(--f95-white); }
.f95-header-search[hidden] { display:none; }
.f95-mobile-menu { position:fixed; inset:0; z-index:9999; pointer-events:none; visibility:hidden; transition:visibility var(--f95-tx); }
.f95-mobile-menu.is-open { pointer-events:auto; visibility:visible; }
.f95-mobile-menu__overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity var(--f95-tx); }
.f95-mobile-menu.is-open .f95-mobile-menu__overlay { opacity:1; }
.f95-mobile-menu__drawer { position:absolute; inset-inline-end:0; top:0; bottom:0; width:min(300px,85vw); background:var(--f95-white); overflow-y:auto; padding:var(--f95-gap-xl) var(--f95-gap-lg); transform:translateX(-100%); transition:transform var(--f95-tx); }
[dir="rtl"] .f95-mobile-menu__drawer { transform:translateX(100%); }
.f95-mobile-menu.is-open .f95-mobile-menu__drawer { transform:translateX(0); }
.f95-mobile-menu__close { display:block; margin-inline-start:auto; background:none; border:none; font-size:1.25rem; cursor:pointer; padding:.25rem; color:var(--f95-gray-600); margin-bottom:var(--f95-gap-lg); }
.f95-mobile-menu__list { display:flex; flex-direction:column; gap:.25rem; }
.f95-mobile-menu__list li a { display:block; padding:.75rem var(--f95-gap-md); font-size:1rem; font-weight:600; border-radius:var(--f95-r-md); transition:background var(--f95-tx-fast); }
.f95-mobile-menu__list li a:hover { background:var(--f95-gray-100); }
.f95-mobile-menu__list .sub-menu { padding-inline-start:1rem; margin:.15rem 0 .5rem; border-inline-start:2px solid var(--f95-gray-200); }
.f95-mobile-menu__list .sub-menu a { font-size:.9rem; color:var(--f95-gray-600); padding-block:.55rem; }
.search-form { display:flex; gap:0; }
.search-form label { flex:1; }
.search-field { width:100%; padding:.625rem var(--f95-gap-md); border:1.5px solid var(--f95-gray-200); border-radius:var(--f95-r-md) 0 0 var(--f95-r-md); font-family:var(--f95-font); font-size:.9375rem; background:var(--f95-white); color:var(--f95-dark); outline:none; transition:border-color var(--f95-tx-fast); }
[dir="rtl"] .search-field { border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; }
.search-field:focus { border-color:var(--f95-orange); }
.search-submit { background:var(--f95-orange); color:var(--f95-white); border:none; padding:.625rem var(--f95-gap-lg); cursor:pointer; font-family:var(--f95-font); font-size:.9375rem; border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; transition:background var(--f95-tx-fast); white-space:nowrap; }
[dir="rtl"] .search-submit { border-radius:var(--f95-r-md) 0 0 var(--f95-r-md); }
.search-submit:hover { background:var(--f95-orange-dark); }
.f95-btn { display:inline-flex; align-items:center; gap:var(--f95-gap-xs); padding:.625rem 1.25rem; border-radius:var(--f95-r-md); font-family:var(--f95-font); font-size:.9375rem; font-weight:600; cursor:pointer; border:2px solid transparent; transition:background var(--f95-tx-fast),color var(--f95-tx-fast),border-color var(--f95-tx-fast); text-decoration:none; }
.f95-btn--orange { background:var(--f95-orange); color:var(--f95-white); border-color:var(--f95-orange); }
.f95-btn--orange:hover { background:var(--f95-orange-dark); border-color:var(--f95-orange-dark); color:var(--f95-white); }
.f95-btn--outline { background:transparent; border-color:var(--f95-orange); color:var(--f95-orange); }
.f95-btn--outline:hover { background:var(--f95-orange); color:var(--f95-white); }
.f95-grid { display:grid; gap:var(--f95-gap-lg); }
.f95-grid--2 { grid-template-columns:repeat(2,1fr); }
.f95-grid--3 { grid-template-columns:repeat(3,1fr); }
.f95-grid--4 { grid-template-columns:repeat(4,1fr); }
.f95-card { background:var(--f95-white); border-radius:var(--f95-r-lg); overflow:hidden; box-shadow:var(--f95-shadow-card); display:flex; flex-direction:column; min-width:0; }
.f95-card__image-link { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--f95-gray-100); }
.f95-card__image-link img { width:100%; height:100%; object-fit:cover; transition:transform var(--f95-tx); }
.f95-card:hover .f95-card__image-link img { transform:scale(1.03); }
.f95-card__body { padding:var(--f95-gap-md); display:flex; flex-direction:column; gap:var(--f95-gap-sm); }
.f95-card__cat,.f95-hero__cat,.f95-article__cat { color:var(--f95-orange); font-weight:700; font-size:.8125rem; }
.f95-card__title { font-size:1rem; line-height:1.55; }
.f95-card__date { color:var(--f95-gray-400); font-size:.8125rem; }
.f95-hero { padding:var(--f95-gap-2xl) 0; }
.f95-hero__inner { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--f95-gap-2xl); align-items:center; }
.f95-hero__title { font-size:clamp(1.75rem,4vw,3rem); line-height:1.2; margin:.75rem 0; }
.f95-hero__meta { display:flex; gap:var(--f95-gap-md); color:var(--f95-gray-600); font-size:.875rem; margin-bottom:var(--f95-gap-md); flex-wrap:wrap; }
.f95-hero__excerpt { color:var(--f95-gray-600); margin-bottom:var(--f95-gap-lg); }
.f95-hero__image { border-radius:var(--f95-r-xl); overflow:hidden; box-shadow:var(--f95-shadow-lg); }
.f95-hero__image img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.f95-section,.f95-cat-section { padding:var(--f95-gap-2xl) 0; }
.f95-section__header,.f95-cat-section__header { display:flex; align-items:center; justify-content:space-between; gap:var(--f95-gap-md); margin-bottom:var(--f95-gap-xl); border-bottom:3px solid var(--f95-orange); padding-bottom:var(--f95-gap-sm); }
.f95-section__title,.f95-cat-section__title { font-size:1.4rem; font-weight:800; }
.f95-section__more,.f95-cat-section__more { color:var(--f95-orange); font-weight:700; font-size:.875rem; }
.f95-newsletter { background:var(--f95-dark); color:var(--f95-white); padding:var(--f95-gap-3xl) 0; text-align:center; }
.f95-newsletter__title { font-size:1.75rem; margin-bottom:var(--f95-gap-sm); }
.f95-newsletter__subtitle { color:var(--f95-gray-400); margin-bottom:var(--f95-gap-xl); }
.f95-newsletter__form { max-width:560px; margin:auto; display:flex; }
.f95-newsletter__input { flex:1; padding:.75rem 1rem; border:0; border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; font-family:var(--f95-font); }
.f95-newsletter__submit { border:0; background:var(--f95-orange); color:#fff; padding:.75rem 1rem; border-radius:var(--f95-r-md) 0 0 var(--f95-r-md); font-family:var(--f95-font); font-weight:700; }
.f95-social-bar { background:#0d0f13; color:#fff; }
.f95-social-bar__inner { min-height:52px; display:flex; gap:var(--f95-gap-lg); align-items:center; justify-content:center; }
.f95-social-bar__link { color:var(--f95-gray-400); transition:color var(--f95-tx-fast); }
.f95-social-bar__link:hover { color:var(--f95-orange); }
.f95-footer { background:var(--f95-dark); color:var(--f95-white); }
.f95-footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:var(--f95-gap-2xl); padding-block:var(--f95-gap-3xl); }
.f95-footer__brand img { max-height:44px; width:auto; margin-bottom:var(--f95-gap-md); }
.f95-footer__tagline { font-size:.875rem; color:var(--f95-gray-400); line-height:1.65; max-width:280px; }
.f95-footer__col-title { font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--f95-white); margin-bottom:var(--f95-gap-md); }
.f95-footer__links { display:flex; flex-direction:column; gap:var(--f95-gap-sm); }
.f95-footer__links a { font-size:.9rem; color:var(--f95-gray-400); transition:color var(--f95-tx-fast); }
.f95-footer__links a:hover { color:var(--f95-white); }
.f95-footer__newsletter p { font-size:.875rem; color:var(--f95-gray-400); margin-bottom:var(--f95-gap-md); }
.f95-newsletter-form__row { display:flex; gap:0; }
.f95-newsletter-form__input { flex:1; padding:.625rem var(--f95-gap-md); background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12); color:var(--f95-white); font-family:var(--f95-font); font-size:.875rem; border-radius:var(--f95-r-md) 0 0 var(--f95-r-md); outline:none; transition:border-color var(--f95-tx-fast); }
[dir="rtl"] .f95-newsletter-form__input { border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; }
.f95-newsletter-form__input::placeholder { color:var(--f95-gray-600); }
.f95-footer__newsletter .f95-btn--orange { border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; padding:.625rem var(--f95-gap-md); font-size:.875rem; white-space:nowrap; }
[dir="rtl"] .f95-footer__newsletter .f95-btn--orange { border-radius:var(--f95-r-md) 0 0 var(--f95-r-md); }
.f95-footer__bottom { border-top:1px solid rgba(255,255,255,.05); padding:var(--f95-gap-lg) 0; }
.f95-footer__bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--f95-gap-md); }
.f95-footer__copy,.f95-footer__community { font-size:.8125rem; color:var(--f95-gray-600); }
.f95-footer__copy a { color:var(--f95-gray-400); }
.f95-footer__copy a:hover { color:var(--f95-white); }
.f95-single { padding:var(--f95-gap-2xl) 0; }
.f95-single__layout { display:grid; grid-template-columns:1fr 320px; gap:var(--f95-gap-2xl); align-items:start; }
.f95-breadcrumb { display:flex; align-items:center; gap:var(--f95-gap-xs); font-size:.8125rem; color:var(--f95-gray-400); margin-bottom:var(--f95-gap-md); flex-wrap:wrap; }
.f95-breadcrumb a { color:var(--f95-gray-600); }
.f95-breadcrumb a:hover { color:var(--f95-orange); }
.f95-breadcrumb__sep { color:var(--f95-gray-200); }
.f95-article__cat { display:block; color:var(--f95-orange); font-weight:700; font-size:.875rem; margin-bottom:var(--f95-gap-sm); }
.f95-article__title { font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:800; line-height:1.25; margin-bottom:var(--f95-gap-md); }
.f95-article__meta { display:flex; align-items:center; gap:var(--f95-gap-lg); font-size:.875rem; color:var(--f95-gray-600); margin-bottom:var(--f95-gap-xl); flex-wrap:wrap; }
.f95-article__author { font-weight:600; color:var(--f95-dark); }
.f95-article__featured { border-radius:var(--f95-r-xl); overflow:hidden; margin-bottom:var(--f95-gap-xl); }
.f95-article__featured img { width:100%; }
.f95-article__content { font-size:1.0625rem; line-height:1.8; color:var(--f95-gray-900); }
.f95-article__content p { margin-bottom:var(--f95-gap-lg); }
.f95-article__content h2,.f95-article__content h3 { margin:var(--f95-gap-xl) 0 var(--f95-gap-md); color:var(--f95-dark); }
.f95-article__content blockquote { border-inline-start:4px solid var(--f95-orange); padding:var(--f95-gap-md) var(--f95-gap-lg); background:var(--f95-gray-100); border-radius:0 var(--f95-r-md) var(--f95-r-md) 0; margin:var(--f95-gap-xl) 0; font-style:italic; }
.f95-why-matters { background:var(--f95-gray-100); border-inline-start:4px solid var(--f95-orange); border-radius:0 var(--f95-r-lg) var(--f95-r-lg) 0; padding:var(--f95-gap-lg); margin:var(--f95-gap-xl) 0; }
.f95-why-matters__heading { font-size:1rem; font-weight:800; color:var(--f95-orange); margin-bottom:var(--f95-gap-sm); }
.f95-share { display:flex; align-items:center; gap:var(--f95-gap-md); margin:var(--f95-gap-xl) 0; padding:var(--f95-gap-lg) 0; border-top:1px solid var(--f95-gray-200); border-bottom:1px solid var(--f95-gray-200); flex-wrap:wrap; }
.f95-share__link { display:inline-flex; align-items:center; gap:var(--f95-gap-xs); padding:.375rem .75rem; border-radius:var(--f95-r-full); font-size:.8125rem; font-weight:600; transition:opacity var(--f95-tx-fast); }
.f95-share__link:hover { opacity:.85; }
.f95-sidebar { position:sticky; top:calc(var(--f95-header-h) + 1rem); }
.f95-related { padding:var(--f95-gap-2xl) 0; }
.f95-related__title { font-size:1.25rem; font-weight:800; border-bottom:3px solid var(--f95-orange); padding-bottom:var(--f95-gap-sm); margin-bottom:var(--f95-gap-xl); }
.f95-archive { padding:var(--f95-gap-2xl) 0; }
.f95-archive__header { margin-bottom:var(--f95-gap-2xl); padding-bottom:var(--f95-gap-lg); border-bottom:3px solid var(--f95-orange); }
.f95-archive__title { font-size:2rem; font-weight:800; }
.f95-archive__description { color:var(--f95-gray-600); margin-top:var(--f95-gap-sm); }
.f95-archive__grid { margin-bottom:var(--f95-gap-2xl); }
.f95-search-results { padding:var(--f95-gap-2xl) 0; }
.f95-search-results__header { margin-bottom:var(--f95-gap-xl); }
.f95-search-results__title { font-size:1.5rem; font-weight:800; }
.f95-search-results__count { color:var(--f95-gray-600); font-size:.9rem; margin-top:var(--f95-gap-xs); }
.f95-404 { padding:var(--f95-gap-3xl) 0; text-align:center; }
.f95-404__number { font-size:clamp(6rem,20vw,10rem); font-weight:900; color:var(--f95-orange); line-height:1; margin-bottom:var(--f95-gap-md); }
.f95-404__title { font-size:1.75rem; font-weight:800; margin-bottom:var(--f95-gap-md); }
.f95-404__text { color:var(--f95-gray-600); margin-bottom:var(--f95-gap-xl); }
.f95-404__search { max-width:480px; margin-inline:auto; margin-bottom:var(--f95-gap-xl); }
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--f95-gap-sm); padding:var(--f95-gap-xl) 0; flex-wrap:wrap; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 .75rem; border-radius:var(--f95-r-md); font-size:.9rem; font-weight:600; border:1.5px solid var(--f95-gray-200); background:var(--f95-white); color:var(--f95-dark); }
.pagination .page-numbers.current,.pagination .page-numbers:hover { background:var(--f95-orange); border-color:var(--f95-orange); color:var(--f95-white); }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1024px){ .f95-footer__grid{grid-template-columns:1fr 1fr}.f95-single__layout{grid-template-columns:1fr}.f95-sidebar{position:static}.f95-grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:768px){ :root{--f95-gutter:1rem}.f95-nav{display:none}.f95-menu-toggle{display:flex;flex-direction:column}.f95-hero__inner{grid-template-columns:1fr}.f95-hero__image{order:-1}.f95-grid--3,.f95-grid--4{grid-template-columns:repeat(2,1fr)}.f95-footer__grid{grid-template-columns:1fr 1fr;gap:var(--f95-gap-xl)}.f95-footer__bottom-inner{flex-direction:column;text-align:center} }
@media (max-width:600px){ .f95-grid--2,.f95-grid--3,.f95-grid--4{grid-template-columns:1fr}.f95-footer__grid{grid-template-columns:1fr}.f95-hero{padding:var(--f95-gap-xl) 0}.f95-social-bar__inner{gap:var(--f95-gap-md)} }
@media (max-width:480px){ :root{--f95-header-h:56px}.f95-header__inner{gap:var(--f95-gap-sm)} }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #FF751F; outline-offset:3px; }
