/* ==========================================================================
   HawkSearch Component Overrides - Greenheck Design System
   --------------------------------------------------------------------------
   This file contains overrides to the base HawkSearch CSS to align with
   the Greenheck design system defined in common.css.
   
   Uses design tokens for:
   - Colors (CSS variables from common.css)
   - Typography (font families, sizes, weights)
   - Spacing (consistent padding/margins)
   - Interactive states (hover, focus, active)
   - Transitions (standard timing functions)
   
   Component hierarchy:
   - Search View (grid/list toggle)
   - Listing Controls (sort, pagination, filters)
   - Guided Navigation (facets, checkboxes)
   - Item Display (results list)
   ========================================================================== */

/* ==========================================================================
   Search View Toggle (Grid/List View)
   --------------------------------------------------------------------------
   Tab-style view switcher with active state indicator using brand colors
   ========================================================================== */
.hawk-searchView {
  margin-bottom: 10px;
  padding: 0;
  border-bottom: 5px solid rgb(var(--color-light-gray));
}

.hawk-searchView .hawk-viewOption {
  position: relative;
  display: inline-block;
  margin-bottom: -5px;
  border-bottom: 5px solid rgb(var(--color-orange));
  transition: var(--transition-base);
}

.hawk-searchView .hawk-viewOption::after {
  content: " ";
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: rgb(var(--color-orange));
}

.hawk-searchView .hawk-viewOption .hawk-viewOptionInner,
.hawk-searchView .hawk-viewOption .hawk-viewOptionInner:visited {
  display: inline-block;
  padding: 5px 15px;
  color: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-family-bold);
  transition: var(--transition-base);
}

.hawk-searchView .hawk-viewOption .hawk-viewOptionInner:hover,
.hawk-searchView .hawk-viewOption .hawk-viewOptionInner:focus {
  color: rgb(var(--color-dark-blue));
}

.hawk-searchView .hawk-viewOptionOff {
  border-color: rgb(var(--color-light-gray));
}

.hawk-searchView .hawk-viewOptionOff .hawk-viewOptionInner {
  color: rgb(var(--color-text-gray));
  font-weight: 400;
  font-family: var(--font-family-medium);
}

/* ==========================================================================
   Listing Controls Container
   --------------------------------------------------------------------------
   Container for sort, filter, and pagination controls with design system
   borders and spacing
   ========================================================================== */
.hawk-listingControls {
  position: relative;
  margin-bottom: 12px;
  padding: 1px;
  background: rgb(var(--color-white));
  border: 1px solid rgb(var(--color-border-gray));
  border-radius: 4px;
}

/* ==========================================================================
   Main Controls (Sort & Filter)
   --------------------------------------------------------------------------
   Primary control bar using brand dark blue background
   ========================================================================== */
.hawk-listingControls .hawk-mainControls {
  padding: 7px 10px;
  background: rgb(var(--color-dark-blue));
  border-radius: 3px 3px 0 0;
}

/* ==========================================================================
   Sub Controls (Secondary Actions)
   --------------------------------------------------------------------------
   Secondary control bar using light gray background
   ========================================================================== */
.hawk-listingControls .hawk-subControls {
  padding: 8px 10px;
  background: rgb(var(--color-light-gray));
  border-radius: 0 0 3px 3px;
}

/* ==========================================================================
   Pagination Controls
   --------------------------------------------------------------------------
   Pagination view counter (select styling: common.css `.hs-layout`)
   ========================================================================== */
.hawk-listingControls .hawk-pagination .hawk-viewNumber {
    float: right;
    margin-left: 10px;
    /*color: rgb(var(--color-white));*/
    font-family: var(--font-family-semi-bold);
    font-size: 14px;
}

/* ==========================================================================
   Pagination Links
   --------------------------------------------------------------------------
   Page number links with active state styling
   ========================================================================== */
.hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink,
.hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink:link,
.hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink:visited {
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  text-decoration: none;
  text-align: center;
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-dark-blue));
  font-family: var(--font-family-medium);
  font-size: 14px;
  border-radius: 2px;
  transition: var(--transition-base);
}

.hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink:hover,
.hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink:focus {
  background-color: rgb(var(--color-light-gray));
  outline: 2px solid rgb(var(--color-black));
  outline-offset: 2px;
}

.hawk-listingControls .hawk-pagination .hawk-paging .hawk-pageActive {
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  text-decoration: none;
  text-align: center;
  background-color: rgb(var(--color-orange));
  color: rgb(var(--color-white));
  font-family: var(--font-family-bold);
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
}

.hawk-listingControls .hawk-pagination .hawk-paging .total {
  font-family: var(--font-family-bold);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: rgb(var(--color-white));
}

/* ==========================================================================
   Tag Cloud
   --------------------------------------------------------------------------
   Tag cloud facet with border styling
   ========================================================================== */
.hawk-TagCloud.hawk-cloud-bordered {
  border: 1px solid rgb(var(--color-border-gray));
  border-radius: 4px;
  padding: 8px;
}

/* ==========================================================================
   Facet Swatches & Size Values
   --------------------------------------------------------------------------
   Color/pattern swatches and size selector styling
   ========================================================================== */
