/* ==========================================================================
   WUJoodi — UX/UI refinement layer (2026-09-24)
   Presentation only: no content, colors, fonts or link changes.
   Loaded after theme CSS + Additional CSS. Remove this file to roll back.
   ========================================================================== */

/* ---------- Keyboard focus (visible, brand accent) ---------- */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible{
  outline:2px solid var(--accent-2, #00C795);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Mobile navigation ---------- */
@media (max-width:960px){
  /* hamburger -> × state (same size/colors) */
  body .menu-toggle{cursor:pointer; -webkit-tap-highlight-color:transparent; min-width:44px; min-height:44px;}
  body .menu-toggle span,
  body .menu-toggle span::before,
  body .menu-toggle span::after{transition:transform .25s ease, background-color .2s ease, top .25s ease;}
  body .menu-toggle.is-open span{background:transparent;}
  body .menu-toggle.is-open span::before{top:0; transform:rotate(45deg);}
  body .menu-toggle.is-open span::after{top:0; transform:rotate(-45deg);}

  /* solid panel directly under the header (top set by JS to real header height) */
  body .main-nav{
    background:var(--bg, #07152E);
    box-shadow:0 1px 0 var(--line, rgba(255,255,255,.08)) inset;
    justify-content:flex-start;
    padding-top:32px;
  }
  body .main-nav li{border-bottom:1px solid var(--line, rgba(255,255,255,.08));}
  body .main-nav li:last-child{border-bottom:none;}
  body .main-nav a{min-height:48px; display:flex; align-items:center; padding:10px 0;}
  body .main-nav a::after{display:none;}

  /* keep the page from scrolling / showing through while the menu is open */
  html.wj-menu-open, html.wj-menu-open body{overflow:hidden;}
  html.wj-menu-open .wa-float{opacity:0; pointer-events:none;}

  /* language switch: bigger hit area, same pill look */
  body .lang-switch a{position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:40px;}
  body .lang-switch a::before{content:""; position:absolute; inset:-6px -2px;}
}

/* ---------- Footer (mobile tap targets + spacing) ---------- */
@media (max-width:900px){
  body .footer-col ul{gap:0;}
  body .footer-col a{display:inline-flex; align-items:center; min-height:44px;}
  body .footer-col h4{margin-bottom:6px;}
  body .footer-grid{row-gap:34px;}
}

/* ---------- Forms: RTL/LTR-correct alignment + comfortable tap sizes ---------- */
body .form-field,
body .form-field label,
body .form-field .field-note{text-align:start;}
body .form-field input,
body .form-field textarea,
body .form-field select{min-height:48px; box-sizing:border-box; max-width:100%;}
body .form-field textarea{min-height:120px;}
body .stepper button{min-width:44px; min-height:44px;}
body #wujoodiContactForm button[type=submit],
body #wujoodiAuditForm button[type=submit]{min-height:52px;}
@media (max-width:600px){
  body .contact-form-box, body .audit-form-box{padding:26px 20px;}
  body .form-field{margin-bottom:18px;}
  body .form-row{margin-bottom:0;}
}

/* ---------- About page (mobile): clear the fixed header + readable steps ---------- */
@media (max-width:600px){
  /* theme/Additional CSS use !important here, so these overrides must too */
  body .wj-about-page .wj-section.wj-about-intro{padding-top:118px !important;}
  body .wj-about-page .wj-process{display:grid !important; grid-template-columns:1fr !important; gap:34px !important;}
  body .wj-about-page .wj-process-dots{display:none !important;}
  body .wj-about-page .wj-process-step{max-width:320px !important; margin-inline:auto !important;}
  body .wj-about-page .wj-step-desc{max-width:280px !important;}
}

/* ---------- Conservative vertical rhythm on phones ---------- */
@media (max-width:600px){
  body section.pad{padding:72px 0;}          /* theme intended 64px; Additional CSS forced 96px */
  body .split-visual{min-height:200px; padding:32px;}
  body .solution-visual{min-height:240px; padding:36px;}
}
@media (min-width:601px) and (max-width:900px){
  body section.pad{padding:84px 0;}
}

/* ---------- Clickable feedback (tap/click, not hover-only) ---------- */
body .btn{-webkit-tap-highlight-color:transparent;}
body .btn:active{transform:translateY(1px);}
body .solution-card:focus-within{box-shadow:var(--glow);}
body .faq-q{cursor:pointer;}
body .faq-q:focus-visible{outline:2px solid var(--accent-2, #00C795); outline-offset:4px;}

/* ---------- Respect reduced-motion preference (normal experience unchanged) ---------- */
@media (prefers-reduced-motion: reduce){
  body .glow-orb,
  body .orbit-ring,
  body .orbit-node,
  body .store-visual,
  body .hero-chart span{animation:none !important;}
  body .btn-primary::after{transition:none;}
}