/* ══ "Free tools" in the marketing pages' nav ═══════════════════════════════════════════════════════════════
   The free tools (AI Hashtag Generator, Name Badge Maker) under one name, as plain text like the rest of the nav:
   in the row of links (wide screens) a "Free tools" button that drops a small list of the two names on hover or
   tap; in the MENU overlay (every narrower screen) the two names as ordinary menu links under a small label.
   One file, linked from every page with this nav. What it does when tapped (aria-expanded, Escape, a tap
   outside) is in js/navauth.js, the script all of those pages already load. */

.rd-tools { position: relative; display: flex; align-items: center; }
.rd-tools-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; opacity: .85; cursor: pointer; transition: opacity .2s, color .2s; }
.rd-tools-car { font-size: .55rem; opacity: .7; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.rd-tools:hover .rd-tools-btn, .rd-tools.open .rd-tools-btn, .rd-tools-btn:focus-visible { opacity: 1; color: var(--rd-cyan); }
.rd-tools:hover .rd-tools-car, .rd-tools.open .rd-tools-car { transform: rotate(180deg); }
/* the templates page's light nav turns its links purple, not cyan */
body.tp-page .rd-tools:hover .rd-tools-btn, body.tp-page .rd-tools.open .rd-tools-btn, body.tp-page .rd-tools-btn:focus-visible { color: #6B3BF2; }

/* The list hangs under the button, in the nav's own colours: dark over the dark hero, white once the nav has
   turned white (scrolled, or the templates page). Its top padding is the bridge the pointer crosses on the way
   down, so the list does not close in the gap. */
.rd-tools-menu { position: absolute; top: 100%; left: -14px; z-index: 10; padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .14s ease-out, transform .2s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .2s; }
.rd-tools:hover .rd-tools-menu, .rd-tools.open .rd-tools-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .14s ease-out, transform .2s cubic-bezier(.23, 1, .32, 1), visibility 0s; }
.rd-tools-card { display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: rgba(18, 12, 36, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(244, 245, 251, .12); }
.rd-nav.scrolled .rd-tools-card, body.tp-page .rd-tools-card { background: rgba(255, 255, 255, .97); border-color: rgba(26, 19, 57, .1);
  box-shadow: 0 14px 34px -18px rgba(26, 19, 57, .45); }
.rd-links .rd-tools-card a { padding: 8px 10px; }   /* colour, dimming and hover are the nav links' own */

/* In the MENU overlay the two names are menu links like the others, under a small label. */
.rd-ov-tools { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rd-ov-tools-h { font-family: var(--rd-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 245, 251, .5); }

@media (prefers-reduced-motion: reduce) {
  .rd-tools-menu, .rd-tools:hover .rd-tools-menu, .rd-tools.open .rd-tools-menu { transform: none; transition: none; }
  .rd-tools-car { transition: none; }
}