/* ============================================
   CUSTOM CSS FIXES - ALL MODIFICATIONS
   Created: September 22, 2025
   ============================================ */

/* =================================================================
   1. PRODUCT IMAGE FIXES - Remove whitespace, canvas mode
   ================================================================= */

/* Product image wrapper - Canvas mode without padding */
.product-card__image[data-astro-cid-pxdipme3] {
    position: relative !important;
    width: 100% !important;
    padding-top: 75% !important; /* 4:3 Aspect Ratio */
    background: #f0f0f0 !important;
    overflow: hidden !important;
    height: 0 !important;
    display: block !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
}

/* Product image fills entire container - canvas mode */
.product-card__image[data-astro-cid-pxdipme3] img.product-image,
.product-card__image[data-astro-cid-pxdipme3] img,
.product-card__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fill container completely */
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.3s ease !important;
}

/* Hover effect for product images */
.product-card:hover .product-card__image img {
    transform: scale(1.05) !important;
}

/* =================================================================
   2. PRODUCT GRID - Force 2 columns on tablet/desktop
   ================================================================= */

/* Force 2 columns layout for ALL screen sizes 768px and up */
@media (min-width: 768px) {
    .product-grid.product-grid--cols-2[data-astro-cid-crl6c2dn],
    .product-grid.product-grid--default[data-astro-cid-crl6c2dn],
    .product-grid[data-astro-cid-crl6c2dn],
    .product-grid.product-grid--cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2rem !important;
        width: 100% !important;
    }

    /* Ensure product cards don't break the grid */
    .product-grid[data-astro-cid-crl6c2dn] > .product-card {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ULTIMATE OVERRIDE: Absolutely force 2-column grid */
@media screen and (min-width: 768px) {
    /* Override the auto-fit minmax that's causing issues */
    .product-grid--cols-2[data-astro-cid-crl6c2dn] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    /* Target by both classes to increase specificity */
    .product-grid.product-grid--default.product-grid--cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Remove any grid-column spans that might affect layout */
    .product-grid--cols-2[data-astro-cid-crl6c2dn] > .product-card,
    .product-grid--cols-2[data-astro-cid-crl6c2dn] > .product-card--highlight {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* Even more specific for larger screens */
@media screen and (min-width: 1024px) {
    .product-grid--cols-2[data-astro-cid-crl6c2dn],
    div.product-grid.product-grid--cols-2 {
        display: grid !important;
        grid-template-columns: calc(50% - 0.75rem) calc(50% - 0.75rem) !important;
        gap: 1.5rem !important;
        justify-content: space-between !important;
    }
}

/* =================================================================
   3. NAVIGATION LOGO FIXES
   ================================================================= */

/* Main navigation logo - max width 220px */
.nav-logo .logo {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Desktop specific logo fixes */
@media (min-width: 768px) {
    .nav-logo .logo {
        max-width: 220px !important;
        height: 60px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =================================================================
   4. PRIORITY GRID STYLING - White text, blue hover
   ================================================================= */

/* Priority grid default state - white text */
.priority-grid .priority-dept-card {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.priority-grid .dept-number {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.priority-grid .dept-name,
.priority-grid .dept-meta,
.priority-grid .dept-cta {
    color: #ffffff !important;
}

/* Priority grid hover state - blue background, keep white text */
.priority-grid .priority-dept-card:hover {
    background: #004494 !important;
    border: 2px solid #004494 !important;
    transform: translateY(-5px) !important;
}

.priority-grid .priority-dept-card:hover .dept-number {
    background: #ffffff !important;
    color: #004494 !important;
    border: 2px solid #ffffff !important;
}

.priority-grid .priority-dept-card:hover .dept-name,
.priority-grid .priority-dept-card:hover .dept-meta,
.priority-grid .priority-dept-card:hover .dept-cta {
    color: #ffffff !important;
}

/* Remove underlines from all priority grid elements */
.priority-grid a,
.priority-grid .dept-cta,
.priority-grid .priority-dept-card {
    text-decoration: none !important;
}

.priority-grid a:hover,
.priority-grid .dept-cta:hover {
    text-decoration: none !important;
}

/* =================================================================
   5. FOOTER LINKS - White color
   ================================================================= */

footer a,
.footer-links a,
.footer-bottom a,
.legal-links a,
.footer-column a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

footer a:hover,
.footer-links a:hover,
.footer-bottom a:hover,
.legal-links a:hover,
.footer-column a:hover {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-decoration: none !important;
}

/* =================================================================
   6. CITIES TAGS - White text on blue hover
   ================================================================= */

.cities-tags a,
.cities-tags .city-tag {
    transition: all 0.3s ease !important;
}

.cities-tags a:hover,
.cities-tags .city-tag:hover {
    background: #004494 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* =================================================================
   7. DEPARTMENT CONTENT - Remove underlines on hover
   ================================================================= */

.dept-content a,
.dept-content .dept-link,
.dept-card a,
.dept-card .dept-cta {
    text-decoration: none !important;
}

.dept-content a:hover,
.dept-content .dept-link:hover,
.dept-card a:hover,
.dept-card .dept-cta:hover {
    text-decoration: none !important;
}

/* =================================================================
   8. ADDITIONAL FIXES
   ================================================================= */

/* Ensure product cards have proper structure */
.product-card[data-astro-cid-pxdipme3] {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-card[data-astro-cid-pxdipme3]:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Product content spacing */
.product-card__content[data-astro-cid-pxdipme3] {
    padding: 1.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product specs background */
.product-card__specs[data-astro-cid-pxdipme3] {
    background: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
}

/* Mobile optimization */
@media (max-width: 767px) {
    .product-grid[data-astro-cid-crl6c2dn] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .product-card__image[data-astro-cid-pxdipme3] {
        padding-top: 75% !important;
    }
}