/*
 * 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.
 */

/* Hide Google Translate toolbar and banner - we use a custom button instead */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-text-highlight {
  display: none !important;
}

body {
  top: 0 !important;
}

/* Hide the "Powered by Google" text in translate widget */
.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
  color: #333;
}

/* Screen reader only - hides element visually but keeps it accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Remove sr-only on focus */
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: initial;
  margin: initial;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Enhanced focus indicators for keyboard navigation
 * Uses :focus-visible to distinguish keyboard from mouse focus
 * Provides high-contrast outlines for accessibility
 */
*:focus-visible {
  outline: 3px solid #ff914d; /* WRR Orange */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure links have clear focus states */
a:focus-visible {
  outline: 3px solid #ff914d;
  outline-offset: 2px;
}

/* Ensure buttons have clear focus states */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 3px solid #ff914d;
  outline-offset: 2px;
}

/* Form inputs get a different focus style to distinguish from buttons */
input:focus-visible:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ff914d;
  outline-offset: 0px;
}

/* Radio buttons and checkboxes */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 3px solid #ff914d;
  outline-offset: 2px;
}