/* Puzzles Plus secondary-page refresh.
   Additive styling only: no existing URLs, form fields, values, methods,
   actions, inline handlers, or page scripts are changed. */

body.content-refresh {
  background: var(--soft);
}

.content-refresh .refreshed-page-content {
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  padding: 46px 0 88px;
}

.content-refresh .page-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: clamp(30px, 5vw, 62px);
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(43,7,87,.96), rgba(75,12,164,.90)),
    url('assets/wall-of-puzzles-2.jpg') center/cover;
  box-shadow: var(--shadow);
}

.content-refresh .page-hero .eyebrow {
  margin: 0 0 10px;
  color: #f7ca58;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.content-refresh .page-hero h1 {
  max-width: 780px;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  letter-spacing: -.04em;
}

.content-refresh .page-hero p:last-child {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 1.08rem;
}

.content-refresh .original-page-panel {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(43,7,87,.07);
}

.content-refresh .original-page-panel > :first-child { margin-top: 0 !important; }
.content-refresh .original-page-panel > :last-child { margin-bottom: 0 !important; }

.content-refresh .original-page-panel h1,
.content-refresh .original-page-panel h2,
.content-refresh .original-page-panel h3 {
  color: var(--purple-950);
  line-height: 1.1;
}

.content-refresh .original-page-panel p,
.content-refresh .original-page-panel li {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.content-refresh .original-page-panel ul,
.content-refresh .original-page-panel ol {
  display: grid;
  gap: 12px;
  padding-left: 1.4rem;
}

.content-refresh .original-page-panel li::marker {
  color: var(--purple-650);
  font-weight: 900;
}

.content-refresh main a {
  color: var(--purple-800);
  font-weight: 800;
  text-underline-offset: 3px;
}

.content-refresh main a:hover { color: var(--purple-650); }

.content-refresh .original-page-panel img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 18px;
}

.content-refresh form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.content-refresh fieldset {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.content-refresh legend,
.content-refresh label { font-weight: 900; }

.content-refresh input[type="text"],
.content-refresh input[type="search"],
.content-refresh input[type="email"],
.content-refresh input[type="tel"],
.content-refresh input[type="number"],
.content-refresh select,
.content-refresh textarea {
  width: min(100%, 650px);
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #cfc4d8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font: inherit !important;
}

.content-refresh input:focus,
.content-refresh select:focus,
.content-refresh textarea:focus {
  outline: 3px solid rgba(103,34,201,.2);
  border-color: var(--purple-650) !important;
}

.content-refresh input[type="radio"],
.content-refresh input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--purple-650);
}

.content-refresh button,
.content-refresh input[type="button"],
.content-refresh input[type="submit"],
.content-refresh input[type="reset"] {
  min-height: 46px;
  padding: 9px 17px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--purple-800) !important;
  color: #fff !important;
  font: inherit !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(75,12,164,.18);
}

.content-refresh table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
}

.content-refresh th,
.content-refresh td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top;
}

.content-refresh th {
  background: var(--purple-100);
  color: var(--purple-950);
  text-align: left;
}

.content-refresh tr:last-child td { border-bottom: 0 !important; }
.content-refresh tr:nth-child(even) td { background: #fbf9fd; }

@media (max-width: 700px) {
  .content-refresh .refreshed-page-content {
    width: min(100% - 28px, 1060px);
    padding-top: 28px;
  }

  .content-refresh .original-page-panel {
    padding: 22px;
  }

  .content-refresh th,
  .content-refresh td { padding: 10px !important; }
}

/* July 2026 layout correction:
   Legacy secondary pages position their body content with fixed coordinates.
   Restore normal document flow inside the modern content panel so nothing
   sits underneath the purple hero. */
.content-refresh .original-page-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 1px;
}

.content-refresh .original-page-panel > *:not(script):not(style):not(link):not(meta) {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  transform: none !important;
  max-width: 100% !important;
}

/* Many original pages use nested tables/cells with fixed pixel positioning. */
.content-refresh .original-page-panel table,
.content-refresh .original-page-panel tbody,
.content-refresh .original-page-panel tr,
.content-refresh .original-page-panel td,
.content-refresh .original-page-panel th,
.content-refresh .original-page-panel div,
.content-refresh .original-page-panel p,
.content-refresh .original-page-panel ul,
.content-refresh .original-page-panel ol {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Hidden by the script only when an image is positively identified as the
   old header logo. Page-specific photos and linked images remain visible. */
.content-refresh .original-page-panel .legacy-header-logo {
  display: none !important;
}

/* Prevent old spacer elements from reserving a large blank area. */
.content-refresh .original-page-panel .legacy-layout-spacer {
  display: none !important;
}