/* ================================================================
   UPTALENT MOBILE-FIRST PREMIUM CSS  v1.0
   Mobile-first responsive enhancements — quality 10/10
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. GLOBAL FOUNDATIONS
   ──────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

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

/* Every section is self-contained — no bleed */
section,
footer,
.ut-hero {
    overflow-x: hidden;
}

/* Remove 300 ms tap delay on all interactive elements */
a,
button,
.btn,
[role="button"],
input[type="submit"],
label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


/* ────────────────────────────────────────────────────────────────
   2. FORMS — prevent iOS Safari auto-zoom on focus
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   3. TOUCH TARGETS — WCAG 2.5.5 minimum 44 × 44 px
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .btn,
    .nav-link,
    .page-link,
    .accordion-title,
    .swiper-button-next-nav,
    .swiper-button-previous-nav {
        min-height: 44px;
    }

    /* Hamburger — easier to hit */
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


/* ────────────────────────────────────────────────────────────────
   4. NAVIGATION — main bar + modern mobile panel
   ──────────────────────────────────────────────────────────────── */

/* ── 4a. Main navbar bar (collapsed/hamburger state) ── */
@media (max-width: 991.98px) {
    /* Two-colour brand on mobile (light/white nav background)
       Inline <style> in header.php already handles this with !important,
       but this reinforces it in case of any cascade issues */
    header .navbar-brand .brand-up    { color: #0c42c2 !important; }
    header .navbar-brand .brand-talent { color: #1a1a1a !important; }

    /* Logo text font size */
    header .navbar-brand .brand-text {
        font-size: 18px !important;
    }

    /* Mobile logo symbol — proportional size */
    .navbar-brand .mobile-logo.brand-logo {
        height: 34px !important;
        width: auto !important;
    }

    /* Tighten brand-logo gap */
    .navbar-brand {
        gap: 6px !important;
        align-items: center;
    }

    /* CTA "Entrar na conta" — respects d-none d-sm-flex (hidden < 576px) */
    /* No override needed — Bootstrap's d-none d-sm-flex is intentional */
}

/* ── 4b. Custom mobile nav drawer (fully independent) ── */

/* CRITICAL: always hidden on desktop — only activated inside the media query */
.ut-mobile-nav {
    display: none;
}

/* Lock scroll when nav is open */
html.ut-nav-open {
    overflow: hidden !important;
}

@media (max-width: 991.98px) {
    /* ── Overlay root ── */
    .ut-mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        visibility: hidden;
        pointer-events: none;
    }

    .ut-mobile-nav.open {
        visibility: visible;
        pointer-events: auto;
    }

    /* ── Backdrop ── */
    .ut-mobile-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(6, 22, 96, 0.52);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        transition: opacity 0.32s ease;
        border: none;
        cursor: pointer;
        padding: 0;
        display: block;
    }

    .ut-mobile-nav.open .ut-mobile-backdrop {
        opacity: 1;
    }

    /* ── Drawer panel ── */
    .ut-mobile-drawer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 78vw;
        max-width: 320px;
        background: linear-gradient(175deg, #061660 0%, #0c42c2 52%, #1553d4 100%);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        box-shadow: -6px 0 36px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }

    .ut-mobile-nav.open .ut-mobile-drawer {
        transform: translateX(0);
    }

    /* ── Drawer header: logo + close button ── */
    .ut-mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
    }

    .ut-mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
    }

    .ut-mobile-brand-logo {
        height: 28px;
        width: auto;
        flex-shrink: 0;
    }

    .ut-mobile-brand-name {
        font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.5px;
        line-height: 1;
    }

    .ut-mobile-brand-name .ut-brand-up     { color: var(--ut-secondary, #ffaa00); }
    .ut-mobile-brand-name .ut-brand-talent { color: #ffffff; }

    .ut-mobile-close {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.20);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.80);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, transform 0.2s;
        touch-action: manipulation;
    }

    .ut-mobile-close:hover  { background: rgba(255,255,255,0.16); color: #fff; }
    .ut-mobile-close:active { transform: scale(0.92); }

    /* ── Nav links area ── */
    .ut-mobile-drawer-nav {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0;
    }

    .ut-mobile-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 22px;
        font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.80);
        text-decoration: none !important;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        text-align: left;
        cursor: pointer;
        line-height: 1.2;
        letter-spacing: -0.1px;
        transition: color 0.14s, background 0.14s;
        box-sizing: border-box;
        -webkit-appearance: none;
    }

    .ut-mobile-link:hover  { color: #ffffff; background: rgba(255,255,255,0.05); }
    .ut-mobile-link.active { color: var(--ut-secondary, #ffaa00); font-weight: 600; }

    /* ── Dropdown ── */
    .ut-mobile-chevron {
        flex-shrink: 0;
        opacity: 0.40;
        transition: transform 0.24s ease, opacity 0.14s;
    }

    .ut-mobile-dropdown-btn[aria-expanded="true"] { border-bottom-color: transparent; }
    .ut-mobile-dropdown-btn[aria-expanded="true"] .ut-mobile-chevron {
        transform: rotate(180deg);
        opacity: 0.80;
    }

    .ut-mobile-sub {
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.16);
        transition: max-height 0.28s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .ut-mobile-sub-link {
        display: block;
        padding: 11px 22px 11px 38px;
        font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none !important;
        transition: color 0.14s;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .ut-mobile-sub-link:hover  { color: rgba(255,255,255,0.88); }
    .ut-mobile-sub-link.active { color: var(--ut-secondary, #ffaa00); }

    /* ── Footer CTA ── */
    .ut-mobile-drawer-footer {
        padding: 18px 22px max(18px, env(safe-area-inset-bottom, 18px));
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        flex-shrink: 0;
    }

    .ut-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 20px;
        background: var(--ut-secondary, #ffaa00);
        color: #1a1a1a !important;
        font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
        font-size: 14px;
        font-weight: 700;
        border-radius: 50px;
        text-decoration: none !important;
        letter-spacing: -0.2px;
        transition: background 0.18s, transform 0.14s;
        touch-action: manipulation;
    }

    .ut-mobile-cta:hover  { background: var(--ut-secondary-dark, #e09500) !important; color: #1a1a1a !important; }
    .ut-mobile-cta:active { transform: scale(0.97); }
}


/* ────────────────────────────────────────────────────────────────
   5. HERO SECTION — full repair
   ──────────────────────────────────────────────────────────────── */

/* Disable heavy particle canvas on mobile — saves battery & CPU */
@media (max-width: 991.98px) {
    #particles-style-01 {
        display: none !important;
    }

    /* outside-box-right/left cause horizontal scroll on mobile */
    .outside-box-right-10,
    .md-outside-box-right-0 {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .outside-box-left-10,
    .md-outside-box-left-0 {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Hero heading — fluid, explicit px to avoid rem base ambiguity */
    .ut-hero .alt-font.fs-45,
    .ut-hero .alt-font.sm-fs-60 {
        font-size: clamp(30px, 5.5vw, 44px) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.5px !important;
    }

    /* Hero sub-heading */
    .ut-hero .fs-18 {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    /* Atropos image — centred and not overflowing */
    .ut-hero .atropos {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 360px;
    }
}

/* Portrait phones ≤ 575 px */
@media (max-width: 575.98px) {
    .ut-hero {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    .ut-hero .alt-font.fs-45,
    .ut-hero .alt-font.sm-fs-60 {
        font-size: clamp(26px, 7.5vw, 32px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.3px !important;
    }

    /* Subtitle — increase visibility from opacity-5 (50%) to 75% on mobile */
    .ut-hero .opacity-5 {
        opacity: 0.78 !important;
    }

    /* Sub-heading at phone size */
    .ut-hero .fs-18 {
        font-size: 15px !important;
    }

    /* Buttons — stacked, full-width */
    .ut-hero .overflow-hidden a.btn {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }

    .ut-hero .overflow-hidden a.btn:last-child {
        margin-bottom: 0 !important;
    }

    /* Hero image column — compact, less gap above */
    .ut-hero .col-xl-6.col-lg-5 {
        padding-top: 20px !important;
    }

    .ut-hero .atropos {
        max-width: 240px;
    }

    /* Reduce bottom margin of subtitle block on phones */
    .ut-hero .mb-30px {
        margin-bottom: 16px !important;
    }

    /* Tighten heading bottom margin */
    .ut-hero .mb-25px {
        margin-bottom: 16px !important;
    }
}

/* Very small phones ≤ 360 px (iPhone SE, older Androids) */
@media (max-width: 360px) {
    .ut-hero .alt-font.fs-45,
    .ut-hero .alt-font.sm-fs-60 {
        font-size: 24px !important;
    }

    .ut-hero .atropos {
        max-width: 200px;
    }
}


/* ────────────────────────────────────────────────────────────────
   6. DECORATIVE / PARALLAX ELEMENTS — prevent overflow
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* left-minus-100px overflows the viewport on narrow screens */
    .position-absolute.left-minus-100px {
        display: none !important;
    }

    /* Parallax decorative images (right-0px floating elements) */
    .position-absolute[data-bottom-top],
    .position-absolute[data-top-bottom] {
        display: none !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   7. THREE PILLARS SECTION — number scaling
   ──────────────────────────────────────────────────────────────── */

/* Tablets */
@media (max-width: 991.98px) {
    .feature-box-icon .alt-font.fs-100 {
        font-size: 4rem !important;
        line-height: 1 !important;
    }

    .feature-box-content.pt-30 {
        padding-top: 48px !important;
    }

    .feature-box-content.md-pt-21 {
        padding-top: 34px !important;
    }
}

/* Phones */
@media (max-width: 575.98px) {
    .feature-box-icon .alt-font.fs-100 {
        font-size: 3rem !important;   /* 48 px */
    }

    /* Full-width stack of all three pillars */
    .row.row-cols-auto.row-cols-sm-2 > .col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        align-self: auto !important;
    }

    /* Remove staggered vertical offsets — they clash when stacked */
    .row.row-cols-auto.row-cols-sm-2 .col.mt-25,
    .row.row-cols-auto.row-cols-sm-2 .col.mt-minus-12 {
        margin-top: 0 !important;
    }

    .row.row-cols-auto.row-cols-sm-2 .col.xs-mt-30px {
        margin-top: 24px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   8. ABOUT / TRANQUIL SECTION
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Image column — contained */
    .bg-tranquil .atropos {
        max-width: 400px;
        margin: 0 auto;
    }

    .bg-tranquil .pe-50px {
        padding-right: 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   9. MARQUEE SECTION — fs-190 would be unreadable on mobile
   ──────────────────────────────────────────────────────────────── */

/* Tablets */
@media (max-width: 991.98px) {
    .swiper-wrapper.marquee-slide .swiper-slide div.fs-190,
    .marquee-slide .fs-190 {
        font-size: 5rem !important;      /* 80 px */
        letter-spacing: -4px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Overlay headline */
    .container-fluid .col-12.position-absolute h4.alt-font {
        font-size: 1.125rem !important;
        line-height: 1.55 !important;
        letter-spacing: -0.5px !important;
        padding: 0 24px;
    }
}

/* Phones */
@media (max-width: 575.98px) {
    .swiper-wrapper.marquee-slide .swiper-slide div.fs-190,
    .marquee-slide .fs-190 {
        font-size: 3rem !important;      /* 48 px */
        letter-spacing: -2px !important;
    }

    .container-fluid .col-12.position-absolute h4.alt-font {
        font-size: 0.9375rem !important;  /* 15 px */
        padding: 0 16px;
    }
}


/* ────────────────────────────────────────────────────────────────
   10. WHY UPTALENT (BLUE GRADIENT) — swiper cards
   ──────────────────────────────────────────────────────────────── */

/* Phones — stack the image and content card vertically */
@media (max-width: 575.98px) {
    .testimonials-style-12 .swiper-slide .row.g-0 {
        display: flex;
        flex-direction: column;
    }

    .testimonials-style-12 .swiper-slide .col-sm-5,
    .testimonials-style-12 .swiper-slide .col-sm-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Image height for portrait stacked layout */
    .testimonials-style-12 .services-box-img {
        height: 200px !important;
    }

    .testimonials-style-12 .services-box-img.xs-h-350px {
        height: 200px !important;
    }
}

/* Swiper nav buttons — bigger touch area on all mobiles */
@media (max-width: 991.98px) {
    .swiper-button-next-nav,
    .swiper-button-previous-nav {
        width: 44px !important;
        height: 44px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   11. SERVICES CARDS — 2 columns on tablet, 1 on phone
   ──────────────────────────────────────────────────────────────── */

/* Tablet (576–991 px): 2-column grid */
@media (min-width: 576px) and (max-width: 991.98px) {
    .row.row-cols-1.row-cols-lg-3.row-cols-md-1 > .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Phone: reduce card padding to keep content comfortable */
@media (max-width: 575.98px) {
    .border-radius-6px.overflow-hidden .p-10 {
        padding: 1.5rem !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   12. BOTTOM CTA — "Procurando talentos? / Siga-nos no LinkedIn"
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Stack the two items vertically and centre them */
    section .row.justify-content-center.mt-5 {
        flex-direction: column;
        align-items: center;
        gap: 20px !important;
    }

    section .row.justify-content-center.mt-5 > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        padding: 0 !important;
    }

    section .row.justify-content-center.mt-5 .feature-box.feature-box-left-icon-middle {
        justify-content: center;
    }

    /* Remove divider border between the two items */
    section .row.justify-content-center.mt-5 > .col-auto:first-child {
        padding-right: 0 !important;
        border-right: none !important;
    }

    section .row.justify-content-center.mt-5 > .col-auto:last-child {
        padding-left: 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   13. FOOTER
   ──────────────────────────────────────────────────────────────── */

/* Footer overlap CTA card */
@media (max-width: 767.98px) {
    footer .container.overlap-section > .row.bg-base-color {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    footer .container.overlap-section h6 {
        margin-right: 0 !important;
        font-size: 1rem !important;
        line-height: 1.5;
        margin-bottom: 0 !important;
    }

    footer .container.overlap-section .col-auto .btn {
        margin: 0 !important;
    }
}

/* Footer columns — single column on phones */
@media (max-width: 575.98px) {
    footer .footer-dark .row.mb-5 .col-sm-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Newsletter input font-size (prevents iOS zoom) */
    footer .newsletter-style-02 input.form-control {
        font-size: 16px !important;
    }

    /* Footer bottom — stacked & centred */
    footer .footer-bottom .col-xl-7,
    footer .footer-bottom .col-xl-5 {
        text-align: center !important;
    }

    footer .footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding-top: 20px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   14. SECTION SPACING — consistent on small phones
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    section.bg-tranquil,
    section#down-section,
    section.bg-gradient-aztec-green,
    section.bg-gradient-tranquil-white {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   15. TYPOGRAPHY — tighten extreme values on mobile
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    h2.ls-minus-3px,
    h3.ls-minus-3px {
        letter-spacing: -1.5px !important;
    }

    /* h5 with ls-minus-3px: -3px collapses word spaces at body sizes */
    h5.ls-minus-3px,
    .ls-minus-3px h5,
    h5.alt-font.ls-minus-3px {
        letter-spacing: -0.5px !important;
    }

    /* Any other element (span, p) with aggressive letter-spacing */
    p.ls-minus-3px,
    span.ls-minus-3px {
        letter-spacing: 0px !important;
    }
}

@media (max-width: 575.98px) {
    h2.alt-font,
    h2.ls-minus-3px,
    h3.ls-minus-3px {
        letter-spacing: -1px !important;
    }

    /* h5 — reset to safe value, never below -0.3px at body sizes */
    h5.ls-minus-3px,
    h5.alt-font.ls-minus-3px,
    h5.alt-font.fw-600 {
        letter-spacing: -0.3px !important;
    }

    /* Fluid heading size for section titles */
    h2.alt-font.fw-600 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* h5 body text — comfortable reading size */
    h5.alt-font.fw-600 {
        font-size: clamp(19px, 5.2vw, 24px) !important;
        line-height: 1.55 !important;
    }

    .ls-minus-2px {
        letter-spacing: -0.3px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   16. SAFE AREA INSETS — notch / Dynamic Island support
   ──────────────────────────────────────────────────────────────── */

@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 991.98px) {
        header nav.navbar {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }

        footer {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
}


/* ────────────────────────────────────────────────────────────────
   17. REDUCED MOTION — respect user preference
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   18. MOBILE NAV VISUAL REFINEMENTS
   ──────────────────────────────────────────────────────────────── */

/* Thicker, clearer hamburger lines */
@media (max-width: 991.98px) {
    .navbar-toggler-line {
        height: 2px !important;
        width: 26px !important;
        margin-bottom: 5px !important;
    }

    .navbar-toggler-line:last-child {
        margin-bottom: 0 !important;
    }

    /* Logo brand text — font size on mobile */
    header .navbar-brand .brand-text {
        font-size: 18px !important;
    }

    /* Mobile logo image — proportional size */
    .navbar-brand .mobile-logo.brand-logo {
        height: 34px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   19. SCROLL PROGRESS — hide on mobile (saves space)
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .scroll-progress {
        display: none !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   20. PREMIUM MICRO-INTERACTIONS — mobile swiper drag hint
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Let users know the carousel is swipeable */
    .swiper {
        cursor: grab;
    }

    .swiper:active {
        cursor: grabbing;
    }
}