/* assets/css/responsive.css */
/* Generic Elementor fluid layout overrides */
.elementor-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}
.elementor-widget-container {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Force QUICK LINKS and CONTACT US headings to align perfectly */
.elementor-element-73cab29, .elementor-element-068e84e {
    padding-top: 0 !important;
}
.elementor-element-30dfd7e, .elementor-element-f7fed80 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.elementor-element-30dfd7e .elementor-widget-container p, 
.elementor-element-f7fed80 .elementor-widget-container p {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}

/* Prevent menu links from wrapping awkwardly */
.hfe-nav-menu li a {
    white-space: nowrap !important;
}

/* Enable smooth scroll and offset for fixed header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 150px; /* Increased offset for header */
}

/* ---------------------------------------------------------- */
/* Global responsive helpers for the Brace Tekk site            */
/* ---------------------------------------------------------- */
/* 1️⃣ Ensure all images are fluid */
img, picture, svg {
    max-width: 100%;
    height: auto;
    display: block;
}
/* (Removed forced auto width to respect inline width attributes on icons) */
/* 2️⃣ Simple flexbox grid */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.col-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
/* 2‑column for tablets and above */
@media (min-width: 576px) {
    .col-sm-6 { flex:0 0 50%; max-width:50%; }
}
/* 3‑column for desktop */
@media (min-width: 992px) {
    .col-md-4 { flex:0 0 33.3333%; max-width:33.3333%; }
    .col-md-6 { flex:0 0 50%; max-width:50%; }
}
/* 4️⃣ Elementor widgets adjustments */
.elementor-widget-image-box {
    width: 100% !important;
    margin-bottom: 1.5rem;
}
.elementor-widget-image-box .elementor-image-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 15px; /* Add explicit gap between icon and content */
}
.elementor-widget-image-box .elementor-image-box-img {
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.elementor-widget-image-box .elementor-image-box-content {
    flex-grow: 1;
}
.elementor-widget-image-box .elementor-image-box-img img {
    width: 40px !important; /* Force reasonable icon size */
    max-width: 100%;
    height: auto;
    display: inline-block;
}
/* Responsive icon scaling for mobile */
@media (max-width: 576px) {
    .elementor-widget-image-box .elementor-image-box-img img {
        width: 30px !important; /* smaller icons on phones */
    }
}
/* 5️⃣ Form inputs – full width on mobile */
.responsive-form input,
.responsive-form textarea,
.responsive-form select {
    width: 100% !important;
    box-sizing: border-box;
}
/* 6️⃣ Ensure header/footer sections collapse gracefully */
@media (max-width: 921px) {
    #ast-desktop-header { display:none; }
    #ast-mobile-header { display:block; }
}
@media (min-width: 922px) {
    #ast-mobile-header { display:none; }
    #ast-desktop-header { display:block; }
    /* Prevent header navigation items from wrapping */
    .hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap !important; }
}
/* 7️⃣ Utility: hide overflow on containers */
body, .ast-container { overflow-x:hidden; }