/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/storefront/
Description: A child theme for the Storefront WooCommerce theme
Author: Your Name
Author URI: 
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
*/

/* 
 * Note: Storefront automatically enqueues this stylesheet after the parent theme styles
 * and WooCommerce styles. No need to manually enqueue in functions.php
 * @see Storefront class child_scripts() method
 */

/* Development indicator - only visible to admin users */
.storefront-child-dev-indicator {
    position: fixed;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
    border-left: 4px solid #666;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 999999;
}

/* Custom Storefront Header Styles */
header#masthead.site-header {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    height: 300px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Hide site logo/title in header */
.site-header .site-branding {
    display: none !important;
}

/* Position navigation below header image */
.col-full {
    position: relative !important;
}

.storefront-primary-navigation {
    position: absolute !important;
    top: 300px !important; /* Match header height */
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Navigation text colors */
.main-navigation ul li a {
    color: #000177 !important;
}

/* Current page indicator */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    color: #FEAD00 !important;
}

/* Hide secondary widget area and adjust layout */
#secondary.widget-area {
    display: none !important;
}

/* Make main content area full width */
.content-area {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.right-sidebar .content-area {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Tablet / medium screens */
@media (max-width: 768px) {
    header#masthead.site-header {
        height: 150px !important;
    }
    .storefront-primary-navigation {
        top: 150px !important; /* Match header height for tablet */
    }
}

/* Mobile / small screens */
@media (max-width: 480px) {
    header#masthead.site-header {
        height: 100px !important;
    }
    .storefront-primary-navigation {
        top: 100px !important; /* Match header height for mobile */
    }
}

/* Add your custom CSS below */

/* Only add your custom CSS here for any additions or overrides */