/* Sidhuvud, meny och sidfot. */

.ffk-sidhuvud {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--wp--preset--color--gul);
}

.ffk-sidhuvud a {
  color: var(--wp--preset--color--vit);
}

.ffk-marke {
  text-decoration: none;
  line-height: 1.2;
}

/* Sidhuvudet går kant i kant på bred skärm: ordmärket längst till vänster,
   menyn längst till höger. Innehållet i övrigt är kvar på läsbar radlängd —
   en meny mår bra av bredden, en textrad gör det inte. */
.ffk-sidhuvud > .wp-block-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  row-gap: var(--wp--preset--spacing--20);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
}

/* På bred skärm ska raden aldrig brytas — det var just de två raderna som
   åt utrymme i sidhuvudet. */
@media (min-width: 721px) {
  .ffk-sidhuvud > .wp-block-group {
    flex-wrap: nowrap;
  }

  .ffk-sidhuvud .ffk-meny {
    flex: 0 1 auto;
  }
}

/* Ordmärket får krympa sist. */
.ffk-sidhuvud > .wp-block-group > .wp-block-group:first-child {
  flex: 0 0 auto;
}


.ffk-marke small {
  display: block;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--liten);
  color: rgba(255, 255, 255, 0.85);
}

/* Menyn är vanliga länkar utan overlay: den fungerar likadant med och utan
   JavaScript och radbryter i stället för att fällas ihop (krav NF-110).
   Justeringen sätts här och inte som blockattribut — kärnans egen
   justeringsklass har högre specificitet och går inte att styra i en
   mediefråga. */
.ffk-meny .wp-block-navigation__container {
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ffk-meny .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--tryckyta);
  padding: 8px 12px;
  border-radius: var(--wp--custom--radie);
  font-size: var(--wp--preset--font-size--liten);
  font-weight: 500;
}

.ffk-meny .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Gul primärknapp i menyn — sätts som CSS-klass på länken i sidhuvudet. */
.ffk-meny .ffk-meny-knapp .wp-block-navigation-item__content {
  background: var(--wp--preset--color--gul);
  color: var(--wp--preset--color--brodtext);
  font-weight: 700;
}

.ffk-meny .ffk-meny-knapp .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--vit);
}

.ffk-sidfot {
  font-size: var(--wp--preset--font-size--liten);
}

.ffk-sidfot a,
.ffk-sidfot h2 {
  color: var(--wp--preset--color--vit);
}

.ffk-sidfot p {
  color: rgba(255, 255, 255, 0.88);
  margin-block: 0 0.4em;
}

.ffk-sidfot h2 {
  font-size: var(--wp--preset--font-size--normal);
  margin-block-end: 0.6em;
}

.ffk-rattigheter {
  margin-block-start: var(--wp--preset--spacing--50);
  padding-block-start: var(--wp--preset--spacing--40);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* När menyn radbryter ska den läsa uppifrån och vänster som all annan text,
   inte hänga i högerkanten med hål framför sig. */
@media (max-width: 720px) {
  .ffk-meny .wp-block-navigation__container {
    justify-content: flex-start;
  }
}