/* ThinkaBell SEO/AEO Enhancement Styles v2.0 */
/* Matches existing --amber-dark, --slate, --ink color variables */

/* Key Points Section - Featured Snippets */
.tb-key-points {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 0 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
}
.tb-key-points h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  padding: 1rem 1.25rem 0;
  color: var(--ink);
}
.tb-key-points ul {
  list-style: none;
  padding: 0.75rem 1.25rem 1rem;
  margin: 0;
}
.tb-key-points li {
  margin-bottom: 0.5rem;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--slate);
}
.tb-key-points li:last-child { margin-bottom: 0; }
.tb-key-points li strong {
  color: var(--amber-dark);
  font-weight: 600;
}

/* Summary Box Enhancement - Match existing .tb-section */
.tb-summary {
  max-width: 900px;
  margin: 2rem auto 1.5rem;
  padding: 0 1rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Table of Contents Enhancement */
.tb-toc {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Scroll Progress Indicator */
.tb-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--amber-dark);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Author Box - Match existing card styling */
.tb-author-box {
  max-width: 640px;
  margin: 2.5rem auto 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.5;
}
.tb-author-box__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.tb-author-box__text { flex: 1; }
.tb-author-box__name {
  font-weight: 600;
  color: var(--ink);
}
.tb-author-box__links a {
  color: var(--amber-dark);
  text-decoration: none;
  font-weight: 500;
}
.tb-author-box__links a:hover { text-decoration: underline; }

/* Back to Top Button - Match existing btn styling */
.tb-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.125rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 9000;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-scroll-top.visible { opacity: 0.8; visibility: visible; }
.tb-scroll-top:hover {
  opacity: 1;
  background: var(--amber-dark);
  color: #fff;
  border-color: var(--amber-dark);
}

/* Mobile Optimizations */
@media (max-width: 600px) {
  .tb-author-box {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  .tb-scroll-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
  }
  .tb-key-points {
    margin: 1.5rem auto 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tb-key-points, .tb-summary, .tb-toc, .tb-author-box, .tb-scroll-top {
    transition: none;
  }
  .tb-progress-bar {
    transition: none;
  }
}

/* Table styling for format comparison */
.tb-comparison-table {
  width: 100%;
  max-width: 640px;
  margin: 1.5rem auto;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tb-comparison-table th,
.tb-comparison-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tb-comparison-table th {
  background: var(--moss-light);
  font-weight: 600;
  color: var(--ink);
}
.tb-comparison-table tr:last-child td { border-bottom: none; }

/* Timeline styling for How-To steps */
.tb-timeline {
  max-width: 640px;
  margin: 1.5rem auto;
  padding-left: 1rem;
}
.tb-timeline li {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 2.5rem;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--slate);
}
.tb-timeline li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--amber-dark);
  border-radius: 50%;
}
.tb-timeline li strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* ═══ GEO: AI Assistant Widget Positioning ═══════════════ */
/* z-index retains !important to guarantee overlay above all host-page content */
/* Note: Current widget (tb-ai-widget.js) creates its own styles via JS.
   These rules target legacy classes (.tb-ai-widget-launcher, .tb-ai-widget-panel)
   and are kept for backward compatibility if needed. */
/*
#tb-ai-widget-root .tb-ai-widget-launcher {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 2147483000 !important;
}
#tb-ai-widget-root .tb-ai-widget-panel {
  position: fixed;
  bottom: 5rem;
  right: 1.25rem;
  width: min(380px, calc(100vw - 2rem));
  max-height: 70vh;
  z-index: 2147483000 !important;
}
@media (max-width: 480px) {
  #tb-ai-widget-root .tb-ai-widget-panel {
    right: 0.5rem;
    bottom: 4.5rem;
    width: calc(100vw - 1rem);
  }
}
*/

/* ═══ GEO: Structured Data Cards (HowTo/FAQ visual hints) ═══ */
.tb-step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: box-shadow 0.2s ease;
}
.tb-step-card:hover {
  box-shadow: var(--shadow-sm);
}
.tb-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--amber-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 0.5rem;
}

