@import url("fonts.css");

:root {
  --bg: #F4F6F9;
  --card-bg: #FFFFFF;
  --card-border: rgba(20, 32, 43, 0.08);
  --ink: #111927;
  --ink-soft: #4B5565;
  --ink-faint: #9AA4B2;
  --primary: #0284C7;
  --primary-dark: #0369A1;
  --primary-soft: rgba(2, 132, 199, 0.08);
  --primary-border: rgba(2, 132, 199, 0.25);
  --accent: #0D9488;
  --accent-soft: rgba(13, 148, 136, 0.08);
  --tag-bg: #E2E8F0;
  --pro-gold: #D97706;
  --pro-gold-soft: rgba(217, 119, 6, 0.12);
  --pro-gold-border: rgba(217, 119, 6, 0.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0B111E;
  --card-bg: #151E2E;
  --card-border: rgba(255, 255, 255, 0.08);
  --ink: #F1F5F9;
  --ink-soft: #94A3B8;
  --ink-faint: #64748B;
  --primary: #38BDF8;
  --primary-dark: #0284C7;
  --primary-soft: rgba(56, 189, 248, 0.12);
  --primary-border: rgba(56, 189, 248, 0.25);
  --accent: #2DD4BF;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --tag-bg: #1E293B;
  --pro-gold: #F59E0B;
  --pro-gold-soft: rgba(245, 158, 11, 0.15);
  --pro-gold-border: rgba(245, 158, 11, 0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
  padding-bottom: 80px;
}

/* Top navigation header */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav-brand-badge {
  background: var(--primary);
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle-btn {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle-btn:hover {
  background: var(--primary);
  color: #fff;
}

.lang-selector-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.lang-selector-wrap:hover {
  border-color: var(--primary);
}

.lang-globe {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

.lang-select {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding-right: 2px;
}

.lang-select option {
  background: var(--card-bg);
  color: var(--ink);
}

.lang-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-md);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 1000;
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Main Container Layout */
.layout {
  max-width: 1160px;
  margin: 36px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* Sticky Sidebar Navigation */
.sidebar {
  position: sticky;
  top: 76px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.sidebar-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toc-item a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.toc-item a:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateX(3px);
}

.toc-item.active a {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  border-left: 3px solid var(--primary);
}

.chapter-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* Content Area */
.content-card {
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 44px 48px;
  box-shadow: var(--shadow-sm);
}

.doc-header {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 28px;
}

.doc-breadcrumb {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.doc-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 12px;
}

.doc-lead {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Section Styling */
section {
  margin-bottom: 50px;
  scroll-margin-top: 90px;
}

h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

h2 .section-num {
  background: var(--primary-soft);
  color: var(--primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 12px;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 8px;
}

p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-size: 15.5px;
}

ul, ol {
  margin: 0 0 18px 22px;
  color: var(--ink-soft);
}

li {
  margin-bottom: 8px;
  font-size: 15px;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* Highlight & Callout Boxes */
.callout {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin: 24px 0;
}

.callout-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.callout p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
}

.callout-gold {
  background: var(--pro-gold-soft);
  border-left-color: var(--pro-gold);
}

.callout-gold .callout-title {
  color: var(--pro-gold);
}

.callout-warning {
  background: rgba(239, 68, 68, 0.08);
  border-left-color: #EF4444;
}

.callout-warning .callout-title {
  color: #DC2626;
}

/* Comparison Dual Box */
.dual-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 32px;
}

.system-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.system-card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--card-border);
}

.system-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* In the two-column comparison grid the badge sits under the title, as in chapter 1. */
.dual-box .system-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.system-subtitle {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-gold { background: var(--pro-gold-soft); color: var(--pro-gold); }
.badge-gray { background: var(--tag-bg); color: var(--ink-soft); }

/* Tables */
.table-container {
  overflow-x: auto;
  margin: 22px 0 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  background: var(--card-bg);
}

thead th {
  background: var(--tag-bg);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  color: var(--ink-soft);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--primary-soft);
}

td.feature-name {
  font-weight: 700;
  color: var(--ink);
}

td.center, th.center {
  text-align: center;
}

.check-yes {
  color: #10B981;
  font-weight: 800;
}

.check-no {
  color: #EF4444;
  font-weight: 700;
}

.check-limited {
  color: var(--pro-gold);
  font-weight: 700;
}

/* Pricing Pill */
.price-tag {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 12px 0 4px;
}

.price-sub {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Feature List */
.feature-bullets {
  list-style: none;
  margin: 14px 0 0;
}

.feature-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.feature-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 800;
}

.feature-bullets.gold li::before {
  color: var(--pro-gold);
}

/* Footer Navigation */
.doc-footer-nav {
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}

.footer-btn-primary {
  background: var(--primary);
  color: #fff;
}

.footer-btn-primary:hover {
  background: var(--primary-dark);
}

.footer-btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--card-border);
}

.footer-btn-outline:hover {
  background: var(--tag-bg);
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sidebar {
    display: none;
  }
  .content-card {
    padding: 28px 20px;
  }
  .dual-box {
    grid-template-columns: 1fr;
  }
}

/* Card boxes used by the French translation of section 3 */
.card-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}

