/*  
    Wordpress Color Settings in Site Editor
    --wp--preset--color--base: #ffffff;
    --wp--preset--color--contrast: #000000;
    --wp--preset--color--primary: #3961ad;
    --wp--preset--color--secondary: #bbdfe5;
    --wp--preset--color--tertiary: #e6e7e8; 
    */
.coast {
    * {
        transition: all 200ms;
    }
    /* Header */
    /* Nav */
    a.wp-block-navigation-item__content:hover {
        text-decoration: none;
        color: var(--wp--preset--color--secondary);
    }

    .hero-text {
        position: absolute;
        inset: 0;
    }

    .hero-desktop img {
        position: absolute;
        max-width: 1024px;
        height: 100%;
        width: 100%;
        right: 0;
        top: 0;
        bottom: 0;

        object-fit: cover;
    }
    .hero-mobile img {
        position: absolute;
        height: 100%;
        width: 100%;
        inset: 0;
        object-fit: cover;
    }
    /* Home Tile */
    .home-tile:hover {
        opacity: 0.8;
        transition: all 150ms;
        transform: scale(0.98);
    }

    .tile-title {
        mark {
            background-color: #3961ad !important;
        }
        padding: 3px;
        display: inline; /* Ensures it only applies to the text, not the entire block */
        margin-left: 10px;
        line-height: 1.8em;
    }
    /*Custom heading highlights with background colour*/
    span.highlighted-text {
        background-color: #3961ad;
        padding: 3px;
        display: inline; /* Ensures it only applies to the text, not the entire block */
        margin-left: 10px;
        line-height: 1.8em;
    }
    /*---END---*/

    /*Homepage header Globe overlay*/
    .overlay-rows {
        position: relative;
        z-index: 1;
    }

    .overlay-image {
        position: absolute; /* Position relative to the nearest positioned ancestor */
        top: 200px; /* Distance from the top of the browser window */
        right: 0; /* Align to the right edge of the window */
        z-index: 1; /* Ensure it appears above other content */
        pointer-events: none; /* Makes the image unclickable */
    }

    .overlay-image img {
        max-width: 800px; /* Adjust the width of the image */
        height: auto; /* Maintain aspect ratio */
        opacity: 0.8; /* Adjust transparency if needed */
    }

    @media (max-width: 1100px) {
        .overlay-image {
            top: 250px; /* Adjust for smaller devices */
            right: 0x; /* Add some padding from the edge */
        }

        .overlay-image img {
            max-width: 500px; /* Reduce image size for smaller screens */
        }
    }

    @media (max-width: 800px) {
        .overlay-image {
            top: 150px; /* Adjust for smaller devices */
            right: 0x; /* Add some padding from the edge */
        }

        .overlay-image img {
            max-width: 300px; /* Reduce image size for smaller screens */
        }
    }

    @media (max-width: 768px) {
        .overlay-image {
            top: 50px; /* Adjust for smaller devices */
            right: 0; /* Add some padding from the edge */
        }

        .overlay-image img {
            max-width: 150px; /* Reduce image size for smaller screens */
        }
    }
    /*---END---*/

    /*Make business logos fit a square layout */
    .acf-image-square {
        width: 450px; /* Define the width of the square */
        height: 450px; /* Define the height of the square */
        display: flex; /* Center content */
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Ensure no parts of the image exceed the square boundaries */
        /*background-color: #f0f0f0;  Optional: Add a background color */
        /*border-radius: 10px; /* Optional: Add rounded corners */
        border: solid 1px #3961ad;
    }

    .acf-image-square img {
        max-width: 100%; /* Scale down the image proportionally */
        max-height: 100%; /* Ensure the image fits within the square */
        object-fit: contain; /* Keep aspect ratio without cropping */
    }
    /*--END---*/

    /*Listing images layout */
    .listing-images {
        margin: 0 auto;
    }
    .listing-img-gal {
        max-width: 450px;
    }
    .business-logo img {
        object-fit: contain;
    }

    /*--END---*/

    .directory-posts img {
        object-fit: contain;
    }
    .directory-posts .kadence-post-image {
        border: 1px solid blue;
        margin: 10px;
    }
    .directory-posts
        .kadence-post-image-intrisic
        .kadence-post-image-inner-intrisic
        img {
        -o-object-fit: contain;
        object-fit: contain;
    }

    input.gform_button {
        border-radius: 0;
    }
}