/* === Nova Dynamic CSS (Stable) === */

/* Light tokens (always) */
:root{
  --kh-primary: #0aa6a6;
  --kh-secondary: #f2b233;
  --kh-accent: #f2b233;
  --kh-text: #212529;
  --kh-bg: #ffffff;

  --kh-font-body: Cairo;
  --kh-font-heading: Tajawal;
  --kh-body-fs: 16px;
  --kh-body-lh: 30px;

  --kh-radius-sm: 6px;
  --kh-radius-md: 10px;
  --kh-radius-lg: 14px;
  --kh-container: 1400px;

  --kh-footer-bg: #0aa6a6;
  --kh-footer-text: #ffffff;
  --kh-footer-link: #ffffff;
  --kh-footer-radius: 12px;
}

/* Bootstrap subset (light) */
:root,
[data-bs-theme="light"]{
  --bs-primary: #0aa6a6;
  --bs-secondary: #f2b233;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;

  --bs-primary-rgb: 10, 166, 166;
  --bs-secondary-rgb: 242, 178, 51;

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #f2b233;

  --bs-border-color: rgba(0,0,0,.12);
  --bs-border-color-translucent: rgba(0,0,0,.175);
}

/* Elementor globals (optional) */
:root{
  --e-global-color-primary: var(--kh-primary);
  --e-global-color-secondary: var(--kh-secondary);
  --e-global-color-text: var(--kh-text);
  --e-global-color-accent: var(--kh-accent);

  --e-global-typography-primary-font-family: var(--kh-font-heading);
  --e-global-typography-secondary-font-family: var(--kh-font-body);
  --e-global-typography-text-font-family: var(--kh-font-body);
  --e-global-typography-accent-font-family: var(--kh-font-heading);

  --bs-body-font-family: var(--kh-font-body);
}

/* Base */
html, body{direction: rtl;}
body{
  color: var(--kh-text);
  background-color: var(--kh-bg);
  font-family: var(--kh-font-body);
  font-size: var(--kh-body-fs);
  line-height: var(--kh-body-lh);
}
.container, .container-lg, .container-xl, .container-xxl { max-width: var(--kh-container); }

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family: var(--kh-font-heading);
  color: var(--kh-text);
}

/* Links */
a{ color: var(--kh-primary); }
a:hover, a:focus{ color: var(--kh-accent); }

/* Buttons */
.button-theme{
  border-radius: var(--kh-radius-md) !important;
  background-color: var(--kh-primary) !important;
  border-color: var(--kh-primary) !important;
  color:#fff !important;
  font-weight: 600 !important;
}
.button-theme:hover{
  background-color: var(--kh-accent) !important;
  border-color: var(--kh-accent) !important;
  color:#fff !important;
}

/* Inputs */
input[type=text], input[type=email], input[type=number], input[type=password],
select, textarea, .form-control, .elementor-field{
  height: 44px;
  border-radius: var(--kh-radius-sm);
  border: 1px solid rgba(0,0,0,.12);
  background-color: var(--kh-bg);
  color: var(--kh-text);
  padding-inline: 12px;
}
textarea, .elementor-field-textual.elementor-field{
  height:auto;
  min-height: 44px;
}

/* Cards */
.card, .panel, .widget, .elementor-widget-container{
  border-radius: var(--kh-radius-lg);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.blog-card, .post-card{
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.07);
}

/* Footer */
.site-footer{
  background: var(--kh-footer-bg);
  color: var(--kh-footer-text);
  border-top-left-radius: var(--kh-footer-radius);
  border-top-right-radius: var(--kh-footer-radius);
}
.site-footer a{ color: var(--kh-footer-link); }

/* Dark layer (ONLY when theme is dark) */
[data-bs-theme="dark"]{
  --kh-primary: #60a5fa;
  --kh-accent: #34d399;
  --kh-text: #e5e7eb;
  --kh-bg: #222529;

  --bs-primary: #60a5fa;
  --bs-primary-rgb: 96, 165, 250;

  --bs-body-bg: #222529;
  --bs-body-color: #e5e7eb;

  --bs-link-color: #60a5fa;
  --bs-link-hover-color: #34d399;

  --bs-border-color: rgba(255,255,255,.15);
  --bs-border-color-translucent: rgba(255,255,255,.15);

  color-scheme: dark;
}

/* Dark input borders */
[data-bs-theme="dark"] input[type=text],
[data-bs-theme="dark"] input[type=email],
[data-bs-theme="dark"] input[type=number],
[data-bs-theme="dark"] input[type=password],
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .elementor-field{
  border-color: rgba(255,255,255,.18);
}


/* Custom CSS */