/* Change default submenu text color */
.container-header .mod-menu ul li a {
  color: #000000; /* Example: Red text color */
}

/* Change submenu text color on hover */
.container-header .mod-menu ul li a:hover {
  color: #000000; /* Example: Red text color on hover */
}

.container-header .navbar-toggler {
    color: #000000;
    cursor: pointer;
    border: 1px solid #000000;
}

/* Site Description / STORE Address Home Page Text */
.container-header .site-description {
    color: #0f3d3e !important; /* bright red for good contrast */
    font-size: 1.2rem;          /* adjust size as needed */
    white-space: normal;        /* allow wrapping */
}

/* Module for image-only layout */
/* Container for the image gallery section */
.custom-bg {
    background-color: #fafafa; /* Light gray background */
    padding: 20px;             /* Space around the whole section */
    text-align: center;        /* Centers the images horizontally */
    display: flex;             /* Uses Flexbox for better alignment */
    flex-wrap: wrap;           /* Allows images to wrap to the next line */
    justify-content: center;   /* Centers items in the flex row */
    align-items: center;       /* Aligns items vertically */
}

/* Individual Images */
.custom-bg img {
    max-width: 100%;           /* Ensures image never exceeds screen width */
    height: auto;              /* Naturally preserves the aspect ratio */
    display: block;            /* Prevents weird bottom-margin gaps */
    margin: 15px;              /* Consistent spacing between images */
    border-radius: 4px;        /* Optional: gives a slight soft edge to photos */
    transition: transform 0.3s ease; /* Makes them feel interactive */
}

/* Subtle hover effect for better user experience */
.custom-bg img:hover {
    transform: scale(1.02);    /* Slight zoom when hovered */
}



/* Makes the entire category box clickable */
.com-content-categories__item {
    position: relative; /* Creates a boundary for the link */
}

.com-content-categories__item-title-wrapper a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10; /* Places the invisible link over the image */
}


/* Optimized Joomla 2-Column Blog & Category Fix */
/* --- The Final 3-Column Grid Fix --- */

/* 1. Target the actual container Joomla uses for intro articles */
.blog-items, 
.com-content-category-blog__items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Forces 3 equal columns */
    gap: 25px !important;
    width: 100% !important;
}

/* 2. Remove the "Row" wrapper behavior */
div[class*="items-row"], 
.items-row, 
.row {
    display: contents !important;
}

/* 3. Force the Article boxes to behave */
.blog-item, 
article, 
.com-content-category-blog__item,
div[class*="item-column"] {
    grid-column: span 1 !important; /* Takes up 1 of the 3 grid slots */
    width: 100% !important; /* Fills the grid slot */
    max-width: 100% !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 4. Fix for Category List (Force 3 Columns here too) */
.com-content-categories__items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* 5. Responsive: 1 column for phones, 2 for tablets */
@media (max-width: 992px) {
    .blog-items, .com-content-category-blog__items, .com-content-categories__items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .blog-items, .com-content-category-blog__items, .com-content-categories__items {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================== */
/* 4️⃣ PRICE FIELD – ALWAYS RED                             */
/* ===================================================== */
.field-entry.price,
.field-entry.price *,
.com-content-article .field-entry.price *,
.com-content-category .field-entry.price * {
    color: #C00000 !important;
    font-weight: 800 !important;
}

.field-entry.price .field-value {
    font-size: 26px !important;
    line-height: 1.2;
    margin: 8px 0 18px;
}

/* Category 11 override */
.com-content-category-11 .field-entry.price .field-value,
.com-content-article.category-11 .field-entry.price .field-value {
    font-size: 22px !important;
}

/* Mobile price size */
@media (max-width: 767px) {
    .field-entry.price .field-value {
        font-size: 20px !important;
    }
}

/* ===================================================== */
/* 5️⃣ SKU FIELD – ALWAYS BLACK                              */
/* ===================================================== */
.field-entry.sku,
.field-entry.sku * {
    color: #000000 !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .field-entry.sku .field-value {
        font-size: 16px !important;
    }
}

/* ===================================================== */
/* 6️⃣ FIELDS CLEANUP – REMOVE BULLETS/PADDING            */
/* ===================================================== */
.fields-container,
.fields-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}