/* ============================================================
   Danaa Hakim Mohammed — RESPONSIVE
   Consolidated media queries for the whole site.
   Breakpoints follow the grid's: 991 / 767 / 575.
   ============================================================ */

/* ── HEADER ── */
@media (max-width: 991px) {

    #sc-navbar .sc-nav,
    #sc-navbar .sc-right {
        display: none !important;
    }

    #sc-ham {
        display: flex !important;
    }
}

@media (max-width: 575px) {
    #sc-navbar .sc-logo-ring {
        width: 44px;
        height: 44px;
    }
    #sc-navbar .sc-brand-name {
        font-size: 16px;
    }
    #sc-navbar .sc-brand-sub {
        font-size: 11px;
    }
}

/* ── FOOTER ── */
@media (max-width: 767px) {
    .footer-nl-strip .d-flex {
        flex-direction: column;
        gap: 14px !important;
    }

    .nl-form {
        max-width: 100%;
    }

    .footer-body {
        padding: 40px 0 28px;
    }
}

/* Taller rows so the footer link lists are comfortable to tap — applies to
   phones and tablets, where the footer is a touch target rather than a
   desktop column. */
@media (max-width: 991px) {
    .f-nav-link {
        padding: 10px 0;
    }
}

/* ── HOME: hero slider, review cards ── */
@media (max-width: 991px) {
    .slide-content {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .slide-item {
        min-height: 70vh;
    }

    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        display: none;
    }

    footer .col-lg-2,
    footer .col-lg-4 {
        margin-bottom: 30px;
    }
}

/* The review arrows hang 20px outside the slider (left/right: -20px), which
   pushes them off the edge of the narrowest phone screens. Pull them back in. */
@media (max-width: 575px) {
    .reviewSlider .carousel-control-prev {
        left: 0;
    }

    .reviewSlider .carousel-control-next {
        right: 0;
    }
}

/* ── ABOUT ── */
@media (max-width: 767px) {
    .story-img-main img {
        height: 300px;
    }

    .story-img-badge {
        right: 0;
    }

    /* check-list points: 2-column grid → single column on small screens */
    .check-list {
        grid-template-columns: 1fr;
    }
}

/* ── PRODUCT DETAILS ── */
@media (max-width: 767px) {
    /* At-a-Glance highlights: 2x2 grid → single column on small screens */
    .glance-grid {
        grid-template-columns: 1fr;
    }
}

/* ── CONTACT ── */
@media (max-width: 767px) {
    .contact-form-wrap {
        padding: 28px 20px;
    }

    .contact-side {
        padding: 28px 22px;
    }
}

/* ── SMALL LABELS ──
   These uppercase badges/labels are 10px by design, which reads fine on a
   desktop but is too small on a phone, so they step up at the narrowest
   widths. */
@media (max-width: 575px) {
    .cat-badge,
    .gallery-badge,
    .svc-num,
    .f-contact-label,
    .glance-label {
        font-size: 11px;
    }
}

/* ── TOUCH TARGETS ──
   On phones and tablets everything interactive is aimed at with a thumb, so
   each control is given at least the 44px minimum recommended target. Desktop
   keeps the compact sizing it was designed with — these rules only start below
   the 991px grid breakpoint. */
@media (max-width: 991px) {

    /* Review slider arrows. Sizing lives here rather than in the 575 block so
       tablets get the same target; the hero arrows are hidden below 768. */
    .reviewSlider .carousel-control-prev,
    .reviewSlider .carousel-control-next {
        width: 44px;
        height: 44px;
    }

    /* Stacked contact links — the phone numbers and the email address. These
       are block-level lists, so vertical padding grows the hit box without
       disturbing the layout; max-width lets a long address still break. */
    .f-contact-value a,
    .side-value a {
        display: inline-block;
        max-width: 100%;
        padding: 12px 0;
    }

    /* Breadcrumb "Home" link. */
    .breadcrumb {
        align-items: center;
    }

    .breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* "Experts of Deals" credit logo in the footer bottom bar. */
    .fb-brand {
        min-height: 44px;
    }
}