/* Explain: Mobile usability layer: larger tap targets, better spacing, text wrapping, and stacked elements. */
/* =============================================================
   Knowledge School — MOBILE OPTIMISATION
   Toda esta camada vive dentro de media queries de largura máxima,
   por isso a versão DESKTOP (>= 768px) permanece exactamente igual.
   Larguras testadas: 320 / 360 / 375 / 390 / 414 / 430 px.
   ============================================================= */

@media (max-width: 767px) {

    /* ---------- 1. Base — sem scroll horizontal ---------- */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Espaço para o botão flutuante do WhatsApp e para a barra
       inferior do sistema (área segura do iPhone). */
    body {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    iframe {
        width: 100%;
    }

    /* Valores longos (emails, IBANs, montantes, códigos) quebram em vez
       de empurrar o layout para fora do ecrã. */
    h1, h2, h3, h4, p, li, dt, dd, a, span, strong {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ---------- 2. Contentor e ritmo vertical ---------- */
    .ks-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ks-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Espaços entre blocos ligeiramente mais curtos no telemóvel. */
    .ks-section .mt-10 { margin-top: 2rem; }
    .ks-section .mt-12 { margin-top: 2.25rem; }

    /* ---------- 3. Cabeçalho e navegação ---------- */
    .ks-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .ks-header nav {
        padding-top: .55rem;
        padding-bottom: .55rem;
        gap: .75rem;
    }

    .ks-header img {
        max-height: 2.25rem;
        width: auto;
    }

    /* Menu móvel: lista deslizável e itens com área de toque confortável. */
    #ksMobileNav ul {
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #ksMobileNav a {
        min-height: 48px;
        font-size: 1rem;
    }

    /* Dropdowns nunca ultrapassam os limites do ecrã. */
    .dropdown {
        position: relative;
    }

    .dropdown-content {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 2rem);
        left: 0;
        right: auto;
    }

    /* ---------- 4. Tipografia ---------- */
    .eyebrow {
        font-size: .68rem;
        letter-spacing: .16em;
    }

    .ks-section h2 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .ks-section h3 {
        font-size: 1.12rem;
    }

    /* ---------- 5. Botões e acções ---------- */
    .btn-ks {
        min-height: 48px;
        padding: .85rem 1.35rem;
        max-width: 100%;
        white-space: normal;
    }

    /* Ações empilhadas ocupam toda a largura (sem serem cortadas). */
    .signup-nav .btn-ks,
    .wiz-nav .btn-ks {
        width: 100%;
        justify-content: center;
    }

    /* ---------- 6. Cartões ---------- */
    .ks-card {
        border-radius: var(--radius-md);
    }

    /* ---------- 7. Widgets flutuantes + áreas seguras ---------- */
    .ks-whatsapp {
        right: calc(.85rem + env(safe-area-inset-right, 0px));
        bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }

    /* ---------- 8. Formulários ---------- */
    .ks-input,
    .ks-file,
    input,
    select,
    textarea {
        font-size: 16px; /* evita o zoom automático do iOS ao focar */
    }

    .ks-input,
    .ks-file {
        min-height: 48px;
    }

    /* ---------- 9. Zonas de scroll horizontal ---------- */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Ecrãs muito estreitos (320 – 400px) ---------- */
@media (max-width: 400px) {
    .ks-shell {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .ks-section h2 {
        font-size: 1.4rem;
    }

    .btn-ks {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        font-size: .92rem;
    }
}