/*
* Hadara Accessibility — Frontend
* كل القيم البصرية من hadara-a11y-tokens.css، وأشكال الزر/النافذة من hadara-a11y-presets.css.
* كل تعديل على الموقع Runtime Override عبر classes على ويُزال بالكامل عند الإيقاف.
*
* اللاحقة :not([data-hadara-a11y]):not([data-hadara-a11y] *) تستثني واجهة الإضافة نفسها.
*/
/* ═══════════ 1) رابط التخطي ═══════════ */
.hadara-a11y-skip-link {
position: fixed;
inset-block-start: -200px;
inset-inline-start: var(--hadara-space-lg);
z-index: calc(var(--hadara-a11y-zindex, 2147483000) + 1);
padding: var(--hadara-space-md) var(--hadara-space-xl);
background: var(--hadara-color-brand);
color: var(--hadara-color-on-brand) !important;
font-family: var(--hadara-font-ui) !important;
font-size: var(--hadara-font-size-lg) !important;
text-decoration: none !important;
border-radius: var(--hadara-radius-md);
box-shadow: var(--hadara-shadow-lg);
transition: inset-block-start var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-skip-link:focus {
inset-block-start: var(--hadara-space-lg);
outline: var(--hadara-focus-ring-width) solid var(--hadara-focus-ring-color);
outline-offset: var(--hadara-focus-ring-offset);
}
/* ═══════════ 2) الحاوية والزر ═══════════ */
.hadara-a11y-root {
position: fixed;
z-index: var(--hadara-a11y-zindex, 2147483000);
width: var(--hadara-a11y-button-size, var(--hadara-button-size-md));
height: var(--hadara-a11y-button-size, var(--hadara-button-size-md));
font-family: var(--hadara-font-ui);
font-size: var(--hadara-font-size-md);
line-height: 1.5;
color: var(--hadara-color-text);
direction: rtl;
text-align: start;
}
.hadara-a11y-size-sm { --hadara-a11y-button-size: var(--hadara-button-size-sm); }
.hadara-a11y-size-md { --hadara-a11y-button-size: var(--hadara-button-size-md); }
.hadara-a11y-size-lg { --hadara-a11y-button-size: var(--hadara-button-size-lg); }
/* المواضع فيزيائية صريحة: "يمين" يمينٌ حقيقي على الشاشة مهما كان اتجاه الصفحة،
لأن المستخدم يختار زاوية شاشة لا موضعًا نصّيًا. الإزاحتان X وY تحرّكانه داخل الزاوية نفسها. */
.hadara-a11y-pos-bottom-right { bottom: var(--hadara-a11y-offset-y, 24px); right: var(--hadara-a11y-offset-x, 24px); }
.hadara-a11y-pos-bottom-left { bottom: var(--hadara-a11y-offset-y, 24px); left: var(--hadara-a11y-offset-x, 24px); }
.hadara-a11y-pos-top-right { top: var(--hadara-a11y-offset-y, 24px); right: var(--hadara-a11y-offset-x, 24px); }
.hadara-a11y-pos-top-left { top: var(--hadara-a11y-offset-y, 24px); left: var(--hadara-a11y-offset-x, 24px); }
.hadara-a11y-pos-middle-right { top: calc(50% + var(--hadara-a11y-offset-y, 24px) - 24px); right: var(--hadara-a11y-offset-x, 24px); transform: translateY(-50%); }
.hadara-a11y-pos-middle-left { top: calc(50% + var(--hadara-a11y-offset-y, 24px) - 24px); left: var(--hadara-a11y-offset-x, 24px); transform: translateY(-50%); }
.hadara-a11y-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
background: var(--hadara-color-brand) !important;
color: var(--hadara-color-on-brand) !important;
border: var(--hadara-border-none) solid transparent !important;
cursor: pointer;
transition: transform var(--hadara-transition-base) var(--hadara-ease),
box-shadow var(--hadara-transition-base) var(--hadara-ease),
background-color var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-toggle svg { width: 58%; height: 58%; }
/* الحالات التفاعلية الموحّدة عبر كل الـ presets (قاعدة 0.9.2). */
.hadara-a11y-toggle:hover { transform: scale(var(--hadara-hover-scale)); }
.hadara-a11y-toggle:active { transform: scale(var(--hadara-active-scale)); transition-duration: var(--hadara-transition-fast); }
.hadara-a11y-root :focus-visible {
outline: var(--hadara-focus-ring-width) solid var(--hadara-focus-ring-color) !important;
outline-offset: var(--hadara-focus-ring-offset) !important;
}
.hadara-a11y-tile[aria-disabled="true"],
.hadara-a11y-tile:disabled { opacity: .45; pointer-events: none; }
/* ═══════════ 3) النافذة ═══════════ */
.hadara-a11y-panel {
position: absolute;
width: var(--hadara-a11y-panel-width, 360px);
max-width: calc(100vw - var(--hadara-space-xl));
max-height: var(--hadara-a11y-panel-height, 80vh);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--hadara-color-surface);
color: var(--hadara-color-text);
}
.hadara-a11y-panel[hidden] { display: none; }
.hadara-a11y-pos-bottom-right .hadara-a11y-panel,
.hadara-a11y-pos-bottom-left .hadara-a11y-panel { bottom: calc(100% + var(--hadara-space-md)); }
.hadara-a11y-pos-top-right .hadara-a11y-panel,
.hadara-a11y-pos-top-left .hadara-a11y-panel { top: calc(100% + var(--hadara-space-md)); }
.hadara-a11y-pos-middle-right .hadara-a11y-panel,
.hadara-a11y-pos-middle-left .hadara-a11y-panel { top: 50%; transform: translateY(-50%); }
.hadara-a11y-pos-bottom-left .hadara-a11y-panel,
.hadara-a11y-pos-top-left .hadara-a11y-panel,
.hadara-a11y-pos-middle-left .hadara-a11y-panel { left: 0; }
.hadara-a11y-pos-bottom-right .hadara-a11y-panel,
.hadara-a11y-pos-top-right .hadara-a11y-panel,
.hadara-a11y-pos-middle-right .hadara-a11y-panel { right: 0; }
.hadara-a11y-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hadara-space-sm);
padding: var(--hadara-space-md) var(--hadara-space-lg);
background: var(--hadara-color-header-bg, var(--hadara-color-brand));
color: var(--hadara-color-on-brand);
}
.hadara-a11y-panel__title {
margin: 0 !important;
padding: 0 !important;
font-family: var(--hadara-font-ui) !important;
font-size: var(--hadara-font-size-xl) !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
color: var(--hadara-color-on-brand) !important;
}
.hadara-a11y-close {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0 !important;
padding: 0 !important;
background: rgba(255, 255, 255, .14) !important;
color: var(--hadara-color-on-brand) !important;
border: var(--hadara-border-none) !important;
border-radius: var(--hadara-radius-full) !important;
cursor: pointer;
transition: transform var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-close svg { width: 18px; height: 18px; }
.hadara-a11y-close:hover { transform: scale(var(--hadara-hover-scale)); }
.hadara-a11y-close:active { transform: scale(var(--hadara-active-scale)); transition-duration: var(--hadara-transition-fast); }
.hadara-a11y-panel__body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--hadara-space-lg);
}
.hadara-a11y-section + .hadara-a11y-section { margin-block-start: var(--hadara-space-xl); }
.hadara-a11y-section__title {
margin: 0 0 var(--hadara-space-sm) !important;
padding: 0 !important;
font-family: var(--hadara-font-ui) !important;
font-size: var(--hadara-font-size-sm) !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
color: var(--hadara-color-text-muted) !important;
}
.hadara-a11y-note {
margin: var(--hadara-space-sm) 0 0 !important;
font-size: var(--hadara-font-size-sm) !important;
line-height: 1.6 !important;
color: var(--hadara-color-text-muted) !important;
}
.hadara-a11y-stepper {
display: flex;
align-items: center;
gap: var(--hadara-space-sm);
padding: var(--hadara-space-sm);
background: var(--hadara-color-surface-alt);
border: var(--hadara-border-thin) solid var(--hadara-color-border);
border-radius: var(--hadara-radius-md);
}
.hadara-a11y-stepper__btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
background: var(--hadara-color-surface) !important;
color: var(--hadara-color-brand) !important;
border: var(--hadara-border-thin) solid var(--hadara-color-border) !important;
border-radius: var(--hadara-radius-sm) !important;
cursor: pointer;
transition: transform var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-stepper__btn svg { width: 18px; height: 18px; }
.hadara-a11y-stepper__btn:hover { transform: scale(var(--hadara-hover-scale)); box-shadow: var(--hadara-shadow-sm); }
.hadara-a11y-stepper__btn:active { transform: scale(var(--hadara-active-scale)); transition-duration: var(--hadara-transition-fast); }
.hadara-a11y-stepper__btn--reset { margin-inline-start: auto !important; }
.hadara-a11y-stepper__value {
flex: 1 1 auto;
text-align: center;
font-size: var(--hadara-font-size-lg) !important;
font-weight: 700;
color: var(--hadara-color-text) !important;
font-variant-numeric: tabular-nums;
}
/* ── العمودان داخل النافذة ── */
.hadara-a11y-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hadara-a11y-cols .hadara-a11y-col:empty { display: none; }
.hadara-a11y-cols .hadara-a11y-col .hadara-a11y-section:first-child { margin-block-start: var(--hadara-space-xl); }
.hadara-a11y-cols.is-two {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--hadara-space-md);
}
/* الفاصل بين العمودين — على العمود الثاني وحده حتى لا يتضاعف الخط. */
.hadara-a11y-cols.is-two .hadara-a11y-col--b {
border-inline-start: var(--hadara-border-thin) solid var(--hadara-color-border);
padding-inline-start: var(--hadara-space-md);
}
.hadara-a11y-cols.is-two .hadara-a11y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hadara-a11y-cols.is-two .hadara-a11y-tile { min-height: 78px; font-size: 11px !important; }
.hadara-a11y-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hadara-space-sm); }
.hadara-a11y-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--hadara-space-xs);
min-height: 88px;
margin: 0 !important;
padding: var(--hadara-space-md) var(--hadara-space-xs) !important;
background: var(--hadara-color-surface-alt) !important;
color: var(--hadara-color-text) !important;
border: var(--hadara-border-thin) solid var(--hadara-color-border) !important;
border-radius: var(--hadara-radius-md) !important;
font-family: var(--hadara-font-ui) !important;
font-size: var(--hadara-font-size-sm) !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: normal !important;
text-align: center;
cursor: pointer;
transition: transform var(--hadara-transition-base) var(--hadara-ease),
box-shadow var(--hadara-transition-base) var(--hadara-ease),
background-color var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-tile__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--hadara-color-brand); }
.hadara-a11y-tile__icon svg { width: 100%; height: 100%; }
.hadara-a11y-tile__levels { display: flex; gap: 3px; margin-block-start: auto; }
.hadara-a11y-tile__levels i { width: 12px; height: 3px; border-radius: var(--hadara-radius-full); background: var(--hadara-color-border); }
.hadara-a11y-tile:hover { transform: scale(var(--hadara-hover-scale)); box-shadow: var(--hadara-shadow-md); }
.hadara-a11y-tile:active { transform: scale(var(--hadara-active-scale)); transition-duration: var(--hadara-transition-fast); }
.hadara-a11y-tile[aria-pressed="true"] {
background: var(--hadara-color-brand) !important;
color: var(--hadara-color-on-brand) !important;
border-color: var(--hadara-color-brand) !important;
box-shadow: var(--hadara-shadow-md);
}
.hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__icon { color: var(--hadara-color-accent); }
.hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__levels i { background: rgba(255, 255, 255, .3); }
.hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__levels i.is-on { background: var(--hadara-color-accent); }
/* ═══════════ زر «خط مريح للعين» بثلاثة خيارات ═══════════
خمسة تصاميم مختلفة السلوك + التصميم الأصلي (زر tile عادي) محفوظ كما هو. */
.hadara-a11y-rf {
grid-column: 1 / -1;
margin-block-start: var(--hadara-space-sm);
padding: var(--hadara-space-sm);
background: var(--hadara-color-surface-alt);
border: var(--hadara-border-thin) solid var(--hadara-color-border);
border-radius: var(--hadara-radius-md);
}
.hadara-a11y-rf__title {
display: flex !important;
align-items: center;
gap: var(--hadara-space-xs);
margin: 0 0 var(--hadara-space-sm) !important;
padding: 0 !important;
font-size: var(--hadara-font-size-sm) !important;
font-weight: 700 !important;
color: var(--hadara-color-text) !important;
line-height: 1.4 !important;
}
.hadara-a11y-rf__icon { display: inline-flex; width: 16px; height: 16px; color: var(--hadara-color-brand); }
.hadara-a11y-rf__icon svg { width: 100%; height: 100%; }
.hadara-a11y-rf__badge {
margin-inline-start: auto;
padding: 1px 7px;
background: var(--hadara-color-brand);
color: var(--hadara-color-on-brand);
border-radius: var(--hadara-radius-full);
font-size: 10px;
font-weight: 700;
}
.hadara-a11y-rf__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hadara-a11y-rf__opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: var(--hadara-space-xs) 2px !important;
background: var(--hadara-color-surface) !important;
color: var(--hadara-color-text) !important;
border: var(--hadara-border-thin) solid var(--hadara-color-border) !important;
font-family: var(--hadara-font-ui) !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
cursor: pointer;
transition: background-color var(--hadara-transition-base) var(--hadara-ease),
color var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-rf__sample {
font-family: var(--hadara-a11y-rf-sample, inherit) !important;
font-size: 17px !important;
line-height: 1.2 !important;
}
.hadara-a11y-rf__name { color: var(--hadara-color-text-muted); }
.hadara-a11y-rf__opt[aria-pressed="true"] {
background: var(--hadara-color-brand) !important;
color: var(--hadara-color-on-brand) !important;
border-color: var(--hadara-color-brand) !important;
}
.hadara-a11y-rf__opt[aria-pressed="true"] .hadara-a11y-rf__name { color: var(--hadara-color-accent); }
/* التصميم ١: شريط مقسّم — خانات متلاصقة بلا فواصل، وحدود مشتركة. */
.hadara-a11y-rf--segmented .hadara-a11y-rf__options { border-radius: var(--hadara-radius-sm); overflow: hidden; }
.hadara-a11y-rf--segmented .hadara-a11y-rf__opt { border-radius: 0 !important; border-inline-start-width: 0 !important; }
.hadara-a11y-rf--segmented .hadara-a11y-rf__opt:last-child { border-inline-start-width: var(--hadara-border-thin) !important; }
.hadara-a11y-rf--segmented .hadara-a11y-rf__opt:first-child { border-inline-start-width: var(--hadara-border-thin) !important; }
/* التصميم ٢: شارات منفصلة مستديرة بالكامل. */
.hadara-a11y-rf--chips .hadara-a11y-rf__options { gap: var(--hadara-space-xs); }
.hadara-a11y-rf--chips .hadara-a11y-rf__opt {
flex-direction: row;
gap: var(--hadara-space-xs);
border-radius: var(--hadara-radius-full) !important;
padding: 5px var(--hadara-space-xs) !important;
}
.hadara-a11y-rf--chips .hadara-a11y-rf__sample { font-size: 13px !important; }
/* التصميم ٣: بطاقات بمعاينة كبيرة للخط. */
.hadara-a11y-rf--cards .hadara-a11y-rf__options { gap: var(--hadara-space-xs); }
.hadara-a11y-rf--cards .hadara-a11y-rf__opt {
gap: var(--hadara-space-xs);
min-height: 62px;
border-radius: var(--hadara-radius-md) !important;
border-width: var(--hadara-border-medium) !important;
box-shadow: var(--hadara-shadow-sm);
}
.hadara-a11y-rf--cards .hadara-a11y-rf__sample { font-size: 22px !important; }
/* التصميم ٤: قرص بثلاث درجات — مؤشّر متدرّج الارتفاع يوضّح الدرجة. */
.hadara-a11y-rf--dial .hadara-a11y-rf__options {
gap: 0;
padding: 4px;
background: var(--hadara-color-surface);
border: var(--hadara-border-thin) solid var(--hadara-color-border);
border-radius: var(--hadara-radius-full);
align-items: end;
}
.hadara-a11y-rf--dial .hadara-a11y-rf__opt {
border: 0 !important;
background: transparent !important;
border-radius: var(--hadara-radius-full) !important;
position: relative;
padding-block-end: 12px !important;
}
.hadara-a11y-rf--dial .hadara-a11y-rf__opt::after {
content: "";
position: absolute;
inset-block-end: 3px;
inset-inline-start: 50%;
transform: translateX(50%);
width: 6px;
border-radius: var(--hadara-radius-full);
background: var(--hadara-color-border);
}
.hadara-a11y-rf--dial .hadara-a11y-rf__opt--1::after { height: 4px; }
.hadara-a11y-rf--dial .hadara-a11y-rf__opt--2::after { height: 7px; }
.hadara-a11y-rf--dial .hadara-a11y-rf__opt--3::after { height: 10px; }
.hadara-a11y-rf--dial .hadara-a11y-rf__opt[aria-pressed="true"] {
background: var(--hadara-color-brand) !important;
}
.hadara-a11y-rf--dial .hadara-a11y-rf__opt[aria-pressed="true"]::after { background: var(--hadara-color-accent); }
/* التصميم ٥: زائد وناقص مع اسم الخط الحالي. */
.hadara-a11y-rf__stepper {
display: flex;
align-items: center;
gap: var(--hadara-space-xs);
}
.hadara-a11y-rf__step {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
background: var(--hadara-color-surface) !important;
color: var(--hadara-color-brand) !important;
border: var(--hadara-border-thin) solid var(--hadara-color-border) !important;
border-radius: var(--hadara-radius-sm) !important;
cursor: pointer;
}
.hadara-a11y-rf__step svg { width: 16px; height: 16px; }
.hadara-a11y-rf__step:hover { box-shadow: var(--hadara-shadow-sm); }
.hadara-a11y-rf__value {
flex: 1 1 auto;
text-align: center;
font-size: var(--hadara-font-size-sm) !important;
font-weight: 700;
color: var(--hadara-color-text) !important;
}
.hadara-a11y-rf__reset {
display: flex;
align-items: center;
justify-content: center;
gap: var(--hadara-space-xs);
width: 100%;
margin: var(--hadara-space-xs) 0 0 !important;
padding: 4px !important;
background: transparent !important;
color: var(--hadara-color-text-muted) !important;
border: 0 !important;
font-family: var(--hadara-font-ui) !important;
font-size: 11px !important;
font-weight: 600 !important;
cursor: pointer;
}
.hadara-a11y-rf__reset svg { width: 13px; height: 13px; }
.hadara-a11y-rf__reset:hover { color: var(--hadara-color-brand) !important; text-decoration: underline; }
.hadara-a11y-rf.is-off .hadara-a11y-rf__reset { visibility: hidden; }
.hadara-a11y-panel__footer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hadara-space-sm);
padding: var(--hadara-space-md) var(--hadara-space-lg);
background: var(--hadara-color-surface-alt);
border-block-start: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-action {
display: flex;
align-items: center;
justify-content: center;
gap: var(--hadara-space-xs);
margin: 0 !important;
padding: var(--hadara-space-sm) var(--hadara-space-md) !important;
background: var(--hadara-color-surface) !important;
color: var(--hadara-color-text) !important;
border: var(--hadara-border-thin) solid var(--hadara-color-border) !important;
border-radius: var(--hadara-radius-md) !important;
font-family: var(--hadara-font-ui) !important;
font-size: var(--hadara-font-size-sm) !important;
font-weight: 700 !important;
cursor: pointer;
transition: transform var(--hadara-transition-base) var(--hadara-ease);
}
.hadara-a11y-action svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hadara-a11y-action:hover { transform: scale(var(--hadara-hover-scale)); box-shadow: var(--hadara-shadow-md); }
.hadara-a11y-action:active { transform: scale(var(--hadara-active-scale)); transition-duration: var(--hadara-transition-fast); }
.hadara-a11y-action--normal[aria-pressed="true"] {
background: var(--hadara-color-accent) !important;
color: #06231f !important;
border-color: var(--hadara-color-accent) !important;
}
.hadara-a11y-action--reset { color: var(--hadara-color-danger) !important; }
.hadara-a11y-statement-link {
display: flex;
align-items: center;
justify-content: center;
gap: var(--hadara-space-xs);
padding: var(--hadara-space-sm) var(--hadara-space-lg);
background: var(--hadara-color-surface-alt);
color: var(--hadara-color-text) !important;
font-size: var(--hadara-font-size-sm) !important;
text-decoration: none !important;
border-block-start: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-statement-link svg { width: 16px; height: 16px; }
.hadara-a11y-statement-link:hover { background: var(--hadara-color-surface); }
.hadara-a11y-disclaimer {
margin: 0 !important;
padding: var(--hadara-space-sm) var(--hadara-space-lg) var(--hadara-space-md) !important;
background: var(--hadara-color-surface-alt);
font-size: 11px !important;
line-height: 1.6 !important;
color: var(--hadara-color-text-muted) !important;
border-block-start: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-audit__list { margin: var(--hadara-space-sm) 0 0 !important; padding: 0 !important; list-style: none !important; }
.hadara-a11y-audit__list li {
display: flex;
align-items: flex-start;
gap: var(--hadara-space-xs);
padding: var(--hadara-space-xs) 0;
font-size: var(--hadara-font-size-sm);
line-height: 1.6;
border-block-end: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-audit__badge {
flex: 0 0 auto;
min-width: 46px;
text-align: center;
padding: 1px var(--hadara-space-xs);
border-radius: var(--hadara-radius-sm);
font-size: 11px;
font-weight: 700;
color: #fff;
}
.hadara-a11y-audit__badge.is-pass { background: #1e7a4b; }
.hadara-a11y-audit__badge.is-warning { background: #a06a00; }
.hadara-a11y-audit__badge.is-error { background: var(--hadara-color-danger); }
.hadara-a11y-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* عنوان رئيسي مخفي بصريًا ومقروء للقارئات الشاشية — لا يزيح أي شيء في التخطيط. */
.hadara-a11y-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* أدوات القراءة المرسومة ديناميكيًا */
.hadara-a11y-guide {
position: fixed;
inset-inline: 0;
height: 4px;
background: var(--hadara-color-accent);
box-shadow: var(--hadara-shadow-md);
pointer-events: none;
z-index: calc(var(--hadara-a11y-zindex, 2147483000) - 2);
}
.hadara-a11y-mask {
position: fixed;
inset-inline: 0;
background: rgba(0, 0, 0, .72);
pointer-events: none;
z-index: calc(var(--hadara-a11y-zindex, 2147483000) - 2);
}
@media (max-width: 782px) {
.hadara-a11y-root {
--hadara-a11y-offset-x: var(--hadara-a11y-offset-x-mobile, 14px);
--hadara-a11y-offset-y: var(--hadara-a11y-offset-y-mobile, 14px);
}
.hadara-a11y-pos-middle-right,
.hadara-a11y-pos-middle-left {
top: auto;
bottom: var(--hadara-a11y-offset-y-mobile, 14px);
transform: none;
}
.hadara-a11y-panel {
position: fixed;
left: var(--hadara-space-md);
right: var(--hadara-space-md);
bottom: var(--hadara-space-md);
top: auto;
width: auto;
max-width: none;
transform: none;
}
.hadara-a11y-pos-top-right .hadara-a11y-panel,
.hadara-a11y-pos-top-left .hadara-a11y-panel { top: auto; }
.hadara-a11y-cols.is-two { grid-template-columns: minmax(0, 1fr); }
.hadara-a11y-cols.is-two .hadara-a11y-col--b { border-inline-start: 0; padding-inline-start: 0; }
.hadara-a11y-hide-mobile { display: none; }
}
@media (max-width: 360px) {
.hadara-a11y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ═══════════ 4) Overrides على الموقع ═══════════ */
/* ═══ الوضع الليلي ═══
نقل بالكامل إلى assets/css/hadara-a11y-dark.css — نظام Design Tokens كامل
بدل مرشّح `filter: invert()`. سبب النقل الحاسم: المرشّح كان يُوضع
على `` فيتصادم مع `sat-*` أدناه التي تضع `filter` على `` أيضاً —
وقياس حيّ أثبت أن `sat-grayscale` كان يمحو الوضع الليلي بالكامل. */
/* ═══ تباين عالٍ — أسود وذهبي ═══
استثناء موثّق لاستخدام المحدّد الشامل: التباين العالي بطبيعته تغطية مطلقة،
وأي عنصر يفلت منه يُنتج بقعة بيضاء تُفسد الوضع كله — وهذا ما اشتكى منه المستخدم
("البعض يتم تطبيق اللون عليه وبعضه لا"). لذلك تُقصف هنا كل الخلفيات والتدرّجات
والظلال بلا استثناء داخل body، مع استبعاد واجهة الإضافة نفسها فقط. */
html.hadara-a11y-color-contrast { background-color: var(--hadara-a11y-hc-bg) !important; color-scheme: dark; }
html.hadara-a11y-color-contrast body { background-color: var(--hadara-a11y-hc-bg) !important; color: var(--hadara-a11y-hc-fg) !important; }
html.hadara-a11y-color-contrast body *:not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-color-contrast body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::before,
html.hadara-a11y-color-contrast body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::after {
background-color: transparent !important;
background-image: none !important;
color: var(--hadara-a11y-hc-fg) !important;
border-color: var(--hadara-a11y-hc-border) !important;
text-shadow: none !important;
box-shadow: none !important;
fill: var(--hadara-a11y-hc-fg) !important;
}
html.hadara-a11y-color-contrast body :is(input, textarea, select, button, [role="button"]):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
background-color: var(--hadara-a11y-hc-bg) !important;
color: var(--hadara-a11y-hc-fg) !important;
border: var(--hadara-border-medium) solid var(--hadara-a11y-hc-border) !important;
}
html.hadara-a11y-color-contrast body a:not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-color-contrast body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) * {
color: var(--hadara-a11y-hc-link) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/*
img/video غير مذكورين هنا عمداً: القيمة الافتراضية لإعداد "استثناءات
التباين العالي" (hc_exclude) تشملهما — يبقيان بلا أي مساسٍ إطلاقاً بطلبٍ
صريح، بما في ذلك هذا الإطار الذي كان يُضاف للتمييز. */
html.hadara-a11y-color-contrast body :is(picture, canvas, iframe):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
outline: var(--hadara-border-thin) solid var(--hadara-a11y-hc-border) !important;
}
/* ═══ أبيض وأسود ═══
أحادي اللون كامل: الوسائط تُحوَّل إلى رمادي، والنص أسود صريح على أبيض صريح.
لا يُوضع المرشّح على حتى لا تفقد نافذة الإضافة نفسها ألوانها. */
html.hadara-a11y-color-bw { background-color: var(--hadara-a11y-bw-bg) !important; }
html.hadara-a11y-color-bw body { background-color: var(--hadara-a11y-bw-bg) !important; color: var(--hadara-a11y-bw-fg) !important; }
html.hadara-a11y-color-bw body *:not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-color-bw body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::before,
html.hadara-a11y-color-bw body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::after {
background-color: transparent !important;
background-image: none !important;
color: var(--hadara-a11y-bw-fg) !important;
border-color: var(--hadara-a11y-bw-fg) !important;
text-shadow: none !important;
fill: var(--hadara-a11y-bw-fg) !important;
}
html.hadara-a11y-color-bw body a:not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-color-bw body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) * {
color: var(--hadara-a11y-bw-fg) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
font-weight: 700 !important;
}
html.hadara-a11y-color-bw body :is(input, textarea, select, button, [role="button"]):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
background-color: var(--hadara-a11y-bw-bg) !important;
color: var(--hadara-a11y-bw-fg) !important;
border: var(--hadara-border-medium) solid var(--hadara-a11y-bw-fg) !important;
}
html.hadara-a11y-color-bw body :is(img, picture, video, canvas, iframe, svg):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
filter: grayscale(1) contrast(1.08) !important;
}
/* تباين فاتح */
html.hadara-a11y-color-light body { background-color: #ffffff !important; color: #000000 !important; }
html.hadara-a11y-color-light body :is(div, section, article, aside, header, footer, nav, main,
ul, ol, li, p, span, table, thead, tbody, tr, td, th, form, figure, figcaption, blockquote,
h1, h2, h3, h4, h5, h6, label, dl, dt, dd, details, summary, address):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
background-color: transparent !important;
color: #000000 !important;
border-color: #000000 !important;
text-shadow: none !important;
}
html.hadara-a11y-color-light body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) { color: #0000cc !important; text-decoration: underline !important; }
html.hadara-a11y-color-light body :is(input, textarea, select, button):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
background-color: #ffffff !important;
color: #000000 !important;
border: var(--hadara-border-medium) solid #000000 !important;
}
/* عكس الألوان + أسرة التشبّع — تُدمج في مرشّح واحد لتفادي التعارض. */
html.hadara-a11y-color-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.hadara-a11y-sat-grayscale { filter: grayscale(1); }
html.hadara-a11y-sat-high { filter: saturate(1.7); }
html.hadara-a11y-sat-low { filter: saturate(.45); }
html.hadara-a11y-color-invert.hadara-a11y-sat-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.hadara-a11y-color-invert.hadara-a11y-sat-high { filter: invert(1) hue-rotate(180deg) saturate(1.7); }
html.hadara-a11y-color-invert.hadara-a11y-sat-low { filter: invert(1) hue-rotate(180deg) saturate(.45); }
/* إعادة قلب الوسائط حتى تبقى الصور طبيعية عند عكس الألوان. */
html.hadara-a11y-color-invert body :is(img, picture, video, iframe, canvas):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
filter: invert(1) hue-rotate(180deg);
}
/* ═══ التباعد وارتفاع الأسطر ═══
القيم كلها من الإعدادات عبر متغيّرات، فلكل مستوى من المستويات الثلاثة رقمه
الذي يضبطه المشرف. نطاق ارتفاع الأسطر (هل يشمل العناوين؟) يُولَّد من PHP.
ملاحظة على العربية: الخطّ العربي متّصل، و`letter-spacing` يفكّ اتصال الحروف
ويبدو أثره كفراغٍ بين الكلمات. لذلك القيم الافتراضية هنا صغيرة جدًا مقارنةً
بتباعد الكلمات، حتى تبقى الأداتان متمايزتين بصريًا. */
html.hadara-a11y-ls-1 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { letter-spacing: var(--hadara-a11y-ls-1) !important; }
html.hadara-a11y-ls-2 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { letter-spacing: var(--hadara-a11y-ls-2) !important; }
html.hadara-a11y-ls-3 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { letter-spacing: var(--hadara-a11y-ls-3) !important; }
html.hadara-a11y-ws-1 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { word-spacing: var(--hadara-a11y-ws-1) !important; }
html.hadara-a11y-ws-2 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { word-spacing: var(--hadara-a11y-ws-2) !important; }
html.hadara-a11y-ws-3 body :is(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt):not([data-hadara-a11y]):not([data-hadara-a11y] *) { word-spacing: var(--hadara-a11y-ws-3) !important; }
/* تباعد الفقرات يرافق أي مستوى من مستويات ارتفاع الأسطر عند تفعيله في الإعدادات. */
html:is(.hadara-a11y-lh-1, .hadara-a11y-lh-2, .hadara-a11y-lh-3).hadara-a11y-sp-para body :is(p, li, blockquote):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
margin-block-end: var(--hadara-a11y-sp-para) !important;
}
/* محاذاة النص: 1 = بداية السطر، 2 = وسط، 3 = ضبط */
html.hadara-a11y-al-1 body :is(p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6):not([data-hadara-a11y]):not([data-hadara-a11y] *) { text-align: start !important; }
html.hadara-a11y-al-2 body :is(p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6):not([data-hadara-a11y]):not([data-hadara-a11y] *) { text-align: center !important; }
html.hadara-a11y-al-3 body :is(p, li, td, th, blockquote, figcaption):not([data-hadara-a11y]):not([data-hadara-a11y] *) { text-align: justify !important; }
/* خط مريح للعين — ثلاثة خطوط يختار الزائر بينها.
مكدّسات الخطوط تأتي من الإعدادات عبر --hadara-a11y-rf-1..3، والمحدّدات نفسها
تُولَّد من PHP لأن الإعدادات تتحكّم بشمول العناوين وعناصر الواجهة.
يبقى الصنف القديم readable-font يعمل كمرادف للخيار الأول (توافق خلفي). */
html.hadara-a11y-readable-font body,
html.hadara-a11y-readable-font body :is(p, li, span, a, td, th, label, button, input, textarea,
select, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt, legend, summary):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
font-family: var(--hadara-a11y-rf-1) !important;
}
/* المؤشر */
html.hadara-a11y-cursor-big body :not([data-hadara-a11y]):not([data-hadara-a11y] *) {
cursor: url("data:image/svg+xml;utf8,") 3 2, auto;
}
html.hadara-a11y-cursor-bigger body :not([data-hadara-a11y]):not([data-hadara-a11y] *) {
cursor: url("data:image/svg+xml;utf8,") 5 3, auto;
}
html.hadara-a11y-cursor-big body :is(a, button, [role="button"], input[type="submit"], input[type="button"], label, summary):not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-cursor-bigger body :is(a, button, [role="button"], input[type="submit"], input[type="button"], label, summary):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
cursor: url("data:image/svg+xml;utf8,") 8 2, pointer;
}
/* ═══ تمييز الروابط ═══
الأساس واحد لكل الروابط بلا استثناء — بما فيها روابط المقالات والمنشورات —
حتى لا يظهر بعضها بخطٍّ سفلي فقط وبعضها بإطار. أربعة أنماط يختار المشرف بينها.
ملاحظة تصادم مؤكَّدة: صفحات Elementor تحمل `.elementor a{box-shadow:none}` بأولوية
تتغلّب على أي محدّد بصنف واحد على ؛ ولذلك كل خصائص الإطار هنا !important. */
html.hadara-a11y-links body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) {
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 2px !important;
outline: var(--hadara-a11y-link-width) solid var(--hadara-a11y-link-color) !important;
outline-offset: 2px !important;
border-radius: var(--hadara-a11y-link-radius) !important;
background-color: var(--hadara-a11y-link-bg) !important;
color: var(--hadara-a11y-link-color) !important;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html.hadara-a11y-links body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) :is(span, strong, em, b, i, h1, h2, h3, h4, h5, h6, p) {
color: var(--hadara-a11y-link-color) !important;
}
/* نمط: إطار فقط — بلا خلفية، يناسب المواقع الملوّنة. */
html.hadara-a11y-lk-frame body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) {
background-color: transparent !important;
text-decoration: none !important;
}
/* نمط: إطار + خلفية مميّزة (الأوضح للقراءة). */
html.hadara-a11y-lk-badge body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) {
padding: 1px 5px !important;
outline-offset: 0 !important;
}
/* نمط: إطار مزدوج بارز. */
html.hadara-a11y-lk-double body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) {
outline-offset: 3px !important;
box-shadow: 0 0 0 var(--hadara-a11y-link-width) var(--hadara-a11y-link-color) !important;
}
/* نمط: خط سفلي سميك فقط — بلا أي إطار. */
html.hadara-a11y-lk-under body a:not([data-hadara-a11y]):not([data-hadara-a11y] *) {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
text-decoration-thickness: 3px !important;
text-underline-offset: 4px !important;
text-decoration-color: var(--hadara-a11y-link-color) !important;
}
/* ═══ إخفاء الصور ═══
الصور الحقيقية تُخفى بـ visibility للحفاظ على التخطيط، لكن أغلب صور القوالب
الحديثة (Elementor خصوصًا) ليست وسوم ![]()
بل background-image على حاويات —
ولهذا بدا الزر "لا يفعل شيئًا". الصنف الثاني يعالج ذلك حين يُفعّله المشرف. */
html.hadara-a11y-hide-images body :is(img, picture, video, iframe, svg, canvas, object, embed, figure > img):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
visibility: hidden !important;
}
html.hadara-a11y-hide-images.hadara-a11y-hi-bg body *:not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-hide-images.hadara-a11y-hi-bg body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::before,
html.hadara-a11y-hide-images.hadara-a11y-hi-bg body *:not([data-hadara-a11y]):not([data-hadara-a11y] *)::after {
background-image: none !important;
}
/* البديل المرئي يُدرَج بـ JS كعنصر شقيق بأبعاد الصورة نفسها،
لأن العنصر المخفي بـ visibility لا يرسم لا حدوده ولا عناصره الزائفة. */
.hadara-a11y-imgph {
display: inline-block;
box-sizing: border-box;
background: repeating-linear-gradient(45deg, rgba(120, 130, 145, .10) 0 8px, rgba(120, 130, 145, .18) 8px 16px);
border: var(--hadara-border-medium) dashed rgba(120, 130, 145, .55);
border-radius: var(--hadara-radius-sm);
vertical-align: middle;
}
/* تكبير الصفحة */
html.hadara-a11y-zoom-1 body { zoom: 1.1; }
html.hadara-a11y-zoom-2 body { zoom: 1.25; }
html.hadara-a11y-zoom-3 body { zoom: 1.4; }
/* ═══ وضع التركيز ═══
إعادة بناء ثانية بعد أن أبلغ المستخدم أن النسخة السابقة "غيّرت كل شيء
وأخفت أغلب المحتوى بشكل مضلّل". سببان حقيقيان مؤكَّدان:
١) قاعدة التعتيم كانت **بلا `!important`**، فبقيت رهينة أي قاعدة أخرى في
الموقع تضبط `opacity` — بعض العناصر تعتّم صحيحاً وبعضها لا يتأثر إطلاقاً،
نتيجة عشوائية بحسب وجود قاعدة منافسة من عدمه. أُضيف `!important` الآن.
٢) النطاق كان **الصفحة كاملةً** — أي تمريرة فأرة فوق الهيدر أو التذييل أو
القوائم (عناصر خارج `focusSelector()` في JS) لا تُحرّك الهدف، فيبقى
تعتيم كل الصفحة عالقاً على آخر فقرة رُكِّز عليها بينما المستخدم ينظر
فعلياً إلى منطقةٍ أخرى تبدو "معتّمة بلا سبب" — وهذا "التضليل" بالضبط.
الحلّ: تقييد التعتيم على **منطقة المحتوى الرئيسية فقط** (`main` أو ما
يعادلها)؛ الهيدر والتذييل والقوائم تبقى بكامل وضوحها دائماً بلا أي
تأثير، ويُنطفأ التعتيم كلياً إذا لم يكن المؤشر داخل تلك المنطقة أصلاً. */
html.hadara-a11y-focus-mode body [data-hadara-a11y-fmscope] :is(section, article, aside, div,
ul, ol, dl, table, form, figure, p, li, h1, h2, h3, h4, h5, h6, blockquote):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
opacity: var(--hadara-a11y-fm-dim, .18) !important;
transition: opacity var(--hadara-transition-base) var(--hadara-ease),
filter var(--hadara-transition-base) var(--hadara-ease);
}
/* الكتلة النشطة وكل سلفٍ يحتويها: وضوحٌ كامل. */
html.hadara-a11y-focus-mode body [data-hadara-a11y-focus],
html.hadara-a11y-focus-mode body :has([data-hadara-a11y-focus]) {
opacity: 1 !important;
filter: none !important;
}
/* خارج منطقة المحتوى — هيدر، تذييل، قوائم، شريطٌ جانبي — لا تعتيم إطلاقاً،
احترازاً حتى لو أخطأ تصنيف `focusSelector()` عنصراً ما. */
html.hadara-a11y-focus-mode body :is(header, footer, nav, [role="banner"], [role="navigation"],
[role="contentinfo"]):not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-focus-mode body :is(header, footer, nav, [role="banner"], [role="navigation"],
[role="contentinfo"]):not([data-hadara-a11y]):not([data-hadara-a11y] *) * {
opacity: 1 !important;
filter: none !important;
}
/* ضبابٌ اختياري على ما هو خارج التركيز — يُطبَّق على الكتل الورقية فقط
لأن وضعه على كل حاوية يُنتج طبقاتٍ متراكمة تُثقل الرسم. */
html.hadara-a11y-focus-mode body [data-hadara-a11y-fmscope] :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption):not([data-hadara-a11y]):not([data-hadara-a11y] *) {
filter: blur(var(--hadara-a11y-fm-blur, 0px));
}
html.hadara-a11y-focus-mode body [data-hadara-a11y-focus] :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption) {
filter: none !important;
opacity: 1 !important;
}
/* إطار يحدّد الكتلة النشطة بوضوح — اختياري من الإعدادات. */
html.hadara-a11y-focus-mode[data-hadara-a11y-fm="ring"] body [data-hadara-a11y-focus] {
outline: 2px solid var(--hadara-a11y-fm-ring, #00b2a9) !important;
outline-offset: 6px !important;
border-radius: var(--hadara-radius-sm);
}
/* ═══ تقليل الحركة ═══
استثناء موثّق للقاعدة 0.4: يحتاج تغطية شاملة بطبيعته، لكنه مقصور على خصائص
الحركة فقط ولا يمس لونًا ولا حجمًا ولا تخطيطًا.
**إصلاح جوهري**: النسخة السابقة كانت تُصفِّر **مدّة** الانتقال (`.001ms`)
بدل إلغائه، فيبقى انتقالٌ حقيقي قائماً يُنفَّذ خلال جزءٍ من الميلي ثانية —
والمتصفح قد يرسم إطاراً وسيطاً له، فيظهر العنصر وكأنه "قفز" أو "تحرّك بسرعة"
بدل أن يبقى ساكناً — بالضبط ما اشتكى منه المستخدم: "تحدث الأمور سريعة
بالعكس". الإصلاح: إلغاء الانتقال والحركة **بالكامل** (`none`) لا تسريعهما،
فلا يُرسَم أي إطار حركةٍ إطلاقاً وتظهر القيمة النهائية مباشرةً. */
html.hadara-a11y-motion-reduced,
html.hadara-a11y-motion-reduced body,
html.hadara-a11y-motion-reduced body :not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-motion-reduced body :not([data-hadara-a11y]):not([data-hadara-a11y] *)::before,
html.hadara-a11y-motion-reduced body :not([data-hadara-a11y]):not([data-hadara-a11y] *)::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
/* التمرير السلس على مستوى الصفحة والحاويات القابلة للتمرير. */
html.hadara-a11y-motion-reduced,
html.hadara-a11y-motion-reduced body,
html.hadara-a11y-motion-reduced body [style*="scroll-behavior"] { scroll-behavior: auto !important; }
/* تجميد احترازي إضافي — يبقى مفيداً لأنيميشنٍ يُعاد ضبطه برمجياً بعد التحميل
عبر خاصيةٍ لا يغطّيها المحدِّد الشامل أعلاه (نادر لكن وارد). */
html.hadara-a11y-motion-frozen body :not([data-hadara-a11y]):not([data-hadara-a11y] *),
html.hadara-a11y-motion-frozen body :not([data-hadara-a11y]):not([data-hadara-a11y] *)::before,
html.hadara-a11y-motion-frozen body :not([data-hadara-a11y]):not([data-hadara-a11y] *)::after {
animation-play-state: paused !important;
}
/* الفيديو الزخرفي في الخلفيات يُخفى لأنه حركة مستمرة لا يوقفها CSS. */
html.hadara-a11y-motion-reduced body :is(.elementor-background-video-container,
[data-hadara-a11y-bgvideo]):not([data-hadara-a11y]):not([data-hadara-a11y] *) { display: none !important; }
/* تصفّح لوحة المفاتيح */
html.hadara-a11y-keyboard body :is(a, button, input, select, textarea, summary, [tabindex]):not([data-hadara-a11y]):not([data-hadara-a11y] *):focus-visible {
outline: var(--hadara-focus-ring-width) solid var(--hadara-focus-ring-color) !important;
outline-offset: var(--hadara-focus-ring-offset) !important;
box-shadow: 0 0 0 6px rgba(255, 183, 3, .28) !important;
}
[data-hadara-a11y-skip-target] { scroll-margin-block-start: var(--hadara-space-2xl); }
/* ═══════════ 5) تمييز نتائج الفحص على الصفحة ═══════════
حتى يعرف المشرف أين بالضبط الرابط بلا نص أو الحقل بلا label بدل رقم مجرّد. */
[data-hadara-a11y-flag] {
outline: 3px solid #ff3b30 !important;
outline-offset: 2px !important;
background-color: rgba(255, 59, 48, .12) !important;
scroll-margin-block: 120px;
}
[data-hadara-a11y-flag="warning"] {
outline-color: #ff9500 !important;
background-color: rgba(255, 149, 0, .14) !important;
}
.hadara-a11y-audit__list li { flex-wrap: wrap; }
.hadara-a11y-audit__find {
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
color: var(--hadara-color-brand) !important;
font-family: var(--hadara-font-ui) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-decoration: underline !important;
cursor: pointer;
}
.hadara-a11y-audit__detail {
flex: 1 1 100%;
margin: 2px 0 0 !important;
padding: 0 !important;
color: var(--hadara-color-text-muted) !important;
font-size: 11px !important;
line-height: 1.6 !important;
direction: ltr;
text-align: start;
word-break: break-all;
}
/* وميض تأكيد وصول "تخطّي إلى المحتوى" — يزول تلقائيًا بعد ١٫٦ث.
بدونه يبدو الزر بلا أثر حين تكون بداية المحتوى قريبةً من أعلى الصفحة. */
[data-hadara-a11y-landed] {
outline: 3px solid var(--hadara-color-accent, #00b2a9) !important;
outline-offset: 6px !important;
border-radius: var(--hadara-radius-sm, 6px);
animation: hadara-a11y-landed 1.6s ease-out 1;
}
@keyframes hadara-a11y-landed {
0% { outline-color: var(--hadara-color-accent, #00b2a9); background-color: rgba(0, 178, 169, .22); }
100% { outline-color: transparent; background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
[data-hadara-a11y-landed] { animation: none; }
}