/*
 * Phone / tablet fixes. Loaded by header.php after css/style.css, so it
 * only overrides what breaks on small screens; desktop is unchanged.
 */

/* Logo + title shown in the navbar on small screens (the desktop top bar
   with both logos is hidden below 992px). */
.mobile-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: calc(100% - 64px);
    text-decoration: none;
}
.mobile-brand img {
    height: 44px;
    width: auto;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
}
.mobile-brand span {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;
}

@media (max-width: 991.98px) {
    /* Logo/title and menu button on one row. */
    nav.navbar {
        flex-direction: row !important; /* the template stacks them in a column */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    nav.navbar .mobile-brand {
        flex: 1 1 auto;
        margin-right: .5rem;
    }
    nav.navbar .navbar-collapse {
        flex-basis: 100%;
    }

    /* Bootstrap's g-5 / gx-5 gutters (3rem) are wider than the container's
       side padding on phones, which pushed content past the screen edges
       (cards and text cut off on the left and right). */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
    .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }

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

    /* Mobile menu: full-width links with clear tap targets. */
    .navbar .navbar-nav .nav-link {
        padding: .6rem 0;
    }
    .navbar .dropdown-menu {
        position: static;
        float: none;
        border: 0;
        box-shadow: none;
        margin: 0 0 .5rem;
    }
    .navbar-dark .navbar-nav .dropdown .dropdown-menu a.nav-link {
        font-size: 14px;
    }

    /* Page title banners ("About Us", "Login", ...). */
    .display-1 {
        font-size: calc(1.8rem + 2.5vw);
    }
    .bg-hero .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Home: "Detailed Description" / "Nature & symptoms" boxes have an inline
       fixed height of 300px, so their text overflowed and overlapped. */
    .banner .bg-vegetable,
    .banner .bg-fruit {
        height: auto !important;
        min-height: 260px;
        padding: 2rem 1.5rem !important;
    }

    /* Home carousel captions are sized for desktop. */
    .carousel-caption h1 {
        font-size: 1.6rem;
    }
    .carousel-caption h3 {
        font-size: 1rem;
    }
    .carousel-caption .text-start {
        padding: 1rem !important;
    }

    /* Footer */
    .bg-footer .bg-secondary {
        padding: 2rem 1.5rem !important;
    }

    /* Long tables (forecast results, data tables) scroll inside themselves
       rather than widening the whole page. */
    .dataTables_wrapper,
    .well,
    .table-responsive-sm {
        overflow-x: auto;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .p-5 {
        padding: 1.5rem !important;
    }
    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    h1, .h1 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.3rem; }
    /* Login / register cards */
    .login form,
    .auth-form form {
        padding: 1.25rem;
    }
}