/* 6. Freeze Map */
body.nass-no-scroll {
    overflow: hidden !important;
}

/* ----------------------------------------------------------- */
/* Scrollable Cards Container (Matches Map Height)            */
/* ----------------------------------------------------------- */

#matrix-cards-container {
    /* 1. Set Height to match  map.php height (500px) */
    height: 800px; 
    
    /* 2. Enable Vertical Scrolling */
    overflow-y: auto;
    
    /* 3. CRITICAL: Prevents the whole page from scrolling 
          when you hit the bottom of the cards list */
    overscroll-behavior: contain; 

    /* 4. Hide Scrollbar (Firefox) */
    scrollbar-width: none; 
    
    /* 5. Hide Scrollbar (IE and Edge) */
    -ms-overflow-style: none; 
}
#matrix-pagination {
    position: relative; /* Ensures the shadow sits on top of the container boundary */
    z-index: 10;        /* Pulls it above the scrollable container */
    
    /* x-offset | y-offset | blur | spread | color */
    box-shadow:inset 0px 8px 15px -10px rgba(0, 0, 79, 0.15);
}
/* 6. Hide Scrollbar (Chrome, Safari, Opera) */
#matrix-cards-container::-webkit-scrollbar {
    display: none;
}

button#matrix-back-to-list::before {
	content: "";
    background-image: url(/wp-content/themes/hrb-child/assets/img/arrow-prev-white.svg);
	display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
}
button#matrix-back-to-list::after {
	content: none;
}

.matrix-single-view-controls {
    margin-bottom: 10px;
}

/* Ensure the sticky container stays on top */
.nass_filters {
    z-index: 2 !important; /* Must be higher than the dropdown */
    background: white; /* Ensure it's not transparent */
}

/* Default: Hide Cross, Show Funnel */
svg.filter-icon.icon-cross {
	display: none;
}
svg.filter-icon.icon-funnel {
	display: block;
}

/* When Open: Hide Funnel, Show Cross */
.filter-button.is-open .icon-funnel {
	display: none !important;
}
.filter-button.is-open .icon-cross {
	display: block !important;
}
	
.search-filters-container {
  display: flex;
  padding: 14px 24px 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 79, 0.1);
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}

.nass_filters {
    margin-bottom: 63px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
}
body.filters-open .nass_filters {
    position: static !important; /* Forces it to sit at the top of the page flow */
    z-index: 0 !important;       /* Lowers priority so dropdown can cover it */
}

div#nass-filter-form {
    margin-top: 11px;
}
button.map-search-button::before {
    display: none;
}

button.map-search-button {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.filters-title {
  color: #434967;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.filters-content {
    display: flex;
    align-items: center;
	  width: 100%;
	   gap: 24px;

}

.search-section {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}

/* Wrapper to hold the input and the X */
.clearable-wrapper {
    position: relative;
    display: block; /* or inline-block depending on your layout */
    width: 100%;
}

/* The X Button */
.clear-input-btn {
    position: absolute;
    right: 10px;      /* Distance from right */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 18px;
    font-weight: bold;
    display: none;    /* Hidden by default */
    z-index: 10;
    line-height: 1;
}

.clear-input-btn:hover {
    color: #333;
}

/* Add padding to input so text doesn't go under the X */
.pac-target-input {
    padding-right: 30px !important; 
}

.filter-section {
  margin-left: auto;
  flex-shrink: 0;
}

.search-form {
     display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
}

.search-input-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  height: 48px;
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
  border-top: 2px solid #1218c6;
  border-bottom: 2px solid #1218c6;
  border-left: 2px solid #1218c6;
  border-right: none;
  background-color: #fff;
  color: #72778d;
  font-family: 'Apercu';
  font-weight: 500;
  font-size:16px;
  line-height:24px;
  outline: none;
}

.search-input::placeholder {
  color: #72778d;
}

.search-input:focus {
  border-color: #00f;
}

.search-button {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
  background-color: #00f;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-button:hover {
  background-color: #0000cc;
}

.search-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}


