/* Header styling header.css - FIXED VERSION */
.grve-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.grve-header-elements {
    display: flex;
    align-items: center;
}

.faq-header-search-trigger .faq-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    /* FIXED: Prevent Safari from applying blue tint */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* FIXED: Specific styling for the SVG icon to prevent Safari blue tint */
.faq-header-search-trigger .faq-header-icon-btn svg {
    color: #333 !important;
    fill: none !important;
    stroke: currentColor !important;
    /* Force Safari to respect the color */
    -webkit-text-fill-color: #333 !important;
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* FIXED: Override any Safari system colors */
.faq-header-search-trigger .faq-header-icon-btn svg * {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
}

.faq-header-search-trigger .faq-header-icon-btn:hover svg {
    opacity: 0.8;
    color: #666;
    -webkit-text-fill-color: #666;
}

/* FIXED: Prevent blue highlight on tap in Safari */
.faq-header-search-trigger .faq-header-icon-btn:active {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* Overlay fade */
.faq-header-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.faq-header-search-open .faq-header-overlay {
    opacity: 1;
    pointer-events: auto;
}

.faq-header-search-wrap {
    position: fixed;
    top: 20px;
    z-index: 9998;
    width: min(620px, calc(100vw - 32px));
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: 100% 0%;
    pointer-events: none;
    transition:
        opacity .18s ease,
        transform .18s ease;
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
}

/* OPEN state */
.faq-header-search-wrap[data-state="open"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

/* CLOSING state — a bit faster so it feels snappy */
.faq-header-search-wrap[data-state="closing"] {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.985);
    pointer-events: none;
}

/* Ensure inner container matches width (no width animation) */
#faq-header-search-wrap .faq-search-container {
    width: 100%;
}

/* Slightly leaner padding works nicely in header scale */
#faq-header-search-wrap .faq-search-input {
    padding: 14px 16px 14px 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    /* FIXED: Prevent Safari from zooming on focus */
    -webkit-appearance: none;
    background-color: #fff;
}

/* FIXED: Prevent Safari input zoom on mobile */
@media screen and (max-width: 768px) {
    #faq-header-search-wrap .faq-search-input {
        font-size: 16px !important;
        transform: scale(1);
    }
}

/* Search container styling */
.faq-search-container {
    position: relative;
    width: 100%;
}

/* Search icon styling - FIXED for Safari */
.faq-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    /* FIXED: Ensure consistent rendering in Safari */
    -webkit-text-fill-color: #666;
}

.faq-search-icon svg {
    fill: none;
    stroke: currentColor;
    color: #666;
    -webkit-text-fill-color: #666;
}

/* Clear button styling - FIXED for Safari */
.faq-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 20px;
    /* FIXED: Safari button fixes */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-fill-color: #666;
}

.faq-search-clear:hover {
    color: #333;
    -webkit-text-fill-color: #333;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .faq-header-overlay,
    .faq-header-search-wrap {
        transition: none !important;
    }
}

/* FIXED: Additional mobile Safari optimizations */
@media screen and (max-device-width: 768px) {
    .faq-header-search-trigger .faq-header-icon-btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* CRITICAL: Force Safari to not apply blue tint to search icon */
    .faq-header-search-trigger .faq-header-icon-btn svg,
    .faq-header-search-trigger .faq-header-icon-btn svg *,
    .faq-header-search-trigger .faq-header-icon-btn svg path,
    .faq-header-search-trigger .faq-header-icon-btn svg circle {
        color: #333 !important;
        fill: none !important;
        stroke: #333 !important;
        -webkit-text-fill-color: #333 !important;
        /* Override Safari's system accent color */
        accent-color: #333 !important;
    }
    
    /* Prevent Safari from changing input appearance */
    #faq-header-search-wrap .faq-search-input {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
}