/* ==========================================================================
   Global sök (Cloud476 #3335) — resultatlistan + overlayen. EN fil, en klassfamilj.
   Facit: agents/kommunikation-erik/uppdrag/skisser/topnav/mockup-global-sok.html (#1515 rev4).
   Laddas på alla ytor (overlayen är global), därför bara .cctrl-sok*-selektorer — inget
   som kan läcka in i PUBLIC/BLOG/APP (CONTRACT regel 6). Bara tokens ur cctrl-core.css.
   ========================================================================== */

/* ---- Grupperad träfflista (delas av sidan och overlayen) ---- */
.cctrl-sok__grupp { min-width: 0; max-width: 100%; }
.cctrl-sok__grupp + .cctrl-sok__grupp { margin-top: var(--space-5); }
/* Rubriken renderas som div[role=heading], inte <h2>: public.css sätter h2 till 36 px med
   !important under 768 px, och det slås bara av ett annat !important (CONTRACT regel 3).
   Mätt 2026-09-06 @390 som h2: scrollWidth 490 i en 390-spalt. */
.cctrl-sok__grupp-huvud {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-width: 0; max-width: 100%; width: auto;
  margin: 0; padding: 0 var(--space-3) var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-xs); line-height: 1.3; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.cctrl-sok__ikon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.cctrl-sok__ikon svg { width: 100%; height: 100%; }
/* Tjänste-accenten bärs av ikonen ensam (rev4c). Samma nyckel som nav-pillsen. */
.cctrl-sok__grupp--akademin    .cctrl-sok__ikon { color: var(--ctp-cat-violet); }
.cctrl-sok__grupp--biblioteket .cctrl-sok__ikon { color: var(--ctp-cat-blue); }
.cctrl-sok__grupp--bloggen     .cctrl-sok__ikon { color: var(--ctp-cat-rose); }
.cctrl-sok__grupp--nyheter     .cctrl-sok__ikon { color: var(--ctp-cat-gold); }
.cctrl-sok__grupp--tips        .cctrl-sok__ikon { color: var(--ctp-cat-green); }
.cctrl-sok__antal { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }

.cctrl-sok__lista { list-style: none; margin: 0; padding: 0; }
.cctrl-sok__traff {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; min-width: 0;
}
.cctrl-sok__traff:hover,
.cctrl-sok__traff:focus-visible,
.cctrl-sok__traff.is-vald { background: var(--ctp-surface-alt); text-decoration: none; }
.cctrl-sok__traff:focus-visible { outline: 2px solid var(--lav-500); outline-offset: -2px; }
.cctrl-sok__titel {
  display: block; font-family: var(--font-heading); font-weight: 600; color: var(--ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
/* Matchningen är radens enda accent: färg, ingen bakgrund. */
.cctrl-sok__titel mark { background: transparent; color: var(--lav-500); font-weight: 700; padding: 0; }
.cctrl-sok__meta {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere;
}
.cctrl-sok__las { display: inline-flex; width: 13px; height: 13px; flex: none; color: var(--muted); }
.cctrl-sok__las svg { width: 100%; height: 100%; }
.cctrl-sok__traff--last .cctrl-sok__titel { color: var(--muted); }
.cctrl-sok__visa-alla {
  display: inline-block; margin: var(--space-1) var(--space-3) 0;
  font-size: var(--text-small); font-weight: 600; color: var(--lav-500);
}
html[data-theme="dark"] .cctrl-sok__visa-alla { color: var(--accent-text, var(--text)); }

/* ---- Resultatsidan (search.php) ---- */
.cctrl-sok-sida { max-width: 760px; width: 100%; min-width: 0; }
.cctrl-sok-sida .cctrl-sok__grupp + .cctrl-sok__grupp { margin-top: var(--space-6); }
.cctrl-sok-sida .cctrl-sok__traff { padding: var(--space-3) var(--space-3); }
.cctrl-sok-sida .cctrl-sok__titel { font-size: var(--text-h3); }
.cctrl-sok-sida .cctrl-sok__meta { font-size: var(--text-small); }
.cctrl-sok__tomt { color: var(--muted); }
.cctrl-sok__tomt a { color: var(--lav-500); }
.cctrl-sok__tillbaka { display: inline-block; margin-bottom: var(--space-4); font-size: var(--text-small); font-weight: 600; color: var(--lav-500); }

/* Filterraden: samma formspråk som bloggens sorteringsväljare (.ctp-sort__sel). */
.cctrl-sok__filter {
  display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-5);
}
.cctrl-sok__filter-falt { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cctrl-sok__filter-etikett { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cctrl-sok__filter select {
  max-width: 100%; border: 1px solid var(--ctp-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); background: var(--bg-elev); color: var(--text);
  font-family: inherit; font-size: var(--text-small); font-weight: 600;
}
.cctrl-sok__filter-knapp {
  border: 1px solid var(--lav-500); background: transparent; color: var(--lav-500);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  font-family: inherit; font-size: var(--text-small); font-weight: 700; cursor: pointer;
}
.cctrl-sok__filter-knapp:hover { background: var(--ctp-tint-lilac); }
/* Med JS skickas formuläret vid val; knappen behövs bara utan JS. */
.js .cctrl-sok__filter-knapp,
.cctrl-sok--js .cctrl-sok__filter-knapp { display: none; }
.cctrl-sok__filter-rensa { font-size: var(--text-small); font-weight: 600; color: var(--muted); align-self: center; }

/* ---- Overlay (command palette) ---- */
.cctrl-sok-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: start center; padding-top: 9vh;
  background: rgba(20, 18, 35, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cctrl-sok-overlay[hidden] { display: none; }
.cctrl-sok-dialog {
  width: min(680px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--outline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl, var(--shadow-lg)); overflow: hidden; color: var(--text);
}
.cctrl-sok-dialog__falt {
  display: flex; align-items: center; gap: var(--space-3); margin: 0;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--outline);
}
.cctrl-sok-dialog__falt > svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.cctrl-sok-dialog__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 1.15rem;
}
.cctrl-sok-dialog__input::placeholder { color: var(--muted); }
.cctrl-sok-dialog__input::-webkit-search-cancel-button { display: none; }
.cctrl-sok-dialog__stang {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: var(--ctp-surface-alt); color: var(--muted); cursor: pointer; padding: 0;
}
.cctrl-sok-dialog__stang svg { width: 15px; height: 15px; }
.cctrl-sok-dialog__stang:hover { color: var(--ink); border-color: var(--lav-500); }
.cctrl-sok-dialog__resultat { overflow: auto; padding: var(--space-4) var(--space-4) var(--space-5); min-height: 0; }
.cctrl-sok-dialog__resultat:empty { display: none; }
.cctrl-sok-dialog__status { padding: var(--space-2) var(--space-3); font-size: var(--text-small); color: var(--muted); }
.cctrl-sok-dialog__alla { display: block; margin-top: var(--space-5); padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 600; color: var(--lav-500); text-decoration: none; }
.cctrl-sok-dialog__alla:hover, .cctrl-sok-dialog__alla.is-vald { background: var(--ctp-surface-alt); }
html[data-theme="dark"] .cctrl-sok-dialog__alla { color: var(--accent-text, var(--text)); }
.cctrl-sok-dialog__fot {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--outline);
  font-size: var(--text-xs); color: var(--muted); background: var(--ctp-surface-alt);
}
.cctrl-sok-dialog__fot-hoger { margin-left: auto; }
.cctrl-sok-dialog__fot kbd {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--muted);
  border: 1px solid var(--outline); border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 6px; background: var(--bg-elev); margin-right: 4px;
}
body.cctrl-sok-oppen { overflow: hidden; }

/* 390 px: helskärms-sök, ett scroll (mockupens telefonvy). */
@media (max-width: 640px) {
  .cctrl-sok-overlay { padding-top: 0; place-items: stretch; }
  .cctrl-sok-dialog { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .cctrl-sok-dialog__fot { display: none; }
  .cctrl-sok__filter { gap: var(--space-2); }
  .cctrl-sok__filter-falt { flex: 1 1 140px; }
  .cctrl-sok__filter select { width: 100%; }
}