@layer base, layout, components, utilities;

@layer base {
  :root {
    --wrkmc-color-bg-primary: #ffffff;
    --wrkmc-color-bg-secondary: #f8f9fa;
    --wrkmc-color-bg-tertiary: #e9ecef;
    --wrkmc-color-text-primary: #1a1a2e;
    --wrkmc-color-text-secondary: #495057;
    --wrkmc-color-text-muted: #5a6268;
    --wrkmc-color-brand-primary: #1e40af;
    --wrkmc-color-brand-hover: #1d4ed8;
    --wrkmc-color-brand-light: #dbeafe;
    --wrkmc-color-brand-dark: #1e3a8a;
    --wrkmc-color-success: #036249;
    --wrkmc-color-success-bg: #d1fae5;
    --wrkmc-color-warning: #92400e;
    --wrkmc-color-warning-bg: #fef3c7;
    --wrkmc-color-error: #b91c1c;
    --wrkmc-color-error-bg: #fee2e2;
    --wrkmc-color-border: #dee2e6;
    --wrkmc-color-border-focus: #1e40af;
    --wrkmc-color-overlay: rgba(26, 26, 46, 0.5);

    --wrkmc-font-family-base: system-ui, 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
    --wrkmc-font-family-heading: inherit;
    --wrkmc-font-family-mono: 'SF Mono', 'Fira Code', monospace;

    --wrkmc-font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --wrkmc-font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --wrkmc-font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --wrkmc-font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --wrkmc-font-size-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --wrkmc-font-size-fluid-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --wrkmc-font-size-fluid-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);

    --wrkmc-line-height-tight: 1.2;
    --wrkmc-line-height-base: 1.6;
    --wrkmc-line-height-relaxed: 1.75;

    --wrkmc-font-weight-normal: 400;
    --wrkmc-font-weight-medium: 500;
    --wrkmc-font-weight-semibold: 600;
    --wrkmc-font-weight-bold: 700;

    --wrkmc-space-0: 0;
    --wrkmc-space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --wrkmc-space-2: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --wrkmc-space-3: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --wrkmc-space-4: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --wrkmc-space-5: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --wrkmc-space-6: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --wrkmc-space-7: clamp(3rem, 2rem + 5vw, 5rem);
    --wrkmc-space-8: clamp(4rem, 3rem + 5vw, 6rem);

    --wrkmc-radius-none: 0;
    --wrkmc-radius-sm: 0.25rem;
    --wrkmc-radius-md: 0.5rem;
    --wrkmc-radius-lg: 0.75rem;
    --wrkmc-radius-xl: 1rem;
    --wrkmc-radius-2xl: 1.5rem;
    --wrkmc-radius-full: 9999px;

    --wrkmc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --wrkmc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --wrkmc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --wrkmc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --wrkmc-shadow-focus: 0 0 0 3px var(--wrkmc-color-brand-light);
    --wrkmc-shadow-focus-dark: 0 0 0 3px var(--wrkmc-color-brand-light);

    --wrkmc-z-dropdown: 100;
    --wrkmc-z-sticky: 200;
    --wrkmc-z-fixed: 300;
    --wrkmc-z-modal-backdrop: 400;
    --wrkmc-z-modal: 500;
    --wrkmc-z-popover: 600;
    --wrkmc-z-tooltip: 700;
    --wrkmc-z-toast: 800;

    --wrkmc-transition-fast: 120ms ease;
    --wrkmc-transition-base: 200ms ease;
    --wrkmc-transition-slow: 300ms ease;

    --wrkmc-bp-sm: 40rem;
    --wrkmc-bp-md: 48rem;
    --wrkmc-bp-lg: 64rem;
    --wrkmc-bp-xl: 80rem;
    --wrkmc-bp-2xl: 96rem;

    --wrkmc-content-width: 70rem;
    --wrkmc-wide-width: 90rem;
  }

  [data-theme="dark"] {
    --wrkmc-color-bg-primary: #0f172a;
    --wrkmc-color-bg-secondary: #1e293b;
    --wrkmc-color-bg-tertiary: #334155;
    --wrkmc-color-text-primary: #f1f5f9;
    --wrkmc-color-text-secondary: #cbd5e1;
    /* WCAG AA §1.4.3: text-muted على الخلفيات الداكنة كان 4.04 — المبدل #a8b8cc يحقق 5.12 */
    --wrkmc-color-text-muted: #a8b8cc;
    /* WCAG AA §1.4.3: brand-primary على bg-tertiary/brand-light كان 2.82 — المبدل #8fb8fa يحقق 5.13 */
    --wrkmc-color-brand-primary: #8fb8fa;
    /* WCAG AA §1.4.3: brand-hover على bg-tertiary/brand-light كان 4.07 — المبدل #93c5fd يحقق 5.74 */
    --wrkmc-color-brand-hover: #93c5fd;
    --wrkmc-color-brand-light: #1e3a8a;
    --wrkmc-color-brand-dark: #dbeafe;
    /* WCAG AA §1.4.3: success على bg-tertiary/brand-light كان 4.08 — المبدل #34d399 يحقق 5.39 */
    --wrkmc-color-success: #34d399;
    --wrkmc-color-success-bg: #064e3b;
    /* WCAG AA §1.4.3: warning على warning-bg كان 4.22 — المبدل #fbbf24 يحقق 6.20 */
    --wrkmc-color-warning: #fbbf24;
    --wrkmc-color-warning-bg: #78350f;
    /* WCAG AA §1.4.3: error على bg-tertiary/brand-light كان 2.75 — المبدل #fca5a5 يحقق 5.46 */
    --wrkmc-color-error: #fca5a5;
    --wrkmc-color-error-bg: #7f1d1d;
    --wrkmc-color-border: #334155;
    /* WCAG AA §1.4.11: border-focus على bg-tertiary كان 2.82 — المبدل #93c5fd يحقق 5.74 (≥3 المطلوب) */
    --wrkmc-color-border-focus: #93c5fd;
    --wrkmc-color-overlay: rgba(15, 23, 42, 0.7);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --wrkmc-color-bg-primary: #0f172a;
      --wrkmc-color-bg-secondary: #1e293b;
      --wrkmc-color-bg-tertiary: #334155;
      --wrkmc-color-text-primary: #f1f5f9;
      --wrkmc-color-text-secondary: #cbd5e1;
      /* WCAG AA §1.4.3: text-muted على الخلفيات الداكنة كان 4.04 — المبدل #a8b8cc يحقق 5.12 */
      --wrkmc-color-text-muted: #a8b8cc;
      /* WCAG AA §1.4.3: brand-primary على bg-tertiary/brand-light كان 2.82 — المبدل #8fb8fa يحقق 5.13 */
      --wrkmc-color-brand-primary: #8fb8fa;
      /* WCAG AA §1.4.3: brand-hover على bg-tertiary/brand-light كان 4.07 — المبدل #93c5fd يحقق 5.74 */
      --wrkmc-color-brand-hover: #93c5fd;
      --wrkmc-color-brand-light: #1e3a8a;
      --wrkmc-color-brand-dark: #dbeafe;
      /* WCAG AA §1.4.3: success على bg-tertiary/brand-light كان 4.08 — المبدل #34d399 يحقق 5.39 */
      --wrkmc-color-success: #34d399;
      --wrkmc-color-success-bg: #064e3b;
      /* WCAG AA §1.4.3: warning على warning-bg كان 4.22 — المبدل #fbbf24 يحقق 6.20 */
      --wrkmc-color-warning: #fbbf24;
      --wrkmc-color-warning-bg: #78350f;
      /* WCAG AA §1.4.3: error على bg-tertiary/brand-light كان 2.75 — المبدل #fca5a5 يحقق 5.46 */
      --wrkmc-color-error: #fca5a5;
      --wrkmc-color-error-bg: #7f1d1d;
      --wrkmc-color-border: #334155;
      /* WCAG AA §1.4.11: border-focus على bg-tertiary كان 2.82 — المبدل #93c5fd يحقق 5.74 (≥3 المطلوب) */
      --wrkmc-color-border-focus: #93c5fd;
      --wrkmc-color-overlay: rgba(15, 23, 42, 0.7);
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--wrkmc-font-family-base);
    line-height: var(--wrkmc-line-height-relaxed);
    background: var(--wrkmc-color-bg-primary);
    color: var(--wrkmc-color-text-primary);
    font-size: var(--wrkmc-font-size-fluid-base);
  }
  h1, h2, h3, h4 {
    line-height: var(--wrkmc-line-height-tight);
    text-wrap: balance;
    margin-inline: 0;
    font-weight: var(--wrkmc-font-weight-semibold);
    font-family: var(--wrkmc-font-family-heading);
  }
  h1 { font-size: var(--wrkmc-font-size-fluid-3xl); }
  h2 { font-size: var(--wrkmc-font-size-fluid-2xl); }
  h3 { font-size: var(--wrkmc-font-size-fluid-xl); }
  h4 { font-size: var(--wrkmc-font-size-fluid-lg); }
  p { margin-block: 0 1em; }
  img, svg, video { max-inline-size: 100%; height: auto; }
  a {
    color: var(--wrkmc-color-brand-primary);
    text-underline-offset: .2em;
  }
  a:hover { color: var(--wrkmc-color-brand-hover); }
  :focus-visible {
    outline: 3px solid var(--wrkmc-color-border-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
  ::selection {
    background: var(--wrkmc-color-brand-light);
    color: var(--wrkmc-color-brand-dark);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
    }
  }
}

