/* ============================================================================
   Campaign Landing Page
   ----------------------------------------------------------------------------
   Loaded only on page-lp-webdesign.php, via ami_lpwd_enqueue_assets().

   Deliberately a standalone stylesheet rather than a partial in scss/: adding to
   app.scss would mean a Grunt rebuild of the whole theme bundle on every tweak,
   and a redeploy of app.min.css. This file can be edited and re-uploaded on its
   own. Everything is scoped to .ads_page-template so nothing leaks.

   Brand colours (scss/global/_colors.scss):
     #11b6e4  AMI blue        #091f2c  brand dark blue
     #00b5e2  AMI blue alt    #f3f3f3  very light grey
   ========================================================================= */


/* --- Location highlight ----------------------------------------------------
   Output by the [location] shortcode. display:inline matters - the theme sets
   every span inside the hero copy to inline-block, which would stop a
   two-word location wrapping across a line break. */
.ads_page-template .banner__info-container__content span.content .lp-hl,
.ads_page-template .lp-hl {
    color: #11b6e4;
    display: inline;
    font-weight: 700;
}


/* --- Header ----------------------------------------------------------------
   The theme prints "Marketing for Manufacturing™" beside the logo via
   .header__logo:after. On a campaign page the hero strapline already says it,
   so suppress the duplicate. */
.ads_page-template .header .header__logo:after {
    content: none;
    display: none;
}


/* --- Hero form -------------------------------------------------------------
   Compact treatment: roughly 40% of the height the theme's default landing
   form occupies, so it reads as a quick ask rather than a long enquiry form.
   Selectors are prefixed with .banner__info-container.landing to outrank the
   theme's own rules, which are nested that deep. */
