/* ==========================================================================
   components.css
   Reusable pieces: brand mark, nav links, buttons, the theme toggle, and
   tool preview cards. Kept deliberately small — add to this file as new
   components are needed rather than creating one-off styles per page.
   ========================================================================== */

/* ---- Brand ---- */
.brand {
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--color-text);
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  color: var(--color-accent);
}

/* ---- Nav links ---- */
.nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.nav-link[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background-color: var(--color-surface-hover);
}

/* ---- Theme toggle ----
   A plain icon button. It holds both icons and CSS shows/hides the
   correct one based on the active theme, so no JS DOM swap is needed
   beyond toggling the data-theme attribute. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background-color: transparent;
  cursor: pointer;
  color: var(--color-text);
}

.theme-toggle:hover {
  background-color: var(--color-surface-hover);
}

.theme-toggle__icon {
  width: 1.1rem;
  height: 1.1rem;
}

.theme-toggle__icon--dark {
  display: none;
}

/* Show the moon icon when dark mode is active, whether that's because
   the user explicitly chose it (data-theme="dark") or because it's
   following the OS preference (no explicit choice stored yet). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--light {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle__icon--dark {
    display: block;
  }
}

:root[data-theme="dark"] .theme-toggle__icon--light {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--dark {
  display: block;
}

/* ---- Tool preview card ----
   Flat, bordered, compact — these represent calculators that don't exist
   yet, so they're deliberately not styled as clickable (no hover lift,
   no cursor change) until the calculators behind them are built. */
.tool {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background-color: var(--color-surface);
}

.tool__name {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.tool__description {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.tool__status {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tool__status--live {
  color: var(--color-accent);
  font-weight: 500;
}

/* Tools that link to a built calculator (an <a>, not an <article>) get a
   visible interactive state; the rest stay inert until they're built. */
a.tool {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.tool:hover {
  text-decoration: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface-hover);
}

/* Hidden by search.js when a tool doesn't match the query, or when a
   whole section has no matching tools left. */
[hidden] {
  display: none !important;
}

/* ---- Search field ----
   One prominent input, no button — filtering happens as the user types. */
.search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding-inline: var(--space-3);
  background-color: var(--color-surface);
}

.search__field:focus-within {
  border-color: var(--color-accent);
}

.search__icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search__input {
  flex: 1;
  min-width: 0; /* lets the field shrink instead of overflowing its row */
  appearance: none; /* Safari otherwise rounds <input type="search"> */
  border: none;
  background: transparent;
  padding-block: var(--space-3);
  font-size: var(--text-base); /* 16px, so mobile browsers don't zoom on focus */
  color: var(--color-text);
}

.search__input:focus {
  outline: none;
}

.search__input::placeholder {
  color: var(--color-text-muted);
}

/* Live "N of M calculators match …" line above the results. It's a polite
   live region in the markup, so the count is announced as the user types. */
.search__status {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-block: 0 var(--space-4);
}

/* The part of a result that matched the query. Keyword matches (a card that
   matched on a term like "resistor") have nothing to mark — the whole card is
   the result. */
.search__mark {
  background-color: var(--color-accent-soft);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}

/* ---- Accessibility utility ----
   Visually hides an element (e.g. a <label>) while keeping it available
   to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}