/**
 * TICKET-333: Contact Page — Layout and Token Integration
 *
 * Loaded only on the Contact page template (cws-page--contact body class).
 * Provides:
 *   1. Two-column layout (form + support sidebar)
 *   2. Dark-mode overrides for the plugin's contact-form.css (which uses
 *      hard-coded light colors — this layer re-maps them to design tokens)
 *   3. Support card, related links, and back-link chrome
 */

/* ─── Page header — TICKET-336: section-style divider ───────────────────────── */
/*
 * With the outer .container card stripped, the page header needs its own
 * visual weight to anchor the page. A bottom border mirrors the homepage
 * section divider pattern and grounds the h1/intro before the layout grid.
 */

.contact-page__header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode .contact-page__header {
  border-bottom-color: var(--line-soft);
}

.contact-page__title {
  font-family: var(--font-gnosis);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.contact-page__intro {
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 60ch;
  line-height: 1.65;
}

/* ─── Two-column layout ──────────────────────────────────────────────────────── */

.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .contact-page__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ─── Plugin form — dark-mode token overrides ────────────────────────────────── */
/*
 * The plugin's contact-form.css uses hardcoded light-mode hex values.
 * These rules re-map those elements to design tokens so the form looks
 * correct in both dark (default) and light mode.
 */

.cws-page--contact .cwc-form__input {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.cws-page--contact .cwc-form__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
}

.cws-page--contact .cwc-form__input--invalid {
  border-color: var(--danger);
}

.cws-page--contact .cwc-form__input--invalid:focus {
  box-shadow: 0 0 0 2px var(--danger-glow);
}

.cws-page--contact .cwc-form__label {
  color: var(--text-primary);
}

.cws-page--contact .cwc-form__required {
  color: var(--danger);
}

.cws-page--contact .cwc-form__field-error {
  color: var(--danger);
}

.cws-page--contact .cwc-form__required-note {
  color: var(--text-muted);
}

.cws-page--contact .cwc-form__submit {
  background-color: var(--accent);
  color: var(--bg-page);
  border: none;
  font-family: var(--font-logic);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition:
    background-color var(--dur-fast),
    box-shadow      var(--dur-fast);
}

.cws-page--contact .cwc-form__submit:hover {
  background-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.cws-page--contact .cwc-form__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cws-page--contact .cwc-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Success / error message banners — token-mapped */

.cws-page--contact .cwc-form-message--success {
  background-color: var(--reward-glow);
  border: 1px solid var(--accent);
  color: var(--text-primary);
}

.cws-page--contact .cwc-form-message--error {
  background-color: var(--danger-glow);
  border: 1px solid var(--danger);
  color: var(--text-primary);
}

/* Light mode — restore natural input bg */
html.light-mode .cws-page--contact .cwc-form__input {
  background-color: #fff;
  color: #1d2327;
  border-color: #c3c4c7;
}

html.light-mode .cws-page--contact .cwc-form__submit {
  background-color: var(--accent);
  color: var(--bg-page);
}

/* ─── Support sidebar cards ──────────────────────────────────────────────────── */

.contact-page__support-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-page__support-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.contact-page__support-card h2 {
  font-family: var(--font-gnosis);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.contact-page__support-card ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.contact-page__support-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

.contact-page__support-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

/* ─── Fallback message (plugin inactive) ─────────────────────────────────────── */

.contact-page__fallback {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.contact-page__fallback a {
  color: var(--accent);
  text-decoration: underline;
}

/* ─── Related links section ──────────────────────────────────────────────────── */

.contact-page__related {
  border-top: 1px solid var(--border-subtle);
  padding-top: 2rem;
  margin-top: 1rem;
}

.contact-page__related h2 {
  font-family: var(--font-gnosis);
  font-size: 1.125rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.contact-page__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.625rem;
}

.contact-page__related-list li {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contact-page__related-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.contact-page__related-list a:hover {
  text-decoration: underline;
}

.contact-page__related-desc {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ─── Back link ──────────────────────────────────────────────────────────────── */

.trust-back-link {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color var(--dur-fast);
}

.trust-back-link:hover {
  color: var(--accent);
}