/* "Suggest a correction or update" button on maker pages.
   Change the colours here to match the theme. */
.maker-suggest a.maker-suggest-link,
a.maker-suggest-link {
  --suggest-bg: #d6385e;
  --suggest-bg-hover: #222433;
  --suggest-text: #fff;

  display: inline-block;
  padding: 0.6em 1.3em;
  border: 2px solid var(--suggest-bg);
  border-radius: 999px;
  background: var(--suggest-bg);
  color: var(--suggest-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.maker-suggest a.maker-suggest-link:hover,
.maker-suggest a.maker-suggest-link:focus,
a.maker-suggest-link:hover,
a.maker-suggest-link:focus {
  background: var(--suggest-bg-hover);
  border-color: var(--suggest-bg-hover);
  color: var(--suggest-text);
  text-decoration: none;
}

a.maker-suggest-link:focus-visible {
  outline: 3px solid var(--suggest-bg);
  outline-offset: 3px;
}

/* Space between the dark page header and the first row of maker details. */
article.node > .node-content {
  padding-top: 2.5rem;
}

/* Button placed in the bottom, full-width section: space above and below. */
.layout--onecol .maker-suggest {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

/* Placed both at the top and the bottom: show the top one on wide screens,
   the bottom one once the columns stack. With only one placement, it always
   shows. 40em is where Layout Builder's column sections stack. */
@media (min-width: 40em) {
  article.node:has(.layout:not(.layout--onecol) .maker-suggest) .layout--onecol .maker-suggest {
    display: none;
  }
}
@media (max-width: 39.99em) {
  article.node:has(.layout--onecol .maker-suggest) .layout:not(.layout--onecol) .maker-suggest {
    display: none;
  }
}