{"id":8197,"date":"2025-09-15T13:59:07","date_gmt":"2025-09-15T13:59:07","guid":{"rendered":"https:\/\/www.njfuture.org\/?page_id=8197"},"modified":"2025-09-18T21:00:48","modified_gmt":"2025-09-18T21:00:48","slug":"resources","status":"publish","type":"page","link":"https:\/\/www.njfuture.org\/resources\/","title":{"rendered":"Resources"},"content":{"rendered":"\n<div class=\"bg-brand-jersey-blue text-white relative mb-10 overflow-hidden\">\n  <div class=\"container py-10 md:py-36 relative\">\n        <div\n      class=\"uppercase w-full md:w-[42%] font-gotham\">\n              <h2 class=\"text-3xl text-brand-grey\">Resources<\/h2>\n                    <h2 class=\"text-h2 md:text-h1 font-bold mt-6\">\n          Research That Drives Change        <\/h2>\n          <\/div>\n  <\/div>\n\n      <div class=\"max-md:hidden absolute top-0 h-full w-[50%] right-0\"\n      style=\"background-image: url('https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Our-publications-1-_-NJF.jpg'); background-size: cover; background-position: top; background-repeat: no-repeat;\">\n      <!-- w-[26.875rem] -->\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Frame-1261152805.svg\" alt=\"hero-banner-vector\"\n        class=\"object-cover object-left absolute top-0 left-0 w-full h-full lg:h-full lg:w-auto   without-contrast-wave-image block\">\n\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Frame-1261152805-1.svg\" alt=\"hero-banner-vector\"\n        class=\"object-cover object-left absolute top-0 left-0 w-full h-full lg:h-full lg:w-auto contrast-wave-image hidden\">\n    <\/div>\n    <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Our-publications-1-_-NJF.jpg\" alt=\"hero-banner-image\"\n      class=\"md:hidden w-full object-contain object-center h-[22rem]\">\n      <\/div>\n\n\n\n<section data-testid=\"title-and-text\" class=\"container mb-10 title-and-text\">\n            <div class=\"htmlBlock text-brand-black jury_desc font-gotham font-normal mt-4\">\n         <p><strong>New Jersey Future<\/strong> produces cutting-edge, data-driven research on climate resilience, transportation, housing, demographics, and more in the Garden State.<\/p>\n      <\/div>\n      <\/section>\n\n\n<section data-testid=\"section-resource-cards\" class=\"resource-cards w-full bg-white mb-10\">\n  <div class=\"bg-brand-light-steel-blue py-[1.875rem] \">\n    <div class=\"container\">\n      <h2 class=\"font-gotham text-h2 font-medium  text-white mb-6 text-center\">\n        BROWSE LIBRARY      <\/h2>\n\n      <!-- Filters -->\n      <div class=\"flex flex-wrap gap-5 justify-center items-center mb-6 \">\n        <button\n          class=\"filter-btn font-tradeGothic transition-all !text-p1 font-normal bg-white text-brand-slate-grey px-4 py-2 rounded-full hover:bg-white hover:text-brand-slate-grey hover:px-4\"\n          data-filter=\"all\">All<\/button>\n                  <div class=\"w-[.0625rem] h-6 bg-white\"><\/div>\n          <button\n            class=\"filter-btn font-tradeGothic !text-p1 font-normal transition-all text-white py-2 rounded-full hover:bg-white hover:text-brand-slate-grey hover:px-4\"\n            data-filter=\"case-study\">\n            Case Study          <\/button>\n                  <div class=\"w-[.0625rem] h-6 bg-white\"><\/div>\n          <button\n            class=\"filter-btn font-tradeGothic !text-p1 font-normal transition-all text-white py-2 rounded-full hover:bg-white hover:text-brand-slate-grey hover:px-4\"\n            data-filter=\"intern-report\">\n            Intern Report          <\/button>\n              <\/div>\n\n      <div\n        class=\"w-full flex flex-col xsm:flex-row xsm:flex-wrap lg:flex-nowrap justify-center items-stretch gap-4 lg:gap-8\">\n        <!-- Search form with clear button and search icon -->\n        <div\n          class=\"bg-white flex items-center gap-2 w-full xsm:!w-[48%] lg:w-[24.0625rem] overflow-hidden rounded relative px-6 py-4\">\n          <input type=\"text\" id=\"searchInput\"\n            class=\"w-full h-full font-tradeGothic py-2 ring-0 outline-0 placeholder:text-brand-slate-grey text-brand-slate-grey text-p2\"\n            placeholder=\"Search by Keyword\" \/>\n\n          <!-- Clear search button -->\n          <img decoding=\"async\"\n            src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Button_-Close.svg\"\n            style=\"display: none;\" alt=\"cross\" id=\"cross-search-icon\" style=\"display:none;\"\n            class=\"w-7 h-7 my-2 clear-search\" \/>\n\n          <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Search.svg\"\n            class=\"w-9 shrink-0 block search-icon-blue\" id=\"search-icon\" alt=\"Search\">\n        <\/div>\n\n        <!-- resource issue area -->\n        <div\n          class=\"bg-white flex items-end w-full xsm:!w-[48%] lg:w-[24.0625rem] px-6 py-6 rounded relative filter-button selected-option cursor-pointer\"\n          id=\"resource-issue-area-select\">\n          <div class=\"w-full h-full\">\n            <div\n              class=\"flex justify-between items-center cursor-pointer text-brand-slate-grey font-tradeGothic text-p2 h-full\">\n              <span class=\"selected-text font-tradeGothic text-p2 text-brand-slate-grey\">By Issue Area<\/span>\n              <!-- Clear topic Icon -->\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Button_-Close.svg\"\n                id=\"resource-issue-area-cross-icon\" style=\"display: none;\" alt=\"cross\" class=\"w-7 h-7\" \/>\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/ArrowDown.svg\"\n                alt=\"Dropdown\" id=\"resource-issue-area-select-icon\"\n                class=\"w-7 h-7 shrink-0 transform transition-transform\">\n\n            <\/div>\n            <div id=\"resource-issue-area-options-container\"\n              class=\"absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-50 hidden max-h-[20rem] overflow-y-scroll\">\n\n              <div id=resource-issue-area-option                class=\"cursor-pointer px-6 py-3 hover:bg-gray-100 transition-colors font-tradeGothic !text-p2 text-brand-slate-grey\"\n                data-value=\"all\">\n                All Issue Areas              <\/div>\n                              <div id='resource-issue-area-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"transportation\" data-id=\"7841\">\n                  Transportation                <\/div>\n                              <div id='resource-issue-area-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"housing-and-neighborhoods\" data-id=\"7837\">\n                  Housing and Neighborhoods                <\/div>\n                              <div id='resource-issue-area-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"planning-and-governance\" data-id=\"7838\">\n                  Planning and Governance                <\/div>\n                              <div id='resource-issue-area-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"water-infrastructure\" data-id=\"7833\">\n                  Water Infrastructure                <\/div>\n                              <div id='resource-issue-area-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"climate-change\" data-id=\"7840\">\n                  Climate Change                <\/div>\n                          <\/div>\n          <\/div>\n        <\/div>\n        <!-- resource programs -->\n        <div\n          class=\"bg-white flex items-end w-full xsm:!w-[48%] lg:w-[24.0625rem] px-6 py-6 rounded relative filter-button selected-option cursor-pointer\"\n          id=\"resource-programs-select\">\n          <div class=\"w-full h-full\">\n            <div\n              class=\"flex justify-between items-center cursor-pointer text-brand-slate-grey font-tradeGothic text-p2 h-full\">\n              <span class=\"selected-text font-tradeGothic text-p2 text-brand-slate-grey\">By Program<\/span>\n              <!-- Clear programs Icon -->\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Button_-Close.svg\"\n                id=\"resource-programs-cross-icon\" style=\"display: none;\" alt=\"cross\" class=\"w-7 h-7\" \/>\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/ArrowDown.svg\"\n                alt=\"Dropdown\" id=\"resource-programs-select-icon\"\n                class=\"w-7 h-7 shrink-0 transform transition-transform\">\n            <\/div>\n            <div id=\"resource-programs-options-container\"\n              class=\"absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-50 hidden max-h-[20rem] overflow-y-scroll\">\n              <div id=resource-programs-option                class=\"cursor-pointer px-6 py-3 hover:bg-gray-100 transition-colors font-tradeGothic !text-p2 text-brand-slate-grey\"\n                data-value=\"all\">\n                All Programs              <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"adaptation-policy-and-implementation\" data-id=\"13751\">\n                  Adaptation Policy and Implementation                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"bicycle-and-pedestrian\" data-id=\"13396\">\n                  Bicycle and Pedestrian                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"creating-great-places-to-age\" data-id=\"13747\">\n                  Creating Great Places To Age                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"demographics-trends\" data-id=\"13750\">\n                  Demographics &amp; Trends                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"economic-development\" data-id=\"13399\">\n                  Economic Development                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"great-homes-and-neighborhoods-for-all\" data-id=\"13745\">\n                  Great Homes and Neighborhoods for All                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"housing-and-equity\" data-id=\"13400\">\n                  Housing and Equity                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"land-use-solutions\" data-id=\"13401\">\n                  Land Use Solutions                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"local-planning\" data-id=\"13402\">\n                  Local Planning                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"mainstreaming-green-infrastructure\" data-id=\"13349\">\n                  Mainstreaming Green Infrastructure                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"new-jersey-funding-navigator\" data-id=\"9131\">\n                  New Jersey Funding Navigator                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"redevelopment\" data-id=\"13403\">\n                  Redevelopment                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"regional-planning\" data-id=\"13404\">\n                  Regional Planning                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"transit-oriented-development\" data-id=\"13406\">\n                  Transit Oriented Development                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"transportation-funding\" data-id=\"13407\">\n                  Transportation Funding                <\/div>\n                              <div id='resource-programs-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"water-infrastructure-policy\" data-id=\"15155\">\n                  Water Infrastructure Policy                <\/div>\n                          <\/div>\n          <\/div>\n        <\/div>\n        <!-- resource topic filter -->\n        <div\n          class=\"!hidden bg-white items-end w-full xsm:!w-[48%] lg:w-[24.0625rem] px-6 py-6 rounded relative filter-button selected-option cursor-pointer\"\n          id=\"resource-topics-select\">\n          <div class=\"w-full h-full\">\n            <div\n              class=\"flex justify-between items-center cursor-pointer text-brand-slate-grey font-tradeGothic text-p2 h-full\">\n              <span class=\"selected-text font-tradeGothic text-p2 text-brand-slate-grey\">By Topic<\/span>\n              <!-- Clear topic Icon -->\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Button_-Close.svg\"\n                id=\"resource-topic-cross-icon\" style=\"display: none;\" alt=\"cross\" class=\"w-7 h-7\" \/>\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/ArrowDown.svg\"\n                alt=\"Dropdown\" id=\"resource-topic-select-icon\" class=\"w-7 h-7 shrink-0 transform transition-transform\">\n\n            <\/div>\n            <div id=\"resource-topics-options-container\"\n              class=\"absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-50 hidden max-h-[20rem] overflow-y-scroll\">\n              <div id=no-topics                class=\"cursor-default  px-6 py-3 hover:bg-gray-100 transition-colors font-tradeGothic !text-p2 text-brand-slate-grey\"\n                data-value=\"all\">\n                No Topics Found\n              <\/div>\n                          <\/div>\n          <\/div>\n        <\/div>\n        <!-- year filter -->\n        <div\n          class=\"bg-white flex items-end w-full xsm:!w-[48%] lg:w-[24.0625rem] px-6 py-6 rounded relative filter-button selected-option cursor-pointer\"\n          id=\"resource-year-select\">\n          <div class=\"w-full h-full\">\n            <div\n              class=\"flex justify-between items-center cursor-pointer text-brand-slate-grey font-tradeGothic text-p2 h-full\">\n              <span class=\"selected-text font-tradeGothic text-p2 text-brand-slate-grey\">By Year<\/span>\n              <!-- Clear year Icon -->\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Button_-Close.svg\"\n                id=\"resource-year-cross-icon\" style=\"display: none;\" alt=\"cross\" class=\"w-7 h-7\" \/>\n              <img decoding=\"async\"\n                src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/ArrowDown.svg\"\n                alt=\"Dropdown\" id=\"resource-year-select-icon\" class=\"w-7 h-7 shrink-0 transform transition-transform\">\n\n            <\/div>\n            <div id=\"resource-year-options-container\"\n              class=\"absolute left-0 right-0 top-full max-h-[20rem] overflow-y-scroll mt-2 bg-white rounded-lg shadow-lg z-50 hidden\">\n              <div id=resource-year-option                class=\"cursor-pointer  px-6 py-3 hover:bg-gray-100 transition-colors font-tradeGothic !text-p2 text-brand-slate-grey\"\n                data-value=\"all\">\n                All Years\n              <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2026\">\n                  2026                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2025\">\n                  2025                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2024\">\n                  2024                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2023\">\n                  2023                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2022\">\n                  2022                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2021\">\n                  2021                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2020\">\n                  2020                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2019\">\n                  2019                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2018\">\n                  2018                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2017\">\n                  2017                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2016\">\n                  2016                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2015\">\n                  2015                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2014\">\n                  2014                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2013\">\n                  2013                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2012\">\n                  2012                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2011\">\n                  2011                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2010\">\n                  2010                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2009\">\n                  2009                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2008\">\n                  2008                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2007\">\n                  2007                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2006\">\n                  2006                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2004\">\n                  2004                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2003\">\n                  2003                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2001\">\n                  2001                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"2000\">\n                  2000                <\/div>\n                              <div id='resource-year-option'\n                  class=\"cursor-pointer px-6 py-3 text-brand-slate-grey hover:bg-gray-100 transition-colors filter-options last:!mb-0 font-tradeGothic !text-p2\"\n                  data-value=\"1981\">\n                  1981                <\/div>\n                          <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Active search\/query pills -->\n  <div id=\"container-query-pills\" class=\"w-full bg-brand-grey py-[1.6875rem] hidden\">\n    <div class=\"container flex flex-wrap justify-between items-center gap-6\">\n      <div id=\"activeFilters\" class=\"flex items-center flex-wrap gap-[0.6875rem]\"><\/div>\n      <button id=\"clearAllSearchBtn\"\n        class=\"hidden w-max flex-shrink-0 items-center gap-2 text-brand-slate-grey font-tradeGothic text-p2\">\n        <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/icons\/close-button-gray-outline.svg\"\n          class=\"w-5 h-5 flex-shrink-0 mt-[.1rem]\" alt=\"close\">\n        <span>Clear Search<\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- total results -->\n  <div class=\"container\">\n    <div id=\"results-container\" class=\"w-full my-8 hidden\">\n      <p id=\"resultsCount\" class=\"font-tradeGothic text-p3 font-normal text-brand-black text-left\">0 results<\/p>\n    <\/div>\n\n    <!-- news cards -->\n    <div id=\"resource-container\" class=\"gap-x-6 gap-y-10\">\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-16-163137-e1758022348963.png\"\n        alt=\"block-card-image\" class=\"!w-full h-auto block-card-image\" \/>\n    <\/div>\n\n    <!-- Load More -->\n    <button id=\"loadMoreBtn\"\n      class=\"mx-auto mt-8  items-center gap-2 attendee-button bg-transparent text-brand-jersey-blue border-2 border-brand-jersey-blue px-5 pt-[0.75rem] pb-[0.5625rem] rounded-[.3125rem] transition-all font-normal hover:opacity-80 cursor-pointer no-underline text-center w-fit text-p2 font-tradeGothic focus:outline-none active:outline-none hidden\">\n      Load More\n      <svg class=\"transition-transform group-hover:translate-x-1 mt-[-0.3125rem]\" width=\"32\" height=\"31\"\n        viewBox=\"0 0 32 31\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M11.8496 7.5L20.1515 15.5L11.8496 23.5\" stroke=\"#004970\" stroke-linecap=\"round\" \/>\n      <\/svg>\n    <\/button>\n\n  <\/div>\n<\/section>\n\n<script>\n  function debounce(func, wait) {\n    let timeout;\n    return function (...args) {\n      clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(this, args), wait);\n    };\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const searchInput = document.getElementById(\"searchInput\");\n    const loadMoreBtn = document.getElementById(\"loadMoreBtn\");;\n    const resourceContainer = document.getElementById(\"resource-container\");\n    const activeFiltersEl = document.getElementById(\"activeFilters\");\n    const clearAllSearchBtn = document.getElementById(\"clearAllSearchBtn\");\n    const resultsCountEl = document.getElementById(\"resultsCount\");\n    const containerQueryPills = document.getElementById(\"container-query-pills\");\n    const resultsContainer = document.getElementById(\"results-container\");\n    const searchIcon = document.getElementById(\"search-icon\");\n    const clearSearchBtn = document.getElementById(\"cross-search-icon\");\n    const newsTopicClearIcon = document.getElementById(\"news-topic-cross-icon\");\n    const newsTopicSelectIcon = document.getElementById(\"news-topic-select-icon\");\n\n    let currentPage = 1;\n    let maxPages = 1;\n    let selectedTypes = [{\n      label: \"All\",\n      value: \"all\"\n    }];\n    const initialSearchState = JSON.stringify({\n      query: \"\",\n      filters: {\n        topics: [{\n          label: \"All\",\n          value: \"all\"\n        }],\n        issueArea: [{\n          label: \"All\",\n          value: \"all\"\n        }],\n        programs: [{\n          label: \"All\",\n          value: \"all\"\n        }],\n        years: [{\n          label: \"All\",\n          value: \"all\"\n        }],\n        types: []\n      }\n    })\n    let lastSearchState = initialSearchState\n\n    function getSelectedFilters() {\n      return selectedTypes.filter(f => f.value !== \"all\");\n    }\n\n    function getSelectedFrom(key) {\n      return dropdownsState[key]?.selected || [];\n    }\n\n    function renderActiveFilters(search, filters) {\n      activeFiltersEl.innerHTML = \"\";\n      if (search) addPill(search, \"search\");\n      filters\n        .filter(f => f.value !== \"all\")\n        .forEach(f => addPill(f.label, f.type));\n      const hasFilters = !!search ||\n        filters.some(f => f.value !== \"all\") ||\n        getSelectedFrom(\"topics\").some(t => t.value !== \"all\") ||\n        getSelectedFrom(\"issueArea\").some(t => t.value !== \"all\") ||\n        getSelectedFrom(\"programs\").some(t => t.value !== \"all\") ||\n        getSelectedFrom(\"years\").some(t => t.value !== \"all\") ||\n        getSelectedFilters().some(f => f.value !== \"all\");\n      clearAllSearchBtn.style.display = hasFilters ? \"flex\" : \"none\";\n      containerQueryPills.style.display = hasFilters ? \"flex\" : \"none\";\n    }\n\n\n    function addPill(label, type) {\n      if (label === \"All\") return;\n\n      const pill = document.createElement(\"div\");\n      pill.className =\n        \"w-fit max-w-full pl-[0.875rem] pt-[0.5625rem] pr-[0.625rem] pb-[0.4375rem] bg-white rounded-full flex items-center gap-[0.625rem] border border-brand-secondary-blue\";\n\n      const span = document.createElement(\"span\");\n      span.textContent = label;\n\n      const img = document.createElement(\"img\");\n      img.src = \"https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/icons\/close-btn-gray.svg\";\n      img.className = \"w-[1.625rem] h-[1.625rem] flex-shrink-0 cursor-pointer mt-[-0.125rem]\";\n\n      img.addEventListener(\"click\", () => {\n        if (type === \"search\") {\n          searchInput.value = \"\";\n          clearSearchBtn.style.display = \"none\";\n          searchIcon.style.display = \"flex\";\n        } else if (dropdownsState[type]) {\n          dropdownsState[type].reset();\n        } else if (type === \"type\") {\n          selectedTypes = selectedTypes.filter(f => f.label !== label);\n          if (selectedTypes.length === 0) {\n            selectedTypes = [{\n              label: \"All\",\n              value: \"all\"\n            }];\n          }\n        }\n\n        updateFilterStyles();\n        renderActiveFilters(\n          searchInput.value.trim(),\n          [\n            ...getSelectedFrom(\"topics\").map(t => ({\n              ...t,\n              type: \"topics\"\n            })),\n            ...getSelectedFrom(\"issueArea\").map(t => ({\n              ...t,\n              type: \"issueArea\"\n            })),\n            ...getSelectedFrom(\"programs\").map(t => ({\n              ...t,\n              type: \"programs\"\n            })),\n            ...getSelectedFrom(\"years\").map(t => ({\n              ...t,\n              type: \"years\"\n            })),\n            ...getSelectedFilters().map(f => ({\n              ...f,\n              type: \"type\"\n            })),\n          ]\n        );\n\n        loadPosts();\n      });\n\n      pill.appendChild(span);\n      pill.appendChild(img);\n      activeFiltersEl.appendChild(pill);\n    }\n\n    async function loadPosts(page = 1, append = false) {\n      try {\n        const search = searchInput.value.trim();\n        const topicsArray = getSelectedFrom(\"topics\");\n        const issueAreaArray = getSelectedFrom(\"issueArea\");\n        const programsArray = getSelectedFrom(\"programs\");\n        const yearsArray = getSelectedFrom(\"years\");\n        const filtersArray = getSelectedFilters();\n        let filterBy = [];\n\n        if (topicsArray.length && !topicsArray.some(t => t.value === \"all\")) {\n          filterBy.push(`resource_topic: [${topicsArray.map(t => `\"${t.value}\"`).join(\", \")}]`);\n        }\n\n\n        if (issueAreaArray.length && !issueAreaArray.some(t => t.value === \"all\")) {\n          filterBy.push(`issue_area_type: [${issueAreaArray.map(t => `\"${t.id}\"`).join(\", \")}]`);\n        }\n\n        if (programsArray.length && !programsArray.some(t => t.value === \"all\")) {\n          filterBy.push(`resource_program: [${programsArray.map(t => `\"${t.id}\"`).join(\", \")}]`);\n        }\n\n        if (filtersArray.length && !filtersArray.some(f => f.value === \"all\")) {\n          filterBy.push(`resource_type: [${filtersArray.map(f => `\"${f.value}\"`).join(\", \")}]`);\n        }\n\n        if (yearsArray.length && !yearsArray.some(y => y.value === \"all\")) {\n          yearsArray.forEach(y => {\n            const year = parseInt(y.value, 10);\n            const startOfYear = Math.floor(new Date(`${year}-01-01T00:00:00Z`).getTime() \/ 1000);\n            const endOfYear = Math.floor(new Date(`${year}-12-31T23:59:59Z`).getTime() \/ 1000);\n\n            filterBy.push(`unix_date: [${startOfYear}..${endOfYear}]`);\n          });\n        }\n        const filterString = filterBy.length ? filterBy.join(\" && \") : \"\";\n\n        const response = await fetch(\n          `${envConfig.TYPESENSE_BASE_URL}:${envConfig.TYPESENSE_PORT}\/collections\/resources\/documents\/search?` +\n          new URLSearchParams({\n            q: search?.length > 0 ? `\"${search}\"` : '*',\n            query_by: \"date,title,issue_area_type,resource_program,resource_topic,pdf_content,block_content,excerpt,issue_area_type_name,resource_topic_name,resource_program_name,resource_type_name\",\n            filter_by: filterString,\n            sort_by: \"unix_date:desc\",\n            per_page: 9,\n            page: page,\n            num_typos: 0,\n            prefix: false\n          }), {\n          headers: {\n            \"Content-Type\": \"application\/json\",\n            \"X-TYPESENSE-API-KEY\": envConfig.TYPESENSE_SEARCH_ONLY_KEY,\n          },\n        }\n        );\n\n        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n        const data = await response.json();\n        const count = data.found ?? 0;\n        resultsCountEl.textContent = `${count} result${count !== 1 ? \"s\" : \"\"}`;\n\n        data.found === 0 ?\n          resultsContainer.classList.add(\"hidden\") :\n          resultsContainer.classList.remove(\"hidden\");\n        if (!append) {\n          resourceContainer.innerHTML = data.found === 0 ?\n            `<div class=\"text-center text-brand-black text-p1 py-10 col-span-6\">There are no results for that search, please try again.<\/div>` :\n            generateResourceHTML(data.hits);\n          updateGridClass();\n\n          data.found === 0 ?\n            resultsContainer.classList.add(\"hidden\") :\n            resultsContainer.classList.remove(\"hidden\");\n        } else {\n          resourceContainer.innerHTML += generateResourceHTML(data.hits);\n          updateGridClass();\n        }\n\n        currentPage = page;\n        maxPages = Math.ceil(data.found \/ 9);\n        loadMoreBtn.style.display = maxPages > currentPage ? \"flex\" : \"none\";\n        updateAnimationCta();\n      } catch (error) {\n        console.error(\"Error fetching resources:\", error);\n      }\n    }\n\n    function generateResourceHTML(resources) {\n      return resources.map(hit => {\n        const n = hit.document;\n        let href = n?.download_file ? n?.download_file : n?.permalink;\n        let target = n?.download_file ? \"_blank\" : \"_self\";\n        const fileUrl = n?.download_file ? n?.download_file : n?.pdf_url\n        const default_preview = `${envConfig.NJF_BASE_URL}\/wp-content\/uploads\/2025\/07\/NJF-Logo-Navigation.svg`;\n\n        let src = n?.media_url || n?.pdf_url || default_preview;\n        let onerror = `onerror=\"this.onerror=null;this.src='${default_preview}'\"`;\n        let buttonIcon = ''\n        let showTransition = false\n\n        if (n?.download_file) {\n          buttonIcon = `${envConfig.NJF_BASE_URL}\/wp-content\/uploads\/2025\/09\/Button_-Download.svg`\n          iconClasses = \"h-full w-full\"\n        } else {\n          buttonIcon = `${envConfig.NJF_BASE_URL}\/wp-content\/uploads\/2025\/09\/Vector-14-1.svg`\n          iconClasses = \"h-auto w-4\"\n          showTransition = true\n        }\n\n        featured_image = `\n               <img decoding=\"async\" \n                  src=\"${src}\" \n                  ${onerror}\n                  alt=\"Resource Preview\"\n                  class=\"!w-full !h-full object-contain relative z-[1] bg-brand-light-green\"\n               \/>\n            `;\n\n        let isContent = Boolean(n?.excerpt && showTransition);\n\n        return ` \n      <div\n      class=\"resource-cards-imp relative group w-full gridBox-three h-full overflow-hidden shadow-[0_4px_20px_0_rgba(0,0,0,0.08)] transition-all duration-[0.3s]\">\n      <a href=\"${href}\" target=\"${target}\" class=\"w-full h-full bg-white ${showTransition ? '' : 'hover:!scale-[1.02]'}\n         !transition-all !duration-200 flex flex-col\">\n         <div class=\"overflow-content w-full h-max flex flex-col relative\">\n            <div class=\"w-full h-[26.375rem] min-h-[26.375rem] max-h-[26.375rem] p-6 bg-brand-grey relative\n               before:w-20 before:h-full before:absolute before:top-0 before:right-0 before:bg-brand-future-green\">\n               ${featured_image}\n            <\/div>\n            <div class=\"w-full h-full min-h-[5rem] ${isContent ? 'opacity-0 hidden-resource-content' : 'opacity-100'} \">\n               <div class=\" w-full h-full p-6 !pb-0 flex flex-col items-start justify-between bg-white gap-5 \">\n                  ${n?.date && `<p class=\" text-brand-future-green text-p3 font-normal\">${n?.date}<\/p>`}\n                  ${n?.title && `<p class=\"font-tradeGothic text-p1 font-medium text-brand-jersey-blue !text-left h-full \">\n                     ${n.title}\n                  <\/p>` }\n               <\/div>\n            <\/div>\n           ${isContent ? `<div\n                  class=\"resource-card-content-desc w-full h-max absolute left-0 top-0 z-[1] transition-all duration-[0.3s] translate-y-[26.375rem]\">\n                  <div  class=\"resource-card-desc w-full h-max flex flex-col \">\n                     <div class=\"w-full h-full p-6 !pb-0 flex flex-col items-start justify-start bg-white gap-5 \">\n                        ${n?.date && `<p class=\"text-brand-future-green text-p3 font-normal\">${n?.date}<\/p>`}\n                        ${n?.title && `<p\n                        class=\" font-tradeGothic text-p1 font-medium text-brand-jersey-blue !text-left h-max\">\n                        ${n.title}\n                     <\/p>`}\n\n                        ${n?.excerpt && `<p\n                        class=\" font-tradeGothic !text-p2 font-medium text-brand-black !text-left line-clamp-[8] border-t border-brand-gold py-5 !pb-0 opacity-0 group-hover:opacity-100 transition-all duration-[0.3s] \">\n                        ${n.excerpt}\n                     <\/p>`}\n                     <\/div>\n                  <\/div>\n               <\/div>` : ''}\n         <\/div>\n          <div class=\"w-full min-h-[4.8rem] bg-white p-6 !pt-5 mt-auto relative z-[3]\">\n                ${n.resource_type_name?.length > 0 ? `\n                     <span\n                        class=\"block mb-3 w-max font-tradeGothic text-p3 font-normal px-4 py-[0.625rem] rounded-[0.3125rem] border border-brand-future-green text-brand-future-green bg-[rgba(209,240,205,0.62)]\">${n.resource_type_name[0]}<\/span>\n                     ` : \"\"}\n               <div class='w-full h-max min-h-[3.25rem] relative'>\n               ${showTransition ? `<button\n                  class='absolute top-0 left-0 !h-[3.25rem] !pt-[0.8125rem] !pb-[0.5625rem] njf-button gold-filled-arrow-right-njf-button hover:gap-4 opacity-0 group-hover:opacity-100 transition-all duration-[0.3s]'>\n                  <span>Learn More<\/span>\n                  <img decoding=\"async\" src=\"${envConfig.NJF_BASE_URL}\/wp-content\/uploads\/2025\/09\/Vector-14.svg\"\n                     alt=\"chevron\" class=\"\" \/><\/button>`: \"\"}\n\n                  <div class=\" w-full h-full absolute top-0 left-0 ${showTransition ? 'opacity-100 group-hover:opacity-0 transition-all duration-[0.3s]' : ''} \">\n                     <div\n                        class=\"bg-brand-gold group-hover:bg-brand-future-green rounded-full h-[3.125rem] w-[3.125rem] flex-shrink-0 flex justify-center items-center\">\n                        <img src=${buttonIcon} alt=\"download_icon\" class=\"${iconClasses} !max-w-max\" \/>\n                     <\/div>\n                  <\/div>\n               <\/div>\n            <\/div>\n      <\/a>\n   <\/div>\n        `;\n      }).join(\"\");\n    }\n\n    function updateAnimationCta() {\n      const cards = document.querySelectorAll(\".resource-cards-imp\");\n      const recalcHeights = () => {\n        console.log(cards);\n        cards.forEach(card => {\n          const content = card.querySelector(\".overflow-content\");\n          if (!content) return;\n\n          const descEl = content.querySelector(\".resource-card-content-desc\");\n          const hiddenContent = content.querySelector(\".hidden-resource-content\");\n          const imageWrapper = content.querySelector(\"div[class*='h-[26.375rem]']\");\n          if (!descEl || !hiddenContent || !imageWrapper) return;\n\n          const imageHeight = imageWrapper.clientHeight || 338;\n          const hiddenContentHeight = hiddenContent.clientHeight;\n          const newCalcValue = descEl.clientHeight - hiddenContentHeight;\n          const valueInPx = imageHeight - newCalcValue;\n\n          descEl.dataset.valueInPx = valueInPx;\n\n          descEl.style.transition = \"transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s\";\n          descEl.style.willChange = \"transform\";\n          descEl.style.backfaceVisibility = \"hidden\";\n\n          descEl.style.transform = `translateY(26.375rem)`;\n        });\n      };\n\n      let resizeTimeout;\n      const debounceResize = () => {\n        clearTimeout(resizeTimeout);\n        resizeTimeout = setTimeout(recalcHeights, 250);\n      };\n\n      recalcHeights();\n\n      window.addEventListener(\"load\", recalcHeights);\n      window.addEventListener(\"resize\", debounceResize);\n\n      cards.forEach(card => {\n        const descEl = card.querySelector(\".resource-card-content-desc\");\n        if (!descEl) return;\n\n        card.addEventListener(\"mouseenter\", () => {\n          const valueInPx = descEl.dataset.valueInPx || 0;\n          descEl.style.transform = `translateY(${valueInPx}px)`;\n        });\n\n        card.addEventListener(\"mouseleave\", () => {\n          descEl.style.transform = `translateY(26.375rem)`;\n        });\n      });\n    }\n\n\n\n    searchInput.addEventListener(\n      \"input\",\n      debounce(() => {\n        let query = searchInput.value;\n\n        if (!query.trim() && !filtersHaveValues()) {\n          query = \"\";\n        }\n\n        const filters = {\n          topics: getSelectedFrom(\"topics\"),\n          issueArea: getSelectedFrom(\"issueArea\"),\n          programs: getSelectedFrom(\"programs\"),\n          programs: getSelectedFrom(\"years\"),\n          types: getSelectedFilters(),\n        };\n\n        const currentState = JSON.stringify({\n          query: query.trim(),\n          filters\n        });\n\n        if (currentState === lastSearchState) {\n          return;\n        }\n        lastSearchState = currentState;\n\n        clearSearchBtn.style.display = query.trim() ? \"flex\" : \"none\";\n        searchIcon.style.display = query.trim() ? \"none\" : \"flex\";\n\n        if (query.trim() || filtersHaveValues()) {\n          loadPosts();\n        }\n\n        renderActiveFilters(\n          query.trim(),\n          [\n            ...filters.topics.map(t => ({\n              ...t,\n              type: \"topics\"\n            })),\n            ...filters.issueArea.map(t => ({\n              ...t,\n              type: \"issueArea\"\n            })),\n            ...filters.programs.map(t => ({\n              ...t,\n              type: \"programs\"\n            })),\n            ...filters.years.map(t => ({\n              ...t,\n              type: \"years\"\n            })),\n            ...filters.types.map(f => ({\n              ...f,\n              type: \"type\"\n            })),\n          ]\n        );\n      }, 600)\n    );\n\n    function filtersHaveValues() {\n      return (\n        getSelectedFrom(\"topics\").length ||\n        getSelectedFrom(\"issueArea\").length ||\n        getSelectedFrom(\"programs\").length ||\n        getSelectedFrom(\"years\").length ||\n        getSelectedFilters().length\n      );\n    }\n\n\n    clearSearchBtn.addEventListener(\"click\", () => {\n      searchInput.value = \"\";\n      clearSearchBtn.style.display = \"none\";\n      searchIcon.style.display = \"flex\";\n      renderActiveFilters(\n        searchInput.value.trim(),\n        [\n          ...getSelectedFrom(\"topics\").map(t => ({\n            ...t,\n            type: \"topics\"\n          })),\n          ...getSelectedFrom(\"issueArea\").map(t => ({\n            ...t,\n            type: \"issueArea\"\n          })),\n          ...getSelectedFrom(\"programs\").map(t => ({\n            ...t,\n            type: \"programs\"\n          })),\n          ...getSelectedFrom(\"years\").map(t => ({\n            ...t,\n            type: \"years\"\n          })),\n          ...getSelectedFilters().map(f => ({\n            ...f,\n            type: \"type\"\n          })),\n        ]\n      );\n\n      loadPosts();\n    });\n\n    function updateFilterStyles() {\n      document.querySelectorAll(\".filter-btn\").forEach(btn => {\n        const value = btn.dataset.filter;\n        const isSelected = selectedTypes.some(f => f.value === value);\n\n        if (isSelected) {\n          btn.classList.add(\"bg-white\", \"text-brand-slate-grey\", \"px-4\");\n          btn.classList.remove(\"bg-transparent\", \"text-white\", \"px-0\");\n        } else {\n          btn.classList.add(\"bg-transparent\", \"text-white\", \"px-0\");\n          btn.classList.remove(\"bg-white\", \"text-brand-slate-grey\", \"px-4\");\n        }\n      });\n    }\n\n    document.querySelectorAll(\".filter-btn\").forEach(btn => {\n      btn.addEventListener(\"click\", () => {\n        const value = btn.dataset.filter;\n        const label = btn.textContent.trim();\n        if (value === \"all\") {\n          selectedTypes = [{\n            label: \"All\",\n            value: \"all\"\n          }];\n        } else {\n          selectedTypes = selectedTypes.filter(f => f.value !== \"all\");\n          const exists = selectedTypes.some(f => f.value === value);\n          if (exists) {\n            selectedTypes = selectedTypes.filter(f => f.value !== value);\n          } else {\n            selectedTypes.push({\n              label,\n              value\n            });\n          }\n          if (selectedTypes.length === 0) {\n            selectedTypes = [{\n              label: \"All\",\n              value: \"all\"\n            }];\n          }\n        }\n        if (\n          searchInput.value.trim() ||\n          getSelectedFrom(\"topics\").length ||\n          getSelectedFilters().length\n        ) {\n          renderActiveFilters(\n            searchInput.value.trim(),\n            [\n              ...getSelectedFrom(\"topics\").map(t => ({\n                ...t,\n                type: \"topics\"\n              })),\n              ...getSelectedFrom(\"issueArea\").map(t => ({\n                ...t,\n                type: \"issueArea\"\n              })),\n              ...getSelectedFrom(\"programs\").map(t => ({\n                ...t,\n                type: \"programs\"\n              })),\n              ...getSelectedFrom(\"years\").map(t => ({\n                ...t,\n                type: \"years\"\n              })),\n              ...getSelectedFilters().map(f => ({\n                ...f,\n                type: \"type\"\n              })),\n            ]\n          );\n\n        }\n        updateFilterStyles();\n        loadPosts();\n      });\n    });\n\n\n    function setupDropdown({\n      selectId,\n      optionsId,\n      selectIconId,\n      clearIconId,\n      placeholder,\n      key\n    }) {\n      const selectEl = document.getElementById(selectId);\n      const optionsEl = document.getElementById(optionsId);\n      const selectIcon = document.getElementById(selectIconId);\n      const clearIcon = clearIconId ? document.getElementById(clearIconId) : null;\n      const selectedText = selectEl.querySelector(\".selected-text\");\n      const options = optionsEl.querySelectorAll(\"[id$='-option']\");\n\n      let selected = [{\n        label: \"All\",\n        value: \"all\"\n      }];\n\n      selectEl.addEventListener(\"click\", e => {\n        optionsEl.classList.toggle(\"hidden\");\n        selectIcon?.classList.toggle(\"rotate-180\");\n        e.stopPropagation();\n      });\n\n      document.addEventListener(\"click\", (e) => {\n        const clickedInside = selectEl.contains(e.target) || optionsEl.contains(e.target);\n\n        if (!clickedInside) {\n          optionsEl.classList.add(\"hidden\");\n          selectIcon?.classList.remove(\"rotate-180\");\n        }\n      });\n\n      options.forEach(opt => {\n        opt.addEventListener(\"click\", e => {\n          e.stopPropagation();\n          selectedText.textContent = opt.textContent.trim();\n          selectedText.dataset.value = opt.dataset.value;\n          selectedText.dataset.id = opt.dataset.id;\n          \/\/ update state here \ud83d\udd25\n          selected = opt.dataset.value !== \"all\" ? [{\n            label: opt.textContent.trim(),\n            value: opt.dataset.value,\n            id: opt.dataset.id\n          }] : [{\n            label: \"All\",\n            value: \"all\",\n            id: \"all\"\n          }];\n          dropdownsState[key].selected = selected;\n\n          if (clearIcon) {\n            const hasValue = opt.dataset.value !== \"all\";\n            clearIcon.style.display = hasValue ? \"flex\" : \"none\";\n            selectIcon.style.display = hasValue ? \"none\" : \"flex\";\n          }\n\n          optionsEl.classList.add(\"hidden\");\n          selectIcon?.classList.remove(\"rotate-180\");\n\n          const query = searchInput.value.trim();\n\n          const filters = {\n            topics: getSelectedFrom(\"topics\"),\n            issueArea: getSelectedFrom(\"issueArea\"),\n            programs: getSelectedFrom(\"programs\"),\n            years: getSelectedFrom(\"years\"),\n            types: getSelectedFilters(),\n          };\n\n          const currentState = JSON.stringify({\n            query,\n            filters\n          });\n          if (currentState === lastSearchState) {\n            return;\n          }\n          lastSearchState = currentState;\n\n          renderActiveFilters(\n            query,\n            [\n              ...filters.topics.map(t => ({\n                ...t,\n                type: \"topics\"\n              })),\n              ...filters.issueArea.map(t => ({\n                ...t,\n                type: \"issueArea\"\n              })),\n              ...filters.programs.map(t => ({\n                ...t,\n                type: \"programs\"\n              })),\n              ...filters.years.map(t => ({\n                ...t,\n                type: \"years\"\n              })),\n              ...filters.types.map(f => ({\n                ...f,\n                type: \"type\"\n              })),\n            ]\n          );\n\n          if (query || filters.topics.length || filters.issueArea.length || filters.programs.length || filters\n            .types.length || filters.years.length) {\n            loadPosts();\n          }\n        });\n      });\n\n\n      if (clearIcon) {\n        clearIcon.addEventListener(\"click\", e => {\n          e.stopPropagation();\n          selectedText.textContent = placeholder;\n          selectedText.dataset.value = \"all\";\n          selectedText.dataset.id = \"all\";\n\n          \/\/ reset state \ud83d\udd25\n          selected = [{\n            label: \"All\",\n            value: \"all\",\n            id: \"all\"\n          }];\n          dropdownsState[key].selected = selected;\n\n          clearIcon.style.display = \"none\";\n          selectIcon.style.display = \"flex\";\n          optionsEl.classList.add(\"hidden\");\n          selectIcon?.classList.remove(\"rotate-180\");\n\n          const query = searchInput.value.trim();\n          const filters = {\n            topics: getSelectedFrom(\"topics\"),\n            issueArea: getSelectedFrom(\"issueArea\"),\n            programs: getSelectedFrom(\"programs\"),\n            years: getSelectedFrom(\"years\"),\n            types: getSelectedFilters(),\n          };\n\n          const currentState = JSON.stringify({\n            query,\n            filters\n          });\n          if (currentState === lastSearchState) {\n            return;\n          }\n          lastSearchState = currentState;\n\n          renderActiveFilters(\n            query,\n            [\n              ...filters.topics.map(t => ({\n                ...t,\n                type: \"topics\"\n              })),\n              ...filters.issueArea.map(t => ({\n                ...t,\n                type: \"issueArea\"\n              })),\n              ...filters.programs.map(t => ({\n                ...t,\n                type: \"programs\"\n              })),\n              ...filters.years.map(t => ({\n                ...t,\n                type: \"years\"\n              })),\n              ...filters.types.map(f => ({\n                ...f,\n                type: \"type\"\n              })),\n            ]\n          );\n\n          loadPosts();\n        });\n      }\n\n\n      return {\n        selectedText,\n        getValue: () => {\n          const val = selectedText.dataset.value || \"all\";\n          const label = selectedText.textContent.trim();\n          return val !== \"all\" ? {\n            label,\n            value: val\n          } : null;\n        },\n        reset: () => {\n          selectedText.textContent = placeholder;\n          selectedText.dataset.value = \"all\";\n          selectedText.dataset.id = \"all\";\n          selected = [{\n            label: \"All\",\n            value: \"all\",\n            id: \"all\"\n          }];\n          dropdownsState[key].selected = selected;\n\n          if (clearIcon) clearIcon.style.display = \"none\";\n          if (selectIcon) selectIcon.style.display = \"flex\";\n\n          renderActiveFilters(\n            searchInput.value.trim(),\n            [\n              ...getSelectedFrom(\"topics\").map(t => ({\n                ...t,\n                type: \"topics\"\n              })),\n              ...getSelectedFrom(\"issueArea\").map(t => ({\n                ...t,\n                type: \"issueArea\"\n              })),\n              ...getSelectedFrom(\"programs\").map(t => ({\n                ...t,\n                type: \"programs\"\n              })),\n              ...getSelectedFrom(\"years\").map(t => ({\n                ...t,\n                type: \"years\"\n              })),\n              ...getSelectedFilters().map(f => ({\n                ...f,\n                type: \"type\"\n              })),\n            ]\n          );\n        },\n        selected,\n      };\n    }\n\n    const issueAreaDropdown = setupDropdown({\n      selectId: \"resource-issue-area-select\",\n      optionsId: \"resource-issue-area-options-container\",\n      selectIconId: \"resource-issue-area-select-icon\",\n      clearIconId: \"resource-issue-area-cross-icon\",\n      placeholder: \"By Issue Area\",\n      key: \"issueArea\"\n    });\n\n    const programsDropdown = setupDropdown({\n      selectId: \"resource-programs-select\",\n      optionsId: \"resource-programs-options-container\",\n      selectIconId: \"resource-programs-select-icon\",\n      clearIconId: \"resource-programs-cross-icon\",\n      placeholder: \"By Program\",\n      key: \"programs\"\n    });\n\n    const topicsDropdown = setupDropdown({\n      selectId: \"resource-topics-select\",\n      optionsId: \"resource-topics-options-container\",\n      selectIconId: \"resource-topic-select-icon\",\n      clearIconId: \"resource-topic-cross-icon\",\n      placeholder: \"By Topic\",\n      key: \"topics\"\n    });\n\n    const yearsDropdown = setupDropdown({\n      selectId: \"resource-year-select\",\n      optionsId: \"resource-year-options-container\",\n      selectIconId: \"resource-year-select-icon\",\n      clearIconId: \"resource-year-cross-icon\",\n      placeholder: \"By Year\",\n      key: \"years\"\n    });\n\n    const dropdownsState = {\n      issueArea: issueAreaDropdown,\n      programs: programsDropdown,\n      topics: topicsDropdown,\n      years: yearsDropdown\n    };\n\n\n    clearAllSearchBtn.addEventListener(\"click\", () => {\n      searchInput.value = \"\";\n\n      Object.values(dropdownsState).forEach(state => {\n        state.reset();\n      });\n\n      clearSearchBtn.style.display = \"none\";\n      searchIcon.style.display = \"flex\";\n      selectedTypes = [{\n        label: \"All\",\n        value: \"all\"\n      }];\n      renderActiveFilters(\n        searchInput.value.trim(),\n        [\n          ...getSelectedFrom(\"topics\").map(t => ({\n            ...t,\n            type: \"topics\"\n          })),\n          ...getSelectedFrom(\"issueArea\").map(t => ({\n            ...t,\n            type: \"issueArea\"\n          })),\n          ...getSelectedFrom(\"programs\").map(t => ({\n            ...t,\n            type: \"programs\"\n          })),\n          ...getSelectedFrom(\"years\").map(t => ({\n            ...t,\n            type: \"years\"\n          })),\n          ...getSelectedFilters().map(f => ({\n            ...f,\n            type: \"type\"\n          })),\n        ]\n      );\n      lastSearchState = initialSearchState;\n      updateFilterStyles();\n      loadPosts();\n      updateAnimationCta()\n    });\n\n\n    function updateGridClass() {\n      if (resourceContainer && resourceContainer.children.length === 1 && resourceContainer.children[0]?.classList\n        ?.contains('block-card-image')) {\n        resourceContainer.classList.remove('grid-three');\n      } else {\n        resourceContainer.classList.add('grid-three');\n      }\n    }\n\n    loadMoreBtn.addEventListener(\"click\", () => {\n      loadPosts(currentPage + 1, true);\n      updateAnimationCta()\n    });\n    updateGridClass();\n    loadPosts();\n    updateAnimationCta();\n    updateFilterStyles();\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-8197","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Resources - New Jersey Future<\/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.njfuture.org\/resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resources - New Jersey Future\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.njfuture.org\/resources\/\" \/>\n<meta property=\"og:site_name\" content=\"New Jersey Future\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/NewJerseyFuture\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-18T21:00:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@NewJerseyFuture\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/resources\\\/\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/resources\\\/\",\"name\":\"Resources - New Jersey Future\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#website\"},\"datePublished\":\"2025-09-15T13:59:07+00:00\",\"dateModified\":\"2025-09-18T21:00:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.njfuture.org\\\/resources\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.njfuture.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#website\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/\",\"name\":\"New Jersey Future\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.njfuture.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#organization\",\"name\":\"New Jersey Future\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/NJF-Footer-Logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/NJF-Footer-Logo.svg\",\"width\":354,\"height\":285,\"caption\":\"New Jersey Future\"},\"image\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/NewJerseyFuture\\\/\",\"https:\\\/\\\/x.com\\\/NewJerseyFuture\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Resources - New Jersey Future","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.njfuture.org\/resources\/","og_locale":"en_US","og_type":"article","og_title":"Resources - New Jersey Future","og_url":"https:\/\/www.njfuture.org\/resources\/","og_site_name":"New Jersey Future","article_publisher":"https:\/\/www.facebook.com\/NewJerseyFuture\/","article_modified_time":"2025-09-18T21:00:48+00:00","twitter_card":"summary_large_image","twitter_site":"@NewJerseyFuture","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.njfuture.org\/resources\/","url":"https:\/\/www.njfuture.org\/resources\/","name":"Resources - New Jersey Future","isPartOf":{"@id":"https:\/\/www.njfuture.org\/#website"},"datePublished":"2025-09-15T13:59:07+00:00","dateModified":"2025-09-18T21:00:48+00:00","breadcrumb":{"@id":"https:\/\/www.njfuture.org\/resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.njfuture.org\/resources\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.njfuture.org\/resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.njfuture.org\/"},{"@type":"ListItem","position":2,"name":"Resources"}]},{"@type":"WebSite","@id":"https:\/\/www.njfuture.org\/#website","url":"https:\/\/www.njfuture.org\/","name":"New Jersey Future","description":"","publisher":{"@id":"https:\/\/www.njfuture.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.njfuture.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.njfuture.org\/#organization","name":"New Jersey Future","url":"https:\/\/www.njfuture.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.njfuture.org\/#\/schema\/logo\/image\/","url":"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-Footer-Logo.svg","contentUrl":"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-Footer-Logo.svg","width":354,"height":285,"caption":"New Jersey Future"},"image":{"@id":"https:\/\/www.njfuture.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/NewJerseyFuture\/","https:\/\/x.com\/NewJerseyFuture"]}]}},"_links":{"self":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/8197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/comments?post=8197"}],"version-history":[{"count":4,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/8197\/revisions"}],"predecessor-version":[{"id":15525,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/8197\/revisions\/15525"}],"wp:attachment":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/media?parent=8197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}