/* 
 * Layout Elements
 * Site-wide structural elements like headers, footers, and top messages.
 */

/* Hero/catch image - centered responsive image with LCP optimization */
.catch-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#topimage {
    /* CLS prevention - maintain 1200x360 aspect ratio */
    overflow: hidden;
}

/* Decorative header bar - replaces headerbar.jpg image with gradient */
#headerbar {
    width: 100%;
    height: 11px;
    background: linear-gradient(90deg, #F50005 0%, #F95E5A 50%, #CB0003 100%);
    display: block;
    margin: 0;
}

/* Keep img-responsive for backward compatibility */
.img-responsive {
    max-width: 100%;
    height: auto;
}

#logo img {
    width: 173px; /* Default (Tablet) */
    height: auto;
    display: block;
}

@media (min-width: 1200px) {
    #logo img {
        width: 200px; /* PC */
    }
}

@media (max-width: 480px) {
    #logo img {
        width: 140px; /* Mobile */
        margin: 0 auto;
    }
    #topmessage h1 {
        font-size: 11px;
    }
}

/* Remove default Bootstrap container padding for mobile */
.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#topmessage {
    background: #428bca;
    color: #fff;
    padding: 5px;
}

#topmessage h1 {
    font-size: 14px;
    margin: 0;
}