/* ========================================
   ACCESSIBILITY STYLES
   ArtHaus Partners - WCAG 2.1 AA Compliance
   ======================================== */

/* Skip Links - Hidden until focused */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    background: var(--dark-teal, #22445B);
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    z-index: 9999;
}

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ========================================
   SEMANTIC HEADING OVERRIDES
   Critical: Remove browser defaults while preserving design typography
   ======================================== */

/* Only reset margins - let proper heading styles control typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* Global H1 styling */
h1, .heading-lg {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-lg); /* 54px */
    line-height: 1.2;
}

/* Global H2 styling */
h2, .heading-xl {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-xl); /* 48px */
    line-height: 1.2;
    margin-bottom: 32px;
}

/* Global H2 additional sizing */
.heading-ml {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-ml); /* 40px */
    line-height: 1.2;
    margin-bottom: 32px;
}

/* Global H3 styling */
h3, .heading-md {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-md); /* 29px */
    line-height: 1.2;
    margin-bottom: 32px;
}

/* Global H4 styling */
h4, .heading-sm {
    font-family: var(--font-italic);
    font-weight: 400;
    font-size: var(--heading-sm); /* 24px */
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 24px;
}

/* Hero subtitle styling - consistent across all pages */
.hero-subtitle {
    font-family: var(--font-Regular) !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* Investment strategy icon text */
.investment-item-text {
    font-family: var(--font-italic) !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}

/* Preserve nested span styling */
h1 span, h2 span, h3 span {
    font-weight: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-transform: inherit !important;
}

/* ========================================
   FOCUS MANAGEMENT
   ======================================== */

/* Enhanced focus for better visibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--dark-teal, #22445B);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(34, 68, 91, 0.1);
}

/* Focus for custom interactive elements */
[tabindex="0"]:focus,
[role="button"]:focus {
    outline: 2px solid var(--dark-teal, #22445B);
    outline-offset: 2px;
    background-color: rgba(34, 68, 91, 0.1);
    border-radius: 2px;
}

/* Enhanced focus for navigation dropdowns */
.dropdown-nav-btn:focus {
    outline: 2px solid var(--dark-teal, #22445B);
    outline-offset: 2px;
    background-color: rgba(34, 68, 91, 0.1);
    border-radius: 2px;
}

/* Focus for dropdown toggle buttons */
span[role="button"]:focus {
    outline: 2px solid var(--dark-teal, #22445B);
    outline-offset: 2px;
    background-color: rgba(34, 68, 91, 0.15);
    border-radius: 2px;
}

/* ========================================
   BUTTON ACCESSIBILITY
   ======================================== */

/* Custom button elements need proper cursor */
[role="button"] {
    cursor: pointer;
}

/* Switch role styling */
[role="switch"] {
    cursor: pointer;
}

/* Enhanced keyboard navigation for dropdown toggles */
.nav-drop span[role="button"] {
    display: inline-block;
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

/* ========================================
   SCREEN READER UTILITIES
   ======================================== */

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

/* Screen reader only text that becomes visible on focus */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Hide decorative content from screen readers */
[aria-hidden="true"] {
    /* Handled by aria-hidden attribute */
}

/* ========================================
   EXTERNAL LINK INDICATORS
   Screen reader only - not visible on screen
   ======================================== */

a[target="_blank"]::after {
    content: " (opens in new tab)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   LANDMARK IMPROVEMENTS
   ======================================== */

/* Ensure landmarks are properly announced */
nav {
    /* Enhanced with aria-label for clear purpose */
}

/* ========================================
   ZOOM AND RESPONSIVE SUPPORT
   ======================================== */

/* Ensure content is accessible at 200% zoom */
@media (min-width: 1280px) {
    .skip-link:focus {
        font-size: 1rem;
        padding: 12px 16px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .skip-link:focus {
        border: 3px solid;
    }
    
    a:focus,
    button:focus {
        outline-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}