/*
 * Styling for the Search Results page (checklist criterion #10):
 * resources/views/search.blade.php, partials/page-header-search.blade.php,
 * partials/content-search.blade.php.
 *
 * Search field mirrors DGA's real .dga-search-box component from
 * @platformscode/core (structurally identical to their .input component --
 * same tokens already used in dga-forms.css). Type filter chips and result
 * grouping are new UI needed to satisfy DGA's "organized by predefined
 * categories, filterable by content type" requirement -- there's no DGA
 * component for this specific grouped-search-results pattern, so these are
 * built on the same token system rather than copying a nonexistent one.
 */

.dga-search-box {
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--form-field-border-default);
  background: var(--form-field-background-default);
  gap: var(--spacing-xs);
}
/* Same jank fix used sitewide (dga-forms.css, dga-feedback.css, ...):
   growing border-bottom + a compensating negative margin reflowed the
   field and made it twitch on hover/focus. An inset box-shadow paints the
   same accent without ever changing the box's own dimensions. */
.dga-search-box:hover:not(:focus-within),
.dga-search-box:focus-within {
  box-shadow: inset 0 -2px 0 -1px var(--colors-neutral-600);
}
.dga-search-box__icon {
  flex-shrink: 0;
  color: var(--form-field-border-hovered);
}
.dga-search-box__field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  border: 0;
  outline: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding-inline-start: var(--spacing-xs);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  color: var(--form-field-text-focused);
}
.dga-search-box__field:focus,
.dga-search-box__field:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.dga-search-box__field::placeholder {
  color: var(--form-field-text-placeholder);
}
.dga-search-box__field::-webkit-search-cancel-button {
  display: none;
}
.dga-search-box__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-default-disabled);
  cursor: pointer;
}
.dga-search-box__clear:hover {
  color: var(--text-default);
}

/* Type filter chips */
.dga-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}
/* .rtl a { font-family: NeoSans Arabic !important } (a legacy bundle rule,
   specificity 0,1,1) otherwise wins over a plain single-class rule on this
   <a>-tag chip. Scoping with the parent (0,2,0) + !important beats it --
   same pattern as dga-cards.css/dga-twitter-feed.css's own font-family
   fixes for the same root cause. */
.dga-search-filters .dga-search-filter {
  font-family: var(--font-family-arabic) !important;
  font-size: var(--font-size-text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  background-color: var(--button-background-neutral-default);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-xl);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dga-search-filter:hover {
  background-color: var(--button-background-primary-default);
  color: var(--text-oncolor-primary);
}
.dga-search-filters .dga-search-filter--active {
  background-color: var(--button-background-primary-default);
  color: var(--text-oncolor-primary);
}

/* Grouped result sections */
.dga-search-group {
  margin-bottom: var(--spacing-8xl);
}
.dga-search-group__heading {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-display-xs);
  line-height: var(--line-height-display-xs);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-neutral-primary);
}
.dga-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xl);
}
/* Client feedback: compared against a real reference site's search
   results, wanted the heading in DGA's brand green (not the neutral
   default text color) and real breathing room before the short
   description, rather than the two sitting flush against each other. */
.dga-search-result .dga-card__title {
  margin-bottom: var(--spacing-sm);
}
.dga-search-result .dga-card__title a {
  color: var(--colors-primary-sa-flag-700);
  font-family: var(--font-family-arabic) !important;
  text-decoration: none;
}
.dga-search-result .dga-card__title a:hover {
  color: var(--colors-primary-sa-flag-600-primary);
}

/* Client feedback (2026-09-09): a large empty gap sat between the search box
   and the filter chips/results below. Root cause: dga-tokens.css's shared
   `section.pattern-light.bg-primary-25` rule force-applies `padding-bottom:
   80px !important` on desktop -- a fix for page-header.blade.php's OWN
   missing lg:pb-20 (used sitewide on ordinary content pages, still needs
   that padding since nothing follows it directly). This page is different:
   the filter chips/result count/results grid render immediately after this
   same section, so that bottom padding just becomes dead empty space here.
   Can't change the shared rule (would break every other content page) --
   scope a higher-specificity override to this page's own added class
   instead. Mobile is already fine (no equivalent forced pb- there). */
@media (min-width: 1024px) {
  section.pattern-light.bg-primary-25.dga-search-page-header {
    padding-bottom: 12px !important;
  }
}

/* Same NeoSans-Arabic-override issue as the chip/card-title fixes above --
   Tailwind Typography's .prose sets font-family:inherit on its own
   descendants, so nothing here beats .rtl p's !important. The "no results"
   message's <p> is the only plain <p> tag on this page. */
#dga-search-results-block .prose p {
  font-family: var(--font-family-arabic) !important;
}