/* Ryan's House LLC — Accessibility Widget
   Self-contained, no external dependencies. A floating launcher opens a panel
   of reading/visibility controls. Choices persist in localStorage and apply
   via classes on <html>. Brand: navy #12274f · gold #c8902f · cream #faf6ee
*/

/* ── Launcher button (bottom-right, stacked ABOVE the FluxGrid chat launcher,
   which sits at bottom:24px right:24px / bottom:16px on mobile) ── */

/* The OPEN chat window (bottom:96px right:24px) occupies the same corner as this
   launcher (bottom:92px). The chat root's stacking context must sit ABOVE the
   launcher's z-index (2147483300) or the launcher intercepts clicks on the chat
   send button. Raise it via the widget's --fg-chat-z hook — above this launcher,
   below the privacy banner (2147483647). Closed chat never overlaps the launcher.
   !important: widget.js re-declares --fg-chat-z in an injected <style> from the
   worker config (9999), which otherwise wins the cascade by document order. */
#fg-chat-root { --fg-chat-z: 2147483400 !important; }

.rh-a11y-launch {
  position: fixed;
  right: 26px;
  bottom: 92px;
  z-index: 2147483300;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #12274f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 26, 58, 0.34);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rh-a11y-launch:hover { background: #1c3a6e; transform: translateY(-2px); }
.rh-a11y-launch:focus-visible { outline: 3px solid #d9a23f; outline-offset: 3px; }
.rh-a11y-launch svg { width: 28px; height: 28px; }

/* ── Panel ── */
.rh-a11y-panel {
  position: fixed;
  right: 18px;
  bottom: 152px;
  z-index: 2147483301;
  width: min(330px, calc(100vw - 36px));
  max-height: min(78vh, 620px);
  overflow-y: auto;
  background: #fff;
  color: #12274f;
  border: 1px solid #e7ded0;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(10, 26, 58, 0.28);
  padding: 18px;
  display: none;
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.rh-a11y-panel.is-open { display: block; }

.rh-a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.rh-a11y-head h2 {
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #12274f;
}
.rh-a11y-close {
  flex: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(18, 39, 79, 0.08);
  color: #12274f;
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.rh-a11y-close:hover { background: rgba(18, 39, 79, 0.16); }
.rh-a11y-intro { margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: #4a5568; }

/* ── Text-size stepper ── */
.rh-a11y-step {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border: 1px solid #e7ded0; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
.rh-a11y-step__label { font-weight: 700; font-size: .9rem; }
.rh-a11y-step__ctrls { display: inline-flex; align-items: center; gap: 8px; }
.rh-a11y-step__btn {
  width: 36px; height: 36px;
  border: 1px solid #cbb78c; border-radius: 9px;
  background: #fff; color: #12274f;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.rh-a11y-step__btn:hover { background: #faf6ee; border-color: #c8902f; }
.rh-a11y-step__btn:focus-visible { outline: 3px solid #d9a23f; outline-offset: 2px; }
.rh-a11y-step__btn[disabled] { opacity: .4; cursor: default; }
.rh-a11y-step__val { min-width: 2.4em; text-align: center; font-weight: 700; font-size: .82rem; color: #7e580f; }

/* ── Toggle options ── */
.rh-a11y-opts { display: grid; gap: 8px; }
.rh-a11y-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  border: 1px solid #e7ded0; border-radius: 12px;
  background: #fff; color: #12274f;
  padding: 11px 13px;
  font: inherit; font-weight: 600; font-size: .92rem;
  text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rh-a11y-opt:hover { background: #faf6ee; border-color: #c8902f; }
.rh-a11y-opt:focus-visible { outline: 3px solid #d9a23f; outline-offset: 2px; }
.rh-a11y-opt__icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(18, 39, 79, 0.07); color: #12274f;
  display: inline-flex; align-items: center; justify-content: center;
}
.rh-a11y-opt__icon svg { width: 19px; height: 19px; }
.rh-a11y-opt__txt { flex: 1 1 auto; }
.rh-a11y-opt__state {
  flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #8a99ad;
}
.rh-a11y-opt[aria-pressed="true"] {
  background: #12274f; color: #fff; border-color: #12274f;
}
.rh-a11y-opt[aria-pressed="true"] .rh-a11y-opt__icon { background: rgba(255,255,255,.16); color: #fff; }
.rh-a11y-opt[aria-pressed="true"] .rh-a11y-opt__state { color: #f1d9a8; }

.rh-a11y-reset {
  margin-top: 14px; width: 100%;
  border: 1px solid #cbb78c; border-radius: 999px;
  background: #faf6ee; color: #7e580f;
  padding: 10px 14px; font: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer; transition: background .15s ease;
}
.rh-a11y-reset:hover { background: #f3ecdd; }
.rh-a11y-foot { margin: 12px 0 0; font-size: .72rem; line-height: 1.5; color: #8a99ad; text-align: center; }

@media (max-width: 600px) {
  .rh-a11y-launch { right: 18px; bottom: 84px; }
  .rh-a11y-panel { right: 10px; left: 10px; width: auto; bottom: 146px; }
}

/* =========================================================================
   Applied accessibility states (classes set on <html>)
   ========================================================================= */

/* Text size — scales rem-based typography across the site */
html.rh-fs-1 { font-size: 106.25%; }
html.rh-fs-2 { font-size: 112.5%; }
html.rh-fs-3 { font-size: 125%; }

/* High contrast — strengthen text/background separation and borders */
html.rh-contrast body { background: #fff; }
html.rh-contrast,
html.rh-contrast p,
html.rh-contrast li,
html.rh-contrast span,
html.rh-contrast h1, html.rh-contrast h2, html.rh-contrast h3,
html.rh-contrast h4, html.rh-contrast .lead {
  color: #000 !important;
}
html.rh-contrast a { color: #0a1a3a !important; text-decoration: underline !important; }
html.rh-contrast .card,
html.rh-contrast .info-card,
html.rh-contrast .step,
html.rh-contrast .area-chip,
html.rh-contrast .faq__item { border: 2px solid #000 !important; }
/* Keep dark sections legible (light text on dark stays) */
html.rh-contrast .bg-navy,
html.rh-contrast .bg-navy p,
html.rh-contrast .bg-navy li,
html.rh-contrast .bg-navy span,
html.rh-contrast .hero,
html.rh-contrast .hero p { color: #fff !important; }
html.rh-contrast .bg-navy a, html.rh-contrast .hero a { color: #fff !important; }

/* Highlight links — make every link obvious */
html.rh-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* Readable font — switch to a highly legible face with generous spacing */
html.rh-readable body,
html.rh-readable p,
html.rh-readable li,
html.rh-readable a,
html.rh-readable h1, html.rh-readable h2, html.rh-readable h3,
html.rh-readable h4, html.rh-readable button, html.rh-readable input,
html.rh-readable textarea, html.rh-readable select, html.rh-readable .lead {
  font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}
html.rh-readable p, html.rh-readable li, html.rh-readable .lead { line-height: 1.85 !important; }

/* Reduce motion — stop animations/transitions and smooth scrolling */
html.rh-reduce-motion,
html.rh-reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* The widget's own panel must stay readable even in readable/contrast modes */
html.rh-readable .rh-a11y-head h2 { font-family: Lora, Georgia, serif !important; }
