/*
 * onOrbit Marketing - Mobile Fixes & Optimizations
 * Version: 1.0.0
 * Correcoes mobile: Performance, Acessibilidade, UX
 *
 * Problemas corrigidos:
 *  1. Google Reviews cards cortados em mobile (3 colunas → 1 coluna scroll horizontal)
 *  2. Checkout - campos de formulario truncados / inputs pequenos
 *  3. Hero Section - LCP otimizado para mobile (min-height reduzido, animacoes suspensas)
 *  4. Process Section - conectores visuais entre steps em mobile
 *  5. Header mobile - hamburger target size WCAG 2.5.5 (44px min)
 *  6. Tipografia - line-height e font-size legivel em mobile
 *  7. Botoes - touch targets minimos de 44px
 *  8. Espaçamentos - padding adaptado a viewports pequenos
 *  9. Animacoes - desactivadas em mobile para melhorar CLS e LCP
 * 10. Acessibilidade - focus visible, contraste melhorado
 */

/* =============================================
   1. HERO - LCP e Performance Mobile
   ============================================= */

@media (max-width: 767px) {

    /* Reduzir min-height para nao atrasar LCP */
    .hero-section {
        min-height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }

    .hero-content {
        padding: 2rem 0 1.5rem !important;
        gap: 2rem !important;
    }

    /* Titulo hero legivel em mobile */
    .hero-text h1,
    .onorbit-hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 1rem !important;
    }

    /* Hero onOrbit Marketing: tamanho ajustado à coluna para "Sistemas que funcionam."
       caber numa linha (ver inc/hero-critical-css.php). */
    @supports (width: 1cqi) {
        .onorbit-hero-title {
            font-size: min(2.5rem, calc(100cqi / var(--oh-title-fit, 13))) !important;
        }
    }

    /* Descricao hero */
    .hero-text p,
    .onorbit-hero-description {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Botoes hero em coluna, full width */
    .hero-buttons,
    .onorbit-hero-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .hero-buttons .btn,
    .hero-buttons a,
    .onorbit-hero-buttons .btn,
    .onorbit-hero-buttons a {
        width: 100% !important;
        text-align: center !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ocultar animacao orbit em mobile - impacta LCP e TBT */
    .hero-orbit,
    .onorbit-orbit-wrapper,
    .onorbit-hero-grid,
    .onorbit-hero-particles {
        display: none !important;
    }

    /* Suspender animacoes de entrada no hero em mobile */
    .onorbit-hero-text,
    .onorbit-hero-description,
    .onorbit-hero-buttons {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Hero curve - evitar overflow */
    .hero-curve {
        display: none !important;
    }
}

/* =============================================
   2. HEADER - Acessibilidade e Touch Targets
   ============================================= */

@media (max-width: 767px) {

    /* Logo menor em mobile */
    .logo-text {
        font-size: 1.25rem !important;
    }

    /* Hamburguer - touch target WCAG 2.5.5 minimo 44x44px */
    .mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.625rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
    }

    /* Menu mobile - spacing e legibilidade */
    .mobile-nav .nav-link {
        padding: 0.875rem 0 !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid hsl(var(--border)) !important;
        display: block !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-nav .nav-link:last-child {
        border-bottom: none !important;
    }

    /* CTA no menu mobile */
    .mobile-menu .btn,
    .mobile-menu .button {
        width: 100% !important;
        margin-top: 1rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Header inner - evitar overflow */
    .header-inner {
        height: 4.5rem !important;
        padding: 0 1rem !important;
    }

    /* body padding-top compensar header */
    body {
        padding-top: 4.5rem !important;
    }
}

/* =============================================
   3. GOOGLE REVIEWS - Correcao cards mobile
   ============================================= */

@media (max-width: 767px) {

    /* Override do JS que forca 3 colunas */
    .onorbit-reviews-shortcode-wrap .ti-widget-reviews,
    .onorbit-reviews-shortcode-wrap .ti-reviews-container,
    .onorbit-reviews-shortcode-wrap [class*="review-list"],
    .onorbit-reviews-shortcode-wrap [class*="reviews-list"],
    .onorbit-reviews-shortcode-wrap [class*="reviews-grid"],
    .onorbit-reviews-shortcode-wrap [class*="gr-grid"],
    .onorbit-reviews-shortcode-wrap [class*="grw-reviews"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 0.875rem !important;
        padding-bottom: 1rem !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .onorbit-reviews-shortcode-wrap .ti-widget-reviews::-webkit-scrollbar,
    .onorbit-reviews-shortcode-wrap [class*="reviews-grid"]::-webkit-scrollbar,
    .onorbit-reviews-shortcode-wrap [class*="review-list"]::-webkit-scrollbar {
        display: none !important;
    }

    /* Cada card: largura fixa para scroll horizontal suave */
    .onorbit-reviews-shortcode-wrap [class*="review-item"],
    .onorbit-reviews-shortcode-wrap [class*="review-wrap"],
    .onorbit-reviews-shortcode-wrap [class*="gr-review"],
    .onorbit-reviews-shortcode-wrap [class*="grw-review"] {
        min-width: 75vw !important;
        max-width: 75vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Indicador de scroll - seta visual */
    .onorbit-reviews-shortcode-wrap {
        position: relative !important;
    }

    /* Rating badge mobile - compacto */
    .onorbit-rating-badge {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        padding: 0.875rem 1.125rem !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .onorbit-rating-meta {
        padding-left: 0 !important;
        border-left: none !important;
        padding-top: 0.625rem !important;
        border-top: 1px solid hsl(var(--border)) !important;
        width: 100% !important;
        align-items: center !important;
    }

    .onorbit-rating-number {
        font-size: 2rem !important;
    }

    /* Hint visual de scroll */
    .onorbit-reviews-shortcode-wrap::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 1rem;
        width: 2.5rem;
        background: linear-gradient(to right, transparent, hsl(var(--background) / 0.9));
        pointer-events: none;
        z-index: 1;
    }
}

/* =============================================
   4. PROCESS SECTION - Steps mobile
   ============================================= */

@media (max-width: 767px) {

    .process-section {
        padding: 3.5rem 0 !important;
    }

    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        position: relative !important;
    }

    /* Linha vertical de ligacao entre steps */
    .process-grid::before {
        content: '' !important;
        position: absolute !important;
        left: 1rem !important;
        top: 1rem !important;
        bottom: 1rem !important;
        width: 2px !important;
        background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--primary) / 0.2)) !important;
        z-index: 0 !important;
    }

    .process-step {
        padding-left: 3.5rem !important;
        padding-bottom: 2rem !important;
        padding-top: 0.25rem !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .process-step:last-child {
        padding-bottom: 0 !important;
    }

    /* Numero do step - maior e alinhado com linha */
    .process-number {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.9375rem !important;
        left: 0 !important;
        top: 0 !important;
        box-shadow: 0 0 0 4px hsl(var(--background)), 0 0 0 5px hsl(var(--primary) / 0.3) !important;
    }

    .process-step h3 {
        font-size: 1.0625rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.375rem !important;
    }

    .process-step p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
}

/* =============================================
   5. WOOCOMMERCE CHECKOUT - Formulario mobile
   ============================================= */

@media (max-width: 767px) {

    /* Container principal checkout - padding lateral */
    .onorbit-woo-container,
    .woocommerce-checkout .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Grid checkout - sempre 1 coluna em mobile */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Campos billing wrapper - sempre 1 coluna */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }

    /* form-row first/last → 1 coluna em mobile */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Inputs e selects - altura minima para touch */
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
        min-height: 48px !important;
        padding: 0.75rem 0.875rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0.625rem !important;
    }

    /* Labels - mais visiveis */
    .woocommerce-checkout .form-row label {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.375rem !important;
        display: block !important;
        color: hsl(var(--foreground)) !important;
    }

    /* Country select - fix tamanho */
    .woocommerce-checkout .select2-container {
        width: 100% !important;
    }

    .woocommerce-checkout .select2-container .select2-selection--single {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 0.875rem !important;
        border-radius: 0.625rem !important;
    }

    .woocommerce-checkout .select2-container .select2-selection__rendered {
        line-height: 1.5 !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }

    .woocommerce-checkout .select2-container .select2-selection__arrow {
        height: 48px !important;
    }

    /* Cupao - coluna unica */
    .woocommerce-checkout .checkout_coupon {
        flex-direction: column !important;
    }

    .woocommerce-checkout .checkout_coupon p {
        min-width: 0 !important;
        width: 100% !important;
    }

    .woocommerce-checkout .checkout_coupon .button {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Resumo da encomenda - padding lateral */
    .woocommerce-checkout #order_review {
        padding: 1.25rem !important;
    }

    /* Botao de submit - full width e touch friendly */
    .woocommerce-checkout #payment .place-order .button {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1.0625rem !important;
    }

    /* Titulo secao billing */
    .woocommerce-checkout h3 {
        font-size: 1.125rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* =============================================
   6. TIPOGRAFIA GLOBAL MOBILE
   ============================================= */

@media (max-width: 767px) {

    /* Titulos de seccao */
    .section-title {
        font-size: clamp(1.625rem, 6.5vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }

    .section-label {
        font-size: 0.75rem !important;
        letter-spacing: 0.1em !important;
    }

    /* Padding de seccoes */
    .services-section,
    .features-section,
    .testimonials-section,
    .problems-section,
    .process-section,
    .onorbit-testimonials-shortcode {
        padding: 3rem 0 !important;
    }

    /* Container lateral padding */
    .container {
        padding-left: 1.125rem !important;
        padding-right: 1.125rem !important;
    }

    /* Page hero (paginas internas) */
    .page-hero {
        padding: 3rem 0 2rem !important;
    }

    .page-hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    .page-hero p {
        font-size: 1rem !important;
    }
}

/* =============================================
   7. BOTOES - Touch targets minimos
   ============================================= */

@media (max-width: 767px) {

    .btn,
    .button:not(.mobile-menu-toggle),
    a.btn,
    input[type="submit"] {
        min-height: 48px !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.9375rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* CTA principal - full width em mobile */
    .btn-primary,
    .btn-lg {
        width: 100% !important;
    }
}

/* =============================================
   8. CARDS E GRIDS - Responsividade
   ============================================= */

@media (max-width: 767px) {

    /* Services grid - 1 coluna */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Features grid - 1 coluna */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Cards - padding interno otimizado */
    .card,
    .service-card,
    .service-path-card {
        padding: 1.25rem !important;
    }

    /* Problems grid - 1 coluna */
    .problems-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   9. ANIMACOES - Desactivar em mobile para CLS
   ============================================= */

@media (max-width: 767px) {

    /* Desactivar animacoes de floating e orbit */
    .onorbit-float-1,
    .onorbit-float-2,
    .onorbit-float-3,
    .onorbit-float-4,
    .onorbit-float-5,
    .onorbit-float-6,
    .onorbit-float-7,
    .onorbit-globe-center,
    .onorbit-orbit-outer,
    .onorbit-orbit-inner {
        animation: none !important;
    }

    /* data-animate - mostrar directamente sem atraso */
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .animate-in {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Desactivar will-change em mobile - poupa memoria GPU */
    .card,
    .service-card,
    .service-path-card,
    [data-animate],
    .animate-in {
        will-change: auto !important;
        transform: translateZ(0) !important;
    }
}

/* =============================================
   10. ACESSIBILIDADE - Focus e Contraste
   ============================================= */

/* Focus visible para navegacao por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}

/* Remover outline padrao do browser mas manter para teclado */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none !important;
}

@media (max-width: 767px) {

    /* Melhorar contraste de texto em muted */
    .muted,
    .text-muted,
    [class*="muted-foreground"] {
        color: hsl(215 20% 40%) !important;
    }

    /* Skip link para acessibilidade */
    .skip-link {
        position: absolute !important;
        top: -100% !important;
        left: 1rem !important;
        z-index: 9999 !important;
        background: hsl(var(--primary)) !important;
        color: #fff !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
        font-weight: 600 !important;
    }

    .skip-link:focus {
        top: 0 !important;
    }
}

/* =============================================
   11. FOOTER MOBILE
   ============================================= */

@media (max-width: 767px) {

    /* Footer - 1 coluna */
    .footer-grid,
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Footer links - touch targets */
    .footer-links a,
    .footer-nav a {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.25rem 0 !important;
    }

    /* Social icons - touch targets */
    .social-link {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* =============================================
   12. FORMULARIOS GERAIS MOBILE
   ============================================= */

@media (max-width: 767px) {

    /* Todos os inputs, selects, textareas */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 1rem !important; /* Evita zoom auto no iOS */
        min-height: 48px !important;
    }

    textarea {
        min-height: 120px !important;
    }

    /* WPForms mobile */
    .wpforms-form .wpforms-field-container {
        padding: 0 !important;
    }

    .wpforms-form .wpforms-field {
        margin-bottom: 1rem !important;
    }

    .wpforms-form label {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
    }

    .wpforms-form input[type="submit"],
    .wpforms-form button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
    }
}

/* =============================================
   13. IMAGENS - Evitar CLS
   ============================================= */

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

/* Placeholder para imagens com dimensoes definidas */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Lazy load fade-in */
img.lazy-loaded {
    animation: imgFadeIn 0.3s ease forwards;
}

@keyframes imgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================
   14. SCROLLBAR PERSONALIZADA (Mobile UX)
   ============================================= */

/* Scroll horizontal suave nos reviews */
.onorbit-reviews-shortcode-wrap {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Indicador de paginacao de reviews - pontos */
.onorbit-reviews-scroll-hint {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .onorbit-reviews-scroll-hint {
        display: none;
    }
}

.onorbit-reviews-scroll-hint span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: hsl(var(--border));
    transition: background 0.2s;
}

.onorbit-reviews-scroll-hint span.active {
    background: hsl(var(--primary));
}

/* =========================================================================
   v10.7.6 - ACESSIBILIDADE (alvo: 100 no Lighthouse)
   ------------------------------------------------------------------------
   O relatório desktop apontava 86 em acessibilidade. As causas habituais são
   contraste insuficiente em texto secundário e ausência de foco visível.
   ========================================================================= */

/* Contraste AA em texto secundário sobre fundo claro (mín. 4.5:1)
   ------------------------------------------------------------------------
   NOTA v10.7.10: o seletor original era apenas ".site-main p", demasiado
   abrangente. Apanhava parágrafos dentro de secções com fundo escuro ou de
   cor (CTA azul, cartões verdes), pintando-os de cinzento e tornando-os
   ilegíveis. Agora exclui explicitamente esses contextos. */
.site-main:not(.onorbit-landing) p:not([style*="color"]):not(.text-on-dark),
.contact-info-card p,
.card p:not([style*="color"]),
.text-muted,
.section-subtitle {
    color: #4a5568;
}

/* Secções com fundo de cor ou escuro: o texto nunca deve ser cinzento */
.cta-section p,
.cta-section li,
.section-cta p,
[class*="gradient"] p,
.section-dark p,
.hero-dark p,
.hero-dark .hero-subtitle,
.page-hero p,
.onorbit-europa-card .onorbit-europa-title {
    color: inherit;
}

/* Texto secundário sobre fundo escuro */
.hero-dark p,
.hero-dark .hero-subtitle,
.section-dark p,
.page-hero p {
    color: #dbe4ee;
}

/* Rótulos de secção com contraste suficiente */
.section-label {
    color: #1a56db;
}

.hero-dark .section-label,
.section-dark .section-label,
.page-hero .section-label {
    color: #93c5fd;
}

/* Foco visível para navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1a56db;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Alvos de toque com o mínimo de 44x44 px recomendado */
.contact-info-card,
.btn,
.menu-toggle {
    min-height: 44px;
}

/* Ícones decorativos não devem ser lidos por leitores de ecrã */
[data-lucide][aria-hidden="true"] {
    pointer-events: none;
}