/* School Data campaign site.
 *
 * Brand tokens, hero grid, and header icon taken from www.schooldata.com.au
 * (css/HomePage/style.css and School_Data_ICON.jpg, Aug 2026). Copied into
 * this repo — do not hotlink www.
 *
 * The mock's client-side unlock is kept as UX only: the "unlocked" state means
 * the three fields look valid, nothing more. The document itself is gated by the
 * API, which issues a short-lived signed URL only after recording a Download.
 */

:root {
      --primary-color: #2563eb;
      --brand-green: #c7f74d;
      --brand-green-hover: #b8e63d;
      --brand-dark: #004d42;
      --brand-dark-bg: #0a2320;
      --brand-teal: #1fa58c;
      --nav-dark: #20232a;
      --on-background: #374151;
      --text-dark: #1a1a1a;
      --muted: #6b7280;
      --grid-lime: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M40 0V40M0 0V40M0 0H40M0 40H40' stroke='%23c7f74d' stroke-width='0.5' opacity='0.13'/></svg>");
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }

    body {
      font-family: "Poppins", system-ui, sans-serif;
      color: #e0e0e0;
      background: var(--brand-dark-bg);
      min-height: 100vh;
      line-height: 1.6;
    }

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(circle at 50% 40%, var(--brand-teal) 0%, var(--brand-dark-bg) 70%);
      position: relative;
    }

    .page::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: var(--grid-lime);
      mask-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
      -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
    }

    .site-nav {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 28px;
      background: rgba(32, 35, 42, 0.25);
      backdrop-filter: blur(25px) saturate(180%);
      -webkit-backdrop-filter: blur(25px) saturate(180%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #fff;
    }

    .brand-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .brand-logo {
      color: #fff;
      font-weight: 700;
      font-size: 1.5rem;
      line-height: 1.1;
      letter-spacing: -0.02em;
      padding-left: 4px;
    }

    .main {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 20px 56px;
    }

    .stage {
      width: 100%;
      max-width: 920px;
    }

    .boxes {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .box {
      background: rgba(255, 255, 255, 0.97);
      border: 1.5px solid #e5e7eb;
      border-radius: 16px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
      min-height: 168px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .file-box {
      grid-column: 1 / -1;
      min-height: 148px;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      text-decoration: none;
      color: inherit;
      cursor: not-allowed;
      background: #f3f4f6;
      position: relative;
      overflow: hidden;
    }

    .file-box.is-unlocked {
      cursor: pointer;
      background: #fff;
      border-color: var(--brand-green);
      box-shadow: 0 8px 25px rgba(199, 247, 77, 0.28);
    }

    .file-box.is-unlocked:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(199, 247, 77, 0.35);
    }

    .file-box.is-locked:hover {
      border-color: #d1d5db;
    }

    .file-box.is-shake {
      animation: shake 0.42s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }

    .file-icon {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      background: var(--brand-dark);
      color: var(--brand-green);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: "Roboto Mono", monospace;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.04em;
    }

    .file-box.is-unlocked .file-icon {
      background: var(--brand-green);
      color: var(--brand-dark);
    }

    .file-copy { flex: 1; min-width: 0; }

    .file-kicker {
      font-family: "Roboto Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .file-title {
      font-family: "Roboto Mono", monospace;
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--text-dark);
      letter-spacing: -0.02em;
    }

    .file-meta {
      font-size: 0.875rem;
      color: var(--on-background);
      margin-top: 4px;
    }

    .file-status {
      font-family: "Roboto Mono", monospace;
      font-size: 0.8rem;
      font-weight: 500;
      padding: 10px 14px;
      border-radius: 8px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .file-box.is-locked .file-status {
      background: rgba(0, 0, 0, 0.06);
      color: var(--muted);
    }

    .file-box.is-unlocked .file-status {
      background: var(--brand-green);
      color: var(--brand-dark);
    }

    .field-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--on-background);
      letter-spacing: 0.025em;
    }

    .form-input {
      margin-top: 10px;
      width: 100%;
      padding: 12px 16px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      font-size: 0.875rem;
      font-family: inherit;
      background: #fff;
      color: var(--text-dark);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .form-input::placeholder { color: #9ca3af; }

    .form-input:focus {
      outline: none;
      border-color: #2a7d7d;
      box-shadow: 0 0 0 3px rgba(42, 125, 125, 0.15);
    }

    .form-input.is-invalid {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    }

    .field-hint {
      font-size: 0.75rem;
      color: #ef4444;
      min-height: 1.1em;
      margin-top: 8px;
    }

    .status-live {
      margin-top: 14px;
      text-align: center;
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.78);
      min-height: 1.4em;
    }

    .status-live.is-ready { color: var(--brand-green); }

    .site-footer {
      position: relative;
      z-index: 1;
      background: var(--nav-dark);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding: 18px 28px;
      text-align: center;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.55);
    }

    @media (max-width: 720px) {
      .boxes { grid-template-columns: 1fr; }
      .file-box {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
      }
      .file-status { align-self: stretch; text-align: center; }
      .site-nav { padding: 14px 18px; }
      .brand-icon { width: 28px; height: 28px; }
    }

/* ── Additions beyond the mock ─────────────────────────────────────── */

/* Honeypot. Hidden from people and from assistive technology, but present in
   the DOM and left focusable-free so a form-filling bot will populate it.
   Not `display: none` — some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Consent line under the form, links to /privacy/. */
.consent {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.consent a {
  color: var(--brand-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.status-live.is-error {
  color: #ffb4a2;
}

.box.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

/* Managed widget, parked at the right of the nav. Visible, and it must stay
   that way: hiding it means the challenge can never be solved, getResponse()
   stays empty, and download.js refuses every submit.

   The 300x65 box is reserved rather than left to the iframe, because the
   widget arrives with the remote script and would otherwise grow the nav
   under the visitor mid-read. The iframe is cross-origin — theme and size are
   the only knobs, and both live in download.js. */
.cf-turnstile {
  width: 300px;
  min-height: 65px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  /* 300px of widget plus the wordmark does not fit a phone: let the nav become
     two rows rather than overflow, widget centred under the brand. */
  .site-nav { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .site-nav .brand { margin-right: auto; }
}

/* ── Prose pages (privacy) ─────────────────────────────────────────── */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 24px;
  color: #d6dedb;
}

.prose h1 {
  color: #fff;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.prose .updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 28px;
}

.prose h2 {
  color: var(--brand-green);
  font-size: 1.05rem;
  margin: 28px 0 8px;
}

.prose p,
.prose li {
  font-size: 0.95rem;
  line-height: 1.65;
}

.prose ul {
  padding-left: 20px;
  margin: 8px 0;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  color: var(--brand-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose .back {
  display: inline-block;
  margin-top: 32px;
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}