/* ═══ GEO: LLM/Tool Schema Visibility ════════════════════════ */
.tb-schema-note {
  font-size: 0.75rem;
  color: var(--moss);
  max-width: 640px;
  margin: 0.75rem auto 0;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

/* ═══ GEO: Direct Answer Box (AI Answer Engine Optimization) ═ */
.tb-direct-answer {
  max-width: 640px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(79,70,229,.04));
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tb-color-direct-answer {
  background: linear-gradient(135deg, var(--success-bg), var(--success-bg));
  border-left-color: var(--success);
}
.tb-da__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber-dark);
  margin-bottom: 0.35rem;
}
.tb-da__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.tb-da__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--slate);
}

/* ═══ GEO: Reading Time Indicator ══════════════════════════════ */
.tb-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--moss-light);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--slate);
  margin: 0.5rem 0;
}
.tb-rt__icon {
  font-size: 1rem;
  opacity: 0.7;
}
.tb-rt__text {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--amber-dark);
}

/* ═══ GEO: Color-Enhanced Key Points ══════════════════════════ */
.tb-color-enhanced {
  background: linear-gradient(135deg, rgba(245,158,11,.04), rgba(99,102,241,.04));
}
.tb-color-enhanced h2 {
  color: var(--amber-dark);
}

/* ═══ GEO: Quick Facts — AI-answer box styling ════════════════ */
.tb-quick-facts {
  background: linear-gradient(135deg, var(--moss-light), rgba(99,102,241,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  max-width: 640px;
  margin: 1.5rem auto;
}
.tb-quick-facts h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.tb-quick-facts ul {
  margin: 0;
  padding-left: 1.25rem;
}
.tb-quick-facts li {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.7;
}

/* ═══ GEO: AI Widget Styles (complements tb-ai-widget.js) ═══ */
/* Note: Current widget (tb-ai-widget.js) creates its own styles via JS.
   These rules target legacy classes and are kept for backward compatibility. */
/*
#tb-ai-widget-root {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
}
#tb-ai-widget-root .tb-ai-launcher svg {
  width: 1.5rem;
  height: 1.5rem;
}
*/

/* ═══ GEO: ItemList / directory optimization ════════════════ */
.tb-tool-directory-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.tb-tool-directory-item:hover {
  border-color: var(--amber-dark);
  box-shadow: var(--shadow-sm);
}
.tb-tool-directory-item__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.tb-tool-directory-item__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.925rem;
}
.tb-tool-directory-item__desc {
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 0.15rem;
}

/* ═══ GEO: Entrance Animations ══════════════════════════════════ */

@keyframes tb-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tb-pulse-strong {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(251, 146, 60, 0); }
}

@keyframes tb-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.9); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.9); }
}

@keyframes tb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Staggered entrance for GEO elements */
.tb-key-points,
.tb-direct-answer,
.tb-reading-time,
.tb-quick-facts,
.tb-section--enhanced,
.tb-color-tip-box {
  animation: tb-fade-in-up 0.5s ease-out;
  animation-fill-mode: both;
}

/* Staggered delays based on position */
.tool-page > .tb-section--enhanced,
.tool-page > .tb-key-points {
  animation-delay: 0.1s;
}
.tool-page > .tb-color-tip-box {
  animation-delay: 0.2s;
}
.tool-page > .tb-reading-time {
  animation-delay: 0.15s;
}
.tool-page > .tb-direct-answer {
  animation-delay: 0.3s;
}

/* Pulse highlight for key elements */
.tb-key-points {
  animation-name: tb-fade-in-up, tb-pulse-strong;
  animation-duration: 0.5s, 2s;
  animation-iteration-count: 1, 3;
  animation-delay: 0, 0.5s;
  animation-fill-mode: both;
}

/* Hover micro-interaction for directory items */
.tb-tool-directory-item {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tb-tool-directory-item:hover {
  transform: translateX(4px);
}

/* Tool card hover lift */
.tb-tool-card,
.hero-card,
.tool-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tb-tool-card:hover,
.hero-card:hover,
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Stat counter font family */
[id^="stat-"] {
  font-family: var(--font-mono);
}

/* Shimmer loading for lazy-loaded content */
.tb-shimmer {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0) 100%);
  background-size: 200% 100%;
  animation: tb-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tb-key-points,
  .tb-direct-answer,
  .tb-reading-time,
  .tb-quick-facts,
  .tb-section--enhanced,
  .tb-color-tip-box,
  .tb-tool-directory-item,
  .tb-tool-card,
  .hero-card,
  .tool-card,
  .tb-shimmer {
    animation: none;
    transition: none;
    transform: none;
  }
}