/*
=========================================================
FOCUS VISIBLE CSS
=========================================================
 * Styling för tekniken "focus visible" som möjliggör 
 * särskiljande styling för fokus baserat på om det 
 * aktiveras via tangentbord eller mus.
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
SYNLIGT FOKUS
--------------------------------------------------------- */


/* Fix för att länkars outline inte ska hamna under andra länkar i menyerna */

.lp-topmenu a:focus,
.lp-menu a:focus{
  position: relative;

}


/* Default fokusutseende på länkar och knappar */

:focus,
button:focus {
  outline: 3px solid #000;
}

a:hover {
   outline: 3px solid #000;
}

/* Fokusutseende på länkar mot mörk bakgrund */

.lp-footer a:focus,
.lp-footer button:focus {
  outline: 3px solid #000;
}

.lp-footer a:hover,
.lp-footer button:hover {
  outline: 3px solid #000;
}


/*
---------------------------------------------------------
DOLD FOKUS FÖR MUS
--------------------------------------------------------- */

/* Tar bort outline för fokus via musinteraktion */
html.js-focus-visible :focus:not(.focus-visible) {
  outline: none !important;
}
/**
 * För tillfället verkar webbläsarna inte klara av att tolka den föreslagna standarden 
 * och ignorerar då stilregler som innehåller :focus-visible. På grund av det behöver 
 * man ha dubbla uppsättningar med stilregler för att separera selektorn för standarden 
 * och den för JS-implementationen.
 */
html:not(.js-focus-visible) :focus:not(:focus-visible) {
  outline: none !important;
}