/* RESET */
*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;}a{text-decoration:inherit;color:inherit;}
p,h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:inherit;}ul,ol{margin:0;padding:0;list-style-type:none;}
img{display:inline-block;border:0;max-width:100%;height:auto;vertical-align:middle;}figure{margin:0;}

* {
  touch-action: manipulation;
}

:root {
  --base: 16px;
  --margin: 10px;
  --row-gap: calc( var(--margin) * 1);
  --col-gap: var(--margin);
  --padding: var(--margin);

  --sidebar-width: 100%;
  --header-height: 200px;

  /* Typo */
  --txt-xxxs: 13px;
  --txt-xxs: 14px;
  --txt-xs: 16px;
  --txt-sm: var(--txt-xs);
  --txt-md: var(--txt-xs);
  --txt-lg: 28px;
  --txt-xl: 24px;
  --line-height-base: 1.2;
  --letter-spacing: -0.01em;
  --word-spacing: -0.02em;

  /* Colors */
  --bg: #fff;
  --txt-color: #000;
  --border-width: 1px;
  --border-color: #e5e5e5;
  
  --faded: 0.5;
  --hover: 0.7;
  --color-tone: #FBFBFA;
  --color-tone: #F9F8F7;
  --color-tone-dark: #F4F1EF;
  --color-secondary:  rgba(0,0,0,0.5);
  --color-secondary-light: rgba(255,255,255,0.5);
  --color-hover: rgba(0,0,0,0.7);
}

@media screen and (min-width: 768px) {
   :root {
    --margin: 14px;
    --txt-xxs: 14px;
    --txt-md: 25px;
    --txt-lg: 36px;
    --txt-xl: 36px;
    --sidebar-width: 250px;
    --header-height: 200px;
  }
}

@media screen and (min-width: 1220px) {
  :root {  
  }
}

@media (min-width: 1440px){
  :root {
    --margin: 16px;
    --txt-xxs: calc(14px + 0.075vw);
    --txt-xs: min(1.1vw, 20px);
    --txt-sm: var(--txt-xs);/*, 1.3vw;*/
    --txt-md: 1.7vw;
    --txt-xl: 2.1vw;
  }
  article {
    /*max-width: 110ch !important;*/
  }
}

@media (min-width: 1500px){
  :root {
  }
}




html {
  -webkit-font-smoothing: antialiased;
  font-smoothing:  antialiased;
  font-size:  var(--txt-base);
  background: var(--bg);
  color: var(--txt-color);
  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
  scroll-behavior: smooth;
}




::selection {
  /*background:  rgba(0,0,0,0.3);*/
  background:  var(--color-tone-dark);
}
img::selection, video::selection {
  background: none;
}


body {
  font-family:  'Lausanne', -apple-system, system-ui, sans-serif;
  font-weight: 300;
  font-size:  1rem;
  line-height:  var(--line-height-base);
  word-spacing: var(--word-spacing);
  letter-spacing: var(--letter-spacing);
}

/* Typography */

