/* ==========================================================================
   ui.css — shared components and accessibility layer. Loaded LAST on every page.
   Uses tokens.css only. Sections: 1 Buttons · 2 Inputs · 3 Focus · 4 Hidden controls · 5 Reduced motion
   ========================================================================== */

/* 1. Buttons ---------------------------------------------------------------
   One button. Base classes: .theme-btn (template pages), .btn (generated pages),
   .cta-button (header). Variants: default = primary, .btn--outline (alias .btn-line),
   .btn--ghost. Sizes: .btn--sm / .btn--md / .btn--lg.
   States: hover, :focus-visible, :disabled / [aria-disabled="true"] / .is-disabled,
   loading = .is-loading or inside a form[aria-busy="true"].                   */
html body .theme-btn, html body .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html body .theme-btn, html body .btn, html body .cta-button {
  border-radius: var(--radius-btn);
  font-family: var(--font-body); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
/* primary */
html body .theme-btn:not(.btn--outline):not(.btn--ghost),
html body .cta-button,
html body .btn.btn-lime {
  background-color: var(--color-brand); color: var(--color-on-brand) !important; opacity: 1;
}
html body .theme-btn:not(.btn--outline):not(.btn--ghost):hover,
html body .cta-button:hover,
html body .btn.btn-lime:hover {
  background-color: var(--color-brand-hover); opacity: 1;
}
/* outline */
html body .theme-btn.btn--outline, html body .btn.btn--outline, html body .btn.btn-line {
  background-color: transparent; color: var(--color-text) !important; border: 1px solid var(--color-border-strong);
}
html body .theme-btn.btn--outline:hover, html body .btn.btn--outline:hover, html body .btn.btn-line:hover {
  border-color: var(--color-brand); color: var(--color-brand) !important;
}
/* ghost */
html body .theme-btn.btn--ghost, html body .btn.btn--ghost {
  background-color: transparent; color: var(--color-text) !important; border: 1px solid transparent;
}
html body .theme-btn.btn--ghost:hover, html body .btn.btn--ghost:hover {
  background-color: rgba(255, 255, 255, .06); color: var(--color-brand) !important;
}
/* sizes (opt-in, so existing layouts keep their padding) */
html body .btn--sm { min-height: 36px; padding: 8px 16px;  font-size: var(--fs-14); }
html body .btn--md { min-height: 48px; padding: 12px 28px; font-size: var(--fs-16); }
html body .btn--lg { min-height: 56px; padding: 16px 36px; font-size: var(--fs-18); }
/* disabled */
html body .theme-btn:disabled, html body .btn:disabled, html body .cta-button:disabled,
html body [aria-disabled="true"].theme-btn, html body [aria-disabled="true"].btn,
html body .theme-btn.is-disabled, html body .btn.is-disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
/* loading */
html body .is-loading.theme-btn, html body .is-loading.btn,
html body form[aria-busy="true"] button[type="submit"] { position: relative; cursor: progress; }
html body .is-loading.theme-btn::after, html body .is-loading.btn::after,
html body form[aria-busy="true"] button[type="submit"]::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
/* Sending: the submit button is disabled but should read as busy, not unavailable */
html body form[aria-busy="true"] button[type="submit"]:disabled { opacity: 1; cursor: progress; pointer-events: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 2. Inputs ----------------------------------------------------------------
   .form-control (template forms, used by form-validator.js) and .ds-input/.ds-select
   share one look.                                                              */
html body .form-control, html body .ds-input, html body .ds-select {
  background-color: transparent; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  font-family: var(--font-body);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
html body .ds-input, html body .ds-select { background-color: var(--color-surface); }
html body .form-control::placeholder, html body .ds-input::placeholder { color: rgba(255, 255, 255, .3); }
html body .form-control:focus, html body .ds-input:focus, html body .ds-select:focus {
  outline: 0; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), .15);
}
html body .form-control[aria-invalid="true"], html body .ds-input[aria-invalid="true"] { border-color: var(--color-error); }
html body .form-control:disabled, html body .ds-input:disabled { opacity: .5; cursor: not-allowed; }

/* 3. Keyboard focus ---------------------------------------------------------
   Visible ring for keyboard users only (mouse clicks don't show it).            */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring) !important; outline-offset: var(--focus-offset);
  border-radius: 4px;
}
html body .theme-btn:focus-visible, html body .btn:focus-visible, html body .cta-button:focus-visible {
  outline: var(--focus-ring) !important; outline-offset: var(--focus-offset); border-radius: var(--radius-btn);
}
/* inputs already show a green border + glow on focus */
:where(input, select, textarea).form-control:focus-visible,
:where(input, select, textarea).ds-input:focus-visible { outline-offset: 1px; }

/* 4. Checkbox / radio / toggle ----------------------------------------------
   Keep the real input reachable by keyboard and screen readers (was display:none). */
.ds-checkbox, .ds-radio, .ds-toggle {
  display: block !important; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ds-checkbox:focus-visible + .ds-checkbox-box,
.ds-radio:focus-visible + .ds-radio-circle,
.ds-toggle:focus-visible + .ds-toggle-slider { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 5. Reduced motion ---------------------------------------------------------
   Honour the visitor's OS setting site-wide. script.js also swaps the hero
   video for its final-frame still and skips the preloader video.              */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .preloader { display: none !important; }
  .hf-hero-video { display: none !important; }
  .hf-hero-still { display: block !important; width: 100%; height: auto; }
  .bg-lines span { height: 100% !important; }
}

/* Small phones (EN + AR): keep logo, language switch and icons from touching — 2026-10-13 */
.site-header .header-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: 12px; }
@media (max-width: 479.98px) {
  .site-header .header-container { padding-left: 16px; padding-right: 16px; }
  .site-header .header-logo img { height: 20px; }
  .site-header .lang-switch { min-height: 36px; padding: 0 12px; font-size: 13px; margin-inline-end: 2px; }
  .site-header .search-link { width: 40px; height: 40px; margin-inline-end: 0; }
}

/* Language switch (EN ⇄ AR) in the header — added Oct 2026 */
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-inline-end: 8px; border-radius: 999px; font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; border: 1px solid currentColor; opacity: .85; transition: opacity .2s; }
.lang-switch:hover, .lang-switch:focus-visible { opacity: 1; }
.lang-switch[lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* Header search icon + /search page — added Oct 2026 */
.search-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-end: 6px; color: inherit; opacity: .85; border-radius: 50%; }
.search-link:hover, .search-link:focus-visible { opacity: 1; }
.site-search { display: flex; gap: 12px; margin-top: 32px; max-width: 760px; }
.site-search input { flex: 1; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 17px; }
.site-search input:focus { outline: 2px solid var(--lime, #82ff00); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-count { opacity: .7; margin: 0 0 16px; }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.search-results a { display: block; padding: 18px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: inherit; text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { border-color: var(--lime, #82ff00); }
.search-results h3 { margin: 0 0 6px; font-size: 19px; }
.search-results p { margin: 0 0 6px; opacity: .8; font-size: 15px; }
.search-results .url { font-size: 13px; color: var(--lime, #82ff00); }
@media (max-width: 600px) { .site-search { flex-direction: column; } }