/* ==========================================================================
   Side Hustle Finder — styles for the homepage modal.

   Reuses the existing sakura palette and the modal shell already defined in
   index.html. Nothing here changes the modal's cream background, navy type,
   coral CTA, rounded controls or close behaviour — it only styles the content
   rendered inside it. Mobile-first.
   ========================================================================== */

.shf { font-size: 15px; line-height: 1.6 }

/* ---- progress + question ---- */
.shf-progress {
  height: 6px; border-radius: 99px; background: #f3e6da;
  overflow: hidden; margin-bottom: 14px;
}
.shf-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--coral2), var(--coral));
  transition: width .25s ease;
}
.shf-step {
  margin: 0 0 6px; font-size: 12px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: #a08e80;
}
.shf-q {
  margin: 0 0 16px; font-size: 21px; letter-spacing: -.03em;
  line-height: 1.25; outline: none;
}

.shf-options { display: grid; gap: 9px }
.shf-option {
  width: 100%; text-align: left; min-height: 52px; padding: 13px 16px;
  border: 1.5px solid #e7dccf; border-radius: 15px; background: #fff;
  font-weight: 700; color: var(--navy); transition: .15s;
}
.shf-option:hover { border-color: var(--coral); background: #fff8f5 }
.shf-option.is-chosen {
  border-color: var(--coral); background: #fff1eb;
  box-shadow: 0 0 0 3px rgba(255, 115, 92, .13);
}

.shf-nav { display: flex; justify-content: space-between; margin-top: 18px }
.shf-nav-end { justify-content: center; margin-top: 24px }

/* ---- results ---- */
.shf-results { display: grid; gap: 20px }

.shf-band {
  display: inline-block; font-size: 11px; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: #e9f6ec; color: #2f7a41; border: 1px solid #cfe9d6;
}
.shf-band.small { padding: 4px 9px; font-size: 10px }
.shf-band-detail { margin-left: 9px; font-size: 12.5px; color: #8b8296; font-weight: 700 }

.shf-best { padding-bottom: 4px }
.shf-result-title {
  margin: 12px 0 8px; font-size: clamp(23px, 5.5vw, 29px);
  letter-spacing: -.035em; line-height: 1.12; outline: none;
}
.shf-blurb { margin: 0; color: #4a5068; font-size: 16px }

.shf-block { margin: 0 }
.shf-block h5 {
  margin: 0 0 9px; font-size: 12px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: #a08e80;
}
.shf-block p { margin: 0; color: #3d445c }

.shf-list, .shf-steps { margin: 0; padding-left: 20px; color: #3d445c }
.shf-list li, .shf-steps li { margin-bottom: 7px }
.shf-steps { counter-reset: shf }

/* ---- quick facts ---- */
.shf-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 9px;
}
.shf-facts li {
  background: #fff; border: 1px solid #efe1d4; border-radius: 14px;
  padding: 11px 14px;
}
.shf-facts small {
  display: block; font-size: 10.5px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: #a08e80;
}
.shf-facts strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 800 }

/* ---- tools ---- */
.shf-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.shf-tool {
  background: #fbf7ff; border: 1px solid #e8e2f6; border-radius: 16px;
  padding: 14px 16px;
}
.shf-tool-name { font-weight: 900; font-size: 15.5px; letter-spacing: -.01em }
.shf-tool-role { margin: 4px 0 10px; font-size: 13.5px; color: #55597a; line-height: 1.5 }
.shf-tool-links { display: flex; flex-wrap: wrap; gap: 8px }
.shf-tool-link {
  font-size: 13px; font-weight: 800; text-decoration: none;
  padding: 8px 13px; border-radius: 11px;
  border: 1px solid #ddd5ee; color: #5a4a86; background: #fff;
}
.shf-tool-link:hover { border-color: var(--coral); color: var(--coral) }
.shf-tool-link.primary { background: #efe9ff; border-color: #ddd0ff }

.shf-disclosure {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: #7b7288;
}

/* ---- alternatives ---- */
.shf-alts {
  border: 1px solid #efe1d4; border-radius: 16px;
  background: #fffdf9; padding: 4px 16px;
}
.shf-alts summary {
  cursor: pointer; font-weight: 900; font-size: 14px;
  padding: 12px 0; list-style: revert;
}
.shf-alts summary::marker { color: var(--coral) }
.shf-alt { padding: 4px 0 14px }
.shf-alt + .shf-alt { border-top: 1px solid #f3e8dd; padding-top: 14px }
.shf-alt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px }
.shf-alt p { margin: 0; font-size: 14px; color: #55597a }

/* ---- footer ---- */
.shf-cta { text-align: center }
.shf-cta .btn { width: 100%; text-align: center; line-height: 1.3; padding: 12px 18px; height: auto; min-height: 52px }
.shf-note {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: #8b8296; text-align: center;
}

@media (min-width: 560px) {
  .shf-facts { grid-template-columns: repeat(3, 1fr) }
  .shf-cta .btn { width: auto }
}

@media (prefers-reduced-motion: reduce) {
  .shf-progress-fill { transition: none }
  .shf-option { transition: none }
}