/* ---------------------------------------------------------------------
   Read-aloud widget
   Accessibility enhancement: on-demand text-to-speech for page content
   using the browser's built-in Web Speech API. Complements (does not
   replace) underlying WCAG 2.1 AA conformance.

   Lives inline in the header nav: positioned as the first item in the
   primary nav on desktop (immediately right of the logo, left of Home),
   and as the first item in the mobile nav drawer on small screens. A
   close (x) lets a visitor dismiss it for the rest of the browsing session.
--------------------------------------------------------------------- */
.ra-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body, 'Public Sans', 'Segoe UI', system-ui, sans-serif);
}

.ra-btn-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ra-btn {
  height: 38px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-primary, #0f4c4f);
  color: var(--color-text-inverse, #fff);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0 16px;
  flex-shrink: 0;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
  white-space: nowrap;
}
.ra-btn:hover { background: var(--color-primary-hover, #0b3a3c); }
.ra-btn:focus-visible { outline: 2px solid var(--color-primary, #0f4c4f); outline-offset: 2px; }
.ra-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ra-btn.is-active { background: var(--color-accent, #b3672c); }
.ra-btn.is-active:hover { background: var(--color-accent-hover, #96551f); }

.ra-close-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-faint, #6d695e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.ra-close-btn:hover { background: var(--color-primary-highlight, #dde8e6); color: var(--color-text, #23231f); }
.ra-close-btn:focus-visible { outline: 2px solid var(--color-primary, #0f4c4f); outline-offset: 1px; }
.ra-close-btn svg { width: 13px; height: 13px; }

/* Dropdown playback panel — appears below the button so it never
   disrupts the nav bar's layout. */
.ra-panel {
  display: none;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface, #fffdf9);
  color: var(--color-text, #23231f);
  border: 1px solid var(--color-border, #d9d0bd);
  border-radius: var(--radius-full, 999px);
  padding: 6px 8px 6px 14px;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(20, 30, 28, 0.14));
  white-space: nowrap;
  z-index: 200;
}
.ra-panel.is-visible { display: flex; }

.ra-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text, #23231f);
  white-space: nowrap;
}

.ra-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border, #d9d0bd);
  background: var(--color-surface-2, #ffffff);
  color: var(--color-text, #23231f);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.ra-icon-btn:hover { background: var(--color-primary-highlight, #dde8e6); }
.ra-icon-btn:focus-visible { outline: 2px solid var(--color-primary, #0f4c4f); outline-offset: 1px; }
.ra-icon-btn svg { width: 15px; height: 15px; }

.ra-rate-btn {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 30px;
}

/* ---- Desktop: first item in the primary nav, right after the logo ---- */
@media (min-width: 881px) {
  .main-nav .ra-widget { margin-right: var(--space-2, 0.5rem); }
}

/* ---- Compact desktop (881px-1350px): icon-only pill so the nav doesn't
   overflow. The accessible name comes from the button's aria-label
   ("Listen to this page" / "Pause reading" / etc.), so screen reader users
   still get the full "Visually Impaired? Read Aloud" affordance context via
   that label — only the sighted visual label is hidden here. ---- */
@media (min-width: 881px) and (max-width: 1350px) {
  .main-nav .ra-widget { margin-right: 2px; }
  .main-nav .ra-btn { padding: 0 10px; gap: 0; }
  .main-nav .ra-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- Mobile: inside the nav drawer, full width like the links ---- */
@media (max-width: 880px) {
  [data-mobile-nav] .ra-widget {
    width: 100%;
    justify-content: center;
    padding: var(--space-2, 0.5rem) 0;
  }
  [data-mobile-nav] .ra-btn-row { width: 100%; justify-content: center; }
  [data-mobile-nav] .ra-btn { flex: 0 1 auto; }
  [data-mobile-nav] .ra-panel {
    position: static;
    transform: none;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .ra-btn { height: 34px; padding: 0 12px; font-size: 0.82rem; gap: 6px; }
  .ra-btn svg { width: 16px; height: 16px; }
}