/*
 * TargetPath Solutions - Mobile Enhancements
 * Overrides and improvements for mobile responsiveness
 */

/* =====================================================
   MOBILE BASE: Touch & Viewport
   ===================================================== */
@media screen and (max-width: 991px) {
    html {
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Better touch targets */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }

    /* Remove hover effects on touch */
    *:hover {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =====================================================
   NAVIGATION MOBILE
   ===================================================== */
@media screen and (max-width: 991px) {
    .navbar {
        /* Remove fixed background-color to allow animations.js to handle it */
        padding: 12px 0 !important;
    }

    .navbar .brand {
        order: 1;
    }

    .navbar .custom-menu-toggle {
        order: 3;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        transition: background 0.3s ease;
        margin-left: 10px;
        display: block !important; /* Ensure it's visible */
    }

    .navbar .custom-menu-toggle:active {
        background: rgba(255, 255, 255, 0.15);
    }

    .navbar .custom-menu-toggle img {
        height: 20px;
        width: auto;
    }

    /* Hide desktop-only elements */
    .search-shop-con-2 {
        display: none !important;
    }

    /* Nav login wrapper */
    .nav-login-wrapper {
        display: none !important;
    }

    /* Move CheckMyCV to its own row or hide in header if needed, 
       but for now we keep it and make sure it doesn't break layout */
    .nav-link-2.check-cv {
        display: none !important; /* Hide in top bar, it's in the mobile menu */
    }
}

/* =====================================================
   HERO / BANNER SECTIONS
   ===================================================== */
@media screen and (max-width: 767px) {
    .section.bammer-home {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
        min-height: auto;
    }

    .home-1-title-banner {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .content-banner-home-1 p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .banner-home {
        height: auto !important;
        max-height: 250px !important;
        margin-top: 20px !important;
        border-radius: 16px;
        object-fit: cover;
    }

    .banner-content-wrapper {
        flex-direction: column !important;
        gap: 20px;
    }

    .content-banner-home-1 {
        width: 100% !important;
    }

    .img-2-banner,
    .img-2-banner.home-1 {
        display: none !important;
    }

    .cicrle-banner {
        display: none !important;
    }

    /* Subtitle line */
    .subtitle-line {
        width: 30px !important;
        height: 2px !important;
    }

    .title-small {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}

@media screen and (max-width: 479px) {
    .home-1-title-banner {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    .section.bammer-home {
        padding-top: 90px !important;
    }
}

/* =====================================================
   ABOUT SECTION MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .about-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .left-content,
    .left-content.left-tablet {
        width: 100% !important;
    }

    .right-content-wrapper {
        width: 100% !important;
    }

    .woman {
        height: auto !important;
        max-height: 300px !important;
        border-radius: 16px;
        margin-top: 15px;
        width: 100%;
        object-fit: cover;
    }

    .numbers-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .numbers {
        font-size: 36px !important;
        margin-bottom: 4px !important;
    }

    .about-numbers {
        font-size: 13px !important;
        color: #64748b !important;
    }

    .button-wrapper-section {
        margin-top: 20px;
    }
}

@media screen and (max-width: 479px) {
    .numbers {
        font-size: 30px !important;
    }
}

/* =====================================================
   SERVICES / CARDS MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .collection-list-wrapper-service .w-dyn-items {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .collection-item-services {
        border-radius: 16px !important;
        overflow: hidden;
    }

    .arrow-services {
        padding: 20px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .service-name {
        font-size: 20px !important;
    }

    .services {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .services-arrow {
        margin-top: 8px;
        align-self: flex-end;
    }

    .light-with-img-bottom {
        padding-bottom: 50px !important;
    }
}

/* =====================================================
   BLOG CARDS MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .collection-list-wrapper-blog-home .w-dyn-items {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .collection-item-blog-home {
        border-radius: 16px !important;
        overflow: hidden;
    }

    .blog-img {
        border-radius: 16px 16px 0 0 !important;
        height: 200px !important;
        object-fit: cover;
        width: 100%;
    }

    .content-blog {
        padding: 16px !important;
    }

    .content-blog > div {
        font-size: 13px !important;
        color: #94a3b8 !important;
        margin-bottom: 8px;
    }

    .h4-link {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}

/* =====================================================
   FORMS MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .form-wrapper-home {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .left-content,
    .form-block-home {
        width: 100% !important;
    }

    .field-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .text-field-form,
    .textarea-form {
        font-size: 16px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        min-height: 48px !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .text-field-form:focus,
    .textarea-form:focus {
        border-color: #f15a24 !important;
        box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.1) !important;
        outline: none;
    }

    .textarea-form {
        min-height: 120px !important;
        resize: vertical;
    }

    .primary-button {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        margin-top: 10px;
    }

    /* Contact page form */
    .form-block-contact-us {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .text-field-home.contact {
        font-size: 16px !important;
        padding: 14px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
    }

    .textarea-get-in-touch-2 {
        font-size: 16px !important;
        padding: 14px !important;
        min-height: 120px !important;
        border-radius: 10px !important;
    }

    .appointment-wrapper.contact {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* =====================================================
   BUTTONS MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .button-primary-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 28px !important;
        border-radius: 12px !important;
        min-height: 48px !important;
        font-weight: 600 !important;
        transition: transform 0.2s ease;
    }

    .button-primary-link:active {
        transform: scale(0.97);
    }

    .arrow-button {
        height: 14px !important;
        width: auto !important;
    }
}

/* =====================================================
   FOOTER MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    footer > div > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
    }

    footer h4 {
        margin-bottom: 16px !important;
        font-size: 18px !important;
    }

    footer ul li {
        padding: 6px 0;
    }

    footer ul li a {
        font-size: 15px !important;
    }

    footer form input[type="email"] {
        font-size: 16px !important;
        padding: 14px !important;
        border-radius: 10px !important;
    }

    footer form button {
        padding: 0 20px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    footer > div > div:last-child {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }

    footer .brand img {
        width: 140px !important;
    }

    footer p {
        font-size: 14px !important;
    }
}

/* =====================================================
   SECTION SPACING MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section.about-section {
        padding-bottom: 40px !important;
    }

    .section.img-background {
        padding-bottom: 40px !important;
    }

    /* Video placeholder */
    .video-background {
        height: 200px !important;
        margin-top: 20px;
        border-radius: 16px;
        overflow: hidden;
    }

    .play-button {
        width: 60px !important;
        height: 60px !important;
    }

    /* Title central */
    .title-central-wrap {
        width: 100% !important;
    }

    .title-central-wrap p {
        font-size: 15px !important;
    }

    /* How we work */
    .how-we-work-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .how-we-work-left-wrap,
    .how-we-work-right-wrap {
        width: 100% !important;
    }

    /* Logo carousel */
    .logo-partners-banner {
        padding: 20px 0 !important;
    }

    .logo-1 {
        height: 30px !important;
        width: auto !important;
    }

    /* Testimonials grid */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .testimonials-content {
        width: 100% !important;
    }

    .review-wrapper {
        padding: 20px !important;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        margin-bottom: 16px;
    }

    .review-wrapper.right {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .paragraph-large {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .info-client {
        gap: 12px !important;
    }

    .photo-client {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
    }
}

@media screen and (max-width: 479px) {
    .section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .base-container.w-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =====================================================
   PRICING MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .pricing-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .pricing-card {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .price-amount {
        font-size: 36px !important;
    }

    .pricing-features li {
        font-size: 14px !important;
        padding: 8px 0 !important;
    }
}

/* =====================================================
   CAREER / JOBS MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .collection-item-job {
        padding: 20px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    .job-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .job-location,
    .job-type {
        font-size: 13px !important;
    }

    .job-description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
    }
}

/* =====================================================
   CONTACT PAGE MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .contacts-2-banner {
        padding-top: 120px !important;
        padding-bottom: 30px !important;
    }

    .contacts-2-banner h1 {
        font-size: 32px !important;
    }

    .contacts-2-banner p {
        font-size: 15px !important;
        margin-top: 10px !important;
    }

    .location-wrap {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 20px;
    }

    .location-wrapper,
    .location-wrapper.right-location {
        padding: 0 !important;
        width: 100% !important;
    }

    .location-salon {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .info-contact-link {
        font-size: 14px !important;
    }
}

/* =====================================================
   GRADIENT SECTION MOBILE (contact form at bottom)
   ===================================================== */
@media screen and (max-width: 767px) {
    .section.gradient {
        padding: 40px 0 !important;
    }

    .form-block-contact-us {
        margin-top: 20px;
    }

    .primary-button.w-button {
        width: 100% !important;
    }
}

/* =====================================================
   ABOUT US PAGE MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .about-us-banner {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
    }

    .about-us-banner h1 {
        font-size: 32px !important;
    }

    .about-us-banner p {
        font-size: 15px !important;
    }

    .white-circle-banner.about-banner {
        display: none !important;
    }

    .numbers-circle {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        line-height: 40px !important;
    }

    .how-works-wrapper h3 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .how-works-wrapper p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =====================================================
   SERVICE PAGES MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .services-banner {
        padding-top: 120px !important;
        padding-bottom: 30px !important;
    }

    .services-banner h1 {
        font-size: 32px !important;
    }
}

/* =====================================================
   LOCATION PAGE MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .location-wrapper h3 {
        font-size: 22px !important;
    }

    .location-wrapper p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .about-location-wrap h6 {
        font-size: 13px !important;
        color: #94a3b8 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

/* =====================================================
   BLOG PAGE MOBILE
   ===================================================== */
@media screen and (max-width: 767px) {
    .blog-banner {
        padding-top: 120px !important;
        padding-bottom: 30px !important;
    }

    .blog-banner h1 {
        font-size: 32px !important;
    }

    .collection-item-blog {
        padding: 16px !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* =====================================================
   MISC IMPROVEMENTS
   ===================================================== */
@media screen and (max-width: 767px) {
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better link tap areas */
    a {
        position: relative;
        z-index: 1;
    }

    /* Smooth scrolling for anchor links */
    html {
        scroll-padding-top: 80px;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Better contrast on small screens */
    .text-block,
    .about-numbers {
        color: #64748b !important;
    }
}

@media screen and (max-width: 479px) {
    .section.gradient {
        padding: 30px 0 !important;
    }

    .section.gradient h2 {
        font-size: 22px !important;
    }

    .section.gradient p {
        font-size: 14px !important;
    }

    .form-block-contact-us {
        padding: 20px !important;
    }

    .text-field-home.contact {
        font-size: 16px !important;
        padding: 12px !important;
    }
}