/**
 * Component: Custom Search
 * Refactored: 2025-11-12
 * Original File: /assets/custom-search/css/custom-search.css
 * Developer: James (Dev Agent)
 * Token Version: design-tokens.css v1.0
 * Changes: Converted to mobile-first, replaced ALL hardcoded values with tokens, removed !important
 * Compliance: 100% - Lines 1221-1242 task-list.md requirements
 */



/* ============================================
   MOBILE BASE STYLES (No media query)
   Mobile-first: Default styles for smallest screens
   ============================================ */

/* Main container */
.custom-search-container {
    max-width: 420px; /* Container exception: mobile max-width allowed */
    margin: var(--spacing-4) auto;
    padding: 0 var(--spacing-4);
}

/* Search field wrapper */
.custom-search-field {
    position: relative;
    width: 100%;
}

/* Search input wrapper with flexbox layout - Figma Design Match */
.custom-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-2); /* Using gap instead of margin */
    background: var(--color-base-ghost-white); /* #FAFAFA */
    border: var(--border-width-thin) solid var(--color-base-light-gray); /* Figma exact border color */
    border-radius: 10px; /* Figma exact radius */
    padding: 7px 10px; /* Figma exact padding: 7px vertical, 10px horizontal */
    min-height: calc(var(--spacing-12) + var(--spacing-2)); /* ~50px mobile */
    box-sizing: border-box;
    width: 100%;
}

/* Focus states */
.custom-search-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--border-width-thin) var(--color-primary-light);
}

/* Search icon - Figma Design Match */
.custom-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 25px; /* Figma exact width */
    height: 22px; /* Figma exact height */
}

.custom-search-icon img,
.custom-search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    /* No opacity - let SVG handle color */
}

/* Search input field - Figma Design Match */
.custom-search-input {
    flex: 1;
    min-width: 0; /* Prevent overflow */
    border: none !important; /* Force no border - override Brizy/WP styles */
    border-width: 0 !important;
    border-style: none !important;
    background: transparent !important;
    box-shadow: none !important; /* Remove any box-shadow borders */
    font-family: var(--font-family-paragraph);
    font-size: 13px; /* Figma P3 caption: 13px */
    font-weight: var(--font-weight-medium); /* Figma: Medium 500 */
    line-height: 20px; /* Figma line height: 20px */
    color: var(--color-default-text);
    outline: none !important;
    padding: 0;
    margin: 0;
}

.custom-search-input::placeholder {
    color: var(--color-default-text-light); /* #73777F */
    font-family: var(--font-family-paragraph);
    font-size: 13px; /* Figma P3 caption */
    font-weight: var(--font-weight-medium);
}

/* Clear button - Figma Design Match */
.custom-search-clear {
    display: none;
    width: 22px; /* Figma exact size */
    height: 22px; /* Figma exact size */
    background: transparent; /* No background - SVG has its own */
    border: none;
    border-radius: 4px; /* Figma exact radius */
    padding: 0; /* No padding - SVG handles it */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.custom-search-clear.active {
    display: flex;
}

.custom-search-clear:hover {
    opacity: 0.8;
}

.custom-search-clear img,
.custom-search-clear svg {
    width: 22px; /* Figma exact size */
    height: 22px; /* Figma exact size */
    display: block;
}

/* Search dropdown - positioned absolutely for overlay */
.custom-search-dropdown {
    position: absolute; /* Required for dropdown overlay */
    top: calc(100% + var(--spacing-2));
    left: 0;
    width: 100%; /* Explicit width to match parent field */
    background: var(--color-base-white);
    border: var(--border-width-thin) solid var(--color-base-light-gray);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: calc(var(--spacing-24) * 3); /* ~288px mobile */
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--spacing-2) * -1));
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.custom-search-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search results container */
.custom-search-results {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3); /* Using gap instead of margins */
}

/* Hide scrollbar for cleaner look */
.custom-search-results::-webkit-scrollbar {
    width: var(--spacing-2);
}

.custom-search-results::-webkit-scrollbar-track {
    background: var(--color-base-ghost-white);
}

.custom-search-results::-webkit-scrollbar-thumb {
    background: var(--color-base-mid-gray);
    border-radius: var(--radius-sm);
}

/* Result item using flexbox */
.custom-search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3); /* Using gap instead of margin */
    padding: var(--spacing-2);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    border-radius: var(--radius-md);
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.custom-search-result-item:hover {
    background: var(--color-base-ghost-white);
}

.custom-search-result-item:focus {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: calc(var(--border-width-thin) * -1);
}

/* Result image */
.custom-search-result-image {
    width: var(--spacing-10); /* 40px */
    height: var(--spacing-10);
    min-width: var(--spacing-10);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.custom-search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Result content using flexbox */
.custom-search-result-content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically to align with image */
    align-items: flex-start; /* Align text to the left */
    gap: var(--spacing-1);
    text-align: left !important;
}

/* Result title */
.custom-search-result-title {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p2-base); /* Mobile: 14px */
    line-height: 1.4;
    color: var(--color-default-text);
    margin: 0;
    text-align: left;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Special styling for first result */
