/* FILE: joincountyline-dotcom\wwwroot\css\site.css */
/**
 * @description
 * This file contains custom CSS overrides and additions for the County Line Church website.
 * It works in conjunction with the Pofo template's default stylesheets to achieve the
 * desired look and feel.
 *
 * This step adds platform-specific background colors to the livestream thumbnail icons,
 * making them visually distinct and aligned with brand identity.
 *
 * Key features:
 * - Stream Card Styling: Base styles for the livestream cards, including hover effects.
 * - Thumbnail & Icon Styling: Defines the layout for video thumbnails and the overlay icons.
 * - Platform Color Overrides: The main change in this step. Specific rules are added to
 *   set the background color of the icon's containing circle to YouTube Red (#FF0000) or
 *   Facebook Blue (#1877F2), making them instantly recognizable. The icon symbol itself
 *   remains white for contrast.
 * - Scroll Fix: Includes a 'will-change' property to hint to browsers about animations,
 *   which can help smooth out scrolling performance on some devices.
 *
 * @notes
 * - The selectors for the platform colors are intentionally more specific than the base
 *   `.platform-icon` rule. This ensures they override the default dark background without
 *   needing to use `!important`, which is a best practice.
 */

/*
    SECTION: Livestream Cards
    -----------------------------------------------------------------
    This section styles the cards used to display the latest livestreams.
*/

/* Link styling for the entire stream card to ensure no default underline and the whole card is clickable. */
.stream-card-link {
    text-decoration: none;
}

    .stream-card-link:hover {
        text-decoration: none;
    }

/* Base styling for the stream card itself, including a subtle hover effect. */
.stream-card {
    transition: all 0.3s ease-in-out;
}

    .stream-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 25px rgba(0,0,0,0.1);
    }

/* Container for the thumbnail image. Uses background-image for better control and aspect ratio. */
.stream-card-thumbnail {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

    /*
    Platform Icon Styling
    -----------------------------------------------------------------
    This styles the small icon (YouTube/Facebook) overlayed on the thumbnail.
*/

    /* General style for the platform icon's circular container */
    .stream-card-thumbnail .platform-icon {
        position: absolute;
        bottom: 15px;
        right: 15px;
        font-size: 24px;
        color: #fff; /* The color of the icon symbol itself (e.g., the 'f' or play symbol) */
        background-color: rgba(0, 0, 0, 0.5); /* A dark, semi-transparent default background */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

        /*
    Platform-specific color overrides.
    These rules are more specific and will override the default background color.
*/

        /* Override background for YouTube icons to be YouTube's brand red. */
        .stream-card-thumbnail .platform-icon.fa-youtube {
            background-color: #FF0000;
        }

        /* Override background for Facebook icons to be Facebook's brand blue. */
        .stream-card-thumbnail .platform-icon.fa-facebook-f {
            background-color: #1877F2;
        }


/* Container for the card's text content (title, date). */
.stream-card-content {
    padding: 20px;
    flex-grow: 1; /* Ensures footer of card aligns if cards have different text heights */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*
    SECTION: General Smooth Scroll Fix
    -----------------------------------------------------------------
    Addresses choppiness during scroll on some devices by hinting optimizations to the browser.
*/
.full-screen, .parallax {
    will-change: transform;
}
