/* ============================
   /search — Professional styling
   Works for light + dark mode
   ============================ */

/* Page base */
body.path-search {
  background-image: none !important;
  background:
    radial-gradient(1200px 600px at 50% 18%, rgba(120,160,255,0.18), transparent 60%),
    #f6f7fb !important;
}

/* Dark mode variant */
html.dark-mode body.path-search {
  background-image: none !important;
  background: #000 !important;
  color: rgba(255,255,255,0.90) !important;
}

/* Centered layout */
body.path-search .layout-container,
body.path-search .page__content,
body.path-search .region-content,
body.path-search .layout-content {
  max-width: 1050px;
  margin: 0 auto;
}

/* Remove legacy card styling from light-mode file */
body.path-search .region-content,
body.path-search .view-search {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}

/* Space the main area */
body.path-search main {
  padding-top: 70px;
  padding-bottom: 120px;
}

/* Center branding above search */
body.path-search .ex1-branding {
  width: fit-content;
  margin: 0 auto 18px;
  justify-content: center;
}

/* Search form "card" */
body.path-search form.search-form,
body.path-search .search-form {
  max-width: 920px;
  margin: 0 auto;
  padding: 22px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
}

/* Views exposed form (Search API/Meili view) */
body.path-search .views-exposed-form {
  max-width: 920px;
  margin: 0 auto;
  padding: 22px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Dark card */
html.dark-mode body.path-search form.search-form,
html.dark-mode body.path-search .search-form,
html.dark-mode body.path-search .views-exposed-form {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

/* Input */
body.path-search input[type="search"],
body.path-search input[type="text"] {
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0 14px;
  box-shadow: none;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

html.dark-mode body.path-search input[type="search"],
html.dark-mode body.path-search input[type="text"] {
  background: rgba(15,18,24,0.92) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

body.path-search input::placeholder {
  color: rgba(0,0,0,0.45);
}
html.dark-mode body.path-search input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* Focus ring */
body.path-search input:focus {
  outline: none !important;
  border-color: rgba(60,120,255,0.55) !important;
  box-shadow: 0 0 0 6px rgba(60,120,255,0.14) !important;
}
html.dark-mode body.path-search input:focus {
  box-shadow: 0 0 0 6px rgba(120,160,255,0.18) !important;
}

/* Button */
body.path-search button,
body.path-search input[type="submit"] {
  height: 54px;
  border-radius: 14px;
  font-weight: 650;
  border: 1px solid rgba(0,0,0,0.10);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

html.dark-mode body.path-search button,
html.dark-mode body.path-search input[type="submit"] {
  background: rgba(120,160,255,0.22) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

body.path-search button:hover,
body.path-search input[type="submit"]:hover {
  transform: translateY(-1px);
}

body.path-search .views-exposed-form .form-actions {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Helper text */
body.path-search .description {
  opacity: 0.7;
}

/* Results area */
body.path-search .search-results {
  max-width: 920px;
  margin: 18px auto 0;
  padding: 0;
}

/* Views results container */
body.path-search .view-search .view-content {
  max-width: 920px;
  margin: 18px auto 0;
}

/* Result cards */
body.path-search .search-results li,
body.path-search .view-search .views-row {
  list-style: none;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

html.dark-mode body.path-search .search-results li,
html.dark-mode body.path-search .view-search .views-row {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

body.path-search .search-results li:hover,
body.path-search .view-search .views-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.14);
  border-color: rgba(60,120,255,0.35);
}

html.dark-mode body.path-search .search-results li:hover,
html.dark-mode body.path-search .view-search .views-row:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,0.5);
  border-color: rgba(120,160,255,0.35);
}

/* Title + snippet */
body.path-search .search-results li h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

body.path-search .search-results li h3 a,
body.path-search .view-search .views-field-title a {
  text-decoration: none;
  font-weight: 600;
}

body.path-search .search-results li h3 a:hover,
body.path-search .view-search .views-field-title a:hover {
  text-decoration: underline;
}

body.path-search .search-snippet-info {
  opacity: 0.78;
}

/* Optional: slightly tone down yellow highlight in dark mode */
html.dark-mode body.path-search mark {
  background: rgba(255, 214, 102, 0.22);
  color: rgba(255,255,255,0.92);
}