/* Altabib brand skin for the legacy static pages (doctors/*, specialties/*, etc.).
   Loaded AFTER /styles.css so these overrides win. Purely visual — no content,
   meta, canonical, or structured-data changes, so SEO is unaffected.
   Injected into each legacy page by scripts/merge-legacy.mjs. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap');

:root {
  --al-navy: #003550;
  --al-navy-900: #011c2b;
  --al-teal: #006e6e;
  --al-cyan: #7bf2f2;
  --al-ink: #0c1c26;
  --al-ink-2: #3d5566;
  --al-line: #e4ecf1;
}

body {
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(900px 400px at 100% -5%, rgba(123, 242, 242, 0.12), transparent 60%),
    #f5f9fb !important;
  color: var(--al-ink) !important;
}

/* Breadcrumb bar → branded */
body > nav {
  max-width: 42rem;
  margin: 0 auto;
  color: var(--al-ink-2) !important;
}
body > nav a { color: var(--al-teal) !important; font-weight: 600; }

/* Content column becomes a premium card */
main {
  background: #fff;
  margin: 20px auto 48px !important;
  border-radius: 24px;
  border: 1px solid var(--al-line);
  box-shadow: 0 10px 40px rgba(1, 28, 43, 0.08);
}

/* Headings in brand navy */
h1, h2, h3 { color: var(--al-navy) !important; letter-spacing: -0.2px; }

/* Doctor avatar gets a cyan ring */
img.rounded-full {
  border: 3px solid var(--al-cyan);
  box-shadow: 0 6px 20px rgba(0, 110, 110, 0.18);
}

/* All indigo/blue links → brand teal */
.text-indigo-600, .text-indigo-800, .text-blue-600 { color: var(--al-teal) !important; }

/* Primary phone/CTA button → Altabib gradient */
.dhi-btn-primary {
  background: linear-gradient(135deg, var(--al-teal) 0%, var(--al-navy) 100%) !important;
  box-shadow: 0 8px 30px rgba(0, 110, 110, 0.32) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.dhi-btn-primary:hover { transform: translateY(-2px); }

/* App-download section divider tinted to brand */
main .border-t { border-color: var(--al-line) !important; }