{"id":109,"date":"2026-03-15T08:09:01","date_gmt":"2026-03-15T08:09:01","guid":{"rendered":"https:\/\/www.therapservices.net\/blog\/?page_id=109"},"modified":"2026-03-31T13:49:14","modified_gmt":"2026-03-31T13:49:14","slug":"search","status":"publish","type":"page","link":"https:\/\/www.therapservices.net\/blog\/search\/","title":{"rendered":"Search"},"content":{"rendered":"<p><!-- Custom Style -->\r\n\r\n<style type=\"text\/tailwindcss\">\r\n\r\n\r\n    #search input::placeholder {\r\n            color: #000000 !important;\r\n            opacity: 1 !important;\r\n        }\r\n\r\n    #search button {\r\n        color: #0c4c7c !important;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n    }\r\n    \r\n\r\n        div#search input:focus,\r\n        div#search input:focus-visible {\r\n            --tw-ring-color: #fcb831;\r\n            --tw-ring-offset-color: #fcb831;\r\n        }\r\n        \r\n<\/style>\r\n\r\n<header class=\"hero-gradient-top py-2 px-6 lg:px-6\">\r\n    <div class=\"max-w-[1080px] mx-auto flex flex-col md:flex-row items-center justify-between gap-3 md:gap-6\">\r\n\r\n                    <h1 class=\"text-2xl md:text-2xl font-bold text-[#000] font-merriweather leading-[28px]\">\r\n                Search for Therap Blog\r\n            <\/h1>\r\n\r\n            <a href=\"https:\/\/www.therapservices.net\/blog\/\"\r\n                class=\"text-[19px] font-bold font-merriweather leading-[28px] no-underline hover:underline transition-all\"\r\n                style=\"color: #0c4c7c;\">\r\n                Back to Main Blog\r\n            <\/a>\r\n\r\n        \r\n    <\/div>\r\n<\/header><!-- Google Fonts -->\r\n<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&family=Merriweather:wght@400;700;900&display=swap\"\r\n    rel=\"stylesheet\" \/>\r\n\r\n<!-- Font Awesome -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\r\n<!-- Material Symbols -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap\"\r\n    rel=\"stylesheet\" \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap\"\r\n    rel=\"stylesheet\" \/>\r\n<!-- Tailwind CSS -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n\r\n<script id=\"tailwind-config\">\r\n    tailwind.config = {\r\n        darkMode: \"class\",\r\n        theme: {\r\n            extend: {\r\n                colors: {\r\n                    \"inverse-on-surface\": \"#1B365D\",\r\n                    \"surface\": \"#fff\",\r\n                    \"primary\": \"#1B365D\",\r\n                    \"on-surface\": \"#000000\",\r\n                    \"secondary-fixed\": \"#fba555\",\r\n                    \"on-error-container\": \"#93000a\",\r\n                    \"surface-container-highest\": \"#fff\",\r\n                    \"inverse-surface\": \"#1B365D\",\r\n                    \"error\": \"#ba1a1a\",\r\n                    \"on-tertiary-container\": \"#1B365D\",\r\n                    \"secondary-fixed-dim\": \"#FFD25E\",\r\n                    \"surface-dim\": \"#ffd456\",\r\n                    \"surface-container-lowest\": \"#ffffff\",\r\n                    \"on-tertiary\": \"#ffffff\",\r\n                    \"primary-fixed-dim\": \"#1B365D\",\r\n                    \"outline\": \"#b0c4cc\",\r\n                    \"on-tertiary-fixed-variant\": \"#1B365D\",\r\n                    \"surface-variant\": \"#ffd456\",\r\n                    \"secondary\": \"#7f5700\",\r\n                    \"on-primary-fixed-variant\": \"#1B365D\",\r\n                    \"tertiary\": \"#ffd456\",\r\n                    \"on-surface-variant\": \"#1B365D\",\r\n                    \"on-tertiary-fixed\": \"#1B365D\",\r\n                    \"primary-fixed\": \"#ffd456\",\r\n                    \"on-background\": \"#000000\",\r\n                    \"on-secondary\": \"#ffffff\",\r\n                    \"on-primary-container\": \"#1B365D\",\r\n                    \"background\": \"#F0F4E8\",\r\n                    \"error-container\": \"#ffdad6\",\r\n                    \"primary-container\": \"#ffd456\",\r\n                    \"surface-container-high\": \"#ffd456\",\r\n                    \"outline-variant\": \"#b0c4cc\",\r\n                    \"on-secondary-fixed-variant\": \"#1B365D\",\r\n                    \"on-primary-fixed\": \"#1B365D\",\r\n                    \"tertiary-fixed-dim\": \"#ffd456\",\r\n                    \"tertiary-container\": \"#ffd456\",\r\n                    \/\/ \"surface-bright\": \"#F0F4E8\",\r\n                    \"surface-container-low\": \"#ffd456\",\r\n                    \"on-secondary-fixed\": \"#1B365D\",\r\n                    \"surface-tint\": \"#1B365D\",\r\n                    \"tertiary-fixed\": \"#ffd456\",\r\n                    \"secondary-container\": \"#FFD25E\",\r\n                    \"on-error\": \"#ffffff\",\r\n                    \"on-secondary-container\": \"#1B365D\",\r\n                    \"inverse-primary\": \"#ffd456\",\r\n                    \"surface-container\": \"#ffd456\",\r\n                    \"on-primary\": \"#ffffff\"\r\n                },\r\n                fontFamily: {\r\n                    \"headline\": [\"Merriweather\", \"serif\"],\r\n                    \"body\": [\"Inter\", \"sans-serif\"],\r\n                    \"label\": [\"Inter\", \"sans-serif\"]\r\n                },\r\n\r\n                borderRadius: { \"DEFAULT\": \"0.125rem\", \"lg\": \"0.25rem\", \"xl\": \"0.5rem\", \"full\": \"0.75rem\" },\r\n            },\r\n        },\r\n    }\r\n<\/script>\r\n<!-- Custom Style -->\r\n<style type=\"text\/tailwindcss\">\r\n    @theme {\r\n            --color-therap-blue: #0c4c7c;\r\n            --color-therap-orange: #FFD25E;\r\n            --color-therap-light: #F0F4E8;\r\n            --color-therap-tag: #D5E8C4;\r\n            --color-quote-1: #ffecca;\r\n            --color-quote-2: #ffe3b2;\r\n            --color-border-orange: #ffd53d;\r\n            --color-border-blue: #00437c;\r\n            --font-merriweather: \"Merriweather\", serif;\r\n            --font-lato: \"Lato\", sans-serif;\r\n            --font-inter: \"Inter\", sans-serif;\r\n\r\n            \/* Custom shades for 'black' to support manual edits *\/\r\n            --color-black-100: #000;\r\n            --color-black-200: #000;\r\n            --color-black-300: #000;\r\n            --color-black-400: #000;\r\n            --color-black-500: #000;\r\n            --color-black-600: #000;\r\n            --color-black-700: #000;\r\n            --color-black-800: #000;\r\n            --color-black-900: #000;\r\n        }\r\n\r\n        .nav-gradient {\r\n            @apply shadow-sm;\r\n            background: linear-gradient(90deg, #ffce6f 0%, #fff2c5 50%, #ffce6f 100%);\r\n        }\r\n\r\n        .hero-gradient-top {\r\n            @apply pb-4 pt-4 px-6 lg:px-12;\r\n            background: linear-gradient(90deg, rgb(255 214 62) 0%, rgb(255 214 62) 45%, #ffd63e 100% 100%);\r\n        }\r\n\r\n\r\n        .header-gradient {\r\n            @apply pb-12 pt-12 px-6 lg:px-12;\r\n            background: linear-gradient(90deg, #ffce6f 0%, #fff2c5 50%, #ffce6f 100%);\r\n        }\r\n\r\n        @media screen and (max-width: 768px) {            \r\n            .header-gradient {\r\n                @apply pb-8 pt-8 px-6 lg:px-12;\r\n                background: linear-gradient(90deg, #ffce6f 0%, #fff2c5 50%, #ffce6f 100%);\r\n            }\r\n        }\r\n    <\/style>\r\n<style>\r\n    .material-symbols-outlined {\r\n        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n        display: inline-block;\r\n        line-height: 1;\r\n        text-transform: none;\r\n        letter-spacing: normal;\r\n        word-wrap: normal;\r\n        white-space: nowrap;\r\n        direction: ltr;\r\n    }\r\n\r\n    .tonal-shift-bg {\r\n        background-color: #f3fbff;\r\n    }\r\n\r\n    .glass-nav {\r\n        backdrop-filter: blur(20px);\r\n    }\r\n\r\n    .category-btn.active {\r\n        @apply bg-[#ffd456] text-primary border-primary;\r\n    }\r\n\r\n    #main-search-input::placeholder {\r\n        color: #000000 !important;\r\n        opacity: 1 !important;\r\n    }\r\n\r\n    .tag-pill {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        padding: 0.375rem 1rem;\r\n        padding-top: 0.55rem;\r\n        background-color: #dfebbf !important;\r\n        border-radius: 0.375rem;\r\n        font-size: 17px;\r\n        font-weight: 700;\r\n        color: #1B365D !important;\r\n        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n        text-decoration: none;\r\n        border: none;\r\n    }\r\n\r\n    .tag-pill:hover {\r\n        \/* background-color: #1B365D !important; *\/\r\n        \/* color: #ffffff !important; *\/\r\n    }\r\n\r\n    .tag-pill:hover img {\r\n        filter: brightness(0) invert(1);\r\n    }\r\n\r\n    article.result-item p {\r\n        color: #000 !important;\r\n    }\r\n\r\n    #no-results {\r\n        display: none;\r\n    }\r\n\r\n    @keyframes fadeInUp {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n        }\r\n\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    .result-item {\r\n        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n        opacity: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 Pagination Numbers \u2500\u2500\u2500 *\/\r\n    .page-num,\r\n    .page-nav {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 2.5rem;\r\n        height: 2.5rem;\r\n        border-radius: 10px;\r\n        \/* border: 2px solid #1B365D; *\/\r\n        color: #1B365D;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        transition: all 0.2s;\r\n        user-select: none;\r\n        background: transparent;\r\n    }\r\n\r\n    .page-num.active {\r\n        background-color: #ffd456;\r\n        border-color: #1B365D;\r\n        color: #1B365D;\r\n        cursor: default;\r\n    }\r\n\r\n    .page-num:not(.active):hover,\r\n    .page-nav:hover {\r\n        background-color: #fff8e0;\r\n        color: #1B365D;\r\n    }\r\n\r\n    .page-nav.disabled {\r\n        opacity: 0.3;\r\n        cursor: not-allowed;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .pagination-ellipsis {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 2rem;\r\n        color: #1B365D;\r\n        font-weight: 700;\r\n    }\r\n\tbutton.category-btn.active {\r\n\t\tbackground-color: #ffd456;\r\n\t}\r\n<\/style>\r\n\r\n<div class=\"bg-surface text-on-surface font-body min-h-screen flex flex-col\">\r\n    <!-- TopNavBar -->\r\n    <main class=\"flex-grow pt-10 md:pt-16 pb-20 px-6 max-w-6xl mx-auto w-full\">\r\n        <!-- Search Hero Section -->\r\n        <section class=\"mb-12\">\r\n            <div>\r\n                <!-- <h1 class=\"font-headline font-extrabold text-4xl mb-8 text-primary  max-w-4xl\" style=\"color: #000;\">\r\n                    Search for Therap\r\n                    Blog<\/h1>\r\n                Search Box -->\r\n                <div class=\"flex flex-col sm:flex-row gap-4  max-w-4xl\">\r\n                    <div class=\"relative flex-grow group flex items-center\">\r\n                        <div class=\"absolute inset-y-0 left-5 flex items-center pointer-events-none text-outline\">\r\n                            <span class=\"material-symbols-outlined\">search<\/span>\r\n                        <\/div>\r\n                        <input id=\"main-search-input\"\r\n                            class=\"w-full pl-14 pr-5 py-3 bg-surface-container-highest border-[rgb(252,184,49)] rounded-xl text-lg font-body transition-all placeholder-black placeholder-opacity-100\"\r\n                            placeholder=\"Enter words or keywords to search\" type=\"text\" \/>\r\n                    <\/div>\r\n                    <button id=\"main-search-btn\"\r\n                        class=\"text-lg px-10 py-3 bg-secondary-fixed text-primary font-headline font-extrabold rounded-xl hover:opacity-90 transition-all active:scale-95 shadow-md whitespace-nowrap\">\r\n                        Search\r\n                    <\/button>\r\n                <\/div>\r\n                <!-- Categories -->\r\n                <div class=\"mt-10\">\r\n                    <h2 class=\"font-label text-2xl font-bold text-on-surface-variant mb-5\" style=\"color: #000;\">\r\n                        Search by Categories:<\/h2>\r\n                    <div class=\"flex flex-wrap gap-3\" id=\"category-filters\">\r\n                        <button data-category=\"\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">All<\/button>\r\n                        <button data-category=\"Artificial Intelligence\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Artificial\r\n                            Intelligence<\/button>\r\n                        <button data-category=\"Billing\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Billing<\/button>\r\n                        <button data-category=\"Data & Analytics\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Data\r\n                            &amp; Analytics<\/button>\r\n                        <button data-category=\"Electronic Documentation\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Electronic\r\n                            Documentation<\/button>\r\n                        <button data-category=\"Health & Medical\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Health\r\n                            &amp; Medical<\/button>\r\n                        <button data-category=\"Person-Centered Tools\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Person-Centered\r\n                            Tools<\/button>\r\n                        <button data-category=\"Therap Connect\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Therap\r\n                            Connect<\/button>\r\n                        <button data-category=\"Therap Events\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Therap\r\n                            Events<\/button>\r\n                        <button data-category=\"User Story\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">User\r\n                            Story<\/button>\r\n                        <button data-category=\"Video Documentation\"\r\n                            class=\"category-btn px-5 py-2.5 bg-[#fff8e0] border border-primary text-primary font-body font-semibold text-lg rounded-full hover:bg-[#ffd456] transition-all duration-200\">Video\r\n                            Documentation<\/button>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- Results Status Bar -->\r\n        <div class=\"mb-6 flex justify-between items-end\">\r\n            <h2 class=\"font-label text-xl font-bold text-on-surface-variant\" style=\"color: #000;\">\r\n                Showing results for: \"<span id=\"search-query-display\" class=\" text-primary\" style=\"color: #000;\">All\r\n                    Articles<\/span>\"\r\n                <span class=\"lowercase ml-2\">(<span id=\"result-count\" class=\"font-bold\">...<\/span> <span\r\n                        id=\"result-label\" class=\"lowercase\">blogs<\/span> found)<\/span>\r\n            <\/h2>\r\n        <\/div>\r\n        <!-- Results Grid -->\r\n        <section id=\"results-grid\" class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n            <!-- Dynamic Results will be injected here -->\r\n        <\/section>\r\n\r\n        <!-- No Results State -->\r\n        <div id=\"no-results\"\r\n            class=\"text-center py-20 bg-surface-container-lowest rounded-xl shadow-[0_4px_24px_rgba(12,30,36,0.06)] mt-8\">\r\n            <!-- <span class=\"material-symbols-outlined text-6xl text-outline-variant mb-4\">search_off<\/span> -->\r\n            <h3 class=\"text-2xl font-bold text-primary mb-3 font-headline\" style=\"color: #000;\">No results found<\/h3>\r\n            <p class=\"text-on-surface-variant mb-2\" style=\"color: #000;\">We couldn't find any articles matching \"<span\r\n                    id=\"no-results-query\" class=\"font-semibold text-primary\"><\/span>\".<\/p>\r\n            <p class=\"text-on-surface-variant\" style=\"color: #000;\">Try a different keyword or browse all topics above.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"mt-16 flex flex-wrap justify-center items-center gap-2\" id=\"pagination-container\"\r\n            style=\"display: none;\">\r\n            <!-- Prev Page -->\r\n            <button id=\"page-prev\" class=\"page-nav\" title=\"Previous Page\">\r\n                <i class=\"fa-solid fa-angle-left\"><\/i>\r\n            <\/button>\r\n\r\n            <!-- Dynamic Page Numbers -->\r\n            <div id=\"pagination-numbers\" class=\"flex items-center gap-2\"><\/div>\r\n\r\n            <!-- Next Page -->\r\n            <button id=\"page-next\" class=\"page-nav\" title=\"Next Page\">\r\n                <i class=\"fa-solid fa-angle-right\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n    <\/main>\r\n\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n    <script>\r\n        $(document).ready(function () {\r\n            const searchInput = $('#main-search-input');\r\n            const searchBtn = $('#main-search-btn');\r\n            const resultsGrid = $('#results-grid');\r\n            const noResults = $('#no-results');\r\n            const noResultsQuery = $('#no-results-query');\r\n            const resultCount = $('#result-count');\r\n            const searchQueryDisplay = $('#search-query-display');\r\n            const paginationContainer = $('#pagination-container');\r\n            const paginationNumbers = $('#pagination-numbers');\r\n            const categoryBtns = $('.category-btn');\r\n\r\n            let activeQuery = '';\r\n            \/\/ Default to 'all' to search across titles, content, tags, and categories\r\n            let activeFilter = 'all';\r\n            let activeCategory = '';\r\n\r\n            let currentPage = 1;\r\n            let currentTotalPages = 1;\r\n            let searchTimeout;\r\n\r\n            \/\/ Initialize from URL parameters\r\n            const urlParams = new URLSearchParams(window.location.search);\r\n            const initialQ = urlParams.get('q') || '';\r\n            const initialCat = urlParams.get('category') || '';\r\n\r\n            \/\/ List of known filter buckets from the API\r\n            const buckets = ['category', 'tag', 'title', 'content', 'all'];\r\n\r\n            const knownCats = categoryBtns.map(function () { return $(this).data('category'); }).get().filter(c => c);\r\n\r\n            if (initialCat === 'category' && knownCats.includes(initialQ)) {\r\n                \/\/ Handle legacy format: ?q=CategoryName&category=category\r\n                activeFilter = 'category';\r\n                activeQuery = '';\r\n                activeCategory = initialQ;\r\n                setActiveCategoryBtn(activeCategory);\r\n            } else if (!initialCat && knownCats.includes(initialQ)) {\r\n                \/\/ If it's a perfect category match from an inner page link, treat as Category Browse\r\n                activeFilter = 'category';\r\n                activeQuery = ''; \/\/ Clear query so we show \"Totals\" and don't limit results\r\n                activeCategory = initialQ;\r\n                setActiveCategoryBtn(activeCategory);\r\n            } else if (buckets.includes(initialCat)) {\r\n                activeFilter = initialCat;\r\n                activeQuery = initialQ;\r\n            } else if (initialCat) {\r\n                activeFilter = 'category';\r\n                activeQuery = initialQ;\r\n                activeCategory = initialCat;\r\n                setActiveCategoryBtn(activeCategory);\r\n            } else {\r\n                activeFilter = 'all';\r\n                activeQuery = initialQ;\r\n            }\r\n\r\n\r\n\r\n\r\n\r\n            if (activeQuery) {\r\n                searchInput.val(activeQuery);\r\n            }\r\n\r\n            \/\/ Fetch initial results\r\n            fetchResults(activeQuery, activeFilter, currentPage, true);\r\n\r\n            function setActiveCategoryBtn(catName) {\r\n                categoryBtns.removeClass('active');\r\n                if (catName === '' || catName === undefined || catName === null) {\r\n                    categoryBtns.filter('[data-category=\"\"]').addClass('active');\r\n                } else {\r\n                    categoryBtns.filter(`[data-category=\"${catName}\"]`).addClass('active');\r\n                }\r\n            }\r\n\r\n\r\n            \/* \u2500\u2500\u2500 Fetch Data from WordPress \u2500\u2500\u2500 *\/\r\n            \/\/ resetGrid = true when searching fresh, false when loading more\r\n            function fetchResults(query = '', filterBy = 'title', page = 1, resetGrid = true) {\r\n                if (resetGrid) {\r\n                    resultsGrid.css('opacity', '0.5');\r\n                }\r\n\r\n                $.ajax({\r\n                    url: '\/blog\/wp-admin\/admin-ajax.php',\r\n                    type: 'GET',\r\n                    data: {\r\n                        action: 'get_search_results',\r\n                        s: query,\r\n                        filter_by: filterBy,\r\n                        category: activeCategory, \/\/ Send active category for combined filtering\r\n                        paged: page\r\n                    },\r\n\r\n                    success: function (response) {\r\n                        resultsGrid.css('opacity', '1');\r\n                        if (response.success) {\r\n                            renderResults(response.data.posts, resetGrid);\r\n                            updateUI(response.data, page);\r\n                        }\r\n                    },\r\n                    error: function () {\r\n                        resultsGrid.css('opacity', '1');\r\n                        console.error('Search failed');\r\n                    }\r\n                });\r\n            }\r\n\r\n            \/* \u2500\u2500\u2500 Render Results to Grid \u2500\u2500\u2500 *\/\r\n            function renderResults(posts, resetGrid) {\r\n                if (resetGrid) {\r\n                    resultsGrid.empty();\r\n                }\r\n\r\n                if (posts.length === 0 && resetGrid) {\r\n                    resultsGrid.hide();\r\n                    noResults.show();\r\n                    noResultsQuery.text(activeQuery || activeCategory);\r\n                    return;\r\n                }\r\n\r\n                noResults.hide();\r\n                resultsGrid.show();\r\n\r\n                posts.forEach((post, index) => {\r\n                    \/\/ Generate HTML for actual tags cleanly, avoiding duplicates of the category itself\r\n                    let tagsHTML = '';\r\n                    if (post.tags && post.tags.length > 0) {\r\n                        tagsHTML = post.tags\r\n                            .filter(t => t.toLowerCase() !== (post.category || '').toLowerCase())\r\n                            .map(tag => `\r\n                                <a href=\"\/blog\/search\/?q=${encodeURIComponent(tag)}&category=tag\" class=\"tag-pill\" title=\"Search for ${tag}\">\r\n                                     <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/www.therapservices.net\/images\/therap-blog\/tag-icon.svg\" alt=\"tag\" class=\"lazyload w-3 h-3 mr-2 mb-auto mt-0.5\"> \r\n                                    ${tag}\r\n                                <\/a>\r\n                            `).join('');\r\n                    }\r\n\r\n                    const card = `\r\n                    <article\r\n                        class=\"result-item bg-surface-container-lowest p-8 rounded-xl shadow-[0_4px_24px_rgba(12,30,36,0.06)] hover:translate-y-[-4px] transition-transform flex flex-col h-full\">\r\n                        <div class=\"flex flex-wrap justify-between items-center gap-2 mb-4\">\r\n                            <a href=\"\/blog\/search\/?q=${encodeURIComponent(post.category)}&category=category\" class=\"tag-pill\" title=\"Search for ${post.category}\">\r\n                                 ${post.category || 'Therap Blog'}\r\n                            <\/a>\r\n                            <!-- <span class=\"font-label text-xs text-on-surface-variant whitespace-nowrap\">${post.date || ''}<\/span> -->\r\n                        <\/div>\r\n                        <a class=\"text-primary font-semibold text-lg flex items-center gap-2 group w-max max-w-full\" href=\"${post.url}\">\r\n                            <h3 class=\"font-headline font-bold text-xl text-primary mb-3 leading-relaxed line-clamp-3 flex flex-wrap max-w-full\">\r\n                                ${post.title}                        \r\n                            <\/h3>\r\n                        <\/a>\r\n                        \r\n                        <p class=\"text-on-surface-variant text-lg leading-relaxed mb-6 line-clamp-4\">${post.excerpt}<\/p>\r\n                        \r\n                        <!-- Tags List (only shown if present) -->\r\n                        <div class=\"flex flex-wrap gap-2 mb-6\">\r\n                            ${tagsHTML}\r\n                        <\/div>\r\n\r\n                        <div class=\"mt-auto\">\r\n                            <a class=\"text-primary font-semibold text-lg flex items-center gap-2 group w-max\" href=\"${post.url}\">\r\n                                Read More\r\n                                <span class=\"material-symbols-outlined text-lg transition-transform group-hover:translate-x-1\">arrow_forward<\/span>\r\n                            <\/a>\r\n                        <\/div>\r\n                    <\/article>`;\r\n                    resultsGrid.append(card);\r\n                });\r\n            }\r\n\r\n            function updateUI(data, page) {\r\n                currentTotalPages = data.total_pages;\r\n                currentPage = page;\r\n                resultCount.text(data.total_posts);\r\n                $('#result-label').text(data.total_posts === 1 ? 'blog' : 'blogs');\r\n                searchQueryDisplay.text(activeQuery || activeCategory || 'All Articles');\r\n\r\n                \/\/ Update category counts dynamically\r\n                categoryBtns.each(function () {\r\n                    const catName = $(this).data('category');\r\n                    let count = 0;\r\n                    let label = catName || 'All';\r\n                    if (catName === '') {\r\n                        \/\/ \"All\" button shows Grand Total when browsing, or Search Match Total when searching\r\n                        if (data.query === '') {\r\n                            \/\/ Total of everything (could use counts.all from backend if it returns total articles)\r\n                            count = data.counts.all || data.total_posts;\r\n                        } else {\r\n                            count = (data.counts && data.counts.all) ? data.counts.all : data.total_posts;\r\n                        }\r\n                    } else {\r\n                        \/\/ Category buttons show 'Total articles' when browsing, and 'Matches' when searching\r\n                        if (data.query === '') {\r\n                            count = (data.total_category_counts && data.total_category_counts[catName]) ? data.total_category_counts[catName] : 0;\r\n                        } else {\r\n                            count = (data.category_counts && data.category_counts[catName]) ? data.category_counts[catName] : 0;\r\n                        }\r\n                    }\r\n\r\n\r\n                    $(this).text(`${label} (${count})`);\r\n                });\r\n\r\n\r\n\r\n                if (currentTotalPages > 1) {\r\n                    paginationContainer.show();\r\n                    renderPagination(currentTotalPages, currentPage);\r\n                } else {\r\n                    paginationContainer.hide();\r\n                }\r\n            }\r\n\r\n            function renderPagination(totalPages, current) {\r\n                paginationNumbers.empty();\r\n\r\n                \/\/ Navigation button states\r\n                $('#page-prev').toggleClass('disabled', current === 1);\r\n                $('#page-next').toggleClass('disabled', current === totalPages);\r\n\r\n                \/\/ Helper to add a page button\r\n                const addPage = (p) => {\r\n                    const btn = $(`<button class=\"page-num ${p === current ? 'active' : ''}\">${p}<\/button>`);\r\n                    btn.on('click', () => goToPage(p));\r\n                    paginationNumbers.append(btn);\r\n                };\r\n\r\n                \/\/ Helper to add ellipses\r\n                const addEllipses = () => {\r\n                    paginationNumbers.append('<span class=\"pagination-ellipsis\">...<\/span>');\r\n                };\r\n\r\n                \/\/ Logic for showing page numbers\r\n                if (totalPages <= 7) {\r\n                    for (let i = 1; i <= totalPages; i++) addPage(i);\r\n                } else {\r\n                    addPage(1);\r\n\r\n                    if (current > 4) addEllipses();\r\n\r\n                    const start = Math.max(2, current - 2);\r\n                    const end = Math.min(totalPages - 1, current + 2);\r\n\r\n                    for (let i = start; i <= end; i++) addPage(i);\r\n\r\n                    if (current < totalPages - 3) addEllipses();\r\n\r\n                    addPage(totalPages);\r\n                }\r\n            }\r\n\r\n            function goToPage(page) {\r\n                if (page < 1 || page > currentTotalPages || page === currentPage) return;\r\n                currentPage = page;\r\n                fetchResults(activeQuery, activeFilter, currentPage, true);\r\n                window.scrollTo({ top: resultsGrid.offset().top - 100, behavior: 'smooth' });\r\n            }\r\n\r\n            function updateURL(query, filter) {\r\n                const params = new URLSearchParams();\r\n                const buckets = ['category', 'tag', 'title', 'content', 'all'];\r\n\r\n\r\n                if (query) params.set('q', query);\r\n                if (filter && buckets.includes(filter)) {\r\n                    params.set('category', filter);\r\n                }\r\n\r\n                const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');\r\n                window.history.pushState({ path: newUrl }, '', newUrl);\r\n            }\r\n\r\n            \/* \u2500\u2500\u2500 Event Listeners \u2500\u2500\u2500 *\/\r\n\r\n            \/\/ Text Search Input\r\n            searchInput.on('input', function () {\r\n                clearTimeout(searchTimeout);\r\n                searchTimeout = setTimeout(() => {\r\n                    activeQuery = $(this).val();\r\n                    activeCategory = '';\r\n                    \/\/ Default to 'all' for general text search\r\n                    activeFilter = 'all';\r\n                    setActiveCategoryBtn('');\r\n\r\n                    currentPage = 1;\r\n                    fetchResults(activeQuery, activeFilter, currentPage, true);\r\n                    updateURL(activeQuery, activeFilter);\r\n                }, 500);\r\n            });\r\n\r\n            \/\/ Text Search Button\r\n            searchBtn.on('click', function () {\r\n                activeQuery = searchInput.val();\r\n                activeCategory = '';\r\n                activeFilter = 'all';\r\n                setActiveCategoryBtn('');\r\n\r\n                currentPage = 1;\r\n                fetchResults(activeQuery, activeFilter, currentPage, true);\r\n                updateURL(activeQuery, '');\r\n            });\r\n\r\n            searchInput.on('keypress', function (e) {\r\n                if (e.which === 13) {\r\n                    e.preventDefault();\r\n                    searchBtn.click();\r\n                }\r\n            });\r\n\r\n            \/\/ Category Button Clicks\r\n            categoryBtns.on('click', function () {\r\n                const catName = $(this).data('category') || '';\r\n\r\n                \/\/ Toggle off if already active\r\n                if (catName === '') {\r\n                    \/\/ Clicking \"All\" always resets to broad search\r\n                    activeCategory = '';\r\n                    setActiveCategoryBtn('');\r\n                } else if ($(this).hasClass('active')) {\r\n                    activeCategory = '';\r\n                    setActiveCategoryBtn('');\r\n                } else {\r\n                    activeCategory = catName;\r\n                    setActiveCategoryBtn(catName);\r\n                }\r\n\r\n                \/\/ Keep the current search query if present\r\n                activeQuery = searchInput.val();\r\n\r\n\r\n                currentPage = 1;\r\n                fetchResults(activeQuery, activeFilter, currentPage, true);\r\n                updateURL(activeQuery, activeFilter);\r\n            });\r\n\r\n            \/\/ Pagination Arrow Clicks\r\n            $('#page-prev').on('click', () => goToPage(currentPage - 1));\r\n            $('#page-next').on('click', () => goToPage(currentPage + 1));\r\n        });\r\n    <\/script>\r\n<\/div><style type=\"text\/tailwindcss\">\r\n    @theme {\r\n        --color-therap-blue: #0c4c7c;\r\n        --color-therap-orange: #FFD25E;\r\n        --color-therap-light: #F0F4E8;\r\n        --color-therap-tag: #D5E8C4;\r\n        --color-quote-1: #ffecca;\r\n        --color-quote-2: #ffe3b2;\r\n        --color-border-orange: #ffd53d;\r\n        --color-border-blue: #00437c;\r\n        --font-merriweather: \"Merriweather\", serif;\r\n        --font-lato: \"Lato\", sans-serif;\r\n        --font-inter: \"Inter\", sans-serif;\r\n\r\n        \/* Custom shades for 'black' to support manual edits *\/\r\n        --color-black-100: #000;\r\n        --color-black-200: #000;\r\n        --color-black-300: #000;\r\n        --color-black-400: #000;\r\n        --color-black-500: #000;\r\n        --color-black-600: #000;\r\n        --color-black-700: #000;\r\n        --color-black-800: #000;\r\n        --color-black-900: #000;\r\n    }\r\n\r\n    @layer base {\r\n        body {\r\n            @apply font-inter bg-white text-[#000] leading-relaxed;\r\n        }\r\n\r\n        h1,\r\n        h2,\r\n        h3,\r\n        h4 {\r\n            @apply font-merriweather text-therap-blue;\r\n            line-height: 1.7 !important;\r\n        }\r\n\r\n        p {\r\n            @apply mb-6 text-black-700;\r\n        }\r\n    }\r\n\r\n    .post-content>p {\r\n        display: none;\r\n    }\r\n\r\n    .cta-section p {\r\n        line-height: 1.7;\r\n    }\r\n\r\n    a.special-btn {\r\n        font-size: 18px;\r\n    }\r\n\r\n    \/* Targets the exact class combination of your meta div *\/\r\n    div[class=\"flex items-center gap-2 font-bold\"] {\r\n        flex-wrap: wrap;\r\n    }\r\n    \/* tag footer removed *\/\r\n    section.tags.myt-5.mb-24 {\r\n        display: none;\r\n    }\r\n\theader.header-gradient {\r\n    padding-top: 1.5rem;\r\n    padding-bottom: 1.5rem;\r\n}\r\n\r\n    \/* Added Media Query for screens under 767px *\/\r\n    @media (max-width: 767px) {\r\n        .header-gradient h1 br {\r\n            display: none;\r\n        }\r\n\r\n        .content-area .mt-10.w-full,\r\n        .content-area .mt-12.block {\r\n            margin-top: 2rem;\r\n            margin-bottom: 2rem;\r\n        }   \r\n\r\n        section.max-w-\\[600px\\] h2 {\r\n            margin-top: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .content-area h2.mt-12 {\r\n            margin-top: 3rem;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\t\t.quote-box-1, .quote-box-2 {\r\n            padding: 30px 25px;\r\n        }\r\n\t\tsvg.quote-icon.-left-12.-top-4.w-12.h-9.scale-x-\\[-1\\],svg.quote-icon.-left-24.-top-6.w-16.h-12.scale-x-\\[-1\\] {\r\n    width: 30px;\r\n    height: 35px;\r\n    left: -12px;\r\n    top: -30px;\r\n}\r\nsvg.quote-icon.-right-12.-bottom-4.w-12.h-10,svg.quote-icon.-right-24.-bottom-6.w-16.h-12 {\r\n    width: 30px;\r\n    height: 35px;\r\n    right: -12px;\r\n    bottom: -30px;\r\n}\r\n    }\r\n<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":309,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-109","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Therap Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.therapservices.net\/blog\/search\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Therap Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.therapservices.net\/blog\/search\/\" \/>\n<meta property=\"og:site_name\" content=\"blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/therapservices\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-31T13:49:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@therapservices\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.therapservices.net\/blog\/search\/\",\"url\":\"https:\/\/www.therapservices.net\/blog\/search\/\",\"name\":\"Therap Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.therapservices.net\/blog\/#website\"},\"datePublished\":\"2026-03-15T08:09:01+00:00\",\"dateModified\":\"2026-03-31T13:49:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.therapservices.net\/blog\/search\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.therapservices.net\/blog\/search\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.therapservices.net\/blog\/search\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.therapservices.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Search\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.therapservices.net\/blog\/#website\",\"url\":\"https:\/\/www.therapservices.net\/blog\/\",\"name\":\"blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.therapservices.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.therapservices.net\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.therapservices.net\/blog\/#organization\",\"name\":\"Therap Services LLC.\",\"url\":\"https:\/\/www.therapservices.net\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.therapservices.net\/blog\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Therap Services LLC.\"},\"image\":{\"@id\":\"https:\/\/www.therapservices.net\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/www.facebook.com\/therapservices\",\"https:\/\/x.com\/therapservices\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Therap Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.therapservices.net\/blog\/search\/","og_locale":"en_US","og_type":"article","og_title":"Therap Blog","og_url":"https:\/\/www.therapservices.net\/blog\/search\/","og_site_name":"blog","article_publisher":"http:\/\/www.facebook.com\/therapservices","article_modified_time":"2026-03-31T13:49:14+00:00","twitter_card":"summary_large_image","twitter_site":"@therapservices","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.therapservices.net\/blog\/search\/","url":"https:\/\/www.therapservices.net\/blog\/search\/","name":"Therap Blog","isPartOf":{"@id":"https:\/\/www.therapservices.net\/blog\/#website"},"datePublished":"2026-03-15T08:09:01+00:00","dateModified":"2026-03-31T13:49:14+00:00","breadcrumb":{"@id":"https:\/\/www.therapservices.net\/blog\/search\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.therapservices.net\/blog\/search\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.therapservices.net\/blog\/search\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.therapservices.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Search"}]},{"@type":"WebSite","@id":"https:\/\/www.therapservices.net\/blog\/#website","url":"https:\/\/www.therapservices.net\/blog\/","name":"blog","description":"","publisher":{"@id":"https:\/\/www.therapservices.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.therapservices.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.therapservices.net\/blog\/#organization","name":"Therap Services LLC.","url":"https:\/\/www.therapservices.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.therapservices.net\/blog\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Therap Services LLC."},"image":{"@id":"https:\/\/www.therapservices.net\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/www.facebook.com\/therapservices","https:\/\/x.com\/therapservices"]}]}},"_links":{"self":[{"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/pages\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/users\/309"}],"replies":[{"embeddable":true,"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":7,"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/pages\/109\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/pages\/109\/revisions\/288"}],"wp:attachment":[{"href":"https:\/\/www.therapservices.net\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}