/*
Theme Name:   HeadShop_storefront_child
Theme URI:    https://averagestoner.com/as-child
Description:  A child theme for Storefront. This stylesheet contains theme-specific customizations for the Axanoid Mega Menu integration.
Author:       Axxanoid Studios LLC
Author URI:   https://averagestoner.com
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
Tags:         e-commerce, WooCommerce
Text Domain:  headshop_storefront_child
*/

/* --------------------------------------------------------------
   Theme customization starts here
-------------------------------------------------------------- */
/* Body Background */
body {
    background-color: var(--brand-neutral-light); /* Soft Off-White/Light Grey for body background */
}

/* Headings (H1, H2, H3, etc.) - Primary Font Color (Deep Forest Green) */
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-primary); /* Deep Forest Green */
    font-family: 'Inter', sans-serif; /* Primary Font */
}

/* Primary Buttons - Background and Text Color */
button.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button { /* Ensure general .button also styled */
    background-color: var(--brand-primary); /* Deep Forest Green */
    color: var(--brand-neutral-light); /* Soft Off-White/Light Grey */
    font-family: 'Inter', sans-serif; /* Primary Font */
    font-weight: 600; /* Slightly bolder for buttons */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 3px; /* Slightly rounded corners */
}

button.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--brand-primary-highlight); /* Twilight Blue for hover */
}

/* Links - Primary Color (Deep Forest Green) */
a {
    color: var(--brand-primary); /* Deep Forest Green */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--brand-primary-highlight); /* Twilight Blue for hover */
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Site Title/Logo Area - Apply Brand Colors as Needed */
.site-title a {
    color: var(--brand-neutral-light); /* Soft Off-White/Light Grey for contrast against dark header */
}

/* Site Header Background - Deep Forest Green for high contrast */
.site-header {
    background-color: var(--brand-primary); /* Deep Forest Green */
    padding: 15px 0 0 0; /* Add some vertical padding */
}

/* Primary Navigation Menu - Background and Link Colors */
#site-navigation {
    background-color: var(--brand-primary); /* Deep Forest Green to match header */
    clear: both;
    width: 100%;
}

#site-navigation ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for horizontal menu */
    justify-content: center; /* Center menu items */
    width: 100%;
}

#site-navigation ul.menu > li {
    position: relative; /* Crucial for mega menu positioning */
    flex-grow: 1; /* Allow items to grow, if needed */
    text-align: center;
}

#site-navigation ul.menu li a {
    color: var(--brand-neutral-light); /* Soft Off-White/Light Grey for high contrast against dark green */
    font-family: 'Inter', sans-serif; /* Primary Font */
    font-weight: 500; /* Medium weight for menu items */
    display: block;
    padding: 15px 20px;
    text-transform: uppercase;
    font-size: 0.95em; /* Slightly larger for readability */
    letter-spacing: 0.08em; /* Increased letter spacing for more impact */
}

#site-navigation ul.menu li a:hover {
    color: var(--brand-accent); /* Subtle Metallic Silver/Cool Grey for hover */
    background-color: rgba(0, 0, 0, 0.2); /* Slight hover background for visual feedback */
}

/* Mobile toggle buttons */
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle {
    color: var(--brand-neutral-light); /* Keep these light for dark header background */
    background-color: transparent; /* Ensure no background */
    border: 1px solid var(--brand-neutral-light); /* Light border for definition */
    padding: 8px 12px;
    border-radius: 3px;
}

/* Footer Background and Text Color */
#colophon {
    background-color: var(--brand-neutral-dark); /* Charcoal Grey */
    color: var(--brand-accent); /* Subtle Metallic Silver/Cool Grey */
    padding: 30px 0;
    text-align: center;
}

#colophon a {
    color: var(--brand-alt-text); /* Light links in the dark footer */
}

#colophon a:hover {
    color: var(--brand-accent); /* Subtle Metallic Silver/Cool Grey on hover */
}

/* WooCommerce Elements (e.g., product titles, prices, "Add to Cart" button) */
.woocommerce ul.products li.product h2 {
    color: var(--brand-primary-text); /* Charcoal Grey */
    font-family: 'Inter', sans-serif; /* Use primary font for product titles */
    font-weight: 600;
}

