/* ============================================================
   موسوعة الخيل — تنسيقات نموذج الويكي
   تصميم مستوحى من ويكيبيديا (Vector skin)
   ============================================================ */

:root {
  --wiki-link: #0645ad;
  --wiki-link-visited: #0b0080;
  --wiki-link-new: #ba0000;
  --wiki-ink: #202122;
  --wiki-ink-soft: #54595d;
  --wiki-bg: #f6f6f6;
  --wiki-paper: #ffffff;
  --wiki-line: #a2a9b1;
  --wiki-line-soft: #c8ccd1;
  --wiki-line-blue: #a7d7f9;
  --wiki-header-bg: #f8f9fa;
  --wiki-box-blue: #cedff2;
  --wiki-box-blue-line: #a3b0bf;
  --wiki-box-yellow: #faecc8;
  --wiki-box-yellow-line: #d6c275;
  --wiki-box-orange: #ffe9d5;
  --wiki-box-orange-line: #d6a575;
  --wiki-box-green: #d5f4d5;
  --wiki-box-green-line: #75c675;
  --wiki-box-purple: #e8d5ff;
  --wiki-box-purple-line: #a575d6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.wiki-body {
  margin: 0;
  font-family: "Noto Sans Arabic", "Tahoma", "Segoe UI", "Arial", sans-serif;
  font-size: 14px;
  color: var(--wiki-ink);
  background: var(--wiki-bg);
  line-height: 1.6;
}

/* Links */
.wiki-body a {
  color: var(--wiki-link);
  text-decoration: none;
}
.wiki-body a:hover { text-decoration: underline; }
.wiki-body a:visited { color: var(--wiki-link-visited); }
.wiki-body a.new { color: var(--wiki-link-new); }
.wiki-body a.ref {
  font-size: 11px;
  vertical-align: super;
  padding: 0 1px;
}

/* ===================== User bar ===================== */
.user-bar {
  background: #fff;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
}
.user-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 4px 16px;
  display: flex;
  justify-content: flex-end;
}
.user-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}
.user-links li:not(:last-child)::after {
  content: "";
  display: inline-block;
}

