/*
JUSOOR Global V2
Approved palette:
Deep Navy #0B1D3A
Elegant Gold #C99A48
Bright Cyan #00BFC8
Soft Sand #F4F2ED
Fonts: Cairo (AR), Montserrat (EN)
*/

:root{
  --jusoor-navy:#0B1D3A;
  --jusoor-gold:#C99A48;
  --jusoor-cyan:#00BFC8;
  --jusoor-sand:#F4F2ED;
  --jusoor-white:#FFFFFF;
  --jusoor-ink:#10233F;
  --jusoor-muted:#667085;
  --jusoor-border:rgba(11,29,58,.12);
  --jusoor-glass:rgba(255,255,255,.78);
  --jusoor-shadow-sm:0 8px 24px rgba(11,29,58,.08);
  --jusoor-shadow-md:0 18px 48px rgba(11,29,58,.14);
  --jusoor-radius-sm:14px;
  --jusoor-radius-md:22px;
  --jusoor-radius-lg:30px;
  --jusoor-max:1200px;
  --jusoor-watermark-image:none;
  --jusoor-watermark-opacity:.08;
  --jusoor-font-ar:"Cairo",Tahoma,Arial,sans-serif;
  --jusoor-font-en:"Montserrat",Arial,sans-serif;
}

/* Global */
html{scroll-behavior:smooth}
body.jusoor-v2{
  margin:0;
  color:var(--jusoor-ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(0,191,200,.08), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(201,154,72,.08), transparent 34rem),
    var(--jusoor-sand);
  font-family:var(--jusoor-font-ar);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.jusoor-v2::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--jusoor-watermark-image);
  background-repeat:no-repeat;
  background-position:center 22%;
  background-size:min(62vw,780px) auto;
  opacity:var(--jusoor-watermark-opacity);
  transform:scaleX(-1);
  filter:saturate(.8) contrast(.94);
}

html[lang^="en"] body.jusoor-v2,
body.jusoor-v2:lang(en){
  font-family:var(--jusoor-font-en);
}

body.jusoor-v2 *,
body.jusoor-v2 *::before,
body.jusoor-v2 *::after{box-sizing:border-box}

body.jusoor-v2 img{max-width:100%;height:auto}
body.jusoor-v2 a{color:inherit}
body.jusoor-v2 p{margin-block:0 1rem}
body.jusoor-v2 h1,
body.jusoor-v2 h2,
body.jusoor-v2 h3,
body.jusoor-v2 h4{
  color:var(--jusoor-navy);
  line-height:1.28;
  letter-spacing:-.015em;
  margin-block:0 1rem;
}
body.jusoor-v2 h1{font-size:clamp(2rem,5vw,4.5rem);font-weight:800}
body.jusoor-v2 h2{font-size:clamp(1.65rem,3vw,2.75rem);font-weight:800}
body.jusoor-v2 h3{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700}

/* Content width */
body.jusoor-v2 main,
body.jusoor-v2 .site-main,
body.jusoor-v2 .wp-site-blocks > main{
  min-height:60vh;
}

body.jusoor-v2 .jusoor-container{
  width:min(calc(100% - 32px),var(--jusoor-max));
  margin-inline:auto;
}

/* Header / navigation: styles the existing WordPress header instead of duplicating it */
body.jusoor-v2 header,
body.jusoor-v2 .site-header,
body.jusoor-v2 #masthead,
body.jusoor-v2 .wp-block-template-part > header{
  position:sticky;
  top:0;
  z-index:999;
  border-bottom:1px solid rgba(255,255,255,.45);
  background:rgba(244,242,237,.82);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 8px 28px rgba(11,29,58,.07);
}

body.jusoor-v2 header nav a,
body.jusoor-v2 .site-header nav a,
body.jusoor-v2 .wp-block-navigation a{
  position:relative;
  text-decoration:none;
  font-weight:700;
  color:var(--jusoor-navy);
  transition:color .2s ease,transform .2s ease;
}

