@font-face {
  font-family: 'K24 Kurdish Bold';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/k24/k24-bold.ttf') format('truetype');
}

:root {
  --font-k24: 'K24 Kurdish Bold', sans-serif;
  --font-ui: var(--font-k24);
  --font-display: var(--font-k24);
  font-family: var(--font-ui);
  color: #0e1824;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --ink: #0e1824;
  --ink-2: #2c3a4d;
  --muted: #6a7585;
  --line: #e8ecf0;
  --line-2: #f0f3f6;
  --blue: #2355f5;
  --blue-dark: #1740d4;
  --blue-light: #eef1ff;
  --navy: #07102a;
  --paper: #fff;
  --paper-2: #f8fafc;
  --gold: #c9972a;
  --success: #22863a;
  --success-bg: #edfaf0;
  --error: #c0392b;
  --shadow-sm: 0 1px 3px rgba(14,24,40,.07), 0 1px 2px rgba(14,24,40,.05);
  --shadow-md: 0 4px 16px rgba(14,24,40,.09), 0 1px 4px rgba(14,24,40,.06);
  --shadow-lg: 0 12px 40px rgba(14,24,40,.14), 0 2px 8px rgba(14,24,40,.07);
  --shadow-xl: 0 25px 80px rgba(14,24,40,.2), 0 4px 16px rgba(14,24,40,.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { min-width: 0; margin: 0; }

html, body, #root, #main-content,
div, p, span, h1, h2, h3, h4, h5, h6,
button, a, input, textarea, select, option, optgroup, label,
ul, ol, li, dl, dt, dd, table, th, td, tr, thead, tbody, tfoot,
small, strong, b, em, i, blockquote, figcaption, summary, details,
sub, sup, pre, code, kbd, samp {
  font-family: var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, th, strong, b,
.brand, .brand-name, .btn-primary, .top-set-badge, .badge-set,
.badge, .font-k24, .hero-title-line, .filter-pill,
.gender-filter-pill, .card-gender-btn,
.mobile-action-bar button, .mobile-action-bar a {
  font-family: var(--font-k24);
  font-weight: 700;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
::selection { color: #fff; background: var(--blue); }
img { display: block; max-width: 100%; }
input, textarea, select { min-width: 0; max-width: 100%; }

/* Kurdish shaping requires connected letters, including display headings. */
html[dir="rtl"], html[lang="ckb"] { letter-spacing: normal; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[lang="ckb"] h1, html[lang="ckb"] h2, html[lang="ckb"] h3,
html[lang="ckb"] h4, html[lang="ckb"] h5, html[lang="ckb"] h6 {
  letter-spacing: normal !important;
  word-spacing: normal;
  font-feature-settings: "liga" 1, "calt" 1;
}
html[dir="rtl"] p, html[dir="rtl"] span,
html[dir="rtl"] a, html[dir="rtl"] button { letter-spacing: normal; }
html[lang="ckb"] em, html[dir="rtl"] em {
  font-style: normal !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 100;
  transition: top 0.3s ease-in-out;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }