/*
 * Typesense Directory UI — Slim Theme
 *
 * Slate-blue aesthetic matching the Next.js "slim" theme.
 * Colors, radii, and shadows extracted directly from globals.css (.theme-slim)
 * and the Tailwind classes used in page.tsx.
 *
 * All rules scoped to .ts-app to avoid conflicts with the WordPress theme.
 */

/* ─── Page Shell ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body { background: #a6b4ce !important; }

.ts-app {
  /* Exact slate-blue from --background: 219 29% 73% in globals.css */
  background: #a6b4ce;
  min-height: 60vh;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #1e293b;
  line-height: 1.5;
  box-sizing: border-box;
}

.ts-app *,
.ts-app *::before,
.ts-app *::after {
  box-sizing: inherit;
}

/* ─── Search Header ───────────────────────────────────────────────────────── */

/* Centered column layout — matches Next.js header with pt-16 pb-8 */
.ts-search-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 2rem;
  border-bottom: none;
  margin-bottom: 0;
}

.ts-switcher-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.ts-title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.25rem;
}

.ts-alt-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0.05em;
}

.ts-search-row {
  width: 100%;
  max-width: 56rem;
  margin-bottom: 1.5rem;
}

.ts-site-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.015em;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

/* Hamburger button: rounded-full h-12 w-12 bg-white border-none shadow-md */
.ts-menu-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  color: #475569;
}

.ts-menu-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ─── Search Box ──────────────────────────────────────────────────────────── */

#ts-searchbox {
  width: 100%;
}

/* Wraps the InstantSearch searchbox widget — fills #ts-searchbox */
.ts-app .ais-SearchBox {
  width: 100%;
}

.ts-app .ais-SearchBox-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Search icon — positioned inside the rounded input */
.ts-app .ais-SearchBox-form::before {
  content: '';
  position: absolute;
  left: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Input: h-14 text-lg rounded-full border-none shadow-md bg-white */
.ts-app .ais-SearchBox-input {
  width: 100%;
  height: 3.5rem;
  padding: 0 3rem 0 3rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.125rem;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.15s ease;
}

.ts-app .ais-SearchBox-input:focus {
  box-shadow: 0 0 0 2px #2563eb, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ts-app .ais-SearchBox-input::placeholder {
  color: #94a3b8;
}

.ts-app .ais-SearchBox-reset {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #94a3b8;
  transition: color 0.15s;
}

.ts-app .ais-SearchBox-reset:hover {
  color: #475569;
}

/* Hide reset when input is empty (placeholder visible) */
.ts-app .ais-SearchBox-form:has(.ais-SearchBox-input:placeholder-shown) .ais-SearchBox-reset {
  display: none !important;
}

/* Submit is redundant with searchAsYouType — always hidden */
.ts-app .ais-SearchBox-submit {
  display: none !important;
}

.ts-app .ais-SearchBox-resetIcon,
.ts-app .ais-SearchBox-submitIcon {
  width: 1rem;
  height: 1rem;
}

/* ─── Category Tiles ──────────────────────────────────────────────────────── */

/* Pro category bar — not used in slim */
#ts-category-bar { display: none; }

/* Category tiles — below header, constrained to body max-width */
#ts-category-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  width: 100%;
}

/* px-5 py-2 rounded-full text-sm font-medium shadow-sm bg-white */
.ts-category-tile {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: none;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
}

.ts-category-tile:hover {
  background: #f8fafc;
}

/* bg-primary text-primary-foreground (active) */
.ts-category-tile.is-refined {
  background: #2563eb;
  color: #ffffff;
}

.ts-tile-count {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-left: 0.5rem;
}

/* ─── Body Layout ─────────────────────────────────────────────────────────── */

/*
 * flex flex-1 max-w-[1400px] mx-auto w-full px-4 sm:px-6 pb-12 gap-8 items-start
 */
.ts-body {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  /* padding: 2rem 1.5rem 3rem; */
  align-items: flex-start;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

/*
 * hidden md:block w-64 shrink-0 filter-sidebar
 * .filter-sidebar: background white, padding 1.5rem, border-radius 1rem, shadow
 */
#ts-sidebar {
  width: 19.2rem;
  flex-shrink: 0;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.ts-sidebar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

/* mb-6 */
.ts-filter-group {
  margin-bottom: 1.5rem;
}

.ts-filter-group:last-child {
  margin-bottom: 0;
}

/* text-sm font-semibold text-foreground mb-3 */
.ts-filter-group-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Refinement List ─────────────────────────────────────────────────────── */

/* space-y-2.5 */
.ts-app .ais-RefinementList-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* flex items-center gap-3 */
.ts-app .ais-RefinementList-item {
  display: flex;
  align-items: center;
}

/* cursor-pointer flex justify-between text-muted-foreground hover:text-foreground */
.ts-app .ais-RefinementList-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #64748b;
  width: 100%;
  user-select: none;
  transition: color 0.15s;
}

.ts-app .ais-RefinementList-label:hover {
  color: #1e293b;
}

/* rounded-sm checkbox */
.ts-app .ais-RefinementList-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.125rem;
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.ts-app .ais-RefinementList-checkbox:checked {
  background: #2563eb;
  border-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.ts-app .ais-RefinementList-labelText {
  flex: 1;
  line-height: 1.3;
}

/* text-xs bg-muted px-1.5 py-0.5 rounded-md */
.ts-app .ais-RefinementList-count {
  font-size: 0.75rem;
  background: #f1f5f9;
  color: #64748b;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  margin-left: auto;
  flex-shrink: 0;
}

.ts-app .ais-RefinementList-showMore {
  font-size: 0.8rem;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem 0;
  margin-top: 0.375rem;
}

.ts-app .ais-RefinementList-showMore:hover {
  text-decoration: underline;
}

/* ─── Main Content ────────────────────────────────────────────────────────── */

#ts-main-content {
  flex: 1;
  min-width: 0;
}

/* ─── Hits Grid ───────────────────────────────────────────────────────────── */

/* grid grid-cols-1 xl:grid-cols-2 gap-6 */
.ts-hits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ts-hit-item {
  padding: 0;
}

