/* ==========================================
   ADGUARDDNS.ORG
   HOMEPAGE SEO ARTICLE — SCROLLABLE BOX
========================================== */

.dns-editorial,
.dns-editorial * {
  box-sizing: border-box;
}

.dns-editorial {
  --article-purple: #542177;
  --article-text: #292438;
  --article-muted: #615b70;

  position: relative;
  padding: 65px 20px 78px;

  background:
    radial-gradient(
      ellipse at 92% 4%,
      rgba(171, 130, 230, 0.12),
      transparent 48%
    ),
    #faf9fd;

  font-family: "Inter", sans-serif;
  scroll-margin-top: 110px;
}

.dns-editorial__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* SCROLLABLE ARTICLE BOX */

.dns-editorial__box {
  width: 100%;
  height: 630px;
  max-height: 72vh;
  min-height: 350px;

  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;

  padding: 43px clamp(26px, 5vw, 76px);

  border: 1px solid #e5d7f2;
  border-radius: 23px;

  background: #ffffff;

  box-shadow:
    0 14px 45px rgba(55, 24, 85, 0.055);

  color: var(--article-text);

  line-height: 1.85;
  font-size: 15.5px;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* CONTROL READING LINE LENGTH */

.dns-editorial__box > * {
  max-width: 88ch;
  margin-left: auto;
  margin-right: auto;
}

/* MAIN ARTICLE TITLE */

.dns-editorial__box h2 {
  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;

  line-height: 1.27;
  letter-spacing: -0.04em;

  color: #211732;

  margin-top: 0;
  margin-bottom: 23px;
}

/* ARTICLE SECTION HEADINGS */

.dns-editorial__box h3 {
  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: clamp(20px, 2vw, 25px);
  font-weight: 800;

  color: #2d1945;
  line-height: 1.4;
  letter-spacing: -0.025em;

  margin-top: 35px;
  margin-bottom: 12px;

  padding-left: 14px;
  border-left: 3px solid var(--article-purple);
}

.dns-editorial__box h4 {
  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 17px;
  font-weight: 750;

  color: #392252;
  line-height: 1.5;

  margin-top: 23px;
  margin-bottom: 8px;
}

/* ARTICLE PARAGRAPHS */

.dns-editorial__box p {
  margin-top: 0;
  margin-bottom: 17px;

  color: var(--article-muted);

  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 400;
}

.dns-editorial__box strong {
  color: #2c1e41;
  font-weight: 700;
}

/* NATURAL INTERNAL LINKS */

.dns-editorial__box a {
  color: var(--article-purple);
  font-weight: 650;

  text-decoration: underline;
  text-decoration-color: #b8a0d4;
  text-underline-offset: 3px;

  transition: color 0.2s ease;
}

.dns-editorial__box a:hover {
  color: #8a39b5;
}

.dns-editorial__box a:focus-visible {
  outline: 3px solid #c83824;
  outline-offset: 3px;
  border-radius: 2px;
}

/* PURPLE SCROLLBAR */

.dns-editorial__box {
  scrollbar-width: thin;
  scrollbar-color: #a57ac7 #f4edf9;
}

.dns-editorial__box::-webkit-scrollbar {
  width: 9px;
}

.dns-editorial__box::-webkit-scrollbar-track {
  background: #f4edf9;
  border-radius: 100px;
}

.dns-editorial__box::-webkit-scrollbar-thumb {
  background: #aa81cb;
  border-radius: 100px;
  border: 2px solid #f4edf9;
}

.dns-editorial__box::-webkit-scrollbar-thumb:hover {
  background: #743d9d;
}

/* KEYBOARD ACCESSIBILITY */

.dns-editorial__box:focus-visible {
  outline: 3px solid #9c68ca;
  outline-offset: 4px;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

  .dns-editorial {
    padding: 48px 20px 58px;
  }

  .dns-editorial__box {
    height: 590px;
    max-height: 70vh;
    padding: 32px 30px;
    border-radius: 20px;
  }

  .dns-editorial__box h2 {
    font-size: 30px;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

  .dns-editorial {
    padding: 38px 15px 50px;
  }

  .dns-editorial__box {
    height: 540px;
    max-height: 68vh;
    min-height: 320px;

    padding: 25px 20px;

    border-radius: 18px;
    line-height: 1.7;
  }

  .dns-editorial__box h2 {
    font-size: 25px;
    line-height: 1.35;
    margin-bottom: 18px;
  }

  .dns-editorial__box h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 29px;
    padding-left: 11px;
  }

  .dns-editorial__box h4 {
    font-size: 16px;
    margin-top: 20px;
  }

  .dns-editorial__box p {
    font-size: 14.5px;
    line-height: 1.8;
    margin-bottom: 15px;
  }
}

@media (max-width: 360px) {

  .dns-editorial {
    padding-left: 11px;
    padding-right: 11px;
  }

  .dns-editorial__box {
    padding: 20px 16px;
  }

  .dns-editorial__box h2 {
    font-size: 23px;
  }
}

/* ==========================================
   HOMEPAGE SEO ARTICLE
   LARGER SCROLLABLE READING BOX
========================================== */

.dns-editorial {
  padding: 65px 24px 80px;
}

.dns-editorial__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.dns-editorial__box {
  height: 860px;
  max-height: none;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 48px 65px;

  border-radius: 24px;
  border: 1px solid #e5d7f2;

  background: #ffffff;

  scrollbar-width: thin;
  scrollbar-color: #9965c3 #f3ebfa;
}

.dns-editorial__box > * {
  max-width: 92ch;
  margin-left: auto;
  margin-right: auto;
}

/* TABLET */

@media (max-width: 900px) {

  .dns-editorial {
    padding: 50px 20px 65px;
  }

  .dns-editorial__box {
    height: 750px;
    max-height: none;
    min-height: 0;
    padding: 36px 32px;
  }
}

/* MOBILE */

@media (max-width: 600px) {

  .dns-editorial {
    padding: 40px 15px 55px;
  }

  .dns-editorial__box {
    height: 680px;
    max-height: none;
    min-height: 0;

    padding: 26px 20px;
    border-radius: 18px;
  }

  .dns-editorial__box h2 {
    font-size: 25px;
  }

  .dns-editorial__box h3 {
    font-size: 20px;
  }

  .dns-editorial__box p {
    font-size: 14.5px;
    line-height: 1.85;
  }
}

/* SMALL MOBILE */

@media (max-width: 360px) {

  .dns-editorial__box {
    padding: 22px 16px;
  }
}