.card-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--ink);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* --- Phone portrait -------------------------------------------------------
   Below ~600px the header row could not hold brand + language picker + theme
   button, so the controls were pushed off-screen; several grids also kept two
   columns and made the page wider than the viewport. */
@media (max-width: 600px) {
  .nav-container { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .nav-brand { font-size: 15px; gap: 8px; min-width: 0; }
  .nav-actions { gap: 8px; margin-left: auto; }
  .lang-selector-wrap { min-width: 0; padding: 4px 8px; }
  .lang-select { min-width: 0; max-width: 42vw; font-size: 12px; }
  .theme-toggle-btn { padding: 6px 10px; font-size: 12px; }

  .layout { margin: 20px auto; padding: 0 14px; gap: 20px; }
  .content-card, .main-content { padding: 22px 16px; }
  .chapter-hero { padding-bottom: 20px; margin-bottom: 26px; }
  .chapter-title { font-size: 24px; }

  .grid-2, .dual-box { grid-template-columns: 1fr; }
  /* An auto-fit track still claims its min width inside a narrower column. */
  .callout-list, .component-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }
  .doc-footer-nav { flex-direction: column; }

  table, .comparison-table { font-size: 12.5px; }
  th, td, .comparison-table th, .comparison-table td { padding: 8px 10px; }
  code, pre { overflow-wrap: anywhere; }
  /* Long compound words (de, el, fi, hu...) must be allowed to break. */
  body { overflow-wrap: break-word; }
  /* A flex heading cannot wrap its own text, so the long titles of some
     languages widened the page. Lay them out as normal text instead, with the
     number badge kept inline, and let a very long word break. */
  h1, h2, h3, h4, .section-title, .chapter-title {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  h2 .section-num, .section-title .section-number {
    margin-right: 10px;
    vertical-align: -6px;
  }
  h2, .section-title { font-size: 21px; }
  h3 { font-size: 18px; }
  /* A nowrap badge is wider than a small phone; let it break instead. */
  .badge { white-space: normal; }
  /* These tables have no scroll wrapper of their own, so let them scroll. */
  .compact-table, .comparison-table { display: block; overflow-x: auto; }
  .compact-table th, .compact-table td,
  .comparison-table th, .comparison-table td { padding: 7px 9px; font-size: 12px; }
}

@media (max-width: 430px) {
  /* The badge alone still links home; the word beside it costs too much room. */
  .nav-brand > span:not(.nav-brand-badge) { display: none; }
  .theme-toggle-btn { padding: 6px 9px; }
  .lang-select { max-width: 55vw; }
  /* Leave the theme label to screen readers - the icon carries it visually. */
  #themeLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}