/*
 * Breeze AI — Responsive Layer
 * ----------------------------------------------------------------------------
 * Pure responsive optimisation. Loaded AFTER style.css so it only layers
 * scoped overrides at smaller viewports — the desktop design is left 100%
 * untouched. No colours, fonts, animations or markup are changed here.
 *
 * Desktop-first max-width queries are used to match the existing stylesheet's
 * pattern and guarantee desktop rules are never affected.
 *
 * Breakpoints covered: 1400, 1200, 992, 820, 768, 576, 480, 414, 375, 360, 320
 * ----------------------------------------------------------------------------
 */

/* ===========================================================================
   GLOBAL SAFETY — prevent horizontal scroll & stretched media everywhere
   =========================================================================== */
/* IMPORTANT: overflow-x lives on <html> ONLY.
   The base theme sets `body, html { height: 100% }`. Adding overflow-x:hidden
   to <body> forces its computed overflow-y to `auto`, turning the fixed-height
   <body> into a nested scroll container — that stops `window` scroll events
   from firing and breaks the header's transparent → solid-blue scroll swap.
   <html>'s overflow is propagated to the viewport, so the page still scrolls
   on `window` and horizontal scroll is still clipped. */
html {
    max-width: 100%;
    overflow-x: hidden;
}
body {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* Long words / headings should wrap instead of forcing the page wider */
h1, h2, h3, h4, h5, h6,
p, a, span, li,
.text20, .text22, .text28 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Bootstrap rows should never create overflow from negative gutters */
.row {
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================================================
   NAVBAR / HEADER OFFSET — keep fixed navbar from covering content
   =========================================================================== */
/* navbar-expand-lg switches to the full desktop nav at >=992px, but the
   desktop padding-top (80px) only kicks in at >=1024px. Cover the 992–1023 gap. */
@media (min-width: 992px) and (max-width: 1023px) {
    body { padding-top: 70px; }
}

/* ===========================================================================
   HEADER / NAV — mobile (< 992px, where navbar-expand-lg is collapsed)
   ---------------------------------------------------------------------------
   Goal: logo + Log In + Request Demo + hamburger ALWAYS fit on one row with
   no clipping, no overflow and no disappearing controls, down to 320px.
   The fixed/sticky behaviour and the transparent→solid scroll swap are driven
   by JS (.scrolled-fixed-top) and are intentionally left alone.
   =========================================================================== */
@media (max-width: 991.98px) {

    /* Vertically centre the top bar. Bootstrap's default flex-wrap:wrap is
       kept so the collapsing menu can still drop onto its own line when it
       opens — only the inner action cluster is forced nowrap (below). */
    #header .container-fluid {
        align-items: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Logo always visible and never wider than its share of the bar. */
    #header .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: 8px;
    }
    #header .navbar-brand img,
    #header .navbar-brand .custom-logo {
        height: 38px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
    }

    /* Mobile action cluster (Log In + Request Demo + toggler) stays in a row
       and is allowed to shrink, but its children never wrap their own text. */
    #header .d-lg-none.d-inline-flex {
        flex: 0 0 auto;
        align-items: center;
        flex-wrap: nowrap;
    }
    #header .d-lg-none .btn {
        white-space: nowrap;
        line-height: 1.2;
    }

    /* Hamburger: always shown, comfortably tappable, never clipped. */
    #header .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 40px;
        min-height: 40px;
        padding: 4px;
    }
    #header .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Expanded menu: solid backdrop so links stay readable over light heroes,
       full-width tap targets, smooth Bootstrap collapse preserved. */
    #header .navbar-collapse {
        background: #2A53A2;
        margin-top: 12px;
        padding: 12px 16px;
        border-radius: 10px;
    }
    #header .navbar-nav {
        padding-bottom: 6px;
    }
    .navbar-nav li {
        margin-right: 0;
        margin-bottom: 4px;
    }
    .navbar-nav .nav-link {
        padding: 8px 4px;
    }
    /* Dropdown submenus render inline inside the collapsed menu */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        border: 0;
        margin: 4px 0 8px;
        background: rgba(0, 0, 0, 0.15);
    }
    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 6px 10px;
    }
}