.txt-xl {
  font-size: var(--txt-xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
  word-spacing: -0.05em;
}
.txt-lg, h2 {
  font-size: var(--txt-lg);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.txt-md, h3 {
  font-size: var(--txt-md);
}
.txt-sm, .block-type-text, h4 {
  font-size: var(--txt-sm);
}
.txt-xs {
  font-size: var(--txt-xs);
}
.txt-xxs {
  font-size: var(--txt-xxs);
  line-height: 1.15;
}
.txt-xxxs, .copied:before {
  font-size: var(--txt-xxxs);
}

.italic {
  font-style: italic;
}

p + p:before {
  content: '\a';
  display: block;
  white-space: pre;
}

.block-type-text p {
  padding-right: var(--padding);
}

h3 {
  /*margin-bottom: calc(var(--margin) * -1);*/
  margin-top: calc(var(--row-gap) * 2);
}


/* GRID START */

.grid {
  --columns: 12;
  display: grid;
  grid-column-gap: var(--col-gap);
  grid-row-gap: var(--row-gap);
  grid-template-columns:repeat(var(--columns), 1fr);
  /*margin: calc(var(--margin) * 0.75) var(--margin);*/
  /*margin: var(--row-gap) var(--margin);*/
  padding: var(--row-gap) var(--margin);
}

.row {
  /*grid-row-gap: 0;*/
  /*margin:  0;*/
  padding: 0;
  grid-column-start: span var(--columns);
  position: relative;
}

.grid.no-gap {
  grid-column-gap: 0;
  grid-row-gap: 0;
}
.grid.no-gap .col {
  grid-row-gap: 0;
  display: grid;
}

.grid.no-gap .block {
  display: grid;
}

.grid-bd, .grid.no-gap.grid-bd, .overview-header .grid.no-gap, .resources.grid.no-gap {
  grid-column-gap: var(--border-width);
  grid-row-gap: var(--border-width);
}
.resources.grid.no-gap.neg-gap {
 grid-column-gap: 1.5px;
 grid-row-gap: 1.5px; 
}

.overview-header .grid.no-gap .block {
  background: white;
}
.overview-header .grid.no-gap, .resources.grid.no-gap {
  background: black;
}
.resources.grid.no-gap {
  background: white;
}
.overview-header .grid.no-gap .col {
  grid-row-gap: var(--border-width);
}

main.grid {
}

.col {
  grid-column-start: span var(--columns);
  padding: 0;
  display: grid;
  grid-row-gap: var(--row-gap);
  grid-template-rows: min-content;
}
.col:empty {
  display: none;
}




.col[data-width="12/12"] {
  grid-column-start: span 12;
}

.keep-grid .col[data-width="4/12"] {
  grid-column-start: span 4;
}

.keep-grid .col[data-width="6/12"] {
    grid-column-start: span 6;
}
.keep-grid .col[data-width="8/12"] {
    grid-column-start: span 8;
}

.col[data-width="2/12"] {
  grid-column-start: span 4;
}


@media screen and (min-width: 768px) {
  .grid {
    /*grid-template-columns:repeat(var(--columns), 1fr);*/
    /*grid-column-gap: var(--margin);*/
  }
  .col:empty {
    display: block;
  }

  .col[data-width="2/12"] {
    grid-column-start: span 2;
  }
  .icon.col[data-width="2/12"] {
    grid-column-start: span 3; 
  }
  .col[data-width="4/12"] {
    grid-column-start: span 4;
  }
  .col[data-width="5/12"] {
    grid-column-start: span 5;
  }
  .col[data-width="6/12"] {
    grid-column-start: span 6;
  }
  .col[data-width="8/12"] {
    grid-column-start: span 8;
  }
}

@media (min-width: 1200px) {
  .icon.col[data-width="2/12"] {
    grid-column-start: span 2; 
  }
}

/* GRID END */

/* Helpers */

.fl {
  display: flex;
  flex-wrap: wrap;
}

.fixed {
  position: fixed;
}
.fl-1 {
  flex: 1;
}
.fl-ver {
  flex-direction: column;
}
.spc-btw {
  justify-content: space-between;
  flex-direction: column;
}
.spc-btw-row {
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-end;
}
.dis-bl {
  display: block;
}


.bd-t {
  border-top: var(--border-width) solid;
}
.bd-r {
  border-right: var(--border-width) solid;
}
.bd-b {
  border-bottom: var(--border-width) solid;
}
.bd-l {
  border-left: var(--border-width) solid;
}

.pd {
  padding: var(--padding);
}
.pd-t {
  padding-top:  var(--padding);
}
.pd-t-sm {
  padding-top: calc(var(--padding) / 2);
}
.pd-t-xs {
  padding-top: calc(var(--padding) / 3);
}
.pd-t-md {
  padding-top: calc(var(--padding) * 2);
}
.pd-b {
  padding-bottom: var(--padding);
}
.pd-b-sm {
  padding-bottom: calc(var(--padding) / 2);
}
.pd-b-md {
  padding-bottom: calc(var(--padding) * 2);
}
.pd-b-lg {
  padding-bottom: calc(var(--padding) * 3);
}
.mg-b-xl {
  margin-bottom: calc(var(--padding) * 6);  
}
.secondary {
  /*opacity: var(--faded);*/
  color: var(--color-secondary);
}
/*@supports (color: color-mix(in lch, white, black)) {
  .secondary {
    opacity: 1;
    color: color-mix(in srgb, inherit 50%, transparent);
  }
}*/

.uc {
  text-transform: uppercase;
}

.bg-white {
  background: white;
}

/* Helpers End */

.header-h {
  height: var(--header-height);
}

.sidebar {
  background: var(--color-tone);
  width: var(--sidebar-width);
  /*border-bottom: var(--border-width) solid;*/
  /*border-top: var(--border-width) solid;*/
  position: fixed;
  z-index: 100;
}
.login.desktop {
  display: none;
}

.sidebar-placeholder {
  /*display: none;*/
  position: relative;
  width: 100%;
  height: var(--header-height);
}

@media (max-width: 767px){
  .sidebar {
    position: sticky;
    top: calc(var(--header-height) / 2 * -1);
    height: var(--header-height);
  }
  .sidebar .top, .sidebar-placeholder {
    /*height: 70px !important;*/
  }
  .sidebar-placeholder {
    height: 0;
    border-top: var(--border-width) solid;
    position: fixed;
    top: 0;
    z-index: 200;
  }
  .sidebar .top .title, .sidebar .top .menu-toggle-card div {
    position: fixed;
    top: var(--margin);
  }
  .sidebar.open {
    height: auto;
    top: 0;
  }
  .sidebar.open .top {
    height: var(--header-height) !important;
  }
  nav.menu {
    border-left: var(--border-width) solid;
  }
}

.sidebar .bottom {
  display: none;
  border-bottom: var(--border-width) solid;
  min-height: calc(var(--header-height) - var(--border-width));
}

.menu li {
  margin-top: 0.2em;

}
.menu {
  margin-top: -0.2em;
}

.menu-toggle-card {
  cursor: pointer;
}

.menu-toggle-card .close-btn, .sidebar.open .menu-toggle-btn {
  display: none;
}
.sidebar.open .menu-toggle-card .close-btn {
  display: inherit;
}
.sidebar.open .bottom {
  display: flex;

}

.page-num {
  display: inline-block;
  width: var(--padding);
}


@media (min-width: 768px) {
  .login.desktop {
    display: block;
  }
  .login.mobile {
    display: none;
  }
  .menu-toggle-card {
    display: none;
  }
  .sidebar-placeholder {
    width: var(--sidebar-width);
    display: block;
  }
  .sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    position: fixed;
    border-right: var(--border-width) solid;
    /*border-bottom: none;*/
    border-top: none;
  }
  .sidebar .bottom {
    border-bottom: none;
    display: inherit;
  }
}


article {
  min-height: 100vh;
  /*max-width: 70ch;*/
  margin: 0 auto;
  padding-bottom: 190px !important;
}
.login-page article {
  min-height: unset;
}

.block-type-text {
  /*max-width: 55ch;*/
  margin-bottom: calc(var(--row-gap) * 1);
}
.block-type-text, .block-type-heading, .block-type-resources, form {
  max-width: 64ch;
}
.ingress {
  /*max-width: 40ch;*/
}
.article-header {
  min-height: 40vw;
}

/* Nav */

ul ul {
  margin-left: calc(var(--margin) / 2);
  margin-top: calc(var(--margin) / 2);
  margin-bottom: calc(var(--margin) / 2);
}

nav a {
  /*opacity: var(--faded);*/
  color: var(--color-secondary);
}
nav a[aria-current="page"], nav a[aria-current="step"]{
  color: inherit;
}
nav a:hover, .nav-in-page a:hover {
  /*opacity: var(--hover);*/
  color: var(--color-hover);
}
/* Nav end */

p a:hover {
  color: var(--color-secondary);
}

/* BUTTONS */
:root {
  --pagination-height: 12rem;
}
.pagination-container {
  /*height: calc(var(--pagination-height) * 2);*/
  margin-top: calc(var(--pagination-height) * -1);
  position: relative;
}
.pagination {
  position: sticky;
  top: calc(100vh - var(--pagination-height));
  /*border-bottom: var(--border-width) solid;*/
  /*margin-bottom: calc(var(--border-width) * -1);*/
}

a.pagination-btn:hover, label.pagination-btn:hover {
  background: var(--color-tone);
  cursor: pointer;
}
.pagination-btn {
  min-height: 12rem;
  display: block;
  background: white;
}

.contact {
  padding-bottom: calc(var(--pagination-height) + var(--padding));
}

button.quantity {
  background: var(--color-tone);
  border-radius: 100%;
  width: 1em;
  height: 1em;
  font-size: var(--txt-xxxs);
  margin: 0 0.25em;
  vertical-align: middle;
  text-align: center;
}
button.quantity:hover {
  color: var(--txt-color);
  background: var(--color-tone-dark);
}



/* END BUTTONS */


/* MEDIA */

.tabpanels figure img {
  cursor: e-resize;
}
.full-bleed .marginalizer {
  margin: calc(var(--padding) * -1);
  border-bottom: var(--border-width) solid;
  margin-bottom: 0;
}

@media (max-width: 767px){
  .full-bleed .media-container {
    padding-bottom: 98% !important;
  }
  figcaption.txt-xxs {
    font-size: var(--txt-xxxs);
    line-height: 1.2;
  }
}
/*.full-bleed .marginalizer img, .full-bleed .marginalizer video {
  border-bottom: var(--border-width) solid;
}*/
.full-bleed figcaption {
  display: none;
}

.media-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.media-container img, 
.media-container video, 
a:hover figure .media-container:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  max-height: none;
  background: var(--color-tone-dark);
}
.media-item:nth-child(n+2) .media-container img,
.media-item:nth-child(n+2) .media-container video {
  /*background: none;*/
}