.woocommerce ul.products li.product .price {
    color: var(--brand-primary); /* Deep Forest Green */
    font-family: 'Roboto', sans-serif; /* Use secondary font for prices */
    font-size: 1.1em;
    font-weight: 500;
}

.woocommerce ul.products li.product .button {
    background-color: var(--brand-primary-highlight); /* Twilight Blue */
    color: var(--brand-neutral-light); /* Soft Off-White/Light Grey */
}

/* --------------------------------------------------------------
   Typography (Updated based on Brand Identity Packet)
-------------------------------------------------------------- */

/* Primary Font (Headings, Logo Text, CTA, Main Nav) - Inter */
h1, h2, h3, h4, h5, h6,
.site-title,
.cta-button,
#site-navigation ul.menu li a {
    font-family: 'Inter', sans-serif;
}

/* Secondary Font (Body Text, Subheadings, Prices) - Roboto */
body,
p,
li,
.overlay-text,
.sponsor-info,
.woocommerce ul.products li.product .price,
.amm-mega-menu-content-wrapper,
.amm-mega-menu-content-wrapper a {
    font-family: 'Roboto', sans-serif;
}

/* Site Branding Layout (Existing from your file) */
.woocommerce-active .site-header .site-branding {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    float: none;
}

.site-branding .head-shop-logo,
.site-branding .head-shop-title {
    display: inline-block;
    vertical-align: middle;
}

.head-shop-header-text-branding {
    color: var(--brand-alt-text); /* Soft Off-White/Light Grey for high contrast */
    display: inline-block;
    margin-left: 1.4725em;
    vertical-align: middle;
}

.site-branding .head-shop-title {
    font-size: 1.5em;
    color: var(--brand-alt-text); /* Soft Off-White/Light Grey for high contrast */
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif; /* Primary font for site title */
    font-weight: 700; /* Bold for emphasis */
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.site-branding .head-shop-header-text-branding .head-shop-title a {
    color: inherit; /* Inherit color from parent */
    text-decoration: none; /* Remove underline */
}

.site-branding .head-shop-header-text-branding .site-description {
    color: inherit; /* Inherit color from parent */
}

.site-branding .head-shop-logo img {
    max-width: 2em;
    height: auto;
    display: inline-block;
}

/* --------------------------------------------------------------
   Mega Menu Specific Styles (Updated and Added)
-------------------------------------------------------------- */

#amm-mega-menu-content-wrapper {
    background-color: var(--brand-accent); /* Subtle Metallic Silver/Cool Grey for mega menu content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 1em 2.35em; /* Padding around the content */
    border-top: 3px solid var(--brand-primary); /* Deep Forest Green top border for emphasis */
    position: absolute; /* Ensure it overrides any theme defaults for positioning */
    top: 100%; /* Position directly below the parent menu item/container */
    left: 0;      /* Snap to the left edge of its containing block */
    right: 0;     /* Snap to the right edge of its containing block */
    width: auto;  /* Let left/right define width */
    max-width: none; /* Remove max-width for full stretch */
}

#amm-mega-menu-content-wrapper .amm-mega-menu-inner {
    align-items: stretch; /* NEW: Makes all columns the same height */
}

#amm-mega-menu-content-wrapper .amm-mega-menu-column {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Subtle separator between columns */
}

#amm-mega-menu-content-wrapper .amm-mega-menu-column:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1); /* Ensure first column has left border */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li {
    margin-bottom: 12px; /* More space between items for clarity */
    padding: 0; /* Reset padding for list items */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a {
    color: var(--brand-accent-alt); /* Deep Forest Green for links in mega menu */
    font-family: 'Inter', sans-serif; /* Primary font for mega menu links */
    font-weight: 600; /* Medium weight for readability */
    padding: 5px 0;
    display: block;
    transition: color 0.3s ease;
    text-transform: uppercase; /* Uppercase for consistency */
    font-size: 0.95em; /* Slightly larger for readability */
    letter-spacing: 0.05em; /* Slightly increased letter spacing for clarity */
    text-decoration: none; /* Remove underline by default */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a:hover {
    color: var(--brand-primary-highlight); /* Twilight Blue for hover effect */
    text-decoration: underline; /* Underline on hover for clarity */
}

/* NEW: Style for the first item in each column's nav */
#amm-mega-menu-content-wrapper .amm-column-content ul.menu > li:first-child > a {
    font-weight: 700; /* Bolder */
    font-size: 1.2em; /* Bigger */
    color: var(--brand-primary); /* Ensure strong branding color */
    padding-bottom: 10px; /* Add some space below the "header" link */
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu > li:first-child > a:hover,
#amm-mega-menu-content-wrapper .amm-column-content ul.menu > li:first-child > a:focus {
    background-color: transparent; /* No background hover effect */
    text-decoration: none; /* No underline on hover */
    color: var(--brand-primary); /* Keep original color on hover/focus */
}