.ads_page-template .banner__info-container.landing .banner__info-container__form-inner {
    max-width: 420px;
    margin-left: auto;
    padding: 1.125rem 1.5rem;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form-inner h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin-bottom: .125rem;
    text-align: left;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-form.acf-form .af-field {
    margin-bottom: .4375rem;
    padding-top: .625rem;
}

@media (max-width:768px) {
    .ads_page-template .banner__info-container.landing .banner__info-container__form-inner {
        max-width:100%;
}
}

.ads_page-template .acf-field .acf-label label {
    font-weight:400
}

/* Floating-label rest position.
   The theme places input labels at calc(50% + .75rem), which drifts whenever the
   field height changes - with the compact padding here they end up sitting below
   their own underline. The textarea is worse: its label is pinned at a fixed
   top: 2.5rem sized for the theme's 150px textarea, so against the 44px one used
   here it overhangs the line entirely. Pin both so all five labels sit the same
   3px clear of their line.

   :not(.active) is load-bearing. These rules match the theme's .active rules on
   specificity and come later in the cascade, so without it they would pin the
   focused/filled label too and the float animation would never happen. The
   .active positions are left to the theme. */
.ads_page-template .banner__info-container.landing .banner__info-container__form form.af-form .af-field .af-label.acf-label:not(.active) {
    top: 30px;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form form.af-form .af-field.af-field-type-textarea .af-label.acf-label:not(.active) {
    top: 29px;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-form.acf-form .af-field input {
    height: 2.125rem;
    margin: 0.5rem 0 .25rem 0;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-form.acf-form .af-field.af-field-type-textarea textarea {
    height: 2rem;
    margin: 1rem 0 .25rem 0;
}
@media (max-width:350px) {
    .ads_page-template .banner__info-container.landing .banner__info-container__form .af-form.acf-form .af-field.af-field-type-textarea textarea {
        padding-bottom:3rem;
    }
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-form.acf-form .af-field .af-label.acf-label label {
    font-size: .8125rem;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-submit.acf-form-submit {
    margin-top: 1.375rem;
    margin-bottom: 0;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-submit.acf-form-submit button {
    min-height: 2.5rem;
    min-width: 0;
    width: 100%;
    font-size: .75rem;
    border-width: 3px;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form .af-submit.acf-form-submit button:after {
    height: 3px;
    top: -3px;
}

.ads_page-template .banner__info-container.landing .banner__info-container__form-inner .lp-form-note {
    font-size: .75rem;
    margin-top: .25rem;
    margin-bottom: 0;
    opacity: .7;
}

/* The theme pins a fixed phone/email quick-contact strip (55px wide, z-index 10)
   to the right edge of every page. Above ~1420px the hero container is narrow
   enough to clear it; below that it clips the form, so shift the panel left.
   1366px is a very common laptop width, so this is not an edge case. */
@media (min-width: 992px) and (max-width: 1420px) {
    .ads_page-template .banner__info-container.landing .banner__info-container__form-inner {
        margin-right: 70px;
    }
}


/* --- Footer ----------------------------------------------------------------
   The landing footer carries no nav columns, so the company block is the only
   child and centres rather than sitting hard left. */
.ads_page-template .footer--landing .company-info {
    width: 100%;
    text-align: center;
}

.ads_page-template .footer--landing .company-info img {
    max-width: 180px;
    margin: 0 auto 1.25rem;
}

.ads_page-template .footer--landing .social-icons {
    justify-content: center;
}

/* --- Intro heading ----------------------------------------------------------
   The theme's 38px wraps "Promoting UK engineering, manufacturing & industrial
   companies" to three lines, leaving the section top-heavy. Held to two.

   Two steps, because the column narrows with the viewport: at 1280px (738px
   column) 30px is the widest that fits; at 1024px (589px column) it is 24px.
   Both set one step below the threshold so a slightly longer heading does not
   tip into three lines.

   Desktop only. Below 992px the layout stacks and the theme's own responsive
   sizes are already right — overriding there would blow the heading up on
   mobile. The theme sets this as body:not(.wp-admin) .text-image__info h2, so
   the selector carries the same :not() to outrank it. */
@media (min-width: 1200px) {
    body:not(.wp-admin) .ads_page-template .text-image__info.hp h2 {
        font-size: 28px;
        line-height: 34px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.wp-admin) .ads_page-template .text-image__info.hp h2 {
        font-size: 22px;
        line-height: 28px;
    }
}


/* --- Hero buttons -----------------------------------------------------------
   Optional links under the hero copy. The theme has no rule for buttons in this
   position, so they need their own layout: wrap onto a second row on narrow
   screens rather than overflowing, and clear the paragraph above. The margin
   sits on the container, not the buttons, so the gap stays right when they
   wrap. */
.ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__links .btn {
    margin: 0;
}

@media (max-width:768px) {
    .ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__links {
        justify-content: center;
    }
}

/* --- Hero trust points ------------------------------------------------------
   The tick is drawn in CSS, not an icon-font glyph: the theme's font carries
   only chevron, arrow, search, phone, mail and the social marks, so a tick
   would render as a missing-glyph box. A rotated two-sided border stays crisp
   at any size and needs no asset.

   One point per line. A wrapping row was tried first, but the longest point
   pushes the third onto its own line at every desktop width, giving an
   unbalanced 2-then-1 break.

   The theme gives the hero paragraph a 2rem bottom margin, which stacked with
   this list's top margin to leave 56px above the points against 28px below.
   Zeroing it lets whatever follows own the gap, so the spacing stays even
   whether or not a page runs points. */
.ads_page-template .banner__info-container.landing .banner__info-container__content span.content {
    margin-bottom: 0;
}

.ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__points {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__points li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: .9375rem;
    line-height: 1.35;
}

.ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__points li:before {
    content: "";
    flex: 0 0 auto;
    width: .4375rem;
    height: .75rem;
    border: solid #11b6e4;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -.2rem;
}
@media (max-width:768px) {
    .ads_page-template .banner__info-container.landing .banner__info-container__content .banner__info-container__points {
        align-items: center;
        margin-left: -1rem;
    }
}
.af-form input:focus,
.af-form textarea:focus,
.af-form select:focus {
    outline: none;
    box-shadow: none;
}