/* ============================================================
   siQmo — Components
   Depends on siqmo-tokens.css. Flat: borders & bg-steps only,
   never box-shadow. WCAG AA color pairings.
   ============================================================ */

/* ---------- Logo ----------
   The siQmo wordmark is a fixed artwork — use the supplied PNGs:
     assets/logo-siqmo-navy.png   (on light backgrounds)
     assets/logo-siqmo-white.png  (on navy / dark backgrounds)
   Place with an <img>, set the height (≈28–40px in nav, larger in hero),
   width auto. Clearspace ≥ the cap-height of the wordmark on every side. */
.siq-logo { display: inline-flex; align-items: center; }
.siq-logo img { display: block; height: 32px; width: auto; }

/* ---------- Buttons ----------
   Primary = navy fill (white text, ~8:1). Accent = signal-red fill
   (white text on red-600 for AA on standard sizes). Ghost = navy outline. */
.siq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--siq-space-2);
  font-family: var(--siq-font-sans);
  font-size: var(--siq-text-base);
  font-weight: var(--siq-weight-semibold);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--siq-radius);
  border: var(--siq-border-2) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--siq-dur-fast) var(--siq-ease-out),
              border-color var(--siq-dur-fast) var(--siq-ease-out),
              color var(--siq-dur-fast) var(--siq-ease-out);
  min-height: 48px;          /* mobile hit target */
}
.siq-btn--primary { background: var(--siq-navy-600); color: var(--siq-white); }
.siq-btn--primary:hover { background: var(--siq-navy-700); }
.siq-btn--primary:active { background: var(--siq-navy-800); }

.siq-btn--accent { background: var(--siq-red-600); color: var(--siq-white); }
.siq-btn--accent:hover { background: var(--siq-red-700); }

.siq-btn--ghost {
  background: transparent;
  color: var(--siq-navy-600);
  border-color: var(--siq-navy-600);
}
.siq-btn--ghost:hover { background: var(--siq-navy-50); }

.siq-btn--ghost-inverse {
  background: transparent;
  color: var(--siq-white);
  border-color: rgba(255,255,255,0.55);
}
.siq-btn--ghost-inverse:hover { background: rgba(255,255,255,0.10); border-color: #fff; }

/* ---------- Status pills (icon + word + color; never color alone) ---------- */
.siq-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--siq-space-2);
  padding: 4px 12px 4px 10px;
  border-radius: var(--siq-radius-pill);
  font-size: var(--siq-text-sm);
  font-weight: var(--siq-weight-medium);
  line-height: 1.4;
}
.siq-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.siq-pill--success { background: var(--siq-success-bg); color: var(--siq-success-fg); }
.siq-pill--warning { background: var(--siq-warning-bg); color: var(--siq-warning-fg); }
.siq-pill--danger  { background: var(--siq-danger-bg);  color: var(--siq-danger-fg); }
.siq-pill--info    { background: var(--siq-info-bg);    color: var(--siq-info-fg); }

/* ---------- Card — border, no shadow ---------- */
.siq-card {
  background: var(--siq-bg-surface);
  border: var(--siq-border-1) solid var(--siq-border-subtle);
  border-radius: var(--siq-radius-lg);
  padding: var(--siq-space-6);
}
.siq-card--accent { border-top: var(--siq-rule-accent); }

/* ---------- Service icon tile ---------- */
.siq-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: var(--siq-border-1) solid var(--siq-border-subtle);
  border-radius: var(--siq-radius);
  background: var(--siq-white);
}
.siq-icon-tile img { width: 32px; height: 32px; }

/* ---------- Red key-line divider ---------- */
.siq-keyline { width: 48px; height: 4px; background: var(--siq-red-500); border: 0; margin: 0; }