/*
Theme Name: Theme Ultra Configurator
Theme URI: https://example.com/
Author: Roo
Author URI: https://example.com/
Description: A highly configurable theme for WordPress and WooCommerce.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-header, custom-menu, custom-logo, editor-style, featured-images, full-width-template, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, woocommerce
Text Domain: theme-ultra-configurator
*/

/* Header styles */
.site-header {
    padding: var(--header-outer-padding, 0);
    border-bottom: var(--header-bottom-border, 1px solid #eee);
}

.header-grid-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left, Branding/Icons, Right */
    align-items: center;
    gap: 0;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 0 0px;
}

.site-branding {
    text-align: left; /* Default text align */
}

.site-title {
    margin: 0;
}


.main-navigation {
    grid-column: 1 / -1; /* Navigation spans all columns below */
    display: flex; /* Ensure navigation itself is a flex container */
    justify-content: center; /* Center the menu within the nav area */
    width: 100%; /* Occupy full width of its grid column */
    padding-top: var(--header-top-row-bottom-padding, 10px); /* Space between branding/icons and menu */
}

.header-right-block {
    grid-column: 3 / 4; /* Ensure right block is in the third column */
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    align-items: center;
}

.header-icons {
    display: flex;
    justify-content: flex-end; /* Align icons to the right */
    align-items: center;
    gap: 15px; /* Space between icons */
}

.header-left-block {
    grid-column: 1 / 2; /* Ensure left block is in the first column */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Icon styles */
.header-icons .icon {
    font-size: 24px; /* Adjust icon size as needed */
    color: #333; /* Default icon color */
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-icons .icon:hover {
    color: #007bff; /* Icon hover color */
}

/* Default Menu Style */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Ensure horizontal display */
    justify-content: center; /* Center menu items */
    align-items: center; /* Align items vertically */
    flex-grow: 1; /* Allow the ul to grow and take available space */
}

.main-navigation li {
    position: relative;
    margin: 0 15px; /* Adjust spacing between items */
}

.main-navigation a {
    display: block;
    padding: 10px 0; /* Adjust padding for better look */
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: #007bff; /* Highlight color on hover */
}

.main-navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Position the underline slightly below the text */
    width: 100%;
    height: 2px;
    background-color: #007bff;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after {
    transform: scaleX(1); /* Animate the underline on hover/active */
}