/* ── The /contact-us/ page ──
   Rendered from inc/page-contact.php. Plan: roadmaps/Implemented/contact-page.md.

   The plain page ground: the page's <h1>, one line of copy and the Inquiries
   form in the `480px` panel measure, centred, at every width; then, for
   guests, the homepage's closing call to action on the dark ground
   (css/closing-cta.css, loaded before this file). The page's own selectors
   are `pp-contact-page-*`; the closing band keeps the homepage's classes,
   since it is the homepage's. */

.pp-contact-page-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The documented outer clamp. The page carries Blocksy's
   `content_area_spacing: none`, so nothing else spaces the heading from the
   header. */
.pp-contact-page-section {
    padding: clamp(32px, 5vw, 64px) 0;
}

.pp-contact-page-column {
    max-width: 480px;
    margin: 0 auto;
}

/* The theme's `h1` and body text; only the spacing is the page's. */
.pp-contact-page__title {
    margin: 0 0 16px;
    text-wrap: balance;
}

.pp-contact-page__lead {
    margin: 0 0 32px;
}

/* ── The Send button ──
   Fluent Forms' submit, which Blocksy draws as its generic button
   (`.fluentform .ff-el-group button.ff-btn`, (0,3,1)): `18px`, `5px 20px`, a
   `33px` minimum height, no hover state. Here it takes the page CTA on a
   light ground (STYLING.md > A page CTA on a light ground): `12px 24px`,
   `8px`, accent fill, `#fff` label, `1rem` / `600`, the Resting shadow and
   the Hover lift, the standard focus ring. Sentence case, not uppercase:
   caps are for a sign-up, and this sends a message. The page scope makes
   (0,4,1), (0,5,1) on hover, over Blocksy's rule; the other forms on the
   site keep theirs. */
.pp-contact-page .fluentform .ff-el-group button.ff-btn-submit {
    min-height: 0;
    padding: 12px 24px;
    border-radius: 8px;
    background-color: var(--theme-palette-color-5);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: none;
    box-shadow: 0 3px 10px rgba(var(--pp-steel-7-rgb), 0.08);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pp-contact-page .fluentform .ff-el-group button.ff-btn-submit:hover,
.pp-contact-page .fluentform .ff-el-group button.ff-btn-submit:focus {
    background-color: var(--theme-palette-color-5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-contact-page .fluentform .ff-el-group button.ff-btn-submit:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
}

/* ── The confirmation ──
   Sent, the form is replaced by Fluent Forms' message, which it draws as a
   bordered, shadowed box. Here it is a plain line in the muted status tone
   (STYLING.md > Inline status and confirmation messages), at the body size,
   since it stands where the form was. */
.pp-contact-page .ff-message-success {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    color: var(--pp-steel-5);
}

.pp-contact-page .ff-message-success > :last-child {
    margin-bottom: 0;
}

/* ── Scroll reveal ──
   STYLING.md > A section revealed on scroll, over both bands when a guest
   gets the closing CTA. js/page-contact.js adds `.pp-contact-page--reveal`
   to the root once it runs, after marking what is already on screen, so
   nothing is painted hidden and a page without the script is static. */
@media (prefers-reduced-motion: no-preference) {
    .pp-contact-page--reveal > section {
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .pp-contact-page--reveal > section:not(.is-revealed) {
        opacity: 0;
        transform: translateY(16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-contact-page .fluentform .ff-el-group button.ff-btn-submit {
        transition: none;
    }
}

/* Full width up to the tablet breakpoint, as every marketing-page CTA. */
@media (max-width: 1024px) {
    .pp-contact-page .fluentform .ff-el-group button.ff-btn-submit {
        width: 100%;
    }
}