/* ══════════════════════════════════════════
   ARCHIVE.PS — MOBILE EXCLUSIVE STYLESHEET
   mobile.css (Loads only on widths < 768px)
════════════════════════════════════════════ */

/* ── 1. GLOBAL LAYOUT OVERRIDES ── */
.main, #page-legal .main { 
  padding: 0 !important; /* The .page container already has padding-top: 70px; removing this fixes the double gap */
  width: 100% !important; 
  overflow-x: hidden !important;
}

/* Standardize horizontal padding for mobile screens */
.section, .icj-header, .icj-meta, .icj-exhibits, .icj-exhibits-bottom,
.case-header, .case-body, .case-evidence, .verdicts-section,
.map-header, .forensic-section,
#page-siege .main, #page-testimonies .main, #page-hr .main, 
#page-un .main, #page-geneva .main, #page-icc .main, #page-detention .main, 
#page-media .main, #page-arms .main, #page-medical .main, #page-culture .main, 
#page-census .main, #page-infrastructure .main, #page-compliance .main, 
#page-surveillance .main, #page-movement .main, #page-registry .main, 
#page-british .main {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

.hero {
  padding: 0 16px 40px !important;
}

/* API Map Layout Restructuring for Mobile */
.map-layout { flex-direction: column !important; overflow-y: auto !important; height: auto !important; max-height: none !important; }
.map-order-list { width: 100% !important; height: 250px !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }

/* Stack Map and Overlay */
.map-viewer { flex-direction: column !important; min-height: auto !important; height: auto !important; }
.map-ui-overlay { 
  width: 100% !important; 
  height: auto !important; 
  border-left: none !important; 
  border-top: 1px solid rgba(255,255,255,0.2) !important; 
}
#active-map-img { 
  width: 100% !important; 
  height: 350px !important; /* Fixed height for image area on mobile */
  flex-grow: 0 !important; 
}

.verdicts-inner, .bm-viewer {
  padding: 24px 16px !important;
}

/* Prevent text overflows & properly scale heavy headings */
p, .cyber-log, .data-block-content, .case-indictment-text, .hero-subtitle {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.page-header-title, .icj-title, .case-title, .siege-header-title, .testimony-header-title, 
.hr-header-title, .media-header-title, .arms-header-title, .med-header-title, .cult-header-title, 
.census-header-title, .geneva-title, .infra-title, .compliance-title, .movement-title, 
.registry-title, .detention-header-title, .bm-header-title, .legal-title, .un-title {
  font-size: clamp(28px, 10vw, 40px) !important;
  word-wrap: break-word !important;
}

.sidebar {
  display: flex !important;
  position: fixed !important;
  top: 0 !important; /* Sidebar covers full height when open */
  left: -100% !important;
  width: 280px !important;
  height: 100vh !important;
  background: var(--cream) !important;
  border-right: 1px solid var(--border) !important;
  z-index: 20000 !important; /* Stays above the fixed topnav */
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 24px 16px !important;
  margin: 0 !important;
  overflow-y: auto !important;
}

.sidebar.active {
  left: 0 !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;
}

/* ── 2. FIXED VERTICAL HEADER ── */
.topnav {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  height: auto !important; 
  min-height: 70px !important; /* Match the .page clearance to prevent layout shifting */
  padding: 12px 16px !important;
  align-items: center !important;
  z-index: 10000 !important;
}

.topnav-logo {
  grid-column: 1 !important;
}

.topnav-icons {
  grid-column: 2 !important;
  margin-right: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  color: var(--text) !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.header-toggle-btn svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.3s ease !important;
}

.topnav.expanded .header-toggle-btn svg {
  transform: rotate(180deg) !important;
}

.mobile-menu-btn { 
  grid-column: 3 !important;
  display: block !important; 
  color: var(--text); 
}

.topnav-links {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  display: none !important; /* Hidden by default */
  flex-direction: column !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 15px 0 !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  left: 0 !important;
  transition: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.topnav.expanded .topnav-links {
  display: flex !important; /* Show when toggled */
}

.topnav-links li {
  width: 100% !important;
}

.topnav-links a {
  display: block !important;
  padding: 8px 12px !important;
  background: rgba(0,0,0,0.03) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

.topnav-links a.active {
  background: rgba(200,55,58,0.08) !important;
}

/* ── 3. UNIVERSAL GRID COLLAPSE ── */
/* Forces all multi-column grids into a single scrolling column */
.folder-grid, .bm-grid, .icj-exhibits, .icj-exhibits-bottom, .case-body,
.siege-grid, .media-grid, .arms-grid, .med-grid, .geneva-grid, .infra-grid, 
.warrant-grid, .cult-person-grid, .evidence-row, .forensic-grid, 
.folder-card-bottom, .detention-stats-grid, .counts-grid, .timeline-item,
.case-title-block, .un-card, .cult-item, .timeline-filters {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* Convert Flex rows to columns to prevent squishing text side-by-side */
.icj-meta, .exhibit-meta, .testimony-meta, .bm-doc-meta, .bm-viewer-meta,
.icj-stats, .case-evidence-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.case-no-block { text-align: left !important; }

/* Keep search forms contained */
.census-filter-wrap {
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  box-sizing: border-box !important;
}
.census-search-input { width: 100% !important; }

/* Fix Global Search Overlay */
.search-overlay { padding: 70px 16px 16px !important; }
.search-input { font-size: 16px !important; }
.search-prompt { font-size: 16px !important; margin-right: 8px !important; }

/* ── 4. TABLE TO CARD CONVERSION ── */
.hr-table thead, .detention-table thead, .compliance-table thead, 
.checkpoint-table thead, .census-table thead, #registry-master-table thead {
  display: none !important;
}

.hr-table tr, .detention-table tr, .compliance-table tr, 
.checkpoint-table tr, .census-table tr, #registry-master-table tr {
  display: block !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--black) !important;
  margin-bottom: 16px !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hr-table td, .detention-table td, .compliance-table td, 
.checkpoint-table td, .census-table td, #registry-master-table td {
  display: block !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}

.hr-table tr:last-child td, .detention-table tr:last-child td, 
.compliance-table tr:last-child td, .checkpoint-table tr:last-child td, 
.census-table tr:last-child td, #registry-master-table tr:last-child td {
  border-bottom: none !important;
}

/* Enforce full width for UN buttons to prevent overflow */
.un-res-action { width: 100% !important; text-align: center !important; }