/* Header Focus & Tap Highlight Fix - Remove Blue Glows, Add Brand Green A11y */

/* Define brand colors for focus states */
:root {
  --brand-green: #00A651;
  --brand-green-light: rgba(0, 166, 81, 0.2);
  --brand-green-outline: rgba(0, 166, 81, 0.5);
}

/* Remove mobile tap highlights in header */
#header,
#header *,
.navbar,
.navbar *,
.header-actions,
.header-actions *,
.mobile-actions,
.mobile-actions * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Allow text selection for nav links content only */
#header .nav-link,
#header .navbar-brand {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

/* Remove default browser outline and Bootstrap focus styles in header */
#header button:focus,
#header button:active,
#header .btn:focus,
#header .btn:active,
#header .nav-link:focus,
#header .nav-link:active,
#header a:focus,
#header a:active,
#languageToggle:focus,
#languageToggle:active,
.navbar .btn:focus,
.navbar .btn:active,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.header-actions button:focus,
.header-actions button:active,
.header-actions .btn:focus,
.header-actions .btn:active,
.mobile-actions button:focus,
.mobile-actions button:active,
.mobile-actions .btn:focus,
.mobile-actions .btn:active,
.login-btn-container a:focus,
.login-btn-container a:active,
.mobile-login-btn:focus,
.mobile-login-btn:active,
.custom-navbar-toggler:focus,
.custom-navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Remove Bootstrap's default focus box-shadow specifically */
#header .btn:focus,
#header .btn-outline-secondary:focus,
#languageToggle:focus,
.navbar .btn:focus,
.navbar .btn-outline-secondary:focus,
.custom-language-btn:focus {
  box-shadow: none !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
  color: #6c757d !important;
  outline: none !important;
}

