/* ==========================================================================
   site.css — custom overrides & responsive layout
   Mobile-first: base styles = smallest phones, then enhance upward.
   ========================================================================== */

/* ---- Base / small phones (default, no media query needed) ----
   Applies to everything below 480px and acts as the fallback for all sizes
   unless overridden below. Target: iPhone SE, small Android phones. */
.form-control {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
}

.sidebar-left {
    /* mobile default: off-canvas, collapsed */
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

/* ---- Large phones (480px and up) ----
   Target: iPhone 12/13/14/15 standard width, most modern Android phones */
@media (min-width: 480px) {
    .row {
        margin-left: 0px;
        margin-right: 0px;
    }
}


/* ---- Small tablets / large phones landscape (600px and up) ----
   Target: small tablets in portrait, phones in landscape */
@media (min-width: 600px) {
    .row {
        margin-left: 0px;
        margin-right: 0px;
    }
}


/* ---- Tablets portrait (768px and up) ----
   Target: iPad portrait, matches Bootstrap's sm breakpoint */
@media (min-width: 768px) {
}


/* ---- Tablets landscape / small laptops (992px and up) ----
   Target: iPad landscape, matches Bootstrap's md breakpoint
   — this is where col-md-* classes start applying */
@media (min-width: 992px) {
}


/* ---- Desktop (1200px and up) ----
   Target: standard desktop monitors, matches Bootstrap's lg breakpoint */
@media (min-width: 1200px) {
}


/* ==========================================================================
   Orientation-specific overrides (use sparingly, only when width alone
   isn't enough — e.g. a tablet that's 768px wide in portrait but you want
   different behavior in landscape at the same width class)
   ========================================================================== */
@media (min-width: 768px) and (orientation: landscape) {
}


/* ==========================================================================
   Touch-specific (no hover capability) — useful for your nav flyout issue
   from earlier: anything gated behind :hover needs a touch alternative
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .nav-parent:hover .nav-children {
        /* hover won't fire on touch devices — handle expand via JS/class toggle instead */
    }
}