/**********************************************---***********************
    File name: google-map.css
    Site: villasbysilvia

    Copyright 2025 Michael J. Miller, All rights reserved

    Purpose: map widget formatting

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------
    12/1/25     3.3        Created.

************************************************************************/

@layer page {


    /************************************************************
                #map-container
    *************************************************************/
    #map-container {
        border-radius: 6px;
        /*    display: flex;*/
        flex-flow: column nowrap;
        text-align: center;
    }

    .map, #google-map {
        max-width: 90vw;
        width: 320px;
        height: 236px;
        border-radius: 6px;
        border: thin solid lightgray;
        margin: .5rem auto;
    }

    .map-directions {
        margin: 0 auto;
    }

    /* default layout is for phones and switches to wide screen here */
    @media (min-width: 620px) {

        #map-container {
            display: flex;
        }



        /***************************************************************
            this is for positioning the detail elements on large
            screens - does nothing on small screeens
        ***************************************************************/

        #map {
            width: 96%;
        }
    }

}