/* ============================================================
   merge-compat.css — bridges Utilio tool pages into the ToolNest
   theme. Maps Utilio's CSS variables + structural classes onto
   ToolNest design tokens (light + dark). Loaded after style.css
   on merged /tools/<slug>/ pages only.
   ============================================================ */

:root {
  /* Utilio variable -> ToolNest token mapping */
  --slate: var(--ink);
  --card: var(--surface);
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --font: var(--font-body);
  --font-display: var(--font-head);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: var(--shadow-md);
  --brand-600: var(--primary);
  --brand-700: var(--primary-ink);
}

html[data-theme="dark"] {
  --card: var(--surface);
  --slate: var(--ink);
  --green-bg: #0e2a1a;
  --red-bg: #2c1215;
  --amber-bg: #2b2110;
}

/* ---- layout container (Utilio) -> ToolNest wrap ---- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- breadcrumbs ---- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0 0.25rem;
}
.breadcrumbs a { color: var(--primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---- tool hero ---- */
.tool-hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0 1.5rem;
}
.tool-hero .tool-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.tool-hero h1 {
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
.tool-hero .tagline {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0 0 0.6rem;
}
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* ---- workspace (the tool UI card) ---- */
.workspace {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  margin: 0 0 2rem;
}
.workspace h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

/* ---- buttons ---- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.9rem 0;
}
.btn-ghost {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* ---- outputs / alerts ---- */
.output-box {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin: 0.75rem 0;
  word-break: break-word;
}
.alert {
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin: 0.75rem 0;
  font-size: 0.92rem;
}
.alert-error { background: var(--red-bg); border: 1px solid var(--red); color: var(--ink); }
.alert-ok, .alert-success { background: var(--green-bg); border: 1px solid var(--green); color: var(--ink); }
.alert-warn { background: var(--amber-bg); border: 1px solid var(--amber); color: var(--ink); }

/* ---- flags (qr-safety-scan etc.) ---- */
.flag { border-radius: var(--radius-sm); }
.flag.red { background: var(--red-bg); border: 1px solid var(--red); }
.flag.green { background: var(--green-bg); border: 1px solid var(--green); }
.flag.amber { background: var(--amber-bg); border: 1px solid var(--amber); }

/* ---- faq divs (Utilio) — styled like ToolNest accordions ---- */
div.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 0.6rem 0;
}
div.faq-item strong, div.faq-item b { display: block; margin-bottom: 0.35rem; }

/* ---- generic content spacing for merged pages ---- */
.tool-main .prose p, .tool-main p { line-height: 1.7; }
.tool-main h2 { font-family: var(--font-head); margin: 2rem 0 0.75rem; font-size: 1.35rem; }
.tool-main h3 { font-family: var(--font-head); margin: 1.4rem 0 0.5rem; font-size: 1.1rem; }
.tool-main ul, .tool-main ol { margin: 0.6rem 0 1rem 1.25rem; line-height: 1.7; }
.mono { font-family: var(--mono); }

/* ---- dropzone / file inputs common in media tools ---- */
.dropzone, .dz {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s;
}
.dropzone:hover, .dz:hover { border-color: var(--primary); }

/* ---- tables inside merged content ---- */
.tool-main table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.tool-main th, .tool-main td { border: 1px solid var(--border); padding: 0.55rem 0.75rem; text-align: left; }
.tool-main th { background: var(--surface-2); font-weight: 600; }

@media (max-width: 640px) {
  .workspace { padding: 1rem; }
  .tool-hero h1 { font-size: 1.5rem; }
  .tool-hero { flex-direction: column; }
}