body.jusoor-v2 header nav a:hover,
body.jusoor-v2 header nav a:focus-visible,
body.jusoor-v2 .wp-block-navigation a:hover,
body.jusoor-v2 .wp-block-navigation a:focus-visible{
  color:var(--jusoor-cyan);
}

body.jusoor-v2 header nav a::after,
body.jusoor-v2 .wp-block-navigation a::after{
  content:"";
  position:absolute;
  inset-inline:12% 12%;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--jusoor-gold),var(--jusoor-cyan));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
body.jusoor-v2 header nav a:hover::after,
body.jusoor-v2 header nav a:focus-visible::after,
body.jusoor-v2 .wp-block-navigation a:hover::after,
body.jusoor-v2 .wp-block-navigation a:focus-visible::after{transform:scaleX(1)}

/* Footer */
body.jusoor-v2 footer,
body.jusoor-v2 .site-footer,
body.jusoor-v2 #colophon,
body.jusoor-v2 .wp-block-template-part > footer{
  color:rgba(255,255,255,.9);
  background:
    linear-gradient(145deg,rgba(0,191,200,.08),transparent 35%),
    linear-gradient(180deg,#0B1D3A,#08162D);
  border-top:1px solid rgba(201,154,72,.32);
}
body.jusoor-v2 footer a,
body.jusoor-v2 .site-footer a{color:var(--jusoor-white);text-decoration:none}
body.jusoor-v2 footer a:hover,
body.jusoor-v2 footer a:focus-visible{color:var(--jusoor-cyan)}

/* Buttons */
body.jusoor-v2 .jusoor-btn,
body.jusoor-v2 .wp-block-button__link,
body.jusoor-v2 input[type="submit"],
body.jusoor-v2 button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close){
  appearance:none;
  border:1px solid rgba(255,255,255,.2);
  border-radius:16px;
  min-height:48px;
  padding:.78rem 1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  text-decoration:none;
  font:700 1rem/1.2 var(--jusoor-font-ar);
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 45%),
    linear-gradient(135deg,var(--jusoor-navy),#153766);
  box-shadow:
    0 10px 24px rgba(11,29,58,.18),
    inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  cursor:pointer;
}
body.jusoor-v2 .jusoor-btn:hover,
body.jusoor-v2 .wp-block-button__link:hover,
body.jusoor-v2 input[type="submit"]:hover,
body.jusoor-v2 button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(11,29,58,.22),inset 0 1px 0 rgba(255,255,255,.25);
}
body.jusoor-v2 .jusoor-btn--primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 45%),
    linear-gradient(135deg,var(--jusoor-cyan),#078b97);
}
body.jusoor-v2 .jusoor-btn--gold{
  color:var(--jusoor-navy);
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%),
    linear-gradient(135deg,#E0BC79,var(--jusoor-gold));
}
body.jusoor-v2 .jusoor-btn--whatsapp{
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),transparent 45%),
    linear-gradient(135deg,#128C7E,#075E54);
}

/* Cards */
body.jusoor-v2 .jusoor-card,
body.jusoor-v2 .wp-block-group.jusoor-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--jusoor-border);
  border-radius:var(--jusoor-radius-md);
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.66));
  box-shadow:var(--jusoor-shadow-sm);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:clamp(1.1rem,2vw,1.7rem);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.jusoor-v2 .jusoor-card::before{
  content:"";
  position:absolute;
  width:90px;height:90px;
  inset-inline-end:-32px;
  top:-32px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,191,200,.18),transparent 70%);
}
body.jusoor-v2 .jusoor-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--jusoor-shadow-md);
  border-color:rgba(0,191,200,.26);
}

/* Hero */
body.jusoor-v2 .jusoor-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(calc(100% - 32px),var(--jusoor-max));
  margin:clamp(1rem,3vw,2rem) auto;
  padding:clamp(2rem,6vw,5.5rem);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--jusoor-radius-lg);
  background:
    linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,255,255,.58)),
    radial-gradient(circle at 0 0,rgba(0,191,200,.12),transparent 40%);
  box-shadow:var(--jusoor-shadow-md);
}
body.jusoor-v2 .jusoor-hero::after{
  content:"";
  position:absolute;
  inset-inline-end:-8%;
  bottom:-22%;
  width:min(50vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,154,72,.18),transparent 68%);
  z-index:-1;
}

