/* =========================================================
   BTAA TARJAMA — DESIGN SYSTEM V2
   Global public-site visual layer
   Loaded after page-specific styles.
   Scope: public website only (not /admin).
========================================================= */

:root{
  --bt-navy-950:#07101d;
  --bt-navy-900:#0b1524;
  --bt-navy-850:#101d2e;
  --bt-navy-800:#16263a;
  --bt-gold-500:#e4ab3f;
  --bt-gold-400:#f1c365;
  --bt-gold-100:#fbf0d8;
  --bt-paper:#f6f2e9;
  --bt-paper-2:#fbf9f5;
  --bt-white:#ffffff;
  --bt-ink:#111923;
  --bt-ink-soft:#2b3644;
  --bt-muted:#6d7784;
  --bt-line:rgba(11,21,36,.10);
  --bt-line-strong:rgba(11,21,36,.16);
  --bt-shadow-xs:0 8px 24px rgba(7,16,29,.05);
  --bt-shadow-sm:0 16px 40px rgba(7,16,29,.08);
  --bt-shadow-md:0 26px 70px rgba(7,16,29,.12);
  --bt-radius-sm:14px;
  --bt-radius-md:20px;
  --bt-radius-lg:28px;
  --bt-radius-xl:36px;
  --bt-container:1280px;
  --bt-ease:cubic-bezier(.2,.75,.2,1);
}

html{scroll-padding-top:96px;}
body{
  background:var(--bt-paper-2);
  color:var(--bt-ink);
  font-family:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  width:min(calc(100% - 48px),var(--bt-container));
  margin-inline:auto;
}

body:not(.home-v3) main{
  min-height:55vh;
  overflow:clip;
}

