/* ==========================================================================
   Header Search Overlay
   Colours, radii and spacing below were measured directly from the
   provided SVG mockups (search-main.svg / search-main-drop-down.svg).
   Fonts are a placeholder (the SVG text was exported as outlines, so no
   font name survived) — swap --hs-font-heading / --hs-font-body for your
   theme's real fonts.

   
   ========================================================================== */

/* ==========================================================================
AI / DEVELOPER GUIDELINES: RESPONSIVE MEDIA QUERIES
--------------------------------------------------------------------------
- ALL media queries are consolidated at the bottom of this stylesheet.
- When adding responsive styling, check if the target @media query already exists in the bottom section. also make sure if you are adding any styling block then should not already exist and if you think that any kind of styling block then use that class insted of adding new block of css and if need any additional or want to alter any styling then use the estra class in the parent.
- IF IT EXISTS: Append the new styles inside that same @media block.
- IF IT DOES NOT EXIST: Append the new @media query at the bottom while
	maintaining proper screen resolution hierarchy.
========================================================================== */

/* -------------------------------------------------------------------- */
/* Trigger button (goes in header.php)                                   */
/* -------------------------------------------------------------------- */

.header-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.header-search-trigger:hover,
.header-search-trigger:focus-visible {
  background-color: #e2f8ff;
}

.hs-icon {
  display: block;
}

/* -------------------------------------------------------------------- */
/* Overlay / modal shell                                                 */
/* -------------------------------------------------------------------- */

.header-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 1);
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-family: var(--font-family-figtree);
  color: var(--color-black);
}

.header-search-modal[hidden] {
  display: none;
}

.header-search-modal__panel {
  position: relative;
  min-height: 100%;
}

.header-search-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 36px;
  height: auto;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #111;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.logged-in .header-search-close {
  top: 62px;
}

.header-search-modal__inner {
  width: min(1520px, 96%);
  margin: 0 auto;
  padding: 27px 0 40px;
}
.logged-in .header-search-modal__inner {
  padding-top: 59px;
}

/* -------------------------------------------------------------------- */
/* Heading + input                                                      */
/* -------------------------------------------------------------------- */

.header-search-heading {
  font-family: var(--font-family-figtree);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.header-search-form {
  position: relative;
  display: flex;
  align-items: end;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 14px;
  /* margin-bottom: 32px; */
}

.searchresult
  input[type="search"].header-search-input::-webkit-search-cancel-button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.3 5.71L12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.29-6.3z'/%3E%3C/svg%3E")
    no-repeat center;
}

input[type="search"].header-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 26px;
  font-weight: 400;
  color: var(--color-white);
  padding: 0;
  padding-inline: 10px 20px;
}

input[type="search"].header-search-input::placeholder {
  color: #fff;
}

.searchmodal input[type="search"].header-search-input,
.searchmodal input[type="search"].header-search-input::placeholder {
  color: #000;
}

.header-search-submit {
  flex-shrink: 0;
  width: 75px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-secondary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.header-search-submit:hover,
.header-search-submit:focus-visible {
  filter: brightness(0.95);
}

.searchbar.searchmodal {
  margin-bottom: 50px;
}

/* -------------------------------------------------------------------- */
/* Live results                                                         */
/* -------------------------------------------------------------------- */

.header-search-results[hidden],
.header-search-no-results[hidden],
.header-search-default[hidden] {
  display: none;
}

.header-search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gray-100);
}

.header-search-results__list li {
  border-bottom: 1px solid var(--color-gray-100);
}

.header-search-results__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--color-black);
  font-size: 16px;
}

.header-search-results__list a:hover .hs-result-title,
.header-search-results__list a:focus-visible .hs-result-title {
  color: var(--color-accent-sky);
}

.header-search-results__list strong {
  font-weight: 700;
  color: #000;
}

.hs-result-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-black);
  padding: 3px 7px;
  border-radius: 50px;
  white-space: nowrap;
  margin: 0;
  background: var(--color-gray-100);
}

.hs-result-tag.tag-info {
  background: #e1f1ff;
}
.hs-result-tag.tag-program {
  background: #fae1fa;
}
.hs-result-tag.tag-activity {
  background: #fcffd6;
}
/* .hs-result-tag.tag-other { background: var(--color-gray-100); } */

.header-search-view-all {
  display: block;
  text-align: center;
  background: #e2f8ff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 16px;
  margin-bottom: 32px;
}

.header-search-no-results {
  padding: 24px 4px;
  color: #b4b4b4;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------- */
/* Default / idle content                                                */
/* -------------------------------------------------------------------- */

.header-search-columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 54px;
  position: relative;
}

/* .header-search-columns::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 55.4%;
	width: 1px;
	background: var(--color-gray-100);
} */

.search-keywords {
  padding-left: 54px;
  border-left: 1px solid var(--color-gray-100);
}

