/* css/tools.css — Phase 3. Lightweight styles for the Tools platform.
   Mobile-first, uses Bootstrap 5 as the base. */

:root {
  --tool-accent: #0d6efd;
  --tool-card-bg: #fff;
  --tool-card-border: #e6e8eb;
  --tool-muted: #6c757d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tool-card-bg: #1b1f24;
    --tool-card-border: #2c3238;
    --tool-muted: #9aa4af;
  }
}

.tools-hub-head h1 { font-weight: 700; }

.tools-search .form-control { min-height: 46px; }

/* cards ------------------------------------------------------------------- */
.tool-card,
.tool-cat-card {
  background: var(--tool-card-bg);
  border: 1px solid var(--tool-card-border);
  border-radius: 12px;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tool-card:hover,
.tool-cat-card:hover {
  border-color: var(--tool-accent);
  box-shadow: 0 6px 18px rgba(13, 110, 253, .12);
  transform: translateY(-2px);
}
.tool-card-icon i,
.tool-cat-card i {
  font-size: 1.6rem;
  color: var(--tool-accent);
}
.tool-card-name,
.tool-cat-name { font-weight: 600; display: block; margin-top: .25rem; }
.tool-card-desc {
  font-size: .85rem;
  color: var(--tool-muted);
  margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* single tool ------------------------------------------------------------- */
.tool-ui { border-radius: 12px; }
.tool-ui label { font-weight: 600; }
.tool-result {
  background: rgba(13, 110, 253, .06);
  border: 1px solid var(--tool-card-border);
  border-radius: 10px;
  padding: 1rem;
}
.tool-result .result-value { font-size: 1.6rem; font-weight: 700; color: var(--tool-accent); }
.tool-actions .btn { min-height: 40px; }
.related-tools a { text-decoration: none; }

/* accessibility: visible focus */
.tool-card:focus-visible,
.tool-cat-card:focus-visible,
.tool-ui :focus-visible { outline: 3px solid var(--tool-accent); outline-offset: 2px; }

/* mobile: comfortable tap targets, no horizontal scroll */
@media (max-width: 575.98px) {
  .tool-card, .tool-cat-card { padding: .85rem !important; }
  .tool-result .result-value { font-size: 1.35rem; }
}

/* print-friendly result */
@media print {
  header, footer, nav, .tool-sidebar, .related-tools, .tools-search, .tool-actions { display: none !important; }
  .tool-ui, .tool-result { border: 1px solid #000; }
  body { font-size: 12pt; }
}

/* ---- Bootstrap 4 compatibility (site theme is BS4; tools markup uses a few
   BS5 helpers). These keep spacing correct without changing the theme. ---- */
.row.g-3 { margin-right: -.5rem; margin-left: -.5rem; }
.row.g-3 > [class*="col-"] { padding-right: .5rem; padding-left: .5rem; margin-bottom: 1rem; }
.tool-actions.d-flex.gap-2 > * { margin-right: .5rem; margin-bottom: .5rem; }
.form-select {               /* BS5 name; style like the theme's form-control */
  display: block; width: 100%; padding: .375rem 2rem .375rem .75rem;
  font-size: 1rem; line-height: 1.5; color: #495057;
  background-color: #fff; border: 1px solid #ced4da; border-radius: .25rem;
}