@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);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.08);
  --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);
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --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.6;
  font-size: 15.5px;
  transition: background 0.2s, color 0.2s;
  padding-bottom: 80px;
}

.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: 1140px;
  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;
}

.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;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.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); }
}

.layout {
  max-width: 1140px;
  margin: 32px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 76px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.sidebar-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.toc-list { list-style: none; }
.toc-item { margin-bottom: 4px; }
.toc-item a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.toc-item a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.toc-item.active a {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.main-content { min-width: 0; }

.chapter-hero {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.chapter-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.chapter-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
}

.chapter-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin: 8px 0 10px;
}

.chapter-subtitle {
  font-size: 15px;
  color: var(--ink-soft);
}

section {
  margin-bottom: 40px;
  scroll-margin-top: 86px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}

.section-number {
  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;
}

p { margin-bottom: 14px; color: var(--ink-soft); }
strong { color: var(--ink); }

.sketch-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin: 20px 0;
  box-shadow: var(--shadow-md);
}

.sketch-img-wrap {
  background: #FDFBF7;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  text-align: center;
  overflow: hidden;
}

[data-theme="dark"] .sketch-img-wrap { background: #131A26; }

.sketch-img {
  max-width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.sketch-caption {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 10px;
  font-style: italic;
  text-align: center;
}

.callout-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.callout-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}

.callout-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.callout-text h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.callout-text p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 0;
}

.note-box, .warning-box {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
}

.note-box {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  color: var(--ink);
}

.warning-box {
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  color: var(--ink);
}

.compact-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13.5px;
}

.compact-table th, .compact-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}

.compact-table th {
  background: var(--tag-bg);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compact-table tr:last-child td { border-bottom: none; }

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.component-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.component-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.component-card p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 0;
}

.doc-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

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

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* --- 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;
  }
}