/* General body styling */
   body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
}

/* Logo container */
.logo-container {
    margin-bottom: 20px;
    text-align: center;
}

.logo-container img {
    height: 90px;
    width: auto;
}

/* Search container */
.search-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

/* Tabs container and individual tabs */
.tab-container {
    display: flex;
    margin-bottom: 10px;
}

.tab {
    padding: 10px;
    cursor: pointer;
    background-color: #d3d3d3;
    color: black;
    margin-right: 5px;
    border-radius: 4px;
}

.fixed-tab {
    background-color: black;
    color: white;
}

.active-tab {
    background-color: #E0B941;
    color: black;
}

.arrow-icon {
    color: #E0B941;
}

/* Input and button styling */
.search-input-wrapper {
    position: relative;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

input[type="text"] {
    width: calc(100% - 80px);
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding-left: 10px;
}

.clear-button, .icon-button {
    width: 40px;
    height: 40px;
    background-color: #E0B941;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 18px;
    color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-left: 5px;
}

/* Autocomplete suggestions container */
.autocomplete-suggestions {
    display: none;                 /* Hidden by default */
    border: 0.5px solid #ddd;      /* Border for suggestion box */
    max-height: 300px;             /* Set max height for scrolling */
    overflow-y: auto;              /* Allow vertical scroll if overflow */
    position: absolute;            /* Position relative to the search input */
    background-color: white;       /* White background for suggestions */
    z-index: 1000;                 /* High z-index to ensure it appears above other elements */
    width: calc(100% - 80px);      /* Match width of the input minus padding */
    top: 42px;                     /* Position below the input field */
    left: 0;
    box-sizing: border-box;        /* Ensure border is included in element width */
    text-align: left;              /* Left-align all content in dropdown */
}

/* Display active autocomplete suggestions */
.autocomplete-suggestions.active {
    display: block;                /* Show suggestions when needed */
}

/* General styling for autocomplete suggestion block */
.autocomplete-suggestion {
    padding: 4px 8px;              /* Reduced padding for closer alignment between lines */
    text-align: left;              /* Ensure text is left-aligned */
    transition: background-color 0.2s; /* Smooth transition for background color */
}

/* Background hover effect for entire suggestion set (Lines 1-4) */
.autocomplete-suggestion:hover {
    background-color: #f5f5f5;     /* Lighter grey background on hover to differentiate the set */
}

/* Line 1: Styling for each autocomplete suggestion (initial black text) */
.autocomplete-link {
    color: #045edd;                   /* Black text by default */
    font-size: 16px;               /* Ensure consistent size */
    font-weight: normal;           /* Normal weight by default */
    cursor: pointer;               /* Pointer cursor to indicate clickable */
    transition: font-weight 0.2s, text-decoration 0.2s; /* Smooth transition for hover effects */
}

/* Hover effect for Line 1 (autocomplete suggestion link) */
.autocomplete-link:hover {
    color: #045edd;     
	font-weight: bold;             /* Bold text on hover */
    text-decoration: none;         /* No underline on hover */
}

/* Line 2: Styling for "Search topic:" and topic link */
.autocomplete-topic {
    font-size: 14px;               /* Smaller font size */
    font-weight: normal;           /* Normal weight initially */
    color: black;                   /* Grayish color initially */
    cursor: pointer;               /* Pointer cursor to indicate clickable */
    margin-top: 2px;  /* Extra space between line 1 and line 2 */
}

.autocomplete-topic a {
    text-decoration: none;         /* No underline initially */
    transition: color 0.2s, font-weight 0.2s; /* Smooth transition */
}

/* Hover effect: "Search topic:" turns black (not bold) */
.autocomplete-topic:hover {
    color: #000;                   /* Black color on hover for the prefix */
}

/* Topic text (within the link) turns black and bold */
.autocomplete-topic a:hover {
    color: #045edd !important;                   /* Black color on hover */
    font-weight: bold;             /* Bold weight on hover */
}


/* Line 3: General styling for the keywords container */
.autocomplete-keywords {
    font-size: 14px;               /* Smaller font size */
    font-weight: normal;           /* Normal weight initially */
    margin-top: 2px;               /* Extra space for visual separation */
}

/* Static text (e.g., "Search all keywords:" and parentheses) should stay unbold and black */
.autocomplete-keywords .static-text {
    color: #000;                   /* Black color */
    font-weight: normal;           /* No bold */
}

/* Styling for the link container */
.keywords-link {
    text-decoration: none;         /* No underline initially */
    color: #777;                   /* Grayish color for the entire link initially */
    font-weight: normal;           /* Normal weight initially */
    transition: color 0.2s, font-weight 0.2s; /* Smooth transition */
}

/* Hover effect for the entire keywords link */
.keywords-link:hover {
    color: #045edd !important;        /* Turn blue on hover */
    font-weight: bold;             /* Bold on hover */
}

/* Static text should remain unaffected when the link is hovered */
.keywords-link:hover .static-text {
    color: black !important;        /* Keep static text black on hover */
    font-weight: normal !important; /* Keep static text normal weight */
}

/* Line 4: Styling for related topics (default grey for static text) */
.autocomplete-related {
    color: black;                    /* Default grey for "Search Related:" */
    font-size: 14px;
    font-weight: normal;
    margin: 2px 0;
}

/* Hover effect for the static text "Search Related:" */
.autocomplete-related:hover .static-text {
    color: #000;                    /* Black on hover */
    font-weight: normal;             /* Keep normal weight */
}

/* Individual related term styling (default grey) */
.autocomplete-related a {
    text-decoration: none;
    color: #777;                    /* Default grey color for terms */
    font-weight: normal;
    margin-right: 5px;              /* Space between terms */
    transition: color 0.2s, font-weight 0.2s; /* Smooth transition */
}

/* Ensure hovered individual terms become black and bold */
.autocomplete-related a:hover {
    color: #045edd !important;         /* Force black on hover */
    font-weight: bold;               /* Bold only the hovered word */
}

/* Prevent any unwanted inheritance from static text */
.autocomplete-related .static-text {
    font-weight: normal;
    color: inherit;
}



/* Ensure the base styles apply uniformly */
.keywords-link, .related-link {
    text-decoration: none;
    color: grey; /* Default color */
    font-weight: normal;
}

/* On hover, both links turn black */
.keywords-link:hover, .related-link:hover {
    color: black; /* Text color turns black */
}

/* Ensure static text stays normal weight and unstyled on hover */
.keywords-link:hover .static-text,
.related-link:hover .static-text {
    font-weight: normal !important;
    text-decoration: none !important;
}

/* Bold only the individual keywords/related terms on hover */
.keywords-link:hover,
.related-link:hover {
    font-weight: normal; /* Prevent the entire link from being bold */
}

.keywords-link:hover span:not(.static-text),
.related-link:hover span:not(.static-text) {
    font-weight: bold; /* Bold only the keywords and related terms */
}

/* Styling for highlighted matches (highlighted via JavaScript logic) */
.highlight {
    color: #045edd;                   /* Text color for highlighted match */
}

.semantic-match {
    color: cadetblue;              /* Color for semantic matches */
}

.related-match {
    color: darkorange;             /* Color for related matches */
}

/* Override default link styles */
a {
    text-decoration: none !important; /* Remove underline for all links by default */
    color: inherit !important;        /* Use inherited color to avoid default blue/purple link colors */
}

/* Enhanced by Google section */
.enhanced-by-google {
    text-align: left;
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

/* Map container */
.maps-container {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
}

.map-container {
    width: 100%;
    height: 400px;
    min-height: 400px; /* Ensures the map container has enough height to render the map */
    /*border: 2px solid #d3d3d3; /* Helps identify the inner map container visually */
}

/* Hide elements initially */
.hidden {
    display: none;
}

/* Google Custom Search Engine (CSE) */
.gcse-searchresults-only, .gsc-resultsbox-visible, .gsc-control-cse {
    text-align: left !important;
    margin-top: 5px; /* Reduce the top margin for the search results */
	max-width: 100%
}

.gsc-resultsRoot {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.gsc-webResult {
    text-align: left;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .search-input-wrapper {
        width: 100%;
    }

    input[type="text"] {
        width: calc(100% - 90px);
    }

	.autocomplete-suggestions {
    	width: 100%;
    	top: 42px;
    	left: 0;
    	max-height: 300px; /* Increase this value to make the scroll box larger */
    	overflow-y: auto; /* Ensure overflow is scrollable */
	}

    .maps-container {
        width: 90% !important; /* Set width less than 100% to allow for centering */
        margin: 0 auto; /* Center the container horizontally */
        display: block; /* Ensure it's treated as a block-level element */
    }

    #map {
        width: 100% !important; /* Override Leaflet styles to ensure full width of container */
        height: 400px; /* Adjust the height as needed */
    }

 /* Ensure consistent font size and line height on mobile */
    .autocomplete-topic span,
    .autocomplete-topic a,
    .autocomplete-keywords,
    .autocomplete-related {
        font-size: 16px; /* Ensure consistent size for better readability */
        line-height: 1; /* Maintain good spacing for touch targets */
    }

    /* Links inside keywords and related terms */
    .keywords-link,
    .related-term {
        font-size: 16px; /* Match font size to parent elements */
        color: #045edd;
        font-weight: bold;
        text-decoration: none;
    }

    .autocomplete-suggestion {
        padding: 10px; /* Improve touch targets */
        border-bottom: 1px solid #ddd; /* Add separation between suggestions */
    }

    /* Autocomplete link (Line 1) */
    .autocomplete-link {
        color: #045edd !important;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
    }

    /* Second line - "Search by topic →" */
    .autocomplete-topic {
        color: black;
        font-weight: normal;
    }

    .topic-link {
        color: #045edd !important;
        /*font-weight: bold;*/
        text-decoration: none;
    }

    /* Third line - "Search keywords →" */
    .autocomplete-keywords .static-text {
        color: black;
        font-weight: normal;
    }

    .autocomplete-keywords .keyword-term {
        color: #045edd !important;
        font-weight: normal !important;
    }

	.autocomplete-related .static-text {
    color: black;
    font-weight: normal;
	}

	.related-term {
    color: #045edd !important;
    /*font-weight: bold !important;*/
    text-decoration: none;
	}
}