/* =========================================================
   BTAA TARJAMA — FINAL SITE QA / POLISH LAYER
   Loaded last. Safe, global public-site refinements only.
========================================================= */

:root{
  --qa-focus:#e4ab3f;
  --qa-header-h:78px;
}

html{
  max-width:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  max-width:100%;
  overflow-x:clip;
}
main,
section,
.container,
:is(.articles-page,.videos-page,.jobs-main,.courses-main,.about-main,.engage-main,.job-publish-page,.job-detail-main,.course-detail-main,.post-page,.start-here-main){
  min-width:0;
}
img,video,canvas,iframe,svg{max-width:100%;}
img{height:auto;}
:is(h1,h2,h3,h4,p,a,span,strong,small,label,li){overflow-wrap:anywhere;}

/* Accessible skip link */
.skip-link{
  position:fixed;
  z-index:2000;
  top:10px;
  inset-inline-start:12px;
  transform:translateY(-160%);
  padding:11px 16px;
  border-radius:12px;
  background:#07101d;
  color:#fff;
  font:700 14px/1.2 "IBM Plex Sans Arabic",sans-serif;
  box-shadow:0 14px 34px rgba(7,16,29,.25);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0);}

/* Keyboard focus — visible, consistent, not noisy for mouse users */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--qa-focus) 82%,white);
  outline-offset:3px;
}

/* Header polish */
.site-header{
  transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background:rgba(251,249,245,.94)!important;
  border-bottom-color:rgba(11,21,36,.10)!important;
  box-shadow:0 12px 34px rgba(7,16,29,.075)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
}
.nav-links > a.is-active:not(.btn),
.nav-links > a[aria-current="page"]:not(.btn){
  background:var(--bt-gold-100,#fbf0d8)!important;
  color:#7b5411!important;
}
.nav-links > a.is-active:not(.btn)::after{display:none!important;}

/* Reading progress belongs to long-form article reading only */
.reading-progress{display:none!important;}
body.post-v1-body .reading-progress{display:block!important;}

/* Reliable tap targets */
.btn,
.menu-toggle,
.video-close,
button,
input[type="submit"],
input[type="button"]{
  min-height:44px;
}

/* Cards/links: keyboard parity with hover */
: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
):focus-within{
  border-color:rgba(228,171,63,.34)!important;
  box-shadow:0 24px 60px rgba(7,16,29,.12)!important;
}

/* Forms: prevent iOS zoom and improve long-value resilience */
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  max-width:100%;
}

/* Modal: keep media usable on short/mobile screens */
.video-modal-dialog{
  max-height:calc(100dvh - 32px);
  overflow:auto;
  overscroll-behavior:contain;
}
.video-frame{background:#000;}
.video-frame iframe{display:block;width:100%;aspect-ratio:16/9;}

/* Footer polish */
.footer a{transition:color .18s ease,opacity .18s ease,transform .18s ease;}
.footer a:hover{color:#f1c365;}
.footer-channel{min-height:44px;}
.footer-bottom{border-top-color:rgba(255,255,255,.10)!important;}

/* Prevent content breakage from long URLs/company names */
:is(.job-detail-page,.jobs-page,.engage-page,.job-publish-v1,.post-v1-body) a,
:is(.job-detail-page,.jobs-page,.engage-page,.job-publish-v1,.post-v1-body) strong{
  overflow-wrap:anywhere;
}

/* Motion remains deliberate and lightweight */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);}
}

@media (max-width:860px){
  :root{--qa-header-h:70px;}
  body.menu-open{overflow:hidden!important;touch-action:none;}
  .nav-links{
    max-height:calc(100dvh - 86px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links > a,
  .nav-links > .btn{flex:0 0 auto;}
}

@media (max-width:640px){
  /* Every field stays >=16px on iOS to avoid automatic viewport zoom */
  body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px!important;}

  .container{width:min(calc(100% - 28px),var(--bt-container,1280px));}

  /* Buttons should wrap rather than overflow on narrow Arabic layouts */
  :is(
    .articles-hero-actions,.videos-hero-actions,.jobs-hero-actions,.courses-hero-actions,
    .about-hero-actions,.sh-hero-actions,.engage-hero-actions,.jp-hero-actions,
    .job-detail-hero-actions,.course-hero-actions,.post-hero-actions,
    .v12-hero-actions,.v13-final-actions,.sh3-hero-actions
  ){
    flex-wrap:wrap!important;
    align-items:stretch;
  }
  :is(
    .articles-hero-actions,.videos-hero-actions,.jobs-hero-actions,.courses-hero-actions,
    .about-hero-actions,.sh-hero-actions,.engage-hero-actions,.jp-hero-actions,
    .job-detail-hero-actions,.course-hero-actions,.post-hero-actions,
    .v12-hero-actions,.v13-final-actions,.sh3-hero-actions
  ) > :is(a,button){
    max-width:100%;
  }

  /* Media never creates accidental horizontal scroll */
  :is(.articles-featured-media,.videos-featured-media,.courses-featured-media,.course-hero-media,.post-hero-media){
    max-width:100%;
    overflow:hidden;
  }

  /* Slightly calmer footer density on phones */
  .footer{padding-bottom:max(24px,env(safe-area-inset-bottom));}
  .footer-main{gap:28px!important;}
}

@media (max-width:430px){
  .container{width:min(calc(100% - 24px),var(--bt-container,1280px));}
  .site-header .brand-word{font-size:.94rem;}
  .site-header .btn-small{padding-inline:14px;}
  .video-modal-dialog{max-height:calc(100dvh - 20px);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  .site-header,.skip-link,.footer a{transition:none!important;}
}