.header-search-subheading {
  font-weight: 700;
  font-size: 22px;
  color: #1a1a1a;
  margin: 0 0 30px;
}

.header-search-subheading--links {
  margin-top: 40px;
}

.header-search-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-search-faq-list li + li {
  margin-top: 26px;
}

.header-search-faq-list a,
.header-search-faq-list .header-search-faq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.5;
  width: fit-content;
}

.header-search-faq-list p {
  margin: 0;
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
}

.header-search-faq-list .header-search-faq-item a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 700;
}

.header-search-faq-list .hs-icon-faq {
  color: var(--color-accent-sky);
  flex-shrink: 0;
  margin-top: 4px;
}

.header-search-faq-list strong {
  font-weight: 700;
  color: #000;
}

.header-search-faq-list a:hover strong,
.header-search-faq-list a:focus-visible strong,
.header-search-faq-list .header-search-faq-item a:hover {
  color: var(--color-accent-sky);
}

.header-search-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.header-search-keyword {
  display: inline-flex;
  align-items: center;
  background: #e2f8ff;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  padding: 7px 20px;
  border-radius: 6px;
  text-transform: capitalize;
  transition: filter 0.15s ease;
}

.header-search-keyword:hover,
.header-search-keyword:focus-visible {
  filter: brightness(0.97);
  text-decoration: underline;
}

.header-search-keyword .content-link-arrow {
  margin-left: 5px;
  transition: all 0.3s linear;
}
.header-search-keyword:hover .content-link-arrow {
  width: auto;
  opacity: 1;
}

/* -------------------------------------------------------------------- */
/* Popular links bar                                                     */
/* -------------------------------------------------------------------- */

.header-search-popular-links {
  display: flex;
  align-items: stretch;
  background: #fcffda;
  border-radius: 20px;
  overflow: hidden;
}

.header-search-popular-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 60px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 400;
  font-size: 20px;
  position: relative;
}

.header-search-popular-link + .header-search-popular-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: #d2d790;
}

.header-search-popular-link__arrow {
  flex-shrink: 0;
  width: 38px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------- */
/* Live Search Autocomplete Form & Dropdown overrides                   */
/* -------------------------------------------------------------------- */

.live-search-container {
  position: relative;
}

.live-search-container .header-search-results__list a {
  padding: 16px 24px;
}

.live-search-container .header-search-view-all {
  margin-bottom: 0;
  padding: 16px 24px;
}

.live-search-container .header-search-no-results {
  padding: 16px 24px;
  margin-bottom: 0;
}

.screen-reader-text {
  display: none;
}

/* White search form variant inside dark Search Results Page Banner */
.search-banner .header-search-form {
  border-bottom: 2px solid #fff;
  margin-bottom: 0; /* Align nicely in the banner */
}

input[type="search"].header-search-input {
  color: #fff;
  border: none;
}

input[type="search"].header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Search Result page */
.pdop-logo {
  margin-bottom: 77px;
}
.search-banner {
  padding-block: 98px 68px;
}
.search-banner .inner_header_row {
  display: block;
  margin: 0;
}
.search-banner .inner_header {
  background: transparent;
  padding: 0;
  border-radius: initial;
  backdrop-filter: unset;
}
.search-banner .page_header_content {
  gap: 28px;
}

.search-main {
  padding: 40px 0 95px;
  background: #ecf0f8;
}
.search-page-header {
  margin-bottom: 16px;
}
.search-page-header h2 {
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
}

/* Grid layout for search results cards */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 30px;
  /* margin-bottom: 40px; */
}

.search-result-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid var(--color-gray-100);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  height: 100%;
}

.search-result-card:hover {
  /* transform: translateY(-4px); */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.03);
}

.search-result-card-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 185px;
  justify-content: space-between;
  flex: 1;
}

.search-result-card-header {
  margin-bottom: 12px;
  margin-left: -14px;
  margin-top: -14px;
}

.search-result-card-title {
  font-family: var(--font-family-figtree);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 24px;
}

.search-result-card-title a {
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.15s ease;
}

.search-result-card-title a:hover {
  color: var(--color-accent-sky);
}

.search-result-card-footer {
  margin-top: auto;
}

/* Search results CTA button style */
/* .search-result-cta.pdop_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	background: #fff !important;
	border: 1.5px solid var(--color-primary) !important;
	color: var(--color-primary) !important;
	border-radius: 22px;
	height: 44px;
	padding: 0 4px 0 20px;
	width: 100%;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.search-result-cta.pdop_btn:hover,
.search-result-cta.pdop_btn:focus-visible {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.search-result-cta.pdop_btn:hover .cta-icon circle,
.search-result-cta.pdop_btn:focus-visible .cta-icon circle {
	fill: var(--color-secondary);
}

.search-result-cta.pdop_btn:hover .cta-icon path,
.search-result-cta.pdop_btn:focus-visible .cta-icon path {
	stroke: #fff;
} */

