/* Security page styles */

.hero_circle {
  background: var(--surface);
  background-image: url('./../../img/new-design/security-primary.svg');
  background-origin: border-box;
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 25%;

  &::before {
    display: none;
  }

  @media (width < 64rem) {
    background-image: unset;
  }
}

[data-layout="article"] ul li strong {
  color: rgb(var(--primary));
}

/* Reduce gap between content and "Questions about security?" section on mobile */
@media (width < 48rem) {
  section[data-bg="second"]:has([data-layout="article"]) + section[data-bg="second"] {
    & > div {
      padding-top: 0;
    }
  }
}

/* Tighter sections + light separators on mobile */
@media (width < 48rem) {
  [data-layout="article"] > [data-gap="article"] {
    gap: 1.5rem;
  }


  [data-layout="article"] > [data-gap="article"] > article + article:not([data-bg="primary"]):not(article[data-bg="primary"] + article) {
    position: relative;
    padding-top: 1.5rem;

    &::before {
      content: '';
      display: block;
      width: 60%;
      height: 1px;
      background: linear-gradient(to right, transparent, #d1d5db, transparent);
      position: absolute;
      top: 0;
      left: 20%;
    }
  }
}

/* Center buttons on mobile */
@media (width < 48rem) {
  [data-layout="article"] [data-layout="row"]:has([role="button"]) {
    justify-content: center;
  }

  [data-layout="article"] a[role="button"],
  section:has(hgroup) a[role="button"] {
    align-self: center;
  }
}