/* MTP homepage tweaks.
   Loaded on the front page only, by the mtp-mobile-home sandbox module.

   Despite the file name this now covers all widths. Rules that only apply to
   small screens are inside the media queries at the bottom. */

/* ---------- Hero: Call now ---------- */

/* The inverse of the quote CTA at every width: white ground, green text and a
   green hairline, against the quote button's solid green on white text. Same
   visual weight, opposite fill, so neither outranks the other and there is
   still only one solid button in the hero.

   White ground rather than a transparent ghost, because the hero sits over a
   photograph and a bordered transparent button loses contrast against it. */
.ocf-hero__call,
.ocf-hero__call:link,
.ocf-hero__call:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #FFFFFF;
    color: var(--ocf-primary, #15803D);
    border: 1px solid var(--ocf-primary, #15803D);
    box-shadow: var(--button-shadow);
}

.ocf-hero__call:hover,
.ocf-hero__call:focus-visible {
    background: color-mix(in srgb, var(--ocf-primary, #15803D) 8%, #FFFFFF);
    color: var(--ocf-primary-hover, #0F5132);
    border-color: var(--ocf-primary-hover, #0F5132);
}

.ocf-hero__call svg {
    flex: 0 0 auto;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    /* Stack the two actions full width so both are comfortable thumb targets. */
    .ocf-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .ocf-hero__actions > a {
        width: 100%;
    }

    /* The hero enquiry form is replaced by the two actions above on mobile.
       People who want to type still have the quote form one tap away. */
    .ocf-hero__form {
        display: none;
    }
}

/* ---------- Reviews: orphaned slider arrows ---------- */

/* The theme renders prev/next buttons for its own testimonial slider, but the
   Google Reviews plugin replaces the native cards with its own widget, which
   brings its own controls. That leaves the theme's arrows bound to a slider
   that is never rendered, so they are inert and give no feedback when pressed.

   Hidden only when no slider is present, rather than deleted outright: if the
   reviews plugin is ever removed and the native cards come back, the arrows
   start working again and this rule stops applying on its own.

   display:none also takes them out of the tab order, so keyboard users no
   longer land on two buttons that do nothing. */
.ocf-testimonials:not(:has([data-testimonial-slider])) .ocf-testimonial-nav {
    display: none;
}

/* ---------- About section ---------- */

/* 860px is the theme's own breakpoint for this section, where its two columns
   collapse to one. Stacked, it ran image then heading then body; leading with
   the heading gives the van photo its context before it is seen.

   display:contents lifts the copy block's two children into the section grid,
   so the image can sit between them. Ordering alone cannot do this, because
   the heading and body are siblings inside a single wrapper. */
@media (max-width: 860px) {

    .ocf-about__grid {
        gap: 1.5rem;
    }

    .ocf-about__copy {
        display: contents;
    }

    .ocf-about__copy > .reveal:not(.ocf-about__body) {
        order: 1;
    }

    .ocf-about__media {
        order: 2;
    }

    .ocf-about__body {
        order: 3;
    }
}