/* styles/themes/kzhukuk/theme.css
 *
 * kzhukuk's component overrides on top of the vendored framework
 * (public/assets/kzhukuk/css/vendor-vanilla-css.css) — same role as
 * upstream's themes/helix/theme.css: tokens.css defines raw values,
 * this file activates them by overriding element/component surfaces.
 * No [data-theme="..."] gate (see tokens.css) — kzhukuk is the only
 * theme this site has, so these rules apply unconditionally.
 *
 * Load order (see partials/header.php): vendor-vanilla-css.css →
 * tokens.css → this file → the existing kzhukuk.css → the existing
 * inline <style> block. That last block already defines this site's
 * real h1-h6/body typography (fluid clamp() sizes, Gatena heading
 * font) on bare element selectors — since it loads LAST at equal
 * specificity, it already wins the cascade with zero action needed
 * here. This file only needs to touch the framework's own component
 * classes (.btn*, .form-*, .alert*), not global typography.
 */

/* ---- Links -----------------------------------------------------------
   foundation/typography.css's bare `a:hover` sets text-decoration:
   underline — a real, global default this site never wants: every link
   here has its own deliberate hover treatment instead (ul.menu's
   border-bottom "underline", .kz-link's animated ::after underline,
   comment-reply-toggle's explicit underline), and none of those rules
   touch text-decoration, so the framework's default was silently
   stacking a native underline UNDER those custom effects (e.g. nav
   items showed both border-bottom AND a real underline on hover).
   Reset at the same `a:hover` specificity so it doesn't leak anywhere
   a component doesn't explicitly opt back into it. */
a:hover {
  text-decoration: none;
}

/* ---- Buttons -------------------------------------------------------
   .btn already exists as this site's own bespoke CTA button class
   (see partials/header.php) with its own padding/border/uppercase
   treatment. Loading components/buttons.css adds two properties our
   rule doesn't touch — box-shadow and line-height — which would
   otherwise leak an unwanted shadow and a slightly tighter line-height
   onto every existing button. Neutralize exactly those two, leave
   everything this site already controls untouched. */
.btn {
  box-shadow: none;
  line-height: var(--leading-normal);
}

.btn-primary {
  background-color: var(--black);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--dark-band);
  color: #fff;
  filter: none;
}
.btn-secondary {
  background-color: transparent;
  border-color: var(--black);
  color: var(--black);
}

/* ---- Forms -----------------------------------------------------------
   Real, new classes (not currently used anywhere) that
   contact/index.php, testimonial-invite.php and the comment form are
   being switched to — styled to reproduce the exact look of the
   .form-card input/textarea/select rule they replace. */
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  color: var(--ink);
}
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-4);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ---- Alerts ------------------------------------------------------------
   Real, new classes replacing .flash-success/.flash-error — same
   padding/margin/colors as those rules, using --radius-sm (the one
   deliberate exception to the site's square-corners rule, reserved
   for small floating chrome like flash messages, per the --radius-sm
   comment in partials/header.php). The 4px left-accent border
   components/alerts.css draws by default is neutralized in favor of
   this site's existing uniform 1px box look. */
.alert {
  border: 1px solid;
  border-left-width: 1px;
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success);
}
.alert-error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}