/* --------------------------------------------------------------
   Responsive / Mobile Adjustments (Updated and Cleaned)
-------------------------------------------------------------- */


/* Desktop / Tablet adjustments (min-width: 768px) */
@media (min-width: 768px) {
    .woocommerce-active .site-header .site-branding {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0;
        float: none;
        display: block;
        clear: both;
    }

    .woocommerce-active .site-header .site-search {
        clear: both;
        display: block;
        float: left;
        font-size: .875em;
        margin-right: 4.347826087%;
        margin-bottom: 0.425em;
        width: 73.9130434783%;
    }
    
    .woocommerce-active  .site-header-cart .cart-contents {
        padding-bottom: 0.681em;
    }
}

/* Mobile specific menu adjustments (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Main navigation mobile styles */
    #site-navigation {
        background-color: var(--brand-primary); /* Deep Forest Green for mobile nav background */
        clear: both;
        width: 100%;
    }

    #site-navigation ul.menu {
        flex-direction: column; /* Stack menu items vertically */
    }

    #site-navigation ul.menu li {
        width: 100%;
        text-align: left; /* Align text to left on mobile */
    }

    #site-navigation ul.menu li a {
        padding: 12px 15px; /* Adjust padding for mobile */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator for mobile menu items */
    }

    #site-navigation ul.menu li:last-child a {
        border-bottom: none; /* No separator for the last item */
    }

    /* Consolidate Mobile Menu Toggles */
    .handheld-navigation .dropdown-toggle {
        display: none; /* Hide the redundant dropdown toggle button */
    }

    /* Ensure the main menu toggle (hamburger) is styled correctly */
    button.menu-toggle,
    button.menu-toggle:hover {
        color: var(--brand-neutral-light); /* Light color for contrast against dark header */
        background-color: transparent; /* No background */
        border: 1px solid var(--brand-neutral-light); /* Light border for definition */
        padding: 8px 12px;
        border-radius: 3px;
        display: block; /* Ensure it's visible and acts as a block element */
        margin: 10px auto; /* Center it if desired, or position as per theme */
        text-align: center;
        width: auto; /* Allow button to size to content */
    }
    button.menu-toggle::before,
    button.menu-toggle::after,
    button.menu-toggle span::before {
        display: none; /* Hide any pseudo-elements that might be used for icons */
    }

    /* Mega menu for mobile - should stack and expand/collapse */
    #amm-mega-menu-content-wrapper { /* CORRECTED from .amm-mega-menu-content-wrapper to #amm-mega-menu-content-wrapper */
        position: relative; /* Change to relative for mobile */
        width: 100%;
        left: auto;
        right: auto;
        transform: none;
        box-shadow: none;
        border-top: none; /* No top border when stacked */
        background-color: var(--brand-neutral-light); /* Soft Off-White/Light Grey for mobile mega menu content */
        color: var(--brand-primary-text); /* Default text color for content */
        /* Initially hidden with height control */
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.4s ease-out;
        padding: 0 15px; /* Adjust padding for mobile */
    }

    .amm-mega-menu-trigger.amm-active > #amm-mega-menu-content-wrapper {
        opacity: 1;
        visibility: visible;
        max-height: 1000px; /* Arbitrarily large height to allow content to show */
        pointer-events: auto;
        padding: 15px; /* Restore padding when active */
    }

    .amm-mega-menu-inner {
        flex-direction: column; /* Stack columns vertically on mobile */
        padding: 0; /* Remove horizontal padding, columns handle it */
        align-items: stretch; /* Maintain same height for stacked columns */
    }

    .amm-mega-menu-column {
        padding: 15px 0; /* Add vertical padding between stacked columns */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separator for columns */
    }

    .amm-mega-menu-column:last-child {
        border-bottom: none; /* No separator for the last column */
    }
}
/* --------------------------------------------------------------
   End of Theme Customizations
-------------------------------------------------------------- */