/* ===========================
   Contact page — ad wrapper + form + disclaimer
   =========================== */

/* Outer flex wrapper — positions right-rail ad alongside the form section */
.contact-page-wrapper {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  justify-content: center;
  padding: 0 1rem 4rem;
  box-sizing: border-box;
}

/* Ad sidebar — base (hidden below 1200px, shown at wider viewports) */
.contact-page-wrapper .ad-sidebar {
  display: none;
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 300px;
  min-width: 300px;
}

.contact-page-wrapper .ad-container {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  padding: 8px;
  background-color: #fafafa;
}

.contact-page-wrapper .ad-label {
  font-size: 0.7rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-weight: 500;
}

.contact-page-wrapper .ad-unit {
  display: flex;
  justify-content: center;
}

.contact-page-wrapper .ad-160 { display: none; }

/* ≥1400px: show 160×600 ads */
@media (min-width: 1400px) {
  .contact-page-wrapper .ad-sidebar {
    display: flex;
    flex: 0 0 160px;
    min-width: 160px;
  }
  .contact-page-wrapper .ad-300 { display: none; }
  .contact-page-wrapper .ad-160 { display: flex; }
}

/* ≥1600px: switch to 300×600 ads */
@media (min-width: 1600px) {
  .contact-page-wrapper .ad-sidebar {
    flex: 0 0 300px;
    min-width: 300px;
  }
  .contact-page-wrapper .ad-300 { display: flex; }
  .contact-page-wrapper .ad-160 { display: none; }
}

@media (prefers-color-scheme: dark) {
  .contact-page-wrapper .ad-container {
    border-color: #2a2a2a;
    background-color: #1a1a1a;
  }
}

/* Two-column page area: form left, disclaimer right */
.contact-wrap {
  max-width: 1400px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  padding: 0 20px;
}

/* Let the form expand inside the grid */
.contact-wrap form { max-width: none; margin: 0; }

/* Make your H2 bigger (scoped to the form area) */
.contact-wrap h2 {
  text-align: left;
  font-size: clamp(1.75rem, 2.2vw, 2.4rem);
  margin: 0 0 10px;
}

/* Disclaimer card (sidebar) */
.disclaimer {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px 16px 12px;
  font-size: clamp(0.95rem, 0.88rem + 0.30vw, 1.10rem);
  line-height: 1.45;
  align-self: center;        /* center within the row’s height */
  justify-self: center;      /* center within the column */
  width: 100%;
  max-width: 320px;
}
.disclaimer h3 { margin: 0 0 8px; font-size: clamp(1.05rem, 0.98rem + 0.50vw, 1.35rem); }
.disclaimer ul { margin: 8px 0 0 18px; padding: 0; }
.disclaimer a { color: inherit; text-decoration: underline; }

/* Stack to single column on small screens */
@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

/* ===========================
   Form layout
   =========================== */

.form-grid { 
   display: grid;
   gap: 0;
   min-height: 0;
}

/* Labels left, inputs right */
.form-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0;
}

.form-row label { font-weight: 600; }
.form-row textarea { min-height: 120px; }

/* Actions row: Turnstile + button + status */
.actions-right {
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px 12px;
  align-items: center;
}
#msg { grid-column: 1 / -1; margin-top: 4px; }

/* Base controls */
input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
button { padding: 10px 20px; }

/* Turnstile scaling on desktop */
@media (min-width: 640px) {
  .actions-right .cf-turnstile { transform: scale(.95); transform-origin: left center; }
}

/* Stack labels above inputs on small screens */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row label { margin-bottom: 6px; }
  .actions-right { grid-template-columns: 1fr; }
}

/* Status messages */
.notice { padding: 10px; border-radius: 8px; }
.notice.success { background:#e6f4ea; border:1px solid #c8e6c9; color:#0b6b35; }
.notice.warning { background:#fff8e1; border:1px solid #ffe082; color:#664d03; }
.notice.error   { background:#fdecea; border:1px solid #f5c6cb; color:#842029; }

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0a0a0a;
    color: #e0e0e0;
  }

  .contact-wrap h2 {
    color: #ffffff;
  }

  .disclaimer {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #e0e0e0;
  }

  .disclaimer h3 {
    color: #ffffff;
  }

  .disclaimer a {
    color: #4da6ff;
  }

  .disclaimer a:hover {
    color: #80bfff;
  }

  input, select, textarea {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
  }

  input:focus, select:focus, textarea:focus {
    border-color: #4da6ff;
    outline: none;
  }

  button {
    background: #1a5aa8;
    color: #ffffff;
    border: none;
  }

  button:hover {
    background: #2070c0;
  }

  .form-row label {
    color: #ffffff;
  }

  .notice.success {
    background: #0d3d1f;
    border-color: #1e6b3a;
    color: #90ee90;
  }

  .notice.warning {
    background: #3d3310;
    border-color: #6b5818;
    color: #ffd700;
  }

  .notice.error {
    background: #3d0d0d;
    border-color: #6b1a1a;
    color: #ff6b6b;
  }
}