/* =========================================================
   PAKCOMMS MOBILE APPLICATION
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent controls from feeling cramped on phones */
button,
.btn,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

/* ---------------------------------------------------------
   MOBILE NAVBAR
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .worldlink-navbar {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .worldlink-navbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo {
        width: 46px;
        height: 46px;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-subtitle {
        font-size: 0.65rem;
    }

    .navbar-toggler {
        padding: 7px 9px;
        border-radius: 8px;
    }

    .navbar-nav .nav-link {
        margin-left: 0;
        padding: 12px 10px !important;
    }

    .navbar-collapse {
        margin-top: 8px;
    }
}

/* ---------------------------------------------------------
   GENERAL MOBILE LAYOUT
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    main {
        width: 100%;
        overflow-x: hidden;
    }

    .card {
        border-radius: 12px;
    }

    .card-body {
        padding: 1rem;
    }

    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }

    .btn-lg {
        min-height: 48px;
    }

    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 16px;
    }

    textarea.form-control {
        min-height: 140px;
    }

    /* Tables should scroll rather than destroy the layout */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Images */
    .card-img-top {
        height: auto;
        max-height: 220px;
    }

    /* Footer */
    .footer {
        margin-top: 30px;
        padding-bottom: 25px;
        font-size: 0.8rem;
    }

}