/* ============================================================
   PREVIEW EXPIRATION SCREEN — reversible demo overlay
   Remove the preview-expired.css + preview-expired.js tags from
   each page's <head> to restore the full website.
   ============================================================ */

/* Lock the page and hide ALL underlying content while the cover
   is active. The overlay is the only visible element. */
html.pe-locked,
html.pe-locked body {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

html.pe-locked {
  background: #0B142B !important;
}

html.pe-locked body {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.pe-locked > #previewExpiredOverlay {
  visibility: visible !important;
  pointer-events: auto !important;
}

.pe-overlay {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  z-index: 2147483647;
  background: linear-gradient(160deg, #0B142B 0%, #101C3A 60%, #16244a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pe-card {
  max-width: 560px;
  width: 100%;
  text-align: center;
  color: #FFFFFF;
}

.pe-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: rgba(197, 31, 50, 0.12);
  border: 1px solid rgba(197, 31, 50, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-icon svg {
  width: 30px;
  height: 30px;
  stroke: #C51F32;
}

.pe-title {
  font-family: 'Oswald', 'Inter', Arial, sans-serif;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #FFFFFF;
}

.pe-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #B9BFCB;
  margin: 0 0 0.75rem;
}

.pe-text strong {
  color: #FFFFFF;
  font-weight: 600;
}

.pe-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.95rem 2.5rem;
  background: #C51F32;
  color: #FFFFFF;
  font-family: 'Oswald', 'Inter', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pe-btn:hover,
.pe-btn:focus-visible {
  background: #A31828;
  transform: translateY(-1px);
}

.pe-divider {
  width: 56px;
  height: 3px;
  background: #C51F32;
  border: none;
  margin: 1.5rem auto 0;
}

@media (max-width: 480px) {
  .pe-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.25rem;
  }
  .pe-btn {
    width: 100%;
  }
}