/* =========================================================
   FONTER – VTI typografi
   Space Grotesk (rubriker)
   ========================================================= */

@font-face {
    font-family: "Space Grotesk";
    src: url("../../resources/fonts/VTI-Space-grotesk/SpaceGrotesk-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../../resources/fonts/VTI-Space-grotesk/SpaceGrotesk-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../../resources/fonts/VTI-Space-grotesk/SpaceGrotesk-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   FONTER – Work Sans (brödtext)
   ========================================================= */

@font-face {
    font-family: "Work Sans";
    src: url("../../resources/fonts/VTI-Work-Sans/WorkSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../../resources/fonts/VTI-Work-Sans/WorkSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../../resources/fonts/VTI-Work-Sans/WorkSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   BOTTENIKONER (shortcut) – grundfärg
   ========================================================= */
.sol-shortcut-item i.fa,
.sol-shortcut-item i.fab,
.sol-shortcut-item i.fal,
.sol-shortcut-item i.far,
.sol-shortcut-item i.fas {
    color: #4e9799;
}

/* =========================================================
   BOTTENIKONER (shortcut) – hover/focus-färg
   (sammanslagen, dubletter borttagna)
   ========================================================= */
.sol-shortcut-item a:hover i.fa,
.sol-shortcut-item a:hover i.fab,
.sol-shortcut-item a:hover i.fal,
.sol-shortcut-item a:hover i.far,
.sol-shortcut-item a:hover i.fas,
.sol-shortcut-item a:focus i.fa,
.sol-shortcut-item a:focus i.fab,
.sol-shortcut-item a:focus i.fal,
.sol-shortcut-item a:focus i.far,
.sol-shortcut-item a:focus i.fas {
    color: #85c1c1;
}

/* =========================================================
   TOPP-IKONER (tool nav) – hover-färg på ikoner
   (sammanslagen, dubletter borttagna)
   ========================================================= */
.sol-tool-nav-item > a:hover i.fa,
.sol-tool-nav-item > a:hover i.fab,
.sol-tool-nav-item > a:hover i.fal,
.sol-tool-nav-item > a:hover i.far,
.sol-tool-nav-item > a:hover i.fas,
.sol-tool-nav-item > button:hover i.fa,
.sol-tool-nav-item > button:hover i.fab,
.sol-tool-nav-item > button:hover i.fal,
.sol-tool-nav-item > button:hover i.far,
.sol-tool-nav-item > button:hover i.fas {
    color: #85c1c1;
}

/* =========================================================
   HEADER / STARTMENY – bakgrund
   ========================================================= */
header .sol-bottom {
    background-color: #e4eef0;
}

/* =========================================================
   STARTMENY – aktiv/hover (endast färg)
   ========================================================= */
.sol-top-nav-item.sol-active,
.sol-top-nav-item:focus,
.sol-top-nav-item:hover {
    background-color: #e4eef0;
    border-bottom-color: #4e9799;
    font-weight: bold;
}

/* =========================================================
   STARTMENY – fokus (endast färgkomponenter)
   OBS: endast färgrelaterade delar kvar (box-shadow-färg)
   ========================================================= */
.sol-top-nav-item:focus,
[data-whatinput=keyboard] .sol-top-nav-item:focus {
    box-shadow: 0 0 0 8px #fff;
}

/* =========================================================
   FOOTER – huvudbakgrund
   ========================================================= */
footer .sol-bottom {
    background-color: #075056;
}

/* =========================================================
   FOOTER – rubriker (endast färg)
   ========================================================= */
footer .sol-bottom h2.font-footer-header,
footer .sol-bottom p.font-footer-header,
footer .sol-bottom .font-footer-header h2 {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* =========================================================
   FOOTER – text/länkar i kontakt & länklista (endast färg)
   ========================================================= */
footer .sol-bottom .sol-footer-contact-item,
footer .sol-bottom .sol-footer-links-item,
footer .sol-bottom .sol-footer-contact-item a,
footer .sol-bottom .sol-footer-contact-item p,
footer .sol-bottom .sol-footer-links-item a,
footer .sol-bottom .sol-footer-links-item p {
    color: #ffffff;
}

/* =========================================================
   FOOTER – hover/focus på ikoner i länkar
   (dubletter borttagna; enhetlig hoverfärg)
   ========================================================= */
footer .sol-bottom .sol-footer-contact a:focus i,
footer .sol-bottom .sol-footer-contact a:hover i,
footer .sol-bottom .sol-footer-links a:focus i,
footer .sol-bottom .sol-footer-links a:hover i {
    color: #85c1c1;
    color: #fecb03;
}

/* =========================================================
   FOOTER – "ikon-länkar" (pil före länk) hover-färg
   ========================================================= */
footer .sol-bottom .sol-footer-contact-item--icon-links a:hover:before {
    color: #85c1c1;
    color: #fecb03;
}

/* =========================================================
   FOOTER – sociala medier: grundfärger
   ========================================================= */
footer .sol-bottom .sol-social-media .sol-social-media-item > a {
    color: #ffffff;
    border-color: #ffffff;
}

/* =========================================================
   FOOTER – sociala medier: hover/focus (bakgrund + border)
   ========================================================= */
footer .sol-bottom .sol-social-media .sol-social-media-item > a:focus,
footer .sol-bottom .sol-social-media .sol-social-media-item > a:hover {
    color: #ffffff;
    background-color: #85c1c1;
    border-color: #85c1c1;
}

/* =========================================================
   FOOTER – scroll-to-top (grund + hover)
   ========================================================= */
footer .sol-bottom .sol-scroll-to-top {
    color: #ffffff;
    background-color: #000000;
}

footer .sol-bottom .sol-scroll-to-top:focus,
footer .sol-bottom .sol-scroll-to-top:hover {
    background-color: #85c1c1;
}

/* =========================================================
   NYHETER / ARTIKLAR – vänsteraccent (grund)
   (behåller ursprungsaccent #4e9799, borttagen dublett #85c1c1)
   ========================================================= */
.sol-article-item {
    background-color: #ffffff;
    border-left-color: #4e9799;
}

/* =========================================================
   NYHETER – separatorlinje mellan artiklar
   ========================================================= */
.sv-channel-item:not(:last-child) .sol-article-item:after {
    background-color: #85c1c1;
}

/* =========================================================
   NYHETER – bildfilter vid hover/focus (overlay-färg)
   ========================================================= */
.sol-article-item:focus .sol-article-item-img:before,
.sol-article-item:hover .sol-article-item-img:before {
    background-color: #85c1c185;
}

/* =========================================================
   NYHETER – datumfärg
   ========================================================= */
.sol-article-item .sol-article-item-date {
    color: #000000;
}

/* =========================================================
   NYHETER – rubrik hover/focus (textfärg)
   ========================================================= */
.sol-article-item:focus .sol-article-item-heading a,
.sol-article-item:hover .sol-article-item-heading a {
    color: #000000;
}

/* =========================================================
   NYHETER – event-info ikonfärg
   ========================================================= */
.sol-article-item .sol-article-item-event-info-item i {
    color: #00505d;
}

/* =========================================================
   PUBLICERINGSDATUM / ACTION-LÄNKAR – accentfärger
   ========================================================= */
.sol-publish-date:after {
    background-color: #85c1c1;
}

.sol-action-link a:hover {
    background-color: #85c1c1;
}

/* =========================================================
   LISTNINGAR / MENY – accentmarkeringar
   ========================================================= */
.sol-page-listing-item__link:focus .sol-page-listing-item__icon,
.sol-page-listing-item__link:hover .sol-page-listing-item__icon {
    color: #85c1c1;
}

.sol-menu-item[data-is-current=true] > a {
    border-left-color: #85c1c1;
}

/* =========================================================
   POPULÄRA TJÄNSTER – hover/focus på ikoner
   (dublett borttagen och behåller en sammanslagen variant)
   ========================================================= */
.sol-popular-services a:focus i.fa,
.sol-popular-services a:focus i.fab,
.sol-popular-services a:focus i.fal,
.sol-popular-services a:focus i.far,
.sol-popular-services a:focus i.fas,
.sol-popular-services a:hover i.fa,
.sol-popular-services a:hover i.fab,
.sol-popular-services a:hover i.fal,
.sol-popular-services a:hover i.far,
.sol-popular-services a:hover i.fas {
    color: #85c1c1;
}

/* =========================================================
   FOOTER – generellt: hover på FA-ikoner i länkar (radnivå)
   (behålls som “bred” regel för övriga ikoner i footern)
   ========================================================= */
.sol-row a:hover i.fal,
.sol-row a:hover i.fab {
    color: #85c1c1;
    color: #fff;
}

footer h2 
{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

footer .sol-bottom h2.font-footer-header,footer .sol-bottom p.font-footer-header {
   font-family: "Work Sans", Arial, sans-serif;
   padding-bottom: 10px;
   font-size: 1.3rem;
}

footer .sol-bottom .sol-footer-contact-item, footer .sol-bottom .sol-footer-links-item {
   font-family: "Work Sans", Arial, sans-serif;
   font-size: 1em;
   line-height: 1.3rem;
}

footer .sol-bottom .font-footer-header h2 {
   font-family: "Work Sans", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.3rem;
}

footer .sol-bottom .sol-footer-contact-item a, footer .sol-bottom .sol-footer-contact-item p, footer .sol-bottom .sol-footer-links-item a, footer .sol-bottom .sol-footer-links-item p {
   font-family: "Work Sans", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.3rem;
}

footer .sol-bottom .sol-social-media .sol-social-media-item>a {
   width: 51px;
   height: 51px;
}
/* =========================================================
   Nyhetsmeny ofta i högerspalt
   ========================================================= */
.sol-news-menu__header {
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  color: #075056 !important;
  font-size: 2.5rem;
  border-bottom: 3px solid #85c1c1 !important;
}

.sol-news-menu__item-display-name {
  color: #075056;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
}

.sol-news-menu__button i {
  color: #075056 !important;
}

.sol-news-menu__button:active i,
.sol-news-menu__button:focus i {
  color: #ffffff !important;
}

/* ENDA bakgrundsreset */
.sol-news-menu,
.sol-menu-container,
.sol-sub-menu-container,
.sol-news-menu__list,
.sol-menu-item,
.sol-news-menu__item {
  background-color: #f7f4f4 !important;
  background: #f7f4f4 !important;
}

.sol-news-menu,
.sol-menu-container {
  box-shadow: none !important;
  filter: none !important;
}
/* =========================================================
   IDrelays sänd-knapp nyhetsbrev (tex RS5C startsia)
   ========================================================= */
.env-button--primary {
    background-color: #fff;
}

/* =========================================================
   Cookie banner
   ========================================================= */
.sv-cookie-consent-modal .env-button--primary {
    background-color: #075056;
}

/* =========================================================
   Innehållslista med flikvisning
   ========================================================= */
.env-tabs [role=tab], .env-tabs__link {
    align-items: center;
    appearance: none;
    background-color: #0000;
    border-radius: 0;
    border-radius: min(var(--env-border-radius-medium), 1em) min(var(--env-border-radius-medium), 1em) 0 0;
    border-style: none;
    border-width: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--env-font-color);
    cursor: pointer;
    display: block;
    font-family: var(--env-font-family);
    font-size: var(--env-font-size-medium);
    line-height: 1;
    margin: 0 var(--env-spacing-xxx-small);
    padding: var(--env-spacing-x-small) var(--env-spacing-medium);
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    text-shadow: none;
    transition: background-color .25s ease, color .25s ease;
    flex: 1;
text-align: center;
}