/*
Theme Name: HMI Retrofits Custom
Theme URI: https://www.hmiretrofits.com
Description: Custom child theme for HMI Retrofits - Vauxhall & Ford Retrofit Specialists
Author: HMI Retrofits
Author URI: https://www.hmiretrofits.com
Template: popularfx
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmi-retrofits
*/

/* =============================================
   HMI Retrofits - Custom Styles
   Dark theme with red accents - Premium feel
   ============================================= */

/* CSS Variables */
:root {
    --hmi-bg-primary: #0a0a0a;
    --hmi-bg-secondary: #111111;
    --hmi-bg-tertiary: #1a1a1a;
    --hmi-bg-card: #151515;
    --hmi-accent: #e01010;
    --hmi-accent-hover: #ff2020;
    --hmi-accent-dark: #b00d0d;
    --hmi-text-primary: #ffffff;
    --hmi-text-secondary: #b0b0b0;
    --hmi-text-muted: #707070;
    --hmi-border: #2a2a2a;
    --hmi-border-light: #333333;
    --hmi-radius-sm: 4px;
    --hmi-radius-md: 8px;
    --hmi-radius-lg: 12px;
    --hmi-transition: 0.25s ease;
}

/* Global Overrides */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--hmi-bg-primary) !important;
    color: var(--hmi-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Fix for fixed header - add padding to main content */
.pagelayer-body-container,
.pagelayer-content,
main,
#content,
.site-content {
    padding-top: 100px !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.pagelayer-heading {
    font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--hmi-text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

p, .pagelayer-text {
    color: var(--hmi-text-secondary) !important;
}

a {
    color: var(--hmi-text-primary);
    transition: color var(--hmi-transition);
}

a:hover {
    color: var(--hmi-accent) !important;
}

/* PageLayer Row Overrides */
.pagelayer-row {
    background-color: var(--hmi-bg-primary);
}

.pagelayer-row-stretch-full {
    background-color: var(--hmi-bg-primary);
}

/* Header Styling */
.popularfx-header,
header,
#masthead {
    background-color: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hmi-border) !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Site Title - HmiRetrofits in red */
.site-title,
.site-title a,
.pagelayer-site-title,
.pagelayer-site-title a,
.pagelayer-heading.site-title,
header h1,
header h1 a,
.popularfx-logo,
.popularfx-logo a,
.custom-logo-link + .site-title,
[class*="site-title"],
[class*="logo"] span,
.pagelayer-ele-heading {
    color: #e01010 !important;
}

/* Flat Menu - Hide ALL dropdowns/submenus completely */
.sub-menu,
.pagelayer-wp-menu .sub-menu,
.menu-item-has-children .sub-menu,
.pagelayer-wp-menu-holder .sub-menu,
ul.sub-menu,
.pagelayer-wp-menu ul ul,
.menu ul ul,
.pagelayer-wp-menu-holder ul ul,
li.menu-item ul,
.mega-menu,
.pagelayer-mega-menu,
[class*="mega-menu"],
[class*="submenu"],
[class*="sub-menu"],
[class*="dropdown"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Remove dropdown arrows/carets */
.menu-item-has-children > a::after,
.pagelayer-wp-menu .menu-item-has-children > a::after,
.menu-item-has-children > a .caret,
.dropdown-toggle::after,
[class*="arrow"],
[class*="caret"] {
    display: none !important;
}

/* Disable hover effects that show dropdowns */
.menu-item-has-children:hover > .sub-menu,
.menu-item:hover > .sub-menu,
li:hover > ul {
    display: none !important;
}

/* Simple flat menu styling */
.pagelayer-wp-menu > li > a,
.menu > li > a {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Contact Form Styling - Fix white on white */
.pagelayer-form input,
.pagelayer-form textarea,
.pagelayer-form select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
.wpcf7-form input,
.wpcf7-form textarea {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.pagelayer-form input::placeholder,
.pagelayer-form textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: #888888 !important;
}

.pagelayer-form label,
.wpcf7-form label {
    color: #ffffff !important;
}

/* Contact Page Text Fix - ensure text is visible */
.pagelayer-text,
.pagelayer-heading,
.pagelayer-col p,
.pagelayer-col h1,
.pagelayer-col h2,
.pagelayer-col h3,
.pagelayer-col h4,
.pagelayer-col span {
    color: #ffffff !important;
}

/* Note: Contact page now uses custom template - no PageLayer overrides needed */

/* Floating Contact Button - move to bottom right */
.wh-api,
.whatsapp-button,
[class*="whatsapp"],
[class*="chat-widget"],
[class*="floating-contact"],
.tawk-min-container,
#tawk-tooltip,
.fb-customerchat,
[class*="messenger"],
.crisp-client,
[id*="chat"],
.chat-widget,
/* PageLayer Pro floating elements */
.pagelayer-floating-btn,
.pagelayer-floating-icons,
.pagelayer-social-icons[style*="fixed"],
.pagelayer-ele[style*="fixed"],
.pagelayer-floating,
[class*="pagelayer-floating"],
.pl-floating-icons,
.pagelayer-social-icons.pagelayer-floating-social,
div[data-floating="true"],
.pagelayer-row[style*="position: fixed"],
.pagelayer-col[style*="position: fixed"],
.pagelayer-ele[data-position="fixed"] {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    z-index: 9999 !important;
}

/* Stack multiple floating buttons vertically */
.pagelayer-floating-btn:nth-of-type(2),
.pagelayer-floating-icons > *:nth-child(2),
[class*="pagelayer-floating"]:nth-of-type(2) {
    bottom: 80px !important;
}

.pagelayer-floating-btn:nth-of-type(3),
.pagelayer-floating-icons > *:nth-child(3),
[class*="pagelayer-floating"]:nth-of-type(3) {
    bottom: 140px !important;
}

/* Chaty Plugin - Force to bottom right */
.chaty-widget,
.chaty-widget-i,
.chaty-widget-i-l,
.chaty-widget-i-r,
#chaty-widget,
#chaty-widget-0,
#chaty-widget-1,
.chaty,
[id^="chaty"],
[class^="chaty"],
.chaty-channels-list,
.chaty-channel,
.chaty-widget-i-c,
.chaty-main-widget,
.chaty-widget.chaty-widget-i-l,
.chaty-widget.pos-left,
.chaty-widget.pos-right,
div[class*="chaty"] {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 99999 !important;
}

/* Override any inline left position on Chaty */
.chaty-widget[style],
.chaty-widget-i[style],
[class*="chaty"][style*="left"],
[class*="chaty"][style*="top"] {
    left: auto !important;
    right: 20px !important;
    top: auto !important;
    bottom: 20px !important;
}

/* Navigation */
.popularfx-nav a,
.nav-menu a,
.main-navigation a {
    color: var(--hmi-text-secondary) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    transition: color var(--hmi-transition) !important;
}

.popularfx-nav a:hover,
.nav-menu a:hover,
.main-navigation a:hover {
    color: var(--hmi-text-primary) !important;
}

/* Dropdown Menus */
.sub-menu,
.dropdown-menu,
.popularfx-dropdown {
    background-color: var(--hmi-bg-secondary) !important;
    border: 1px solid var(--hmi-border) !important;
    border-radius: var(--hmi-radius-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.sub-menu a,
.dropdown-menu a {
    color: var(--hmi-text-secondary) !important;
    padding: 0.625rem 1rem !important;
}

.sub-menu a:hover,
.dropdown-menu a:hover {
    background-color: var(--hmi-bg-tertiary) !important;
    color: var(--hmi-accent) !important;
}

/* Mega Menu / Dropdown Fix - prevent menu from closing when moving mouse */
.pagelayer-wp-menu-holder .menu-item-has-children,
.pagelayer-wp_menu-ul > .menu-item-has-children {
    position: relative !important;
}

/* Remove any gap between menu item and dropdown */
.pagelayer-wp-menu-holder .sub-menu,
.pagelayer-wp_menu-ul .sub-menu {
    margin-top: 0 !important;
    top: 100% !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Extend the menu item's clickable/hoverable area downward */
.pagelayer-wp-menu-holder .menu-item-has-children > a,
.pagelayer-wp_menu-ul > .menu-item-has-children > a {
    padding-bottom: 20px !important;
    margin-bottom: -10px !important;
}

/* Create invisible bridge using pseudo-element */
.pagelayer-wp-menu-holder .menu-item-has-children::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    background: transparent;
    z-index: 999;
}

/* Ensure dropdown stays visible on hover */
.pagelayer-wp-menu-holder .menu-item-has-children:hover > .sub-menu,
.pagelayer-wp_menu-ul .menu-item-has-children:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Fix any transition delays that might cause flickering */
.pagelayer-wp-menu-holder .sub-menu {
    transition: none !important;
    transition-delay: 0s !important;
}

/* Keep submenu open when hovering over it */
.pagelayer-wp-menu-holder .sub-menu:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Buttons */
.pagelayer-btn,
.pagelayer-btn-holder a,
button,
input[type="submit"],
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.875rem 1.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: var(--hmi-radius-sm) !important;
    transition: all var(--hmi-transition) !important;
    cursor: pointer !important;
}

/* Primary Button */
.pagelayer-btn-primary,
.btn-primary,
.pagelayer-btn-holder a[style*="background"] {
    background-color: var(--hmi-accent) !important;
    color: var(--hmi-text-primary) !important;
    border: 2px solid var(--hmi-accent) !important;
}

.pagelayer-btn-primary:hover,
.btn-primary:hover {
    background-color: var(--hmi-accent-hover) !important;
    border-color: var(--hmi-accent-hover) !important;
    transform: translateY(-2px) !important;
}

/* Outline Button */
.pagelayer-btn-outline,
.btn-outline {
    background-color: transparent !important;
    color: var(--hmi-text-primary) !important;
    border: 2px solid var(--hmi-border-light) !important;
}

.pagelayer-btn-outline:hover,
.btn-outline:hover {
    border-color: var(--hmi-accent) !important;
    color: var(--hmi-accent) !important;
}

/* Cards & Boxes */
.pagelayer-inner_row,
.pagelayer-service-box,
.pagelayer-testimonial,
.pagelayer-icon-box,
.card {
    background-color: var(--hmi-bg-card) !important;
    border: 1px solid var(--hmi-border) !important;
    border-radius: var(--hmi-radius-lg) !important;
    transition: all var(--hmi-transition) !important;
}

.pagelayer-inner_row:hover,
.pagelayer-service-box:hover,
.pagelayer-testimonial:hover,
.pagelayer-icon-box:hover,
.card:hover {
    border-color: var(--hmi-accent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Icons */
.pagelayer-icon i,
.pagelayer-service-icon i,
.pagelayer-icon-box-icon i {
    color: var(--hmi-accent) !important;
}

/* Section Backgrounds */
.pagelayer-bgimg-yes {
    background-color: var(--hmi-bg-primary) !important;
}

/* Dark Section */
.section-dark,
.dark-bg {
    background-color: var(--hmi-bg-secondary) !important;
}

/* Accent Section (Red CTA) */
.section-accent,
.cta-section,
.pagelayer-row[style*="background-color: rgb(224, 16, 16)"],
.pagelayer-row[style*="e01010"] {
    background: linear-gradient(135deg, var(--hmi-accent-dark) 0%, var(--hmi-accent) 100%) !important;
}

.section-accent h2,
.section-accent p,
.cta-section h2,
.cta-section p {
    color: var(--hmi-text-primary) !important;
}

/* Stats / Numbers */
.pagelayer-counter-number,
.stat-number {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--hmi-accent) !important;
}

/* Testimonials */
.pagelayer-testimonial-content {
    font-style: italic !important;
    color: var(--hmi-text-secondary) !important;
}

.pagelayer-testimonial-name {
    font-weight: 600 !important;
    color: var(--hmi-text-primary) !important;
}

/* Star Ratings */
.pagelayer-star-rating i,
.star-rating {
    color: #fbbf24 !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select,
.pagelayer-form input,
.pagelayer-form textarea,
.pagelayer-form select {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    background-color: var(--hmi-bg-tertiary) !important;
    border: 1px solid var(--hmi-border) !important;
    border-radius: var(--hmi-radius-sm) !important;
    color: var(--hmi-text-primary) !important;
    font-size: 0.95rem !important;
    transition: border-color var(--hmi-transition) !important;
}

input:focus,
textarea:focus,
select:focus,
.pagelayer-form input:focus,
.pagelayer-form textarea:focus {
    outline: none !important;
    border-color: var(--hmi-accent) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--hmi-text-muted) !important;
}

/* Footer */
footer,
.popularfx-footer,
#colophon {
    background-color: var(--hmi-bg-primary) !important;
    border-top: 1px solid var(--hmi-border) !important;
    padding: 4rem 0 1.5rem !important;
}

footer h4,
footer .widget-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--hmi-text-primary) !important;
    margin-bottom: 1.5rem !important;
}

footer a {
    color: var(--hmi-text-muted) !important;
    font-size: 0.9rem !important;
}

footer a:hover {
    color: var(--hmi-accent) !important;
}

footer p {
    color: var(--hmi-text-muted) !important;
    font-size: 0.85rem !important;
}

/* Images */
.pagelayer-image img,
.pagelayer-gallery img {
    border-radius: var(--hmi-radius-md) !important;
    border: 1px solid var(--hmi-border) !important;
}

/* Slider/Carousel */
.pagelayer-slider,
.pagelayer-carousel {
    border-radius: var(--hmi-radius-lg) !important;
    overflow: hidden !important;
}

/* Feature Lists */
.pagelayer-feature-list li,
.feature-item {
    position: relative !important;
    padding-left: 1.25rem !important;
    color: var(--hmi-text-secondary) !important;
    margin-bottom: 0.5rem !important;
}

.pagelayer-feature-list li::before,
.feature-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
    width: 6px !important;
    height: 6px !important;
    background-color: var(--hmi-accent) !important;
    border-radius: 50% !important;
}

/* Badge Styles */
.badge,
.pagelayer-badge {
    display: inline-block !important;
    padding: 0.375rem 0.75rem !important;
    background-color: var(--hmi-accent) !important;
    color: var(--hmi-text-primary) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: var(--hmi-radius-sm) !important;
}

/* Dividers */
.pagelayer-divider,
.pagelayer-hr {
    border-color: var(--hmi-border) !important;
}

/* Scroll animations - EXCLUDE header, nav, and menus */
.hmi-homepage .pagelayer-ele:not(header *):not(nav *):not(.pagelayer-wp-menu-holder *):not(.sub-menu *) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hmi-homepage .pagelayer-ele.visible:not(header *):not(nav *),
.hmi-homepage .pagelayer-ele:not([data-animation]):not(header *):not(nav *) {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure header and menu elements are always visible */
header .pagelayer-ele,
nav .pagelayer-ele,
.pagelayer-wp-menu-holder .pagelayer-ele,
.pagelayer-wp-menu-holder *,
.sub-menu,
.sub-menu *,
.menu-item,
.menu-item * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    h1, .pagelayer-heading[data-size="xl"] {
        font-size: 2rem !important;
    }

    h2, .pagelayer-heading[data-size="lg"] {
        font-size: 1.75rem !important;
    }

    .pagelayer-btn,
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
    }

    .pagelayer-inner_row,
    .card {
        margin-bottom: 1rem !important;
    }
}

/* WooCommerce Overrides (if using shop) */
.woocommerce .button,
.woocommerce input.button {
    background-color: var(--hmi-accent) !important;
    color: var(--hmi-text-primary) !important;
    border-radius: var(--hmi-radius-sm) !important;
}

.woocommerce .button:hover,
.woocommerce input.button:hover {
    background-color: var(--hmi-accent-hover) !important;
}

.woocommerce-cart-form,
.woocommerce-checkout {
    background-color: var(--hmi-bg-card) !important;
    padding: 2rem !important;
    border-radius: var(--hmi-radius-lg) !important;
}

/* Custom utility classes */
.text-accent { color: var(--hmi-accent) !important; }
.bg-dark { background-color: var(--hmi-bg-secondary) !important; }
.bg-accent { background-color: var(--hmi-accent) !important; }
.border-accent { border-color: var(--hmi-accent) !important; }