/*
 * Journal Contact page — self-hosted fonts + the Journal's editorial
 * palette, applied on top of the page's own template
 * (jp-extra/page-journal-contact.php — see astrocore-journal-contact-
 * style.php for how/when this loads). Same font roles and the same
 * :lang(ja) switch as the Journal itself (figma/src/index.css) —
 * headings/body/UI pick EN or JA families automatically from <html lang>,
 * which WordPress already sets correctly per Polylang page.
 *
 * Font faces themselves are not declared here — `journal-fonts.css` (same
 * directory) is the single shared place that lists which self-hosted
 * weights exist, also used by the WP+SWELL Journal templates themselves
 * (jp-extra/{page,single}-journal-preview.php). That file defines
 * `--jp-font-*`; this page's own CSS below uses the shorter `--font-*`
 * names (pre-existing on this file, kept as-is), aliased from the shared
 * ones right after the import. CSS requires @import rules to come before
 * any other rule in the file.
 */
@import url(journal-fonts.css);

/*
 * astrocore-journal-contact-style.php's PHP-side check is what already
 * scopes this whole stylesheet to just the two Contact pages.
 */
:root {
  --font-display: var(--jp-font-display);
  --font-article: var(--jp-font-article);
  --font-sans: var(--jp-font-sans);
}

/*
 * 2026-10-17: Contact pages now render through their own page template
 * (jp-extra/page-journal-contact.php) instead of SWELL's default page.php,
 * so the old `.entry-title`/`.entry-content` overrides (and the SWELL
 * profile-widget hide rule below them) no longer apply to anything on the
 * page — that markup isn't output anymore. These two classes are this
 * template's own, not SWELL's.
 */
.jp-contact-title {
  font-family: var(--font-display);
  color: #262320;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 2rem;
}
@media (min-width: 768px) {
  .jp-contact-title {
    font-size: 2.25rem;
    margin: 5rem 0 2.5rem;
  }
}
/* padding-bottom is NOT set here (moved to jp-extra/page-journal-contact.php's
 * own inline <style> block, 2026-10-17): this file loads before that
 * template's inline styles, so a rule here for the same element loses any
 * tie on a property the template's own .jp-container class also touches
 * (confirmed empirically — a `padding-bottom` set on .jp-contact-main here
 * was being overridden down to ~0 by .jp-container's `padding: 0 1.5rem`
 * shorthand, which the template declares later in the document). See that
 * file's own comment for the actual value.
 */
.jp-contact-body,
.jp-contact-body p,
.jp-contact-body li {
  font-family: var(--font-article);
  color: #262320;
  line-height: 1.85;
}

/* Contact Form 7's own stable core classes — unaffected by SWELL/theme
   changes, so these selectors keep working even if the page template or
   parent theme version changes. */
.wpcf7-form {
  font-family: var(--font-sans);
  max-width: 560px;
}
.wpcf7-form label {
  display: block;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  font-family: var(--font-sans) !important;
  color: #6b6459 !important;
}
.wpcf7-form label > span,
.wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.4rem;
}
.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans) !important;
  font-size: 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid #ddd3bf !important;
  border-radius: 4px;
  background: #fff;
  color: #262320 !important;
}
.wpcf7-form input[type='text']:focus,
.wpcf7-form input[type='email']:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #262320 !important;
}
.wpcf7-form textarea {
  min-height: 9rem;
  resize: vertical;
}
.wpcf7-form input[type='submit'] {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 999px !important;
  background: #262320 !important;
  color: #f8f4ea !important;
  cursor: pointer;
  transition: opacity 150ms ease-out;
}
.wpcf7-form input[type='submit']:hover {
  opacity: 0.85;
}
.wpcf7-form input[type='submit']:disabled {
  opacity: 0.5;
  cursor: default;
}
.wpcf7-not-valid-tip {
  font-family: var(--font-sans) !important;
  color: #b32d2e !important;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.wpcf7-response-output {
  font-family: var(--font-sans) !important;
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.5rem;
}
.astrocore-turnstile {
  display: block;
  margin: 0.5rem 0 1.5rem;
}

/* Phone-width: form never forces horizontal scroll or overflow. */
@media (max-width: 480px) {
  .wpcf7-form {
    max-width: 100%;
  }
}