/* Custom Streetwear Styling for The Madd Monkey */

:root {
    --bg-dark: #050505;
    --brand-red: #d90000;
    --text-white: #f5f5f5;
    --text-grey: #a3a3a3;
    --border-color: #2a2a2a;
}

/* Global Colors & Body Overrides */
body, 
#page-wrapper, 
.page-wrapper, 
.main-content {
    background-color: var(--bg-dark) !important;
    color: var(--text-white) !important;
}

/* Ensure standard body paragraphs and descriptions are visible (light grey) */
p, 
span.porto-sicon-description,
.entry-content,
.post-content,
.product-short-description,
.porto-sicon-description,
.porto-sicon-header p,
.thumb-info-inner p,
.price ins,
.amount {
    color: var(--text-grey) !important;
}

/* Base Typography Overrides */
h1, h2, h3, h4, h5, h6,
.page-title,
.widget-title,
.product-title,
.porto-sicon-title,
.porto-sicon-header h3,
.porto-sicon-header h4,
.elementor-heading-title,
.post-title,
.thumb-info-inner,
.thumb-info-title {
    font-family: 'Teko', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

/* Explicit Heading Colors to make them stand out on black background */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.entry-title,
.entry-title a,
.page-title,
.page-title a,
.widget-title,
.widget-title a,
.product-title,
.product-title a,
.porto-sicon-title,
.porto-sicon-title a,
.porto-sicon-header h3,
.porto-sicon-header h3 a,
.porto-sicon-header h4,
.porto-sicon-header h4 a,
.elementor-heading-title,
.elementor-heading-title a,
.post-title,
.post-title a,
.thumb-info-inner,
.thumb-info-title,
.thumb-info-title a {
    color: var(--text-white) !important;
}

/* Highlight specific titles with Red Accent when hovered */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.entry-title a:hover,
.product-title a:hover,
.porto-sicon-title a:hover,
.elementor-heading-title a:hover,
.post-title a:hover {
    color: var(--brand-red) !important;
}

/* Logo Overrides */
.logo a, 
.site-logo, 
.madd-logo-text {
    font-family: 'Permanent Marker', cursive !important;
    color: var(--text-white) !important;
    letter-spacing: 1px;
}

/* --- Premium Header Styling --- */

/* Normal State: Semi-Transparent Black Layer (so background is visible behind, but tinted) */
#header.header-builder {
    background: rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s ease-in-out !important;
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 1000 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Remove default background colors from inner rows */
#header.header-builder .header-main,
#header.header-builder .header-top {
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
}

/* Sticky Scroll State with Glassmorphism */
#header.header-builder.sticky-header.fixed-header,
#header.header-builder.sticky-header.fixed-header .header-main {
    background: rgba(5, 5, 5, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: fixed !important;
    top: 0 !important;
    padding: 0.5rem 0 !important;
}

/* --- Switchers, Top Links and Small fonts in Header (Make them white/visible, not dark grey) --- */
#header.header-builder .currency-switcher > li > a,
#header.header-builder .view-switcher > li > a,
#header.header-builder .top-links > li > a,
#header.header-builder .share-links a,
#header.header-builder .porto-sicon-header p,
#header.header-builder .porto-sicon-header h3,
#header.header-builder .porto-sicon-header h4,
#header.header-builder .porto-link-login,
#header.header-builder .welcome-text,
#header.header-builder .header-contact {
    color: var(--text-white) !important;
}

#header.header-builder .currency-switcher > li > a:hover,
#header.header-builder .view-switcher > li > a:hover,
#header.header-builder .top-links > li > a:hover,
#header.header-builder .porto-link-login:hover {
    color: var(--brand-red) !important;
}

/* --- Navigation Links Styling (Both inside header and outside, like under header) --- */
.main-menu > li > a,
#menu-dee-menu > li > a {
    font-family: 'Teko', sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--text-white) !important; /* Made white for clean high contrast */
    position: relative !important;
    padding: 10px 15px !important;
    transition: color 0.3s ease !important;
    background: transparent !important;
}

.main-menu > li:hover > a,
.main-menu > li.active > a,
.main-menu > li.current-menu-item > a,
#menu-dee-menu > li:hover > a,
#menu-dee-menu > li.active > a,
#menu-dee-menu > li.current-menu-item > a {
    color: var(--brand-red) !important; /* Turns red on hover */
}

/* Underline Indicator on Hover */
.main-menu > li > a::after,
#menu-dee-menu > li > a::after {
    content: "" !important;
    background-color: var(--brand-red) !important;
    width: 0% !important;
    height: 2px !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 15px !important;
    right: 15px !important;
    transition: width 0.3s ease !important;
}

