/* DGA كود المنصات — Token Bridge for momrah_theme
 * Maps DGA CSS custom properties to existing --bs-* Bootstrap 5 variables.
 * Loads last in global-styling so it overrides all prior CSS.
 */

:root {
  /* ── DGA Brand Green Scale ── */
  --colors-brand-50:  #F0FAF5;
  --colors-brand-100: #DCFAE9;
  --colors-brand-200: #B9F2D3;
  --colors-brand-300: #84E3B2;
  --colors-brand-400: #47CC87;
  --colors-brand-500: #25935F;
  --colors-brand-600: #1B8354;
  --colors-brand-700: #166A45;
  --colors-brand-800: #14573A;
  --colors-brand-900: #104631;
  --colors-brand-950: #062117;

  /* ── DGA Gray Scale (maps to BS5 grays) ── */
  --colors-gray-50:  #F9FAFB;
  --colors-gray-100: #F3F4F6;
  --colors-gray-200: #E5E7EB;
  --colors-gray-300: #D1D5DB;
  --colors-gray-400: #9CA3AF;
  --colors-gray-500: #6B7280;
  --colors-gray-600: #4B5563;
  --colors-gray-700: #374151;
  --colors-gray-800: #1F2937;
  --colors-gray-900: #111827;

  /* ── Semantic colors ── */
  --colors-text-primary:         var(--colors-gray-900);
  --colors-text-secondary:       var(--colors-gray-700);
  --colors-text-tertiary:        var(--colors-gray-500);
  --colors-text-brand-primary:   var(--colors-brand-800);
  --colors-text-brand-secondary: var(--colors-brand-600);

  /* ── Error / Warning / Success ── */
  --colors-error-50:  #FFF1F3;
  --colors-error-200: #FECDDA;
  --colors-error-600: #D92D20;
  --colors-error-700: #B42318;
  --colors-warning-500: #F79009;
  --colors-success-600: #039855;

  /* ── DGA Spacing (4px grid) ── */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* ── DGA Border Radius ── */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── DGA Typography ── */
  --font-family-ar: "IBM Plex Sans Arabic", IBM, "TheSansArabic", system-ui, -apple-system, sans-serif;

  /* ── DGA Shadows ── */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);

  /* ── Bridge: DGA → Bootstrap 5 variables ── */
  /* Chain through DGA tokens so theme settings overrides propagate to all BS5 components */
  --bs-primary:          var(--colors-brand-600);
  --bs-primary-dark:     var(--colors-brand-700);
  --bs-primary-darken:   var(--colors-brand-900);
  --bs-primary-rgb:      27, 131, 84;
  --bs-link-color:       var(--colors-brand-600);
  --bs-link-hover-color: var(--colors-brand-700);
}

/* ── Global font override to DGA IBM Plex Sans Arabic ── */
body,
p, p *,
h1, h2, h3, h4, h5, h6,
li, td, th, label, span,
.form-control, .form-select,
.btn, button,
input, textarea, select {
  font-family: var(--font-family-ar) !important;
}

/* ── Button border-radius — DGA spec: 6px (radius-sm) ── */
.btn,
a.btn,
button.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
button[type="button"],
button[type="reset"] {
  border-radius: var(--radius-sm) !important;
}

/* Fix any remaining pill-shaped buttons */
.sector-link a {
  border-radius: var(--radius-sm) !important;
}
a.translation-link {
  border-radius: var(--radius-sm) !important;
}

/* ── Link Colors (content areas only — .btn excluded to prevent contrast override) ── */
main a:not(.btn),
.region-content a:not(.btn),
article a:not(.btn),
.node__content a:not(.btn),
.field--type-text-long a:not(.btn),
.field--type-text-with-summary a:not(.btn) {
  color: var(--colors-brand-600);
}
main a:not(.btn):hover,
.region-content a:not(.btn):hover,
article a:not(.btn):hover,
.node__content a:not(.btn):hover {
  color: var(--colors-brand-700);
}
main a:not(.btn):visited,
.region-content a:not(.btn):visited,
article a:not(.btn):visited,
.node__content a:not(.btn):visited {
  color: var(--colors-brand-800);
}
a:focus-visible {
  outline: 3px solid var(--colors-brand-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Form Focus Ring ── */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--colors-brand-600);
  box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.20);
  outline: none;
}