.no-gap .media-container img, 
.no-gap .media-container video,
.full-bleed .media-container img,
.full-bleed .media-container video, 
a:hover figure .media-container:after {
  top:  calc(var(--border-width) * -1);
  left:  calc(var(--border-width) * -1);
  width: calc(100% + 2 * var(--border-width));
  height: calc(100% + 2 * var(--border-width));
}
.media-container .inset-caption {
  position: absolute;
  top: 0;
  left: 0;
  margin: var(--margin);
  color: white;
  z-index: 10;
}

.media-container.loaded img, 
.media-container.loaded video {
  background: none;
}
.inset-caption em {
  font-style: normal;
  color: var(--color-secondary-light);
}
.inset-caption.dark em, .card em {
  font-style: normal;
  color: var(--color-secondary);
}


a:hover figure .media-container:after,
article figure .media-container:has(video):after
 {
  content: '';
  display: block;
  background: rgba(0,0,0,0.025);
  pointer-events: none;
}
article figure .media-container:has(video):after {
  background-image: url(icons/sh-play.svg);
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 52% 50%;
}
article video {
  cursor: pointer;
}
article figure .media-container.playing:has(video):after {
  display: none;
}
article figure .media-container.playing:hover:has(video):after {
  display: block;
  background-image: url(icons/sh-pause.svg);
  background-position: 50% 50%;
  animation: fadePause 0.25s forwards;
  animation-delay: 1s;
}
@keyframes fadePause {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.border {
  border: var(--border-width) solid var(--border-color);
}

.media-title-container {
  /*display: none;*/
}
.media-title.txt-xs:empty:before {
  display: none;
}
.keep-grid .media-title, .keep-grid figcaption p {
  width: 200%;
}
.keep-grid .media-title.txt-xs:empty:before {
  content: '\a';
  white-space: pre;
  display: inline;
}

.keep-grid {
  overflow: hidden;
}

@media (min-width: 768px){
  .media-title-container {
    display: block;
  }
  .media-title.txt-xs:empty:before {
    content: '\a';
    white-space: pre;
    display: inline;
  }
}

/* END MEDIA */


/* COLORS */
  .color {
    min-height: 75vw;
    
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .color {
      min-height: 45vw;
    }
  }
  .copy, .download {
    cursor: pointer;
  }
  .copy:hover:after, .download:hover:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.05) url('icons/copy.svg');
    background-position: bottom var(--margin) right var(--margin);
    background-repeat: no-repeat;
    background-size: 20px;
    opacity: var(--faded);
    pointer-events: none;
  }
  .download:hover:after {
    background-image:url('icons/link-download-outlined.svg');
  }
  .copy.copied:before, .download.downloaded:before {
    content: 'Kopierad';
    display: block;
    bottom: var(--margin);
    left: var(--margin);
    opacity: var(--faded);
    position: absolute;
    z-index: 10;
    line-height: 0.7;
    font-weight: 300;
  }
  .download.downloaded:before { 
    content: 'Nedladdad';
  }
  .color .secondary {
    color: var(--color-secondary-light);
    position: absolute;
  }
  .color.dark .secondary {
    color: var(--color-secondary);
  }
  .copy.dark:hover:after {
    background-image: url('icons/copy-black.svg');
  }
  .fl-ver .color, .tint .color {
    min-height: 30vw;
  }
  @media (min-width: 768px) {
    .fl-ver .color, .tint .color {
      min-height: 11vw;
    } 
  }
  
  .tint-value:before {
    counter-reset: tint var(--tint);
    content: counter(tint) '%';
  }
  /*.fl-hor .color:nth-child(n+2){
    border-left: none;
    border-right: none;
  }
  .fl-hor .color:nth-child(n+2){
    border-left: none;
    border-right: none;
  }
  .fl-hor .color:last-child.border {
    border-right: var(--border-width) solid var(--border-color);
  }
  .fl-hor .color:first-child.border {
    border-left: var(--border-width) solid var(--border-color);
  }

  .fl-ver .color:nth-child(n+2){
    border-top: none;
    border-bottom: none;
  }
  .fl-ver .color:last-child.border {
    border-bottom: var(--border-width) solid var(--border-color);
  }
  .fl-ver .color:first-child.border {
    border-top: var(--border-width) solid var(--border-color);
  }*/
  .color:border {
    border: var(--border-width) solid var(--border-color);
  }

