/* ==========================================================
   AJUSTES GERAIS DE INTERAÇÃO E VIEWPORT
   Larguras CSS (portrait, device-pixel-ratio habitual ≥ 2):

   Viewport compacta: até 360 px
      Viewport intermediária: até 393 px
   Viewport ampla: até 440 px
      ========================================================== */

/* ──────────────────────────────────────────────────────────
   1. GLOBALS — comportamentos e utilidades para navegadores móveis
   ────────────────────────────────────────────────────────── */

/*
 * 1a. Viewport dinâmico — navegadores móveis colapsa a barra de endereços
 *     ao rolar, o que torna `100vh` maior do que a área visível inicial.
 *     `100dvh` resolve exatamente isso.
 */
@supports (height: 100dvh) {
    .admin-login-main,
    .hero,
    .full-screen-section {
        min-height: 100dvh;
    }
}

/*
 * 1b. Tap highlight — navegadores móveis exibem um flash cinza ao tocar em
 *     elementos. Removemos para um visual mais limpo (o foco via teclado
 *     ainda funciona porque preservamos :focus-visible).
 */
* {
    -webkit-tap-highlight-color: transparent;
}

/*
 * 1c. Gesture navigation — navegadores móveis têm navegação por gestos nas
 *     bordas laterais e inferior. `overscroll-behavior` evita que o
 *     pull-to-refresh do Chrome interfira em menus e carrosséis.
 */
body {
    overscroll-behavior-y: contain;
}

/*
 * 1d. Touch targets mínimos — Material Design recomenda 48 dp.
 *     Aplicamos aos elementos interativos que possam estar abaixo do mínimo.
 */
.menu-toggle,
.catalog-tab,
.nav-link,
.btn,
.buy-btn,
.details-btn,
[data-admin-sidebar-open],
[data-admin-sidebar-close] {
    min-height: 48px;
}

/*
 * 1e. Renderização de texto — navegadores móveis têm renderização de texto distinta
 *     entre sistemas. `-webkit-font-smoothing: subpixel-antialiased` pode
 *     deixar textos muito finos em AMOLED. `auto` é mais seguro.
 */
body {
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

/*
 * 1f. Scroll suave em listas touch.
 */
.admin-sidebar-nav,
.catalog-tabs,
.nav-links {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ──────────────────────────────────────────────────────────
   6. SUPORTE A NOTCH / EDGE-TO-EDGE (Navegadores móveis atuais)
   Alguns navegadores móveis modernos (smartphones atuais) têm notch ou
   punch-hole. Edge-to-edge mode com viewport-fit=cover
   expõe safe-area-inset-* no Chrome.
   ────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    /* Garante que o botão flutuante nunca fica atrás da gesture bar */
    .floating-cart-checkout {
        bottom: max(16px, env(safe-area-inset-bottom));
        right:  max(16px, env(safe-area-inset-right));
    }

    /* Footer não fica cortado pela gesture bar */
    .site-footer {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    /* Navbar não fica atrás do status bar em edge-to-edge */
}

/* ──────────────────────────────────────────────────────────
   7. PREFERÊNCIA: MOVIMENTO REDUZIDO
   Usuários com vestibular disorders ou sensibilidade a
   animações podem ativar "Remove animations" em navegadores móveis.
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ──────────────────────────────────────────────────────────
   8. MODO ESCURO DO SISTEMA
   Sistemas móveis atuais suportam dark mode via
   prefers-color-scheme. Adjusts apenas elementos-chave
   sem alterar a identidade visual da marca.
   ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /*
     * Usamos uma classe .dark-override no <html> para que o dark mode
     * só seja aplicado se desejado no futuro. Por enquanto apenas
     * ajusta o meta theme-color via CSS (o <meta> estático já é verde).
     * Para uma dark UI completa, adicionar class="dark" no <html>.
     */
    :root {
        color-scheme: light; /* força light — o site não tem dark mode completo ainda */
    }
}

/* ──────────────────────────────────────────────────────────
   9. LANDSCAPE EM TELAS COM POUCA ALTURA (altura ≤ 500 px)
   Quando o usuário gira o aparelho, a barra de endereços
   fica sempre visível, reduzindo muito a altura útil.
   ────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    /* Navbar mais fina */
    .navbar { min-height: 52px; padding: 8px 20px; }
    .brand  { width: 110px; height: 52px; }

    /* Header strip oculto em landscape — economiza espaço vertical */
    .header-strip { display: none; }

    /* Hero muito menor em landscape */
    .hero {
        min-height: auto;
        padding: 18px 24px;
        gap: 18px;
    }

    .hero-visual { min-height: 200px; }
    .hero h1     { font-size: clamp(22px, 5vw, 30px); }

    /* Catálogo: 3 colunas em landscape */
    .product-list,
    .ice-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    /* Footer mínimo */
    .site-footer { padding: 24px 20px; }
}