@layer layout {
  .wrkmc-skip-link {
    position: absolute;
    inset-inline-start: var(--wrkmc-space-4);
    inset-block-start: calc(var(--wrkmc-space-4) * -1);
    padding: var(--wrkmc-space-2) var(--wrkmc-space-4);
    background: var(--wrkmc-color-brand-primary);
    color: var(--wrkmc-color-bg-primary);
    font-weight: var(--wrkmc-font-weight-medium);
    border-radius: var(--wrkmc-radius-md);
    z-index: var(--wrkmc-z-toast);
    text-decoration: none;
    transition: inset-block-start var(--wrkmc-transition-fast);
  }
  .wrkmc-skip-link:focus {
    inset-block-start: var(--wrkmc-space-4);
  }

  .wrkmc-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--wrkmc-z-sticky);
    background: var(--wrkmc-color-bg-primary);
    border-block-end: 1px solid var(--wrkmc-color-border);
    padding-block: var(--wrkmc-space-3);
    padding-inline: var(--wrkmc-space-4);
  }
  .wrkmc-header__inner {
    max-inline-size: var(--wrkmc-content-width);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wrkmc-space-4);
    flex-wrap: wrap;
  }

  .wrkmc-nav {
    display: flex;
    align-items: center;
    gap: var(--wrkmc-space-1);
  }
  .wrkmc-nav__list {
    display: none;
    flex-direction: column;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background: var(--wrkmc-color-bg-primary);
    border-block-end: 1px solid var(--wrkmc-color-border);
    padding: var(--wrkmc-space-3);
    gap: var(--wrkmc-space-1);
    z-index: var(--wrkmc-z-dropdown);
    box-shadow: var(--wrkmc-shadow-lg);
  }
  .wrkmc-nav__list[aria-expanded="true"] {
    display: flex;
  }
  .wrkmc-nav__item { display: block; }
  .wrkmc-nav__link {
    display: block;
    padding: var(--wrkmc-space-2) var(--wrkmc-space-3);
    color: var(--wrkmc-color-text-primary);
    text-decoration: none;
    border-radius: var(--wrkmc-radius-md);
    transition: background var(--wrkmc-transition-fast);
  }
  .wrkmc-nav__link:hover,
  .wrkmc-nav__link:focus {
    background: var(--wrkmc-color-bg-tertiary);
    color: var(--wrkmc-color-brand-primary);
  }
  .wrkmc-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--wrkmc-color-border);
    border-radius: var(--wrkmc-radius-md);
    cursor: pointer;
  }
  .wrkmc-nav__toggle[aria-expanded="true"] .wrkmc-nav__icon--open { display: block; }
  .wrkmc-nav__toggle[aria-expanded="true"] .wrkmc-nav__icon--close { display: none; }
  .wrkmc-nav__toggle[aria-expanded="false"] .wrkmc-nav__icon--open { display: none; }
  .wrkmc-nav__toggle[aria-expanded="false"] .wrkmc-nav__icon--close { display: block; }
  @media (min-width: 48rem) {
    .wrkmc-nav__toggle { display: none; }
    .wrkmc-nav__list {
      display: flex;
      position: static;
      flex-direction: row;
      background: transparent;
      border: none;
      padding: 0;
      box-shadow: none;
      gap: var(--wrkmc-space-1);
    }
    .wrkmc-nav__link { padding: var(--wrkmc-space-2) var(--wrkmc-space-3); }
  }

  .wrkmc-page {
    min-block-size: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  .wrkmc-page__main {
    max-inline-size: var(--wrkmc-content-width);
    margin-inline: auto;
    padding: var(--wrkmc-space-6) var(--wrkmc-space-4);
    width: 100%;
  }
  @media (min-width: 64rem) {
    .wrkmc-page__content-wrapper {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--wrkmc-space-6);
      align-items: start;
    }
  }

  .wrkmc-section {
    padding-block: var(--wrkmc-space-6);
  }
  .wrkmc-section--alt {
    background: var(--wrkmc-color-bg-secondary);
    /* W13/PUB-09: أُزيلت الحاشية المنطقية السالبة (كانت تُخرج الشريط عن عرض
       الشاشة 16–24px ⇒ تمرير أفقي)؛ الحشو وحده يحفظ محاذاة المحتوى بلا تجاوز. */
    padding-inline: var(--wrkmc-space-4);
  }
  .wrkmc-section__inner {
    max-inline-size: var(--wrkmc-content-width);
    margin-inline: auto;
  }

  .wrkmc-hero {
    display: grid;
    gap: var(--wrkmc-space-6);
    padding-block: var(--wrkmc-space-7);
    align-items: center;
  }
  .wrkmc-hero__content { text-align: start; }
  .wrkmc-hero__title {
    font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    margin-block-end: var(--wrkmc-space-3);
    line-height: 1.15;
  }
  .wrkmc-hero__subtitle {
    font-size: var(--wrkmc-font-size-fluid-xl);
    color: var(--wrkmc-color-text-secondary);
    margin-block-end: var(--wrkmc-space-5);
    max-inline-size: 60ch;
  }
  .wrkmc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wrkmc-space-3);
  }
  .wrkmc-hero__media {
    display: none;
  }
  @media (min-width: 64rem) {
    .wrkmc-hero {
      grid-template-columns: 1fr 1fr;
    }
    .wrkmc-hero__media { display: block; }
  }

  .wrkmc-trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--wrkmc-space-4);
    padding-block: var(--wrkmc-space-5);
    border-block: 1px solid var(--wrkmc-color-border);
  }
  .wrkmc-trust-bar__item {
    text-align: center;
    padding: var(--wrkmc-space-3);
  }
  .wrkmc-trust-bar__number {
    font-size: var(--wrkmc-font-size-fluid-2xl);
    font-weight: var(--wrkmc-font-weight-bold);
    color: var(--wrkmc-color-brand-primary);
    line-height: 1.2;
  }
  .wrkmc-trust-bar__label {
    font-size: var(--wrkmc-font-size-fluid-sm);
    color: var(--wrkmc-color-text-secondary);
  }

  .wrkmc-card {
    background: var(--wrkmc-color-bg-primary);
    border: 1px solid var(--wrkmc-color-border);
    border-radius: var(--wrkmc-radius-lg);
    box-shadow: var(--wrkmc-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--wrkmc-transition-base), border-color var(--wrkmc-transition-base);
  }
  .wrkmc-card:hover {
    box-shadow: var(--wrkmc-shadow-md);
    border-color: var(--wrkmc-color-brand-light);
  }
  .wrkmc-card__media { display: block; }
  .wrkmc-card__body {
    padding: var(--wrkmc-space-4);
    display: grid;
    gap: var(--wrkmc-space-2);
  }
  .wrkmc-card__title {
    font-size: var(--wrkmc-font-size-fluid-lg);
    margin: 0;
  }
  .wrkmc-card__excerpt {
    margin: 0;
    color: var(--wrkmc-color-text-secondary);
    font-size: var(--wrkmc-font-size-fluid-base);
  }
  .wrkmc-card__footer {
    padding: var(--wrkmc-space-3) var(--wrkmc-space-4);
    border-block-start: 1px solid var(--wrkmc-color-border);
    background: var(--wrkmc-color-bg-secondary);
  }

  .wrkmc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wrkmc-space-2);
    font-family: var(--wrkmc-font-family-base);
    font-weight: var(--wrkmc-font-weight-medium);
    font-size: var(--wrkmc-font-size-fluid-sm);
    line-height: 1.5;
    padding: var(--wrkmc-space-2) var(--wrkmc-space-4);
    border-radius: var(--wrkmc-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--wrkmc-transition-fast);
    white-space: nowrap;
  }
  .wrkmc-button:disabled,
  .wrkmc-button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .wrkmc-button.is-loading {
    position: relative;
    color: transparent;
  }
  .wrkmc-button.is-loading::after {
    content: "";
    position: absolute;
    inset-block: 50%;
    inset-inline: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em;
    border: 2px solid currentColor;
    border-block-end-color: transparent;
    border-radius: 50%;
    animation: wrkmc-spin 0.6s linear infinite;
  }
  @keyframes wrkmc-spin { to { transform: rotate(1turn); } }
  .wrkmc-button--primary {
    background: var(--wrkmc-color-brand-primary);
    color: var(--wrkmc-color-bg-primary);
    border-color: var(--wrkmc-color-brand-primary);
  }
  .wrkmc-button--primary:hover:not(:disabled),
  .wrkmc-button--primary:focus:not(:disabled) {
    background: var(--wrkmc-color-brand-hover);
    border-color: var(--wrkmc-color-brand-hover);
  }
  .wrkmc-button--secondary {
    background: var(--wrkmc-color-bg-secondary);
    color: var(--wrkmc-color-text-primary);
    border-color: var(--wrkmc-color-border);
  }
  .wrkmc-button--secondary:hover:not(:disabled),
  .wrkmc-button--secondary:focus:not(:disabled) {
    background: var(--wrkmc-color-bg-tertiary);
    border-color: var(--wrkmc-color-text-muted);
  }
  .wrkmc-button--ghost {
    background: transparent;
    color: var(--wrkmc-color-brand-primary);
    border-color: transparent;
  }
  .wrkmc-button--ghost:hover:not(:disabled),
  .wrkmc-button--ghost:focus:not(:disabled) {
    background: var(--wrkmc-color-brand-light);
  }
  .wrkmc-button--sm {
    padding: var(--wrkmc-space-1) var(--wrkmc-space-3);
    font-size: var(--wrkmc-font-size-fluid-xs);
  }
  .wrkmc-button.has-badge::after {
    content: attr(data-badge);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.35em;
    font-size: 0.65em;
    font-weight: var(--wrkmc-font-weight-bold);
    line-height: 1;
    color: var(--wrkmc-color-bg-primary);
    background: var(--wrkmc-color-error);
    border-radius: var(--wrkmc-radius-full);
    margin-inline-start: var(--wrkmc-space-1);
  }

  .wrkmc-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--wrkmc-space-1) var(--wrkmc-space-2);
    font-size: var(--wrkmc-font-size-fluid-xs);
    font-weight: var(--wrkmc-font-weight-medium);
    line-height: 1.4;
    border-radius: var(--wrkmc-radius-full);
    white-space: nowrap;
  }
  .wrkmc-badge--primary {
    background: var(--wrkmc-color-brand-light);
    color: var(--wrkmc-color-brand-dark);
  }
  .wrkmc-badge--success {
    background: var(--wrkmc-color-success-bg);
    color: var(--wrkmc-color-success);
  }
  .wrkmc-badge--warning {
    background: var(--wrkmc-color-warning-bg);
    color: var(--wrkmc-color-warning);
  }
  .wrkmc-badge--error {
    background: var(--wrkmc-color-error-bg);
    color: var(--wrkmc-color-error);
  }
  .wrkmc-badge.has-badge::after {
    content: attr(data-count);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    height: 1.25em;
    font-size: 0.75em;
    font-weight: var(--wrkmc-font-weight-bold);
    color: var(--wrkmc-color-bg-primary);
    background: var(--wrkmc-color-error);
    border-radius: var(--wrkmc-radius-full);
    margin-inline-start: var(--wrkmc-space-1);
  }

  .wrkmc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wrkmc-space-1);
    font-size: var(--wrkmc-font-size-fluid-sm);
    color: var(--wrkmc-color-text-secondary);
  }
  .wrkmc-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wrkmc-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wrkmc-breadcrumb__item { display: flex; align-items: center; }
  .wrkmc-breadcrumb__item:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--wrkmc-space-1);
    color: var(--wrkmc-color-text-muted);
  }
  .wrkmc-breadcrumb__link {
    color: var(--wrkmc-color-text-secondary);
    text-decoration: none;
  }
  .wrkmc-breadcrumb__link:hover { color: var(--wrkmc-color-brand-primary); }
  .wrkmc-breadcrumb__current {
    color: var(--wrkmc-color-text-primary);
    font-weight: var(--wrkmc-font-weight-medium);
  }

  .wrkmc-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wrkmc-space-2);
    padding-block: var(--wrkmc-space-4);
  }
  .wrkmc-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wrkmc-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wrkmc-pagination__link,
  .wrkmc-pagination__current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--wrkmc-space-3);
    font-size: var(--wrkmc-font-size-fluid-sm);
    font-weight: var(--wrkmc-font-weight-medium);
    border-radius: var(--wrkmc-radius-md);
    border: 1px solid var(--wrkmc-color-border);
    text-decoration: none;
    transition: all var(--wrkmc-transition-fast);
  }
  .wrkmc-pagination__link {
    color: var(--wrkmc-color-text-primary);
    background: var(--wrkmc-color-bg-primary);
  }
  .wrkmc-pagination__link:hover,
  .wrkmc-pagination__link:focus {
    background: var(--wrkmc-color-brand-light);
    border-color: var(--wrkmc-color-brand-primary);
    color: var(--wrkmc-color-brand-primary);
  }
  .wrkmc-pagination__current {
    background: var(--wrkmc-color-brand-primary);
    border-color: var(--wrkmc-color-brand-primary);
    color: var(--wrkmc-color-bg-primary);
  }
  .wrkmc-pagination__ellipsis {
    color: var(--wrkmc-color-text-muted);
    padding: 0 var(--wrkmc-space-1);
  }

  .wrkmc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wrkmc-space-1);
    padding: var(--wrkmc-space-1) var(--wrkmc-space-2);
    background: var(--wrkmc-color-bg-secondary);
    border: 1px solid var(--wrkmc-color-border);
    border-radius: var(--wrkmc-radius-full);
    font-size: var(--wrkmc-font-size-fluid-xs);
    color: var(--wrkmc-color-text-primary);
    cursor: pointer;
    transition: all var(--wrkmc-transition-fast);
  }
  .wrkmc-theme-toggle:hover,
  .wrkmc-theme-toggle:focus {
    background: var(--wrkmc-color-bg-tertiary);
    border-color: var(--wrkmc-color-brand-primary);
  }
  .wrkmc-theme-toggle__icon {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
  }
  .wrkmc-theme-toggle[data-theme="light"] .wrkmc-theme-toggle__icon--dark,
  .wrkmc-theme-toggle[data-theme="dark"] .wrkmc-theme-toggle__icon--light,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .wrkmc-theme-toggle__icon--system { display: none; }
  .wrkmc-theme-toggle[data-theme="light"] .wrkmc-theme-toggle__icon--light,
  .wrkmc-theme-toggle[data-theme="dark"] .wrkmc-theme-toggle__icon--dark,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .wrkmc-theme-toggle__icon--system { display: inline-flex; }

  .wrkmc-footer {
    background: var(--wrkmc-color-bg-secondary);
    border-block-start: 1px solid var(--wrkmc-color-border);
    padding-block: var(--wrkmc-space-6);
    padding-inline: var(--wrkmc-space-4);
    margin-block-start: auto;
  }
  .wrkmc-footer__inner {
    max-inline-size: var(--wrkmc-content-width);
    margin-inline: auto;
    display: grid;
    gap: var(--wrkmc-space-4);
    text-align: center;
  }
  @media (min-width: 48rem) {
    .wrkmc-footer__inner {
      grid-template-columns: 1fr auto 1fr;
      text-align: start;
      align-items: center;
    }
  }
  .wrkmc-footer__brand { font-weight: var(--wrkmc-font-weight-semibold); }
  .wrkmc-footer__copyright {
    font-size: var(--wrkmc-font-size-fluid-sm);
    color: var(--wrkmc-color-text-secondary);
  }
  .wrkmc-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wrkmc-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wrkmc-footer__link {
    font-size: var(--wrkmc-font-size-fluid-sm);
    color: var(--wrkmc-color-text-secondary);
  }
  .wrkmc-footer__link:hover { color: var(--wrkmc-color-brand-primary); }
}