@media (min-width: 1280px) { /* Tailwind xl = 1280px */
  .ts-hits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Hit Card ────────────────────────────────────────────────────────────── */

/*
 * Card: border-none rounded-2xl bg-white card-shadow
 * card-shadow: box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05)
 */
.ts-hit-card {
  background: #ffffff;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
  height: 100%;
  position: relative;
}

/* ── Row 1: Logo + Service title / Org name / Charge ── */

.ts-card-row1 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* w-16 h-16 rounded-full bg-slate-200 */
.ts-logo-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-logo-circle span {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
}

.ts-card-meta {
  flex: 1;
  min-width: 0;
  padding-top: 0.25rem;
}

/* Service name + Charge in a row */
.ts-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

/* text-sm text-muted-foreground font-medium truncate */
.ts-hit-service {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* text-xs tracking-wider uppercase font-semibold text-slate-500 */
.ts-hit-charge {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}

.ts-hit-org {
  font-size: 1.25rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.25;
  margin: 0.25rem 0 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal; /* override WP theme word-break: break-word */
}

/* ── Row 2: Description ── */

/* flex-1 */
.ts-card-desc-wrap {
  flex: 1;
}

/* text-sm text-slate-600 leading-relaxed */
.ts-hit-desc {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

/* ── Row 3: Contact Icons ── */

/* pt-4 border-t border-slate-100 */
.ts-contact-row {
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* flex flex-wrap gap-x-6 gap-y-3 text-sm text-slate-600 items-center */
.ts-contact-inner {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  font-size: 0.875rem;
  color: #475569;
  align-items: center;
}

/* flex items-center gap-2 max-w-full */
.ts-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}

/* w-4 h-4 text-slate-400 */
.ts-contact-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: #94a3b8;
  flex-shrink: 0;
}

/* hover:text-primary */
.ts-contact-item a {
  color: #475569;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
  transition: color 0.15s;
}

.ts-contact-item a:hover {
  color: #2563eb;
}

.ts-contact-item span {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

.ts-contact-item span:hover {
  color: #2563eb;
}

/* ─── Load More Button ────────────────────────────────────────────────────── */

/* mt-10 flex justify-center */
.ts-load-more-wrap {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/*
 * bg-white border-none shadow-sm text-slate-700 px-8 py-6 rounded-xl
 * Mirrors the Next.js "Ladda fler resultat" button
 */
.ts-app .ais-InfiniteHits-loadMore {
  background: #ffffff;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #334155;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.875rem 2rem;
  cursor: pointer;
  margin-top: 2.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.15s;
}

.ts-app .ais-InfiniteHits-loadMore:hover {
  background: #f8fafc;
}

.ts-app .ais-InfiniteHits-loadMore[disabled] {
  display: none;
}

/* ─── No Results ──────────────────────────────────────────────────────────── */

.ts-no-results {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #ffffff;
  font-weight: 500;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

/* Desktop: single-row header (title | searchbox); switcher fixed upper-right */
@media (min-width: 768px) {
  .ts-search-header {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 4rem 2rem 1rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Float the switcher row to a fixed upper-right corner */
  .ts-switcher-row {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    margin: 0;
    justify-content: flex-end;
  }

  body.admin-bar .ts-switcher-row { top: 2.875rem; }

  .ts-title-row  { flex-direction: column; align-items: flex-start; margin-bottom: 0; flex-shrink: 0; }
  .ts-search-row { flex: 1; max-width: none; margin-bottom: 0; }
}

@media (max-width: 767px) {
  /* Sidebar hidden on mobile — matches Next.js hidden md:block */
  #ts-sidebar {
    display: none !important;
  }

  /* Edge-to-edge cards on mobile */
  .ts-body {
    padding: 1rem 0 2rem;
  }

  .ts-search-header {
    padding: 2rem 1rem 1.5rem;
  }

  .ts-site-title {
    font-size: 1.5rem;
  }

  /* Category tiles: 2 per row on mobile */
  .ts-category-tile {
    white-space: normal;
    width: calc(50% - 0.375rem);
    text-align: center;
  }

  /* Cards: single column on mobile (slim is 2-col at xl) */
  .ts-hits-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .ts-menu-btn {
    display: none;
  }
}

/* ─── Dark Mode ───────────────────────────────────────────────────────────── */
/* Applied when JS adds .dark to <body> via the dark/light toggle. */

body.dark                                    { background: rgb(15 23 42) !important; }
body.dark .ts-app                            { background: rgb(15 23 42); color: #f1f5f9; }
body.dark #ts-sidebar                        { background: rgb(30 41 59); }
body.dark .ts-sidebar-title                  { color: #f1f5f9; border-bottom-color: rgba(255,255,255,0.1); }
body.dark .ts-filter-group-label             { color: #e2e8f0; }
body.dark .ts-app .ais-RefinementList-label  { color: #cbd5e1; }
body.dark .ts-app .ais-RefinementList-label:hover { color: #ffffff; }
body.dark .ts-app .ais-RefinementList-checkbox {
  background: rgb(30 41 59);
  border-color: rgba(255,255,255,0.2);
}
body.dark .ts-app .ais-RefinementList-count  { background: rgba(255,255,255,0.08); color: #94a3b8; }
body.dark .ts-app .ais-SearchBox-input       { background: rgb(30 41 59); color: #f1f5f9; }
body.dark .ts-app .ais-SearchBox-input::placeholder { color: #64748b; }
body.dark .ts-app .ais-SearchBox-reset       { color: rgba(255,255,255,0.4); }
body.dark .ts-app .ais-SearchBox-reset:hover { color: #f1f5f9; }
body.dark .ts-app .ais-SearchBox-form::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}
body.dark .ts-category-tile                  { background: rgb(30 41 59); color: #e2e8f0; }
body.dark .ts-category-tile:hover            { color: #ffffff; }
body.dark .ts-category-tile.is-refined       { background: #2563eb; color: #ffffff; }
body.dark .ts-hit-card                       { background: rgb(30 41 59); box-shadow: none; }
body.dark .ts-logo-circle                    { background: rgba(255,255,255,0.08); }
body.dark .ts-logo-circle span               { color: rgba(255,255,255,0.3); }
body.dark .ts-hit-service                    { color: #94a3b8; }
body.dark .ts-hit-charge                     { color: #94a3b8; }
body.dark .ts-hit-org                        { color: #f1f5f9; }
body.dark .ts-hit-desc                       { color: #94a3b8; }
body.dark .ts-contact-row                    { border-top-color: rgba(255,255,255,0.08); }
body.dark .ts-contact-inner                  { color: #cbd5e1; }
body.dark .ts-contact-item a                 { color: #cbd5e1; }
body.dark .ts-app .ais-InfiniteHits-loadMore { background: rgb(30 41 59); color: #e2e8f0; }