/* Remove default browser outline to replace with custom styles */
*:focus {
    outline: none;
}

/* Add custom focus styles for all interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus,
[role="menuitem"]:focus,
[role="tab"]:focus,
[contenteditable]:focus,
.btn:focus,
.menu-link:focus,
.swiper-btn-prev:focus,
.swiper-btn-next:focus,
summary:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Alternative style with box-shadow (works better with rounded elements) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Special handling for buttons and links with background colors */
button:focus,
.btn:focus,
a.btn:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
}

/* For dark backgrounds, use light outline */
.footer a:focus,
.footer button:focus,
[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus,
.dark-section a:focus,
.dark-section button:focus {
    outline-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Checkbox and radio button focus styles */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Focus within for parent elements */
.form-item:focus-within {
    border-color: #4a90e2;
}

/* Card or clickable container focus */
.card:focus,
[role="article"]:focus,
.clickable:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 4px;
}

/* Remove focus styles for mouse users (optional - requires JavaScript) */
/* body:not(.keyboard-nav) *:focus {
    outline: none !important;
} */

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus {
        outline-width: 3px;
        outline-style: solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *:focus {
        transition: none;
    }
}

/* Ensure focus is visible in Windows High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
    *:focus {
        outline: 3px solid;
    }
}

/* Custom focus for specific elements that might need different treatment */
.swiper-slide:focus {
    outline: 2px solid #4a90e2;
    outline-offset: -2px;
}

/* Focus styles for SVG elements */
svg:focus,
svg *:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Make sure focus is visible on elements with overflow hidden */
.overflow-hidden:focus,
[style*="overflow: hidden"]:focus {
    overflow: visible !important;
}

.card-item h2{
  font-weight: 600;
  font-size: 1.625rem;
  line-height: .9;
  letter-spacing: 0.02em;
  margin-bottom: 1.125rem;
}
@media only screen and (max-width: 1024px) {
  .card-item h2 {
    font-size: 2.375rem;
    margin-bottom: 1.625rem;
  }
}