/**
 * IntelliShop - Responsive Fixes
 * Global layout, navbar, hero pages, and utility overrides.
 * Homepage-specific responsive rules live in home.css.
 *
 * Breakpoints:
 *   Mobile  : 0 – 767px
 *   Tablet  : 768px – 1023px
 *   Desktop : 1024px+
 */

/* ============================================================
   1. GLOBAL RESET & BOX MODEL
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

section { overflow-x: hidden; }

/* Fix Bootstrap row negative margins causing horizontal scroll */
.row { margin-left: 0; margin-right: 0; }
@media (max-width: 767.98px) { .row { --bs-gutter-x: 1rem; } }

/* ============================================================
   2. LAYOUT CONTAINERS
============================================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px)  { .container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .container { padding-left: 40px; padding-right: 40px; } }

/* ============================================================
   3. NAVBAR
============================================================ */
.intellishop-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
}

/* Remove the white gap between navbar and hero */
.navbar-spacer { display: none !important; }

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(30, 25, 60, 0.97);
        border-radius: 10px;
        margin-top: 0.75rem;
        padding: 1rem 1.25rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .navbar-nav { gap: 0.25rem; }
    .navbar-nav .nav-link {
        padding: 0.6rem 1rem !important;
        border-radius: 6px;
        text-align: left;
        margin: 0;
    }
    .navbar-nav .nav-link:hover { background: rgba(255,255,255,0.08); transform: none; }
    .navbar-nav .nav-link.cart-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
}
@media (max-width: 575.98px) {
    .intellishop-navbar .container { padding-left: 12px; padding-right: 12px; }
    .navbar-brand { font-size: 1.125rem !important; }
}

/* ============================================================
   4. INNER-PAGE HERO  (about, contact, products, blog)
============================================================ */
.page-hero,
.about-hero,
.contact-hero,
.products-hero {
    padding: 52px 0 36px;
}

.page-hero-title,
.about-title,
.contact-title,
.products-title {
    font-size: 2rem;
}

@media (min-width: 768px) {
    .page-hero-title,
    .about-title,
    .contact-title,
    .products-title { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
    .page-hero-title,
    .about-title,
    .contact-title,
    .products-title { font-size: 3rem; }
}

/* Slight inner padding on mobile */
.about-hero .about-hero-inner,
.contact-hero .contact-hero-inner {
    padding: 0 1rem;
}

/* ============================================================
   5. FOOTER RESPONSIVE — handled by footer.css
============================================================ */
.intellishop-footer .container { max-height: none !important; }

/* ============================================================
   6. GRID OVERRIDES
============================================================ */
@media (max-width: 400px) {
    .row.g-4 > [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}