/* Form system */
body.jusoor-v2 input,
body.jusoor-v2 select,
body.jusoor-v2 textarea{
  width:100%;
  min-height:48px;
  border:1px solid rgba(11,29,58,.16);
  border-radius:14px;
  background:rgba(255,255,255,.88);
  color:var(--jusoor-ink);
  padding:.78rem .9rem;
  font:500 1rem/1.4 var(--jusoor-font-ar);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body.jusoor-v2 textarea{min-height:140px;resize:vertical}
body.jusoor-v2 input:focus,
body.jusoor-v2 select:focus,
body.jusoor-v2 textarea:focus{
  border-color:var(--jusoor-cyan);
  box-shadow:0 0 0 4px rgba(0,191,200,.13);
  background:#fff;
}
body.jusoor-v2 label{font-weight:700;color:var(--jusoor-navy)}

/* Opportunity cards */
body.jusoor-v2 .jusoor-opportunity{
  display:grid;
  gap:1rem;
  border-inline-start:4px solid var(--jusoor-gold);
}
body.jusoor-v2 .jusoor-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
body.jusoor-v2 .jusoor-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(11,29,58,.12);
  background:rgba(255,255,255,.7);
  color:var(--jusoor-navy);
  font-size:.84rem;
  font-weight:700;
}

/* A11y */
body.jusoor-v2 :focus-visible{
  outline:3px solid var(--jusoor-cyan);
  outline-offset:3px;
}
body.jusoor-v2 .screen-reader-text:focus,
body.jusoor-v2 .skip-link:focus{
  clip:auto!important;
  clip-path:none!important;
  width:auto!important;
  height:auto!important;
  padding:.7rem 1rem!important;
  top:12px!important;
  inset-inline-start:12px!important;
  z-index:99999!important;
  background:#fff!important;
  color:var(--jusoor-navy)!important;
  border-radius:12px!important;
  box-shadow:var(--jusoor-shadow-md)!important;
}

/* Utility grids */
body.jusoor-v2 .jusoor-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
body.jusoor-v2 .jusoor-col-4{grid-column:span 4}
body.jusoor-v2 .jusoor-col-6{grid-column:span 6}
body.jusoor-v2 .jusoor-col-8{grid-column:span 8}
body.jusoor-v2 .jusoor-col-12{grid-column:1/-1}

/* Prevent horizontal overflow from old page snippets */
body.jusoor-v2 .wp-site-blocks,
body.jusoor-v2 main,
body.jusoor-v2 .site-content{overflow-x:clip}

/* Responsive */
@media (max-width:900px){
  body.jusoor-v2::before{
    background-size:min(88vw,640px) auto;
    background-position:center 18%;
  }
  body.jusoor-v2 .jusoor-col-4,
  body.jusoor-v2 .jusoor-col-6,
  body.jusoor-v2 .jusoor-col-8{grid-column:1/-1}
  body.jusoor-v2 header,
  body.jusoor-v2 .site-header,
  body.jusoor-v2 #masthead{top:0}
}

@media (max-width:600px){
  body.jusoor-v2 .jusoor-hero{
    width:min(calc(100% - 20px),var(--jusoor-max));
    border-radius:22px;
    padding:1.35rem;
  }
  body.jusoor-v2 .jusoor-btn,
  body.jusoor-v2 .wp-block-button__link{width:100%}
  body.jusoor-v2 h1{font-size:clamp(1.85rem,10vw,2.7rem)}
}

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

/* Print */
@media print{
  body.jusoor-v2::before{display:none}
  body.jusoor-v2 header,
  body.jusoor-v2 footer{position:static;box-shadow:none}
  body.jusoor-v2 .jusoor-btn{box-shadow:none}
}