/* Cookie consent banner and the consent-gated video facade.
 *
 * This is a separate stylesheet because the pages do not share one. index.html
 * and free/index.html load site.css, privacy.html and 404.html carry their own
 * inline styles, and omarchy/index.html has its own styles.css. The banner has
 * to look right on all five, so it brings its own rules and depends on no
 * variable defined elsewhere. Colors are literal here for that reason. */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: #12171d;
  border-top: 1px solid #303943;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.42);
  color: #f2f4f6;
  font: 15px/1.55 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.consent-banner[hidden] { display: none; }

.consent-inner {
  width: min(100% - 44px, 1280px);
  margin-inline: auto;
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}

.consent-text { max-width: 74ch; }
.consent-text p { margin: 0; }
.consent-text p + p { margin-top: 6px; color: #b7c0cc; font-size: 14px; }
.consent-text a { color: #42d4e7; text-underline-offset: 4px; }
.consent-text a:hover { color: #b4f3fa; }

.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The pages that load site.css already style .button. These rules are scoped
   to the banner so they apply on the three pages that do not, without
   overriding the shared button anywhere else. */
.consent-banner .button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid #48515e;
  background: transparent;
  color: #f2f4f6;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.consent-banner .button:hover { border-color: #6c7e8e; }
.consent-banner .button-primary {
  background: #42d4e7;
  border-color: #42d4e7;
  color: #0b0d10;
}
.consent-banner .button-primary:hover { background: #7ce6f3; border-color: #7ce6f3; }
.consent-banner .button:focus-visible { outline: 2px solid #42d4e7; outline-offset: 3px; }

@media (max-width: 680px) {
  .consent-inner { padding-block: 16px; }
  .consent-actions { width: 100%; }
  .consent-actions .button { flex: 1 1 auto; text-align: center; }
}

/* The trailer. Before consent this holds a poster and a play button and makes
   no request to YouTube; consent.js swaps in the iframe. */
.trailer { margin-bottom: clamp(30px, 4vw, 52px); }
.trailer .film-player { position: relative; }
.trailer .film-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.embed-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #030405;
  color: #f2f4f6;
  cursor: pointer;
  font: inherit;
}
.embed-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.embed-facade .embed-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(8, 10, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.34);
  font-size: 15px;
  font-weight: 600;
}
.embed-facade:hover .embed-play,
.embed-facade:focus-visible .embed-play { background: rgba(8, 10, 13, 0.92); }
.embed-note { margin-top: 10px; color: #b7c0cc; font-size: 14px; }