/* 1. Import the Lato font from Google Fonts (Must be at the top of the file) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* 2. Target the main menu links to change the font family and text color */
#_desktop_top_menu .top-menu a {
    font-family: 'Lato', sans-serif !important;
    color: #ffffff !important;
}

/* Optional: Add a slight hover effect so users know it's a clickable link */
#_desktop_top_menu .top-menu a:hover {
    color: #cccccc !important; 
}

/* 3. CRITICAL: Darken the dropdown menu background so white text is visible */
#_desktop_top_menu .popover.sub-menu {
    background-color: #0b4a4a !important; /* Change this hex code to your preferred dark color */
    border: none; /* Optional: removes the default light gray border */
}

/* 4. Header Backgrounds */
#header {
    background-color: #147e7e; 
}

/* The thin top bar (Sign in, Contact, etc.) */
#header .header-nav {
    background-color: #147e7e; 
}

/* The main header area (Logo, Search, Cart) */
#header .header-top {
    background-color: #147e7e; 
}

/* 5. Search Widget Contrast */
#search_widget form input[type="text"] {
    background-color: #f0f8f8 !important; /* Change this to #ffffff or rgba(255,255,255,0.85) if you prefer */
    color: #147e7e !important; /* Keeps your typing text teal */
    border: none !important;
}

/* Make the search icon match the teal text */
#search_widget form button i {
    color: #147e7e !important; 
}

/* Make the search icon match the teal text */
#search_widget form button i {
    color: #147e7e !important; 
}

/* 6. Cart Block Contrast */
.blockcart.cart-preview {
    background-color: #0b4a4a !important; /* Darker, richer teal for contrast against the #147e7e header */
    border-radius: 4px; /* Optional: Gives the cart a nice button-like appearance */
    padding: 8px 12px; /* Adjusts the spacing inside the cart button */
}

/* Ensure the cart text, icon, and product count circle stand out in white */
.blockcart.cart-preview .header,
.blockcart.cart-preview a,
.blockcart.cart-preview i,
.blockcart.cart-preview .cart-products-count {
    color: #ffffff !important;
}

/* 7. Footer Styles */
.footer-container, #footer {
    background-color: #2d2d2d !important; /* Dark gray background */
}

/* Target headings and general text inside the footer */
.footer-container .h1, 
.footer-container .h2, 
.footer-container .h3, 
.footer-container .h4, 
.footer-container p,
.footer-container li {
    color: #ffffff !important;
}

/* Target the specific footer blocks and links you requested */
.footer-container .block-contact .block-contact-title, 
.footer-container .block-contact .navbar-toggler .material-icons, 
.footer-container .linklist .blockcms-title a,
.footer-container a {
    color: #ffffff !important;
}

/* Optional: Slight hover effect for the footer links to match the top menu */
.footer-container a:hover {
    color: #cccccc !important;
}