/**
 * Custom Font Families
 *
 * Defines CSS custom properties for font families used throughout the theme
 * Following WordPress coding standards and best practices
 */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* Theme Colors */
  --theme-primary: #f2b713;
  --theme-bg: #1e1d1b;
  --theme-bg-light: #2a2927;
}

body,
html {
  font-family: var(--font-sans);
}

.font-serif,
.testimonial-quote {
  font-family: var(--font-serif);
}

code,
pre,
.font-mono {
  font-family: var(--font-mono);
}

/* Custom Scrollbar Styling */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--theme-bg, #1e1d1b);
  border-inline-start: 1px solid rgba(242, 183, 19, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--theme-primary, #f2b713),
    rgba(242, 183, 19, 0.8)
  );
  border-radius: 6px;
  border: 2px solid var(--theme-bg, #1e1d1b);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(242, 183, 19, 1),
    var(--theme-primary, #f2b713)
  );
}

::-webkit-scrollbar-thumb:active {
  background: var(--theme-primary, #f2b713);
}

::-webkit-scrollbar-corner {
  background: var(--theme-bg, #1e1d1b);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary, #f2b713) var(--theme-bg, #1e1d1b);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/**
 * Tajawal Font for Arabic Language Only
 * Applied when language is Arabic (lang="ar" or dir="rtl" with Arabic locale)
 * Works with TranslatePress and standard WordPress RTL
 */
html[lang='ar'] body,
html[lang='ar_AR'] body,
html[lang^='ar'] body {
  font-family: 'Tajawal', var(--font-sans) !important;
}

html[lang='ar'] *,
html[lang='ar_AR'] *,
html[lang^='ar'] * {
  font-family: 'Tajawal', var(--font-sans);
}

/* Fallback: If RTL is active and locale suggests Arabic */
html[dir='rtl'] body {
  font-family: 'Tajawal', var(--font-sans);
}

/* Override for specific elements that might have their own font-family */
html[lang='ar'] .font-serif,
html[lang='ar_AR'] .font-serif,
html[lang^='ar'] .font-serif,
html[dir='rtl'] .font-serif {
  font-family: 'Tajawal', var(--font-serif);
}