/* END COLORS */

/* TABS START */

.group-title {
  margin-right: calc(var(--margin) * 0.75);
}
button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  /*opacity: var(--faded);*/
  color: var(--color-secondary);
  cursor: pointer;
}
button[aria-selected="true"]{
  /*opacity: 1;*/
  color: var(--txt-color);

}

button {
  margin-right: 0.25em;
}
button:last-child {
  margin-right: 0;
}


/* TABS END */

/* Resource cards */
.card {
  background: var(--color-tone);
  flex-direction: column;
  min-height: 18ch;
  position: relative;
}
@media (max-width: 767px){
  .overview-header .txt-xxs {
    font-size: var(--txt-xxxs);
  }
}
.card:before, .overview-header a:hover .media-container:before {
  content: '';
  position: absolute;
  background: url('icons/link-download-outlined.svg') no-repeat;
  width: calc(var(--txt-xs) * 1.25);
  height: calc(var(--txt-xs) * 2);
  background-size: contain;
  background-position: bottom;
  bottom: var(--margin);
  right: var(--margin);
  z-index: 10;
}
.overview-header a:hover .media-container:before {
  background-image: url('icons/link-internal-outlined-white.svg');
  pointer-events: none;
}
.overview-header a:hover .black .media-container:before {
 background-image: url('icons/link-internal-outlined.svg'); 
}
.card.link-internal:before  {
  background-image: url('icons/link-internal-outlined.svg');
}
.card.link-external:before {
  background-image: url('icons/link-external-outlined.svg'); 
}
.card.link-mail:before {
  background-image: url('icons/sh-mail.svg'); 
}
.card:hover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.025);
}
.card .extension, .card .thumbnail {
  position: absolute;
  bottom: var(--margin);
  left: var(--margin);
  font-family: Parabole;
  font-weight: normal;
  -webkit-text-stroke: 0.5px black;
  color: var(--color-tone);
  font-size: 1.6em;
  line-height: 0.63;
}
.card .thumbnail {
  height: 0.9em;
}
.card .thumbnail.portrait {
  height: 1.4em;
}
.card .thumbnail.wide {
  height: 0.6em;
}
.card .thumbnail img {
  height: 100%;
}



