/* Unified Article 370 Site Styles */
html { scroll-behavior: smooth; font-family: 'Segoe UI', 'Arial', sans-serif; background: #f8f9fa; }
/* Skip link for keyboard users */
.skip-link { position:absolute; left:-999px; top:0; background:#111827; color:#fff; padding:8px 14px; z-index:2000; border-radius:4px; text-decoration:none; }
.skip-link:focus { left:10px; outline:2px solid #fff; }
body { margin: 0; line-height: 1.6; color: #222; background: #f8f9fa; }
h1, h2, h3, main, footer { position: relative; }
/* Layout utility: ensure footer not hidden behind sticky nav; use full-height grid wrapper semantics */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.back-to-top { display:inline-block; margin-top:24px; font-size:0.875rem; text-decoration:none; background:#1e3a8a; color:#fff; padding:6px 10px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.4); }
.back-to-top:hover, .back-to-top:focus { background:#274bb5; color:#fff; text-decoration:underline; }
html, body { height: 100%; }

/* When grid applies on desktop, ensure main stretches and footer sits after grid in normal flow */
@media (min-width: 901px) {
  body { min-height: 100vh; }
  main { align-self: start; }
  .site-footer { position: relative; z-index: 1; }
}
h1, h2, h3 { color: #111; font-family: 'Segoe UI', 'Arial', sans-serif; }
h1 { font-size: 2.2rem; margin-bottom: 1.2rem; }
h2 { margin-top: 2rem; font-size: 1.5rem; border-bottom: 2px solid #0366d6; padding-bottom: 5px; }
h3 { font-size: 1.15rem; margin-top: 1.2rem; }
.category-heading { margin: 1rem 0 1.5rem 0; }
main { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 20px 40px; max-width: 900px; border-radius: 8px; }

/* Contextual enrichment note styling */
.contextual-note { 
  margin: 0.85rem 0 1.15rem; 
  padding: 0.85rem 1rem; 
  background: #f0f6ff; 
  border-left: 4px solid #0366d6; 
  border-radius: 4px; 
  font-size: 0.95rem; 
  line-height: 1.5; 
}
.contextual-note strong { color:#0a3d73; }
.contextual-note em { color:#044b8c; }

/* Responsive typography */
@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }
  main { padding: 15px 20px; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
  main { padding: 10px 15px; }
}
/* Prevent preformatted text from overflowing; allow wrapping and scrolling if needed */
pre {
  white-space: pre-wrap; /* preserve newlines but wrap long lines */
  overflow-wrap: anywhere; /* break long tokens like URLs */
  max-width: 100%;
  overflow-x: auto; /* allow horizontal scroll if necessary */
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  padding: 12px 14px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Image placeholder styling */
.image-placeholder {
  width: 100%;
  min-height: 160px;
  background: repeating-linear-gradient(45deg, #f0f3f6, #f0f3f6 10px, #e6ebf1 10px, #e6ebf1 20px);
  border: 1px dashed #cfd6de;
  border-radius: 6px;
}
details summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; }
details { margin-bottom: 1.2rem; }
dt { font-weight: 700; font-size: 1.05rem; margin-top: 0.8rem; }
dd { margin: 0 0 1rem 0; font-size: 0.98rem; }
a { color: #0366d6; text-decoration: underline; }
a:hover { text-decoration: none; color: #024b9b; }

/* Enrichment components */
.highlight-box { border:1px solid #d9e2ec; padding:1rem; border-radius:4px; background:#f8fbff; }
.related-links ul { list-style: none; padding-left:0; }
.related-links ul li { margin:0.4rem 0; }
.related-links ul li a { text-decoration:none; }
.related-links ul li a:hover { text-decoration:underline; }
.page-toc { border:1px solid #e1e8f0; background:#fff; padding:0.75rem 1rem; border-radius:6px; margin-bottom:1.25rem; font-size:0.9rem; }
.page-toc ul { list-style:none; margin:0; padding:0; columns:2; column-gap:2rem; }
@media (max-width:640px){ .page-toc ul { columns:1; } }
.page-toc a { text-decoration:none; display:inline-block; padding:2px 0; }
.page-toc a:hover, .page-toc a:focus { text-decoration:underline; }
.page-toc a.active { font-weight:600; color:#0a3d73; position:relative; }
.page-toc a.active::before { content:"▸"; color:#0366d6; position:absolute; left:-14px; }

/* Page navigation styles - Mobile only */
.page-navigation {
  margin: 40px 0 20px 0;
  padding: 20px 0;
  border-top: 1px solid #e1e4e8;
  display: none; /* Hidden by default on desktop */
}

/* Show page navigation only on mobile */
@media (max-width: 900px) {
  .page-navigation {
    display: block;
  }
}

.page-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  gap: 20px;
}

.page-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  text-decoration: none;
  color: #0366d6;
  transition: all 0.2s ease;
  min-width: 0;
  flex: 1;
  max-width: 250px;
}

.page-nav-link:hover {
  background: #fff;
  border-color: #0366d6;
  box-shadow: 0 2px 8px rgba(3, 102, 214, 0.1);
  text-decoration: none;
}

.page-nav-link.prev-page {
  justify-content: flex-start;
}

.page-nav-link.next-page {
  justify-content: flex-end;
  text-align: right;
}

.nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-text small {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-text span {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-arrow {
  font-size: 18px;
  font-weight: bold;
  color: #0366d6;
  flex-shrink: 0;
}

.page-nav-placeholder {
  flex: 1;
  max-width: 250px;
}

/* Mobile styles for page navigation */
@media (max-width: 768px) {
  .page-navigation {
    margin: 30px 0 15px 0;
    padding: 15px;
  }
  
  .page-nav-container {
    gap: 15px;
  }
  
  .page-nav-link {
    padding: 10px 14px;
    font-size: 14px;
    max-width: none;
  }
  
  .nav-text span {
    font-size: 0.9rem;
  }
  
  .nav-arrow {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .page-nav-container {
    flex-direction: column;
    gap: 12px;
  }
  
  .page-nav-link {
    width: 100%;
    max-width: none;
  }
  
  .page-nav-link.next-page {
    text-align: left;
    justify-content: flex-start;
  }
  
  .page-nav-link.next-page .nav-text {
    order: 1;
  }
  
  .page-nav-link.next-page .nav-arrow {
    order: 2;
  }
}
/* Mobile-friendly hamburger menu styles */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1001;
  background: #fff;
  border: 2px solid #0366d6;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle:hover {
  background: #f8f9fa;
}

.mobile-nav-toggle:active {
  transform: scale(0.95);
}

.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

@media (max-width: 900px) {
  /* Show hamburger menu on mobile */
  .mobile-nav-toggle {
    display: block !important;
  }
  
  /* Hide the navigation container by default on mobile */
  #nav-container {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
  }
  
  /* Show navigation when mobile menu is open */
  #nav-container.mobile-open {
    left: 0 !important;
  }
  
  /* Show overlay when menu is open */
  .mobile-overlay.show {
    display: block !important;
  }
  
  /* Adjust body grid for mobile */
  body {
    grid-template-columns: 1fr !important;
    padding-top: 60px; /* Space for hamburger button */
  }
  
  /* Make main content full width on mobile */
  main {
    margin-left: 0 !important;
    padding: 16px;
    max-width: none;
  }
  
  /* Adjust navigation styling for mobile */
  .side-menu {
    padding: 20px;
  }
  
  .side-menu ul {
    padding-left: 16px;
  }
  
  .side-menu a {
    padding: 8px 4px;
    font-size: 16px;
    display: block;
  }
}

/* Desktop styles - ensure proper layout above 900px */
@media (min-width: 901px) {
  .mobile-nav-toggle {
    display: none !important;
  }
  
  .mobile-overlay {
    display: none !important;
  }
  
  #nav-container {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: auto !important;
    height: 100vh !important;
    z-index: auto !important;
    background: var(--bg) !important;
    border-right: 1px solid var(--border) !important;
    transition: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }
  
  body {
    display: grid !important;
    grid-template-columns: var(--nav-w, 300px) 1fr !important;
    grid-template-rows: auto auto; /* content row + footer row */
    gap: var(--gap, 28px) !important;
    padding-top: 0 !important;
    margin: 0 !important;
    align-items: flex-start;
  }

  #nav-container { grid-column: 1; grid-row: 1; height: 100vh !important; }
  main { grid-column: 2; grid-row: 1; }
  .site-footer { grid-column: 1 / -1 !important; grid-row: 2; }
  
  main {
    padding: 20px 40px !important;
    margin: 0 !important;
    max-width: 900px !important;
  }
}

/* --- Site Footer Styles --- */
.site-footer { 
  margin-top: 60px; 
  background: #111827; 
  color: #e5e7eb; 
  padding: 40px 24px 48px; 
  font-size: 0.9rem; 
  line-height: 1.5; 
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 6px -2px rgba(0,0,0,0.4), 0 -6px 18px -6px rgba(0,0,0,0.35);
  background: linear-gradient(to bottom, #162032, #111827 65%);
}
.site-footer a { color: #9ecbff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-links { list-style: none; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:16px; }
.footer-links li { margin:0; }
.footnote { margin:0; opacity:0.85; }
@media (max-width: 640px) {
  .site-footer { padding: 30px 18px 40px; margin-top:40px; }
  .footer-links { gap:12px; }
}

/* Large screen subtle compaction */
@media (min-width: 1400px) {
  .site-footer { padding-top: 48px; padding-bottom:56px; }
}

/* Ensure footer spans full width when body is a 2-column grid (desktop) */
@media (min-width: 901px) {
  .site-footer { grid-column: 1 / -1; }
}