/*
   Placid Waters Interactive Community Map

   This stylesheet controls:
   - Overall page appearance
   - Map size
   - Header and map instructions
   - Placid Waters logo
   - Mobile layout
   - Placement of Image Map Pro +/- zoom controls
*/


/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f8f3ed;
    font-family: Arial, sans-serif;
}


/* =========================================================
   IMAGE MAP
   ========================================================= */

#image-map-pro {
    width: 100%;
    min-height: 900px;
}


/* =========================================================
   MAP HEADER / INSTRUCTIONS
   ========================================================= */

.map-instructions {
    position: relative;

    width: 100%;
    margin: 0;

    /* Extra right padding leaves room for the desktop logo */
    padding: 18px 190px 14px 28px;

    box-sizing: border-box;

    background-color: #f8f3ed;
    border: none;
    border-bottom: 2px solid #12366b;

    color: #12366b;
    text-align: left;
}


/*
   Prevent instruction text from becoming excessively wide.
   The logo is excluded because it has its own size settings.
*/

.map-instructions > *:not(.community-logo) {
    max-width: 1000px;
}


/* =========================================================
   PLACID WATERS LOGO
   ========================================================= */

.community-logo {
    position: absolute;

    top: 10px;
    right: 24px;

    width: 150px;
    max-width: 150px;
    height: auto;

    display: block;
    object-fit: contain;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

.map-instructions h1 {
    margin: 0 0 2px 0;
    padding: 0;

    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;

    color: #12366b;
}


/* =========================================================
   LOCATION LINE
   ========================================================= */

.map-location {
    margin: 0 0 12px 0;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: #12366b;
}


/* =========================================================
   "HOW TO USE THE INTERACTIVE MAP"
   ========================================================= */

.map-instructions h2 {
    margin: 0 0 6px 0;
    padding: 0;

    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;

    color: #12366b;
}


/* =========================================================
   INSTRUCTION TEXT
   ========================================================= */

.map-instructions p {
    margin: 4px 0;

    font-size: 15px;
    line-height: 1.4;

    color: #12366b;
}


/* =========================================================
   FACEBOOK NOTE
   ========================================================= */

.map-instructions .facebook-note {
    margin-top: 7px;

    font-size: 13px;
    line-height: 1.35;

    color: #12366b;
}


/* =========================================================
   IMAGE MAP PRO ZOOM CONTROLS

   Moves Image Map Pro's +/- controls from the default
   lower-right position to the upper-right of the map.

   Keeping these controls provides an accessible zoom option
   for desktop users without a mouse wheel and for users who
   prefer not to pinch-to-zoom.
   ========================================================= */

#image-map-pro .imp-ui-top-right {
    top: 15px !important;
    right: 15px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    z-index: 9999 !important;
}


/* =========================================================
   MAP FOOTER
   ========================================================= */

.map-footer {
    width: 80%;
	margin: auto;
	text-align: center;
    box-sizing: border-box;

    padding: 14px 28px 18px;

    background-color: #f8f3ed;
    color: #12366b;

    border-top: 2px solid #12366b;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.map-footer p {
    margin: 0;
}

.map-footer-links {
    margin-bottom: 10px !important;
}

.map-footer a {
    color: #12366b;
    font-weight: 600;
    text-decoration: underline;
}

.map-footer a:hover {
    text-decoration: none;
}

.map-footer-separator {
    margin: 0 8px;
}

.map-footer-note {
    font-size: 12px;
}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */

@media (max-width: 600px) {

    .map-footer {
        padding: 12px 14px 40px;
        font-size: 12px;
    }

    .map-footer-links {
        line-height: 1.8;
    }

    .map-footer-separator {
        margin: 0 4px;
    }

    .map-footer-note {
        font-size: 11px;
        line-height: 1.4;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /*
       Allow the Image Map Pro container to shrink to the
       actual responsive height of the map instead of forcing
       a 650px-tall container and creating blank space below it.
    */

    #image-map-pro {
        width: 100%;
        min-height: 0;
        height: auto;
    }


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

    .map-instructions {
        /*
           Right padding reserves space for the small logo.
        */
        padding: 11px 80px 10px 14px;

        border-bottom-width: 1px;
    }


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

    .community-logo {
        width: 60px !important;
        max-width: 60px !important;
        height: auto !important;

        top: 8px;
        right: 10px;

        object-fit: contain;
    }


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

    .map-instructions h1 {
        margin-bottom: 2px;

        font-size: 20px;
        line-height: 1.15;
    }


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

    .map-location {
        margin-bottom: 8px;

        font-size: 9px;
        line-height: 1.2;
        letter-spacing: 1px;
    }


    /* -----------------------------------------------------
       Mobile instruction heading
       ----------------------------------------------------- */

    .map-instructions h2 {
        margin-bottom: 4px;

        font-size: 15px;
        line-height: 1.2;
    }


    /* -----------------------------------------------------
       Mobile instruction text
       ----------------------------------------------------- */

    .map-instructions p {
        margin: 3px 0;

        font-size: 13px;
        line-height: 1.3;
    }


    /* -----------------------------------------------------
       Mobile Facebook note
       ----------------------------------------------------- */

    .map-instructions .facebook-note {
        margin-top: 5px;

        font-size: 11px;
        line-height: 1.3;
    }
}