.search-icon-wrapper {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.search-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.split-button {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #00f;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-left: 8px;
}

form#nass-search-form input.search-input.autocomplete {
	border-radius: 4px 0 0 4px;
	border-top: 2px solid var(--Primary-Dark-Blue, #1218C6);
	border-bottom: 2px solid var(--Primary-Dark-Blue, #1218C6);
	border-left: 2px solid var(--Primary-Dark-Blue, #1218C6);
	background: var(--Base-White, #FFF);
    min-width: 578px;
}

.split-button:hover {
  background-color: #0000cc;
}

.split-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.fork-icon-wrapper {
  flex-shrink: 0;
  position: relative;
}

.fork-icon {
  width: 16px;
  height: 21px;
  position: absolute;
  left: 6px;
  top: 3.5px;
}

.filter-section {
 display: flex;
    margin-left: auto;
    flex-shrink: 0;
    justify-content: flex-end;
}


.filter-button {
  display: flex;
  height: 48px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  width: 99px;
  box-sizing: border-box;
  background-color: #00f;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.filter-button:hover {
  background-color: #0000cc;
}

.filter-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.filter-button-text {
  color: #fff;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:24px;
}

.filter-icon {
  width: 24px;
  height: 24px;
  fill: none;
}

/* Service Provider Card Styles */
.service-provider-card {
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid #1218c6;
    position: relative;
    font-family: "Apercu";
    background-color: #fff;
	margin-bottom: 15px;
}

/* Header Styles */
.card-header {
    width: 100%;
}

.service-tags {
    display: flex;
    padding-bottom: 8px;
    align-items: flex-start;
    gap: 32px;
    position: relative;
	align-items: center;
}
address.contact-text {
    margin: 0;
}

.service-type {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.funding-indicator {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    position: relative;
    background-color: #009;
}

.service-label {
    color: #434967;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:22px;
	    width: 85%;
}

.user-types {
    display: flex;
    width: 199px;
    justify-content: space-between;
    align-items: center;
    position: relative;
	gap: 32px;
}
.user-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    position: relative;
}

.user-label {
    color: #434967;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:22px;
}

/* Main Content Styles */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    width: 100%;
}


.provider-name {
    color: #1218c6;
    position: relative;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    font-family: 'Apercu';
    margin: 0;
}

.description {
    width: 363px;
    color: #3998b5;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size: 16px;
	line-height:22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.description-text {
    color: #222534;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
    margin: 0;
}

.read-more-link {
    color: #3998b5;
    text-decoration: underline;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
}

.read-more-link:hover {
    text-decoration: none;
}

.read-more-link:focus {
    outline: 2px solid #1218c6;
    outline-offset: 2px;
}

/* Contact Info Styles */
.contact-info {
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;	
    gap: 10px;
    width: 100%;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    position: relative;
}
.contact-item {
    display: flex;
    align-items: flex-start;  
    gap: 8px;
}

.contact-icon {
    width: 24px;      /* same size for both */
    height: 24px;
    flex: 0 0 24px;   /* don’t shrink when text wraps */
}


.contact-icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

.contact-text {
    color: #222534;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:22px;
    text-decoration: none;
    font-style: normal;
}

.contact-text:hover {
    text-decoration: underline;
}

.contact-text:focus {
    outline: 2px solid #1218c6;
    outline-offset: 2px;
}

/* Provider Details Styles */
.provider-details {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
	padding-top: 16px;
	flex-direction: column;
    gap: 18px;
}

.details-grid {
    display: flex;
    gap: 40px;
	width: 100%;
	padding-bottom: 10px;
}


.detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.detail-label {
    color: #72778d;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:22px;
    margin: 0;
    font-size: 16px;
}

.detail-value {
    color: #434967;
    position: relative;
	font-family: 'Apercu';
	font-weight: 500;
	font-size:16px;
	line-height:22px;
    margin: 0;
}

/* Footer Styles */
.card-footer {
    align-self: stretch;
    width: 100%;
}

.verification-note {
    align-self: stretch;
    color: #72778d;
    position: relative;
    font: 500 16px/22px "Apercu Pro";
    margin: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-provider-card {
        border-color: #000;
    }

    .provider-name {
        color: #000;
    }

    .contact-icon path {
        stroke: #000 !important;
        fill: #000 !important;
    }
}


    .nass_cards,
    .nass_map {
        display: inline-block;
        vertical-align: top;
        margin-bottom: 0;
    }

    .nass_cards {
        box-sizing: border-box;
		margin-right:15px;
    }


article#post-30526 {
	padding: 0 32px;
}

.split-button-wrapper {
    position: relative;       /* key: anchors dropdown */
    display: inline-block;
	z-index: 1;
}

.advanced-route-panel {
    position: absolute;
    top: 0%;                /* appears directly under button */
    right: 0;                 /* align right edge with button */
    background: white;
    padding: 24px 0 0;
    gap: 24px;
    display: flex;
    width: 684px;
	flex-direction: column;
	z-index: -1;

    /* Dropdown animation */
    transform: translateY(-5px);
    transition: opacity .2s ease, transform .2s ease;
}

.advanced-route-panel.show {
    opacity: 1;
    transform: translateY(0);
}

.route-field {
    display: flex;
    align-items: center;
    gap: 8px; /* space between icon and input */
}

.route-field svg {
    flex-shrink: 0; /* prevents icon from shrinking */
}

.route-field input {
    flex: 1; /* makes input take remaining width */
}


.route-field input,
.route-field select {
    padding: 7px 8px;
    border: none;
    width: 100%;
}

.route-directions {
    border-radius: 4px;
    border: 2px solid var(--Primary-Dark-Blue, #1218C6);
    background: var(--Base-White, #FFF);
    padding: 12px 16px;
}

.filter-dropdown-wrapper {
    position: relative;
}

.filter-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    width: 320px;
    background: #fff;
    z-index: 99999;
}

/* Accordion styling */
.accordion-item {
    border-top: 1px solid var(--Primary-Blue-300, #99F);
    background: var(--Base-White, #FFF);
}
button.accordion-header:focus {
	outline:none;
}
.accordion-content input[type="checkbox"]:focus {
    outline: none;
}

.accordion-header {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    padding: 6px 0;
    display: flex;
	line-height: 22px;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
	padding: 10px 16px;
}

.accordion-content {
    display: none;
	padding-top: 10px;
}

.accordion-arrow {
    transition: transform 0.2s ease;
}

.accordion-header.active .accordion-arrow {
    transform: rotate(180deg);
}


.accordion-content input[type="checkbox"] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--Primary-Navy-Blue, #009);
	flex: 0 0 auto;     
}
.accordion-content label {
    color: var(--Secondary-Grey-Blue-600, #222534);
    font-family: 'Apercu';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    gap: 8px;
}
label.accordion_filters {
    padding: 10px 32px;
}

/* Custom checkbox styling for .accordion_filters */
.accordion_filters {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px; /* Adjust padding as needed for label background effect */
  transition: background-color 0.2s ease, transform 0.1s ease; /* Smooth transitions */
}

.accordion_filters input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 4px;
  border: 1px solid var(--Primary-Navy-Blue, #009);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.accordion_filters input[type="checkbox"]:hover {
  border-color: var(--Primary-Primary-Blue, #00F); /* Optional: hover border */
}

.accordion_filters input[type="checkbox"]:checked {
  border-color: var(--Primary-Primary-Blue, #00F);
  color: var(--Primary-Primary-Blue, #00F); /* Sets currentColor for SVG tick */
  background: transparent;
}

.accordion_filters input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M11.6667 1L4.33333 8.33333L1 5' stroke='%230000FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.accordion_filters input[type="checkbox"] {
  border: 1px solid var(--Primary-Navy-Blue, #009) !important;
  /* Add more native styles if needed */
}

/* LABEL BG WHEN CHECKED (Method 1: Modern CSS - :has() ) */
.accordion_filters:has(input:checked) {
  background: var(--Primary-Blue-100, #E5E5FF) !important;
}

/* OR Method 2: JS Adds 'checked' Class (Universal Fallback) */
.accordion_filters.checked {
  background: var(--Primary-Blue-100, #E5E5FF) !important;
  /* Same padding etc. */
}


.mode-radio-group {
    display: flex;
    gap: 12px;
}

.mode-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    transition: 0.2s;
	border-radius: 4px;
	border: 2px solid var(--Primary-Primary-Blue, #00F);
	background: var(--Base-White, #FFF);
}

/* Hide the radio inputs */
.mode-icon input[type="radio"] {
    display: none;
}

/* Default icon style */
.mode-icon svg {
    transition: 0.2s;
}

/* Highlight selected icon */
label.mode-icon.selected {
    background: #00F;
}

label.mode-icon.selected svg path {
    fill: #FFF;
}

.fork-icon-wrapper .icon-cross {
    display: none;
}

#advanced-route-panel {
    display: none;
}
#advanced-route-panel.is-active {
    display: block !important;
}
.route-mode {
    padding-bottom: 34px;
}


/* Override Google's Positioning logic */

/* --- GOOGLE AUTOCOMPLETE OVERRIDES --- */

/* 1. Prepare the Wrappers (Main Search & Route Fields) */
.search-input-container, 
.route-field {
    position: relative !important; /* Establishes the anchor point */
    overflow: visible !important;  /* Allows dropdown to hang outside */
}

/* 2. Force Dropdown Position for BOTH contexts */
.search-input-container .pac-container,
.route-field .pac-container {
    top: 100% !important;       /* Sit directly below the input */
    left: 0 !important;         /* Align left edge */
    width: 100% !important;     /* Match width of the input */
    position: absolute !important; 
}


/* Ensure the wrapper allows the dropdown to overflow visible */
.search-input-container {
    position: relative;
    overflow: visible !important; 
}

/* Add this EXACTLY as provided (with your vars/fallbacks) */
.pagination-container {
  max-width: 442px;
  padding: 0 16px;
}

.pagination-wrapper {
  display: flex;
  width: 100%;
  padding-top: 24px;
  align-items: center;
  gap: 32px;
  justify-content: center;
}

.nav-button {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: start;
  margin: auto 0;
  padding: 4px 8px 4px 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav-button:hover {
  opacity: 0.8;
}

.nav-button:focus {
  outline: 2px solid var(--Primary-Dark-Blue, #1218c6);
  outline-offset: 2px;
}

.prev-button {
  width: 44px;
  padding: 4px 8px 4px 4px;
}

.next-button {
  width: 46px;
  padding: 4px 4px 4px 10px;
}

.nav-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 32px;
  align-self: stretch;
  margin: auto 0;
}

.page-numbers {
  align-self: stretch;
  display: flex;
  min-width: 240px;
  align-items: center;
  gap: 8px;
  color: var(--Primary-Dark-Blue, #1218c6);
  white-space: nowrap;
  justify-content: start;
  margin: auto 0;
  font: 500 24px/1 Apercu Pro, -apple-system, Roboto, Helvetica, sans-serif;
}

.page-button {
  border-radius: 100px;
  align-self: stretch;
  display: flex;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  margin: auto 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.page-button:hover {
  background-color: rgba(18, 24, 198, 0.1);
}

.page-button:focus {
  outline: 2px solid var(--Primary-Dark-Blue, #1218c6);
  outline-offset: 2px;
}

.page-button:active {
  transform: scale(0.95);
}

.page-button.inactive .page-number {
  color: var(--Secondary-Grey-Blue-300, #a1a4b3);
}

.page-button.active .page-number {
  color: var(--Primary-Dark-Blue, #1218c6);
}

/* Add this CSS for initial + toggled states */
.nass_cards {
    display: none;  /* HIDDEN INITIALLY */
}

.nass_map {
    width: 100%;  /* FULL WIDTH INITIALLY */
}
.entry-content.show-results {
    display: flex;
    flex-wrap: wrap;   
	justify-content: flex-start;
}

/* Filters full width */
.entry-content.show-results .nass_filters {
    flex: 0 0 100%;
    width: 100%;
}
/* AFTER BUTTON CLICK: Cards show LEFT (40%), Map RIGHT (60%) */
.entry-content.show-results .nass_cards {
    display: inline-flex !important;
	flex: 0 0 30%;
    max-width: 30%;
    box-sizing: border-box;
	flex-direction: column;
}

.entry-content.show-results .nass_map {
    flex: 0 0 69%;
    max-width: 69%;
    box-sizing: border-box;
    min-width: 0;    
}

.filter-close {
    display: none;
}

/* Wrapper config - Google Maps will handle the positioning on the map */
.matrix-map-control-wrapper {
    margin: 10px; 
    font-family: Roboto, Arial, sans-serif;
    cursor: pointer;
    /* Important: Remove position relative if it interferes, but usually okay */
    display: none; /* Keep hidden until JS moves it to the map to prevent flickering */
}

/* The White Button */
.matrix-layer-btn {
    background: rgb(255, 255, 255);
    padding: 0px;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

.matrix-layer-btn:hover {
    background-color: #ebebeb;
}

/* The Dropdown Menu */
.matrix-layer-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 45px; /* Pushes it below the button */
    right: 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 15px;
    width: 220px;
    text-align: left;
    cursor: default;
    z-index: 1000;
}

/* Class to Toggle Visibility */
.matrix-layer-menu.is-visible {
    display: block;
}

/* Content Styles */
.matrix-layer-menu h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.layer-item {
    margin-bottom: 8px;
    font-size: 13px;
    color: #555;
}

.layer-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.layer-item input {
    margin-right: 8px;
}
.mobile-panel-header {
    display: none;
}
.mobile-panel-footer {
	display:none;
}

.user-type {
    display: flex;
    width: 95px;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    position: relative;
}

.gm-style-iw.gm-style-iw-c {
    padding:  0 10px 30px 10px !important;
}

/* Hide the details section by default */
.provider-details {
    display: none;
}

.see_more {
    display: inline-block;
    color:  #3998B5 !important;
    font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	margin-left: auto; /* This pushes the link to the very right */
    white-space: nowrap; /* Prevents "See more" from wrapping if the space is tight */
}

/* This hides text visually but leaves it for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


#desktop-reset-filters {
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #00f !important;
    border: none;
    cursor: pointer;
    color: #fff;
    margin: 10px 16px;
	padding: 8px 16px;
    color: #fff;
    font-family: 'Apercu';
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

/*========START RESPONSIVE=====*/
@media (max-width: 1570px) {
	.entry-content.show-results .nass_map {
		flex: 0 0 58%;
		box-sizing: border-box;
		min-width: 0;  
	}
	
	.entry-content.show-results .nass_cards {
		display: inline-flex !important;
		flex: 0 0 40%;
		max-width: 40%;
		box-sizing: border-box;
		flex-direction: column;
	}
}
@media (max-width: 1200px) {
	.entry-content.show-results .nass_map {
		flex: 0 0 50%;
		box-sizing: border-box;
		min-width: 0;  
	}
	
	.entry-content.show-results .nass_cards {
		display: inline-flex !important;
		flex: 0 0 47%;
		max-width: 47%;
		box-sizing: border-box;
		flex-direction: column;
	}
}
/* Apply margin ONLY when the 'initial-load-push' class is present */
@media (max-width: 1024px) {
	
	#desktop-reset-filters  {
		display: none;
	}

	body.page-id-30526 .site-header.headroom--unpinned {
    transform: none !important; /* Stops the header from sliding up */
    top: 0 !important;
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.nass_filters {
    top: 100px;
}
    #matrix-nass-map.initial-load-push {
        margin-top: 100px !important;
    }
}

@media (max-width: 1025px) {
	div#matrix-nass-map {
		margin-top: 100px;
	}
	div#matrix-nass-map {
		height:500px !important;
	}
	#matrix-cards-container {
		height: auto;
        overflow: auto;
	}
	
	.page-id-30526.page-child.parent-pageid-2594 .entry-content{
		margin: 0;
	}
	
	article#post-30526 {
		padding: 0;
	}
	body.wp-singular.page-template-default.page.page-id-30526.page-child.parent-pageid-2594.logged-in.admin-bar.wp-theme-hrb.wp-child-theme-hrb-child.mega-menu-header-menu.customize-support {
		top: 0 !important;
		padding-top: 84px;
	}
	.filters-content {
		gap: 16px;
		width: auto;
	}
	.nass_cards {
		max-width: 100%; 
		padding: 20px 15px 0 15px;
	}
	.split-button {
		width: 40px;
		height: 40px;
	}
	.service-provider-card {
		width: 100%
	}
	.nass_cards,
	.nass_map {
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}
	.entry-content.show-results .nass_cards  {
		width: 100%;
		max-width:100%;
	}

.service-provider-card a, 
.card-extra-content {
    overflow-wrap: break-word;
    word-break: break-word;
	width: 95%;
}
	header.entry-header {
		display: none;
	}
	
	.entry-content {
		display: flex;
		flex-direction: column;
	}
    .nass_cards {
        order: 3;
    }
	.nass_filters {
     margin-bottom: 0;
	}
	
	.search-section {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		width: 100%;
		align-content: flex-start;
		align-items: flex-start;
	}
	
	header.filters-title {
		display: none;
	}
	
	form#nass-search-form input.search-input.autocomplete {
		min-width: auto;
		height: 40px;
	}
	.search-filters-container {
		display: flex;
		align-items: flex-start;
	}
	.filter-button {
		max-width: 85px;
        height: 40px;
        margin-right: 10px;
  }
  
  button.map-search-button {
    height: 40px;
  }
  .filter-button-text {
    color: #fff;
    font-family: 'Apercu';
    font-weight: 700px;
    font-size: 12px;
    line-height: 24px;
	}
	
	.entry-content.show-results .nass_map {
		width: 100% !important; 
        flex: 0 0 100%;
        max-width: 100%;
	}


/* Mobile Styling */
.mobile-panel-footer {
        display: flex;
        gap: 12px; /* Space between buttons */
        padding: 16px;
        background-color: #fff;
        border-top: 1px solid #eee;
        position: sticky;
        bottom: 0;
        z-index: 100;
    }

    /* 2. Style the Primary Button (Show Results) */
    .nass-apply-btn {
        flex: 2;
		background-color: #00F;
		border: none;
		padding: 14px;
		border-radius: 4px;
		cursor: pointer;
		color: #FFF;
		font-size: 15px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px;
		font-family: 'Apercu';
    }

    /* 3. Style the Reset Button */
    .nass-reset-btn {
		flex: 1;
		background-color: #fff;
		border: 2px solid var(--Primary-Primary-Blue, #00F);
		padding: 14px;
		border-radius: 4px;
		color: var(--Primary-Primary-Blue, #00F);
		text-align: center;
		font-size: 15px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px;
		font-family: 'Apercu';
	}
	.detail-item {
		width: 100%; 
	}
	/* Hide the Filter Section (The big filter button on the right) */
    .search-filters-container.search-expanded .filter-section {
        display: none !important;
    }

    /* Hide the Search Icon Button and Split Button */
    .search-filters-container.search-expanded .split-button-wrapper {
        display: none !important;
    }
	.search-filters-container.search-expanded form#nass-search-form input.search-input.autocomplete {
        width: 100%;
        min-width: 500px;
    }
	 
}

/* --- BASE STYLES FOR PANELS (Hidden by default) --- */
/* --- MOBILE APP LAYOUT FIX --- */
@media (max-width: 991px) {	
	.search-filters-container.search-expanded form#nass-search-form input.search-input.autocomplete {
        width: 100%;
        min-width: 350px;
    }
	.details-grid {
		display: flex;
		align-items: flex-start;
		gap: 18px;
		position: relative;
		flex-direction: column;
	}
	
	.card-content {
        padding-right: 24px;
    }
	
    .provider-name {
        width: 100%;
    }
	
    .description {
        width: 100%;
        max-width: 350px;
    }
	
    .provider-details {
        gap: 200px;
    }

    /* 1. KEEP SEARCH BAR VISIBLE ON TOP */
   
	#advanced-route-panel,
    #filter-dropdown {
        width: 100% !important;       /* Override desktop 320px */
        left: 0 !important;           /* Override desktop positioning */
        right: 0 !important;
        position: fixed !important;   /* Override desktop absolute */
        top: 16%;        
        display: none;                /* Hide by default */
        z-index: 1;		 
		 /* Full Screen Fill */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        
        /* Styling */
        background-color: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
    }
	
    /* 2. THE FILTER PANEL (Underneath Search Bar) */
    #advanced-route-panel.is-active,
    #filter-dropdown.is-active {
        display: block; /* Ensure it's visible */
        position: fixed;
        
        /* START POSITION: Bottom of search bar */
        /* If panel covers search bar, INCREASE this. If gap, DECREASE. */
        top:162px; 
        
        /* Full Screen Fill */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        
        /* Styling */
        background-color: #fff;
        z-index: 2; /* Below search bar, above map */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
    }

    /* 3. PANEL HEADER (Close Button) */
    .mobile-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        background-color: #ffffff;
        border-bottom: 1px solid #eee;
    }

    .mobile-panel-header h3 {
        margin: 0;
        color: #000099;
        font-family: 'Apercu', sans-serif;
        font-weight: 600;
        font-size: 18px;
    }

    /* 4. MAKE CLOSE BUTTON BLUE (Visible) */
    .filter-close svg, .filter-close svg path,
    .panel-close-btn svg, .panel-close-btn svg path {
        stroke: #0000FF !important; /* Forces blue color */
    }
    
    .filter-close, .panel-close-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
    }
     
    s.route-mode, .route-directions {
		margin: 0 16px;
    }
	.route-mode {
		padding-bottom: 24px;
	}
	.route-field {
		justify-content: flex-end;
		margin: 0 16px;
	}
		
	.filter-button.is-open .filter-button-text {
        color: #fff;
        font-family: 'Apercu';
        font-weight: 700px;
        font-size: 12px;
        line-height: 24px;
        display: none;
    }
	.filter-button.is-open {
		width: auto;
	}
	.accordion-content {
		padding-bottom: 10px;
		padding-top: 0;
	}
	

	.user-type {
		display: flex;
		width: 95px;
		align-items: center;
		gap: 9px;
		flex-shrink: 0;
		position: relative;
	}

	.search-section {
	max-width: 100%;
	}
	.filters-title {
	font-size: 16px;
	line-height: 22px;
	}
	div#nass-filter-form {
		margin-top: 0px;
	}
	.search-input {
	padding: 10px 14px;
	font-size: 15px;
	}
	.service-provider-card {
        width: 100%;
        padding: 24px 0 16px 24px;
    }
}
@media (max-width: 768px) {
	.search-filters-container.search-expanded form#nass-search-form input.search-input.autocomplete {
        width: 100%;
        min-width: 280px;
    }
	form#nass-search-form input.search-input.autocomplete {
		min-width: auto;
        max-width: 145px;
		height: 40px;
	}
	.filters-title {
		font-size: 14px;
		line-height: 20px;
	}
	
	.search-input {
		padding: 8px 12px;
		height: 40px;
		font-size: 14px;
		border-radius: 4px;
		border: 2px solid #1218c6;
	}
	.split-button {
		width: 40px;
		height: 40px;
	}
	.service-provider-card {
		width: 100%;
		padding: 20px 0 16px 20px;
	}

	.service-tags {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}
	.user-types {
		width: 100%;
		justify-content: flex-start;
		gap: 20px;
	}
	.user-type {
		width: auto;
	}
	.search-button {
	height: 40px;
	width: 40px;
	padding: 8px;
	border-radius: 4px;
	}
    .card-content {
        padding-right: 20px;
    }
    .provider-name {
        width: 100%;
        font-size: 20px;
        line-height: 26px;
    }
    .description {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
    }
    .contact-item {
        align-self: auto;
    }
    .provider-details {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

@media (max-width: 365px) {
	form#nass-search-form input.search-input.autocomplete {
        max-width: 100px;
    }
}