/* ==========================================================
   RESPONSIVE.CSS
   Load this AFTER main.css (and after any other theme CSS,
   including the inline <style> block in <head>).
   ========================================================== */

/* -----------------------------------------------------------
   ROOT CAUSE FIX — applies everywhere, not just one section.
   The inline <style> in <head> sets:
       .container { width: 1600px; }
   with NO media query, so every .container on the page (hero,
   services, about, testimonials, insights, contact, etc.) is
   forced to 1600px wide even on a phone screen. The browser
   then has to shrink the whole 1600px layout down to fit the
   viewport, which is why everything looks tiny/overlapping/
   "messy" instead of reflowing properly. This single override
   fixes most of the page at once.
   ----------------------------------------------------------- */
@media (max-width: 991px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* -----------------------------------------------------------
   Visually-hidden fix for the SEO <h1 class="for-show">.
   It currently uses color:transparent, which hides the text
   from view but still reserves its font-size box on every
   screen size — creating an empty gap between the logo and
   the Contact Us button in the hero. This standard
   "screen-reader-only" pattern removes the box entirely while
   keeping the text readable by search engines / screen readers.
   Applies at all sizes, not just mobile.
   ----------------------------------------------------------- */
.for-show {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 1px !important;
}

/* -----------------------------------------------------------
   Tablet & below (<= 991px)
   ----------------------------------------------------------- */
@media (max-width: 991px) {

    /* Hero: main homepage logo (images/logo.png inside .pitch-logo).
       Fixed width:420px + height:200px in the inline <style>
       distorts/oversizes it on small screens. Let it scale
       proportionally and center it. */
    .pitch-logo {
        text-align: center;
        margin: 0 auto;
    }

    .pitch-logo img {
        width: 138px !important;
        height: auto !important;
        max-width: 80% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* The Contact Us button had margin-left:65px from a global
       inline rule (.theme_buttons a, .theme_button) — centers it
       instead of pushing it off to one side on narrow screens */
    .intro_section .theme_button,
    .theme_buttons a,
    .theme_button {
        margin-left: 0 !important;
    }

    .intro_section .theme_button.inverse {
        display: inline-block;
                margin: 5px auto 9px !important;
                    padding: 8px 20px 12px;
                            font-size: 10px;
    }

    .intro_section .slide_description {
        text-align: center;
    }

    /* Homepage "Our Insights" band: fixed 42% width column +
       93vh inline height forces a tall, cramped, off-proportion
       block on mobile */
    .insights-content {
        width: 100% !important;
        padding-left: 0 !important;
         background:white;
         opacity:0.8;
          line-height: 1.6;
           margin-bottom: 10px;
    }
   

    .insights-content .content-wrap {
        height: auto !important;
    }

    .insights-section {
        height: auto !important;
        min-height: 0 !important;
        padding: 40px 15px;
    }
}

    /* Resource hub split section: stack image below content */
    .arh-split-wrapper .arh-split-content-inner {
        padding: 40px 25px;
        text-align: center;
    }

    .arh-split-image-container img.arh-split-side-img {
        width: 100%;
        height: auto;
        display: block;
    }

    .arh-split-title {
        font-size: 34px;
    }

    /* Authority carousel: side card drops below the carousel,
       already handled by Bootstrap col-lg-4, just tighten spacing */
    .authority-carousel-section .col-lg-4 {
        margin-top: 30px;
    }

    .authority-slide {
        flex-direction: column;
        text-align: center;
    }

    .authority-slide-photo {
        width: 100%;
        max-width: 320px;
        margin: 20px auto 0;
    }

    /* Insights filter tabs: allow horizontal scroll instead of wrap-crush */
    .insights-filter-section .filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        gap: 8px;
    }

    .insights-filter-section .filter-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Footer CTA section: stack heading and buttons */
    .rtb-footer-cta-section .rtb-footer-cta-actions {
        margin-top: 25px;
    }

    .rtb-footer-cta-section .rtb-footer-cta-actions .d-flex {
        justify-content: flex-start !important;
    }

    /* Custom footer: stack logo and contact info */
    .custom-footer {
        min-height: auto;
        padding: 40px 0;
        background-size: cover;
    }

    .footer-container {
            flex-direction: row;
        text-align: center;
        gap: 30px;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        display: flex;
        /*justify-content: center;*/
    }

    .footer-logo {
                width: 117px;
        margin: 0 auto;
            margin-left: 0px;
    }

    .footer-contact {
        /*border-left: none;*/
        /*border-top: 4px solid #ff6600;*/
        /*padding-left: 0;*/
        /*padding-top: 20px;*/
        /*align-items: center;*/
            padding-left: 0;
    }

    /* Insights intro block with vertical line */
    .content-wrap {
        gap: 15px;
    }

    .insights-title {
        font-size: 2.2rem;
    }

    .pitch-logo1 {
        width: 160px;
        margin-bottom: 20px;
    }
}

