/*
 * Badaael Unified Design System
 * Mandatory shared UI foundation for DalilKSA, Tameensa, Daleel Nafees, and MowazafDesk.
 */

:root {
  --bd-font-ar: "Cairo";
  --bd-font-en: "Cairo";
  --bd-font-family: var(--bd-font-ar);
  --bd-color-primary: #0f6b5a;
  --bd-color-primary-dark: #0a4a3e;
  --bd-color-secondary: #17426b;
  --bd-color-accent: #b85c00;
  --bd-color-accent-dark: #8f4400;
  --bd-color-success: #147a3d;
  --bd-color-warning: #a15c00;
  --bd-color-error: #b42318;
  --bd-color-background: #f7faf8;
  --bd-color-surface: #ffffff;
  --bd-color-surface-soft: #edf5f1;
  --bd-color-border: #d7e2dc;
  --bd-color-border-strong: #b9cac1;
  --bd-color-text: #17211d;
  --bd-color-text-soft: #2c3f37;
  --bd-color-muted: #5a6963;
  --bd-color-on-dark: #ffffff;
  --bd-space-0: 0;
  --bd-space-1: 0.25rem;
  --bd-space-2: 0.5rem;
  --bd-space-3: 0.75rem;
  --bd-space-4: 1rem;
  --bd-space-5: 1.5rem;
  --bd-space-6: 2rem;
  --bd-space-7: 3rem;
  --bd-space-8: 4rem;
  --bd-radius-sm: 6px;
  --bd-radius: 8px;
  --bd-radius-pill: 999px;
  --bd-shadow-card: 0 10px 24px rgba(23, 33, 29, 0.08);
  --bd-shadow-hover: 0 16px 34px rgba(23, 33, 29, 0.12);
  --bd-container: 1180px;
  --bd-readable: 780px;
  --bd-grid-gap: var(--bd-space-5);
  --bd-h1: 2.5rem;
  --bd-h2: 1.875rem;
  --bd-h3: 1.375rem;
  --bd-body: 1rem;
  --bd-small: 0.875rem;
  --bd-button: 1rem;
  --bd-table: 0.9375rem;
  --bd-line-height: 1.8;
  --font-ar: var(--bd-font-ar);
  --font-en: var(--bd-font-ar);
  --dk-font: var(--bd-font-ar);
  --dk-font-en: var(--bd-font-ar);
  --ts-font: var(--bd-font-ar);
  --ts-font-en: var(--bd-font-ar);
  --badaael-font-family: var(--bd-font-ar);
}

body.wp-theme-dalilksa {
  --bd-color-primary: var(--dk-green);
  --bd-color-primary-dark: var(--dk-green-dark);
  --bd-color-secondary: var(--dk-green);
  --bd-color-accent: var(--dk-gold);
  --bd-color-accent-dark: #8a631f;
  --bd-color-background: var(--dk-soft);
  --bd-color-surface: var(--dk-surface);
  --bd-color-surface-soft: #eef6f1;
  --bd-color-border: var(--dk-border);
  --bd-color-border-strong: #b8cec1;
  --bd-color-text: var(--dk-ink);
  --bd-color-text-soft: #2d4038;
  --bd-color-muted: var(--dk-muted);
}

body.wp-child-theme-tameensa-child {
  --bd-color-primary: var(--ts-primary-800);
  --bd-color-primary-dark: var(--ts-navy-950);
  --bd-color-secondary: var(--ts-primary-600);
  --bd-color-accent: var(--ts-primary-600);
  --bd-color-accent-dark: var(--ts-primary-800);
  --bd-color-success: var(--ts-success);
  --bd-color-warning: var(--ts-warning);
  --bd-color-error: var(--ts-danger);
  --bd-color-background: var(--ts-background);
  --bd-color-surface: var(--ts-surface);
  --bd-color-surface-soft: var(--ts-primary-50);
  --bd-color-border: var(--ts-border);
  --bd-color-border-strong: rgba(15, 61, 110, 0.24);
  --bd-color-text: var(--ts-text);
  --bd-color-text-soft: #26394e;
  --bd-color-muted: var(--ts-text-muted);
}

