/* ============================================================
   SITM — INTERACTIVE STATES
   Hover / active / focus for component classes (inline styles
   can't express pseudo-states). Loaded via styles.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.sitm-btn { position: relative; }
.sitm-btn:focus-visible { outline: none; box-shadow: var(--focus-shadow); }

.sitm-btn--primary:hover:not(:disabled) {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
  box-shadow: var(--glow-accent);
}
.sitm-btn--primary:active:not(:disabled) {
  background: var(--accent-press) !important;
  border-color: var(--accent-press) !important;
  box-shadow: none;
  transform: translateY(1px);
}
.sitm-btn--secondary.sitm-btn--dark:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: #fff !important;
  background: var(--hover-on-dark) !important;
}
.sitm-btn--secondary.sitm-btn--light:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent-press) !important;
  background: var(--hover-on-light) !important;
}
.sitm-btn--secondary:active:not(:disabled) { transform: translateY(1px); }
.sitm-btn--tertiary:hover:not(:disabled) { color: var(--accent-press) !important; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Inputs ---------- */
.sitm-input:focus, .sitm-textarea:focus, .sitm-select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: var(--focus-shadow);
}
.sitm-input::placeholder, .sitm-textarea::placeholder { color: var(--sitm-gray-400); }
.sitm-input:hover:not(:focus), .sitm-textarea:hover:not(:focus), .sitm-select:hover:not(:focus) {
  border-color: var(--line-on-light-strong) !important;
}

/* ---------- File upload ---------- */
.sitm-upload:hover { border-color: var(--accent) !important; background: var(--sitm-blue-100) !important; }
.sitm-upload.is-dragging { border-color: var(--accent) !important; background: var(--sitm-blue-100) !important; }

/* ---------- Chip ---------- */
.sitm-chip--interactive:hover { border-color: var(--accent) !important; color: var(--accent-press) !important; }

/* ---------- Card hover (lift) ---------- */
.sitm-card--hover { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.sitm-card--hover:hover { transform: translateY(-3px); }
.sitm-card--dark.sitm-card--hover:hover { border-color: var(--line-on-dark-strong) !important; box-shadow: var(--shadow-dark); }
.sitm-card--light.sitm-card--hover:hover { border-color: var(--line-on-light-strong) !important; box-shadow: var(--shadow-md); }

/* ---------- Accordion ---------- */
.sitm-acc__head { cursor: pointer; }
.sitm-acc__head:hover { color: var(--accent-strong); }
.sitm-acc__head:focus-visible { outline: none; box-shadow: var(--focus-shadow); border-radius: var(--radius-sm); }
.sitm-acc__icon { transition: transform var(--dur-base) var(--ease-out); }
.sitm-acc__item.is-open .sitm-acc__icon { transform: rotate(180deg); }

/* ---------- Nav link ---------- */
.sitm-navlink { position: relative; transition: color var(--dur-base) var(--ease-out); }
.sitm-navlink::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--accent);
  transition: width var(--dur-base) var(--ease-cut);
}
.sitm-navlink:hover::after, .sitm-navlink.is-active::after { width: 100%; }

/* ---------- Header responsive ---------- */
@media (max-width: 900px) {
  .sitm-header-nav, .sitm-header-cta { display: none !important; }
  .sitm-header-burger { display: inline-flex !important; }
}

/* ---------- Footer responsive ---------- */
@media (max-width: 720px) {
  .sitm-footer-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Sticky mobile CTA (Google Ads) ---------- */
.sitm-stickycta { display: none; }
@media (max-width: 720px) {
  .sitm-stickycta { display: flex !important; }
  .sitm-proofbar { grid-template-columns: 1fr 1fr !important; }
  .sitm-requestscope { grid-template-columns: 1fr !important; }
}

/* ---------- Landing kit responsive ---------- */
@media (max-width: 960px) {
  .sitm-cap-grid, .sitm-form-grid { grid-template-columns: 1fr !important; }
  .sitm-service-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .sitm-process-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .sitm-service-grid, .sitm-process-grid { grid-template-columns: 1fr !important; }
}