@charset "utf-8";

/* Fix float clearing for all screen sizes */
.list-group-item {
    overflow: hidden;
}

.list-group-item::after {
    content: "";
    display: table;
    clear: both;
}

.media-player {
    float: left;
    margin-right: 10px;
}

/* Calendar thumbnail styling */
.cal-thumb-day {
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #02717d;
    width: 50px;
    text-align: center;
    float: left;
    margin-right: 10px;
}

.cal-thumb-day .month {
    background-color: #02717d !important;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 0;
    display: block !important;
    letter-spacing: 1px;
}

.cal-thumb-day .day {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 18px;
    font-weight: bold;
    padding: 4px 0;
    display: block !important;
}

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

    /* Make the three columns stack vertically */
    section.maincontent {
        display: block !important;
    }

    article.sermons,
    article.events,
    article.visit {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box;
    }

    /* Restore header images if they were hidden */
    .img-wrap img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Make list items stack cleanly */
    .list-group-item {
        display: block !important;
        padding: 10px 8px !important;
    }

    /* Slightly smaller media button on mobile */
    .media-player img {
        width: 36px !important;
        height: 36px !important;
    }

    /* Sermon title text */
    h4.panel-title {
        font-size: 14px !important;
        margin: 0 0 4px 0;
    }

    h4.panel-title a {
        font-size: 14px !important;
    }

    /* Date and speaker text */
    .list-group-item p {
        font-size: 12px !important;
        margin: 0;
    }

    /* Search bar full width */
    #search-container,
    #hp-search-input {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Audio player full width */
    #hp-player-wrapper {
        margin: 8px 0 !important;
    }

    #hp-audio-player {
        width: 100% !important;
    }
    
        /* Fix list not reaching full width */
    ul.list-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .list-group-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}