/* =========================================================
   FINAL Gravity Forms Red Keyboard Focus Override
   Fixes green checkbox/tab focus on Form 3 and all Gravity Forms
========================================================= */

:root {
  --reshape-focus-red-final: #b13b31;
  --reshape-green-final: #476318;
}

/* Text inputs, email, selects, textarea, buttons, links */
html body .gform_wrapper input:not([type="hidden"]):focus-visible,
html body .gform_wrapper select:focus-visible,
html body .gform_wrapper textarea:focus-visible,
html body .gform_wrapper button:focus-visible,
html body .gform_wrapper .gform_button:focus-visible,
html body .gform_wrapper .gform-button:focus-visible,
html body .gform_wrapper a:focus-visible {
  outline: 3px solid var(--reshape-focus-red-final) !important;
  outline-color: var(--reshape-focus-red-final) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Same red focus when older keyboard body classes are active */
html body.aa-site-using-keyboard .gform_wrapper input:not([type="hidden"]):focus,
html body.aa-site-using-keyboard .gform_wrapper select:focus,
html body.aa-site-using-keyboard .gform_wrapper textarea:focus,
html body.aa-site-using-keyboard .gform_wrapper button:focus,
html body.aa-site-using-keyboard .gform_wrapper .gform_button:focus,
html body.aa-site-using-keyboard .gform_wrapper .gform-button:focus,
html body.aa-site-using-keyboard .gform_wrapper a:focus,
html body.dipi-using-keyboard .gform_wrapper input:not([type="hidden"]):focus,
html body.dipi-using-keyboard .gform_wrapper select:focus,
html body.dipi-using-keyboard .gform_wrapper textarea:focus,
html body.dipi-using-keyboard .gform_wrapper button:focus,
html body.dipi-using-keyboard .gform_wrapper .gform_button:focus,
html body.dipi-using-keyboard .gform_wrapper .gform-button:focus,
html body.dipi-using-keyboard .gform_wrapper a:focus {
  outline: 3px solid var(--reshape-focus-red-final) !important;
  outline-color: var(--reshape-focus-red-final) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Checkbox/radio are the problem area: force border AND outline red on keyboard focus */
html body .gform_wrapper input[type="checkbox"]:focus-visible,
html body .gform_wrapper input[type="radio"]:focus-visible,
html body .gform_wrapper input.gfield-choice-input[type="checkbox"]:focus-visible,
html body .gform_wrapper input.gfield-choice-input[type="radio"]:focus-visible,
html body .gform_wrapper input.keyboard-navigation-outline[type="checkbox"]:focus-visible,
html body .gform_wrapper input.keyboard-navigation-outline[type="radio"]:focus-visible {
  border-color: var(--reshape-focus-red-final) !important;
  outline: 3px solid var(--reshape-focus-red-final) !important;
  outline-color: var(--reshape-focus-red-final) !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}

/* Checkbox/radio red focus fallback for browsers/classes not using :focus-visible */
html body.aa-site-using-keyboard .gform_wrapper input[type="checkbox"]:focus,
html body.aa-site-using-keyboard .gform_wrapper input[type="radio"]:focus,
html body.aa-site-using-keyboard .gform_wrapper input.gfield-choice-input[type="checkbox"]:focus,
html body.aa-site-using-keyboard .gform_wrapper input.gfield-choice-input[type="radio"]:focus,
html body.aa-site-using-keyboard .gform_wrapper input.keyboard-navigation-outline[type="checkbox"]:focus,
html body.aa-site-using-keyboard .gform_wrapper input.keyboard-navigation-outline[type="radio"]:focus,
html body.dipi-using-keyboard .gform_wrapper input[type="checkbox"]:focus,
html body.dipi-using-keyboard .gform_wrapper input[type="radio"]:focus,
html body.dipi-using-keyboard .gform_wrapper input.gfield-choice-input[type="checkbox"]:focus,
html body.dipi-using-keyboard .gform_wrapper input.gfield-choice-input[type="radio"]:focus,
html body.dipi-using-keyboard .gform_wrapper input.keyboard-navigation-outline[type="checkbox"]:focus,
html body.dipi-using-keyboard .gform_wrapper input.keyboard-navigation-outline[type="radio"]:focus {
  border-color: var(--reshape-focus-red-final) !important;
  outline: 3px solid var(--reshape-focus-red-final) !important;
  outline-color: var(--reshape-focus-red-final) !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}

/* Keep checkbox/radio normal state green when not focused */
html body .gform_wrapper input[type="checkbox"]:not(:focus):not(:focus-visible),
html body .gform_wrapper input[type="radio"]:not(:focus):not(:focus-visible),
html body .gform_wrapper input.gfield-choice-input[type="checkbox"]:not(:focus):not(:focus-visible),
html body .gform_wrapper input.gfield-choice-input[type="radio"]:not(:focus):not(:focus-visible) {
  border-color: var(--reshape-green-final) !important;
}

/* Footer opt-in email: green field border, red keyboard focus */
html body #footer-optin input[type="email"],
html body #footer-optin input[type="email"]:focus,
html body #footer-optin input[type="email"]:focus-visible {
  border-color: var(--reshape-green-final) !important;
}

html body #footer-optin input[type="email"]:focus-visible,
html body #footer-optin .gfield_html a:focus-visible,
html body #footer-optin input[type="submit"]:focus-visible,
html body #footer-optin .gform_button:focus-visible {
  outline: 3px solid var(--reshape-focus-red-final) !important;
  outline-color: var(--reshape-focus-red-final) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Remove red outline on mouse focus only */
html body:not(.aa-site-using-keyboard):not(.dipi-using-keyboard) .gform_wrapper input:not([type="hidden"]):focus:not(:focus-visible),
html body:not(.aa-site-using-keyboard):not(.dipi-using-keyboard) .gform_wrapper select:focus:not(:focus-visible),
html body:not(.aa-site-using-keyboard):not(.dipi-using-keyboard) .gform_wrapper textarea:focus:not(:focus-visible),
html body:not(.aa-site-using-keyboard):not(.dipi-using-keyboard) .gform_wrapper button:focus:not(:focus-visible),
html body:not(.aa-site-using-keyboard):not(.dipi-using-keyboard) .gform_wrapper a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}