/* The /tools directory page - layered on top of style.css. (Individual tool pages are the web app.) */

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 700;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.container.narrow { max-width: 820px; }
.nav-app { min-height: 44px; }

.tool-hero-section { padding: 40px 0 28px; }
.tool-hero-section h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 8px; text-align: center; }
.tool-intro { color: var(--muted); font-size: 17px; text-align: center; max-width: 60ch; margin: 0 auto 24px; }

.related-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.related-grid a {
  display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.related-grid a:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.related-grid strong { color: var(--navy); }
.related-grid span { color: var(--muted); font-size: 14px; }
.related-grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 8px; }

@media (prefers-color-scheme: dark) {
  .tool-hero-section h1, .related-grid strong { color: #f1f4ff; }
  .tool-intro, .related-grid span { color: #aeb8dd; }
  .related-grid a { background: #10162c; border-color: #232b4a; }
  .all-tools a, .related-grid a:hover { color: #7ea6ff; }
}