/* ==================================================================
   THE SHIVALIK BAKERS — RESPONSIVE STYLESHEET
   Mobile-first base rules live in style.css.
   This file layers on breakpoint-specific refinements only.
   Breakpoints follow Bootstrap 5: sm 576 / md 768 / lg 992 / xl 1200
   ================================================================== */

/* ---------------- EXTRA SMALL DEVICES (default / < 576px) ---------------- */
.hero-heading { font-size: 2.1rem; }
.section-heading h2 { font-size: 1.7rem; }
.section-title-lg { font-size: 1.6rem; }
.newsletter-box { padding: 2rem 1.3rem; text-align: center; }
.newsletter-form .input-group { flex-wrap: nowrap; }
.footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
.hero-stats { gap: 1.4rem; justify-content: center; text-align: center; }
.stat-number, .stat-suffix { font-size: 1.6rem; }
.float-btn { width: 46px; height: 46px; font-size: 1.15rem; right: 16px; }
.whatsapp-float { bottom: 82px; }
.call-float { bottom: 140px; }
.back-to-top { bottom: 20px; }
.error-number { font-size: 5rem; }
.testimonial-card { padding: 2rem 1.4rem; }
.lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 1rem; }
.lightbox-prev { left: 4px; }
.lightbox-next { right: 4px; }
.lightbox-close { top: 4px; right: 4px; background: rgba(0,0,0,0.4); }

/* ---------------- SMALL DEVICES (>= 576px) ---------------- */
@media (min-width: 576px) {
    .hero-heading { font-size: 2.6rem; }
    .section-heading h2 { font-size: 2rem; }
}

/* ---------------- MEDIUM DEVICES / TABLETS (>= 768px) ---------------- */
@media (min-width: 768px) {
    .section-padding { padding: 6.5rem 0; }
    .hero-heading { font-size: 3rem; }
    .section-heading h2 { font-size: 2.2rem; }
    .section-title-lg { font-size: 2rem; }
    .hero-stats { justify-content: flex-start; text-align: left; }
    .footer-bottom { flex-direction: row; text-align: left; }
    .lightbox-prev { left: -20px; }
    .lightbox-next { right: -20px; }
    .lightbox-close { top: -50px; right: 0; background: rgba(255,255,255,0.1); }
}

/* ---------------- LARGE DEVICES / DESKTOPS (>= 992px) ---------------- */
@media (min-width: 992px) {
    .hero-heading { font-size: 3.4rem; }
    .section-heading h2 { font-size: 2.4rem; }
    .section-title-lg { font-size: 2.2rem; }
    .navbar-collapse { background: transparent; }
    .lightbox-prev { left: -60px; }
    .lightbox-next { right: -60px; }
}

/* ---------------- EXTRA LARGE DEVICES (>= 1200px) ---------------- */
@media (min-width: 1200px) {
    .container { max-width: 1180px; }
}

/* ---------------- MOBILE OFF-CANVAS NAV MENU (< 992px) ---------------- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--color-white);
        margin-top: 14px;
        padding: 1.4rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }
    .navbar-nav .nav-link { margin: 4px 0; padding: 10px 4px !important; }
    .navbar-nav .nav-item:last-child { margin-top: 10px; }
    .navbar-nav .btn-order { display: inline-flex; width: 100%; justify-content: center; }
}

/* ---------------- HERO ADJUSTMENTS FOR SHORT / LANDSCAPE MOBILE ---------------- */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-section { min-height: auto; padding: 120px 0 60px; }
    .min-vh-hero { min-height: auto; }
}

/* ---------------- REDUCE MOTION / ZOOM ON TOUCH DEVICES ---------------- */
@media (hover: none) {
    .cake-card:hover img,
    .menu-card:hover img,
    .gallery-thumb:hover img { transform: none; }
    .category-card:hover .category-icon-wrap { transform: none; }
}

/* ---------------- PRINT STYLES ---------------- */
@media print {
    .navbar, .float-btn, footer, #page-loader, #scroll-progress-bar { display: none !important; }
}