/* AI Tool Labs — main.css
   Critical/base CSS is inlined in main.php layout.
   This file adds supplementary styles loaded async.
   ================================================================ */

/* ── Smooth scrolling & selection ─────────────────────────────── */
html { scroll-behavior: smooth; }
::selection { background: rgba(99,102,241,.2); color: var(--accent); }

/* ── Focus ring ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Links ────────────────────────────────────────────────────── */
a { transition: opacity .15s; }

/* ── Transitions ──────────────────────────────────────────────── */
.tool-card, .cat-card, .card, .blog-card, .article-card {
  will-change: transform;
}

/* ── Loading skeleton ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--bg2) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r1);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Sticky nav shadow on scroll ──────────────────────────────── */
.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(99,102,241,.1);
}

/* ── Prose typography ─────────────────────────────────────────── */
.prose h2 { font-size: 1.4rem; font-weight: 800; color: var(--t1); margin: 28px 0 12px; line-height: 1.3; }
.prose h3 { font-size: 1.15rem; font-weight: 700; color: var(--t1); margin: 22px 0 10px; line-height: 1.3; }
.prose p  { margin-bottom: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 14px; }
.prose li { margin-bottom: 6px; }
.prose a  { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong { color: var(--t1); font-weight: 700; }
.prose blockquote { border-left: 3px solid var(--accent); padding: 14px 18px; background: var(--accentL); border-radius: 0 8px 8px 0; margin: 20px 0; font-style: italic; color: var(--t2); }
.prose code { background: var(--bg2); padding: 2px 7px; border-radius: 5px; font-size: .875em; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--accent); }
.prose pre  { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; padding: 20px; overflow-x: auto; margin: 20px 0; }
.prose pre code { background: none; padding: 0; color: var(--t1); }
.prose img  { border-radius: 12px; margin: 20px 0; max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.prose th   { padding: 10px 14px; background: var(--bg2); font-weight: 700; text-align: left; border-bottom: 2px solid var(--border); }
.prose td   { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.prose hr   { border: none; border-top: 1.5px solid var(--border); margin: 32px 0; }

/* ── Tool card hover glow ─────────────────────────────────────── */
.tool-card:hover {
  box-shadow: 0 8px 32px rgba(99,102,241,.15), 0 2px 8px rgba(99,102,241,.08);
}

/* ── Gradient text utility ────────────────────────────────────── */
.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Form inputs global (public pages) ───────────────────────── */
.form-input {
  width: 100%; padding: 11px 15px; border-radius: 10px;
  border: 1.5px solid var(--border2); background: var(--surface);
  font: 500 .95rem var(--font); color: var(--t1);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--t3); }
textarea.form-input { resize: vertical; min-height: 90px; line-height: 1.55; }
select.form-input { cursor: pointer; }

/* ── Notification toast ───────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 14px 20px;
  box-shadow: var(--shadow-lg);
  font: 600 .9rem var(--font); color: var(--t1);
  animation: toastIn .25s ease forwards;
  max-width: 320px;
}
.toast.ok  { border-color: rgba(16,185,129,.4); }
.toast.err { border-color: rgba(239,68,68,.4); }
@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Section spacing ──────────────────────────────────────────── */
.section-sm { padding: 48px 0; }
.section-lg { padding: 100px 0; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font: 600 .825rem var(--font); color: var(--t3);
  padding: 20px 0;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb .sep { color: var(--t3); }

/* ── Back to top ──────────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-grad); color: #fff; border: none;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px var(--accent-glow);
  font-size: 1.1rem; transition: transform .15s;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover { transform: translateY(-2px); }

/* ── Responsive tweaks ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-search { flex-direction: column; padding: 14px; gap: 12px; border-radius: 14px; }
  .hero-search input { padding: 0; font-size: .95rem; }
  .hero-search .btn { width: 100%; justify-content: center; }
  .single-layout { grid-template-columns: 1fr; }
  .tool-hero { flex-direction: column; }
  .tool-info-grid { grid-template-columns: 1fr 1fr; }
  .cats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-tags { display: none; }
  .cta-inner { padding: 40px 24px; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .navbar, .footer, .tool-hero-actions, .sidebar-cta { display: none; }
  body { background: #fff; color: #000; }
}