body.wp-theme-daleel-nafees-reference {
  --bd-color-primary: #005b7f;
  --bd-color-primary-dark: #003a52;
  --bd-color-secondary: #00a79d;
  --bd-color-accent: #c9a227;
  --bd-color-accent-dark: #9f7c12;
  --bd-color-background: #f8fafc;
  --bd-color-surface: #ffffff;
  --bd-color-surface-soft: #eef7fb;
  --bd-color-border: #d9e2ec;
  --bd-color-border-strong: #b8c7d6;
  --bd-color-text: #102a43;
  --bd-color-text-soft: #243b53;
  --bd-color-muted: #52677a;
  --dn-ink: #102a43;
  --dn-muted: #52677a;
  --dn-line: #d9e2ec;
  --dn-soft: #f8fafc;
  --dn-card: #ffffff;
  --dn-accent: #005b7f;
  --dn-accent-dark: #003a52;
  --dn-warm: #c9a227;
  --dn-danger: #9f2d20;
}

body.wp-theme-sauditemplates {
  --bd-color-primary: var(--accent);
  --bd-color-primary-dark: #0a574b;
  --bd-color-secondary: #1f2a2e;
  --bd-color-accent: var(--accent-2);
  --bd-color-accent-dark: #8f641c;
  --bd-color-background: var(--bg);
  --bd-color-surface: var(--surface);
  --bd-color-surface-soft: var(--soft);
  --bd-color-border: var(--line);
  --bd-color-border-strong: #c3cbc2;
  --bd-color-text: var(--ink);
  --bd-color-text-soft: #324046;
  --bd-color-muted: var(--muted);
}

html {
  direction: rtl;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  background: var(--bd-color-background) !important;
  color: var(--bd-color-text) !important;
  font-family: var(--bd-font-ar) !important;
  font-size: var(--bd-body);
  line-height: var(--bd-line-height);
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, a, span, strong, em, small, label, button, input, select, textarea, table, th, td, caption, blockquote, figcaption, summary, details) {
  font-family: var(--bd-font-ar) !important;
  letter-spacing: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-inline-size: 100%;
}

a {
  color: var(--bd-color-primary-dark);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

a:hover {
  color: var(--bd-color-accent-dark);
}

body :where(nav a, header a, footer a, .site-footer a, .card a, .content-card a, .topic-card a, .entry-card a, .archive-card a, .result-card a, .service-card a, .platform-card a, .city-card a, .entity-card a, .breadcrumb a, .breadcrumbs a, .pagination a, .nav-links a, .page-numbers) {
  align-items: center;
  display: inline-flex !important;
  min-block-size: 44px !important;
  min-inline-size: 44px !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(184, 92, 0, 0.34);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bd-color-text) !important;
  font-weight: 700;
  margin-block: 0 var(--bd-space-4);
}

h1 {
  font-size: var(--bd-h1) !important;
  line-height: 1.25;
}

h2 {
  font-size: var(--bd-h2) !important;
  line-height: 1.32;
}

h3 {
  font-size: var(--bd-h3) !important;
  line-height: 1.42;
}

p, li, dt, dd {
  font-size: var(--bd-body);
  line-height: var(--bd-line-height);
}

small,
.small,
.muted,
.meta,
.eyebrow,
.supporting,
.entry-meta,
.post-meta,
.card-meta {
  color: var(--bd-color-muted) !important;
  font-size: var(--bd-small) !important;
  line-height: 1.6;
}

.wrap,
.container,
.site-container,
.article-shell,
.sarkosa-container,
.dk-container,
.dn-wrap,
.tameensa-container,
.tbr-container {
  inline-size: min(100%, var(--bd-container));
  margin-inline: auto;
  padding-inline: var(--bd-space-5);
}

.article-content,
.entry-content,
.content-body,
.post-content,
.page-content {
  inline-size: min(100%, var(--bd-readable));
}

.bd-grid,
.cards-grid,
.card-grid,
.archive-grid,
.listing-grid,
.footer-grid,
.dk-grid,
.dn-grid,
.tameensa-grid,
.tbr-grid,
.tameensa-footer__grid {
  display: grid;
  gap: var(--bd-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

@media (min-width: 1024px) {
  .bd-grid--4,
  .cities-grid,
  .city-grid,
  .platforms-grid,
  .platform-grid,
  .dk-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bd-grid--3,
  .services-grid,
  .service-grid,
  .government-services-grid,
  .dk-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-header,
.sarkosa-header,
.dk-header,
.dn-site-header,
.tameensa-header,
.tbr-header,
header[role="banner"] {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--bd-color-border) !important;
  color: var(--bd-color-text) !important;
}

.site-header a,
.sarkosa-header a,
.dk-header a,
.dn-site-header a,
.tameensa-header a,
.tbr-header a,
header[role="banner"] a {
  color: var(--bd-color-text) !important;
  font-weight: 700;
}

.hero,
.site-hero,
.page-hero,
.sarkosa-hero,
.dk-hero,
.tameensa-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--bd-color-surface-soft) 100%) !important;
  color: var(--bd-color-text) !important;
  padding-block: var(--bd-space-8) var(--bd-space-7);
}

