/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Keyboard users can bypass repeated navigation without adding visual
   clutter for pointer users. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  color: #fff;
  background: #1b1715;
  border-radius: 0.25rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Ensure every interactive control has a visible keyboard focus indicator,
   including controls whose component styles remove the browser outline. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Global "Send feedback" chrome (#93).                              */
/*                                                                  */
/* The link is anchored to the bottom-right of the viewport so it's */
/* always reachable without scrolling, but kept visually quiet so   */
/* it doesn't fight whatever brand surface is rendered behind it.   */
/* Colors lean on the same olive/cream palette the landing page    */
/* uses; once a real design system lands these can be re-skinned.  */
/* ---------------------------------------------------------------- */

.feedback-chrome-link {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  padding: 0.5rem 0.9rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #1b1715;
  background: #f6efe7;
  border: 1px solid rgba(122, 78, 45, 0.25);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(27, 23, 21, 0.08), 0 4px 12px rgba(27, 23, 21, 0.06);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.feedback-chrome-link:hover,
.feedback-chrome-link:focus-visible {
  background: #fff;
  border-color: rgba(122, 78, 45, 0.6);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .feedback-chrome-link,
  .skip-link {
    transition: none;
  }
}

/* The native <dialog> default is centered + has a UA-styled border;
   we replace those with a more pleasant card. */
.feedback-modal {
  border: none;
  border-radius: 0.75rem;
  padding: 0;
  max-width: 32rem;
  width: calc(100vw - 2rem);
  background: #f6efe7;
  color: #1b1715;
  box-shadow: 0 12px 48px rgba(27, 23, 21, 0.25);
}

.feedback-modal::backdrop {
  background: rgba(27, 23, 21, 0.5);
}

.feedback-modal turbo-frame#feedback_modal_frame {
  display: block;
  padding: 1.25rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

.feedback-modal-thanks {
  padding: 0.5rem 0;
  font-style: italic;
  font-family: ui-serif, Georgia, "Iowan Old Style", serif;
  color: #7a4e2d;
}