/* ===================== Header ===================== */
.wiki-header {
  background: #fff;
  border-bottom: 1px solid var(--wiki-line-soft);
}
.header-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.wiki-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--wiki-ink) !important;
  text-decoration: none !important;
}
.wiki-logo:hover { text-decoration: none !important; }
.wiki-logo:visited { color: var(--wiki-ink) !important; }
.logo-image {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #b9874a, #3e1d08);
  color: #fff8e8;
  display: grid; place-items: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.logo-text { line-height: 1.2; }
.logo-name {
  font-family: "Amiri", serif;
  font-size: 24px;
  font-weight: 700;
  display: block;
  color: var(--wiki-ink);
}
.logo-tagline {
  font-size: 12px;
  color: var(--wiki-ink-soft);
  display: block;
  font-style: italic;
}

.wiki-search {
  display: flex;
  width: 100%;
  max-width: 520px;
  justify-self: end;
}
.wiki-search input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--wiki-line);
  border-radius: 2px;
  border-inline-end: none;
  font: inherit;
  outline: none;
  background: #fff;
}
.wiki-search input:focus { border-color: #36c; box-shadow: inset 0 0 0 1px #36c; }
.wiki-search button {
  padding: 7px 22px;
  background: var(--wiki-header-bg);
  border: 1px solid var(--wiki-line);
  cursor: pointer;
  font: inherit;
  color: var(--wiki-ink);
  border-radius: 2px;
}
.wiki-search button:hover { background: #fff; }

/* ===================== Article tabs ===================== */
.article-tabs-wrap {
  background: var(--wiki-header-bg);
  border-bottom: 1px solid var(--wiki-line-blue);
}
.article-tabs {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 16px;
}
.tabs-left, .tabs-right {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.article-tabs li a {
  display: block;
  padding: 10px 14px;
  background: #ececec;
  border: 1px solid var(--wiki-line-blue);
  border-bottom: none;
  color: var(--wiki-link);
  margin-inline-start: -1px;
  border-radius: 2px 2px 0 0;
}
.article-tabs li a:hover { text-decoration: underline; }
.article-tabs li.active a {
  background: #fff;
  color: var(--wiki-ink);
  position: relative;
  z-index: 1;
  cursor: default;
}
.article-tabs li.active a:hover { text-decoration: none; }

/* ===================== Main layout ===================== */
.main-layout {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 0;
  padding: 0 16px;
  align-items: flex-start;
}

/* ===================== Sidebar ===================== */
.wiki-sidebar {
  padding: 16px 12px 16px 0;
  font-size: 12px;
}
.wiki-sidebar nav {
  margin-bottom: 18px;
}
.wiki-sidebar h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--wiki-ink-soft);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
  text-transform: none;
  letter-spacing: .2px;
}
.wiki-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wiki-sidebar li a {
  display: block;
  padding: 3px 6px;
  font-size: 12.5px;
  line-height: 1.6;
}
.wiki-sidebar .langs li a {
  font-size: 13px;
}

/* ===================== Main content ===================== */
.wiki-main {
  background: var(--wiki-paper);
  border: 1px solid var(--wiki-line-blue);
  border-top: none;
  padding: 16px 22px;
  margin: 0 0 16px;
  min-width: 0;
}

/* Welcome banner */
.welcome-banner {
  text-align: center;
  border-bottom: 1px solid var(--wiki-line-soft);
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.welcome-banner h1 {
  font-family: "Amiri", serif;
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--wiki-ink);
}
.welcome-banner h1 b { color: #6b3410; font-weight: 700; }
.welcome-banner p { margin: 6px 0; }
.welcome-banner .stats {
  font-size: 13px;
  margin: 10px 0 0;
}

/* ===================== Boxes ===================== */
.wiki-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.wiki-box {
  background: #fff;
  border: 1px solid var(--wiki-box-blue-line);
  margin-bottom: 12px;
}
.wiki-box-header {
  background: var(--wiki-box-blue);
  border-bottom: 1px solid var(--wiki-box-blue-line);
  padding: 5px 12px;
}
.wiki-box-header h2 {
  font-family: "Amiri", serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: var(--wiki-ink);
}
.wiki-box-content {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.75;
}
.wiki-box-content p { margin: 0 0 10px; }
.wiki-box-content > *:last-child { margin-bottom: 0; }
.wiki-box-content ul {
  padding-inline-start: 20px;
  margin: 6px 0 10px;
}
.wiki-box-content li { margin-bottom: 8px; }
.wiki-box-content .text-center { text-align: center; }

/* Box variants */
.wiki-box-dyk { border-color: var(--wiki-box-yellow-line); }
.wiki-box-dyk .wiki-box-header { background: var(--wiki-box-yellow); border-bottom-color: var(--wiki-box-yellow-line); }

.wiki-box-otd { border-color: var(--wiki-box-orange-line); }
.wiki-box-otd .wiki-box-header { background: var(--wiki-box-orange); border-bottom-color: var(--wiki-box-orange-line); }

.wiki-box-pic { border-color: var(--wiki-box-green-line); }
.wiki-box-pic .wiki-box-header { background: var(--wiki-box-green); border-bottom-color: var(--wiki-box-green-line); }

.wiki-box-portals { border-color: var(--wiki-box-purple-line); }
.wiki-box-portals .wiki-box-header { background: var(--wiki-box-purple); border-bottom-color: var(--wiki-box-purple-line); }

.wiki-box-sister { border-color: #ccc; }
.wiki-box-sister .wiki-box-header { background: #f0f0f0; border-bottom-color: #ccc; }

/* ===================== Thumbnails ===================== */
.thumb {
  border: 1px solid var(--wiki-line-soft);
  background: var(--wiki-header-bg);
  padding: 4px;
  margin: 0 0 8px 0;
  max-width: 220px;
  font-size: 12px;
}
.thumb.thumb-left {
  float: inline-start;
  margin-inline-end: 14px;
  margin-inline-start: 0;
}
.thumb.thumb-right {
  float: inline-end;
  margin-inline-start: 14px;
  margin-inline-end: 0;
}
.image {
  display: block;
  width: 100%;
  aspect-ratio: 200 / 130;
  overflow: hidden;
}
.thumbcaption {
  font-size: 12px;
  color: var(--wiki-ink-soft);
  padding: 4px 4px 2px;
  line-height: 1.5;
}

/* Big thumb */
.big-thumb {
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--wiki-line-soft);
  background: var(--wiki-header-bg);
  padding: 5px;
}
.big-thumb-image {
  width: 100%;
  aspect-ratio: 400 / 240;
  overflow: hidden;
}
.big-thumb-caption {
  font-size: 12px;
  color: var(--wiki-ink-soft);
  padding: 6px 4px 2px;
  text-align: start;
  line-height: 1.6;
}
.big-thumb-caption p { margin: 0; }

/* Read more */
.read-more {
  font-size: 13px;
  color: var(--wiki-ink-soft);
  text-align: end;
  margin-top: 10px !important;
  font-style: italic;
  clear: both;
}

/* ===================== Portals list ===================== */
.portal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.portal-list li { margin: 0 !important; }
.portal-list li a {
  display: block;
  padding: 14px 8px;
  border: 1px solid var(--wiki-line-blue);
  background: var(--wiki-header-bg);
  text-align: center;
  font-size: 13px;
  border-radius: 2px;
  transition: background .12s ease;
}
.portal-list li a:hover {
  background: #eaf3ff;
  text-decoration: none;
}
.portal-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 4px;
  color: #6b3410;
  font-family: serif;
}

/* ===================== Sister list ===================== */
.sister-list {
  list-style: square !important;
  padding-inline-start: 22px !important;
  margin: 0;
  columns: 2;
  column-gap: 30px;
}
.sister-list li {
  padding: 2px 0;
  font-size: 13px;
  margin-bottom: 4px !important;
  break-inside: avoid;
}

/* ===================== Category bar ===================== */
.category-bar {
  border: 1px solid var(--wiki-line);
  background: var(--wiki-header-bg);
  padding: 6px 12px;
  font-size: 13px;
  margin-top: 18px;
}

/* ===================== Page footer info ===================== */
.page-footer-info {
  font-size: 12px;
  color: var(--wiki-ink-soft);
  padding: 10px 0 0;
  border-top: 1px solid #ddd;
  margin-top: 16px;
}
.page-footer-info p { margin: 0; }

/* ===================== Footer ===================== */
.wiki-footer {
  background: var(--wiki-header-bg);
  border-top: 1px solid var(--wiki-line-soft);
  padding: 18px 0;
  margin-top: 20px;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
}
.copyright {
  font-size: 12px;
  color: var(--wiki-ink-soft);
  margin: 0;
}

/* ===================== Theme chooser (shared) ===================== */
.theme-chooser {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  z-index: 999;
  font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
}
.chooser-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #202122;
  color: #fff8e8;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #000;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.chooser-toggle:hover { background: #6b3410; transform: translateY(-2px); }
.chooser-icon { font-size: 16px; line-height: 1; color: #d9b378; }
.chooser-label { line-height: 1; }

.chooser-menu {
  list-style: none;
  padding: 8px;
  margin: 0;
  position: absolute;
  bottom: calc(100% + 10px);
  inset-inline-start: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--wiki-line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.theme-chooser.is-open .chooser-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.chooser-menu li { margin: 0; }
.chooser-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--wiki-ink) !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: background .14s ease;
}
.chooser-menu a:visited { color: var(--wiki-ink) !important; }
.chooser-menu a:hover { background: #eaf3ff; text-decoration: none !important; }
.chooser-menu a.is-active {
  background: #202122;
  color: #fff8e8 !important;
  font-weight: 700;
  pointer-events: none;
}
.chooser-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25);
  flex-shrink: 0;
}
.chooser-dot[data-tone="modern"]   { background: linear-gradient(135deg, #c9a961, #6b3410); }
.chooser-dot[data-tone="wiki"]     { background: linear-gradient(135deg, #cedff2, #0645ad); }
.chooser-dot[data-tone="heritage"] { background: linear-gradient(135deg, #b8864a, #6e1e1e); }
.chooser-dot[data-tone="gallery"]  { background: linear-gradient(135deg, #e6c878, #15100a); }
.chooser-dot[data-tone="portal"]   { background: linear-gradient(135deg, #11a195, #095a54); }
.chooser-dot[data-tone="magazine"] { background: linear-gradient(135deg, #8b1e1e, #1a1a18); }
.chooser-dot[data-tone="guide"]    { background: linear-gradient(135deg, #6e69e0, #3a35a3); }
.chooser-dot[data-tone="bento"]    { background: linear-gradient(135deg, #c89048, #2b2118); }
.chooser-dot[data-tone="platform"] { background: linear-gradient(135deg, #c2a04a, #16243a); }
.chooser-dot[data-tone="digest"]   { background: linear-gradient(135deg, #ac7a36, #34271a); }

/* الشعار الرسمي */
.logo-image { width: 54px; height: 54px; background: url("images/logo.png") center/contain no-repeat; border-radius: 0; }
.logo-image svg { display: none; }
.wiki-logo .logo-text { display: none; }

/* ====== صور حقيقية للخيل العربي ====== */
.image { background: url("images/arabian-grey-run.jpg") center/cover; }
.image svg { display: none; }
.big-thumb-image { background: url("images/arabian-black-water.jpg") center/cover; }
.big-thumb-image svg { display: none; }
.chooser-menu a.is-active .chooser-dot { border-color: #fff8e8; }

/* ===================== Responsive ===================== */
@media (max-width: 900px) {
  .header-grid { grid-template-columns: 1fr; gap: 12px; }
  .wiki-search { max-width: 100%; }

  .main-layout {
    grid-template-columns: 1fr;
  }
  .wiki-sidebar {
    order: 2;
    padding: 16px 0;
    border-top: 1px solid var(--wiki-line-soft);
    margin-top: 0;
    columns: 2;
    column-gap: 30px;
  }
  .wiki-sidebar nav { break-inside: avoid; }

  .wiki-grid { grid-template-columns: 1fr; }
  .portal-list { grid-template-columns: repeat(3, 1fr); }
  .sister-list { columns: 1; }

  .article-tabs { font-size: 12px; }
  .article-tabs li a { padding: 8px 10px; }
}

@media (max-width: 560px) {
  .user-links { gap: 10px; font-size: 11px; }
  .logo-name { font-size: 20px; }
  .logo-tagline { display: none; }

  .wiki-main { padding: 12px 14px; }
  .welcome-banner h1 { font-size: 24px; }

  .portal-list { grid-template-columns: repeat(2, 1fr); }
  .wiki-sidebar { columns: 1; }

  .thumb.thumb-left,
  .thumb.thumb-right {
    float: none;
    margin: 0 auto 10px;
    max-width: 100%;
  }

  .theme-chooser { bottom: 14px; inset-inline-start: 14px; }
  .chooser-label { display: none; }
  .chooser-toggle { padding: 10px 12px; }
}