.hero p,
.site-hero p,
.page-hero p,
.sarkosa-hero p,
.dk-hero p,
.tameensa-hero p {
  color: var(--bd-color-muted) !important;
  font-size: 1.125rem;
}

body.wp-theme-daleel-nafees-reference .dn-hero {
  background: linear-gradient(135deg, #003a52, #005b7f) !important;
  border-bottom: 1px solid var(--bd-color-border) !important;
  color: #ffffff !important;
}

body.wp-theme-daleel-nafees-reference .dn-hero :where(h1, h2, h3, p, span) {
  color: inherit !important;
}

button,
.button,
.btn,
.wp-element-button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
.search-submit,
.search-form button,
.dk-button,
.dn-button,
.tameensa-button,
.tbr-button,
.stp-button,
.page-numbers {
  align-items: center;
  background: var(--bd-color-accent) !important;
  border: 1px solid var(--bd-color-accent) !important;
  border-radius: var(--bd-radius) !important;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--bd-button) !important;
  font-weight: 700;
  gap: var(--bd-space-2);
  justify-content: center;
  line-height: 1.45;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0.625rem 1rem !important;
  text-decoration: none !important;
}

button:hover,
.button:hover,
.btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.search-submit:hover,
.search-form button:hover,
.dk-button:hover,
.dn-button:hover,
.tameensa-button:hover,
.tbr-button:hover,
.stp-button:hover,
.page-numbers:hover,
.page-numbers.current {
  background: var(--bd-color-accent-dark) !important;
  border-color: var(--bd-color-accent-dark) !important;
  color: #ffffff !important;
}

button[disabled],
.button[aria-disabled="true"],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea,
.input,
.textarea,
.select select,
.wp-block-search__input {
  background: #ffffff !important;
  border: 1px solid var(--bd-color-border) !important;
  border-radius: var(--bd-radius) !important;
  color: var(--bd-color-text) !important;
  font-size: var(--bd-body) !important;
  line-height: 1.45;
  min-block-size: 44px;
  padding: 0.625rem 0.875rem !important;
}

textarea {
  min-block-size: 132px;
}

label,
.label,
.field-label,
.form-label,
.stp-field label {
  color: var(--bd-color-text-soft) !important;
  font-size: 0.9375rem !important;
  font-weight: 700;
  line-height: 1.45;
}

.search-form,
.wp-block-search,
.site-search,
.dk-search,
.dn-search,
.tameensa-search,
.tbr-search {
  align-items: stretch;
  display: flex;
  gap: var(--bd-space-3);
}

.search-form input,
.wp-block-search__input,
.site-search input,
.dk-search input,
.dn-search input,
.tameensa-search input,
.tbr-search input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.card,
.content-card,
.topic-card,
.entry-card,
.archive-card,
.result-card,
.service-card,
.platform-card,
.city-card,
.entity-card,
.dk-card,
.dn-card,
.tameensa-card,
.tbr-card,
.stp-card,
.notice,
.source-box,
.review-box,
.related-content,
.disclaimer-box,
.wp-block-group.is-style-card {
  background: var(--bd-color-surface) !important;
  border: 1px solid var(--bd-color-border) !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow-card);
  color: var(--bd-color-text) !important;
}

.card:hover,
.content-card:hover,
.topic-card:hover,
.entry-card:hover,
.archive-card:hover,
.result-card:hover,
.service-card:hover,
.platform-card:hover,
.city-card:hover,
.entity-card:hover,
.dk-card:hover,
.dn-card:hover,
.tameensa-card:hover,
.tbr-card:hover {
  border-color: var(--bd-color-border-strong) !important;
  box-shadow: var(--bd-shadow-hover);
}

.alert,
.notice,
.message,
.wp-block-notice,
.is-style-warning,
.is-style-success,
.is-style-error {
  border-inline-start: 4px solid var(--bd-color-secondary) !important;
  padding: var(--bd-space-4) !important;
}

