/* ==========================================================================
   HireBeep — interactive component states
   --------------------------------------------------------------------------
   Replaces the `style-hover=` / `style-active=` attributes from the original
   bundle. Those were not real HTML: the bundler's runtime compiled them into
   generated `.scpN:hover {}` rules at boot.

   NOTE ON BEHAVIOUR: in the original, over half of those declarations never
   fired. The runtime left each element's inline `style=` in place, and inline
   style beats a class rule — so `style-hover="background:…"` on an element
   whose inline style already set `background` did nothing. Cards never lifted;
   brand buttons never darkened. The rules below are the effects as *authored*,
   with the shadowing base properties moved out of inline style and into the
   classes here, so they now actually apply. No !important needed.
   ========================================================================== */

/* --- icons ---------------------------------------------------------------
   Icons are `<svg class="hb-i"><use href="#hb-i-NAME"/></svg>`, pointing at the
   sprite inlined at the top of index.html. They used to be `<i data-lucide>`
   placeholders swapped for SVG by lucide at runtime, which meant no icons at
   all until the bundle booted — and none ever if it failed.

   These values mirror lucide's own default svg attributes, so the rendering is
   unchanged. They belong here rather than on the <symbol>s: a presentation
   attribute on a symbol is inherited by the shadow content and would beat the
   outer svg's inline style, which the hero's play button depends on to fill its
   glyph. As CSS they lose to an inline style, which is exactly what we want.
   Both fill and stroke inherit through <use> into the shadow content.

   width/height are the fallback for a use site that doesn't size itself; every
   current one does, via inline style. */
.hb-i {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- nav links ---------------------------------------------------------- */
.hb-navlink { color: var(--text-muted); }
.hb-navlink:hover { background: var(--cream-100); color: var(--ink-700); }

.hb-link-signin { color: var(--text-body); }
.hb-link-signin:hover { color: var(--yellow-600); }

/* --- inline text link --------------------------------------------------- */
.hb-link-brand { color: var(--brand); }
.hb-link-brand:hover { color: var(--brand-hover); }

/* --- brand (yellow) buttons --------------------------------------------- */
.hb-btn-brand { background: var(--brand); }
.hb-btn-brand:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}
/* the nav CTA is smaller and lifts less — must follow .hb-btn-brand:hover */
.hb-btn-brand--nav:hover { transform: translateY(-1px); }

/* --- ghost button (light backgrounds) ----------------------------------- */
.hb-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border-strong);
}
.hb-btn-ghost:hover {
  background: var(--cream-100);
  border-color: var(--ink-700);
  transform: translateY(-2px);
}

/* --- outline buttons on dark panels (pricing, closing CTA) -------------- */
.hb-btn-outline-dark {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .3);
}
.hb-btn-outline-dark:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .65);
  transform: translateY(-2px);
}
/* the closing-CTA variant used a hair softer border — kept verbatim rather
   than deduped, since the two differ only by .65 vs .6 alpha. */
.hb-btn-outline-dark--soft:hover { border-color: rgba(255, 255, 255, .6); }

/* --- lifting cards ------------------------------------------------------ */
.hb-card { box-shadow: var(--shadow-sm); }
.hb-lift:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
/* dark card: keeps its own inline shadow, lifts only */
.hb-lift-plain:hover { transform: translateY(-4px); }

/* --- press ------------------------------------------------------------- */
/* Must come last: same specificity as the :hover rules above, so a pressed
   button reads as pressed rather than hovered. */
.hb-press:active { transform: translateY(1px); }