/*
 * Semrush Blog replica on AEM Edge Delivery — foundation styles.
 *
 * FONTS: the brand face "Lazzer" (Displaay, licensed to Semrush) is self-hosted as
 * fonts/LazzerVF.woff2 — the byte-identical file the live blog serves — and declared in
 * styles/fonts.css (loaded after first paint). Before it lands, text paints in the
 * metric-matched `lazzer-fallback` (local Arial). Licensing notes: fonts/LICENSING.md.
 *
 * Structural layer kept from adobe/aem-boilerplate: body appear gate, header height
 * reservation, main > .section scaffold. Tokens and paint lifted from stardust/canon/canon.css.
 */

:root {
  /* colors (canon --c-*) */
  --c-lavender-light: #e0c7ff;
  --c-lavender-main: #c190ff;
  --c-lavender-dark: #b072ff;
  --c-lavender-darkest: #a964ff;
  --c-mint: #dceeeb;
  --c-success: #1a8;
  --c-link: #2969ff;
  --c-critical: #ff5454;
  --c-black: #181e15;
  --c-white: #fff;
  --c-grey-dark: #6c6e79;
  --c-grey-medium: #d1d2d5;
  --c-grey-light: #f0f1f2;
  --c-reveal-bg: #dceeeb;
  --c-adobe-red: #eb1000;
  --c-article-gradient-end: #eee9ff;

  /* fixed brand ink/paper — the source paints cards, bands and the UVP tooltip in NON-adaptive colours;
     these never flip with the scheme (the --c-black / --c-white / --c-grey-* above do) */
  --c-ink: #181e15;
  --c-paper: #fff;
  --c-grey-dark-fixed: #6c6e79;
  --c-grey-medium-fixed: #d1d2d5;
  --c-grey-light-fixed: #f0f1f2;

  /* boilerplate aliases */
  --background-color: var(--c-white);
  --light-color: var(--c-grey-light);
  --dark-color: var(--c-grey-dark);
  --text-color: var(--c-black);
  --link-color: var(--c-black);
  --link-hover-color: var(--c-grey-dark);

  /* fonts */
  --font-lazzer: lazzer, lazzer-fallback, arial, sans-serif;
  --body-font-family: var(--font-lazzer);
  --heading-font-family: var(--font-lazzer);

  /* layout (canon .container: 1140 fixed ≥1140; module cap 1152 on article prose) */
  --content-max-width: 1140px;
  --module-max-width: 1152px;
  --container-padding: 15px;

  /* chrome reservation: promo banner 37 + header 70 + divider 1 + blog-nav 47 */
  --nav-height: 155px;
}

@media (width >= 500px) {
  :root { --container-padding: 24px; }
}

@media (width >= 768px) {
  :root { --container-padding: 45px; }
}

@media (width >= 1140px) {
  :root { --container-padding: 65px; }
}

@media (width >= 1280px) {
  :root { --nav-height: 169px; } /* header row grows to 84 */
}

@media (width >= 1440px) {
  :root { --nav-height: 190px; } /* UVP caption shows: blog-nav 68 */
}

/* ---- dark scheme: the source flips exactly five --colors-*-adaptive tokens under html[data-theme=dark]
   (black⇄white, grey dark⇄medium, grey light→#4c4e56); lavender and mint never change. The choice lives in
   localStorage "semblog-theme" and scripts.js applies it before the body appears (default light; the source
   ignores prefers-color-scheme). ---- */
html[data-theme="dark"] {
  --c-black: #fff;
  --c-white: #181e15;
  --c-grey-dark: #d1d2d5;
  --c-grey-medium: #6c6e79;
  --c-grey-light: #4c4e56;
  --c-reveal-bg: #181e15;

  color-scheme: dark;
  background-color: #181e15;
}

/* surfaces the source keeps in fixed brand colours — the promo banner, the UVP tooltip, mint / lavender cards
   and bands, the article hero gradient, callouts, the share buttons — keep ink text and light greys in dark */
html[data-theme="dark"] :is(
  body > .promo-banner,
  body > .site-chrome .uvp__tooltip,
  .cards:not(.short) .cards-card,
  .cta-block,
  .tools-band,
  .promo-widget,
  .newsletter,
  .article-hero,
  .article-hero-tooltip,
  .article-prose .article-cta,
  .article-prose blockquote,
  .article-prose p:has(> a > .icon) a,
  .toc .toc-share a,
  main .search .search-submit
) {
  --c-black: var(--c-ink);
  --c-white: var(--c-paper);
  --c-grey-dark: var(--c-grey-dark-fixed);
  --c-grey-medium: var(--c-grey-medium-fixed);
  --c-grey-light: var(--c-grey-light-fixed);
}

