/* ===== StylingCV Arabic Mobile-First Enhancements ===== */
/* Added: 2026-03-11 | Purpose: Mobile-first responsive improvements for /ar/ */

/* === GLOBAL MOBILE-FIRST BASE === */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* Ensure proper viewport behavior */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Arabic font upgrade - Tajawal for better readability */
body[class*="rtl"],
.rtl,
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'Tajawal', 'DINNextLTArabic-Regular', 'Cairo', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: 'Tajawal', 'DINNextLTArabic-Regular', 'Cairo', sans-serif !important;
  font-weight: 700;
}

/* === TOUCH-FRIENDLY TARGETS (min 44px) === */
html[lang="ar"] a,
html[dir="rtl"] a {
  -webkit-tap-highlight-color: transparent;
}

html[lang="ar"] .btn,
html[lang="ar"] button,
html[lang="ar"] input[type="submit"],
html[lang="ar"] .cta-button,
html[lang="ar"] .elementor-button,
html[dir="rtl"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] input[type="submit"] {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
  font-size: 16px;
  touch-action: manipulation;
  cursor: pointer;
}

/* === MOBILE-FIRST TYPOGRAPHY === */
html[lang="ar"] body,
html[dir="rtl"] body {
  font-size: 16px;
  line-height: 1.8;
}

html[lang="ar"] h1, html[dir="rtl"] h1 { font-size: 1.75rem; line-height: 1.4; margin-bottom: 0.75rem; }
html[lang="ar"] h2, html[dir="rtl"] h2 { font-size: 1.5rem; line-height: 1.4; margin-bottom: 0.6rem; }
html[lang="ar"] h3, html[dir="rtl"] h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.5rem; }
html[lang="ar"] p, html[dir="rtl"] p { line-height: 1.9; margin-bottom: 1rem; }

/* === MOBILE IMAGE HANDLING === */
html[lang="ar"] img,
html[dir="rtl"] img {
  max-width: 100%;
  height: auto;
}

/* === MOBILE TABLE RESPONSIVENESS === */
html[lang="ar"] .entry-content table,
html[dir="rtl"] .entry-content table,
html[lang="ar"] .post-content table,
html[dir="rtl"] .post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* === MOBILE NAVIGATION FIXES === */
@media (max-width: 767px) {
  html[lang="ar"] .navbar-header,
  html[dir="rtl"] .navbar-header {
    width: 100%;
    text-align: center;
  }
  
  html[lang="ar"] .attr-nav,
  html[dir="rtl"] .attr-nav {
    margin: 0;
    padding: 8px;
  }
  
  html[lang="ar"] .mega-menu-item,
  html[dir="rtl"] .mega-menu-item {
    width: 100%;
  }
  
  html[lang="ar"] .mega-sub-menu,
  html[dir="rtl"] .mega-sub-menu {
    position: static !important;
    width: 100% !important;
  }
}

/* === HOMEPAGE HERO MOBILE === */
@media (max-width: 767px) {
  html[lang="ar"] .stylingcv-seo-hero h1,
  html[dir="rtl"] .stylingcv-seo-hero h1 {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    padding: 0 8px;
  }
  
  html[lang="ar"] .stylingcv-seo-hero p,
  html[dir="rtl"] .stylingcv-seo-hero p {
    font-size: 0.95rem !important;
    padding: 0 8px;
    line-height: 1.9 !important;
  }
  
  html[lang="ar"] .stylingcv-seo-section h2,
  html[dir="rtl"] .stylingcv-seo-section h2 {
    font-size: 1.3rem !important;
  }
  
  html[lang="ar"] .stylingcv-seo-section ul li,
  html[dir="rtl"] .stylingcv-seo-section ul li {
    font-size: 0.9rem !important;
    line-height: 2 !important;
  }
}

/* === BLOG POST MOBILE IMPROVEMENTS === */
@media (max-width: 767px) {
  html[lang="ar"] .entry-content,
  html[lang="ar"] .post-content,
  html[dir="rtl"] .entry-content,
  html[dir="rtl"] .post-content {
    padding: 0 12px;
    font-size: 15px;
    line-height: 1.9;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  html[lang="ar"] .entry-content h2,
  html[dir="rtl"] .entry-content h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
  }
  
  html[lang="ar"] .entry-content h3,
  html[dir="rtl"] .entry-content h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
  }
  
  /* Internal link CTA blocks - mobile responsive */
  html[lang="ar"] .entry-content div[style*="border-radius:16px"],
  html[dir="rtl"] .entry-content div[style*="border-radius:16px"] {
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0 !important;
    padding: 20px 16px !important;
  }
  
  html[lang="ar"] .entry-content p[style*="border-right:4px"],
  html[dir="rtl"] .entry-content p[style*="border-right:4px"] {
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
}

/* === FOOTER MOBILE === */
@media (max-width: 767px) {
  html[lang="ar"] footer .col-lg-3,
  html[lang="ar"] footer .col-lg-4,
  html[lang="ar"] footer .col-md-3,
  html[lang="ar"] footer .col-md-4,
  html[dir="rtl"] footer .col-lg-3,
  html[dir="rtl"] footer .col-lg-4 {
    width: 100%;
    float: none;
    text-align: center;
    margin-bottom: 24px;
  }
  
  html[lang="ar"] footer ul,
  html[dir="rtl"] footer ul {
    text-align: center;
    padding: 0;
  }
  
  html[lang="ar"] footer .nt-footer ul li,
  html[dir="rtl"] footer .nt-footer ul li {
    float: none;
    display: inline-block;
    margin: 4px 8px;
  }
}

/* === TABLET ENHANCEMENTS (640px+) === */
@media (min-width: 640px) {
  html[lang="ar"] h1, html[dir="rtl"] h1 { font-size: 2rem; }
  html[lang="ar"] h2, html[dir="rtl"] h2 { font-size: 1.75rem; }
  html[lang="ar"] h3, html[dir="rtl"] h3 { font-size: 1.4rem; }
  
  html[lang="ar"] .stylingcv-seo-hero h1,
  html[dir="rtl"] .stylingcv-seo-hero h1 {
    font-size: 1.8rem !important;
  }
}

/* === DESKTOP ENHANCEMENTS (1024px+) === */
@media (min-width: 1024px) {
  html[lang="ar"] h1, html[dir="rtl"] h1 { font-size: 2.5rem; }
  html[lang="ar"] h2, html[dir="rtl"] h2 { font-size: 2rem; }
  html[lang="ar"] h3, html[dir="rtl"] h3 { font-size: 1.5rem; }
  
  html[lang="ar"] .stylingcv-seo-hero h1,
  html[dir="rtl"] .stylingcv-seo-hero h1 {
    font-size: 2.2rem !important;
  }
}

/* === PRINT STYLES === */
@media print {
  html[lang="ar"] .scv-hero,
  html[lang="ar"] .scv-final-cta,
  html[lang="ar"] nav,
  html[lang="ar"] footer {
    display: none !important;
  }
}