/* ---------- Typography ---------- */
body:not(.home-v3) :is(h1,h2,h3,h4){
  font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;
  color:inherit;
  letter-spacing:-.02em;
  text-wrap:balance;
}
body:not(.home-v3) h1{line-height:1.16;}
body:not(.home-v3) h2{line-height:1.22;}
body:not(.home-v3) :is(p,li){line-height:1.9;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  min-height:78px;
  background:color-mix(in srgb,var(--bt-paper-2) 91%,transparent);
  border-top:3px solid var(--bt-gold-500);
  border-bottom:1px solid var(--bt-line);
  box-shadow:0 10px 30px rgba(7,16,29,.035);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.site-header .nav{
  min-height:75px;
  gap:24px;
}
.site-header .brand{
  flex:0 0 auto;
  min-width:max-content;
}
.site-header .brand img,
.site-header .brand svg{
  width:auto;
  max-width:172px;
  height:44px;
  object-fit:contain;
}
.nav-links{
  gap:6px;
  align-items:center;
}
.nav-links > a:not(.btn){
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 13px;
  border-radius:12px;
  color:#25303d;
  font-size:15px;
  font-weight:600;
  transition:background-color .22s var(--bt-ease),color .22s var(--bt-ease),transform .22s var(--bt-ease);
}
.nav-links > a:not(.btn)::after{display:none!important;}
.nav-links > a:not(.btn):hover{
  background:rgba(228,171,63,.10);
  color:#8b6116;
  transform:translateY(-1px);
}
.nav-links > a:not(.btn).active{
  background:var(--bt-gold-100);
  color:#7b5411;
}
.site-header .btn-primary{
  min-height:44px;
  padding-inline:18px;
  border-radius:13px;
  box-shadow:0 9px 22px rgba(228,171,63,.20);
}
.menu-toggle{
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid var(--bt-line);
  background:var(--bt-white);
  color:var(--bt-navy-950);
  box-shadow:var(--bt-shadow-xs);
}

/* ---------- Buttons ---------- */
.btn,
button:not(.menu-toggle):not(.video-close),
input[type="submit"]{
  font-family:inherit;
}
.btn{
  border-radius:14px;
  font-weight:700;
  transition:transform .22s var(--bt-ease),box-shadow .22s var(--bt-ease),background-color .22s var(--bt-ease),border-color .22s var(--bt-ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-primary,.btn-gold{
  background:linear-gradient(135deg,var(--bt-gold-400),var(--bt-gold-500));
  color:#17130b;
  border-color:transparent;
}
.btn-dark{
  background:var(--bt-navy-950);
  color:#fff;
  box-shadow:0 12px 28px rgba(7,16,29,.14);
}
.btn-outline,.btn-ghost{
  background:rgba(255,255,255,.72);
  border:1px solid var(--bt-line-strong);
  color:var(--bt-ink);
}

/* ---------- Forms ---------- */
body:not(.home-v3) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  min-height:48px;
  border:1px solid var(--bt-line-strong);
  border-radius:14px;
  background:#fff;
  color:var(--bt-ink);
  font-family:inherit;
  font-size:16px;
  box-shadow:inset 0 1px 0 rgba(7,16,29,.015);
  transition:border-color .2s var(--bt-ease),box-shadow .2s var(--bt-ease),background-color .2s var(--bt-ease);
}
body:not(.home-v3) textarea{min-height:150px;resize:vertical;}
body:not(.home-v3) :is(input,select,textarea):focus{
  outline:none;
  border-color:rgba(228,171,63,.82);
  box-shadow:0 0 0 4px rgba(228,171,63,.13);
}
body:not(.home-v3) ::placeholder{color:#98a0a9;opacity:1;}

/* ---------- Internal page heroes: one family ---------- */
:is(.articles-hero,.videos-hero,.jobs-hero,.courses-hero,.sh-hero,.about-hero,.engage-hero,.jp-hero,.job-detail-hero,.course-hero,.post-hero,.careers-hero){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 12%,rgba(228,171,63,.13),transparent 31%),
    radial-gradient(circle at 82% 18%,rgba(101,217,230,.07),transparent 27%),
    linear-gradient(135deg,var(--bt-navy-950),#0a1626 58%,#102033);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.07);
}
:is(.articles-hero,.videos-hero,.jobs-hero,.courses-hero,.sh-hero,.about-hero,.engage-hero,.jp-hero,.job-detail-hero,.course-hero,.post-hero,.careers-hero)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
  pointer-events:none;
}
:is(.articles-hero,.videos-hero,.jobs-hero,.courses-hero,.sh-hero,.about-hero,.engage-hero,.jp-hero,.job-detail-hero,.course-hero,.post-hero,.careers-hero) :is(h1,h2){
  color:#fff;
  font-weight:700;
  letter-spacing:-.035em;
}
:is(.articles-hero,.videos-hero,.jobs-hero,.courses-hero,.sh-hero,.about-hero,.engage-hero,.jp-hero,.job-detail-hero,.course-hero,.post-hero,.careers-hero) p{
  color:rgba(255,255,255,.72);
}

/* ---------- Section rhythm ---------- */
body:not(.home-v3) :is(
  .articles-featured-section,.articles-library-section,
  .videos-featured-section,.videos-library-section,.videos-channel-section,
  .jobs-featured-section,.jobs-search-section,.jobs-list-section,.jobs-employer-section,
  .courses-featured-section,.courses-waitlist-section,
  .sh-section,.about-section,.engage-section,.jp-section,
  .job-detail-content-section,.course-section,.course-intro-section,.post-reading-section,.post-related-section
){
  padding-block:84px;
}

/* ---------- Shared cards ---------- */
:is(
  .articles-featured-card,.articles-list-card,.articles-editorial-card,.articles-bottom-card,
  .videos-featured-card,.videos-card,.videos-channel-card,.videos-screen-card,
  .jobs-featured-card,.jobs-card,.jobs-employer-card,.jobs-signal-card,.jobs-filter-panel,
  .courses-featured-card,.courses-card,.courses-form-card,.courses-method-cards,
  .sh-live-card,.sh-path-card,.sh-final-card,
  .about-pillar-card,.about-person-card,.about-business-card,.about-identity-card,
  .engage-form-card,.engage-info-card,.engage-route-card,.engage-process-card,.engage-note-card,
  .jp-form-shell,.jp-side-card,.jp-process-card,
  .job-detail-company-card,.job-detail-apply-card,.job-detail-related-card,
  .course-enroll-card,.course-related-card,.post-aside-card,.post-related-card,.post-next-card,.post-toc-card
){
  border-radius:var(--bt-radius-md);
  border:1px solid var(--bt-line);
  box-shadow:var(--bt-shadow-sm);
}
:is(
  .articles-list-card,.videos-card,.jobs-card,.courses-card,.sh-path-card,.sh-live-card,
  .about-pillar-card,.engage-route-card,.job-detail-related-card,.course-related-card,.post-related-card
){
  transition:transform .24s var(--bt-ease),box-shadow .24s var(--bt-ease),border-color .24s var(--bt-ease);
}
:is(
  .articles-list-card,.videos-card,.jobs-card,.courses-card,.sh-path-card,.sh-live-card,
  .about-pillar-card,.engage-route-card,.job-detail-related-card,.course-related-card,.post-related-card
):hover{
  transform:translateY(-5px);
  border-color:rgba(228,171,63,.28);
  box-shadow:var(--bt-shadow-md);
}

/* ---------- Section headings ---------- */
:is(
  .articles-section-heading,.videos-section-heading,.jobs-section-heading,.courses-section-heading,
  .sh-section-head,.about-section-head,.engage-section-heading,.jp-section-head,.course-section-heading
) h2{
  font-size:clamp(30px,4vw,50px);
  line-height:1.2;
  letter-spacing:-.035em;
}
:is(
  .articles-section-kicker,.videos-section-kicker,.jobs-section-kicker,.courses-section-kicker,
  .course-section-kicker,.job-detail-section-kicker,.post-section-label
){
  color:#a66f14;
  font-weight:700;
  letter-spacing:.08em;
}

/* ---------- Tables / lists ---------- */
body:not(.home-v3) table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--bt-line);
  border-radius:16px;
  background:#fff;
}
body:not(.home-v3) th{
  background:#f4efe4;
  color:#3e4651;
  font-weight:700;
}
body:not(.home-v3) :is(th,td){padding:14px 16px;border-bottom:1px solid var(--bt-line);}
body:not(.home-v3) tr:last-child td{border-bottom:0;}