/* metric-matched first-paint fallback for the brand face (Arial adjusted to Lazzer's metrics) */
@font-face {
  font-family: lazzer-fallback;
  src: local("Arial");
  size-adjust: 107.985%;
  ascent-override: 89.712%;
  descent-override: 22.337%;
  line-gap-override: 0%;
}

/* ---- reset (source: border-box everywhere, Panda reset, normalize) ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
::backdrop,
::before,
::after {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: currentcolor;
}

html {
  line-height: 1.15;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.32px;
  -webkit-font-smoothing: unset;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
  background: var(--c-white);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

menu,
ol,
ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

a:any-link {
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
}

button {
  text-transform: none;
  cursor: pointer;
}

img,
svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* ---- type ramp (canon .t-*; mobile first, ≥768 overrides) ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  font-weight: 600;
  overflow-wrap: break-word;
  text-wrap: balance; /* live's reset balances every heading (h1–h6); card titles break earlier than a greedy wrap */
  scroll-margin: calc(var(--nav-height) + 16px);
}

h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; }
h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.64px; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -0.48px; }
h4 { font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; }
h5 { font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; }
h6 { font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; }

p,
dl,
ol,
ul,
pre,
blockquote {
  overflow-wrap: break-word;
}

@media (width >= 768px) {
  h1 { font-size: 64px; letter-spacing: -1.28px; }
  h2 { font-size: 48px; letter-spacing: -0.96px; }
  h3 { font-size: 32px; letter-spacing: -0.64px; }
  h4 { font-size: 24px; letter-spacing: -0.48px; }
  h5 { font-size: 24px; letter-spacing: -0.48px; }
}

/* type utilities shared by the blocks' template DOM (never on authored elements) */
.t-h1 { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.8px; }
.t-h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.64px; }
.t-h3 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.48px; }
.t-h5 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.4px; }
.t-normal { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.32px; }
.t-normal-bold { font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.32px; }
.t-subtitle-small { font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.32px; }
.t-small { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.28px; }
.t-small-bold { font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -0.28px; }
.t-extra-small { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.24px; }
.t-nav { font-weight: 600; font-size: 16px; letter-spacing: -0.32px; line-height: 1.2; }
.t-dropdown { font-weight: 500; font-size: 14px; letter-spacing: -0.28px; line-height: 1.4; }
.t-mobile-nav { font-weight: 600; font-size: 18px; letter-spacing: -0.36px; line-height: 1.4; }

.t-h2-upper {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.44px;
  text-transform: uppercase;
}

@media (width >= 768px) {
  .t-h1 { font-size: 64px; letter-spacing: -1.28px; }
  .t-h2 { font-size: 48px; letter-spacing: -0.96px; }
  .t-h2-upper { font-size: 46px; letter-spacing: -1.84px; }
  .t-h3 { font-size: 32px; letter-spacing: -0.64px; }
  .t-h5 { font-size: 24px; letter-spacing: -0.48px; }
  .t-extra-small { font-size: 14px; letter-spacing: -0.28px; }
}

.link-underline { text-decoration: underline; }
.link-underline:hover { opacity: 0.7; }
.nowrap { white-space: nowrap; }

/* responsive show/hide helpers (canon) */
.show-sm,
.show-xm,
.show-xxl {
  display: none;
}

@media (width >= 500px) {
  .show-xm { display: inline; }
  .hide-xm { display: none; }
}

@media (width >= 768px) {
  .show-sm { display: block; }
  .hide-sm { display: none; }
}

@media (width >= 1440px) {
  .show-xxl { display: block; }
}

/* ---- buttons (authored <strong>/<em> links → decorateButtons classes) ---- */
p.button-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

a.button:any-link,
button.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 16px 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.32px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

/* primary (= <strong><a>): lavender pill, ink text (fixed: the pill stays lavender in dark) */
a.button:any-link,
a.button.primary,
button.button,
button.button.primary {
  background-color: var(--c-lavender-dark);
  border-color: var(--c-lavender-dark);
  color: var(--c-ink);
}

a.button:hover,
a.button:focus-visible,
button.button:hover,
button.button:focus-visible {
  background-color: var(--c-lavender-main);
  border-color: var(--c-lavender-main);
  color: var(--c-ink);
}

/* secondary (= <em><a>): ink fill, white text */
a.button.secondary,
button.button.secondary {
  background-color: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  background-color: var(--c-lavender-dark);
  border-color: var(--c-lavender-dark);
  color: var(--c-ink);
}

a.button.secondary:active,
button.button.secondary:active {
  background-color: var(--c-lavender-darkest);
  border-color: var(--c-lavender-darkest);
  color: var(--c-ink);
}

