/* ==========================================================================
   SimWay – egna stilar (custom CSS)
   Ändra ramens färg och tjocklek här, det gäller alla sidor.
   ========================================================================== */
:root{
  --sw-frame-color: #555555;   /* ramens färg (mörkgrå) */
  --sw-frame-width: 2px;       /* ramens tjocklek */
  --sw-frame-radius: 15px;     /* hörnradie */
  --sw-zoom: 1.07;             /* zoom vid mouse-over (1.07 = 7 %) */
}

/* Klickbara bilder: rundade hörn, ram och zoom vid mouse-over */
.card-img:has(> a){
  background-color: transparent !important;
  border-radius: var(--sw-frame-radius);
}
.card-img > a{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--sw-frame-radius);
  border: var(--sw-frame-width) solid var(--sw-frame-color);
  line-height: 0;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: klipp zoomad bild i hörnen */
}
.card-img > a > img{
  display: block;
  width: 100%;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.card-img > a:hover > img,
.card-img > a:focus-visible > img{ transform: scale(var(--sw-zoom)); }
.card-img > a:focus-visible{ outline: 2px solid #ffa900; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  .card-img > a > img{ transition: none; }
  .card-img > a:hover > img{ transform: none; }
}

/* Filmen i headern (simwayhunt.com): inget vitt glapp under */
#video2-bt{ background: #000 !important; padding: 0 !important; }
#video2-bt figure{ margin: 0 !important; }
#video2-bt video{ display: block; }

/* simway.se startsida: produktkorten – bakgrunden får samma färg som korten (#232323) */
#features17-6j{ background-color: #232323 !important; }

/* Klickbara rubriker under bilderna: samma mål som bilden.
   Rubriken behåller sin färg; vid mouse-over blir den orange och bilden zoomar. */
.card-title a.sw-title-link{ color: inherit !important; text-decoration: none !important; transition: color .25s; }
.card-title a.sw-title-link:hover,
.card-title a.sw-title-link:focus-visible{ color: #ffa900 !important; }
.card-wrapper:has(.sw-title-link:hover) .card-img > a > img{ transform: scale(var(--sw-zoom)); }
.card-wrapper:has(.card-img > a:hover) .sw-title-link{ color: #ffa900 !important; }