/* Header Article */

.num {
  width: auto;
  max-width: none;
  max-height: none;
  height: 45vw;
}
@media (min-width: 800px){
  .num {
    height:35vw;
  }
}
.num-display {
  font-family: Parabole;
  font-weight: normal;
  font-size: 76vw;
  line-height: 1;
}
.num-display:after {
  display: table;
  content: '';
  margin-top: -0.18em;
}

.num-display:before {
  display: table;
  content: '';
  margin-top: -0.075em;
}
@media (min-width: 800px){
  .num-display{
    font-size:50vw;
  }
  .num-display:after {
    margin-top: -0.21em;
  }
}

/* TYPE TESTER */

.typetester {
  font-size: 5.8vw;
  letter-spacing: -0.015em;
  line-height: 1.1;
  outline: none;
  overflow-wrap: anywhere;
}
@media (min-width: 768px){
  .typetester {
    font-size: 3.9vw;
    font-size: calc(5.2vw - 10px);
  }
}

/* TYPE TESTER END */

/* ICONS */

.icon {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: var(--color-tone);
}
.icon > * {
  position: absolute;
  top: 0;
  left: 0;
}
.icon img, .icon svg {
  width: 100%;
  height: 100%;
  padding: 22.5%;
  padding-top: 30%;
  object-fit: contain;
}

