/* ---------- Shared "Tools" nav dropdown ----------
   Used by the homepage and every tool page so the three tool links keep one
   font, one style and one behaviour. Colours follow the Sahaj palette and fall
   back to the dark palette on pages that support it. */

[data-tools] { position: relative; }

.tools-trigger { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

.tools-chevron { transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
[data-tools].is-open .tools-chevron { transform: rotate(180deg); }

/* The panel falls like a drop: it starts small and high, then settles with a
   slight overshoot. transform-origin at the top is what sells the motion. */
.tools-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-12px) scale(.92);
  transform-origin: top center;
  transition:
    opacity .2s ease,
    transform .38s cubic-bezier(.34, 1.56, .64, 1),
    visibility 0s linear .38s;
  z-index: 50;
}

[data-tools].is-open .tools-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity .2s ease,
    transform .38s cubic-bezier(.34, 1.56, .64, 1),
    visibility 0s;
}

.tools-panel {
  width: 15rem;
  padding: .5rem;
  border-radius: 1.25rem;
  background: #FDFCFA;
  border: 1px solid rgba(36, 61, 49, .1);
  box-shadow: 0 18px 40px -14px rgba(36, 61, 49, .3), 0 2px 8px -2px rgba(36, 61, 49, .1);
}
html.dark .tools-panel { background: #16241C; border-color: #2C4136; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }

/* Little pointer so the panel reads as attached to the trigger */
.tools-panel::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 12px; height: 12px;
  margin-left: -6px;
  transform: rotate(45deg);
  background: #FDFCFA;
  border-left: 1px solid rgba(36, 61, 49, .1);
  border-top: 1px solid rgba(36, 61, 49, .1);
  border-top-left-radius: 3px;
}
html.dark .tools-panel::before { background: #16241C; border-color: #2C4136; }

.tool-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .75rem;
  border-radius: .85rem;
  font-size: .875rem;
  color: #243D31;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
  /* Each item drifts in just behind the panel */
  opacity: 0;
  transform: translateY(-6px);
}
html.dark .tool-item { color: #FBF7F0; }

.tool-item:hover { background: rgba(146, 168, 137, .18); }
html.dark .tool-item:hover { background: rgba(146, 168, 137, .16); }

.tool-item svg { flex: 0 0 auto; width: 18px; height: 18px; color: #92A889; }

[data-tools].is-open .tool-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .32s cubic-bezier(.34, 1.4, .64, 1), background-color .25s ease;
}
[data-tools].is-open .tool-item:nth-child(1) { transition-delay: .07s; }
[data-tools].is-open .tool-item:nth-child(2) { transition-delay: .12s; }
[data-tools].is-open .tool-item:nth-child(3) { transition-delay: .17s; }

.tool-item small { display: block; font-size: .7rem; opacity: .55; margin-top: .1rem; }

/* ---------- Mobile: same three links, same drop ---------- */
.tools-mobile {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .38s cubic-bezier(.34, 1.2, .64, 1), opacity .25s ease;
}
[data-tools-mobile].is-open .tools-mobile { max-height: 15rem; opacity: 1; }
[data-tools-mobile].is-open .tools-chevron { transform: rotate(180deg); }
.tools-mobile .tool-item { opacity: 1; transform: none; padding-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .tools-menu, .tool-item, .tools-chevron, .tools-mobile { transition-duration: .01ms !important; }
}

/* ---------- Hero "free tools" strip ----------
   The tools are the top of the funnel, so they also sit above the fold rather
   than only inside the Tools dropdown. Styled lighter than the primary
   download button so the hierarchy of the hero still holds. */
.tools-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border-radius: 9999px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: #243D31;
  text-decoration: none;
  background: rgba(146, 168, 137, .14);
  border: 1px solid rgba(146, 168, 137, .45);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tool-chip:hover {
  background: rgba(146, 168, 137, .26);
  border-color: #92A889;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(36, 61, 49, .45);
}
.tool-chip svg { width: 16px; height: 16px; flex: 0 0 auto; color: #92A889; }

html.dark .tool-chip { color: #FBF7F0; background: rgba(146, 168, 137, .12); border-color: rgba(146, 168, 137, .35); }
html.dark .tool-chip:hover { background: rgba(146, 168, 137, .22); border-color: #92A889; }

.tools-strip-label {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36, 61, 49, .45);
  margin-bottom: .6rem;
}
html.dark .tools-strip-label { color: rgba(251, 247, 240, .45); }

@media (prefers-reduced-motion: reduce) { .tool-chip { transition: none; } }