/* css styles */

/* Mobile: prevent any single wide element (long code lines, wide images,
   wide tables) from blowing out the page width and forcing the whole
   layout to zoom out, which is what causes blank space on narrow screens. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

pre, pre code, div.sourceCode, code.sourceCode {
  overflow-x: auto;
  max-width: 100%;
}

img, table, iframe, video {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  #listing-latest table td:first-child {
    white-space: normal;
    width: auto;
  }

  .opf-hero {
    gap: 1.25rem;
  }

  .opf-hero-content h3 {
    font-size: 1.5rem;
  }

  .opf-cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .opf-cookie-actions button {
    width: 100%;
  }
}

.opf-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: #212529;
  color: #f8f9fa;
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
}

.opf-cookie-banner p {
  margin: 0;
  max-width: 70ch;
}

.opf-cookie-banner a {
  color: #ff8f6b;
  text-decoration: underline;
}

.opf-cookie-actions button {
  background: #d9230f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.opf-cookie-actions button:hover {
  background: #b81c0c;
}

.opf-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 42rem;
}

.opf-contact-form label {
  font-weight: 600;
  margin-top: 0.6rem;
}

.opf-contact-form input,
.opf-contact-form select,
.opf-contact-form textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.opf-contact-form button {
  margin-top: 1rem;
  align-self: flex-start;
  background: #d9230f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
}

.opf-contact-form button:hover {
  background: #b81c0c;
}

.opf-form-note {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.opf-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin: 0 0 2.5rem 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid #dee2e6;
}

.opf-hero-image {
  flex: 1 1 320px;
  max-width: 420px;
}

.opf-hero-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.opf-hero-content {
  flex: 2 1 420px;
}

.opf-hero-kicker {
  display: inline-block;
  background: #d9230f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.6rem;
}

.opf-hero-content h3 {
  margin-top: 0.2rem;
  font-size: 1.9rem;
  line-height: 1.2;
}

.opf-hero-btn {
  margin-top: 0.75rem;
  background: #d9230f;
  border-color: #d9230f;
}

.opf-hero-btn:hover {
  background: #b81c0c;
  border-color: #b81c0c;
}

#listing-latest table {
  width: 100%;
}

#listing-latest table td:first-child {
  white-space: nowrap;
  color: #6c757d;
  font-size: 0.85rem;
  width: 9rem;
}