/* Kuwait Archive — Layout
   Structural CSS using design tokens */

/* ── Container ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }

/* ── Header ── */
.site-header {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-logo { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-primary); text-decoration: none; flex-shrink: 0; }
.site-nav { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.nav-link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); white-space: nowrap; transition: color 0.15s, background 0.15s; text-decoration: none; }
.nav-link:hover { color: var(--color-primary); background: var(--color-bg-subtle); }
.nav-section-label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); letter-spacing: 0.06em; opacity: 0.6; white-space: nowrap; }
.nav-divider { width: 1px; height: 1rem; background: var(--color-border-subtle); flex-shrink: 0; }
.back-link { font-size: var(--text-sm); color: var(--color-text-muted); flex-shrink: 0; }

/* ── Main content ── */
.main-content { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl); }

/* ── Section titles ── */
.section-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-border-subtle); }

/* ── Breadcrumb ── */
.breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.breadcrumb a { color: var(--color-accent); }

/* ── Person profile ── */
.person-profile { padding: var(--space-xl) 0; }

/* ── Footer ── */
.site-footer { background: var(--color-bg-surface); border-top: 1px solid var(--color-border-subtle); padding: var(--space-xl) 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

/* ── Error pages ── */
.error-page { text-align: center; padding: var(--space-4xl) 0; }
.error-page h1 { font-size: 4rem; color: var(--color-text-muted); margin-bottom: var(--space-lg); }

/* ── Responsive ── */
@media (max-width: 960px) {
  .container { padding: 0 var(--space-lg); }
}
@media (max-width: 768px) {
  .container { padding: 0 var(--space-lg); }
  .person-header { flex-direction: column; align-items: flex-end; text-align: right; }
  .person-avatar-large { margin-bottom: var(--space-lg); }
  .elections-table { font-size: 0.85rem; }
  .elections-table th, .elections-table td { padding: var(--space-xs) var(--space-sm); }
  .elections-table th:nth-child(3), .elections-table td:nth-child(3) { display: none; }
  .external-links { flex-wrap: wrap; gap: var(--space-sm); }
}
@media (max-width: 600px) {
  .container { padding: 0 var(--space-md); }
  .site-header .container { gap: var(--space-sm); }
}
@media (max-width: 480px) {
  h1.person-name-ar { font-size: 1.6rem; }
  .elections-table { font-size: 0.78rem; }
  .elections-table th:nth-child(2), .elections-table td:nth-child(2) { display: none; }
}


/* ═══════════════════════════════════
   RTL WIDTH FIX — Apr 2026
   Ensure all containers fill width
═══════════════════════════════════ */

body { width: 100%; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; }

main { flex: 1; width: 100%; display: block; min-height: 0; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); box-sizing: border-box; }

article, .person-profile, .page-container { width: 100%; }

table { width: 100%; }

.site-header { width: 100%; }

/* Homepage hero + tracks break out of container */
.home-hero, .home-tracks { width: 100vw; position: relative; right: 50%; margin-right: -50vw; }

@media (max-width: 960px) {
  .home-hero, .home-tracks { width: 100%; right: auto; margin-right: 0; }
}

/* ═══════════════════════════════
   UNIVERSAL WIDTH FIX
   Every element takes full width
   of its container in RTL layout
═══════════════════════════════ */
.page-container > *,
.main-content > section,
.main-content > div,
.main-content > article { width: 100%; box-sizing: border-box; }

[class*="-grid"],
[class*="-list"],
[class*="-wrap"],
[class*="-table"] { width: 100%; box-sizing: border-box; }

section { width: 100%; box-sizing: border-box; }