/* ==========================================================================
   KGND standalone — app styles that sit on top of the original theme CSS.
   Colours follow the theme: navy #003366, teal #14B1BB, teal-light #E0F7F8.
   Use logical properties (margin-inline-start ...) so RTL works automatically.
   ========================================================================== */

:root {
  --kg-navy: #003366;
  --kg-navy-2: #1A4B7D;
  --kg-teal: #14B1BB;
  --kg-teal-dark: #0E7C83;
  --kg-teal-light: #E0F7F8;
  --kg-ink: #0f172a;
  --kg-muted: #64748b;
  --kg-line: #e2e8f0;
  --kg-bg: #f8fafc;
  --kg-danger: #dc2626;
  --kg-success: #059669;
  --kg-warning: #d97706;
  --kg-radius: 1rem;
}

/* ---------- accessibility ---------- */
.kg-skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 10000;
  background: var(--kg-navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem .5rem;
}
.kg-skip-link:focus { inset-inline-start: 1rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--kg-teal); outline-offset: 2px; }

/* ---------- flash messages ---------- */
.kg-flashes { max-width: 1100px; margin: 1rem auto 0; padding: 0 1rem; display: grid; gap: .5rem; }
.kg-flash { padding: .85rem 1.1rem; border-radius: .75rem; font-size: .92rem; font-weight: 600; border: 1px solid transparent; }
.kg-flash--success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.kg-flash--error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.kg-flash--info    { background: var(--kg-teal-light); color: var(--kg-navy); border-color: rgba(20,177,187,.3); }
.kg-flash--warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ---------- generic page shell (content pages, news, books, documents) ---------- */
.kg-page-hero {
  background: linear-gradient(135deg, var(--kg-navy), var(--kg-navy-2));
  color: #fff; padding: 4.5rem 1.25rem 3.5rem; text-align: center; position: relative; overflow: hidden;
}
.kg-page-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .1;
  background: radial-gradient(circle at 80% 30%, var(--kg-teal), transparent 55%);
}
.kg-page-hero > * { position: relative; z-index: 1; }
.kg-page-hero h1 { color: #fff !important; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .75rem; line-height: 1.25; }
.kg-page-hero p { color: rgba(255,255,255,.8); max-width: 720px; margin: 0 auto; line-height: 1.8; }
.kg-page-hero .kg-eyebrow {
  display: inline-block; background: rgba(20,177,187,.2); color: var(--kg-teal);
  padding: .35rem 1rem; border-radius: 9999px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; margin-bottom: 1rem;
}
.kg-container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.kg-section { padding: 4rem 0; }
.kg-narrow { max-width: 820px; margin: 0 auto; }

/* Rich text from the editor / WordPress import */
.kg-prose { color: #334155; line-height: 1.9; font-size: 1.02rem; }
.kg-prose h2, .kg-prose h3, .kg-prose h4 { color: var(--kg-navy); margin: 2rem 0 .75rem; line-height: 1.35; }
.kg-prose p { margin: 0 0 1.1rem; }
.kg-prose a { color: var(--kg-teal-dark); text-decoration: underline; }
.kg-prose img { max-width: 100%; height: auto; border-radius: .75rem; }
.kg-prose ul, .kg-prose ol { padding-inline-start: 1.5rem; margin: 0 0 1.1rem; }
.kg-prose blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--kg-teal-light);
  border-inline-start: 4px solid var(--kg-teal); border-radius: .5rem; color: var(--kg-navy);
}
.kg-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.kg-prose th, .kg-prose td { border: 1px solid var(--kg-line); padding: .6rem .75rem; text-align: start; }
.kg-prose iframe { max-width: 100%; border-radius: .75rem; }
.kg-prose figure { margin: 1.5rem 0; }
.kg-prose figcaption { font-size: .85rem; color: var(--kg-muted); text-align: center; margin-top: .4rem; }

/* Full-width designed pages (template "custom"): keep the content's own inline design. */
.kg-custom-body { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; min-height: 50vh; }
.kg-custom-body img { max-width: 100%; height: auto; }

