/* ============================================================
   ANAS CPA — Typography Enhancement Layer
   تحسين قابليّة قراءة الخطوط — يُحمَّل بعد styles.css الرئيسي
   ============================================================ */

/* ---------- Bigger base + better line-height for Arabic ---------- */
html { font-size: 17px; } /* was 16 — increases everything proportionally */

@media (max-width: 720px) {
  html { font-size: 16px; }
}

body {
  line-height: 1.85 !important; /* was 1.7 — Arabic needs more breathing room */
  font-weight: 500;             /* was 400 — Cairo at 400 is too thin on small sizes */
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Stronger weight on emphasis */
strong, b { font-weight: 800; }

/* ---------- Lift all "small" text to readable minimum ---------- */
/* Anything <14px gets pushed to 14px — Arabic needs at least this */
p, li, td, th, label, span, div, button, input, textarea, select, a,
.contact-row, .breadcrumb, .footer-col, .footer-bottom, .meta,
.faq-q, .faq-a, .desc, .sub, .label, .pdetail, .req, .legal-meta {
  font-size: max(14px, 1em);
}

/* Footer + small UI elements lifted from 11–13px → 13.5–14px */
.site-footer, .site-footer * { font-size: 14px; line-height: 1.85; }
.site-footer .footer-bottom { font-size: 13px; }
.site-footer h4 { font-size: 15.5px; }

/* Card descriptions, secondary labels */
.contact-card p, .vmv-card p, .perk p, .stat .lbl, .meta {
  font-size: 14px !important;
  line-height: 1.8;
  color: var(--gray-700);
}

/* Hero/eyebrow tags — slightly bigger */
.hero-eyebrow, .section-eyebrow, .num-tag, .weight, .job-tag, .src-tag {
  font-size: 12.5px !important;
  letter-spacing: 0.4px;
  font-weight: 800;
}

/* Form fields — bigger and clearer */
.form-field input, .form-field select, .form-field textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
  font-size: 15px !important;
  line-height: 1.6;
  padding: 12px 14px;
}
.form-field label { font-size: 14px !important; font-weight: 700; }

/* Table content — a bit bigger */
table { font-size: 14.5px; }
table th { font-weight: 800; font-size: 14px; }
caption, .questions-table th, .threshold-table th { font-size: 14px !important; }

/* Long-form articles in /مقالات */
article p, article li, .legal-doc p, .legal-doc li, .nda-section p, .nda-section li {
  font-size: 16px !important;
  line-height: 2;
}

/* Headings — clearer hierarchy */
h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.35; font-weight: 800; }
h2 { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.4; font-weight: 800; }
h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; font-weight: 800; }
h4 { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.5; font-weight: 800; }

/* Buttons — bigger touch targets and clearer text */
.btn, button.btn, a.btn, .cta-btn {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  padding: 11px 22px;
  min-height: 42px;
}
.btn-sm { font-size: 13.5px !important; padding: 8px 14px; min-height: 36px; }
.btn-lg { font-size: 16px !important; padding: 14px 28px; min-height: 50px; }

/* Tooltips, badges, mini-pills should still be smaller but readable */
.pill, .chip, .tag { font-size: 12.5px !important; font-weight: 700; }

/* Numbers (Latin in Arabic context) — use tabular figures */
.stat-num, .num, .pct, .v, .val, .score {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Lift the smallest 11–12px text to 13.5px */
[style*="font-size:11px"], [style*="font-size: 11px"],
[style*="font-size:11.5px"], [style*="font-size:12px"] {
  font-size: 13.5px !important;
}

/* ---------- Better focus rings (a11y) ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Selection color for brand consistency ---------- */
::selection { background: var(--gold-500); color: var(--green-900); }

/* ---------- Print optimizations ---------- */
@media print {
  html { font-size: 12pt; }
  body { line-height: 1.6; }
}