/* =========================================
   COMPONENTS.CSS
   Specific styling for banners, boxes, grids, and layout components
   ========================================= */

/* =========================================
   HERO BANNER
   ========================================= */
.hero-banner {
    /*background-color: #FFD700;*/ /* Darker Yellow background */
    background-color: #FFE54D; /* Yellow background */
    border: 5px solid #DC143C; /* Thick red border */
    max-width: 600px; /* Adjust size as needed */
        margin: 0 auto;  /* remove external top/bottom gap around hero */
    padding: 5px 25px; /* Space inside the box. The first number controls top and bottom space.*/
                            /*The second number controls left and right space.*/
    text-align: center;
    border-radius: 8px; /* Optional: slight rounding of corners */
}

.hero-text p {
    margin: 0.5rem 0;
    font-size: 2rem;
    color: #1b1a1a;
    font-weight: 600;
}

.hero-text p:last-child {
    font-size: 1.6rem;
    font-style: italic;
    margin-top: -0.5rem;  /* Removes space above */
}

.home-main {
        margin-top: 0; /* no gap between banner and main content */
}

/* Mobile-only hero tuning (desktop remains unchanged) */
@media (max-width: 600px) {
    .hero-banner {
        width: calc(100% - 70px); /* Banner Width */
        max-width: 240px;
        margin: 0 auto;
        padding: 3px 10px;
        border-width: 4px;
    }

    .hero-text p {
        font-size: 1.50rem;
        margin: 0.35rem 0;
    }

    .hero-text p:last-child {
        font-size: 1.2rem;
        margin-top: -0.25rem;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        width: calc(100% - 70px);
        max-width: 210px;
        margin: 0 auto;
        padding: 2px 8px;
        border-width: 3px;
    }

    .hero-text p {
        font-size: 1.25rem;
        margin: 0.3rem 0;
    }

    .hero-text p:last-child {
        font-size: 1rem;
        margin-top: -0.15rem;
    }
}

.blue-background {
    background-color: rgb(174, 208, 217) !important;  /* Light blue background for main content and articles */
}
/* =========================================
   END OF COMPONENTS.CSS
   ========================================= */