/*
 * Elementor Responsive Fixes
 * Theme:              Hadiman v1.0.9 (ApusTheme)
 * Elementor:         3.33.3 + Pro 3.33.2
 * Active Kit post:   ID 7 (.elementor-kit-7)
 * Tablet breakpoint: 1024px (Elementor default)
 * Mobile breakpoint:  767px (Elementor default)
 * Generated:         2026-02-18
 *
 * Load order: enqueued at priority 101, after all theme styles.
 * Overrides Elementor generated CSS without touching plugin files.
 *
 * Sections:
 *  1.  Viewport & overflow safety
 *  2.  Container max-width & horizontal padding
 *  3.  Column stacking
 *  4.  Global typography scaling (kit variables + element selectors)
 *  5.  Section / container vertical spacing
 *  6.  Negative-margin overlap fixes
 *  7.  Button normalisation
 *  8.  Image safety
 *  9.  Hadiman header & navigation
 * 10.  Elementor Pro – Nav Menu
 * 11.  Elementor Pro – Slides widget
 * 12.  Accordion / toggle widgets
 * 13.  Icon-box widgets
 * 14.  Forms
 * 15.  Tables
 * 16.  Hadiman theme-specific components
 * 17.  WooCommerce mobile
 * 18.  Very small screens (<=479 px)
 */