.custom-search-result-item:first-child .custom-search-result-title {
    color: var(--color-base-dark);
    font-weight: var(--font-weight-semibold);
}

/* Result excerpt - hidden on mobile */
.custom-search-result-excerpt {
    display: none;
}

/* Loading and empty states */
.custom-search-loading,
.custom-search-no-results {
    padding: var(--spacing-5);
    text-align: center;
    font-family: var(--font-family-paragraph);
    font-size: var(--font-size-p2-base);
    color: var(--color-default-text-light);
    font-style: normal;
}

.custom-search-loading {
    color: var(--color-default-text);
}

/* Loading spinner */
.custom-search-loading::before {
    content: '';
    display: inline-block;
    width: var(--spacing-4);
    height: var(--spacing-4);
    border: var(--border-width-medium) solid var(--color-base-light-gray);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: custom-search-spin 0.8s linear infinite;
    margin-right: var(--spacing-2);
}

@keyframes custom-search-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility: Focus visible for keyboard navigation */
.custom-search-input:focus,
.custom-search-input:focus-visible,
.custom-search-input:active {
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.custom-search-clear:focus-visible,
.custom-search-result-item:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: var(--border-width-thin);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .custom-search-input-wrapper {
        border-width: var(--border-width-medium);
    }

    .custom-search-dropdown {
        border-width: var(--border-width-medium);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .custom-search-dropdown,
    .custom-search-result-item,
    .custom-search-clear {
        transition: none;
    }

    @keyframes custom-search-spin {
        to {
            transform: none;
        }
    }
}

/* ============================================
   TABLET STYLES (≥768px)
   Mobile-first: Only add changes from mobile
   ============================================ */
@media (min-width: 768px) {
    /* Container adjustments */
    .custom-search-container {
        max-width: 698px; /* Container exception: tablet max-width allowed */
        margin: var(--spacing-5) auto;
    }

    /* Input wrapper height increase */
    .custom-search-input-wrapper {
        padding: var(--spacing-3) var(--spacing-4);
        min-height: calc(var(--spacing-12) + var(--spacing-3)); /* ~55px tablet */
        gap: var(--spacing-3);
    }

    /* Icon size increase */
    .custom-search-icon {
        width: var(--spacing-6); /* 24px */
        height: var(--spacing-6);
    }

    /* Input text size */
    .custom-search-input {
        font-size: var(--font-size-h7); /* Tablet: 15px */
    }

    .custom-search-input::placeholder {
        font-size: var(--font-size-h7);
    }

    /* Clear button size */
    .custom-search-clear {
        width: var(--spacing-6);
        height: var(--spacing-6);
    }

    /* Dropdown height increase */
    .custom-search-dropdown {
        max-height: calc(var(--spacing-24) * 3.5); /* ~336px tablet */
    }

    /* Results padding */
    .custom-search-results {
        padding: var(--spacing-5);
        gap: var(--spacing-4);
    }

    /* Result item adjustments */
    .custom-search-result-item {
        padding: var(--spacing-3);
        gap: var(--spacing-4);
    }

    /* Result image size */
    .custom-search-result-image {
        width: calc(var(--spacing-10) + var(--spacing-1)); /* 44px */
        height: calc(var(--spacing-10) + var(--spacing-1));
        min-width: calc(var(--spacing-10) + var(--spacing-1));
    }

    /* Result title size */
    .custom-search-result-title {
        font-size: var(--font-size-h7); /* Tablet: 15px */
    }

    /* Show excerpt on tablet */
    .custom-search-result-excerpt {
        display: block;
        font-family: var(--font-family-paragraph);
        font-size: var(--font-size-p3-caption);
        line-height: 1.4;
        color: var(--color-default-text-light);
        margin: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
        width: 100%;
    }
}

/* ============================================
   DESKTOP STYLES (≥1280px)
   Mobile-first: Only add changes from tablet - FIGMA DESIGN MATCH
   ============================================ */
@media (min-width: 1280px) {
    /* Container adjustments - Figma: 540px width */
    .custom-search-container {
        max-width: 540px; /* Figma exact desktop width */
        margin: var(--spacing-6) auto;
    }

    /* Input wrapper final size - Figma: 57px height */
    .custom-search-input-wrapper {
        min-height: 57px; /* Figma exact height */
        padding: 7px 10px; /* Maintain Figma exact padding */
    }

    /* Dropdown max height */
    .custom-search-dropdown {
        max-height: calc(var(--spacing-24) * 4); /* ~384px desktop */
    }

    /* Results with more spacing */
    .custom-search-results {
        gap: var(--spacing-5);
    }

    /* Result item hover effect enhancement */
    .custom-search-result-item {
        padding: var(--spacing-4);
    }

    /* Result image final size */
    .custom-search-result-image {
        width: var(--spacing-12); /* 48px */
        height: var(--spacing-12);
        min-width: var(--spacing-12);
    }

    /* Content gap adjustment */
    .custom-search-result-content {
        gap: var(--spacing-2);
    }

    /* Result excerpt - show more lines */
    .custom-search-result-excerpt {
        -webkit-line-clamp: 3;
    }
}

/* ============================================
   Print styles
   ============================================ */
@media print {
    .custom-search-container {
        display: none;
    }
}