/* ============================================================================
   UI / UX UPGRADE — Tailwind-ready components (Marquee + Interactive CTA)
   Load AFTER main.css. These styles support the Tailwind CDN utilities used
   in the new landing page components and keep the legacy layout stable.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Heading typography safety.
   This app relies on the browser's natural heading hierarchy for size
   (main.css only sets weight/line-height at the element level). Tailwind's
   preflight sets h1-h6 font-size to inherit, which would flatten headings.
   This block, loaded LAST, restores the natural hierarchy. Loaded after
   everything, so it always wins regardless of where the CDN injects styles.
   --------------------------------------------------------------------------- */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   2. Testimonial Marquee (Shadcn-inspired)
   Pure CSS infinite scroll. The track is rendered twice in the markup, so we
   translate by exactly -50% for a seamless, gap-free loop.
   --------------------------------------------------------------------------- */
@keyframes shadcn-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-mask {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: shadcn-marquee 55s linear infinite;
    will-change: transform;
}

/* Pause on hover / focus for readability */
.marquee-mask:hover .marquee-track,
.marquee-mask:focus-within .marquee-track {
    animation-play-state: paused;
}

/* Slow down for reduced motion users instead of killing the charm entirely */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation-duration: 140s;
    }
}

/* ---------------------------------------------------------------------------
   3. Interactive "Let's Work Together" CTA
   --------------------------------------------------------------------------- */
.cta-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-ripple::after {
    content: "";
    position: absolute;
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}
.cta-ripple.rippling::after {
    transform: translate(-50%, -50%) scale(14);
    opacity: 0;
}

/* ---------------------------------------------------------------------------
   4. Accessibility — 16px minimum text & generous touch targets (18–60 users)
   --------------------------------------------------------------------------- */
.nav-links a,
.lang-switcher a,
.mobile-drawer-links a { font-size: 1rem; }

.btn { font-size: 1rem; min-height: 48px; padding: 14px 28px; }
.btn-lg { min-height: 54px; }
.btn-sm { font-size: 0.9375rem; min-height: 44px; padding: 10px 20px; }

.footer-brand p,
.footer-links a,
.footer-contact p,
.footer-bottom { font-size: 1rem; }

.form-label { font-size: 1rem; }
.form-input,
.form-select,
.form-textarea { font-size: 1rem; padding: 14px 16px; }

/* Bump remaining body/caption text to the 16px accessibility minimum */
.service-card p,
.why-card p,
.process-step p,
.review-text,
.review-name,
.contact-detail,
.faq-answer-inner,
.article-card p,
.bank-logos span { font-size: 1rem; }

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
}

/* Comfortable, easy-to-press floating buttons */
.floating-wa,
.floating-btn { min-width: 56px; min-height: 56px; }

/* Allow the CTA label to wrap on very small screens instead of overflowing */
.cta-nowrap-compact { white-space: normal; }

/* ---------------------------------------------------------------------------
   5. Strong, obvious focus visibility
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
    border-radius: 6px;
}