/* ==========================================================================
   KONVI.CSS — Enhancement Layer for Konvi.ch
   Loaded after global.css, themes.css, components.css
   Implements: icon system, dot background, typography tweaks, privacy badge,
               breadcrumb chevrons, counters, kbd hints, tool-card hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Additional Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --accent:       var(--color-success, #10b981);
  --accent-hover: #34d399;
  --accent-bg:    rgba(16, 185, 129, 0.08);
}

/* --------------------------------------------------------------------------
   2. Background Dot Pattern
   -------------------------------------------------------------------------- */
body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
  background-size: 24px 24px;
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   3. Lucide Icon Base Styles
   -------------------------------------------------------------------------- */
.lucide-icon {
  width:  1.5rem;
  height: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.tool-card .lucide-icon {
  width:  1.75rem;
  height: 1.75rem;
}

.category-header .lucide-icon,
.tool-header    .lucide-icon {
  width:  2.25rem;
  height: 2.25rem;
  stroke-width: 1.5;
}

.breadcrumb .lucide-icon {
  width:  0.875rem;
  height: 0.875rem;
  color:  var(--text-muted);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. Letter-Icon System (Text Tools & Text Styles)
   -------------------------------------------------------------------------- */
.letter-icon {
  font-family: var(--font-mono);
  font-size:   1.5rem;
  font-weight: 500;
  color:       var(--text-primary);
  letter-spacing: -0.02em;
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}

.tool-card .letter-icon {
  font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   5. Tool Card Hover Enhancement
   -------------------------------------------------------------------------- */
.tool-card {
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-light, var(--color-primary));
}

.tool-card:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   6. Breadcrumb: Monospace font + Lucide chevron support
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size:   0.8125rem;
}

/* --------------------------------------------------------------------------
   7. Privacy Lock Badge (inline in h1 on tool-detail pages only)
   -------------------------------------------------------------------------- */
.privacy-lock {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.625rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  background: var(--accent-bg);
  cursor: help;
  flex-shrink: 0;
}

.privacy-lock .lucide-icon {
  width:  1rem;
  height: 1rem;
  color:  var(--accent);
}

/* --------------------------------------------------------------------------
   8. Screen-Reader-Only Utility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   9. Character Counter (monospace label)
   -------------------------------------------------------------------------- */
.char-count {
  font-family: var(--font-mono);
  font-size:   0.8125rem;
  color:       var(--text-secondary);
}

/* --------------------------------------------------------------------------
   10. Button KBD Hints
   -------------------------------------------------------------------------- */
button kbd {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size:   0.6875rem;
  font-weight: 500;
  color:       var(--text-secondary);
  background:  rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  line-height: 1;
  vertical-align: middle;
}

[data-theme="light"] button kbd {
  background: rgba(0, 0, 0, 0.05);
}

button.btn-primary kbd {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   11. Category Meta (tool count)
   -------------------------------------------------------------------------- */
.category-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.category-meta .lucide-icon {
  width:  1rem;
  height: 1rem;
  color:  var(--text-muted);
}

/* --------------------------------------------------------------------------
   12. Textarea Placeholder — monospace empty-state hint
   -------------------------------------------------------------------------- */
textarea[readonly]::placeholder {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   13. Tool Header — accommodate inline privacy-lock badge
   -------------------------------------------------------------------------- */
.tool-header h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* --------------------------------------------------------------------------
   14. Homepage Hero Subtitle cap
   -------------------------------------------------------------------------- */
.hero-subtitle {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}