/* =====================================================================
   Sökknapp i sidhuvudet (inc/sok-header.php, assets/js/sok-header.js). Global: sidhuvudet finns på alla sidor.
   Luppen (44 px) ligger efter menyn/hamburgaren och före "Boka tid". Fältet öppnas som en panel under sidhuvudet (ingen layoutförskjutning).
   Under 480 px finns inte plats för en extra knapp i raden: där ligger fältet överst i mobilmenyn.
   ===================================================================== */

.sok-hidden-etikett { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Knappen ---------- */
.top__sok { flex: none; display: flex; align-items: center; margin: 0; }
.top__sok-lank, .top__sok-knapp {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 2px solid transparent; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-ut), color .2s var(--ease-ut); }
.top__sok-lank[hidden], .top__sok-knapp[hidden], .top__sokpanel[hidden] { display: none; }
@media (hover: hover) { .top__sok-lank:hover, .top__sok-knapp:hover { background: var(--dis); color: var(--violett); } }
.top__sok-lank:focus-visible, .top__sok-knapp:focus-visible { border-radius: 50%; }
.top__sok-knapp[aria-expanded="true"] { background: var(--dis); color: var(--violett); }
.top__sok-knapp .ikon-stang { display: none; }
.top__sok-knapp[aria-expanded="true"] .ikon-lupp { display: none; }
.top__sok-knapp[aria-expanded="true"] .ikon-stang { display: block; }

/* ---------- Panelen under sidhuvudet ---------- */
.top__sokpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; padding-block: 18px 22px; background: var(--vit); border-bottom: 1px solid var(--linje);
  box-shadow: 0 22px 34px -20px rgba(23,13,68,.4); animation: sok-header-in .18s var(--ease-ut) both; }
@keyframes sok-header-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.top__sokform { display: flex; align-items: stretch; gap: 10px; max-width: 40rem; margin: 0; }
.top__sokform .top__sokfalt { flex: 1 1 auto; min-width: 0; min-height: 52px; margin: 0; padding: 0 22px; border: 1.5px solid var(--dampad); border-radius: 999px; background: var(--vit); color: var(--text);
  font-family: var(--brod); font-size: 1.0625rem; line-height: 1.2; -webkit-appearance: none; appearance: none; }
.top__sokform .top__sokfalt::placeholder { color: var(--dampad); opacity: 1; }
.top__sokform .top__sokfalt::-webkit-search-decoration, .top__sokform .top__sokfalt::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.top__sokform .top__sokfalt:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; border-radius: 999px; }
.top__sokform .wp-block-button { flex: none; margin: 0; }
.top__sokform .wp-block-button__link { min-height: 52px; padding-inline: 26px; }

/* ---------- Mobilmenyn: fält överst, bara under 480 px ---------- */
.top__sok-meny { display: none; }
@media (max-width: 479px) {
  .top__sok { display: none; }
  .top__sok-meny { display: block; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--linje); }
  .top__sok-meny .top__sokform { max-width: none; }
  .top__sok-meny .top__sokfalt { min-height: 48px; padding-inline: 18px; }
  .top__sok-meny .wp-block-button__link { min-height: 48px; padding-inline: 20px; }
}
/* Utan JavaScript visas menyn som länkrad (inc/tillganglighet.php): sökfältet i menyn ska inte ta plats där */
@media (min-width: 480px) { .top__sok-meny { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .top__sokpanel { animation: none; }
  .top__sok-lank, .top__sok-knapp { transition: none; }
}
@media (forced-colors: active) {
  .top__sok-lank, .top__sok-knapp { border-color: ButtonText; color: ButtonText; }
  .top__sok-knapp[aria-expanded="true"] { border-color: Highlight; }
  .top__sokpanel { border-bottom: 2px solid CanvasText; }
  .top__sokform .top__sokfalt { border-color: FieldText; }
}