/* ── Pagination ── */
.pagination .page-item.active .page-link {
  background-color: var(--colors-brand-600);
  border-color: var(--colors-brand-600);
}
.pagination .page-link {
  color: var(--colors-brand-600);
}
.pagination .page-link:hover {
  color: var(--colors-brand-700);
  background-color: var(--colors-brand-50);
  border-color: var(--colors-brand-200);
}

/* Paginationjs active — DGA compliant active/hover states */
.paginationjs-pages li.active a {
  color: #fff;
  background-color: var(--colors-brand-600);
}
.paginationjs-pages a:hover {
  background-color: var(--colors-brand-50);
  color: var(--colors-brand-700);
}

/* ── Hero max height per DGA spec (#7) ── */
section:has(.hero-slide),
.hero-slide,
.heeero {
  max-height: 550px !important;
  overflow: hidden;
}

/* ── Cards ── */
.card {
  border-radius: var(--radius-md);
}

/* ── Tabs ── */
.nav-tabs .nav-link.active {
  color: var(--colors-brand-800);
  border-bottom-color: var(--colors-brand-600);
}
.nav-tabs .nav-link:hover {
  color: var(--colors-brand-700);
}

/* ── Dropdown ── */
.dropdown-menu {
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--colors-brand-800);
  background-color: var(--colors-brand-50);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--colors-brand-600);
  color: #fff;
}

/* ── Breadcrumb ── */
.breadcrumb-item.active {
  color: var(--colors-text-tertiary);
}
.breadcrumb-item a {
  color: var(--colors-brand-600);
}

/* ── Alerts ── */
.alert-success {
  background-color: var(--colors-brand-50);
  border-color: var(--colors-brand-200);
  color: var(--colors-brand-800);
}
.alert-danger,
.alert-error {
  background-color: var(--colors-error-50);
  border-color: var(--colors-error-200);
  color: var(--colors-error-700);
}

/* ── Tags/Badges ── */
.badge,
.tag {
  border-radius: var(--radius-full);
}

/* ── Heading weights (DGA spec) ── */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
.section-title { font-weight: 700; }

/* ── Survey colors replacement ── */
.survey-que label {
  color: var(--colors-brand-700) !important;
}
.survey-que legend {
  color: var(--colors-brand-700);
}

/* ── See-more button ── */
.see-more-container .btn {
  color: var(--colors-brand-600);
}
.see-more-container .btn:hover {
  color: var(--colors-brand-700);
}
.see-more-container .btn .arrow:before {
  border-color: var(--colors-brand-600);
}

/* ── btn-primary — DGA colours, all skins + states ────────────────────────
 * Fixes two bugs:
 * 1. "main a:hover" specificity (12) beats ".btn:hover" (11) → text goes green-on-green.
 * 2. ".border-primary !important" overrides --bs-btn-border-color but doesn't touch text.
 * Solution: set both the BS5 custom properties AND explicit color/background/border-color
 * declarations with sufficient specificity to win over any inherited link-color rule.
 * ──────────────────────────────────────────────────────────────────────── */
.btn.btn-primary,
a.btn.btn-primary {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--colors-brand-600);
  --bs-btn-border-color:       var(--colors-brand-600);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--colors-brand-700);
  --bs-btn-hover-border-color: var(--colors-brand-700);
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--colors-brand-900);
  --bs-btn-active-border-color:var(--colors-brand-900);
  --bs-btn-disabled-color:     var(--colors-gray-400);
  --bs-btn-disabled-bg:        var(--colors-gray-100);
  --bs-btn-disabled-border-color:var(--colors-gray-100);
  color: #fff !important;
  background-color: var(--colors-brand-600) !important;
  border-color: var(--colors-brand-600) !important;
}

.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:focus {
  color: #fff !important;
  background-color: var(--colors-brand-700) !important;
  border-color: var(--colors-brand-700) !important;
}

.btn.btn-primary:active,
a.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: var(--colors-brand-900) !important;
  border-color: var(--colors-brand-900) !important;
}

.btn.btn-primary:disabled,
a.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
  color: var(--colors-gray-400) !important;
  background-color: var(--colors-gray-100) !important;
  border-color: var(--colors-gray-100) !important;
}

