:root {
  --header-height: 74px;
  --top-message-height: 48px;
  --menu-top-offset: var(--header-height);

  /* Wordmark ⇄ mini-logo swap: nothing happens for the first
     --logo-swap-start px (dead zone — keeps the swap out of the jittery
     scroll region where iOS rubber-bands and the URL bar collapses), then
     the wordmark fades out over --logo-swap-scroll px and the mini-logo
     fades in over the next --logo-swap-scroll px. */
  --logo-swap-start: 60px;
  --logo-swap-scroll: 140px;
  --mini-logo-size: 48px;

  /* Editorial palette — reuses the site's own tokens where possible. */
  --menu-bg: #ffffff;
  --menu-ink: #111111;
  --menu-muted: #8a8a8a;
  --menu-line: rgba(17, 17, 17, 0.1);
  --menu-backdrop-tint: rgba(17, 17, 17, 0.35);
  --menu-accent: var(--color-text-accent, #b9cdcc);
  --menu-font-display: var(--font-header, "Familjen Grotesk"), sans-serif;
  --menu-font-label: var(--font-menu, "Familjen Grotesk"), sans-serif;

  --border-radius-lg: 0px;
  --border-radius-md: 0px;
  --border-radius-sm: 0px;

  --content-standard: 1400px;

  --section-large: 80px;
  --section-large-tablet: 60px;
  --section-large-phone: 42px;
  --section-standard: 60px;
  --section-standard-tablet: 64px;
  --section-standard-phone: 46px;
}

body {
  background-color: #ffffff !important;
}

@property --menu-top-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 74px;
}

:root:has(header.cm-header > user-container .top-message) {
  --menu-top-offset: calc(var(--header-height) + var(--top-message-height));
}

@supports (animation-timeline: scroll()) {
  :root:has(header.cm-header > user-container .top-message) {
    animation: cm-menu-offset linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--top-message-height);
  }
}

@keyframes cm-menu-offset {
  from {
    --menu-top-offset: calc(var(--header-height) + var(--top-message-height));
  }
  to {
    --menu-top-offset: var(--header-height);
  }
}

@media (max-width: 680px) {
  :root {
    --logo-swap-start: 90px;
    --logo-swap-scroll: 180px;
  }
}

