/*
 * overrides.css — Production overrides applied across all pages.
 * Loaded AFTER each page's inline <style> block so these rules win on specificity ties.
 */

/* ── Hide sponsor/ad placeholders in production ───────────────── */
.ad-slot { display: none !important; }

/* ── Responsive overflow / wrapping fixes ─────────────────────── */
.stat-value {
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.1;
}
.stat-card  { min-width: 0; overflow: hidden; }
.stat-grid  { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }

.tool-card           { min-width: 0; }
.tool-card-name,
.tool-card-desc,
.tool-card-tag       { min-width: 0; overflow-wrap: anywhere; }

.hash-value          { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.uuid-text           { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }

/* Make tool body containers safe on small viewports */
.tool-body .container { min-width: 0; }
.control-section,
.control-body,
.result-card,
.qr-preview-wrap     { min-width: 0; }

/* Avoid horizontal scroll caused by stray wide elements */
body { overflow-x: hidden; }

/* Tab bar wrap on small screens */
@media (max-width: 640px) {
  .tab-bar { flex-wrap: wrap; }
  .tab-btn { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
  .hash-row { grid-template-columns: 60px 1fr auto; gap: 0.5rem; }
  .options-grid { grid-template-columns: 1fr !important; }
  .qr-layout { grid-template-columns: 1fr !important; }
}

/* ── Tool-page label visibility fix (section labels were clipped) ── */
.control-header-title { padding-left: 0; }
.section-label        { padding-left: 0; }
.label                { padding-left: 0; }

/* Tool page hero label clipping on left edge */
.tool-header .container { overflow: visible; }

/* Drop zone hint wrap */
.drop-zone-hint, .drop-zone-text { text-align: center; padding: 0 0.5rem; overflow-wrap: anywhere; }

/* Buttons should not overflow on tight layouts */
.btn { white-space: normal; max-width: 100%; }
.btn-icon { white-space: nowrap; }

/* Toast container left for mobile small screens */
@media (max-width: 480px) {
  #toast-container { left: 1rem !important; right: 1rem !important; max-width: calc(100vw - 2rem) !important; }
}

/* ─── Helper: 'lang-en' / 'lang-tr' etc bodies hide non-matching i18n nodes ─── */
[data-i18n] { /* placeholder for future enhancement */ }

/* ─── Accessibility: visually-hidden skip link, becomes visible on focus ── */
.skip-link {
  position: absolute;
  top: -42px;
  left: 1rem;
  padding: 0.5rem 0.875rem;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top 150ms ease;
}
.skip-link:focus {
  top: 0.75rem;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* TBX-RELATED-STYLES */
.tool-related{border-top:1px solid var(--border);margin-top:var(--space-16,2rem);padding:var(--space-12,1.5rem) 0;}
.tool-related .container{max-width:72ch;margin:0 auto;padding:0 var(--space-4,1rem);}
.tool-related h2{font-family:var(--font-mono);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;margin:0 0 var(--space-4,1rem);}
.tool-related-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem;}
.tool-related-link{display:block;padding:.625rem .875rem;border:1px solid var(--border);border-radius:var(--radius-md,8px);color:inherit;text-decoration:none;font-size:.9375rem;line-height:1.3;transition:border-color .15s ease,background .15s ease,transform .15s ease;}
.tool-related-link:hover,.tool-related-link:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);}