/* ── btn-outline-primary — fix invalid hover color from skin CSS ───────────
 * body.momra .btn-outline-primary:hover used color:rgba(var(--bs-primary))
 * which is invalid (rgba expects numbers). On hover: solid DGA green bg,
 * white text — matches DGA button spec.
 * ──────────────────────────────────────────────────────────────────────── */
.btn-outline-primary,
a.btn.btn-outline-primary {
  --bs-btn-color:              var(--colors-brand-600);
  --bs-btn-border-color:       var(--colors-brand-600);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--colors-brand-600);
  --bs-btn-hover-border-color: var(--colors-brand-600);
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--colors-brand-700);
  --bs-btn-active-border-color:var(--colors-brand-700);
  --bs-btn-disabled-color:     var(--colors-gray-400);
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color:var(--colors-gray-300);
  color: var(--colors-brand-600) !important;
  background-color: transparent !important;
  border-color: var(--colors-brand-600) !important;
}

.btn-outline-primary:hover,
a.btn.btn-outline-primary:hover,
.btn-outline-primary:focus,
a.btn.btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--colors-brand-600) !important;
  border-color: var(--colors-brand-600) !important;
}

.btn-outline-primary:active,
a.btn.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: var(--colors-brand-700) !important;
  border-color: var(--colors-brand-700) !important;
}

/* ── .border-primary on btn-primary: keep visible border by using brand-700 ─
 * When border-primary !important overrides the button border to brand-600
 * (same as background), make it brand-700 so there's a subtle stroke.
 * ──────────────────────────────────────────────────────────────────────── */
.btn.btn-primary.border-primary,
a.btn.btn-primary.border-primary {
  border-color: var(--colors-brand-700) !important;
}
.btn.btn-primary.border-primary:hover,
a.btn.btn-primary.border-primary:hover {
  border-color: var(--colors-brand-800) !important;
}

/* ── Skin-variant outline hover fix ───────────────────────────────────────
 * main-rtl.css repeats the same invalid `color: rgba(var(--bs-primary))`
 * (rgba expects numbers) for ejar/reverse/sakani skins. Their `body.<skin>`
 * specificity (0,3,0) beats the plain .btn-outline-primary fix above (0,2,0),
 * so the broken rule wins and text falls back to the inherited link color.
 * Mirror the default-skin fix at higher specificity for each skin.
 * ──────────────────────────────────────────────────────────────────────── */
body.ejar .btn-outline-primary:hover,
body.ejar .btn-outline-primary:focus,
body.reverse .btn-outline-primary:hover,
body.reverse .btn-outline-primary:focus,
body.sakani .btn-outline-primary:hover,
body.sakani .btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--colors-brand-600) !important;
  border-color: var(--colors-brand-600) !important;
}

/* ── Keyboard focus on coloured buttons ───────────────────────────────────
 * main-rtl.css `.btn:focus-visible { background-color: var(--bs-gray-100); }`
 * overrides every button's bg when the user tabs to it. btn-primary patches
 * itself, but btn-outline-primary (and any other coloured outline) loses its
 * visual identity to gray. Keep the focus ring, restore the proper bg.
 * ──────────────────────────────────────────────────────────────────────── */
.btn.btn-outline-primary:focus-visible,
a.btn.btn-outline-primary:focus-visible {
  color: #fff !important;
  background-color: var(--colors-brand-600) !important;
  border-color: var(--colors-brand-600) !important;
  outline: 2px solid var(--colors-brand-700);
  outline-offset: 2px;
}
.btn.btn-primary:focus-visible,
a.btn.btn-primary:focus-visible {
  background-color: var(--colors-brand-700) !important;
  outline: 2px solid var(--colors-brand-900);
  outline-offset: 2px;
}

/* ── Slick slider ghost link hover ────────────────────────────────────────
 * `.slider .slick-item a.btn-ghost:hover { color: rgba(var(--bs-link-color), 0.7) }`
 * is invalid (--bs-link-color is a hex, not numeric). Use a defined token.
 * ──────────────────────────────────────────────────────────────────────── */
.slider .slick-item a.btn-ghost:hover {
  color: var(--colors-brand-700);
}
.slider .slick-item a.btn-ghost.white:hover {
  color: #fff;
  opacity: 0.85;
}