/* ====================================================
   responsive.css
   Mobile-first breakpoints & responsive overrides
   ==================================================== */

@media (max-width:700px){
  section{padding:80px 0;}
  .wrap{padding:0 20px;}
  .hero-meta-row{gap:28px;}
  nav{padding:16px 20px;}
  .nav-mark{font-size:11px;letter-spacing:.1em;}
}
@media (max-width:480px){
  .hero{padding-top:96px;min-height:auto;padding-bottom:60px;}
  h1.name{font-size:15vw;line-height:1.0;}
  .role-line{font-size:11px;gap:6px 8px;}
  .hero-tagline{font-size:18px;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .btn{justify-content:center;width:100%;padding:16px 20px;}
  .hero-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:54px;}
  .hero-stat .num{font-size:26px;}
  .hero-badges{gap:6px;}
  .badge{font-size:9.5px;padding:5px 9px;letter-spacing:.08em;gap:6px;}
  .badge svg{width:11px;height:11px;}
  section{padding:64px 0;}
  .wrap{padding:0 18px;}
  .sheet-label{font-size:10px;margin-bottom:20px;}
  .about-side{padding:22px;}
  .pcard{padding:22px;}
  .translation-panel{padding:24px;}
  .stack-cols{gap:32px;}
  .contact-wrap h2{font-size:30px;line-height:1.15;}
  .clink{font-size:13px;}
  footer{padding:30px 16px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}
/* ====================================================
   RTL — Arabic direction overrides (html[dir="rtl"])
   ==================================================== */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
html[dir="rtl"] .nav-mark,
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .sheet-label,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .lang-code,
html[dir="rtl"] .pnum,
html[dir="rtl"] .fact-row .k,
html[dir="rtl"] .lang-level,
html[dir="rtl"] .hero-stat .lbl,
html[dir="rtl"] .tag,
html[dir="rtl"] .rname,
html[dir="rtl"] .rdesc,
html[dir="rtl"] .rlang,
html[dir="rtl"] .mini-tag,
html[dir="rtl"] .stamp-code,
html[dir="rtl"] .lang-sw-header,
html[dir="rtl"] .lang-sw-btn {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .role-line {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0;
  font-weight: 600;
}
html[dir="rtl"] .hero-tagline {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(17px, 2.2vw, 24px);
  line-height: 1.8;
  letter-spacing: 0;
}
html[dir="rtl"] .btn {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  font-size: 15px;
}
html[dir="rtl"] .nav-links {
  gap: 26px;
}
html[dir="rtl"] .hero-stat .num {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}
html[dir="rtl"] .hero-stat .lbl {
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}
html[dir="rtl"] p {
  font-family: 'Tajawal', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0;
}
html[dir="rtl"] .about-lead {
  font-family: 'Cairo', sans-serif;
  font-weight: 500;
}
html[dir="rtl"] .pillar h3,
html[dir="rtl"] .pcard h3 {
  font-family: 'Cairo', sans-serif;
  line-height: 1.4;
}
html[dir="rtl"] .clink {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  font-size: 15px;
}
html[dir="rtl"] .footer .quote,
html[dir="rtl"] footer .quote {
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
}
html[dir="rtl"] footer div {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}
/* Flip nav layout for RTL */
html[dir="rtl"] nav {
  flex-direction: row-reverse;
}
html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sheet-label::after {
  background: linear-gradient(270deg, var(--line) 0%, transparent 100%);
}
/* Stamp RTL */
html[dir="rtl"] .stamp-lang.is-ar {
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  direction: rtl;
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
  #cursor-ring, #cursor-dot { display: none !important; }
  body { cursor: auto !important; }
  a, button { cursor: auto !important; }
}

/* ============================================================
   MOBILE DEEP AUDIT — targeted fixes for <600px
   ============================================================ */

/* --- Switcher on mobile: horizontal bar, Arabic label fits --- */
@media (max-width:600px) {
  .lang-switcher {
    left: 0; right: 0; bottom: 0;
    border-radius: 0;
    flex-direction: row;
    justify-content: stretch;
    border-left: none; border-right: none; border-bottom: none;
    border-top: 1px solid var(--line);
    background: rgba(10,13,18,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 80;
  }
  .lang-sw-header { display: none; }
  .lang-sw-btn {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 10px 4px 8px;
    font-size: 10px;
    border-bottom: none;
    border-right: 1px solid var(--line-soft);
    justify-content: center;
    align-items: center;
    letter-spacing: 0;
  }
  .lang-sw-btn:last-child { border-right: none; }
  .lang-sw-btn.active::before {
    left: 0; top: 0; right: 0; bottom: auto;
    width: auto; height: 2px;
    border-radius: 0;
  }
  .lang-sw-flag { font-size: 16px; }
  .lang-sw-dot { display: none; }
  /* Extra bottom padding so content clears the fixed bar */
  body { padding-bottom: 58px; }
}

/* --- Hero name Arabic font --- */
html[dir="rtl"] h1.name {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(44px, 13vw, 90px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  -webkit-text-fill-color: transparent;
}

/* --- Stamp hidden on very small screens --- */
@media (max-width:480px) {
  .stamp { display: none; }
}

/* --- Fix hero CTA buttons on mobile (Arabic RTL) --- */
html[dir="rtl"] .cta-row {
  flex-direction: column;
}

/* --- About grid on mobile --- */
@media (max-width:600px) {
  .about-grid { gap: 32px; }
  .about-side { padding: 18px; }
  .logo-frame { width: 150px; height: 150px; }
}

/* --- Lang cards on small mobile --- */
@media (max-width:400px) {
  .lang-grid { grid-template-columns: 1fr; }
  .lang-card { padding: 20px 16px; }
}

/* --- Project cards on mobile --- */
@media (max-width:600px) {
  .project-grid { grid-template-columns: 1fr; gap: 16px; }
  .pcard { padding: 20px; }
  .pcard h3 { font-size: 18px; }
}

/* --- Repo rows on small screens --- */
@media (max-width:500px) {
  .repo-row { flex-wrap: wrap; gap: 4px; }
  .repo-row .rname { font-size: 12px; }
}

/* --- Stack columns on mobile --- */
@media (max-width:560px) {
  .stack-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Contact section on mobile --- */
@media (max-width:600px) {
  .contact-wrap { flex-direction: column; gap: 28px; }
  .clink { font-size: 13px; padding: 12px 0; }
}

/* --- Pillar grid on very small --- */
@media (max-width:400px) {
  .pillars { grid-template-columns: 1fr; }
}

/* --- Horizon list on mobile --- */
@media (max-width:640px) {
  .horizon-list { grid-template-columns: 1fr; gap: 0; }
}

/* --- Translation panel on mobile --- */
@media (max-width:600px) {
  .translation-panel { padding: 20px; grid-template-columns: 1fr; }
  .translation-panel svg { width: 32px; height: 32px; }
}

/* --- RTL + mobile combined fixes --- */
html[dir="rtl"] .nav-mark {
  font-size: 11px;
  letter-spacing: 0.05em;
}
@media (max-width:600px) {
  html[dir="rtl"] .lang-sw-btn {
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
  }
}

/* ============================================================
   ARABIC WARM GOLD THEME — body.lang-ar
   ============================================================ */
body.lang-ar {
  --accent:        #C2853A;
  --accent-bright: #F0C87A;
  --accent-dim:    #6B4315;
  --teal-bright:   #D4915A;
  --line:          rgba(194,133,58,0.18);
  --line-soft:     rgba(194,133,58,0.09);
}
body.lang-ar #scroll-progress {
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-bright));
  box-shadow: 0 0 8px 1px var(--accent);
}
body.lang-ar #cursor-ring {
  border-color: var(--accent);
  box-shadow: 0 0 10px 1px rgba(194,133,58,0.3);
}
body.lang-ar #cursor-dot {
  background: var(--accent-bright);
  box-shadow: 0 0 6px 2px var(--accent);
}
body.lang-ar .avatar-ring-1 {
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  box-shadow: 0 0 18px 2px rgba(194,133,58,0.25);
}
body.lang-ar .avatar-ring-2 {
  border-bottom-color: var(--accent-bright);
  border-left-color: var(--accent-bright);
}
body.lang-ar .bg-glow {
  background:
    radial-gradient(700px 500px at 12% -5%, rgba(194,133,58,0.09), transparent 60%),
    radial-gradient(800px 600px at 95% 15%, rgba(194,133,58,0.06), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(194,133,58,0.05), transparent 60%);
}

