/* CSS Variables */
:root {
  --color-primary: #003366;
  --color-primary-dark: #002244;
  --color-secondary: #0066cc;
  --color-text: #333;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-bg-alt: #f5f5f5;
  --color-border: #ddd;
  --color-link: #0066cc;
  --color-link-hover: #004499;

  --font-body: Georgia, 'Times New Roman', serif;
  --font-heading: Arial, Helvetica, sans-serif;
  --font-mono: 'Courier New', monospace;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  --max-width: 1200px;
  --border-radius: 4px;
  --transition: 0.2s ease;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Layout */
.header-container,
.footer-container,
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header */
.site-header {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-md) 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.site-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.site-branding a {
  color: white;
  text-decoration: none;
}

/* Navigation */
.site-navigation .nav-menu {
  list-style: none;
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.nav-link {
  color: white;
  font-weight: 500;
  padding: var(--spacing-sm);
}

.nav-link:hover,
.nav-link.active {
  background-color: var(--color-primary-dark);
  border-radius: var(--border-radius);
}

/* Language Switcher */
.language-switcher {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.language-list {
  list-style: none;
  display: flex;
  gap: var(--spacing-sm);
}

.language-current {
  font-weight: bold;
  color: white;
}

.language-switcher a {
  color: rgba(255,255,255,0.8);
}

.language-switcher a:hover {
  color: white;
}

.language-unavailable {
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
}

.missing-indicator {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  margin-left: var(--spacing-xs);
}

/* Revision Switcher */
.revision-switcher {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.revision-list {
  list-style: none;
  display: flex;
  gap: var(--spacing-sm);
}

.revision-active {
  font-weight: bold;
}

.revision-badge {
  background-color: var(--color-secondary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  margin-left: var(--spacing-xs);
}

/* Breadcrumb */
.breadcrumb {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.breadcrumb-item:not(:last-child)::after {
  content: '›';
  margin-left: var(--spacing-sm);
  color: var(--color-text-light);
}

/* Content */
main {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-xl) var(--spacing-md);
}

.content-header {
  margin-bottom: var(--spacing-xl);
}

.rule-meta {
  color: var(--color-text-light);
  font-style: italic;
}

.english-term {
  font-size: 0.9em;
  color: var(--color-text-light);
  margin-top: var(--spacing-xs);
}

.content-body {
  line-height: 1.8;
}

/* Definition Links */
.definition-ref {
  position: relative;
  display: inline;
}

.def-link {
  font-style: italic;
  border-bottom: 1px dotted var(--color-link);
  text-decoration: none;
}

.def-link:hover {
  border-bottom-style: solid;
}

.definition-tooltip {
  position: absolute;
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  max-width: 300px;
  z-index: 1000;
  font-size: 0.9rem;
  line-height: 1.4;
  display: none;
}

/* Cross-Reference Links */
.rule-ref,
.part-ref,
.appendix-ref {
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s;
}

.rule-ref:hover,
.part-ref:hover,
.appendix-ref:hover {
  border-bottom-color: var(--color-link);
}

.definition-tooltip.show {
  display: block;
}

/* Lists */
.page-list {
  list-style: none;
}

.page-list-item {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-alt);
}

.page-list-item h2 {
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
}

/* Content Lists - PDF Formatting */
/* Numbered lists from PDF */
.content-body ol {
  margin-left: 0;
  padding-left: 2em;
  margin-bottom: var(--spacing-md);
}

.content-body ol > li {
  margin-bottom: 0.5em;
}

/* Unordered lists */
.content-body ul {
  margin-left: 0;
  padding-left: 2em;
  margin-bottom: var(--spacing-md);
}

.content-body ul > li {
  margin-bottom: 0.5em;
}

/* Nested lists */
.content-body ol ol,
.content-body ol ul,
.content-body ul ol,
.content-body ul ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Text Formatting - PDF Accurate */
.content-body em,
.content-body i {
  font-style: italic;
}

.content-body strong,
.content-body b {
  font-weight: bold;
}

.content-body u {
  text-decoration: underline;
}

/* Combined formatting */
.content-body em strong,
.content-body strong em,
.content-body i b,
.content-body b i {
  font-style: italic;
  font-weight: bold;
}

/* Line spacing for definition content */
.content-body.definition-content {
  line-height: 1.7;
  text-align: justify;
}

/* Preserve line breaks in content */
.content-body .preserve-breaks {
  white-space: pre-line;
}

/* Small text (footnotes, etc.) */
.content-body .text-sm {
  font-size: 0.9em;
}

.content-body .text-xs {
  font-size: 0.8em;
}

/* Definitions page - original document format */
.definitions-page {
  max-width: 800px;
}

.definitions-page .list-header h1 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xl);
}

.definitions-intro {
  margin-bottom: var(--spacing-xl);
  text-align: justify;
}

.definitions-list-original {
  margin: var(--spacing-lg) 0;
}

.definition-entry {
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
  text-align: justify;
  text-indent: 0;
}

.definition-term {
  color: var(--color-text);
  text-decoration: none;
}

.definition-term:hover {
  color: var(--color-link);
}

.definition-term em strong,
.definition-term strong em {
  font-style: italic;
  font-weight: bold;
}

/* Footer */
.site-footer {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-content {
  flex: 1;
}

.footer-links {
  display: flex;
  gap: var(--spacing-md);
}

.copyright,
.disclaimer {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* Responsive Design */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-navigation .nav-menu {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .language-switcher,
  .revision-switcher,
  .breadcrumb {
    display: none;
  }

  main {
    max-width: 100%;
  }
}