/* Shared mobile improvements — selected pages only.
   Desktop layouts are intentionally unchanged. */

@media screen and (max-width: 640px) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    main,
    section,
    header,
    footer,
    nav,
    article,
    form {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

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

    /* Navigation */
    nav {
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    nav > div {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .nav-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-brand {
        min-width: 0;
        max-width: 100%;
        flex-shrink: 1;
    }

    .brand-text {
        overflow-wrap: anywhere;
    }

    .nav-links {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-item {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Comfortable mobile spacing */
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    section {
        scroll-margin-top: 1rem;
    }

    h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.875rem);
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    p {
        overflow-wrap: anywhere;
    }

    /* Forms and touch targets */
    input,
    select,
    textarea,
    button {
        box-sizing: border-box;
        max-width: 100%;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    textarea {
        min-height: 100px;
    }

    button,
    .action-btn,
    .logout-btn,
    .toggle-password {
        min-height: 44px;
        touch-action: manipulation;
    }

    form input,
    form select,
    form textarea {
        max-width: 100%;
    }

    /* Prevent oversized content from breaking the viewport */
    pre,
    code {
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .overflow-x-auto {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: 100%;
    }

    /* Keep custom content inside the phone width */
    .container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .grid-methods {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .method-card {
        min-width: 0;
        max-width: 100%;
    }

    .address-text {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Support chat */
    .chat-layout,
    .chat-window,
    .chat-body {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .chat-footer {
        box-sizing: border-box;
        max-width: 100%;
        gap: 0.5rem;
    }

    .chat-input {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .msg-incoming,
    .msg-outgoing {
        max-width: 88%;
        overflow-wrap: anywhere;
    }

    /* Avoid excessively wide contact forms on phones */
    #contact-form {
        padding: 1.25rem;
        border-radius: 1.25rem;
    }

    footer {
        overflow-wrap: anywhere;
    }
}
/* Homepage mobile navigation fix */
@media screen and (max-width: 640px) {
    nav > div.max-w-7xl {
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    nav > div.max-w-7xl > a {
        min-width: 0;
        max-width: 100%;
    }

    nav > div.max-w-7xl > a > div {
        font-size: clamp(0.8rem, 3.6vw, 1.1rem);
        letter-spacing: 0.08em;
        overflow-wrap: anywhere;
    }

    nav > div.max-w-7xl > div.hidden.md\:flex {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 0.75rem 1rem;
        align-items: center;
        justify-content: flex-start;
        font-size: 0.875rem;
    }

    nav > div.max-w-7xl > div.hidden.md\:flex > a {
        display: inline-flex;
        min-height: 40px;
        align-items: center;
        justify-content: center;
    }
}