/* ============================================================
   MOBILE ARABIC — center text, Cairo font, clean spacing
   ============================================================ */
@media (max-width: 860px) {
  html[dir="rtl"] .hero-text {
    text-align: center;
  }
  html[dir="rtl"] h1.name {
    text-align: center;
  }
  html[dir="rtl"] .hero-badges {
    justify-content: center;
  }
  html[dir="rtl"] .role-line {
    justify-content: center;
    text-align: center;
  }
  html[dir="rtl"] .hero-tagline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  html[dir="rtl"] .cta-row {
    align-items: center;
  }
  html[dir="rtl"] .hero-meta-row {
    justify-content: center;
  }
  html[dir="rtl"] .sheet-label {
    justify-content: center;
  }
  html[dir="rtl"] .sheet-label::after {
    display: none;
  }
  html[dir="rtl"] .lang-intro p,
  html[dir="rtl"] .about-body p,
  html[dir="rtl"] .about-lead {
    text-align: right;
  }
  html[dir="rtl"] .pillar {
    text-align: right;
  }
  html[dir="rtl"] .h-item {
    flex-direction: row-reverse;
    text-align: right;
  }
  html[dir="rtl"] .fact-row {
    flex-direction: row-reverse;
  }
  html[dir="rtl"] .fact-row .k {
    text-align: right;
  }
  html[dir="rtl"] .fact-row .v {
    text-align: left;
  }
  html[dir="rtl"] .pcard-top {
    flex-direction: row-reverse;
  }
  html[dir="rtl"] .pcard h3,
  html[dir="rtl"] .pcard .sub,
  html[dir="rtl"] .pcard p {
    text-align: right;
  }
  html[dir="rtl"] .stack-row {
    justify-content: flex-end;
  }
  html[dir="rtl"] .tag-list {
    justify-content: flex-end;
  }
  html[dir="rtl"] .repo-row {
    flex-direction: row-reverse;
  }
  html[dir="rtl"] .clink {
    flex-direction: row-reverse;
  }
  html[dir="rtl"] footer {
    direction: rtl;
    text-align: center;
  }
}

/* Desktop RTL tweaks */
html[dir="rtl"] .about-body p { text-align: right; }
html[dir="rtl"] .pillar        { text-align: right; }
html[dir="rtl"] .pcard h3,
html[dir="rtl"] .pcard .sub,
html[dir="rtl"] .pcard p       { text-align: right; }
html[dir="rtl"] .pcard-top     { flex-direction: row-reverse; }
html[dir="rtl"] .h-item        { flex-direction: row-reverse; }
html[dir="rtl"] .fact-row      { flex-direction: row-reverse; }
html[dir="rtl"] .clink         { flex-direction: row-reverse; }
html[dir="rtl"] .repo-row      { flex-direction: row-reverse; }
html[dir="rtl"] .stack-row     { justify-content: flex-end; }
html[dir="rtl"] .tag-list      { justify-content: flex-end; }
html[dir="rtl"] footer         { direction: rtl; }