.main-menu > li:hover > a::after,
.main-menu > li.active > a::after,
.main-menu > li.current-menu-item > a::after,
#menu-dee-menu > li:hover > a::after,
#menu-dee-menu > li.active > a::after,
#menu-dee-menu > li.current-menu-item > a::after {
    width: calc(100% - 30px) !important;
}

/* --- Header Height Reduction Styles --- */

/* Completely hide Header Top Bar to reclaim space */
#header.header-builder .header-top {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Further reduce padding and spacing of Header Main row (super slim) */
#header.header-builder .header-main {
    min-height: unset !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#header.header-builder .header-main .elementor-container,
#header.header-builder .header-main .e-con-inner,
#header.header-builder .header-main .elementor-row {
    min-height: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Shrink header logo image slightly more */
#header.header-builder .logo img {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Keep search bar thin */
#header.header-builder .searchform-popup input[type="text"] {
    height: 34px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 1.2rem !important;
}

#header.header-builder .searchform-popup .btn-special {
    height: 34px !important;
    width: 34px !important;
    line-height: 34px !important;
}

/* Hide text in the header's Sign In/Register info box to only show the user icon (saves space) */
#header .elementor-widget-porto_info_box .porto-sicon-header {
    display: none !important;
}

#header .elementor-widget-porto_info_box .porto-just-icon-wrapper {
    margin-right: 0 !important;
}

/* Adjust the style of the user icon in the header info box to match other header icons */
#header .elementor-widget-porto_info_box i {
    font-size: 1.4rem !important;
    color: var(--text-white) !important;
    transition: color 0.3s ease !important;
}

#header .elementor-widget-porto_info_box:hover i {
    color: var(--brand-red) !important;
}

/* Reduce My Account, wishlist and mini-cart spaces even more */
#header.header-builder .porto-sicon-box,
#header.header-builder .my-wishlist,
#header.header-builder .mini-cart {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#header.header-builder .porto-sicon-box .porto-sicon-header h3 {
    font-size: 1.1rem !important;
    line-height: 1.05 !important;
}

#header.header-builder .porto-sicon-box .porto-sicon-header p {
    font-size: 0.8rem !important;
    line-height: 1.05 !important;
}

/* Reduce margins of main menu container */
.elementor-element-448eb5c,
.elementor-element-ef2774b,
.elementor-element-1b2f8df {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#menu-dee-menu {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#menu-dee-menu > li > a {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* --- Header Icons Overrides --- */

/* Search form icon */
.searchform-popup .search-toggle i,
.header-right i,
.header-right a,
.porto-sicon-box i,
.minicart-icon,
.my-wishlist i {
    color: var(--text-white) !important;
    transition: color 0.3s ease !important;
}

.searchform-popup .search-toggle:hover i,
.header-right i:hover,
.header-right a:hover i,
.porto-sicon-box:hover i,
.mini-cart:hover .minicart-icon,
.my-wishlist:hover i {
    color: var(--brand-red) !important;
}

/* WooCommerce elements */
.minicart-icon {
    font-size: 1.4rem !important;
}

.cart-items {
    background-color: var(--brand-red) !important;
    color: var(--text-white) !important;
}

/* WooCommerce Shop / Products Page overrides */
.woocommerce-page .product {
    background-color: #0b0b0b !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease;
}

.woocommerce-page .product:hover {
    border-color: var(--brand-red) !important;
    box-shadow: 0 5px 15px rgba(217, 0, 0, 0.1);
}

.woocommerce-page .product .price {
    color: var(--brand-red) !important;
}

/* Buttons style to fit the streetwear theme */
.btn-primary, 
.button, 
.woocommerce-button, 
.elementor-button {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: var(--text-white) !important;
    font-family: 'Teko', sans-serif !important;
    text-transform: uppercase !important;
    font-size: 1.4rem !important;
    letter-spacing: 1px !important;
    border-radius: 0px !important; /* Sharp corners */
    transform: skewX(-8deg) !important; /* Streetwear Skew */
    transition: all 0.3s ease !important;
}

.btn-primary:hover, 
.button:hover, 
.woocommerce-button:hover, 
.elementor-button:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 15px rgba(217, 0, 0, 0.4) !important;
}

/* Correct font inner text for skewed buttons */
.btn-primary > *, 
.button > *, 
.woocommerce-button > *, 
.elementor-button > * {
    transform: skewX(8deg) !important; /* Un-skew text */
    display: inline-block;
}

/* Footer styling */
#footer {
    background-color: #020202 !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-grey) !important;
}

#footer a {
    color: var(--text-grey) !important;
}

#footer a:hover {
    color: var(--brand-red) !important;
}