/* ####################################
   Page Functions

   - Critical Rendering Path: Recommended
   ################################## */

.pageFunctions {
}

    .pageFunctions ul {
        display: flex;
        gap: var(--site-gutters-thinnest);
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 1em; /* Set the icon size here if using an icon font, not on the icons below. */
    }
    
    .pageFunctions ul li {
        margin: 0;
    }

        .pageFunctions ul li:hover {
        }

        .pageFunctions ul li a,
        .st_sharethis, .st_email, .st_facebook, .st_twitter, .st_linkedin, .st_googleplus, .st_youtube, .st_instagram, .st_pinterest, .st_rss, .st_myspace {
            position: relative;
            display: block;
            height: 1.25em; /* Must use dynamic units to help the text sizer. */
            width: 1.25em; /* Must use dynamic units to help the text sizer. */
            overflow: hidden;
            padding: 8px;
            border-radius: var(--site-border-radius-round);
            background-color: rgba(255,255,255,0.25);
        }

            .pageFunctions ul li a::before,
            .st_sharethis::before {
                content: "\f054";
                display: inline-block;
                font-family: var(--site-icon-font-family);
                font-weight: var(--site-icon-font-weight);
                text-align: center;
                width: 1.25em;
                height: 1.25em;
                line-height: 1.25em;
                margin-bottom: 5px; /* Make sure the text is pushed outside the visible box. */
            }

            .pageFunctions ul li a:hover,
            .st_sharethis:hover {
                /*background-color: rgba(0,53,92,1);*/
                background-color: var(--site-spot-color-1);
            }

            .pageFunctions .pagePrint {
            }

                .pageFunctions .pagePrint a::before {
                    content: "\f02f";
                }

            .pageFunctions .pageEmail {
            }

                .pageFunctions .pageEmail a::before {
                    content: "\f0e0";
                }

            .pageFunctions .pageFeedback {
            }

                .pageFunctions .pageFeedback a::before {
                    content: "\f075";
                }

            .pageFunctions .pageShare {
                order: -1; /* Always at the start. */
                cursor: pointer;
            }

                .pageFunctions .pageShare .st_sharethis {
                    /* It's a span but it should behave link a link. */
                    color: var(--site-color-white);
                }

                    .pageFunctions .pageShare .st_sharethis:hover {
                        color: var(--site-color-white);
                        background: var(--site-link-color);
                    }

                    .pageFunctions .pageShare .st_sharethis::before {
                        content: "\f14d";
                    }

            .pageFunctions .pageTextSizeToggle {
            }

                .pageFunctions .pageTextSizeToggle a::before {
                    /*content: "\f894";*/ /* A better icon from Font Awesome 6 Pro */
                    content: "\f034";
                }

/* 
    Page Functions containers
    - Top and bottom page functions are used separately in some sites. 
    - Don't handle positioning and page template layout here; do that on the page templates.
*/

#PageFunctionsTop {
    position: absolute;
    top: 10px;
    right: 30px;
}

    #PageFunctionsTop a,
    #PageFunctionsTop .st_sharethis {
    }

        #PageFunctionsTop a:hover,
        #PageFunctionsTop .st_sharethis:hover {
            cursor: pointer;
        }
        
#PageFunctionsBottom {
    clear: both;
}
    
    #PageFunctionsBottom .pageTopLink {
        order: -2; /* Always at the start, even before .pageShare */
    }

        #PageFunctionsBottom .pageTopLink a {
            width: auto;
            margin-left: 0;
            text-indent: 0;
        }

        #PageFunctionsBottom .pageTopLink a::before {
            content: "\f151";
        }
        
    #PageFunctionsBottom ul li:first-child {
        background: none;
        padding-left: 0;
    }

        /* Disable icons in the top or bottom page functions. */
        #PageFunctionsTop .pageShare.pageShareModule_sharethis .st_email {
            /* display: none */
        }

/* ############################################################################
   ## 
   ##  Layout for Different Screen Sizes
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

@media screen and (max-width: 900px) {

    .pageFunctions {
    }

        .pageFunctions .pagePrint,
        .pageFunctions .pageTextSizeDecrease,
        .pageFunctions .pageTextSizeDefault,
        .pageFunctions .pageTextSizeIncrease,
        .pageFunctions .pageTextSizeToggle {
            display: none;
        }

}