/* Styles for the "お問い合わせ" page template (page-templates/contact.php) only. */

.contact-page__intro {
    padding-block: clamp(70px, 10vw, 160px);
}

.contact-page__inner {
    max-width: 640px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    text-align: center;
}

.contact-page__heading {
    margin: 0 0 24px;
    font-size: clamp(24px, 4vw, 32px);
}

.contact-page__lead {
    margin: 0 0 20px;
}

.contact-page__lead:last-of-type {
    margin-bottom: 0;
}

/*
 * Generous bottom gap before the back-home link, matching the
 * "十分な余白" pattern already used at the end of every other page
 * (e.g. .creator-page__section--x's padding-bottom).
 */
.contact-page__form-area {
    padding-bottom: clamp(96px, 14vw, 200px);
}

/*
 * Form content reads better left-aligned than the centered copy
 * above; this only overrides text-align within the form area.
 */
.contact-page__form-area .contact-page__inner {
    text-align: left;
}

/*
 * Personal-data notice, template-managed (not part of the WordPress
 * page body). Deliberately quieter than the intro copy above: left
 * aligned, smaller, muted color, but not so faint it's hard to read.
 */
.contact-page__notice {
    margin: 0 0 24px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

/* ---- Contact Form 7 output, scoped to this page only ---- */

.contact-page__form-area .wpcf7-form p {
    margin: 0 0 20px;
}

.contact-page__form-area .wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.contact-page__form-area .wpcf7-form input[type="text"],
.contact-page__form-area .wpcf7-form input[type="email"],
.contact-page__form-area .wpcf7-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: #fff;
    color: var(--color-text-main);
    font: inherit;
}

.contact-page__form-area .wpcf7-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-page__form-area .wpcf7-form input[type="text"]:focus,
.contact-page__form-area .wpcf7-form input[type="email"]:focus,
.contact-page__form-area .wpcf7-form textarea:focus {
    outline: 2px solid var(--color-pink);
    outline-offset: 1px;
    border-color: var(--color-pink);
}

.contact-page__form-area .wpcf7-form input[type="submit"] {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 32px;
    border: none;
    border-radius: 999px;
    background-color: var(--color-pink);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-page__form-area .wpcf7-form input[type="submit"]:hover,
.contact-page__form-area .wpcf7-form input[type="submit"]:focus-visible {
    filter: brightness(0.94);
}

.contact-page__form-area .wpcf7-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--color-text-main);
    outline-offset: 2px;
}

.contact-page__form-area .wpcf7-form input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
}

.contact-page__form-area .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.contact-page__form-area .wpcf7-response-output {
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.contact-page__form-area .wpcf7-spinner {
    margin-inline: 8px;
}

/*
 * The Akismet privacy notice ("このフォームはスパムを低減するために...")
 * is plain text typed directly into the CF7 form definition, after
 * the [submit] tag, with a blank line before it — not a plugin
 * feature with its own class. That blank-line-separated placement
 * means CF7's own paragraph wrapping renders it as the form's last
 * direct <p> child, after the submit button's own <p>. Targeting it
 * by that confirmed structural position (rather than guessing an
 * unstable class name) keeps this scoped and safe: if a future CF7
 * version doesn't wrap it this way, this rule simply has no effect
 * instead of styling the wrong element.
 */
.contact-page__form-area .wpcf7-form > p:last-child {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

.contact-page__form-area .wpcf7-form > p:last-child a {
    text-decoration: underline;
}

.contact-page__form-area .wpcf7-form > p:last-child a:hover,
.contact-page__form-area .wpcf7-form > p:last-child a:focus-visible {
    color: var(--color-pink);
}