/* Raizz Free-Tool Page — additions on top of components-base.css.
   Everything below is specific to a standalone free-tool page: a hero
   variant, the interactive tool widget, and a More Tools pill list.
   Reuses the same tokens as the rest of the site, so it never drifts
   from the brand system. */

/* ---------------- free-tool hero ---------------- */
.rz-tool-hero{ padding:var(--sp-8) 0 var(--sp-6); text-align:center; }
.rz-tool-hero-inner{ max-width:760px; margin:0 auto; }
.rz-tool-hero h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.1; margin-bottom:var(--sp-3); }
.rz-tool-hero-lede{ font-size:clamp(15px,1.3vw,17px); color:var(--ink-soft); max-width:640px; margin:0 auto var(--sp-4); }
.rz-tool-social-proof{ font-size:13px; color:var(--ink-faint); margin-bottom:var(--sp-5); }
.rz-tool-social-proof .rz-dot-sep{ margin:0 8px; opacity:.5; }

/* interactive tool mount point -- shows the placeholder message until a
   real tool widget is mounted into it */
.rz-tool-surface{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); max-width:640px; margin:0 auto var(--sp-5); text-align:left;
}
.rz-tool-placeholder{ text-align:center; color:var(--ink-faint); font-size:13.5px; font-style:italic; }
.rz-tool-placeholder strong{ display:block; color:var(--ink-soft); font-size:14.5px; font-style:normal; margin-bottom:4px; }

/* ---------------- tool widget: form ---------------- */
.rz-tool-form{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:560px){ .rz-tool-form{ grid-template-columns:1fr 1fr; } }
.rz-tool-field{ display:flex; flex-direction:column; gap:6px; }
.rz-tool-field label{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
}
.rz-tool-field select, .rz-tool-field input{
  font-family:var(--font-body); font-size:14.5px; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%;
}
.rz-tool-field select:focus, .rz-tool-field input:focus{
  outline:2px solid var(--accent-strong); outline-offset:1px;
}
.rz-tool-submit-row{ grid-column:1/-1; margin-top:var(--sp-1); }
.rz-tool-submit-row .rz-btn{ width:100%; justify-content:center; border:none; }
.rz-tool-error{ grid-column:1/-1; color:var(--accent-deep); font-size:13px; margin:0; }

/* ---------------- tool widget: results ---------------- */
.rz-tool-result{ margin-top:var(--sp-5); border-top:1px solid var(--line); padding-top:var(--sp-4); }
.rz-tool-result[hidden]{ display:none; }
.rz-tool-result-summary{ font-size:14px; color:var(--ink-soft); margin:0 0 var(--sp-3); line-height:1.5; }
.rz-tool-result-summary strong{ color:var(--ink); }
.rz-tool-schedule{
  display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding-right:4px;
}
.rz-tool-day-card{
  display:grid; grid-template-columns:64px 1fr; gap:2px var(--sp-3);
  background:var(--bg-alt); border-radius:var(--r-md); padding:12px 14px; font-size:13px;
}
.rz-tool-day-label{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent-strong);
  grid-column:1; grid-row:1 / -1; display:flex; align-items:center;
}
/* Explicit column 2, not auto-placement: a variable number of content rows
   (the optional melatonin line only shows on some days) means auto-placement
   can drop a row into column 1's now-vacant cells once the label's span ends,
   squeezing that row's text into the 64px label column instead of the wide one. */
.rz-tool-day-row{ grid-column:2; color:var(--ink-soft); line-height:1.5; }
.rz-tool-day-row strong{ color:var(--ink); font-weight:600; }

/* ---------------- more tools (pill link row, right after hero) ---------------- */
.rz-more-tools{ padding:0 0 var(--sp-6); }
.rz-more-tools-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
}
.rz-more-tools-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); margin-right:4px; width:100%; text-align:center;
}
@media (min-width:640px){ .rz-more-tools-label{ width:auto; margin-bottom:0; } }
.rz-more-tools-link{
  display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--ink);
  text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.rz-more-tools-link:hover{ border-color:var(--accent); transform:translateY(-1px); }

/* ---------------- grid column overrides: never leave a lone card on its own row ---------------- */
.rz-card-grid-1{ display:grid; place-items:center; }
.rz-card-grid-1 .rz-icon-card{ max-width:520px; width:100%; }

/* ============================================================================
   Site-shell integration (added when this page was wired into raizz.com's
   real navbar + footer). The page markup reuses the `.about-page` wrapper
   class because that is what switches style.css into its light nav/footer
   theme; these rules undo the about-page-specific background so the tool page
   keeps its own cream surface, and clear the fixed 72px navbar.
   ========================================================================= */
body:has(.rz-tool-page){ background-color:var(--bg) !important; }
body:has(.rz-tool-page) .rz-tool-page.about-page{
  background-color:var(--bg) !important;
  color:var(--ink) !important;
}
/* fixed navbar is 72px tall at every breakpoint — keep the hero clear of it */
.rz-tool-page .rz-tool-hero{ padding-top:calc(72px + var(--sp-7)); }
@media (max-width:768px){
  .rz-tool-page .rz-tool-hero{ padding-top:calc(72px + var(--sp-5)); }
}
/* the footer band is full-bleed and dark; it must not inherit the tool page's
   text color or the base component library's heading font */
.rz-tool-page .home-contact{ margin-top:var(--sp-7); }