/*
 * Display-ad placement contract:
 * - The hidden section reserves no layout space.
 * - During data-ad-pending, the parent is zero-height and clipped, while its
 *   mount remains width-measurable for responsive creative sizing.
 * - The controller removes data-ad-pending once a creative is ready to show.
 */
#display-ad-placement[hidden] {
  display: none !important;
}

#display-ad-placement[data-ad-pending] {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
}

#display-ad-mount {
  display: block;
  width: 100%;
  min-width: 1px;
}

#display-ad-placement:not([hidden]):not([data-ad-pending]) {
  margin: 3rem auto;
  padding: 1rem 0;
  width: 100%;
  max-width: 970px;
  clear: both;
  text-align: center;
}

#display-ad-placement .ad-label {
  display: block;
  font: 12px/1.5 Arial, sans-serif;
  letter-spacing: .05em;
  margin-bottom: .5rem;
  color: #fff;
}

#ad-privacy-settings {
  width: auto;
  padding: .25rem .5rem;
  margin: .25rem;
  font-size: .85rem;
  color: #fff;
  background: #171717;
  border: 1px solid currentColor;
}

/* Preserve the navigation buttons while allowing them to wrap on phones. */
@media (max-width: 600px) {
  body > nav { flex-wrap: wrap; }
  body > nav ul:first-of-type:last-of-type {
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
    width: 100%;
  }
}

#ad-privacy-settings[hidden] {
  display: none !important;
}