/*
 * ============================================================================
 * W13/PUB-09 — تعارض الطبقات (Cascade Layers) + الوضع الداكن
 * ============================================================================
 * WordPress يطبع أنماطه العامة **خارج أي طبقة**، وأهمّها:
 *   a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--brand-primary) }
 * والقواعد غير المُطبَّقة (unlayered) تتقدّم على كل قواعد `@layer` مهما بلغت
 * نوعيتها. النتيجة المقيسة فعلياً (computed styles + axe):
 *   ① الزر الأساسي: لون النص = لون الخلفية (‎#1e40af على #1e40af‎) ⇒ نص غير مرئي
 *      — حتى في الوضع الفاتح (لم يكشفه القياس الرياضي السابق).
 *   ② رموز theme.json (`--wp--preset--color--*`) قيم ثابتة لا تتبدّل مع الوضع
 *      الداكن ⇒ تبقى أقسام/بطاقات بخلفية بيضاء، ويصير النص الفاتح عليها غير
 *      مقروء (32 موضعاً على الرئيسية، 25 على الأسعار — axe).
 *
 * الحل: (1) عكس رموز theme.json في الوضع الداكن بجعلها أسماء بديلة (alias)
 * لرموز `--wrkmc-color-*` القابلة للتبديل أصلاً، و(2) إعادة تأكيد ألوان
 * الأزرار والرابط التخطّي **خارج الطبقات** لتتقدّم على قاعدة WordPress العامة.
 * كلاهما بعد نهاية طبقات الملف ⇒ بلا طبقة (أولوية أعلى).
 * ============================================================================
 */