/* -----------------------------------------------------------
   Mobile (<= 767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {

    /* Article hero title: shrink and allow the orange banner
       image to sit below the text instead of forcing overflow */
    .article-detail-hero {
        padding: 40px 0;
    }

    .article-detail-heading {
        font-size: 26px;
        line-height: 1.25;
    }

    .article-detail-line {
        display: block;
        flex-wrap: wrap;
    }

    .article-detail-banner {
        display: inline-block;
        max-width: 140px;
        margin-top: 8px;
        vertical-align: middle;
    }

    .article-detail-banner img {
        width: 100%;
        height: auto;
    }

    /* Article body: sidebar drops below main content
       (Bootstrap col already stacks; tighten spacing) */
    .article-body-sidebar {
        margin-top: 40px;
    }

    .impact-cta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .impact-cta-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .impact-cta-buttons a {
        text-align: center;
        width: 100%;
    }

    /* Stay Connected grid: single column on mobile */
    .altbig-connect-grid {
        grid-template-columns: 1fr !important;
    }

    /* Featured work grid: single column */
    .featured-work-grid {
        grid-template-columns: 1fr !important;
    }

    /* CTA banner section: stack left/right, center align */
    .cta-banner-section .cta-banner-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .cta-banner-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* Insight cards: reduce fixed height so text isn't cut off */
    .insight-box {
        height: auto;
        min-height: 320px;
    }

    /* Content line + intro block: stack vertically on small screens */
    .content-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-line {
        display: none; /* decorative divider not needed when stacked */
    }

    .pitch-logo1 {
        margin: 0 auto 20px;
        display: block;
    }

    .insights-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .explore-btn {
        width: 100%;
        justify-content: center;
    }
}

/* -----------------------------------------------------------
   Small phones (<= 575px)
   ----------------------------------------------------------- */
@media (max-width: 575px) {

    .article-detail-heading {
        font-size: 22px;
    }

    .article-detail-banner {
        max-width: 110px;
    }

    .arh-split-title {
        font-size: 26px;
    }

    .arh-split-desc {
        font-size: 14px;
    }

    .arh-split-btn {
        display: block;
        text-align: center;
        width: 100%;
    }

    .authority-slide-heading {
        font-size: 22px;
    }

    .authority-side-title {
        font-size: 18px;
    }

    .insights-filter-section .filter-tab {
        font-size: 12px;
        padding: 8px 12px;
    }

    .footer-logo {
        width: 160px;
    }

    .footer-contact a {
        font-size: 12px;
        margin-left: 8px;
    }

    .rtb-footer-cta-heading {
        font-size: 26px;
    }

    .rtb-footer-cta-desc {
        font-size: 14px;
    }

    .rtb-footer-cta-btn-solid,
    .rtb-footer-cta-btn-link {
        display: block;
        width: 100%;
        text-align: center;
    }

    .pitch-logo1 {
        width: 130px;
    }

    .insights-title {
        font-size: 1.5rem;
    }
}