html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Theme colors */
:root {
  --primary: #E76F51; /* warm terracotta */
  --primary-contrast: #fff;
  --muted: #6c757d;
  --bg: #FAFAFA;
  --card-bg: #ffffff;
}


/* Improve Arabic typography: load Arabic-friendly fonts with swap */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Tajawal:wght@300;400;700&family=Nunito:wght@300;400;600;700&display=swap');

/* Base typography improvements */
html[lang="ar"], body:not(.lang-en) {
  font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body, .rtl body {
    font-family: Cairo, Roboto, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* Use Nunito for English UI when lang toggle sets .lang-en */
body.lang-en {
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

/* Headings readability in Arabic */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

.hero .display-5 { font-weight: 800; letter-spacing: 0.3px }

p { font-size: 1rem; }

/* Slightly larger readable cards text */
.card-body, .lead { font-size: 1.02rem; }

/* Ensure direction-sensitive spacing looks good */
[dir="rtl"] .me-2 { margin-inline-start: 0.5rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-auto { margin-inline-start: 0 !important; margin-inline-end: auto !important; }

/* Fonts: load nice Arabic and Latin fonts from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Nunito:wght@300;400;600;700&display=swap'); */

body.theme-bg {
  background: linear-gradient(180deg, #fff 0%, #fbf7f5 100%);
  color: #222;
  font-family: 'Cairo', 'Nunito', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Cairo', 'Nunito', sans-serif }

.btn { font-family: 'Nunito', sans-serif }

.hero {
  position: relative;
  background-image: linear-gradient(90deg, rgba(231,111,81,0.06), rgba(255,255,255,0.02));
  padding: 4rem 0;
  margin-bottom: 1.5rem;
  color: #fff;
  border-radius: 0 0 0.6rem 0.6rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
  z-index: 0;
}

.home-intro h1 { font-size: 2rem; }

.card {
  background: var(--card-bg);
  border: none;
  border-radius: 0.6rem;
}

.card-img-top { border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem }

.card-body { padding: 1rem }

footer { color: #555 }

/* Increase hero title weight and shadow for better readability */
.hero .display-5 {
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Responsive spacing */
@media (max-width: 767px) {
  .home-intro { text-align: center }
  .home-intro .col-md-6 { margin-bottom: 1rem }
}

/* Dark mode */
body.dark {
  --primary: #FFAD9A;
  background: #0f1720;
  color: #e6eef6;
}

body.dark .navbar {
  background: #0b1220 !important;
}

body.dark .card {
  background: #0b1220;
  color: #e6eef6;
}

body.dark .navbar .nav-link { color: #e6eef6 }
body.dark .navbar-brand { color: var(--primary) }
body.dark footer { color: #9fb3c8 }


/* Ensure readable text in dark mode */
body.dark .container,
body.dark main,
body.dark p,
body.dark .lead,
body.dark .card-text,
body.dark .card-body,
body.dark li,
body.dark .small,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: #e6eef6;
}

/* Stronger hero overlay in dark mode for better contrast */
body.dark .hero::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.7));
}

/* Hero buttons: make them clearly visible in dark mode */
body.dark .hero .btn {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.dark .hero .btn:hover {
  background: #f2f2f2 !important;
}

/* Buttons contrast in dark mode */
body.dark .btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #0b1220 !important;
}

body.dark .btn-outline-primary {
  color: var(--primary) !important;
  border-color: rgba(255,173,154,0.35) !important;
}

/* Links readability */
body.dark a { color: #ffd1c4 }
body.dark a:hover { color: #fff }

/* Fallback image border in dark mode */
body.dark .card-img-top { background: #07101a }

/* Accessibility: ensure focus outlines visible on dark */
body.dark a:focus, body.dark button:focus { outline: 3px solid rgba(255,173,154,0.18); outline-offset: 2px }

/* Language LTR helper */
.lang-en .navbar-nav { direction: ltr }

/* small UI tweaks */
.navbar-brand img { object-fit:cover }

/* Smooth transitions for theme changes */
* { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease }

/* Toggle buttons */
#themeToggle, #langToggle {
  min-width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 6px;
}

/* Accessibility focus */
a:focus, button:focus { outline: 3px solid rgba(38,143,255,0.18); outline-offset: 2px }

/* Responsive hero text */
@media (max-width: 767px) {
  .hero { padding: 3rem 0 }
  .hero h1 { font-size: 1.6rem }
}

/* Footer adjustments in dark mode */
body.dark footer {
  background: #071322; /* dark bluish background */
  border-top-color: rgba(255,255,255,0.06) !important;
}

body.dark footer .container {
  color: #cfe6f6;
}

body.dark footer a { color: #ffd1c4 }
body.dark footer a:hover { color: #fff }
body.dark footer .small { color: #9fb3c8 }

/* Ensure footer links and small text are readable on all widths */
body.dark .text-md-end { color: #cfe6f6 }