/* /public_html/assets/css/style.css */
/* Toolescope v3.0 — Complete design system */

/* ── Glass & Surface ──────────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ── Shadows ──────────────────────────────────────────── */
.shadow-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.shadow-card-hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.04);
}

/* ── Line Clamp ───────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Section Navigation (tool.php) ───────────────────── */
#sectionNav {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#sectionNav.hidden-on-load {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Scrollbar hide (shared) ─────────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Reading Progress Bar ────────────────────────────── */
#progressBar {
  will-change: width;
  pointer-events: none;
}

/* ── Smooth scroll ───────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Prose styling ───────────────────────────────────── */
.prose-custom p {
  margin-bottom: 0.75rem;
}
.prose-custom p:last-child {
  margin-bottom: 0;
}

/* ── Review score ring animation ─────────────────────── */
@keyframes ringFill {
  from { stroke-dasharray: 0, 100; }
}

/* ── Pricing card hover lift ─────────────────────────── */
#pricing .relative:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

/* ── FAQ accordion smooth ────────────────────────────── */
[x-collapse] {
  overflow: hidden;
}

/* ── Back to top button ──────────────────────────────── */
#backToTop {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#backToTop:hover {
  transform: translateY(-2px);
}

/* ── User quotes hover ───────────────────────────────── */
#user-quotes blockquote {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#user-quotes blockquote:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* ── Feature inventory expand ────────────────────────── */
#features [x-collapse] {
  transition: height 0.3s ease;
}

/* ── Tool card component ─────────────────────────────── */
.tool-card {
  cursor: pointer;
  transition: border-color 0.2s ease,
              box-shadow 0.3s ease,
              transform 0.2s ease;
}
.tool-card:hover {
  transform: translateY(-2px);
}
.tool-card:active {
  transform: translateY(0);
}

/* Stack toggle active state */
.tool-card .stack-toggle.in-stack {
  background-color: #EBF2ED;
  border-color: rgba(26, 71, 49, 0.3);
  color: #1A4731;
}
.tool-card .stack-toggle.in-stack svg {
  transform: rotate(45deg);
}

/* ── Category filter pills ───────────────────────────── */
.filter-pill {
  transition: background-color 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease;
}

/* ── Comparison table zebra ──────────────────────────── */
.compare-table tr:nth-child(even) {
  background-color: rgba(247, 246, 243, 0.5);
}

/* ── Alternative card rank badge ─────────────────────── */
.alt-rank {
  font-variant-numeric: tabular-nums;
}

/* ── Mega menu transitions (header) ──────────────────── */
.mega-menu-enter {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Alpine.js transitions ───────────────────────────── */
[x-cloak] {
  display: none !important;
}

/* ── Print styles ────────────────────────────────────── */
@media print {
  #sectionNav,
  #progressBar,
  #backToTop,
  #floatingStackBtn,
  #stackDrawer,
  #stackOverlay,
  header,
  footer,
  .sticky,
  .no-print { display: none !important; }

  body { background: white !important; }

  .tool-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  a[href]:after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  a[href^="#"]:after,
  a[href^="/"]:after,
  a[href^="javascript"]:after { content: ""; }
}

/* ── Focus visible for accessibility ─────────────────── */
:focus-visible {
  outline: 2px solid #1A4731;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Selection color ─────────────────────────────────── */
::selection {
  background: rgba(26, 71, 49, 0.15);
  color: inherit;
}

/* ── Reduced motion preference ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tool-card:hover {
    transform: none;
  }

  #sectionNav {
    transition: none;
  }
}

/* ── Mobile optimization ─────────────────────────────── */
@media (max-width: 640px) {
  #sectionNav nav {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #pricing .grid {
    grid-template-columns: 1fr;
  }

  /* Better touch targets on mobile */
  .tool-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Full-width cards on small screens */
  .tool-card .stack-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }
}