.search-result-cta {
  width: 100%;
}
.search-result-cta .cta-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.search-result-cta .cta-icon circle {
  transition: fill 0.2s ease;
}

.search-result-cta .cta-icon path {
  transition: stroke 0.2s ease;
}

/* -------------------------------------------------------------------- */
/* search tab nav                                                            */
/* -------------------------------------------------------------------- */

.pdop_program_top_navigation_item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px;
  gap: 10px;
  flex: 1;
  border-radius: 20px;
  background-color: #eaefff;
  color: #3e3e3e;
  font-size: var(--body-base);
  font-weight: var(--fw-semibold);
  border: 1px solid #a9b4d7;
  transition: all 250ms ease-in-out;
  min-width: 225px;
  text-align: center;
}

.logged-in .rental_top-navigation-bar {
  top: 143px;
}
.rental_top-navigation-bar {
  position: sticky;
  top: 111px;
  z-index: 9;
  scroll-behavior: smooth;
}
.rental_top-navigation-bar .pdop_program_top_navigation_item:hover {
  border-color: var(--color-primary);
}

.pdop_program_top_navigation_item:is(.pdop_nav_active) {
  border-color: transparent;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pdop_program_top_navigation_item:is(.pdop_nav_active) svg path {
  stroke: #ffffff;
  /* fill: #ffffff; */
}

.pdop_program_top_navigation_item svg path {
  stroke: #000000;
  /* fill: #000000; */
}

.rental_top-navigation-bar .pdop_program_top_navigation {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background-color: #ecf0f8;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  z-index: 999;
  scrollbar-width: thin;
}
.rentals-permits-navigation-grid {
  position: sticky;
  top: 144px;
  z-index: 9;
}

/* -------------------------------------------------------------------- */
/* Search Mode Tabs (AI Answer / Normal Search)                          */
/* -------------------------------------------------------------------- */

.search-mode-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 0;
  justify-content: center;
}

.search-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  background: transparent;
  font-family: var(--font-family-figtree);
  font-weight: 600;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
  border: solid 1px var(--color-primary);
  border-radius: 12px;
}

.search-mode-tab:hover {
  color: var(--color-primary);
}

.search-mode-tab.active {
  color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.search-mode-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tab panels */
.search-mode-panel {
  display: none;
}

.search-mode-panel.active {
  display: block;
}

/* AI Answer placeholder panel */
.ai-answer-container {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 40px;
  overflow: hidden;
}

.ai-answer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ai-answer-header .ai-sparkle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: var(--color-primary);
  flex-shrink: 0;
}

.ai-answer-header h3 {
  font-family: var(--font-family-figtree);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-black);
  margin: 0;
}

.ai-answer-body {
  color: #64748b;
  font-size: 16px;
  line-height: 1.7;
}

.ai-answer-body p {
  margin: 0 0 16px;
}

.ai-answer-placeholder-text {
  color: #94a3b8;
  font-size: 15px;
  font-style: italic;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */

@media (max-width: 780px) {
  .header-search-modal__inner {
    padding: 72px 18px 48px;
  }

  .header-search-heading {
    font-size: 22px;
  }

  .header-search-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .header-search-columns::after {
    display: none;
  }

  .header-search-popular-links {
    flex-direction: column;
    border-radius: 14px;
  }

  .header-search-popular-link + .header-search-popular-link::before {
    display: none;
  }

  .header-search-popular-link + .header-search-popular-link {
    border-top: 1px solid #d2d790;
  }

  .search-keywords {
    padding-left: 0;
    border-left: none;
  }

  /* Search mode tabs responsive */
  .search-mode-tabs {
    gap: 0;
  }

  .search-mode-tab {
    padding: 12px 18px;
    font-size: 14px;
    gap: 6px;
    flex: 1;
    justify-content: center;
  }

  .ai-answer-container {
    padding: 24px 20px;
  }

  .ai-answer-header h3 {
    font-size: 18px;
  }
}

/* Result tag background colors */
.hs-result-tag.tag-info {
  background: #e1f1ff;
}
.hs-result-tag.tag-program {
  background: #fae1fa;
}
.hs-result-tag.tag-activity {
  background: #fcffd6;
}

/* -------------------------------------------------------------------- */
/* Search Load More / Show Less                                          */
/* -------------------------------------------------------------------- */

.search-results-overflow {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.5s ease,
    opacity 0.4s ease;
}

.search-results-overflow.sr-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
}

.search-results-overflow-inner {
  overflow: hidden;
}

.search-results-overflow-inner > .search-results-grid {
  margin-top: 30px;
}

.search-load-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.search-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-family-figtree);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.search-load-more-btn:hover,
.search-load-more-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(43, 60, 115, 0.2);
}

.search-load-more-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.search-load-more-btn[aria-expanded="true"] .btn-icon {
  transform: rotate(45deg);
}