/* ============================================================
   TARGETED FIXES v2
   1. Header social icons — same row as Call/Email buttons
   2. Accolades cards 2 & 3 — proper stacked layout on mobile
   Paste AFTER your previous mobile-fixes.css (or after all styles)
   ============================================================ */


/* ── 1. HEADER: Social icons on same row as Call/Email ────── */

/*
   Current structure:
     col-lg-8  →  hamburger | Call Us | Email Us
     col-lg-4  →  social icons (separate row below on mobile)

   Fix: on mobile, make both columns sit in one flex row
   and let the social icons align to the right of the buttons.
*/

@media (max-width: 991px) {

    /* Turn the Bootstrap .row into a single flex row */
    .container-fluid.bg-dark .row.gx-0 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 8px 10px !important;
        height: auto !important;
    }

    /* Left side: hamburger + call + email — shrink so social icons fit */
    .container-fluid.bg-dark .col-lg-8 {
        width: auto !important;
        flex: 1 1 auto !important;
        text-align: left !important;
    }

    .container-fluid.bg-dark .col-lg-8 .d-flex {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;   /* keep buttons on one line */
        gap: 6px !important;
        padding-left: 0 !important;
    }

    /* Right side: social icons — hug right edge */
    .container-fluid.bg-dark .col-lg-4 {
        width: auto !important;
        flex: 0 0 auto !important;
        text-align: right !important;
    }

    /* Social icons — compact sizing to fit in one row */
    .social-icons {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        justify-content: flex-end !important;
        margin-top: 0 !important;
    }

    .social-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        flex-shrink: 0;
    }

    /* Call/Email pills — slightly smaller so everything fits */
    .call-email-btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
        white-space: nowrap;
    }

    /* Hamburger button — keep compact */
    #sidebarToggle {
        width: 34px !important;
        height: 34px !important;
        margin-right: 6px !important;
        flex-shrink: 0;
    }
}

/* Extra-small phones: hide YouTube icon to save space if needed */
@media (max-width: 360px) {
    .social-btn:nth-child(2) {   /* YouTube is 2nd icon */
        display: none !important;
    }
}


/* ── 2. ACCOLADES: Fix cards 2 & 3 on mobile ─────────────── */

/*
   Card 1 has col-xl-12 (full width row) — working fine.
   Cards 2 & 3 have col-xl-4 + acc-card-cont.
   Problem: the previous 48% fix still makes them too narrow
   and the images + text clip/overflow.
   Fix: stack them as 100% width single column on anything < 1200px.
*/

@media (max-width: 1199px) {

    /* Force cards 2 & 3 to full width stacked layout */
    .acc-card-cont {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Make the blog-item inside fill width properly */
    .acc-card-cont .blog-item {
        width: 100% !important;
    }

    /* Let images scale naturally instead of fixed height */
    .acc-card-cont .blog-img img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    /* Ensure the row wraps so cards stack */
    .acc-cont .row.g-4 {
        flex-wrap: wrap !important;
    }

    /* Text content padding on mobile */
    .acc-card-cont .blog-centent.p-4 {
        padding: 20px !important;
    }

    /* Heading size — readable on mobile */
    .acc-head {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* Paragraph text */
    .acc-para {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* Also fix the overall accolades container on mobile */
@media (max-width: 991px) {
    .acc-cont {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
}