/* ---------- Footer ---------- */
.footer{
  position:relative;
  overflow:hidden;
  padding:82px 0 28px;
  background:
    radial-gradient(circle at 12% 0%,rgba(228,171,63,.09),transparent 26%),
    linear-gradient(145deg,#050b13,var(--bt-navy-950) 62%,#0b1726);
  color:#fff;
  border-top:1px solid rgba(228,171,63,.36);
}
.footer::before{
  content:"";
  position:absolute;
  top:0;
  inset-inline:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--bt-gold-500),transparent);
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(290px,1.35fr) repeat(3,minmax(150px,.65fr));
  gap:54px;
  align-items:start;
}
.footer-brand .brand img,.footer-brand .brand svg{height:48px;width:auto;max-width:184px;}
.footer-brand p{
  max-width:440px;
  margin-top:22px;
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.9;
}
.footer h3{
  margin:0 0 18px;
  color:#fff;
  font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;
  font-size:16px;
}
.footer h3::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-top:10px;
  border-radius:999px;
  background:var(--bt-gold-500);
}
.footer a:not(.brand){
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:10px 0;
  color:rgba(255,255,255,.62);
  transition:color .2s var(--bt-ease),transform .2s var(--bt-ease);
}
.footer a:not(.brand):hover{color:#fff;transform:translateX(-3px);}
.footer-channel{
  margin-top:20px!important;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(255,255,255,.04);
}
.footer-bottom{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.42);
  font-size:13px;
}

/* ---------- Focus / accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(228,171,63,.48);
  outline-offset:3px;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .container{width:min(calc(100% - 36px),var(--bt-container));}
  .site-header{min-height:72px;}
  .site-header .nav{min-height:69px;}
  .footer-main{grid-template-columns:1.2fr 1fr 1fr;gap:38px;}
  .footer-brand{grid-column:1/-1;}
  body:not(.home-v3) :is(
    .articles-featured-section,.articles-library-section,
    .videos-featured-section,.videos-library-section,.videos-channel-section,
    .jobs-featured-section,.jobs-search-section,.jobs-list-section,.jobs-employer-section,
    .courses-featured-section,.courses-waitlist-section,
    .sh-section,.about-section,.engage-section,.jp-section,
    .job-detail-content-section,.course-section,.course-intro-section,.post-reading-section,.post-related-section
  ){padding-block:68px;}
}

@media (max-width:860px){
  .site-header .brand img,.site-header .brand svg{height:40px;max-width:154px;}
  .nav-links{
    position:fixed;
    top:74px;
    inset-inline:18px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:16px;
    border:1px solid var(--bt-line);
    border-radius:18px;
    background:rgba(251,249,245,.98);
    box-shadow:0 26px 70px rgba(7,16,29,.18);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  .nav-links > a:not(.btn){width:100%;min-height:48px;padding-inline:15px;}
  .nav-links > .btn{width:100%;justify-content:center;margin-top:4px;}
  .footer-main{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:640px){
  :root{--bt-radius-md:18px;--bt-radius-lg:24px;}
  .container{width:min(calc(100% - 28px),var(--bt-container));}
  html{scroll-padding-top:82px;}
  body:not(.home-v3) :is(h1,h2,h3,h4){text-wrap:pretty;}
  .site-header{min-height:68px;}
  .site-header .nav{min-height:65px;}
  .site-header .brand img,.site-header .brand svg{height:37px;max-width:142px;}
  .menu-toggle{width:42px;height:42px;}
  .nav-links{top:70px;inset-inline:14px;}
  body:not(.home-v3) :is(
    .articles-featured-section,.articles-library-section,
    .videos-featured-section,.videos-library-section,.videos-channel-section,
    .jobs-featured-section,.jobs-search-section,.jobs-list-section,.jobs-employer-section,
    .courses-featured-section,.courses-waitlist-section,
    .sh-section,.about-section,.engage-section,.jp-section,
    .job-detail-content-section,.course-section,.course-intro-section,.post-reading-section,.post-related-section
  ){padding-block:52px;}
  .footer{padding-top:62px;}
  .footer-main{grid-template-columns:1fr;gap:32px;}
  .footer-brand{grid-column:auto;}
  .footer-bottom{margin-top:38px;gap:10px;align-items:flex-start;flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}