.hawk-guidedNavWrapper .hawk-navGroup .hawkfacet-swatch li,
.hawk-guidedNavWrapper .hawk-navGroup .size-value:hover {
  color: rgb(var(--color-tag-gray));
  transition: var(--transition-base);
}

/* ==========================================================================
   Slide Facet (Range Slider)
   --------------------------------------------------------------------------
   Range slider styling for numeric facets
   ========================================================================== */
.hawk-slideFacet .hawk-slideRange {
  margin-bottom: 10px;
  background: rgb(var(--color-border-gray));
  border-radius: 4px;
  height: 4px;
}

/* ==========================================================================
   Custom Checkbox Styling
   --------------------------------------------------------------------------
   Custom checkbox appearance for facet filters matching design system
   checkbox pattern (20px square, 4px radius)
   ========================================================================== */
.hawk-guidedNavWrapper .hawk-navGroup li .hawk-styleCheckbox::before {
    border: 1px solid rgb(var(--color-medium-gray)) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background-color: transparent !important;
}
.hawk-guidedNavWrapper .hawk-navGroup li.hawkFacet-active .hawk-styleCheckbox::before{
  content: "";
  color: rgb(var(--color-white)) !important;
  background-color: rgb(var(--color-medium-gray)) !important;
  border: none !important;
}
.hawk-guidedNavWrapper .hawk-navGroup li.hawkFacet-hover .hawk-styleCheckbox::before{
  content: "";
  border: 1px solid rgb(var(--color-dark-blue)) !important;
}


.hawk-guidedNavWrapper .hawk-navGroup li .hawk-styleCheckbox:hover::before {
  border-color: transparent;
}
.hawk-collapseState:after{
  top: 0px;
}
/* Date picker + search-within control: common.css (`.hs-layout` / widget) */

/* ==========================================================================
   Item List Styling
   --------------------------------------------------------------------------
   Search results list item styling with design system typography
   ========================================================================== */
.item-list li {
  list-style: none;
  margin-bottom: 18px;
  padding: 12px;
  background-color: rgb(var(--color-white));
 /* border: 1px solid rgb(var(--color-border-gray));
  border-radius: 4px;*/
  transition: var(--transition-base);
}

.item-list li:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgb(var(--color-dark-blue));
}

.item-list li h3 {
  font-family: var(--font-family-bold);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  color: rgb(var(--color-dark-blue));
  margin-bottom: 8px;
  transition: var(--transition-base);
}

.item-list li h3:hover,
.item-list li h3:focus {
  color: rgb(var(--color-sky-blue));
}

.item-list li p {
  font-family: var(--font-family-medium);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: rgb(var(--color-dark-gray));
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

/* ==========================================================================
   Breadcrumb Navigation
   --------------------------------------------------------------------------
   Breadcrumb styling for search context
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-family: var(--font-family-semi-bold);
  font-size: 11px;
}

/* ==========================================================================
   Tabs Container
   --------------------------------------------------------------------------
   Tab header container with absolute positioning for right-aligned content
   ========================================================================== */
#hawktabs > .clearfix > p {
  text-align: right;
  position: absolute;
  right: 0;
  top: 5px;
  font-family: var(--font-family-medium);
  font-size: 14px;
  color: rgb(var(--color-dark-gray));
}

#hawktabs > .clearfix {
  position: relative;
  margin-bottom: 16px;
}

/* ==========================================================================
   Responsive Design
   --------------------------------------------------------------------------
   Tablet and mobile adjustments following design system breakpoints
   ========================================================================== */

/* Tablet: >=878px and <=1023px */
@media (min-width: 878px) and (max-width: 1023px) {
  .hawk-searchView .hawk-viewOption .hawk-viewOptionInner {
    padding: 4px 12px;
    font-size: 14px;
  }

  .hawk-listingControls .hawk-mainControls,
  .hawk-listingControls .hawk-subControls {
    padding: 6px 8px;
  }

  .item-list li {
    padding: 10px;
  }

  .item-list li h3 {
    font-size: 16px;
  }

  .item-list li p {
    font-size: 13px;
  }
}

/* Mobile: <=877px */
@media (max-width: 877px) {
  .hawk-searchView {
    margin-bottom: 8px;
  }

  .hawk-searchView .hawk-viewOption .hawk-viewOptionInner {
    padding: 4px 10px;
    font-size: 13px;
  }

  .hawk-listingControls {
    margin-bottom: 10px;
  }

  .hawk-listingControls .hawk-mainControls,
  .hawk-listingControls .hawk-subControls {
    padding: 6px 8px;
  }

  .hawk-listingControls .hawk-pagination .hawk-paging a.hawk-pageLink,
  .hawk-listingControls .hawk-pagination .hawk-paging .hawk-pageActive {
    font-size: 13px;
    padding: 0 3px;
  }

  .item-list li {
    padding: 10px;
    margin-bottom: 12px;
  }

  .item-list li h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .item-list li p {
    font-size: 13px;
  }

  .breadcrumb {
    gap: 6px;
    font-size: 10px;
    margin-bottom: 12px;
  }

  #hawktabs > .clearfix > p {
    position: static;
    text-align: left;
    margin-top: 8px;
    font-size: 13px;
  }
}