/* aam-ui phase 2 (ui2): readable type, one section-title style, calmer header/footer, cards. Loaded after aam-ui.css.
   Uses the tokens from aam-ui.css. Ads, links and markup are untouched. */

/* ---------- Font: IBM Plex Sans Arabic (SIL OFL, self-hosted) when <html> has .font-plex ---------- */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/www/fonts/plex-ar-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/www/fonts/plex-la-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/www/fonts/plex-ar-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/www/fonts/plex-la-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
html.font-plex body,html.font-plex body :not(i):not(.fa):not([class*="flaticon"]):not(code):not(pre){
  font-family:'IBM Plex Sans Arabic','DroidKufi',Tahoma,sans-serif!important}

/* ---------- Content reads right-to-left ----------
   The old theme declares the whole page LTR and right-aligns text, so forms, tools, tables and punctuation
   ran left-to-right. Content becomes RTL; rows that hold the sidebar keep their column order, sliders stay LTR. */
main .container{direction:rtl}
main .row:has(> .ne-sidebar){direction:ltr}
main .row:has(> .ne-sidebar) > *{direction:rtl}
main .owl-carousel,main .owl-stage-outer,main .nivoSlider,main .main-slider1{direction:ltr}
main .owl-item > *,main .nivo-caption,main .main-slider1 .slider-title{direction:rtl}
main input[type=email],main input[type=url],main input[type=tel],main input[type=password],main [dir=ltr],main code,main pre{direction:ltr}
main input[type=email],main input[type=url],main input[type=tel]{text-align:right}
/* Card lists (.media): the theme spaces image and text with margin-left, which in RTL sits on the outer side
   and leaves the title touching the image. Use the start side instead. */
main .container .media .media-body{margin-left:0;margin-inline-start:15px}
main .container .media .media-body.media-margin30{margin-left:0;margin-inline-start:30px}
@media only screen and (max-width:1199px){main .container .media-none--lg .media-body.media-margin30{margin-inline-start:0}}
@media only screen and (max-width:575px){main .container .media-none-xs .media-body.media-margin30{margin-inline-start:0}}
.modal-content{direction:rtl}

/* ---------- Type scale: body 16px, article 17px ---------- */
body{font-size:16px;line-height:1.8}
main p,main li{font-size:16px;line-height:1.9}
#art-body,#art-body p,#art-body li,#art-body td{font-size:17px;line-height:2;color:var(--aam-text)}
#art-body h2{font-size:23px;font-weight:700;line-height:1.6;color:var(--aam-primary);margin:34px 0 14px}
#art-body h3{font-size:19px;font-weight:700;line-height:1.6;color:var(--aam-primary);margin:26px 0 10px}
#art-body a{color:var(--aam-accent);text-decoration:underline;text-underline-offset:3px}
h3.title-medium-dark{font-size:16px!important;line-height:1.7!important;font-weight:700}
h3.title-medium-dark a{color:var(--aam-text)}
h3.title-medium-dark a:hover{color:var(--aam-accent)}
.post-date-dark li,.post-date-dark li a{font-size:13.5px;color:var(--aam-text-2)}

/* ---------- One section-title style (was 8 different colored tabs) ---------- */
.topic-border{margin-bottom:24px}
.topic-border:after{background:var(--aam-border)!important;height:1px!important}
.topic-box-lg{color:var(--aam-primary)!important;background:none!important;height:auto!important;line-height:1.6!important;
  padding:0 0 10px!important;font-size:20px!important;font-weight:700!important;text-align:right!important;
  border-bottom:3px solid var(--aam-accent);z-index:3}
.topic-box-lg:before,.topic-box-lg:after{display:none!important}
html.dark-mode .topic-box-lg{color:#f3f4f6!important}

/* ---------- Header: navy instead of black, larger menu ---------- */
.main-menu-area.bg-primarytextcolor{background:var(--aam-primary)!important}
@media (min-width:992px){
  .main-menu-area .ne-main-menu nav>ul>li>a{font-size:14.5px!important}
  .main-menu-area .ne-main-menu nav>ul>li>a:hover{color:#f3c98b!important}
}
section.bg-accent.border-bottom{background:var(--aam-surface)!important;border-color:var(--aam-border)!important}

/* Desktop dropdowns: deep navy panel with an accent top line instead of a solid orange block (already RTL) */
.header-style1 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu,
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu{background-color:#14202f!important;border-top:3px solid var(--aam-accent)!important;
  box-shadow:0 14px 30px rgba(15,23,42,.28)!important;border-radius:0 0 10px 10px}
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a{color:#e5e7eb!important;font-size:14.5px!important;line-height:1.7!important}
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a:hover,
.header-style1 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a:focus{background:rgba(255,255,255,.07)!important;color:#f3c98b!important}
.header-style1 .main-menu-area .ne-main-menu nav ul .active ul.ne-dropdown-menu .active a{background-color:rgba(255,255,255,.1)!important}

/* Menu icons come after the label in the markup, so in RTL they sat at the end (left), touching the text.
   Put the icon first (right side) with a gap, in the top bar, the dropdowns and the phone menu. */
.main-menu-area .ne-main-menu nav>ul>li>a,
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu>li>a{display:flex!important;align-items:center;gap:8px}
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu>li>a{justify-content:flex-start}
.main-menu-area .ne-main-menu nav>ul>li>a>i,
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu>li>a>i{order:-1;flex:0 0 auto;width:16px;text-align:center;margin:0!important}
.main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu>li>a>i{opacity:.75}
.mean-container .mean-nav ul li a:not(.mean-expand){display:flex!important;align-items:center;gap:8px}
.mean-container .mean-nav ul li a:not(.mean-expand)>i{order:-1;width:16px;text-align:center;margin:0!important}

/* Phone menu (meanmenu) was LTR, left-aligned, 12px: now RTL, 15px, expand toggle on the left */
.mean-container .mean-nav{direction:rtl}
.mean-container .mean-nav ul li a{text-align:right!important;font-size:15px!important;padding:12px 16px!important;width:100%!important;float:none!important;box-sizing:border-box}
.mean-container .mean-nav ul li li a{padding-right:32px!important;font-size:14.5px!important}
.mean-container .mean-nav ul li a.mean-expand{right:auto!important;left:0!important;width:48px!important;padding:12px 0!important;text-align:center!important}

/* ---------- Cards and panels ---------- */
.item-shadow-1,.sidebar-box,.hq-card{background:var(--aam-surface);border:1px solid var(--aam-border);border-radius:12px;box-shadow:none}
.media.mb-30{border-color:var(--aam-border)!important}
.btn,.aam-about-btn,.aam-news-form button{border-radius:8px}

/* ---------- Footer: deep navy instead of black ---------- */
footer.d-print-none{background:#0f1a29!important}
footer .footer-area-top{border-color:rgba(255,255,255,.1)!important}
footer,footer p,footer li,footer a{color:#c9d1db}
footer a:hover{color:#f3c98b!important}

/* ---------- Dark mode keeps its own surfaces ---------- */
html.dark-mode .item-shadow-1,html.dark-mode .sidebar-box,html.dark-mode .hq-card{background:var(--aam-surface);border-color:var(--aam-border)}
html.dark-mode #art-body,html.dark-mode #art-body p,html.dark-mode #art-body li,html.dark-mode #art-body td{color:#e5e7eb}
html.dark-mode #art-body h2,html.dark-mode #art-body h3{color:#f3f4f6}
html.dark-mode h3.title-medium-dark a{color:#e5e7eb}
html.dark-mode section.bg-accent.border-bottom{background:#1a2230!important}