/* accent (= <em><strong><a>): outline pill */
a.button.accent,
button.button.accent {
  background-color: transparent;
  border-color: var(--c-black);
  color: var(--c-black);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  background-color: var(--c-lavender-dark);
  border-color: var(--c-lavender-dark);
  color: var(--c-ink);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* ---- sections (canon .container model as the section wrapper) ---- */
main > .section {
  margin-top: 24px;
}

main > .section > div {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* promo widgets keep the container width but the promo padding (canon .container--promo: 0 below 768, 45px from 768 —
   the 45px rule lives in the ≥768 block below and must come AFTER this reset) */
main > .section > div:where(.promo-widget-wrapper) {
  padding: 0;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* the pipeline leaves the consumed metadata block's section as an EMPTY first section */
main > .section:empty + .section {
  margin-top: 0;
}

main .section:empty {
  display: none;
}

/* the home rhythm: a titled section or a band block opens a new band (canon .home-section) */
main > .section:has(> .default-content-wrapper > h2),
main > .section:where(.newsletter-container, .promo-widget-container, .cta-block-container) {
  margin-top: 56px;
}

main > .section.sr-only + .section {
  margin-top: 26px;
}

@media (width >= 768px) {
  main > .section:has(> .default-content-wrapper > h2),
  main > .section:where(.newsletter-container, .promo-widget-container, .cta-block-container) {
    margin-top: 80px;
  }

  main > .section > div:where(.promo-widget-wrapper) {
    padding: 0 45px;
  }
}

@media (width >= 1140px) {
  main > .section > div {
    width: var(--content-max-width);
    max-width: none;
  }
}

/* ONE full-bleed escape: the section style `full-bleed`, and the blocks that paint edge to edge */
main > .section.full-bleed > div,
main > .section > div:where(.newsletter-wrapper, .cta-block-wrapper, .tools-band-wrapper) {
  width: 100%;
  max-width: none;
  padding: 0;
}


/* section styles (closed set; default-content sections only) */
main .section.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

main .section.light,
main .section.highlight {
  background-color: var(--c-grey-light);
  margin: 0;
  padding: 40px 0;
}

main .section.tinted {
  background-color: var(--c-mint);
  margin: 0;
  padding: 40px 0;
}

/* section titles before a cards grid (canon .section-title.t-h2-upper) */
main .cards-container .default-content-wrapper h2 {
  color: var(--c-black);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.44px;
  text-transform: uppercase;
}

main .cards-container .default-content-wrapper h2 a:hover {
  text-decoration: underline;
}

/* sub-category chips: the list right after a section title (canon .tag-list) */
main .cards-container .default-content-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
  margin-right: -15px;
}

main .cards-container .default-content-wrapper ul a {
  display: inline-flex;
  border-radius: 42px;
  border: 1px solid var(--c-black);
  padding: 7px 16px;
  color: var(--c-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.28px;
  cursor: pointer;
  transition: all 0.2s ease;
}

main .cards-container .default-content-wrapper ul a:hover {
  background-color: var(--c-lavender-main);
  border-color: var(--c-lavender-main);
  color: var(--c-ink);
}

@media (width >= 768px) {
  main .cards-container .default-content-wrapper h2 {
    font-size: 46px;
    letter-spacing: -1.84px;
  }

  main .cards-container .default-content-wrapper ul {
    margin-top: 24px;
    margin-right: 0;
    margin-bottom: 6px;
  }
}

/* ---- Experience Workspace edit mode (da.live inline editor only) ---- */

/* (c) styled-link utilities as wrapper variants at equal specificity */
.link-underline,
.link-underline-wrap :where(a) {
  text-decoration: underline;
}

/* (b) card-as-link inner anchor reads like the card text */
a .prosemirror-editor a:any-link {
  color: inherit;
  text-decoration: none;
}

/* (a) repaint CTAs from their authored marks (classes die while editing) */
.prosemirror-editor p > :is(strong, em) > a:any-link,
.prosemirror-editor p > a:any-link:has(> :is(strong, em):only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.32px;
  text-decoration: none;
  white-space: nowrap;
}

.prosemirror-editor p > a:any-link > :is(strong, em) {
  font-weight: inherit;
  font-style: inherit;
}

.prosemirror-editor p > strong > a:any-link,
.prosemirror-editor p > a:any-link:has(> strong:only-child) {
  background-color: var(--c-lavender-dark);
  border-color: var(--c-lavender-dark);
  color: var(--c-black);
}

.prosemirror-editor p > em > a:any-link,
.prosemirror-editor p > a:any-link:has(> em:only-child) {
  background-color: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
  font-style: normal;
}

.prosemirror-editor p > em > strong > a:any-link,
.prosemirror-editor p > strong > em > a:any-link {
  background-color: transparent;
  border-color: var(--c-black);
  color: var(--c-black);
  font-style: normal;
}