/* Additions for the archive. The original theme lives in /theme/css/. */

.blog-featured-thumbnail {
  background-size: cover;
  background-position: center;
}

.quiz-question-answer-ctrl:disabled + .quiz-question-answer-ctrl-lbl {
  cursor: default;
}

/* Account visibility: html.logged-in comes from render.js's inline script, html.is-admin from site.js. */
html:not(.logged-in) .when-logged-in,
html.logged-in .when-logged-out,
html:not(.is-admin) .when-admin {
  display: none !important;
}

/* The archive notice above every page; its sentences stack when they don't fit side by side. */
.archive-banner {
  background: #fff;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding: 6px 12px;
  font: 14px/1.4 Arial, sans-serif;
  text-align: center;
}

.archive-banner-sentence {
  display: inline-block;
  margin: 0 36px;
}

/* Corrupted posts: pictures come databent from the build, and the box loses a run of pixels. */
.corrupted-post .post-blogs-container-thumbnails,
.corrupted-post .post-blogs-container {
  position: relative;
}

.corrupted-post .post-blogs-container-thumbnails::after,
.corrupted-post .post-blogs-container::after {
  content: '';
  position: absolute;
  left: var(--rot-x);
  bottom: -1px;
  width: 26%;
  height: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, #f0f 0 6px, #111 6px 9px, #0f8 9px 18px, #bbb 18px 21px, transparent 21px 33px);
}

/* Databent pictures are a fixed size, so they fill the quiz column. */
.corrupted-post .result-image img,
.corrupted-post .quiz-description-image img {
  width: 100%;
}

.rotted-word {
  white-space: nowrap;
}

/* Rotted pictures keep their proportions; these tiles are 2:1 crops. */
.corrupted-post .wpp-thumbnail {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* Corrupted filler: corrupt.js fixes each word's width so cycling glyphs never reflow the page. */
.corrupt-word {
  display: inline-block;
  white-space: pre;
}

/* Modals: the remodal plugin's layout rules, which its theme stylesheet leaves out. */
.remodal-overlay,
.remodal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
}

.remodal-overlay {
  z-index: 10000;
}

.remodal-wrapper {
  z-index: 10001;
  overflow: auto;
  text-align: center;
}

.remodal-overlay.remodal-is-opened,
.remodal-wrapper.remodal-is-opened {
  display: block;
}

html.remodal-is-locked {
  overflow: hidden;
}

.remodal {
  position: relative;
  display: inline-block;
  max-width: 700px;
}

.select-award-selected {
  outline: 3px solid #ff698f;
  outline-offset: -3px;
}

.award-post-submit-button,
.award-selection-button {
  cursor: pointer;
}

.quiz-question-answer {
  cursor: pointer;
}

/* The upload label stands in for the native file control, which stays keyboard-focusable. */
.cmb2-wrap input.cmb2-upload-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cmb2-wrap input.cmb2-upload-file:focus + .cmb2-upload-button {
  outline: 2px solid #ff698f;
}

.cmb2-upload-button {
  display: inline-block;
  padding: 8px 12px;
  background-color: #ff698f;
  color: white;
  cursor: pointer;
  transition-duration: 0.4s;
}

.cmb2-upload-button:hover {
  background-color: black;
}

/* The Anything Popup box shown while a quiz submits. */
.anything-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 46, 56, 0.9);
}

.anything-popup[hidden] {
  display: none;
}

.anything-popup-box {
  width: min(600px, 90vw);
  background: #fff;
}

.anything-popup-title {
  padding: 8px 12px;
  background: #ffcaca;
  font-weight: bold;
}

.anything-popup-body {
  padding: 16px;
  text-align: center;
}

.rewarded-survey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
}

/* WordPress's "feather-magazine-related" crop. */
.related-posts .featured-thumbnail img {
  width: 200px;
  height: 125px;
  object-fit: cover;
}

/* Ad Inserter's blocker message, with the colours and size from the cached pages. */
.adblock-overlay {
  position: fixed;
  inset: 0;
  z-index: 12082;
  background: #141414;
  opacity: 0.89;
  cursor: pointer;
}

.adblock-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 18764;
  width: 300px;
  padding: 10px;
  transform: translate(-50%, -50%);
  background: #181818;
  border: 5px solid #f00;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.adblock-notice-title {
  text-align: center;
}

.adblock-notice img {
  display: block;
  max-width: 100%;
  height: auto;
}