/* ---- Graduated button/logo sizing so the bar fits the smallest phones ---- */
@media (max-width: 575.98px) {
    #header .navbar-brand img,
    #header .navbar-brand .custom-logo {
        height: 34px;
        max-width: 130px;
    }
    #header .d-lg-none .btn {
        padding: 6px 10px;
        font-size: 1.3rem;
    }
    #header .d-lg-none .btn.me-1,
    #header .d-lg-none .btn.me-2 {
        margin-right: 0.25rem !important;
    }
    #header .navbar-toggler {
        min-width: 38px;
        min-height: 38px;
    }
    #header .navbar-toggler svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 414px) {
    #header .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    #header .navbar-brand img,
    #header .navbar-brand .custom-logo {
        height: 30px;
        max-width: 110px;
    }
    #header .d-lg-none .btn {
        padding: 5px 9px;
        font-size: 1.2rem;
    }
}

@media (max-width: 360px) {
    #header .navbar-brand img,
    #header .navbar-brand .custom-logo {
        height: 28px;
        max-width: 92px;
    }
    #header .d-lg-none .btn {
        padding: 4px 7px;
        font-size: 1.12rem;
    }
    #header .d-lg-none .btn.me-1,
    #header .d-lg-none .btn.me-2 {
        margin-right: 0.15rem !important;
    }
    #header .navbar-toggler {
        min-width: 34px;
        min-height: 34px;
        padding: 2px;
    }
    #header .navbar-toggler svg {
        width: 24px;
        height: 24px;
    }
}

/* ===========================================================================
   BANNER TEXT & BUTTONS — Home hero (.home-banner) + About/inner banner
   (.inner-banner). Both share .banner-overlay h1 / .text20, so this graduated
   type scale keeps headings and subheadings readable on every device.
   Desktop (5rem) and tablet (42px, set in style.css) are intentionally NOT
   touched — these rules only kick in at <=575px. Only text & buttons change.
   =========================================================================== */

/* ---- Heading + subheading: graduated mobile scale ---- */
@media (max-width: 575.98px) {
    .banner-overlay h1 { font-size: 30px; }
    .banner-overlay .text20 { font-size: 17px; }
}
@media (max-width: 480px) {
    .banner-overlay h1 { font-size: 28px; }
    .banner-overlay .text20 { font-size: 16px; }
}
@media (max-width: 414px) {
    .banner-overlay h1 { font-size: 26px; }
}
@media (max-width: 375px) {
    .banner-overlay h1 { font-size: 25px; }
    .banner-overlay .text20 { font-size: 15px; }
}
@media (max-width: 360px) {
    .banner-overlay h1 { font-size: 24px; }
}
@media (max-width: 320px) {
    .banner-overlay h1 { font-size: 22px; }
    .banner-overlay .text20 { font-size: 14px; }
}

/* ---- Home hero CTA buttons: stack vertically, full-width, equal gap ---- */
@media (max-width: 575.98px) {
    .home-banner .banner-overlay .btn {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }
    .home-banner .banner-overlay .btn:last-child {
        margin-bottom: 0;
    }
    /* Home hero only (exclude inner banners) — trim the large top offset a bit */
    .home-banner:not(.inner-banner) .container {
        padding-top: 70px !important;
    }
}

