/* Text */

/* --------- Headings */

h1,
h2,
h3,
h4,
h5,
h5 {
  font-weight: 600;
}

/* -------- Text */

/* ------------ Article Tag */

span.weight-bold.color-accent {
  & a {
    text-decoration: underline;
    text-transform: uppercase;
  }
}

.text-block > span.color-accent,
.text-block > a.color-accent {
  text-decoration: underline;
  text-transform: uppercase;
}

/* ------------ Article Preamble */

p.font-ingress {
  font-weight: 600;
}

/* ------------ Article body */

.text-block.ew-html > p,
.text-block.ew-html li,
div.article-teaser-content {
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.054px;

  @media (max-width: 992px) {
    font-size: 16px;
    line-height: 28px;
  }
}

/* ------- Article Faktaruta & Quote */

.text-block.ew-html {
  /* faktaruta */
  & p.card.card-accent {
    background: var(--btn-secondary-bg);
    padding: 24px;
  }

  /* quote */
  & blockquote {
    background: transparent;
    padding: unset;
    margin: unset;

    display: flex;
    flex-flow: column-reverse;
    gap: var(--spacing-3);
    padding: 0 var(--spacing-4);

    & cite {
      text-transform: uppercase;

      &::before {
        content: "– ";
        padding-right: var(--spacing-1);
      }
    }

    & p {
      font-size: 28px;
      font-family: var(--font-header);
      color: var(--btn-primary-text-active);
      font-weight: 500;
    }

    &::before {
      content: none;
    }
  }
}

/* GENERAL */

footer {
  background: var(--header-bg);
  color: var(--header-text);
}

/* Section margins */

section.p-large {
  padding: 90px 0;
}

section.m-standard {
  margin: 60px 0;
}

/* Buttons */

/* -------- Button header */

header {
  & button.btn-secondary {
    background: var(--color-surface-primary);
    border-color: var(--color-surface-primary);
  }

  & ul.mainmenu {
    & li.active {
      color: var(--btn-primary-text-active);
      font-weight: 700;
      text-decoration: underline;
    }

    & a {
      text-transform: uppercase;
      font-size: 14px;
    }
  }
}

/* -------- Button Outline  */

button.btn-outline,
a.btn-outline {
  background-color: var(--btn-primary-bg);
  border: none;
  color: var(--btn-primary-text);
}

.btn-outline:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
}

/* BLOCKS */

/* ----- TEXT & MEDIA */

/* ----------- Startsida */
body.type-startpage {
  & main {
    & section.m-standard.cm-text-media {
      & div.card {
        background-color: var(--color-white);

        & h2 {
          font-size: 70px;
          letter-spacing: -1.1px;
          line-height: 120%;
          color: var(--color-text-surface-secondary);
          @media (max-width: 992px) {
            font-size: 40px;
          }
        }
      }
    }
  }
}

/* _________ CM Article Categories  */

section.cm-article-categories {
  & div.card.cm-category-card {
    background: #ffffff !important;
    border: 1px solid #0000000c;
  }
}

/* Pages */

/* ----- PRINT, PACK, PROMOTION, TEKNIK */

.category-header {
  margin: 0 !important;

  & div.hero {
    border-block: 2px solid var(--color-neutral-200);
    padding: 12px var(--content-padding);
  }

  & div.text-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    max-width: unset;

    @media (max-width: 992px) {
      display: block;
    }

    & h1 {
      font-size: 18px;
      margin-bottom: 0;
      line-height: 30px;
    }
  }
}

/* ----- Mina sidor */

body.type-mypages,
body.type-articles,
body.type-webpages {
  background: var(--color-surface-default) !important;
}

/* ------ Artiklar */

body.type-articles {
  & aside.article-navigation > nav {
    /* Removes article navigation */
    display: none;
  }

  /* right box *used for work */
  & aside.article-aside {
    & div.card {
      background: #fff8e0;
      color: var(--color-text-surface-accent);

      & a.btn-secondary {
        background-color: var(--btn-primary-bg);
        border: none;
        color: var(--btn-primary-text);

        &:hover {
          background-color: var(--btn-primary-bg-hover);
          color: var(--btn-primary-text-hover);
          cursor: pointer;
        }
      }
    }
  }

  show-more.tag-list > .tag {
    background: var(--btn-secondary-bg);
  }

  & .article-progress-bar {
    & .text {
      font-family: var(--font-menu);

      & span {
        color: var(--color-text-surface-accent);
      }
    }

    &::after {
      background-color: var(--focus-ring-color);
    }
  }
}

/* IMAGE RATIO & CROPPING */

figure {
  & img {
    object-position: top !important;
  }
}

/* Mobile Navigation styles – html injected in GTM */

.mobile-menu-wrapper {
  display: none; /* Hidden on desktop */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface-primary);
  border-bottom: 5px solid var(--header-bg);
  padding: 12px 0;

  @media (max-width: 992px) {
    display: block;
  }
}

/* Horisontell scroll-container */
.mobile-menu-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

/* Meny innehåll */
.mobile-menu-content {
  display: flex;
  gap: var(--spacing-4);
  padding: 0 var(--content-padding-phone);
  white-space: nowrap;
}

/* Custom Block GTM -------- */

.overview-flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-3);

  @media (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
  }

  & div.overview-section {
    & > h3 {
      border-bottom: 2px solid var(--color-neutral-200);
      border-top: 2px solid var(--color-neutral-200);
      padding: var(--spacing-2) 0;
    }

    & div.overview-article-column {
      display: grid;
      gap: var(--spacing-2);
    }
  }
}