/* ==========================================================================
   CTCSI - site-wide responsive corrections
   --------------------------------------------------------------------------
   Loaded on every public page from resources/views/layouts/app.blade.php.

   These rules live here (and not in resources/css/app.css) on purpose: the
   Vite source and the compiled bundle in public/build have drifted apart, so
   editing the source would have no effect until someone rebuilds. Plain CSS
   in /public is served directly and needs no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header navigation

   The horizontal menu only collapses into the hamburger below 768px. Between
   768px and roughly 900px the full menu is still shown, and with eight items
   it grew wider than the viewport and pushed the whole page sideways.
   Tightening the spacing keeps every link on one row.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-nav {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .main-nav a {
        font-size: 13.5px;
        white-space: nowrap;
    }

    .header-inner {
        gap: 12px;
    }

    .logo-img {
        height: 40px !important;
    }
}

/* Never let the page scroll sideways, whatever a stray element does. */
body {
    overflow-x: hidden;
}

/* Media should always stay inside its column on small screens. */
img,
video,
canvas {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Forms on phones

   iOS Safari zooms the whole page in when a focused input uses a font smaller
   than 16px, which leaves the visitor scrolled sideways mid-form.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea,
    /* Same specificity as the bundled .form-box rule, declared later so it
       wins - the contact form styles its fields through that class. */
    .form-box input,
    .form-box textarea,
    .form-box select {
        font-size: 16px;
    }
}