html[data-theme="dark"] {
  --wp--preset--color--bg-primary: var(--wrkmc-color-bg-primary);
  --wp--preset--color--bg-secondary: var(--wrkmc-color-bg-secondary);
  --wp--preset--color--bg-tertiary: var(--wrkmc-color-bg-tertiary);
  --wp--preset--color--text-primary: var(--wrkmc-color-text-primary);
  --wp--preset--color--text-secondary: var(--wrkmc-color-text-secondary);
  --wp--preset--color--text-muted: var(--wrkmc-color-text-muted);
  --wp--preset--color--brand-primary: var(--wrkmc-color-brand-primary);
  --wp--preset--color--brand-hover: var(--wrkmc-color-brand-hover);
  --wp--preset--color--brand-light: var(--wrkmc-color-brand-light);
  --wp--preset--color--brand-dark: var(--wrkmc-color-brand-dark);
  --wp--preset--color--success: var(--wrkmc-color-success);
  --wp--preset--color--success-bg: var(--wrkmc-color-success-bg);
  --wp--preset--color--warning: var(--wrkmc-color-warning);
  --wp--preset--color--warning-bg: var(--wrkmc-color-warning-bg);
  --wp--preset--color--error: var(--wrkmc-color-error);
  --wp--preset--color--error-bg: var(--wrkmc-color-error-bg);
  --wp--preset--color--border: var(--wrkmc-color-border);
  --wp--preset--color--border-focus: var(--wrkmc-color-border-focus);
  --wp--preset--color--overlay: var(--wrkmc-color-overlay);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wp--preset--color--bg-primary: var(--wrkmc-color-bg-primary);
    --wp--preset--color--bg-secondary: var(--wrkmc-color-bg-secondary);
    --wp--preset--color--bg-tertiary: var(--wrkmc-color-bg-tertiary);
    --wp--preset--color--text-primary: var(--wrkmc-color-text-primary);
    --wp--preset--color--text-secondary: var(--wrkmc-color-text-secondary);
    --wp--preset--color--text-muted: var(--wrkmc-color-text-muted);
    --wp--preset--color--brand-primary: var(--wrkmc-color-brand-primary);
    --wp--preset--color--brand-hover: var(--wrkmc-color-brand-hover);
    --wp--preset--color--brand-light: var(--wrkmc-color-brand-light);
    --wp--preset--color--brand-dark: var(--wrkmc-color-brand-dark);
    --wp--preset--color--success: var(--wrkmc-color-success);
    --wp--preset--color--success-bg: var(--wrkmc-color-success-bg);
    --wp--preset--color--warning: var(--wrkmc-color-warning);
    --wp--preset--color--warning-bg: var(--wrkmc-color-warning-bg);
    --wp--preset--color--error: var(--wrkmc-color-error);
    --wp--preset--color--error-bg: var(--wrkmc-color-error-bg);
    --wp--preset--color--border: var(--wrkmc-color-border);
    --wp--preset--color--border-focus: var(--wrkmc-color-border-focus);
    --wp--preset--color--overlay: var(--wrkmc-color-overlay);
  }
}

/* (2) ألوان الأزرار/الرابط التخطّي خارج الطبقات (تتقدّم على قاعدة WordPress العامة) */
.wrkmc-button--primary {
  color: var(--wrkmc-color-bg-primary);
}
.wrkmc-button--secondary {
  color: var(--wrkmc-color-text-primary);
}
.wrkmc-button--ghost {
  color: var(--wrkmc-color-brand-primary);
}
.wrkmc-skip-link {
  color: var(--wrkmc-color-bg-primary);
}