header.cm-header {
  border-bottom: 1px solid var(--color-text-surface-secondary) !important;

  & > .content-standard {
    position: relative;
    padding-top: 24px;
    padding-bottom: 24px;

    @media (max-width: 680px) {
      gap: 0;

      & div.display-flex {
        justify-content: space-between;
        width: 100%;
      }
    }

    @media (max-width: 992px) {
      gap: 0;

      & div.gap-7 {
        flex: 0;

        & .menu-wrap {
          display: none;
        }
      }

      & div.display-flex {
        width: 100%;

        & user-container {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  & .btn-secondary {
    background-color: var(--header-bg) !important;
    border: unset !important;
    color: unset !important;
  }

  & .logo {
    position: absolute;
    inset: 0;
    margin: auto;
    height: fit-content;

    display: grid !important;
    place-items: center;

    width: 15vw;
    min-width: 200px;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: var(--mini-logo-size, 48px);
      aspect-ratio: 1;
      z-index: 1;

      background: url(/upl/images/1281050.svg) center / contain no-repeat;

      opacity: 0;
      visibility: hidden;
    }

    @supports (animation-timeline: scroll()) {
      & {
        animation: cm-logo-hide linear both;
        animation-timeline: scroll(root block);
        animation-range: var(--logo-swap-start)
          calc(var(--logo-swap-start) + var(--logo-swap-scroll));
      }

      & img {
        /* Own compositor layer: opacity can then be scroll-driven off the
           main thread, which is what stops the flicker on mobile. */
        will-change: opacity;
        animation: cm-wordmark-fade linear both;
        animation-timeline: scroll(root block);
        animation-range: var(--logo-swap-start)
          calc(var(--logo-swap-start) + var(--logo-swap-scroll));
      }

      &::before {
        will-change: opacity, translate;
        animation: cm-mini-logo-in linear both;
        animation-timeline: scroll(root block);
        /* Takes over right where the wordmark finishes fading. */
        animation-range: calc(var(--logo-swap-start) + var(--logo-swap-scroll))
          calc(var(--logo-swap-start) + var(--logo-swap-scroll) * 2);
      }
    }
  }
}

@keyframes cm-wordmark-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes cm-logo-hide {
  0%,
  99% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

@keyframes cm-mini-logo-in {
  0% {
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
  }

  1% {
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}

/* ---------------------------------------------------------------------------
   General styling
--------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-header, "Familjen Grotesk"), sans-serif !important;
  font-weight: 400;
}

.btn-outline:hover {
  color: var(--btn-secondary-bg-hover) !important;
}

/* ---------------------------------------------------------------------------
   Footer — background image, color, and link list styling
--------------------------------------------------------------------------- */

footer.cm-footer {
  background: var(--color-surface-primary);
  color: var(--color-text-surface-primary);
  background-image: url(/upl/images/1275924.png?=1783935804537);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;

  @media (max-width: 680px) {
    background-size: contain;
    background-position: bottom;

    & > div {
      gap: 20px;
    }
  }

  & div.content-standard > div:first-child {
    @media (max-width: 680px) {
      order: 50;

      & .footer-logo-m {
        display: none;
      }
    }
  }

  & ul.link-list {
    text-align: start;
    font-size: 18px;
  }
}

/* MENY CSS - Behavior changes */

.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"] {
  overflow: visible;
}
.hamburger-menu-wrapper .ews-modal-backdrop {
  top: var(--menu-top-offset);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.4s ease;
}
.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"].active
  .ews-modal-backdrop {
  background-color: var(--menu-backdrop-tint);
}

.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"]
  .ews-modal-el {
  top: var(--menu-top-offset);
  right: 0;
  left: 0;
  bottom: auto;

  width: 100%;
  max-width: none;
  height: auto;
  max-height: calc(100vh - var(--menu-top-offset));
  max-height: calc(100dvh - var(--menu-top-offset));

  padding: clamp(28px, 5vw, 64px) clamp(20px, 6vw, 80px) clamp(36px, 5vw, 56px);
  background: var(--menu-bg);
  color: var(--menu-ink);

  /* Subtle drop shadow. It rides on the panel's opacity, which is 0 when the
     menu is closed, so the shadow is only visible while the menu is open. */
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.25);

  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Open state */
.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"].active
  .ews-modal-el {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Flush-left content (Atlantic-style), using the full width of the sheet.
   No auto-centering — everything hangs off the left edge. */
.hamburger-menu-wrapper #hamburger-menu-content {
  max-width: calc(var(--content-standard) + var(--content-padding) * 2);
  width: 100%;
  height: auto;
  margin: 0 auto;

  flex-direction: row;
  align-items: start;

  & nav {
    order: 2;
  }
}

/* ---------------------------------------------------------------------------
   3. TOP BAR (profile shortcut + close button)
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .top {
  justify-content: flex-end;
  gap: var(--spacing-3, 12px);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.hamburger-menu-wrapper #hamburger-menu-close {
  transition: color 0.2s ease;
}
.hamburger-menu-wrapper #hamburger-menu-close:hover {
  color: var(--menu-accent);
}

/* ---------------------------------------------------------------------------
   4. "Meny" heading -> editorial eyebrow label
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .inner-content h3 {
  display: none;
}

/* ---------------------------------------------------------------------------
   5. NAV COLUMNS  ->  each top-level item is a COLUMN, ruled at the top.
   The parent link is the column header; its dropdown children stack as ROWS
   beneath it (Atlantic-style). No numbers.
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  row-gap: clamp(28px, 3vw, 44px);
  align-items: start;
  padding: 0 var(--content-padding);

  @media (max-width: 680px) {
    padding: 0;
  }
}

/* Kill the theme's pill / card / active fills. */
.hamburger-menu-wrapper .inner-content .menu > li,
.hamburger-menu-wrapper .inner-content .menu > li.active,
.hamburger-menu-wrapper .inner-content .menu > li:has(.submenu > li.active) {
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
}

/* Each top-level item = a column, ruled at the top. */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu > li {
  display: block;
}

/* Column header = the parent link. */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu > li > a {
  display: block;
  padding: 0 !important;
  font-family: var(--menu-font-display);
  color: var(--color-text-surface-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.15;
  text-decoration: none;
}

.hamburger-menu-wrapper .inner-content button.dropdown-toggle,
.hamburger-menu-wrapper .cm-header-hamburger-menu .dropdown-toggle,
.hamburger-menu-wrapper .dropdown-toggle {
  display: none !important;
}

.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu,
.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  padding: 0;
  width: 100%;
}
.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu > li > a {
  display: block;
  padding: 0 !important;
  font-size: 14px;
  color: var(--color-text-surface-primary);
  text-decoration: none;
}

.hamburger-menu-wrapper nav.m-t-auto {
  margin-top: clamp(28px, 4vw, 48px);
}
.hamburger-menu-wrapper nav.m-t-auto > ul.menu {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-3, 12px);
}
.hamburger-menu-wrapper nav.m-t-auto > ul.menu > li {
  flex: 1 1 200px;
  border: 0;
}
.hamburger-menu-wrapper nav.m-t-auto .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-menu-wrapper .ews-modal-el {
    transition-duration: 0.001s !important;
    transform: none !important;
  }
}

header.cm-header {
  position: sticky;
  top: 0;
  z-index: 101;
}

:root:has(header.cm-header > user-container .top-message) header.cm-header {
  top: calc(-1 * var(--top-message-height));
}

/* 
_____________________________________________________________________
    Artikelpage - styles related to articles
_____________________________________________________________________
*/

body.type-articles {
  & .article-layout {
    max-width: 1020px;
    margin: 0 auto;
    grid-template-columns: 1fr 300px;

    color: var(--color-text-surface-primary) !important;

    @media (max-width: 870px) {
      grid-template-columns: 1fr;
      gap: 30px 0;
    }

    & aside.article-navigation {
      display: none;
    }

    & article.article-content {
      & div {
        max-width: 665px;
        margin: 0 auto;

        &
          span.size-sm.color-accent.font-header.text-uppercase.display-block.m-b-4.m-tablet-b-3.m-lgphone-b-2 {
          display: flex;
          padding: 2px 14px 5px 14px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          width: fit-content;

          text-transform: capitalize;
          font-size: 22px;
          font-style: normal;
          font-weight: 500;
          line-height: 120%;
          letter-spacing: -0.4px;

          border-radius: 0 12px;
          background: var(--color-text-surface-primary, #392239);
        }

        & .avatar {
          margin-right: 12px;
        }

        & p.font-ingress {
          line-height: 1.2;
          font-size: 22px;

          @media (max-width: 680px) {
            font-size: 18px;
            line-height: 1.44;
          }
        }

        & div.cm-article-content {
          margin-top: 18px;

          & h2,
          h3,
          h4,
          h5,
          h6 {
            font-weight: 500;
            font-size: 24px;
            line-height: 1.2;
            letter-spacing: -0.7px;
          }

          & p,
          li {
            font-weight: 300;
            font-size: 18px;
            line-height: 1.5;

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

          /* Drop cap ("anfang") — the leading letter of an intro paragraph. */
          & .anfang {
            float: left;
            margin: 0.02em 0.08em 0 0;

            font-family:
              var(--font-header, "Familjen Grotesk"), sans-serif !important;
            font-weight: 500;
            font-size: 3.6em;
            line-height: 0.72;
            color: var(--color-text-surface-primary, #392239);
            text-transform: uppercase;
          }
        }
      }

      & ul {
        list-style: none;
        padding-left: 0;

        & li {
          position: relative;
          padding-left: 18px;

          &::before {
            content: "";
            position: absolute;
            left: 25px;
            top: 11px;
            height: 8px;
            background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H8.99996C14.1702 0 17.9999 2.29786 17.9999 8.99996V17.9999H7.7872C3.44679 17.9999 0 15.0638 0 9.57443V0Z" fill="%230D3047"/></svg>');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }

      & p.card {
        padding: 2em 1em;
        border-radius: 0 30px 0 30px;
        font-family:
          var(--font-header, "Familjen Grotesk"), sans-serif !important;
      }

      & blockquote {
        border: unset;
        border-top: 1px solid var(--color-text-surface-secondary);
        border-bottom: 1px solid var(--color-text-surface-secondary);
        background: unset;
        padding: 2em 0;

        font-style: normal;
        color: var(--color-text-surface-primary);
        font-family:
          var(--font-header, "Familjen Grotesk"), sans-serif !important;

        & p {
          font-weight: 500 !important;
          font-size: 34px !important;
          line-height: 1.12 !important;
          letter-spacing: -0.03em !important;
          text-wrap: pretty;

          @media (max-width: 680px) {
            font-size: 24px !important;
          }
        }

        & cite {
          position: relative;
          padding-left: 18px;
          font-weight: 500 !important;
          font-size: 17px !important;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5em;
            width: 10px;
            height: 10px;
            background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H8.99996C14.1702 0 17.9999 2.29786 17.9999 8.99996V17.9999H7.7872C3.44679 17.9999 0 15.0638 0 9.57443V0Z" fill="%230D3047"/></svg>');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        &::before {
          content: unset;
        }
      }
    }

    a.btn-icon {
      background: #ffffff !important;
      border: unset !important;

      &:first-child {
        display: none;
      }
    }
  }
}

/*
   Native-artiklar — artiklar med annonsmarkering ("ANNONS"-strippen,
   .bgcolor-ad-card). Selektorn träffar hela artikeln så att både
   markeringen och artikelns övriga innehåll kan stylas härifrån.
*/

body.type-articles
  .article-layout
  article.article-content:has(.bgcolor-ad-card) {
  /* Annonsmarkeringen */
  background: #f7f7fc;

  & .bgcolor-ad-card {
    background: #f7f7fc;
    color: var(--color-text-surface-primary) !important;
    margin-bottom: 24px;
    justify-content: center;

    & .label {
      background: #f7f7fc;
      color: var(--color-text-surface-primary) !important;
    }

    & p {
      font-weight: 500;
    }
  }

  /* Native-specifika styles för artikelinnehållet läggs här */
}

.metalliska-material-markup {
  margin-top: 24px !important;

  & div {
    display: flex;
    gap: 12px;
    padding-top: 24px;
    color: var(--color-surface-secondary);

    & p {
      margin-top: 0;
      font-size: 14px;
    }

    & a.btn {
      width: fit-content;
      min-width: 230px;
      height: fit-content;
    }
  }
}

/* 
_____________________________________________________________________
    Loginpage - styles related to login and register pages
_____________________________________________________________________
*/

body.view-signin {
  & .cm-sign-in {
    display: flex;
  }

  & .cm-signin-form {
    border-radius: 12px;
  }
}

/* 
_____________________________________________________________________
    Kategoripage - styles related to login and register pages
_____________________________________________________________________
*/
body.type-categories {
  & .cm-cta {
    & .text-block {
      margin-left: 0;
    }
    & .bgcolor-surface-secondary {
      background: none;
      background-image: url(/upl/images/1285139.svg);
      background-repeat: no-repeat;
      background-position: 89% 50%;
      background-size: 24% auto;

      @media (max-width: 1300px) {
        background-image: none;
      }
    }

    & h2 {
      font-size: 32px;

      @media (max-width: 680px) {
        font-size: 24px;
      }
    }

    & p {
      margin-top: 12px;
    }

    & h2,
    p {
      text-align: start !important;
      color: var(--color-text-surface-primary) !important;
    }

    & .justify-center {
      justify-content: start !important;
    }

    & .btn-secondary {
      color: white !important;
    }
  }
}

/* 
_____________________________________________________________________
  
  BLOCKS - Styles related to Co-member site blocks
_____________________________________________________________________
*/

/* ETTAN Styles */

div.news-hero.cm-news-hero {
  & .article-list-large.cm-newslist-large {
    & .card {
      padding: 0;

      & h2.size-lg {
        margin-bottom: 12px;
      }
    }
  }

  & h2.size-lg,
  h2.size-md {
    font-weight: 500;
    letter-spacing: -0.7px;
    line-height: 120%;
  }

  /* Columns — Newsletter signup (1st col): softer bottom-weighted scrim */
  & .grid-layout {
    & > .col:first-child {
      & .newsletter-blurb::after {
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 21.86%,
          rgba(0, 0, 0, 0.3) 99.95%
        ) !important;
      }
    }

    /* Kontakta Redaktionen (3rd col): no gradient overlay */
    & > .col:nth-child(3) {
      & .newsletter-blurb {
        & .content {
          color: var(--color-surface-secondary) !important;

          & .btn-primary {
            background: var(--color-surface-secondary) !important;
            border: 0;
            width: 100%;
            &:hover {
              background: var(--color-surface-secondary) !important;
            }
          }
        }

        &::after {
          content: none;
          background: unset;
        }
      }
    }

    /* article headings */
    & h3.size-xs.m-z {
      font-family: var(--font-main);

      font-style: normal;
      font-weight: 500;
      line-height: 120%;
      letter-spacing: -0.4px;
    }

    /* Blockheadings */
    h2.size-sm.m-t-z {
      font-weight: 500;
    }
  }
}

/* Article Grid styles */

section.bgcolor-surface-secondary {
  & .cm-article-list-masonry {
    & .articles-masonry-item {
      .card {
        background: none;
        color: white !important;
      }
    }
  }
}
.cm-article-list-masonry {
  & .articles-masonry-item {
    border-color: color-mix(
      in srgb,
      var(--color-text-surface-secondary) 40%,
      transparent
    );
    .card {
      background: none;
    }
  }
}

.cm-article-list-masonry {
  gap: 0 !important;
  border-left: 1px solid var(--color-text-surface-secondary);

  & .articles-masonry-item {
    border-right: 1px solid var(--color-text-surface-secondary);
  }

  &
    > div:has(.articles-masonry-item):not(:has(~ div .articles-masonry-item))
    .articles-masonry-item:last-child {
    border-right: 0;
  }
}

articles-swiper.cm-article-list-swiper {
  & .articles-swiper-item {
    border-right: 1px solid var(--color-text-surface-secondary);
  }

  & .swiper-wrapper > .articles-swiper-item:last-child {
    border-right: 0;
  }
}

div.cm-article-card {
  & .text-block {
    & > a {
      font-weight: 500;
    }

    & h3 {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.4px;
      line-height: 1.2;

      @media (max-width: 680px) {
        font-size: 18px;
      }
    }
  }
}

/* TEXT & Media Styles */

section.cm-text-media {
  & .card {
    background: var(--color-surface-secondary);
    border-radius: 0 30px 0 30px;
    color: var(--color-surface-accent);
    background-image: url(/upl/images/1275954.png?=1784022060489);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;

    @media (max-width: 680px) {
      padding: var(--spacing-8) var(--content-padding-phone);
    }
  }
}

/* search form */
search-form {
  & input[type="search"] {
    border: 1px solid var(--btn-outline-text-active);
  }
}

/* Kategoriblock */
section.cm-article-categories.bgcolor-surface-secondary {
  background: none;
  color: unset;
  padding: 0;

  & .cm-category-card {
    background: var(--color-surface-accent);
    border-radius: 0 24px 0 24px;

    & .icon {
      background: none;
    }
  }
}

/* headings tripleM dot */

.content-standard h2.size-lg:not(.card *) {
  font-weight: 500;
}

.content-standard h2.size-lg:not(.card *)::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
  background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H8.99996C14.1702 0 17.9999 2.29786 17.9999 8.99996V17.9999H7.7872C3.44679 17.9999 0 15.0638 0 9.57443V0Z" fill="%230D3047"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Metalliska Material block - Flyttas och targets via GTM */

user-container.metalliska-material-block {
  & div.content-standard {
    margin: 0;
    padding: 0;
  }

  & .text-on-bg {
    width: 100vw;
    aspect-ratio: 16/6;

    & .text-block-md {
      max-width: calc(var(--content-standard) + var(--content-padding) * 2);
      margin: 0 auto;
      padding: 0 var(--content-padding);

      @media (max-width: 680px) {
        padding: 0 var(--content-padding-phone);
      }

      & h1 {
        font-size: 70px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -1.7px;

        @media (max-width: 680px) {
          font-size: 42px;
        }
      }

      & h1,
      p {
        max-width: 675px;
      }
    }
  }
}