/* Custom overrides beyond Tailwind defaults */

/* Brand wordmark font (Nasalization) */
@font-face {
  font-family: 'Nasalization';
  src: url('../fonts/nasalization-rg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-brand { font-family: 'Nasalization', 'Segoe UI', system-ui, sans-serif; letter-spacing: .5px; }

html { scroll-behavior: smooth; }

/* Hero gradient */
.kps-hero {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
}

/* FAQ accordion (CSS-only) */
.kps-faq details { transition: background .2s; }
.kps-faq details[open] summary i.fa-chevron-down { transform: rotate(180deg); }
.kps-faq summary { list-style: none; cursor: pointer; }
.kps-faq summary::-webkit-details-marker { display: none; }
.kps-faq summary i.fa-chevron-down { transition: transform .2s; }

/* OTP boxes */
.kps-otp-input {
  width: 3rem; height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  border: 2px solid #d1d5db;
  border-radius: .5rem;
  outline: none;
}
.kps-otp-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

/* Strip <p> margin in DB-rendered content for tighter cards */
.kps-content p:first-child { margin-top: 0; }
.kps-content p:last-child  { margin-bottom: 0; }

/* Readable rhythm + visible links inside admin-managed (DB) HTML.
   Tailwind's CDN preflight strips default list/link styling, which made
   embedded links look like plain text — restore them here. */
.kps-content p  { margin: 0 0 1rem; }
.kps-content ul { list-style: disc;    margin: 0 0 1rem; padding-left: 1.5rem; }
.kps-content ol { list-style: decimal; margin: 0 0 1rem; padding-left: 1.5rem; }
.kps-content li { margin: .25rem 0; }
.kps-content h1, .kps-content h2, .kps-content h3, .kps-content h4 {
  font-weight: 600; line-height: 1.3; margin: 1.25rem 0 .5rem;
}
.kps-content a {
  color: #4338ca;                 /* brand-700 */
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kps-content a:hover { color: #312e81; }   /* brand-900 */

/* Active nav highlight on hash links */
.kps-spinner {
  width: 1rem; height: 1rem; border: 2px solid #fff; border-top-color: transparent;
  border-radius: 50%; display: inline-block; animation: kps-spin 0.7s linear infinite;
}
@keyframes kps-spin { to { transform: rotate(360deg); } }