/* ---- Keep banner text from touching the screen edges on phones ---- */
@media (max-width: 575.98px) {
    .home-banner .container,
    .inner-banner .container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ---- About/inner banner: genuinely centre the text on mobile. The base
        90px top padding + mt-5 push it off-centre and can clip on the shorter
        mobile banner; neutralise them with symmetric padding so the flex
        align-items-center keeps the text vertically centred and clear of edges. */
@media (max-width: 767.98px) {
    .inner-banner .container {
        margin-top: 0 !important;
        padding-top: 24px !important;
        padding-bottom: 24px;
    }
}

/* ===========================================================================
   INNER BANNER (about / features / downloads / faqs / contact / pricing)
   The base CSS forces 650px !important — scale it down on smaller screens so
   the heading isn't lost in a huge empty band. !important required to win.
   =========================================================================== */
@media (max-width: 991.98px) {
    .inner-banner,
    .inner-banner .banner-overlay,
    .inner-banner img {
        height: 520px !important;
        min-height: 520px !important;
    }
}

@media (max-width: 767.98px) {
    .inner-banner,
    .inner-banner .banner-overlay,
    .inner-banner img {
        height: 420px !important;
        min-height: 420px !important;
    }
}

@media (max-width: 480px) {
    .inner-banner,
    .inner-banner .banner-overlay,
    .inner-banner img {
        height: 360px !important;
        min-height: 360px !important;
    }
}

/* ===========================================================================
   FRONT-PAGE FEATURE STRIP (.first-sextion)
   5 cells use .col-4 (3 per row) on phones; the .p-5 padding leaves almost no
   room for content at that width and causes overflow. Tighten the padding.
   =========================================================================== */
@media (max-width: 767.98px) {
    .first-sextion .p-5 {
        padding: 1.25rem 0.5rem !important;
    }
    .first-sextion .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    .first-sextion svg {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .first-sextion .p-5 {
        padding: 1rem 0.35rem !important;
    }
    .first-sextion .text20 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
}

/* ===========================================================================
   CARD SECTIONS (platform / how-it-works / philosophy / industries /
   mobile-features / resources / pricing / contact info / downloads)
   Reduce oversized inner padding on phones so card content breathes.
   =========================================================================== */
@media (max-width: 575.98px) {
    .border.rounded-4.p-5,
    .rounded-4.p-5,
    .bg-blue.rounded-4.p-5 {
        padding: 1.75rem !important;
    }
    .icon-box {
        width: 56px;
        height: 56px;
    }
}

/* ===========================================================================
   SHOWCASE TABS (nav-pills) — wrap nicely on small screens
   =========================================================================== */
@media (max-width: 575.98px) {
    #pills-tab {
        gap: 4px;
    }
    .nav-pills .nav-item {
        margin: 4px;
    }
    .nav-pills .nav-link {
        font-size: 1.4rem;
        padding: 5px 12px;
    }
}

/* ===========================================================================
   FAQ ACCORDION — keep long questions/answers readable on phones
   =========================================================================== */
@media (max-width: 575.98px) {
    .accordion-button {
        font-size: 1.6rem;
        padding: 15px 12px;
        line-height: 1.4;
    }
    .accordion-body {
        font-size: 1.5rem;
    }
}

/* ===========================================================================
   FORMS (custom contact form + Contact Form 7) — full-width fields & button
   =========================================================================== */
@media (max-width: 767.98px) {
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 input[type="number"],
    .wpcf7 textarea,
    .wpcf7 select {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .wpcf7 input[type="submit"],
    .wpcf7 .wpcf7-submit,
    #breeze-contact-form .btn {
        width: 100%;
    }
}

/* ===========================================================================
   DOWNLOADS — QR code + requirements block (.d-md-flex stacks < md natively;
   just keep the QR from stretching and add spacing when stacked)
   =========================================================================== */
@media (max-width: 767.98px) {
    .d-md-flex > div:first-child {
        margin-bottom: 1rem;
    }
}

/* ===========================================================================
   CONTACT — map embed. ratio-21x9 (≈43% tall) is too short to be usable on
   phones; give it a taller aspect ratio for legibility. Same content.
   =========================================================================== */
@media (max-width: 767.98px) {
    .ratio-21x9 {
        --bs-aspect-ratio: 65%;
    }
}

/* ===========================================================================
   FOOTER — CTA buttons + columns
   =========================================================================== */
@media (max-width: 575.98px) {
    /* Footer CTA banner buttons: avoid side-by-side overflow */
    section.bg-blue .btn {
        display: inline-block;
        margin-right: 0 !important;
    }
    .ftbottom-links a {
        margin-right: 16px;
    }
}

/* Footer text already centres < md via base CSS; keep social links inline-centred */
@media (max-width: 767.98px) {
    .footer .social-links {
        justify-content: center;
    }
    .footer .d-inline-block.text-start {
        text-align: left;
    }
}