.alert-success,
.is-style-success {
  border-inline-start-color: var(--bd-color-success) !important;
}

.alert-warning,
.is-style-warning {
  border-inline-start-color: var(--bd-color-warning) !important;
}

.alert-error,
.is-style-error {
  border-inline-start-color: var(--bd-color-error) !important;
}

table,
.table,
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  inline-size: 100%;
  overflow: hidden;
}

th,
td,
.table th,
.table td,
.wp-block-table th,
.wp-block-table td {
  border-bottom: 1px solid var(--bd-color-border) !important;
  font-size: var(--bd-table) !important;
  padding: 0.75rem 0.875rem !important;
  text-align: start;
  vertical-align: top;
}

th,
.table th,
.wp-block-table th {
  background: var(--bd-color-surface-soft) !important;
  color: var(--bd-color-text) !important;
  font-weight: 700;
}

.faq,
.faq-item,
.faq-card,
.accordion,
.accordion-item,
details {
  background: var(--bd-color-surface) !important;
  border: 1px solid var(--bd-color-border) !important;
  border-radius: var(--bd-radius) !important;
}

details > summary,
.faq-question,
.accordion-title {
  cursor: pointer;
  font-size: 1rem !important;
  font-weight: 700;
  min-block-size: 44px;
  padding: var(--bd-space-4) !important;
}

.breadcrumb,
.breadcrumbs,
.rank-math-breadcrumb,
.aioseo-breadcrumbs,
.sarkosa-breadcrumbs,
.dk-breadcrumb,
.dn-breadcrumb,
.tameensa-breadcrumb,
.tbr-breadcrumb {
  color: var(--bd-color-muted) !important;
  font-size: var(--bd-small) !important;
  line-height: 1.6;
}

.breadcrumb a,
.breadcrumbs a,
.rank-math-breadcrumb a,
.aioseo-breadcrumbs a,
.sarkosa-breadcrumbs a,
.dk-breadcrumb a,
.dn-breadcrumb a,
.tameensa-breadcrumb a,
.tbr-breadcrumb a {
  color: var(--bd-color-primary-dark) !important;
  font-weight: 700;
}

.pagination,
.nav-links,
.page-links,
.wp-block-query-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bd-space-3);
  justify-content: center;
  margin-block: var(--bd-space-6);
}

.site-footer,
.sarkosa-footer,
.dk-footer,
.dn-footer,
.tameensa-footer,
.tbr-footer,
footer[role="contentinfo"] {
  background: #ffffff !important;
  border-top: 1px solid var(--bd-color-border) !important;
  color: var(--bd-color-muted) !important;
}

.site-footer a,
.sarkosa-footer a,
.dk-footer a,
.dn-footer a,
.tameensa-footer a,
.tbr-footer a,
footer[role="contentinfo"] a {
  color: var(--bd-color-primary-dark) !important;
  text-decoration: none !important;
}

.footer-badaael,
.badaael-footer-brand,
.badaael-attribution {
  align-items: center;
  display: inline-flex;
  gap: var(--bd-space-3);
  min-block-size: 44px;
}

.footer-badaael img,
.badaael-footer-brand img,
.badaael-attribution img {
  block-size: 44px;
  inline-size: 44px;
  object-fit: contain;
}

@media (max-width: 780px) {
  :root {
    --bd-h1: 2rem;
    --bd-h2: 1.5rem;
    --bd-h3: 1.25rem;
    --bd-grid-gap: var(--bd-space-4);
  }

  .wrap,
  .container,
  .site-container,
  .article-shell,
  .sarkosa-container,
  .dk-container,
  .dn-wrap,
  .tameensa-container,
  .tbr-container {
    padding-inline: var(--bd-space-4);
  }

  .hero,
  .site-hero,
  .page-hero,
  .sarkosa-hero,
  .dk-hero,
  .tameensa-hero {
    padding-block: var(--bd-space-7) var(--bd-space-6);
  }

  .search-form,
  .wp-block-search,
  .site-search,
  .dk-search,
  .dn-search,
  .tameensa-search,
  .tbr-search {
    flex-direction: column;
  }

  button,
  .button,
  .btn,
  .wp-element-button,
  .wp-block-button__link,
  input[type="submit"],
  input[type="button"],
  .search-submit {
    inline-size: auto;
    min-block-size: 44px;
  }
}