/*
Theme Name: MAS Group Theme
Author: MAS Team
Version: 1.2
Description: Custom theme for MAS Group with full WPBakery support.
*/

/* =========================================
   1. RESET & BASICS
   ========================================= */
:root {
    --color-primary: #07C160;
    --color-primary-dark: #059669;
    --color-text: #1F2937;
    --color-bg: #F9FAFB;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Fix for menu bullets - CRITICAL */
ul,
li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* =========================================
   2. GLOBAL LAYOUT FIXES (WPBakery Override)
   ========================================= */

/* Force homepage to handle full width content correctly */
body.home .site-content,
body.home .entry-content,
body.home article {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide the default "Home" title on the front page */
body.home .entry-header,
body.home .page-header {
    display: none !important;
}

/* Removing any default margins from the main container */
main#main-content,
.site-main,
.site-content,
.entry-content,
article {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    /* Prevent height constraining */
    min-height: 200px;
    /* Ensure at least some height */
    overflow: visible !important;
    /* Allow content to flow naturally */
    display: flow-root;
    /* CRITICAL: Establish BFC to contain floats without clipping overflow */
    padding: 0 !important;
    margin: 0 !important;
}

/* Footer Visibility Fix */
footer {
    position: relative;
    z-index: 50;
    /* Ensure it sits above overlapping content */
    clear: both;
    /* Clear any leftover floats */
}

/* WPBakery Specific Aggressive Resets */
.vc_row,
.vc_column_container,
.vc_column-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Specifically target the inner column that often causes gaps */
.vc_column-inner {
    box-shadow: none !important;
    background: transparent !important;
    display: block !important;
}

/* Fix for the white box issue present in some default setups */
.site-content-full,
.site-main {
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================
   3. HEADER STYLES
   ========================================= */
#masthead {
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

/* Default (Top) State - Ensure visibility */
#masthead:not(.scrolled) {
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Non-Home Pages Initial State (Green Header) */
.header-green:not(.scrolled) {
    background-color: var(--color-primary) !important;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    background-size: auto;
    background-repeat: repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Scrolled State */
#masthead.scrolled {
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#masthead.scrolled a.nav-link,
#masthead.scrolled .action-btn {
    color: #1F2937 !important;
    /* Dark Text */
}

#masthead.scrolled .logo-text {
    color: #07C160 !important;
    /* Green Text */
}

/* Logo specific fix */
.logo-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Ensure readability on image */
}

#masthead.scrolled .logo-text {
    text-shadow: none;
}

/* =========================================
   4. UTILITIES
   ========================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    /* Reset 100% override for inner containers */
}