/* =======================================================================
   ecfirst – responsive layout fixes (added 2026-11-13)
   Loaded on every page via functions.php (ecf_responsive_fixes_css).
   Targeted fixes only: edge clipping, uneven outer spacing, overlapping
   buttons, stretched images and text spilling out of narrow columns.
   To roll back: delete this file (the loader skips it when missing).
   ========================================================================== */

/* ---------- Outer spacing ---------------------------------------------- */

/* Containers using margin utilities (m-2, mx-md-2, me-md-5 …) were
   width:100% + margin, so they ran past the screen edge and were clipped. */
main > .container-fluid,
section > .container-fluid,
main > section > .container-fluid,
.container-fluid.m-1, .container-fluid.m-2, .container-fluid.m-3,
.container-fluid.mx-1, .container-fluid.mx-2, .container-fluid.mx-3 {
    width: auto;
}

/* Rows inside padding-less containers kept their -12px gutters,
   so cards were cut off at the left/right edges. */
.container-fluid.p-0 > .row:not(.g-0),
.container-fluid.px-0 > .row:not(.g-0) {
    margin-left: 0;
    margin-right: 0;
}

/* A card placed straight in a .row (no column) overflowed by its margin. */
.row > .sub-container-items:only-child {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile: every card gets the same 8px gap from the screen edge
   (desktop-only ms-3 / me-3 / mx-3 margins made them lopsided). */
@media (max-width: 767.98px) {
    body .sub-container-items {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    body .px-1 > .sub-container-items {              /* column already adds 4px */
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
    main > section.me-3, main > section.ms-3,
    main > section.me-2, main > section.ms-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .container-fluid.pe-2 { padding-right: 12px !important; }
    .container-fluid > .col-md-12.p-0 > .row {
        margin-left: -12px !important;
        margin-right: -12px !important;
        max-width: none !important;
    }
}

/* ---------- Tabs widget (Penetration Testing, Social Engineering …) ---- */
ul.wpsm_nav { flex-wrap: wrap; }
[id^="tab_container_"] { max-width: 100%; }

/* ---------- Images ----------------------------------------------------- */

/* Side-by-side images in flex rows could not shrink and ran off-screen */
.d-flex > img.img-fluid,
.d-md-flex > img.img-fluid,
.d-lg-flex > img.img-fluid,
.d-xl-flex > img.img-fluid { min-width: 0; }

/* Stretched / squashed images */
img.banner-max-logo-2 { object-fit: contain; }      /* HITRUST e1 / i1 / r2 badges */
.press_news-f img     { object-fit: contain; }      /* Press "News" icon */
.cha-shortcode img    { width: auto; }              /* CHA slide image */
@media (max-width: 991.98px) {
    img.vi-ai-eval { height: auto !important; }     /* AI page – aiCRP reference */
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .vi-hitrsut .bordered img.banner-max-logo-2 { height: auto; }
}

/* ---------- Buttons ---------------------------------------------------- */

/* VISO banner: buttons sat under the carousel arrow (left part not clickable) */
.viso-proposal-btn { z-index: 3; }
@media (max-width: 767.98px) {
    .viso-proposal-btn {
        left: 15% !important;
        right: 15%;
        bottom: 4% !important;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .viso-proposal-btn .btn { font-size: 11px; padding: 3px 8px; }
}

/* HIPAA page (tablet): "Enroll Now" buttons overlapped each other */
@media (min-width: 768px) and (max-width: 991.98px) {
    .vi-chp-logo .boss-btn { font-size: 11px; padding: 5px 8px; max-width: 100%; white-space: nowrap; }
    .vi-cta-stack .btn { font-size: 12px; padding: 8px 6px; max-width: 100%; }
}

/* ---------- Headings / text wider than their box ----------------------- */

/* HITRUST card heading ("Achieve Certification") overflowing the card */
.vi-hitrsut > .d-flex:first-child { flex-wrap: wrap; }
.vi-hitrsut h3 { max-width: 100%; overflow-wrap: break-word; }

/* Press list: title column pushed past the tab box */
.vi-displayflex > .press_news.col-md-11 { flex: 1 1 0; min-width: 0; }

@media (min-width: 768px) and (max-width: 1199.98px) {
    /* HITRUST page hero ran under the brochure image */
    .hitrust-h1 .first-lg-font  { font-size: calc(20px + 4.5vw); }
    .hitrust-h1 .second-lg-font { font-size: calc(12px + 3.2vw); max-width: 100%; }

    /* HIPAA page side heading */
    .vi-cta-stack .blue-heading { font-size: 1.3rem; }

    /* Events page filter sidebar */
    body .set-default-height-cat { padding: 14px 10px !important; }
    .set-default-height-cat h3 { font-size: 18px; }
    .set-default-height-cat p  { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .vi-cta-stack .blue-heading { font-size: 1.1rem; }                /* HIPAA page side heading */
    h3.dark-clr-blue     { font-size: 18px; }                          /* On-Demand Consulting */
    h3.rpo-service-title { font-size: 1.05rem; }                       /* RPO */
    .col-md-2 > p.fw-bold { font-size: 13px; overflow-wrap: anywhere; } /* Threat Intelligence */
}

/* Mobile: columns with mx-1 / mx-2 were 100% wide + margin and ran off the right edge */
@media (max-width: 767.98px) {
    body .row > [class*="col-"].mx-1,
    body .row > [class*="col-"].mx-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---------- Card alignment (HIPAA landing page and similar) ------------ */

/* Top card: section me-3 + card me-3 gave a 32px right gap vs 8px on the left */
main > section.me-3 { margin-right: 0 !important; }
main > section.me-3 > .sub-container-items.mx-2 { margin-right: 8px !important; }

@media (min-width: 768px) {
    /* Top card: keep the heading at the top and centre the content in the remaining space
       (it had ~110px empty at the bottom and ~10px at the top) */
    main > section.me-3 > .sub-container-items { display: flex; flex-direction: column; }
    main > section.me-3 > .sub-container-items > .row { flex: 1 1 auto; }

    /* Side-by-side cards in the same row now end on the same line */
    .row > [class*="col-"]:has(> .set-default-height:only-child) { display: flex; flex-direction: column; }
    .row > [class*="col-"] > .set-default-height:only-child { flex: 1 1 auto; }
}

/* ---------- Equal 8px outer spacing (HIPAA & CHP landing pages) --------- */
@media (max-width: 767.98px) {
    /* HIPAA: card with only me-2 touched the left screen edge */
    body .col-md-6.p-0 > .set-default-height.box-borders-radius-right { margin-left: 8px !important; margin-right: 8px !important; }
}
/* Card row nested in a padding-less column: right gap was 20–28px vs 8px on the left */
.container-fluid.pe-2 > .col-md-12.p-0 > .row { margin-left: -12px !important; margin-right: -12px !important; max-width: none !important; }
.container-fluid.pe-2:has(> .col-md-12.p-0 > .row) { padding-right: 12px !important; }
@media (min-width: 768px) {
    body.page-template-chp-landing-page .row > .col-md-6.px-1:first-child > .sub-container-items { margin-left: 4px !important; }
    body.page-template-chp-landing-page .row > .col-md-6.px-1:last-child > .sub-container-items { margin-right: 4px !important; }
    body.page-template-chp-landing-page .col-md-12.p-0 > .row > .sub-container-items.ms-2 { margin-right: 8px !important; }
    body.page-template-chp-landing-page .col-md-12.p-0 > .sub-container-items.me-md-4 { margin-right: 8px !important; }
}

/* ---------- HIPAA Templates & Toolkit badges (768–1199px) ---------------
   The 5 badges are absolutely positioned for a 581px-tall card, but below
   1200px the card height is auto, so they spilled over the cards above/below.
   On tablets / small laptops show them in one even row instead. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sub-container-items img[class*="hipaa-template-"] {
        position: static !important;
        transform: none !important;
        width: 100%;
        height: auto;
        max-height: none;
    }
    .sub-container-items .d-flex:has(> a > img[class*="hipaa-template-"]) {
        align-items: center;
        gap: 6px;
        padding: 0 12px 16px;
    }
    .sub-container-items .d-flex > a:has(> img[class*="hipaa-template-"]) { flex: 1 1 0; min-width: 0; }
    .sub-container-items .d-flex > a:has(> img.hipaa-template-3) { flex: 1.25 1 0; }
}

/* ---------- C3PAO hero buttons (993–1599px) ---------------------------------
   Buttons were placed with fixed pixel offsets, so on smaller laptops they
   overlapped the "Ready to Serve" heading and the CyberAB badge. Position them
   as a % of the banner image and scale the text with the screen width. */
@media (min-width: 993px) and (max-width: 1599.98px) {
    .bg-white:has(> .proposal-btns-top) { position: relative; }
    .bg-white > .proposal-btns-top { position: static !important; }
    .proposal-btns-top .top-btns { top: 37%; bottom: auto !important; left: 3.4%; display: flex; gap: .8vw; }
    .proposal-btns-top .class-btns-list { top: 53%; bottom: auto !important; left: 3.4%; }
    .proposal-btns-top .boss-btn-c3,
    .proposal-btns-top .boss-btn-c3:hover { font-size: 1.1vw !important; padding: .55em 1em !important; }
    .proposal-btns-top .subscription-playbook,
    .proposal-btns-top .subscription-playbook:hover { font-size: 1.2vw !important; padding: .55em 1.6em !important; }
}

/* ---------- RPO hero buttons (993–1599px) – same fix as the C3PAO hero ----- */
@media (min-width: 993px) and (max-width: 1599.98px) {
    .bg-white:has(> .rpo-proposal-btns-top) { position: relative; }
    .bg-white > .rpo-proposal-btns-top { position: static !important; }
    .rpo-proposal-btns-top .rpo-top-btns { top: 37%; bottom: auto !important; left: 3.4%; display: flex; gap: .8vw; }
    .rpo-proposal-btns-top .rpo-class-btns-list { top: 53%; bottom: auto !important; left: 3.4%; }
    .rpo-proposal-btns-top .btn,
    .rpo-proposal-btns-top .btn:hover { font-size: 1.1vw !important; padding: .55em 1em !important; }
    .rpo-proposal-btns-top .rpo-subscription-playbook,
    .rpo-proposal-btns-top .rpo-subscription-playbook:hover { font-size: 1.2vw !important; padding: .55em 1.6em !important; }
}

/* ---------- CCP / CCA hero (logo + 8 action tiles) ------------------------
   1) The full-bleed trick (left:50% / margin:-50vw) ignored the scrollbar, so the
      hero was shifted ~7px left and cut off.  main is already full width.
   2) 901–1365px: logo + 4-column tile grid did not fit side by side, so the
      right-hand tiles ran off the screen. Stack them (same as the template's
      own ≤900px layout). */
section.hero-section {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
@media (min-width: 901px) and (max-width: 1365.98px) {
    .hero-section .hero-inner { flex-direction: column; text-align: center; gap: 24px; padding: 36px 32px 40px; }
    .hero-section .hero-left { align-items: center; text-align: center; max-width: 100%; }
    .hero-section .hero-right { align-items: center; width: 100%; }
    .hero-section .hero-grid-label { align-self: center; }
}

/* ---------- HITRUST landing page: even 8px spacing around cards ----------
   Paired cards sat inside a wrapper section with mx-3 (16px) plus their own
   8px margin = 24px at the screen edges, while the full-width cards had 8px. */
main section.addsection-border { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 767.98px) {
    body main .bg-rounded-img { margin-left: 8px !important; margin-right: 8px !important; }
}

/* ---------- CHA landing page: even 8px spacing --------------------------
   Cards had 20px (ms-md-3 / me-md-3) on the outside but 4px elsewhere;
   the top banner had 12px. */
body.page-template-cha-landing-page .container-fluid.p-0 > .row > .col-md-12.position-relative { padding-left: 8px !important; padding-right: 8px !important; }
@media (min-width: 768px) {
    body.page-template-cha-landing-page .row > .col-md-6.px-1:first-child > .sub-container-items { margin-left: 4px !important; margin-right: 0 !important; }
    body.page-template-cha-landing-page .row > .col-md-6.px-1:last-child > .sub-container-items { margin-right: 4px !important; margin-left: 0 !important; }
    body.page-template-cha-landing-page .col-md-12.px-1 > .sub-container-items { margin-left: 4px !important; margin-right: 4px !important; }
}
@media (max-width: 767.98px) {
    body.page-template-cha-landing-page section.chp-section { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ---------- White line above the footer ----------------------------------
   The last section's 8px bottom margin escaped <main> (margin collapse), so
   the white page background showed as a thin strip above the grey footer.
   Keep the margin inside main and drop the footer's extra 5px so the gap
   above the footer is the same 8px grey gap used between all cards. */
main { display: flow-root; }
footer#footer { padding-top: 0 !important; }
/* Same 8px grey gap above the footer on every page (some pages had 0, 1 or 16px) */
body main { padding-bottom: 8px !important; }
body main > :last-child,
body main > :last-child > :last-child { margin-bottom: 0 !important; }
/* …also when the last section in <main> is a hidden (d-none) one, e.g. RPO */
body main > :has(+ .d-none:last-child),
body main > :has(+ .d-none:last-child) > div:last-of-type { margin-bottom: 0 !important; }
/* Quantum page: thin grey line + 16px light strip above the footer */
section.vi-playbook-btn.border-bottom { border-bottom: 0 !important; }
body > footer#footer { margin-top: 0 !important; }

/* ---------- Card spacing in two-column rows (OLT, CSCS, CCSA, GDPR, CCP, CCA …) ----
   1) Cards with m-auto shrank to their content and floated to the centre of the
      column once the column became a flex box (equal-height rule above) – e.g.
      OLT "DIB CMMC Reference". Reset the auto side margins.
   2) Outer-side margins (ms-3 / me-3 / ms-md-3 …) gave 12–20px at the screen
      edge vs 4px between cards; make every card 8px from the edge and 8px apart. */
@media (min-width: 768px) {
    .row > [class*="col-"] > .set-default-height.m-auto:only-child:not([class^="ms-"]):not([class*=" ms-"]):not([class^="mx-"]):not([class*=" mx-"]) { margin-left: 0 !important; }
    .row > [class*="col-"] > .set-default-height.m-auto:only-child:not([class^="me-"]):not([class*=" me-"]):not([class^="mx-"]):not([class*=" mx-"]) { margin-right: 0 !important; }
    body .row > .col-md-6.px-1:first-child > .sub-container-items { margin-left: 4px !important; margin-right: 0 !important; }
    body .row > .col-md-6.px-1:last-child > .sub-container-items { margin-right: 4px !important; margin-left: 0 !important; }
    body .row > .col-md-12.px-1 > .sub-container-items { margin-left: 4px !important; margin-right: 4px !important; }
}
/* OLT "HIPAA Scope" band ran edge to edge with square corners – match the cards */
main section.hipaa-score { margin-left: 8px !important; margin-right: 8px !important; border-radius: 20px; }
/* Paired cards where only one has mb-2: they ended at different heights and the
   taller one touched the section below (OLT, above "HIPAA Scope"). Give both the gap. */
@media (min-width: 768px) {
    .row:has(> [class*="col-"] > .set-default-height.mb-2:only-child) > [class*="col-"] > .set-default-height:only-child { margin-bottom: 8px !important; }
}