/* float-cta.css - shared "Float Mode" call-to-action button.
 * Used on the Water Map (map.html) and the per-river guide pages so the
 * styling lives in ONE place (DRY). Self-contained: hardcodes the brand
 * palette instead of relying on page-specific CSS variables, so it renders
 * identically wherever it's dropped in. Requires the Fraunces + DM Mono
 * fonts, which every page that uses it already loads. */
.floatmode-cta {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: linear-gradient(135deg, #1e3a2a, #2d5642); color: #fff;
  border: 1px solid rgba(168, 200, 144, .35); border-radius: 12px;
  padding: 13px 16px; margin: 0 0 12px;
  box-shadow: 0 6px 24px rgba(20, 18, 12, .10);
  transition: transform .15s ease, border-color .15s ease;
}
.floatmode-cta:hover { transform: translateY(-1px); border-color: #a8c890; }
.floatmode-cta .fm-ico {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(168, 200, 144, .18); border-radius: 50%; color: #cfe3bb;
}
.floatmode-cta .fm-ico svg { width: 20px; height: 20px; }
.floatmode-cta .fm-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.floatmode-cta .fm-txt strong { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; }
.floatmode-cta .fm-sub {
  font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .04em;
  opacity: .78; margin-top: 2px;
}
.floatmode-cta .fm-go { font-size: 20px; color: #a8c890; flex-shrink: 0; }

/* --- Secondary "Learn how it works" link -------------------------------- *
 * A small, low-emphasis pill that points cold visitors - the ones who
 * deep-linked in from a map with no idea what Float Mode even is - at the
 * /how-float-mode-works explainer. Self-contained + hardcoded palette so it
 * drops in identically on ANY page. Base = light backgrounds; add .on-dark
 * for the Float Mode gate screen (dark green gradient). */
.floatmode-learn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .02em;
  color: #2d5642; background: rgba(168, 200, 144, .16);
  border: 1px solid rgba(45, 86, 66, .22); border-radius: 999px;
  padding: 8px 14px; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}
.floatmode-learn:hover { background: rgba(168, 200, 144, .32); border-color: #2d5642; }
.floatmode-learn svg { width: 15px; height: 15px; flex-shrink: 0; }
.floatmode-learn .fl-go { opacity: .7; }
.floatmode-learn.on-dark {
  color: #cfe3bb; background: rgba(168, 200, 144, .10);
  border-color: rgba(168, 200, 144, .30);
}
.floatmode-learn.on-dark:hover { background: rgba(168, 200, 144, .20); border-color: #a8c890; }