/*
 * Custom overrides for the Technologia i Styl site. These styles augment the
 * existing style.css without modifying it directly, allowing us to add a
 * custom hero background and display product images in the products section.
 */

/* Override the hero section to include a dark overlay and custom background image */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/hero_bg.jpg');
    background-size: cover;
    background-position: center;
}

/* Layout for product images */
.product-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Style individual product image thumbnails */
.product-images img {
    width: calc(50% - 10px);
    border-radius: 4px;
    border: 1px solid var(--gold);
}

/*
 * Override the header logo container so that the full logo (symbol, name and
 * tagline) is visible without being cropped. We center the image inside a
 * dark bar and constrain its height.
 */
/*
 * Header logo container. Use a fixed height that better matches the aspect
 * ratio of the logo graphic. The container centers the logo horizontally
 * and vertically and applies a dark background bar so the golden text is
 * clearly visible. A slightly smaller height (150 px) prevents the logo
 * from dominating the header while still showing the full tagline.
 */
/*
 * Header logo container adjustments:
 * - The height is reduced to 120px so the logo bar does not overpower
 *   the navigation menu.
 * - The width is constrained to 90% of the viewport to align with
 *   content margins.
 * - Overflow hidden prevents stray text (alt fallback) from showing
 *   if the image fails to load, and the dark background makes the
 *   golden lettering stand out.
 */
/*
 * Header logo container adjustments:
 *
 * - The logo should always be fully visible and not cropped. Instead of
 *   forcing a fixed height and hiding overflow, allow the container to
 *   grow based on the natural aspect ratio of the logo and limit its
 *   maximum width. On wider screens the logo will scale down to fit
 *   within 600 px, while on smaller screens it will occupy the full
 *   available width. The dark background bar remains to provide
 *   contrast against the golden lettering.
 */
.header-logo {
    /* Centre the logo horizontally within the header */
    margin: 10px auto;
    /* Allow the container to adjust its height based on the image */
    height: auto;
    /* Limit the maximum width of the logo so it doesn’t overwhelm the layout */
    max-width: 600px;
    width: 100%;
    background-color: var(--dark-blue);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * Scale the logo image proportionally within the header container. Using
 * width: 100% and height: auto preserves the aspect ratio without
 * cropping. Removing overflow ensures no part of the logo is hidden.
 */
.header-logo img {
    width: 100%;
    height: auto;
}