/* ==========================================================================
   /tools/home-safety
   Inherits checklist UI (control panel, category cards, verdict, modal,
   sources block) from school-readiness.css; only overrides what's specific
   to home-safety palette and adds risk badges.
   ========================================================================== */
@import url("/assets/css/school-readiness.css");

/* ---------- Page & Hero ---------- */
.hs-page {
  background: #fbf8f3 !important;
}

.hs-hero {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(248, 240, 220, 0.78) 100%
    ),
    url("/assets/images/calc-pregnancy-hero.webp") center / cover no-repeat,
    linear-gradient(180deg, #ffffff 0%, #f5ecd6 100%) !important;
  border-bottom-color: #ece5cf !important;
}

.hs-hero .mb-hero-title span::after {
  background: linear-gradient(
    90deg,
    rgba(247, 201, 72, 0.55),
    rgba(232, 93, 117, 0.4)
  );
}

/* Eyebrow dual-text */
.hs-hero .mb-hero-eyebrow {
  white-space: nowrap;
  max-width: calc(100% - 32px);
}

.hs-eyebrow-short { display: none; }

@media (max-width: 600px) {
  .hs-eyebrow-full  { display: none; }
  .hs-eyebrow-short { display: inline; }
  .hs-hero .mb-hero-eyebrow {
    padding: 5px 12px;
    font-size: 12px;
  }
}

/* ==========================================================================
   ZONE NAV — slightly different layout for 7 zones (3+4 instead of 4+0)
   ========================================================================== */
.hs-zones-nav {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px;
}

@media (max-width: 900px) {
  .hs-zones-nav {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .hs-zones-nav {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .hs-zones-nav {
    grid-template-columns: 1fr !important;
  }
}

/* Overall progress fill — warm safety gradient */
.hs-control-panel .mb-progress-fill {
  background: linear-gradient(
    90deg,
    #f7c948 0%,
    #ff8a3c 25%,
    #e85d75 50%,
    #b85c5c 75%,
    #4ecdc4 100%
  ) !important;
}

/* ==========================================================================
   RISK BADGE — inline tag inside zone title
   ========================================================================== */
.hs-risk-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  white-space: nowrap;
}

.hs-risk-critical {
  background: rgba(232, 93, 117, 0.14);
  color: #c93253;
  border: 1px solid rgba(232, 93, 117, 0.3);
}

.hs-risk-high {
  background: rgba(255, 138, 60, 0.14);
  color: #cc6520;
  border: 1px solid rgba(255, 138, 60, 0.3);
}

.hs-risk-medium {
  background: rgba(78, 205, 196, 0.14);
  color: #1d8a83;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

/* When the zone is fully done — risk badge softens to green */
.hs-zone.is-complete .hs-risk-badge {
  background: rgba(84, 208, 127, 0.14);
  color: #1f6b3a;
  border-color: rgba(84, 208, 127, 0.3);
}

/* ==========================================================================
   ZONE CARD overrides (page-level border tint per category color)
   ========================================================================== */
.hs-zone {
  border-color: #ece5cf;
  scroll-margin-top: 100px;
}

.hs-zone .sr-category-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
}

/* Mobile: badge wraps under title cleanly */
@media (max-width: 700px) {
  .hs-risk-badge {
    margin-left: 0;
  }
}