/* ICONS END */



/* New h2 headline test */
.block-type-heading:has(h2) {
  max-width: none;
}
h2 {
  height: 184px;
  height: calc(var(--header-height) - var(--padding));
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(var(--padding) * 0.7);
  position: relative;
  margin-bottom: calc(var(--padding) * 0);
}

/*h2:hover {
  cursor: pointer;
}
h2:hover:before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('icons/copy-black.svg');
}*/
h2:after {
  content: '';
  width: calc(100% + var(--padding) * 2);
  /*height: var(--padding);*/
  bottom: 0;
  border-bottom: var(--border-width) solid;
  left: calc(var(--padding) * -1);
  position: absolute;
}

/* LOGIN */

.login-form {
  /*margin-top: calc(var(--padding) * -1.5);*/
}
label {
  display: block;
}

.of-hid {
  overflow: hidden;
}

input {
  outline: none;
  border: 0;
  /*padding: var(--padding);*/
  width: auto;
  /*border: var(--border-width) solid var(--border-color);*/
  -webkit-appearance: none;
  padding-top: 0;
  background: none;
  line-height: normal;
}

/*.login-form input {
  margin-bottom: calc(var(--padding) * 2);
  margin-top: calc(var(--padding) * -1);
}*/

input[type=number], input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  font-size: inherit;
  padding: 0;
}
input[type=number]{
  margin-top: -1em;
}
input::placeholder {
  opacity: 1;
  color: var(--color-secondary);
}
input[type=submit] {
  background: none;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.login-form label {
  position: absolute;
  pointer-events: none;
}
label:has(+ input:placeholder-shown){
  color: black;
}
.login-form input {
  padding-top: 2.05em;
  width: 100%;
}
.login-form input:focus {
  border-color: var(--color-secondary);
}
.alert {
  color: red;
}




/* LOGIN END */