/* ---------- cards & grids ---------- */
.kg-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kg-card {
  background: #fff; border: 1px solid var(--kg-line); border-radius: 1.25rem; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .25s, box-shadow .25s;
}
.kg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.kg-card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--kg-navy), var(--kg-teal)); overflow: hidden; }
.kg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kg-card__title { color: var(--kg-navy); font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 0; }
.kg-card__text { color: #475569; font-size: .9rem; line-height: 1.65; margin: 0; flex: 1; }
.kg-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: #94a3b8; }

/* ---------- buttons ---------- */
.kg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .8rem 1.6rem; border-radius: 9999px; font-weight: 700; font-size: .92rem;
  border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  font-family: inherit;
}
.kg-btn--primary { background: var(--kg-teal); color: #fff; }
.kg-btn--primary:hover { background: var(--kg-teal-dark); color: #fff; }
.kg-btn--navy { background: var(--kg-navy); color: #fff; }
.kg-btn--navy:hover { background: var(--kg-navy-2); color: #fff; }
.kg-btn--ghost { background: transparent; color: var(--kg-navy); border-color: var(--kg-line); }
.kg-btn--ghost:hover { border-color: var(--kg-teal); color: var(--kg-teal-dark); }
.kg-btn--danger { background: var(--kg-danger); color: #fff; }
.kg-btn--sm { padding: .45rem .95rem; font-size: .82rem; }
.kg-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- forms (public side: login, register, contact, donate) ---------- */
.kg-form-card {
  background: #fff; border: 1px solid var(--kg-line); border-radius: 1.5rem;
  padding: 2rem; box-shadow: 0 10px 40px rgba(0,51,102,.06);
}
.kg-field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.kg-field label { font-size: .85rem; font-weight: 700; color: var(--kg-navy); }
.kg-field .kg-hint { font-size: .78rem; color: var(--kg-muted); }
.kg-input, .kg-select, .kg-textarea {
  width: 100%; box-sizing: border-box; padding: .75rem .95rem; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--kg-line); border-radius: .75rem; background: #fff; color: var(--kg-ink);
  transition: border-color .2s, box-shadow .2s;
}
.kg-input:focus, .kg-select:focus, .kg-textarea:focus {
  outline: none; border-color: var(--kg-teal); box-shadow: 0 0 0 4px rgba(20,177,187,.15);
}
.kg-textarea { min-height: 140px; resize: vertical; }
.kg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kg-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: #334155; }
.kg-check input { margin-top: .2rem; }
.kg-error-text { color: var(--kg-danger); font-size: .8rem; font-weight: 600; }
@media (max-width: 640px) { .kg-field-row { grid-template-columns: 1fr; } .kg-form-card { padding: 1.4rem; } }

/* ---------- tables (member dashboard) ---------- */
.kg-table-wrap { overflow-x: auto; border: 1px solid var(--kg-line); border-radius: 1rem; background: #fff; }
.kg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kg-table th { background: var(--kg-bg); color: var(--kg-navy); font-weight: 700; text-align: start; padding: .75rem 1rem; border-bottom: 1px solid var(--kg-line); white-space: nowrap; }
.kg-table td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.kg-table tr:last-child td { border-bottom: 0; }

/* ---------- badges ---------- */
.kg-badge { display: inline-block; padding: .2rem .65rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; background: #f1f5f9; color: #334155; white-space: nowrap; }
.kg-badge--success { background: #d1fae5; color: #065f46; }
.kg-badge--warning { background: #fef3c7; color: #92400e; }
.kg-badge--danger  { background: #fee2e2; color: #991b1b; }
.kg-badge--info    { background: var(--kg-teal-light); color: var(--kg-teal-dark); }
.kg-badge--navy    { background: rgba(0,51,102,.1); color: var(--kg-navy); }

/* ---------- pagination ---------- */
.kg-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 2.5rem 0 0; }
.kg-pagination a, .kg-pagination span {
  min-width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid var(--kg-line); color: var(--kg-navy); text-decoration: none; font-weight: 700; font-size: .88rem;
}
.kg-pagination .is-current { background: var(--kg-navy); color: #fff; border-color: var(--kg-navy); }

/* ---------- empty state ---------- */
.kg-empty { text-align: center; padding: 3rem 1rem; color: var(--kg-muted); }
.kg-empty .material-symbols-outlined { font-size: 3rem; color: #cbd5e1; display: block; margin-bottom: .5rem; }

/* ---------- error pages ---------- */
.kg-error-page { min-height: 55vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.25rem; }
.kg-error-page .code { font-size: 5rem; font-weight: 800; color: var(--kg-teal); line-height: 1; }
.kg-error-page h1 { color: var(--kg-navy); margin: .75rem 0; }
.kg-error-page p { color: var(--kg-muted); max-width: 520px; margin: 0 auto 1.5rem; }

/* ---------- Sorani (RTL) header fix ----------
   The old theme's kurdish-rtl.css sets direction:rtl AND flex-direction:row-reverse on the
   top bar and navigation. The two cancel out, so in Sorani the menu ran left-to-right like
   English. Under direction:rtl a plain row already runs right-to-left: logo on the right,
   "Home" first next to it, search/join buttons on the left. */
html[dir="rtl"] body.kgnd-rtl .kgnd-nav,
html[dir="rtl"] body.kgnd-rtl .kgnd-menu,
html[dir="rtl"] body.kgnd-rtl .nav-actions,
html[dir="rtl"] body.kgnd-rtl .topbar-social,
html[dir="rtl"] body.kgnd-rtl .topbar-contact {
  flex-direction: row !important;
}
html[dir="rtl"] body.kgnd-rtl .kgnd-menu > li > a { text-align: right; }
html[dir="rtl"] body.kgnd-rtl .mobile-menu ul { text-align: right; }

/* Phones: the top bar (sign in / join / language switcher) was wider than the screen and got
   cut off. Let it wrap and centre it instead. */
@media (max-width: 640px) {
  .kgnd-topbar .topbar-inner { justify-content: center; }
  .kgnd-topbar .topbar-contact:empty { display: none; }
  .kgnd-topbar .topbar-social { flex-wrap: wrap; justify-content: center; row-gap: .35rem; max-width: 100%; }
  .kgnd-topbar .kgnd-topbar-auth { margin-inline-start: 0 !important; padding-inline-start: 0 !important; border-inline-start: 0 !important; }
  .kgnd-topbar .topbar-social > span[style*="width:1px"] { display: none !important; }
}

/* RTL: theme hover transforms on cards use translateY only — fine. Flip arrows. */
[dir="rtl"] .kg-flip-rtl { transform: scaleX(-1); }