/* ==========================================================================
   1. VIEWPORT & OVERFLOW SAFETY
   ========================================================================== */

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Prevent any media element from breaking the layout at any width */
img,
video,
iframe,
embed,
object,
svg {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   2. CONTAINER MAX-WIDTH & HORIZONTAL PADDING
   ========================================================================== */

/*
 * Problem: the kit CSS (post-7.css) sets:
 *   @media(max-width:767px) { .e-con { --container-max-width: 767px; } }
 * On a real 360-414 px phone the section has 0 horizontal padding, so
 * content butts against the screen edge.
 *
 * Fix: reset max-width to 100% and guarantee at least 15px side padding.
 */

@media (max-width: 767px) {

    /* Legacy section-based layout */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Modern e-con containers */
    .e-con {
        --container-max-width: 100% !important;
    }

    /* Top-level e-con sections that have 0 horizontal padding */
    .elementor-section-wrap > .e-con,
    body > .e-con,
    .elementor-location-header .e-con,
    .elementor-location-footer .e-con {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Inner container wrapper -- do not double-pad */
    .e-con > .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 1024px) {

    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ==========================================================================
   3. COLUMN STACKING
   ========================================================================== */

@media (max-width: 767px) {

    /* Legacy column layout */
    .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-section .elementor-row,
    .elementor-container {
        flex-wrap: wrap !important;
    }

    /* Modern e-con columns stack to full width */
    .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        --width: 100% !important;
    }

    /* Sidebar column (14.717% inline) */
    .e-con[style*="--width:14"],
    .e-con[style*="--width: 14"] {
        --width: 100% !important;
        width: 100% !important;
    }

    /* Force vertical flow on containers */
    .e-con {
        --flex-direction: column !important;
        --flex-wrap: wrap !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet: very narrow columns go to 50% */
    .elementor-col-20,
    .elementor-col-25,
    .elementor-col-33 {
        width: 50% !important;
    }
}


/* ==========================================================================
   4. GLOBAL TYPOGRAPHY SCALING
   ========================================================================== */

@media (max-width: 767px) {

    /* Override kit CSS custom properties at mobile */
    .elementor-kit-7 {
        --e-global-typography-primary-font-size:   26px;
        --e-global-typography-secondary-font-size: 20px;
        --e-global-typography-3b34af5-font-size:   24px;
        --e-global-typography-a30ad42-font-size:   20px;
        --e-global-typography-f4fb39e-font-size:   18px;
        --e-global-typography-976f781-font-size:   16px;
        --e-global-typography-cbcb714-font-size:   16px;
        --e-global-typography-ceb0834-font-size:   20px;
        --e-global-typography-9723719-font-size:   17px;
        --e-global-typography-55bae6d-font-size:   20px;
        --e-global-typography-b26d30a-font-size:   18px;
        --e-global-typography-b26d30a-line-height: 1.4;
    }

    /* Prevent headings from overflowing */
    .elementor-heading-title,
    .elementor-widget-heading h1,
    .elementor-widget-heading h2,
    .elementor-widget-heading h3,
    .elementor-widget-heading h4 {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }

    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(20px, 6vw, 26px) !important;
        line-height: 1.2 !important;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: clamp(18px, 5vw, 22px) !important;
        line-height: 1.3 !important;
    }

    h3, .elementor-heading-title.elementor-size-large {
        font-size: clamp(16px, 4.5vw, 20px) !important;
        line-height: 1.35 !important;
    }

    h4, .elementor-heading-title.elementor-size-medium {
        font-size: clamp(15px, 4vw, 18px) !important;
    }

    .elementor-widget-text-editor p,
    .elementor-text-editor p {
        line-height: 1.6;
    }

    /* Breadcrumb page title */
    .bread-title {
        font-size: clamp(18px, 5vw, 26px) !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 1024px) {

    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(24px, 4vw, 36px) !important;
        line-height: 1.2 !important;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: clamp(20px, 3vw, 28px) !important;
    }
}


/* ==========================================================================
   5. SECTION / CONTAINER VERTICAL SPACING
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-top-section {
        padding-top:    min(var(--padding-top, 30px), 40px) !important;
        padding-bottom: min(var(--padding-bottom, 30px), 40px) !important;
    }

    /* Widget-to-widget gap */
    .elementor-widget:not(:last-child) {
        --kit-widget-spacing: 15px;
        margin-bottom: 15px !important;
    }

    /* Gap between stacked child e-cons */
    .e-con > .e-con + .e-con {
        margin-top: 16px;
    }
}

@media (max-width: 1024px) {

    /* Bring large hero padding down on tablet */
    .e-con[style*="--padding-top:90px"],
    .e-con[style*="--padding-top: 90px"] {
        --padding-top:    50px !important;
        --padding-bottom: 50px !important;
    }
}


/* ==========================================================================
   6. NEGATIVE-MARGIN OVERLAP FIXES
   ========================================================================== */

@media (max-width: 767px) {

    /* Neutralise negative bottom margins that cause overlap on stacked layouts */
    .e-con[style*="--margin-bottom:-"] {
        --margin-bottom: 0px !important;
        margin-bottom:   0px !important;
    }

    .elementor-section[style*="margin-bottom:-"] {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet: reduce -12% pull-up to -4% */
    .e-con[style*="--margin-bottom:-12%"] {
        --margin-bottom: -4% !important;
    }
}


/* ==========================================================================
   7. BUTTON NORMALISATION
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-button {
        white-space: normal !important;
        word-break:  break-word !important;
        font-size:   14px !important;
        padding:     10px 20px !important;
        min-width:   auto !important;
    }

    .elementor-button.elementor-size-xl,
    .elementor-button.elementor-size-xxl {
        font-size: 15px !important;
        padding:   12px 22px !important;
    }

    .elementor-widget-button .elementor-widget-container {
        text-align: center;
    }
}

@media (max-width: 479px) {

    .elementor-widget-button .elementor-button {
        display:    block !important;
        width:      100% !important;
        text-align: center !important;
    }
}


/* ==========================================================================
   8. IMAGE SAFETY
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-widget-image img,
    .elementor-widget-image-box img,
    .elementor-widget-media img {
        width:     100% !important;
        height:    auto !important;
        max-width: 100% !important;
    }

    .elementor-section[data-settings],
    .e-con[data-settings] {
        background-size:     cover !important;
        background-position: center center !important;
    }
}


/* ==========================================================================
   9. HADIMAN HEADER & NAVIGATION
   ========================================================================== */

@media (max-width: 991px) {

    .header-mobile {
        display:     flex !important;
        align-items: center;
        padding:     8px 15px;
    }

    .header-mobile .logo-theme img,
    .logo-theme img {
        max-width: 120px !important;
        height:    auto !important;
    }

    .topbar-mobile {
        padding: 8px 15px;
    }
}

@media (max-width: 767px) {

    #apus-header.sticky-header,
    .header-mobile.sticky-header {
        padding-top:    5px;
        padding-bottom: 5px;
    }
}


/* ==========================================================================
   10. ELEMENTOR PRO -- NAV MENU WIDGET
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-menu-toggle {
        display: flex !important;
    }

    .elementor-nav-menu--main.elementor-nav-menu__container {
        display: none;
    }

    .elementor-nav-menu--main.elementor-nav-menu__container.elementor-nav-menu--dropdown {
        display: block;
    }

    nav.elementor-nav-menu--dropdown {
        width:   100% !important;
        left:    0 !important;
        right:   0 !important;
        z-index: 9999;
    }
}


/* ==========================================================================
   11. ELEMENTOR PRO -- SLIDES WIDGET
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-slides-wrapper .elementor-slide-heading {
        font-size:   clamp(18px, 5vw, 26px) !important;
        line-height: 1.3 !important;
    }

    .elementor-slides-wrapper .elementor-slide-description {
        font-size: 14px !important;
    }

    .elementor-slides-wrapper .elementor-slide-button {
        font-size: 14px !important;
        padding:   8px 18px !important;
    }

    .elementor-slides-wrapper .swiper-slide {
        min-height: 220px;
    }
}


/* ==========================================================================
   12. ACCORDION / TOGGLE WIDGETS
   ========================================================================== */

@media (max-width: 767px) {

    .e-n-accordion-item-title-text {
        font-size:   16px !important;
        line-height: 1.4 !important;
    }

    .elementor-accordion-title {
        font-size:   16px !important;
        line-height: 1.4 !important;
    }

    :where(.elementor-widget-n-accordion .e-n-accordion > .e-n-accordion-item) > .e-con {
        --padding-right: 15px !important;
        --padding-left:  15px !important;
    }

    .e-n-accordion-item-title {
        padding: 10px 15px !important;
    }
}


/* ==========================================================================
   13. ICON-BOX WIDGETS
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-icon-box-wrapper .elementor-icon {
        font-size: 36px !important;
    }

    .elementor-icon-box-description {
        font-size: 15px !important;
    }

    .elementor-icon-box-title {
        font-size: 15px !important;
    }

    .elementor-icon-box-wrapper {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }
}


/* ==========================================================================
   14. FORMS
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-field-group {
        flex-direction: column !important;
    }

    .elementor-field-group input[type="text"],
    .elementor-field-group input[type="email"],
    .elementor-field-group input[type="tel"],
    .elementor-field-group input[type="number"],
    .elementor-field-group input[type="url"],
    .elementor-field-group input[type="password"],
    .elementor-field-group textarea,
    .elementor-field-group select,
    .elementor-form .elementor-field {
        width:      100% !important;
        max-width:  100% !important;
        font-size:  16px !important;
        box-sizing: border-box;
    }

    .elementor-field-group.elementor-col-50,
    .elementor-field-group.elementor-col-33,
    .elementor-field-group.elementor-col-25 {
        width: 100% !important;
    }

    .elementor-field-type-submit .elementor-button {
        width: 100% !important;
    }
}


/* ==========================================================================
   15. TABLES
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-widget table,
    .entry-content table,
    .elementor-text-editor table {
        display:    block !important;
        overflow-x: auto !important;
        max-width:  100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .elementor-widget table td,
    .elementor-widget table th,
    .entry-content table td,
    .entry-content table th {
        min-width:  90px;
        word-break: break-word;
    }
}


/* ==========================================================================
   16. HADIMAN THEME-SPECIFIC COMPONENTS
   ========================================================================== */

@media (max-width: 767px) {

    /* Listing / service / job cards */
    .service-item,
    .job-item,
    .freelancer-item,
    .listing-item {
        width:         100% !important;
        margin-bottom: 20px;
    }

    /* Bootstrap grid overrides for listing grids */
    .listings-grid .col-sm-6,
    .listings-grid .col-md-6,
    .listings-grid .col-lg-4,
    .listings-grid .col-lg-3 {
        width:     100% !important;
        max-width: 100% !important;
        flex:      0 0 100% !important;
    }

    /* Dashboard sidebar */
    .inner-dashboard .sidebar {
        width:    100% !important;
        position: relative !important;
        height:   auto !important;
        top:      0 !important;
    }

    .mobile-groups-button {
        padding: 12px 0;
    }

    .widget-listing-search-form .form-control {
        font-size: 15px;
    }

    /* Fixed bottom mobile bar clearance */
    body:has(.apus-footer-mobile) {
        padding-bottom: 65px;
    }

    /* Logo in Elementor header template */
    .elementor-widget-theme-site-logo img,
    .elementor-widget-image .logo-theme img {
        max-width: 130px !important;
        height:    auto !important;
    }

    .post-list-item-v3 .top-image {
        width: 90px;
    }
}

@media (max-width: 991px) {

    #mobile-offcanvas-sidebar {
        width: 280px;
    }

    .widget-listing-search-form.horizontal .form-group-location {
        flex-wrap: wrap;
    }

    .widget-listing-search-form.horizontal .form-group-location > div ~ div {
        margin-top: 12px;
    }

    .widget-listing-search-form.horizontal .form-group-min_rate,
    .widget-listing-search-form.horizontal .form-group-distance {
        margin: 12px 0;
    }
}


/* ==========================================================================
   17. WOOCOMMERCE MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width:  100% !important;
        margin: 0 0 20px !important;
        float:  none !important;
    }

    .woocommerce .woocommerce-ordering,
    .woocommerce-page .woocommerce-ordering {
        width:         100%;
        margin-bottom: 10px;
    }

    .woocommerce-page table.cart td.actions .coupon .input-text {
        width: 100% !important;
    }

    .woocommerce form .woocommerce-billing-fields
        .woocommerce-billing-fields__field-wrapper > * > * {
        width:  100% !important;
        margin: 0 0 8px !important;
    }
}


/* ==========================================================================
   18. VERY SMALL SCREENS (<=479 px)
   ========================================================================== */

@media (max-width: 479px) {

    .elementor-heading-title {
        font-size:   clamp(16px, 5vw, 22px) !important;
        line-height: 1.3 !important;
    }

    .elementor-section-wrap > .elementor-section,
    .elementor-section-wrap > .e-con,
    body > .e-con {
        padding-left:  12px !important;
        padding-right: 12px !important;
    }

    .elementor-top-section {
        padding-top:    min(var(--padding-top, 25px), 30px) !important;
        padding-bottom: min(var(--padding-bottom, 25px), 30px) !important;
    }

    .e-n-accordion-item-title {
        padding: 8px 12px !important;
    }

    .elementor-icon-box-wrapper {
        gap: 10px;
    }
}