/* ---------------------------------------------------------
   MEMORIZ, DÖDSANNONSER OCH MINNESRUM

   MEDVETET LITEN. Memoriz är React med CSS-in-JS och hashade
   klassnamn (client-memoriz-app-q3id5k). Hasharna ändras vid
   varje bygge hos leverantören, så en stilmall som riktar sig
   mot dem går sönder utan förvarning och utan att någon märker
   det förrän en kund ringer.

   Vi styr därför bara det vi själva äger, plus de få id:n som
   leverantören satt själv och som därför är stabila:
     #client-memoriz-app__casesPage__search
     #CasesListMasonryGrid

   💭 Deras länkfärg är redan #1b296c, alltså nästan vår #24366e.
   Det tyder på att de har en färginställning per kundkonto.
   Be Memoriz sätta exakt vår primärfärg på kontot, så behövs
   inget av nedanstående. Fråga till leverantören.
   --------------------------------------------------------- */

/* Vår egen yta runt tjänsten. Full bredd, eftersom rutnätet
   med annonser behöver plats och inte mår bra i en läsbredd. */
.enil-memoriz {
	max-width: var(--enil-bredd);
	margin: var(--enil-rum-12) auto;
}

/* Sökfältet är sidans viktigaste kontroll: hit kommer folk för
   att hitta EN specifik person. Vi ger det vår ram och radie
   utan att röra dess funktion. */
.enil-memoriz #client-memoriz-app__casesPage__search,
.enil-memoriz #client-memoriz-app__casesPage__search input {
	border-radius: var(--enil-radie);
}

.enil-memoriz #client-memoriz-app__casesPage__search input:focus-visible {
	outline: 3px solid var(--enil-bla);
	outline-offset: 2px;
}

/* Fokusmarkering i hela widgeten. React-appar tar ofta bort
   outline, och då blir rutnätet omöjligt att följa med
   tangentbord. Det är ett tillgänglighetsfel vi inte kan
   lämna kvar oavsett hur lite vi rör resten. */
.enil-memoriz :focus-visible {
	outline: 3px solid var(--enil-bla);
	outline-offset: 2px;
}

/* Deras rutnät ska inte spränga vår layout på liten skärm. */
.enil-memoriz #CasesListMasonryGrid {
	max-width: 100%;
}

.enil-memoriz img {
	max-width: 100%;
	height: auto;
}