/* ---------------------------------------------------------------------------
   gordonedwards.com.au - post-migration fixes
   Added 2026-10-01 during the WordPress -> static rebuild.
   Loaded last so it wins without editing Thrive's generated CSS.
   --------------------------------------------------------------------------- */

/* 1. HERO BAND -------------------------------------------------------------
   Thrive emitted  background-size: auto, contain  with
                   background-attachment: scroll, fixed.
   "fixed" sizes and positions the image against the VIEWPORT rather than the
   element, so on a phone the 1200x430 photo is scaled to the screen width and
   centred in the middle of the screen - well below a ~360px band pinned at the
   top. The result is the 55% black gradient over empty space: a black stripe.
   Mobile Safari/Chrome have handled "fixed" badly for years regardless.
   cover + scroll makes the photo fill the band at every width.            */
[data-css="tve-u-1703f427357"] {
    background-attachment: scroll !important;
    background-size: cover !important;
    /* Bias upward: Gordon's face sits in the top half of the crop. */
    background-position: center 35% !important;
    min-height: 340px;
}

@media (max-width: 767px) {
    [data-css="tve-u-1703f427357"] {
        min-height: 260px;
        /* Lighten the overlay a little on small screens - at phone size the
           photo is already heavily cropped and 55% black buries it. */
        background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
                          url("/wp-content/uploads/2022/03/gordon-edwards-2-1200x430-1.jpg") !important;
    }
}

/* 2. IMAGES ----------------------------------------------------------------
   Keep every image inside its column on small screens. The flyer JPEGs are
   1080px+ wide and were overflowing their container at phone widths.        */
img {
    max-width: 100%;
    height: auto;
}

/* 3. FOCUS VISIBILITY ------------------------------------------------------
   The form inputs and the anchor-styled submit had no visible focus ring,
   which makes the contact form hard to use by keyboard.                     */
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid #c8a24a;
    outline-offset: 2px;
}

/* 4. CONTACT FORM NOTICE ---------------------------------------------------
   Spacing for the sent/error message injected by the inline script.         */
[role="status"] {
    max-width: 640px;
}

/* 5. IMAGE FRAME SLACK -----------------------------------------------------
   Thrive wrote an explicit height (1332px) onto the flyer's image wrapper,
   sized for a wide desktop. The image itself scales down with the column, but
   the wrapper keeps its fixed height - leaving ~475px of blank page under the
   flyer at narrower widths. Letting the wrapper wrap its content fixes it at
   every width; at full desktop width the image fills it anyway, so nothing
   changes there.                                                            */
.tve_image_frame,
.thrv_wrapper.tve_image_caption {
    height: auto !important;
}

/* 6. STICKY HEADER vs ANCHOR LINKS ----------------------------------------
   The header is sticky and ~133px tall. The ABOUT and SERVICES nav items are
   anchor links (#about-gordon, #services), so without this the target lands
   underneath the header and the reader sees the wrong thing.                */
[id] {
    scroll-margin-top: 150px;
}

@media (max-width: 767px) {
    [id] { scroll-margin-top: 110px; }
}

/* 7. SMOOTH ANCHOR SCROLL - small polish for the one-page nav.              */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}