/* ============================================================
   NullPo Works — pages.css
   SHARED by contact.html & beta-test.html.
   Requires base.css first. Subpage scaffold, form controls,
   status messages, FAQ accordion, contact layout.
   ============================================================ */

/* ---- Subpage scaffold ---- */
.subpage{ padding:calc(var(--header-h) + 52px) 0 96px; position:relative; }
.subpage-head{ max-width:760px; margin-bottom:48px; }
.subpage-head .eyebrow{ margin-bottom:18px; }
.subpage-title{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2.1rem, 8vw, 3.4rem); letter-spacing:-0.02em; line-height:1.06;
  color:var(--ink); margin-bottom:18px; text-wrap:balance;
}
.subpage-lead{ color:var(--ink-dim); font-size:1.02rem; max-width:60ch; line-height:1.95; text-wrap:pretty; }

/* ---- Card shell ---- */
.panel-card{
  position:relative; background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:14px; padding:30px 26px;
}

/* ============================================================
   Form controls
   ============================================================ */
.form-group{ margin-bottom:22px; }
.form-label{ display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; }
.form-optional{ color:var(--ink-faint); text-transform:none; letter-spacing:0; font-size:0.92em; }
.form-required{ color:var(--brand); }
.form-input{
  width:100%; background:rgba(0,0,0,0.28); border:1px solid var(--line-2); border-radius:7px;
  color:var(--ink); font-family:var(--sans); font-size:0.95rem; line-height:1.6; padding:13px 15px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.form-input::placeholder{ color:var(--ink-faint); }
.form-input:focus{ outline:none; border-color:var(--brand-dim); background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(52,226,160,0.13); }
.form-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa6a1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.form-textarea{ resize:vertical; min-height:130px; line-height:1.75; }
.form-char-count{ text-align:right; font-family:var(--mono); font-size:0.7rem; color:var(--ink-faint); margin-top:8px; }
.form-note{
  font-size:0.85rem; color:var(--ink-dim); line-height:1.75;
  background:rgba(0,0,0,0.22); border:1px solid var(--line); border-left:2px solid var(--brand-dim);
  border-radius:7px; padding:14px 16px; margin:8px 0 24px;
}
.form-note a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }

/* submit */
.contact-submit-btn,.beta-form-submit{ width:100%; padding:15px 22px; font-size:0.8rem; }

/* ---- Status messages (used by contact.js & tester.js) ---- */
.contact-status{ margin-top:18px; padding:13px 16px; border-radius:7px; font-size:0.9rem; font-weight:500; line-height:1.6; }
.contact-status--error{ background:rgba(224,72,63,0.12); border:1px solid rgba(224,72,63,0.42); color:#f3a59f; }
.contact-status--success{ background:rgba(52,226,160,0.12); border:1px solid var(--brand-dim); color:var(--brand); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-item{ border:1px solid var(--line); border-radius:10px; background:var(--panel); margin-bottom:12px; overflow:hidden; transition:border-color .3s var(--ease); }
.faq-item[open]{ border-color:var(--line-2); }
.faq-question{
  cursor:pointer; list-style:none; position:relative;
  padding:18px 52px 18px 20px; font-weight:700; font-size:0.96rem; color:var(--ink); line-height:1.55;
}
.faq-question::-webkit-details-marker{ display:none; }
.faq-question::after{
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  color:var(--brand); font-family:var(--mono); font-size:1.4rem; line-height:1; transition:transform .3s var(--ease);
}
.faq-item[open] .faq-question::after{ content:'−'; }
.faq-question:hover{ color:var(--brand); }
.faq-answer{ padding:2px 20px 20px; color:var(--ink-dim); font-size:0.92rem; line-height:1.9; }
.faq-answer p{ margin-bottom:10px; }
.faq-answer p:last-child{ margin-bottom:0; }
.faq-answer ul,.faq-answer ol{ margin:10px 0 10px 22px; }
.faq-answer li{ margin-bottom:6px; }
.faq-answer strong{ color:var(--ink); }

/* ============================================================
   Contact page layout
   ============================================================ */
.contact-faq{ margin-top:64px; }
.contact-faq-title{ font-family:var(--disp); font-weight:700; font-size:clamp(1.4rem,5vw,1.9rem); letter-spacing:-0.01em; margin-bottom:24px; }
.contact-alt{ margin-top:48px; text-align:center; border-top:1px solid var(--line); padding-top:40px; }
.contact-alt p{ color:var(--ink-dim); font-size:0.95rem; margin-bottom:20px; }
.contact-alt .btn{ display:inline-flex; }

@media (min-width:760px){
  .panel-card{ padding:40px 38px; }
  .contact-submit-btn,.beta-form-submit{ width:auto; min-width:220px; }
}