/* =============================================================================
   HKHP Services Ltd — Responsive Stylesheet
   -----------------------------------------------------------------------------
   Mobile-first refinements layered on top of style.css.
   Breakpoints (aligned with Bootstrap 5):
     xs  < 576px   (base styles in style.css)
     sm  >= 576px
     md  >= 768px
     lg  >= 992px
     xl  >= 1200px
     xxl >= 1400px
   ========================================================================== */

/* ---------- Large desktop / wide monitors ---------- */
@media (min-width: 1400px) {
    :root { --container: 1240px; }
}

/* ---------- Below XL: nav mega menu narrows ---------- */
@media (max-width: 1199.98px) {
    .navbar .dropdown-menu { min-width: 460px; }
}

/* ---------- Tablet & below (< 992px) : collapsed navbar ---------- */
@media (max-width: 991.98px) {

    /* Mobile navigation panel */
    .site-header .navbar-collapse {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        margin-top: .7rem;
        padding: .7rem;
        max-height: 78vh;
        overflow-y: auto;
    }
    .navbar-nav .nav-link {
        padding: .8rem .9rem !important;
        border-radius: var(--radius-sm);
    }
    .navbar-nav .nav-link::after { display: none; }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active { background: var(--line-soft); }

    .navbar-nav .nav-item.cta-item { margin-top: .4rem; }
    .navbar-nav .nav-item.cta-item .nav-link {
        background: var(--grad-btn);
        color: #fff;
        text-align: center;
        justify-content: center;
    }

    /* Mega dropdown becomes an inline accordion-style block */
    .navbar .dropdown-menu {
        min-width: 100%;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        margin: .2rem 0 .4rem;
        padding: .2rem 0 .2rem .4rem;
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }
    .navbar .dropdown-menu:not(.show) { display: none; }
    .mega-grid { grid-template-columns: 1fr; }
    .mega-foot { flex-direction: column; align-items: flex-start; gap: .6rem; }

    /* Hero side panel drops below copy */
    .hero-panel { margin-top: 2.5rem; }

    .sticky-side { position: static; }
    .stat-divider { border-right: 0; }

    .overlap-up { margin-top: -2rem; }
}

/* ---------- Small tablets & large phones (< 768px) ---------- */
@media (max-width: 767.98px) {

    .topbar .topbar-inner { justify-content: center; text-align: center; }

    .hero { text-align: center; }
    .hero .lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-badge { margin-inline: auto; }

    .section-intro { margin-inline: auto; }
    .text-center-mobile { text-align: center !important; }

    .cta-band { text-align: center; }
    .cta-band .cta-actions { justify-content: center; display: flex; flex-wrap: wrap; gap: .8rem; }

    .footer-bottom { text-align: center; }
    .footer-bottom .fb-links { justify-content: center; }
    .footer-bottom .fb-copy { margin-bottom: .6rem; }

    .logo-strip { gap: 1.4rem; }
    .logo-strip .logo-item { font-size: 1rem; }

    /* Spec table becomes stacked on very small screens handled below */
}

/* ---------- Phones (< 576px) ---------- */
@media (max-width: 575.98px) {

    .btn { width: 100%; justify-content: center; }
    .hero-actions .btn,
    .cta-band .btn { width: auto; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }

    .service-card,
    .form-card,
    .testimonial { padding: 1.4rem; }

    .to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }

    /* Stack spec tables for readability */
    .spec-table th { width: 45%; font-size: .86rem; }
    .spec-table td { font-size: .86rem; }

    .brand { font-size: 1.1rem; }
    .brand-mark { width: 40px; height: 40px; }
}

/* ---------- Print styles ---------- */
@media print {
    .site-header, .topbar, .site-footer, .to-top, .preloader,
    .hero-actions, .cta-band, .newsletter-form { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
    .section { padding: 1rem 0; }
}