/* Keyword Density category selector and word cloud */

.density-cloud-frame {
  display: block;
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #b8d6eb;
  border-radius: 0;
  background: rgba(39, 136, 203, .045);
}

.density-cloud-frame h3,
.density-frequency-panel h3 {
  margin: 0 0 10px;
}

.density-cloud-description {
  margin: 0 0 12px;
  font-size: .9rem;
}

.density-word-cloud {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  max-height: 420px;
}

.density-word-cloud text {
  font-family: Inter, system-ui, sans-serif;
  /* Font weight is controlled by each phrase's density in JavaScript. */
}

.density-frequency-panel {
  width: 100%;
  min-width: 0;
  margin-top: 20px;
}

.density-category-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.density-category-button {
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid #b8d6eb;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 600 .9rem Inter, system-ui, sans-serif;
  cursor: pointer;
}

.density-category-button:hover,
.density-category-button:focus-visible {
  border-color: #287fbc;
  outline-offset: 2px;
}

.density-category-button.is-active {
  background: #287fbc;
  border-color: #287fbc;
  color: #fff;
}

.density-frequency-panel .density-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.density-frequency-panel .density-table {
  width: 100%;
}

html[data-theme="dark"] .density-cloud-frame,
body.dark-mode .density-cloud-frame {
  background: rgba(39, 136, 203, .09);
  border-color: rgba(155, 191, 225, .3);
}

@media (max-width: 700px) {
  .density-cloud-frame {
    padding: 10px;
  }

  .density-category-selector {
    gap: 4px;
  }

  .density-category-button {
    padding: 10px 3px;
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .density-category-button {
    transition: none;
  }
}


/* Word cloud SVG */
.density-word-cloud {
  overflow: visible;
}


/* draggable word cloud */
.density-word-cloud {
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}

.density-word-cloud.is-dragging {
  cursor: grabbing;
}

.density-cloud-reset {
  display: inline-block;
  margin: 0 0 12px;
  padding: 7px 13px;
  border: 1px solid #287fbc;
  border-radius: 8px;
  background: transparent;
  color: #1b5787;
  font: 600 .85rem Inter, system-ui, sans-serif;
  cursor: pointer;
}

.density-cloud-reset:hover,
.density-cloud-reset:focus-visible {
  background: #287fbc;
  color: #fff;
}


/* fixed watermark and draggable cloud viewport */
.density-cloud-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.density-cloud-viewport .density-word-cloud {
  position: relative;
  z-index: 2;
}

.density-cloud-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  max-width: 92%;
  color: #45698e;
  opacity: 0.08;
  font-family: Inter, sans-serif;
  font-size: clamp(18px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: 0.025em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

html[data-theme="dark"] .density-cloud-watermark,
body.dark-mode .density-cloud-watermark {
  color: #c4ddf5;
  opacity: 0.10;
}


.backlink-anchor-cloud-panel {
  margin-top: 28px;
}
.backlink-cloud-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.backlink-cloud-controls .density-cloud-reset.is-active {
  background: #287fbc;
  color: #fff;
}
.backlink-anchor-cloud-panel .density-word-cloud {
  width: 100%;
  min-height: 220px;
  max-height: 420px;
}


/* Vital SEO backlink anchor cloud landscape layout */
.backlink-anchor-cloud-panel {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 32px 0 0;
  padding: clamp(16px, 2.5vw, 28px);
}

.backlink-anchor-cloud-panel .density-cloud-viewport {
  width: 100%;
  max-width: none;
  aspect-ratio: 900 / 420;
  min-height: 260px;
  overflow: hidden;
}

.backlink-anchor-cloud-panel .density-word-cloud {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 900 / 420;
}

.backlink-anchor-cloud-panel .backlink-cloud-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .backlink-anchor-cloud-panel {
    padding: 12px;
  }

  .backlink-anchor-cloud-panel .density-cloud-viewport {
    min-height: 220px;
  }
}


/* Vital SEO | Accessible dark-mode backlink word cloud */

/*
 * SVG text colours are assigned by JavaScript.
 * Override only the five known density colours in dark mode.
 * Preserve density ranking, font size, weight and interactions.
 */

html[data-theme="dark"] #backlinkAnchorWordCloud text[fill="#c2dced"],
body.dark-mode #backlinkAnchorWordCloud text[fill="#c2dced"] {
  fill: #b9d9ee;
}

html[data-theme="dark"] #backlinkAnchorWordCloud text[fill="#a4cbe8"],
body.dark-mode #backlinkAnchorWordCloud text[fill="#a4cbe8"] {
  fill: #9fd8f4;
}

html[data-theme="dark"] #backlinkAnchorWordCloud text[fill="#5a9fce"],
body.dark-mode #backlinkAnchorWordCloud text[fill="#5a9fce"] {
  fill: #77d9eb;
}

html[data-theme="dark"] #backlinkAnchorWordCloud text[fill="#287fbc"],
body.dark-mode #backlinkAnchorWordCloud text[fill="#287fbc"] {
  fill: #4bc9e4;
}

html[data-theme="dark"] #backlinkAnchorWordCloud text[fill="#123b61"],
body.dark-mode #backlinkAnchorWordCloud text[fill="#123b61"] {
  fill: #e4f7ff;
}