/* ==========================================================================
   Artist Name Generator — pages.css
   About, Contact, Legal pages, 404.
   ========================================================================== */

/* ---------- Generic article/prose page (legal, about) ---------- */
.doc { max-width: 800px; margin-inline: auto; }
.doc__updated { color: var(--text-faint); font-size: .88rem; margin-bottom: 2rem; }
.doc h2 { font-size: 1.5rem; margin-top: 2.4rem; margin-bottom: .8rem; }
.doc h3 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: .5rem; }
.doc p { margin-bottom: 1.1rem; color: var(--text-soft); }
.doc ul, .doc ol { margin: 0 0 1.2rem 1.2rem; display: grid; gap: .5rem; }
.doc ul li { list-style: disc; color: var(--text-soft); }
.doc ol li { list-style: decimal; color: var(--text-soft); }
.doc li::marker { color: var(--magenta); }
/* :not(.btn) — buttons carry their own colour and must not be restyled as
   prose links, which made them unreadable on the accent background. */
.doc a:not(.btn) { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.doc a:not(.btn):hover { color: var(--magenta-light); }
.doc strong { color: var(--text); }
.doc address { font-style: normal; color: var(--text-soft); }

/* ---------- About ---------- */
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2.4rem 0; }
.stat {
  text-align: center;
  padding: 1.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { color: var(--text-muted); font-size: .9rem; margin-top: .3rem; }

.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; margin-top: 1.6rem; }

@media (max-width: 640px) {
  .about-stats { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
}

/* ---------- Form fields (shared: contact + any page form) ---------- */
.contact-form .field { display: flex; flex-direction: column; gap: .45rem; }
.contact-form .field__label {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text-soft);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: rgba(6, 3, 16, .55);
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(234, 71, 155, .28);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .2);
}
.contact-form .field__error { color: var(--error); font-size: .82rem; min-height: 1rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.contact-info { display: grid; gap: 1.2rem; }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.contact-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); border: 1px solid var(--border-strong);
  color: var(--magenta); margin-bottom: 1rem;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.contact-card p, .contact-card a:not(.btn) { color: var(--text-soft); font-size: .95rem; }
.contact-card a:not(.btn) { color: var(--magenta); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.contact-form .field { margin-bottom: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-status {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius);
  font-size: .92rem; opacity: 0; display: none;
}
.form-status.is-visible { opacity: 1; display: block; }
.form-status--ok { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35); color: var(--success); }
.form-status--error { background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.3); color: var(--error); }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.notfound {
  min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: 4rem;
}
.notfound__code {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(5rem, 18vw, 10rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(234,71,155,.3);
}
.notfound h1 { margin: 1rem 0; }
.notfound p { color: var(--text-muted); max-width: 46ch; margin: 0 auto 2rem; }
.notfound__links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }