/* Sidhuvudets beteende vid scroll.
 *
 * Mallen gör headern sticky och lägger .is-condensed på .sg-masthead vid scroll,
 * vilket döljer utility-raden med display:none och krymper masthead. app.css
 * kommenterar det själv: "instant — this template does not animate its chrome".
 * Resultatet är ett hopp på 70 px mitt i scrollningen.
 *
 * Två saker rättas här.
 */

/* 1. Mjuka övergången. display:none går inte att animera, så vi byter till
 *    max-height + opacity och låter raden vika ihop sig i stället för att försvinna
 *    i ett hopp. Samma sluttillstånd, utan ryck. */
.sg-masthead .sg-utility {
  overflow: hidden;
  max-block-size: 4rem;
  opacity: 1;
  transition: max-block-size 180ms ease, opacity 140ms ease;
}

.sg-masthead.is-condensed .sg-utility {
  display: block; /* återställer mallens display:none så att övergången går att se */
  max-block-size: 0;
  opacity: 0;
}

.sg-masthead__main,
.sg-masthead .sg-wordmark {
  transition: padding 180ms ease, font-size 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .sg-masthead .sg-utility,
  .sg-masthead__main,
  .sg-masthead .sg-wordmark {
    transition: none;
  }
}

/* 2. Ankarlänkar ska inte hamna bakom den sticky headern.
 *    Headern är 111 px oscrollad och 41 px hopfälld; 7rem täcker båda med marginal.
 *    Utan detta landar t.ex. #vanliga-fragor på 32 px och är delvis dold. */
:is(h1, h2, h3, section, [id]):is([id]) {
  scroll-margin-block-start: 7rem;
}