/* Language toggle specific fixes - Complete blue removal including scroll states */
#languageToggle,
#languageToggle:focus,
#languageToggle:active,
#languageToggle:hover,
#languageToggle:visited,
.language-switcher button,
.language-switcher button:focus,
.language-switcher button:active,
.language-switcher button:hover,
.custom-language-btn,
.custom-language-btn:focus,
.custom-language-btn:active,
.custom-language-btn:hover,
.custom-language-btn:visited {
  outline: none !important;
  box-shadow: none !important;
  border-color: #6c757d !important;
  text-decoration: none !important;
  background-color: transparent !important;
  color: #6c757d !important;
  border: 1px solid #6c757d !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Remove any blue transitions on language toggle */
#languageToggle,
.language-switcher button {
  transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation: none !important;
}

/* Active and hover states - gray instead of blue */
#languageToggle:active,
#languageToggle:hover,
.language-switcher button:active,
.language-switcher button:hover {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
  border: 1px solid #6c757d !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Prevent Bootstrap btn-outline-secondary blue focus on scroll */
.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:hover,
.header.scrolled .btn-outline-secondary,
.header.scrolled .btn-outline-secondary:focus,
.header.scrolled .btn-outline-secondary:active,
.header.scrolled .btn-outline-secondary:hover {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  box-shadow: none !important;
  border: 1px solid #6c757d !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Language switcher container */
.language-switcher {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* Language toggle icon and text */
#languageToggle .globe-icon,
#languageToggle .language-code,
.language-switcher button .globe-icon,
.language-switcher button .language-code {
  color: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Fix scroll-triggered blue lines */
.header.scrolled #languageToggle,
.header.scrolled .language-switcher button {
  border-color: #6c757d !important;
  background-color: transparent !important;
  color: #6c757d !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Force override any blue states during click/tap */
#languageToggle:active:focus,
#languageToggle:focus:active,
.language-switcher button:active:focus,
.language-switcher button:focus:active {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove blue flash on mobile tap */
#languageToggle::selection,
.language-switcher button::selection {
  background: transparent !important;
}

#languageToggle::-moz-selection,
.language-switcher button::-moz-selection {
  background: transparent !important;
}

/* Fix link text decoration colors - prevent blue underlines */
#header a:focus,
#header a:active,
#header a:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .nav-link:hover {
  text-decoration-color: currentColor !important;
  color: var(--brand-green) !important;
}

/* Accessible keyboard focus using :focus-visible with brand green */
#header button:focus-visible,
#header .btn:focus-visible,
#header .nav-link:focus-visible,
#header a:focus-visible,
#languageToggle:focus-visible,
.navbar .btn:focus-visible,
.navbar .nav-link:focus-visible,
.header-actions button:focus-visible,
.header-actions .btn:focus-visible,
.mobile-actions button:focus-visible,
.mobile-actions .btn:focus-visible,
.login-btn-container a:focus-visible,
.mobile-login-btn:focus-visible,
.custom-navbar-toggler:focus-visible {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 4px var(--brand-green-light) !important;
}

/* Special handling for rounded buttons */
#languageToggle:focus-visible,
.mobile-login-btn:focus-visible {
  border-radius: 8px !important;
}

/* Custom toggler focus state */
.custom-navbar-toggler:focus-visible {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 1px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 3px var(--brand-green-light) !important;
}

/* Nav links focus state - more subtle */
.navbar .nav-link:focus-visible {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 1px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 2px var(--brand-green-light) !important;
  background-color: rgba(0, 166, 81, 0.05) !important;
}

/* Remove focus styles when not using keyboard (mouse/touch) */
#header button:focus:not(:focus-visible),
#header .btn:focus:not(:focus-visible),
#header .nav-link:focus:not(:focus-visible),
#header a:focus:not(:focus-visible),
#languageToggle:focus:not(:focus-visible),
.navbar .btn:focus:not(:focus-visible),
.navbar .nav-link:focus:not(:focus-visible),
.header-actions button:focus:not(:focus-visible),
.header-actions .btn:focus:not(:focus-visible),
.mobile-actions button:focus:not(:focus-visible),
.mobile-actions .btn:focus:not(:focus-visible),
.login-btn-container a:focus:not(:focus-visible),
.mobile-login-btn:focus:not(:focus-visible),
.custom-navbar-toggler:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Active states - remove blue, keep brand colors */
#header .btn:active,
#header .nav-link:active,
#languageToggle:active,
.navbar .btn:active,
.navbar .nav-link:active {
  background-color: var(--brand-green-light) !important;
  border-color: var(--brand-green) !important;
  color: var(--brand-green) !important;
}

.mobile-login-btn:active {
  background: linear-gradient(135deg, var(--brand-green), #008040) !important;
  transform: translateY(0) !important;
}

/* RTL Support - ensure focus outlines work correctly */
[dir="rtl"] #header button:focus-visible,
[dir="rtl"] #header .btn:focus-visible,
[dir="rtl"] #header .nav-link:focus-visible,
[dir="rtl"] #languageToggle:focus-visible,
[dir="rtl"] .navbar .btn:focus-visible,
[dir="rtl"] .navbar .nav-link:focus-visible {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 2px !important;
}

/* Prevent text selection on interactive elements but allow on text content */
#header .btn,
#header button,
.custom-navbar-toggler,
.mobile-login-btn {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Ensure smooth transitions for focus states */
#header button,
#header .btn,
#header .nav-link,
#header a,
.navbar .btn,
.navbar .nav-link {
  transition: outline 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

/* Mobile-specific tap highlight removal */
@media (max-width: 991.98px) {
  .custom-navbar-menu,
  .custom-navbar-menu *,
  .custom-navbar-menu .nav-link,
  .custom-navbar-menu .btn,
  .custom-navbar-menu button {
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Mobile menu focus states */
  .custom-navbar-menu .nav-link:focus-visible,
  .custom-navbar-menu .btn:focus-visible,
  .custom-navbar-menu button:focus-visible {
    outline: 2px solid var(--brand-green) !important;
    outline-offset: 1px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 2px var(--brand-green-light) !important;
    background-color: rgba(0, 166, 81, 0.05) !important;
  }
}

/* Fallback for browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
  #header button:focus,
  #header .btn:focus,
  #header .nav-link:focus,
  #languageToggle:focus,
  .navbar .btn:focus,
  .navbar .nav-link:focus {
    outline: 2px solid var(--brand-green) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--brand-green-light) !important;
  }
}