/* PanQuiz — Contact (EN) — page styles.
   Requires: fonts.css, colors.css, typography.css, layout.css, style.css (shared tokens + components). */

/* ---------- Hero (compact) ---------- */
.contact-hero { background: linear-gradient(180deg, #ffffff 0%, #edf1ff 100%); border-bottom: 1px solid rgba(14,21,82,.06); }
.contact-hero .container { padding-top: 64px; padding-bottom: 60px; text-align: center; }
.contact-hero h1 { color: #0e1552; }
.contact-hero .hero-sub { margin: 20px auto 0; max-width: 640px; }

/* ---------- Two-column layout ---------- */
.contact-section { padding-top: 72px; padding-bottom: 92px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; max-width: 1020px; margin: 0 auto; }

/* ---------- Form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 22px; background: #fff; border: 1px solid rgba(14,21,82,.1); border-radius: 24px; padding: 38px 36px 36px; box-shadow: 0 2px 18px rgba(14,21,82,.08); }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field > label { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 15px; color: #0e1552; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body, 'Open Sans', Helvetica, Arial, sans-serif);
  font-size: 16px;
  color: #1a1d29;
  background: #fff;
  border: 1.5px solid rgba(14,21,82,.18);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e1552' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--site-primary, #005aef); box-shadow: 0 0 0 3px rgba(0,90,239,.14); }

/* Privacy checkbox */
.form-consent { display: flex; align-items: flex-start; gap: 12px; }
.form-consent input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--site-primary, #005aef); cursor: pointer; }
.form-consent label { font-size: 14.5px; line-height: 1.6; color: #3c4257; cursor: pointer; }
.form-consent a { font-weight: 700; }

/* Honeypot — off-screen, not display:none */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Submit */
.form-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
.contact-form button[type="submit"] { min-height: 48px; }

/* Status message (classes set by external JS) */
[data-form-status] { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 15px; line-height: 1.55; margin: 0; }
[data-form-status]:empty { display: none; }
.form-status--success { color: var(--answer-green, #26890c); }
.form-status--error { color: var(--md-danger, #e53935); }

/* ---------- Contact info column ---------- */
.contact-info { display: flex; flex-direction: column; gap: 24px; padding-top: 10px; }
.contact-info h2 { font-family: var(--font-display, 'Raleway', sans-serif); font-weight: 700; font-size: 24px; color: #0e1552; margin: 0; }
.contact-address { font-style: normal; font-size: 16px; line-height: 1.75; color: #2b2f3a; margin: 0; }
.contact-address strong { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; color: #0e1552; }
.reply-note { display: flex; align-items: flex-start; gap: 10px; background: linear-gradient(180deg, rgba(0,90,239,.055) 0%, rgba(0,90,239,.035) 100%); border: 1px solid rgba(0,90,239,.16); border-radius: 18px; padding: 18px 22px; font-size: 15px; line-height: 1.6; color: #2b2f3a; margin: 0; }
.reply-note .mdi { font-size: 20px; color: var(--site-primary, #005aef); flex: 0 0 auto; margin-top: 1px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-info { padding-top: 0; }
}
@media (max-width: 768px) {
  .contact-hero .container { padding-top: 44px; padding-bottom: 44px; }
  .contact-section { padding-top: 52px; padding-bottom: 64px; }
  .contact-form { padding: 28px 22px 26px; border-radius: 20px; }
}