/* LocalDNS terminal guide. Builds on style.css (the dashboard's styles). */

html[lang="ar"] .en,
html[lang="en"] .ar { display: none !important; }

/* Code is always left-to-right, even inside Arabic text (".localhost", not "localhost."). */
html[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

html[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", -apple-system, sans-serif;
  line-height: 1.75;
}

.guide { max-width: 860px; }
.guide .section { padding: 20px 24px; margin-bottom: 16px; overflow: visible; }
.guide h2 { font-size: 20px; margin: 0 0 8px; }
.guide h3 { font-size: 15px; margin: 18px 0 6px; }
.guide p { margin: 8px 0; }
.guide ul { margin: 8px 0; padding-inline-start: 20px; }
.guide li { margin: 6px 0; }
.guide a { color: var(--primary); }
.guide a.btn { color: var(--text); }

.toc { padding: 16px 24px; margin-bottom: 16px; overflow: visible; }
.toc-title { margin: 0 0 8px; font-weight: 600; }
.toc ol { margin: 0; padding-inline-start: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 3px 0; break-inside: avoid; }
html[dir="rtl"] .toc ol { list-style-type: arabic-indic; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

pre.cmd, pre.url, pre.output {
  position: relative;
  direction: ltr;
  text-align: left;
  margin: 8px 0 12px;
  padding: 11px 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
}
.cmd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  background: #0d1321;
  border-radius: 8px;
  margin: 8px 0 12px;
  padding-right: 8px;
}
.cmd-row pre.cmd { flex: 1; min-width: 0; margin: 0; }
pre.cmd { background: #0d1321; color: #e5e7eb; }
pre.cmd::before { content: "$ "; color: #6b7280; }
pre.url { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
pre.output { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
pre code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }

.copy-btn {
  flex: none;
  font: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.16); }
.copy-btn.copied { color: #86efac; border-color: rgba(134, 239, 172, 0.5); }
.copy-area { position: fixed; top: -1000px; opacity: 0; }

.tip {
  color: var(--muted);
  font-size: 14px;
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: 12px;
}
.guide .callout { color: var(--text); margin: 12px 0 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.chips code { display: inline-block; margin: 2px 2px 2px 0; }

table.flags { width: 100%; border-collapse: collapse; margin: 8px 0; }
table.flags td { white-space: normal; vertical-align: top; padding: 9px 12px; }
table.flags td:first-child { white-space: nowrap; width: 1%; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] table.flags td:first-child { text-align: left; }

.faq dt { font-weight: 600; margin-top: 14px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }

@media (max-width: 640px) {
  .guide .section, .toc { padding: 16px; }
  .toc ol { columns: 1; }
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 0; }
  table.flags td:first-child { white-space: normal; width: auto; }
}