/* =====================================================================
   SØKESIDEN (sok.html) · utkast 3 (lyst og midtstilt)
   Øverst det midtstilte sidehodet med en hvit, avrundet søkestang og
   forslagene som små piller. Treffene (bare når det er treff) er hvite
   kort i én midtstilt spalte, med en liten versal etikett over tittelen.
   Siden har ikke noe annet enn søket.
   ===================================================================== */

/* Uten JavaScript kan ikke søket gjøre noe. Da skjules feltet, og
   meldingen i <noscript> viser vei til menyen. */
@media (scripting: none) {
  html .sok-stort, html .treff-seksjon { display: none; }
}
.sok-uten-js { max-width: 34em; margin-inline: auto; color: var(--svak); }

/* ---------- Sidehodet ----------
   Litt mindre luft under enn de andre sidehodene, så treffene kommer
   tidlig inn i bildet når man skriver. */
.sok-hode { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sok-hode .sidehode-grid { row-gap: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); }

/* ---------- Søkefeltet: en hvit pille ---------- */
/* Forslagene får litt mer bredde enn feltet, så de sju står på én linje på stor skjerm */
.sok-stort { display: grid; justify-items: center; gap: 1.4rem; width: 100%; max-width: 50rem; text-align: center; }
.sok-stort-skjema { width: 100%; max-width: 44rem; }
.sok-stang {
  display: flex; align-items: center; gap: .85rem;
  min-height: 68px; padding: .5rem .5rem .5rem 1.4rem;
  background: var(--flate); border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--tekst) 50%, transparent);
  transition: border-color .2s;
}
.sok-stang:hover { border-color: var(--feltkant); }
/* Fokus vises på hele pillen, som skjemafeltene (.felt i stil.css) */
.sok-stang:focus-within { border-color: var(--fokus); outline: 2px solid var(--fokus); outline-offset: 0; }
.sok-lupe { width: 20px; height: 20px; flex: none; color: var(--svak); }
.sok-stang input {
  flex: 1; width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--tekst);
  font-family: var(--skrift); font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.3;
}
/* På de smaleste mobilene får ikke hele plassholderen plass. Da slutter
   den med «…» i stedet for å kuttes midt i en bokstav. */
.sok-stang input { text-overflow: ellipsis; }
.sok-stang input::placeholder { color: var(--svakere); opacity: 1; }
.sok-stang input:focus { outline: none; }
.sok-stang input::-webkit-search-decoration { -webkit-appearance: none; }
/* Nettleserens «tøm feltet»-kryss: et tynt kryss i samme grå som lupen */
.sok-stang input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-left: .6rem; cursor: pointer; background-color: var(--svak);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sok-stang input::-webkit-search-cancel-button:hover { background-color: var(--tekst); }
.sok-stang .knapp { flex: none; min-height: 52px; padding-inline: 1.6rem; }

/* overflow-wrap: et langt søkeord (eller en lim-inn-adresse) i statusen
   brekker i stedet for å gjøre hele sidehodet bredere enn skjermen */
.sok-stort-status, .sok-stort-hjelp { max-width: 38em; color: var(--svak); font-size: var(--t-liten); overflow-wrap: anywhere; }
/* Tom status (tomt felt) tar ingen plass; forslagene under sier hva man kan skrive */
.sok-stort-status:empty { display: none; }

/* Forslagene: en etikett med streker og små piller under */
.sok-stort-forslag { display: grid; justify-items: center; gap: 1rem; margin-top: .35rem; }
.forslag-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.forslag-knapper button {
  min-height: 40px; padding: .3rem 1rem; border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  background: transparent; color: var(--tekst); font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.forslag-knapper button:hover { border-color: var(--tekst); background: var(--flate); }
/* Får ikke alle sju plass på én linje, havner «Innhold» alene på linje
   to (nettbrett, store mobiler). Smalere boks gir heller fire og tre,
   og på de minste mobilene tre, to og to. */
@media (max-width: 839.98px) {
  .forslag-knapper { max-width: 29rem; }
}
@media (max-width: 419.98px) {
  .forslag-knapper { max-width: 20.5rem; }
}

/* ---------- Treffene: hvite kort i én spalte ---------- */
.treff-seksjon { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--seksjon); }
/* Et langt søkeord brekker i stedet for å gå ut av siden */
.treff-hode .h2 { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }

/* stil.css gir .sok-resultater en egen stil for søkedialogen (rullefelt,
   streker mellom radene, flate ved pek); den nullstilles her. */
.sokeside .treff-liste { list-style: none; display: grid; gap: 12px; max-width: 860px; margin-inline: auto; overflow: visible; }
.sokeside .treff-liste li { display: grid; }
.sokeside .treff-liste li + li { border-top: 0; }
.sokeside .treff-liste a {
  position: relative; display: grid; align-content: start; gap: .5rem;
  padding: 1.5rem 3.75rem 1.6rem 1.6rem;
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
  color: var(--tekst); text-decoration: none;
  transition: border-color .3s, transform .5s var(--myk), box-shadow .5s var(--myk);
}
.sokeside .treff-liste a:hover {
  background: var(--flate); border-color: var(--strek-sterk); transform: translateY(-2px);
  box-shadow: 0 24px 48px -36px color-mix(in srgb, var(--tekst) 45%, transparent);
}
.sokeside .treff-liste a:focus-visible { background: var(--flate); outline-offset: 3px; }
/* Typen: liten versal etikett med en prikk foran */
.sokeside .treff-liste .sok-type { display: block; font-size: .6875rem; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--svak); }
.sokeside .treff-liste .sok-type::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .7em; border-radius: 50%; background: currentColor; vertical-align: .18em; }
.sokeside .treff-liste .sok-tittel { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.sokeside .treff-liste .sok-utdrag { max-width: 44em; font-size: .9375rem; line-height: 1.6; color: var(--svak); }
.sokeside .treff-liste a:hover .sok-tittel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--strek-sterk); }
/* Pila oppe til høyre (tegnes av side-sok.js) */
.sok-pil { position: absolute; top: 1.5rem; right: 1.5rem; width: 18px; height: 18px; color: var(--svakere); transition: transform .5s var(--myk), color .3s; }
.sokeside .treff-liste a:hover .sok-pil, .sokeside .treff-liste a:focus-visible .sok-pil { transform: translateX(3px); color: var(--tekst); }
/* Søkeordet: en rolig grå flate i teksten, ingen flate i tittelen. Flaten
   er en skygge rundt ordet, ikke luft, så «chatbot|en» ikke får et hull. */
.sokeside .treff-liste mark { padding: 0; border-radius: 3px; background: var(--flate-2); box-shadow: 0 0 0 2px var(--flate-2); color: var(--tekst); }
.sokeside .treff-liste .sok-tittel mark { background: none; box-shadow: none; color: inherit; }
/* «3D-konfigurator» brekker ikke etter bindestreken (side-sok.js) */
.hel-ord { white-space: nowrap; }

/* ---------- Flere treff: de samme kortene, mindre, i to spalter ---------- */
.treff-nevnt { display: grid; justify-items: center; gap: 1.5rem; max-width: 860px; margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) auto 0; }
.treff-nevnt-hode { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.treff-antall { font-weight: 400; color: var(--svak); font-variant-numeric: tabular-nums; }
.treff-nevnt-om { color: var(--svak); font-size: var(--t-liten); }
.sokeside .treff-liste-liten { width: 100%; gap: 10px; }
.sokeside .treff-liste-liten a { gap: .35rem; padding: 1.15rem 3rem 1.25rem 1.25rem; }
.sokeside .treff-liste-liten .sok-tittel { font-size: 1.0625rem; line-height: 1.35; }
.sokeside .treff-liste-liten .sok-utdrag { font-size: .875rem; line-height: 1.55; }
.sokeside .treff-liste-liten .sok-pil { top: 1.15rem; right: 1.15rem; width: 16px; height: 16px; }
@media (min-width: 901px) {
  .sokeside .treff-liste-liten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .sok-stang { gap: .6rem; min-height: 60px; padding: .4rem .4rem .4rem 1.05rem; }
  .sok-lupe { width: 18px; height: 18px; }
  .sok-stang .knapp { min-height: 48px; padding-inline: 1.15rem; }
  .sokeside .treff-liste a { padding: 1.25rem 3rem 1.35rem 1.2rem; }
  .sok-pil { top: 1.25rem; right: 1.15rem; }
  .sokeside .treff-liste .sok-tittel { font-size: 1.125rem; }
}