/* ═══════════════════════════════════════════════════════════════════
 *  TOP-LEVEL TABS + COMMUNITY (EXTERNAL) TOOL CARDS
 *  Loaded after styles.css. Reuses the existing palette and the
 *  .home / .tool-cards / .tool-card layout from the Irish landing page.
 * ═══════════════════════════════════════════════════════════════════ */

/* Tab bar — sits at the bottom edge of the header, active tab's accent
   underline replaces the header's own bottom border. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 32px;
}
.tabs[hidden] { display: none; }

.tab {
  position: relative;
  padding: 11px 18px 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;            /* overlap header's bottom border */
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Disclaimer note above the community cards. */
.community-note {
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
  line-height: 1.55;
}

/* External cards reuse .tool-card but hover blue (--link) instead of
   green, so the two tabs feel visually distinct. */
.tool-card.external:hover {
  border-color: rgba(96, 165, 250, 0.45);
}
.tool-card.external .tool-link { color: var(--link); }

.tool-card .ext-icon {
  font-size: 11px;
  color: var(--muted);
  vertical-align: super;
  margin-left: 3px;
  transition: color 0.15s;
}
.tool-card.external:hover .ext-icon { color: var(--link); }

@media (max-width: 720px) {
  .tabs {
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    padding: 10px 14px 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }
}