/* Simple CSS for HTML Anchor Navigation */

/* ========================================
   SMOOTH SCROLL BEHAVIOR
======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   FIXED HEADER OFFSET FOR ANCHORS
======================================== */

/* All anchor points get offset for fixed header */
.anchor-point {
    /* Use CSS scroll-margin-top to account for fixed header */
    scroll-margin-top: 5rem; /* 80px - adjust to match your header height */
    
    /* Keep anchor points invisible and non-layout-affecting */
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border: none;
    pointer-events: none;
    display: block;
    position: relative;
}

/* Alternative: You can also apply to all elements with IDs */
[id] {
    scroll-margin-top: 5rem;
}

/* ========================================
   RESPONSIVE HEADER HEIGHTS
======================================== */

/* Adjust scroll offset for different screen sizes if header height changes */
@media (max-width: 768px) {
    .anchor-point,
    [id] {
        scroll-margin-top: 4rem; /* Smaller offset for mobile if header is shorter */
    }
}

/* ========================================
   OPTIONAL: VISUAL DEBUG FOR DEVELOPMENT
======================================== */

/* Uncomment this section to see anchor points during development */
/*
@if(app()->environment('local'))
.anchor-point::before {
    content: "🔗 " attr(id);
    position: absolute;
    left: -120px;
    top: -25px;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
    font-family: monospace;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.anchor-point {
    border-left: 3px solid #3b82f6;
    margin-left: -3px;
    height: 2px !important;
}
@endif
*/

/* ========================================
   ENSURE CLEAN LAYOUT
======================================== */

/* Make sure anchor points don't interfere with flexbox/grid layouts */
.anchor-point {
    flex: none;
    grid-column: unset;
    grid-row: unset;
}

/* Ensure sections maintain proper spacing */
.page-section {
    position: relative;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
======================================== */

/* Hide anchor points from screen readers */
.anchor-point {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
}

/* When an anchor is targeted, ensure focus is visible */
:target {
    scroll-margin-top: 5rem;
}

/* ========================================
   BROWSER COMPATIBILITY
======================================== */

/* Fallback for browsers that don't support scroll-margin-top */
@supports not (scroll-margin-top: 1px) {
    .anchor-point {
        padding-top: 5rem;
        margin-top: -5rem;
    }
}

/* ========================================
   DROPDOWN MENU STYLES
======================================== */

/* Ensure dropdown menus appear above other content */
.dropdown-menu {
    z-index: 1000;
}

/* Smooth transitions for dropdown arrows */
.dropdown-arrow {
    transition: transform 0.2s ease-in-out;
}

/* Enhanced focus styles for accessibility */
.dropdown-button:focus,
.dropdown-item:focus {
    outline: 2px solid var(--aeris-gold);
    outline-offset: 2px;
}

/* Mobile dropdown enhancements */
@media (max-width: 640px) {
    .mobile-dropdown {
        animation: slideDown 0.3s ease-out;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}