/*
 * Phase 17 — responsive / interaction hardening.
 * Loaded after the supplied static styles and WordPress adapter so the static
 * design remains the baseline while narrow-screen and input-mode edge cases
 * are fixed without changing ACF content semantics.
 */

html {
    overflow-x: clip;
}

body,
#page,
.site,
main,
section,
article,
.themeflat-container,
.themeflat-container2,
.themeflat-container3 {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

.prodeta-edit img{
    min-height: 300px;
}

iframe {
    max-width: 100%;
}

.velaxiz-content iframe,
.prodeta-edit iframe,
.solution-details-content iframe,
.blogdeta-edit iframe,
.case-edits iframe,
.support-how-edit iframe {
    width: 100%;
}

.velaxiz-content pre,
.prodeta-edit pre,
.solution-details-content pre,
.blogdeta-edit pre,
.case-edits pre,
.support-how-edit pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.velaxiz-content table,
.prodeta-edit table,
.solution-details-content table,
.blogdeta-edit table,
.case-edits table,
.support-how-edit table,
.term-table {
    max-width: 100%;
}

/* Desktop navigation: compact the 992–1280px range so the complete primary
 * menu remains inside the header instead of colliding with the search control. */
@media (min-width: 992px) and (max-width: 1280px) {
    .header-inner {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .header-inner .logo {
        flex: 0 0 auto;
    }

    .header-inner .logo img {
        height: 52px;
    }

    .header-inner .nav-wrap {
        min-width: 0;
        flex: 1 1 auto;
    }

    #mainnav > ul.menu {
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }

    #mainnav > ul.menu > li {
        float: none;
        min-width: 0;
        padding: 31px 5px;
    }

    #mainnav ul li a {
        font-size: 13px;
        letter-spacing: .055em;
        white-space: nowrap;
    }

    .header-right {
        flex: 0 0 auto;
        gap: 12px;
    }
}

/* Keep ordinary desktop submenus inside the viewport near the right edge. */
@media (min-width: 992px) {
    #mainnav > ul.menu > li:nth-last-child(-n + 3) > ul.submenu {
        right: 0;
        left: auto;
    }

    #mainnav > ul.menu > li:nth-last-child(-n + 3) > ul.submenu ul.submenu {
        right: 100%;
        left: auto;
        margin-right: 20px;
        margin-left: 0;
    }

}

/* Mobile/tablet header: keep Search available, then place the menu trigger at
 * the far right. The quote button remains a desktop control, matching source. */
@media (max-width: 991px) {
    #header .themeflat-container {
        width: calc(100% - 32px);
    }

    #header .header-inner {
        min-height: 76px;
        flex-wrap: nowrap;
        gap: 10px;
    }

    #header .header-inner > #logo {
        order: 1;
        min-width: 0;
        margin: 8px 0;
        flex: 1 1 auto;
    }

    #header .header-inner > #logo img {
        display: block;
        max-width: min(180px, 46vw);
        height: 50px;
        object-fit: contain;
        object-position: left center;
    }

    #header .header-inner > .header-right {
        order: 2;
        display: flex;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 8px;
    }

    #header .header-inner > .header-right .btn-contact {
        display: none !important;
    }

    #header .header-inner > .nav-wrap {
        order: 3;
        flex: 0 0 auto;
    }

    #header .btn-menu,
    #header .show-search {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #header .btn-menu {
        line-height: 1;
    }

    #header .header-right .search .widget-search {
        top: calc(100% + 12px);
        right: 0;
        left: auto;
        width: min(320px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }

    #mainnav-mobi {
        width: min(360px, calc(100vw - 40px));
        max-width: none;
        left: -100vw;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #mainnav-mobi.active {
        left: 0;
    }

    #mainnav-mobi ul > li > a {
        min-height: 55px;
        height: auto;
        line-height: 1.4;
        padding-top: 17px;
        padding-right: 58px;
        padding-bottom: 17px;
        overflow-wrap: anywhere;
    }

    #mainnav-mobi .btn-submenu {
        right: 8px;
        width: 46px;
        min-width: 46px;
        height: 55px;
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transform: none;
    }

    #mainnav-mobi > ul > li > ul > li > a,
    #mainnav-mobi ul.submenu > li > a,
    #mainnav-mobi ul.sub-menu > li > a {
        padding-left: 30px !important;
    }

    #mainnav-mobi > ul > li > ul > li > ul > li > a {
        padding-left: 46px !important;
    }

    body.velaxiz-mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .overlay-menu-mobie.active {
        overscroll-behavior: contain;
    }
}

@media (max-width: 767px) {
    #header .themeflat-container {
        width: calc(100% - 24px);
    }

    #header .header-inner {
        min-height: 68px;
        gap: 6px;
    }

    #header .header-inner > #logo img {
        max-width: min(160px, 44vw);
        height: 44px;
    }

    #header .btn-menu,
    #header .show-search {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }
}

/* Forms and system controls: no horizontal overflow and comfortable touch
 * targets on phones/tablets. */
input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 991px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    button,
    input[type="submit"],
    .btn-contact,
    .feature__btn,
    .section__more,
    .about__btn,
    .app__btn,
    .support-main-link,
    .support-video-readmore {
        min-height: 44px;
    }

    .contact-form-box,
    .velaxiz-cf7-grid,
    .footer .newsletter,
    .footer .newsletter__form-host,
    .footer form.newsletter__form {
        min-width: 0;
        max-width: 100%;
    }

    .wpcf7-form-control-wrap,
    .wpcf7-form-control,
    .contact-form-box input,
    .contact-form-box textarea,
    .velaxiz-cf7-grid input,
    .velaxiz-cf7-grid textarea {
        max-width: 100%;
    }
}

/* Long card/menu content must wrap rather than expanding the layout. */
.product-name,
.product-series,
.card__title,
.card__desc,
.entry__title,
.entry__desc,
.blog-liinks .tits,
.case-conts .tits,
.support-video-cont .tits,
.footer .brand__desc,
.footer .col__list a,
.search-result-card,
.velaxiz-term-card__body,
.download-items .conts,
.prodeta-info .rights,
.prodeta-download-link,
.news-nav-link .title {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Horizontal local navigation stays usable instead of wrapping into uneven
 * rows on narrow screens. */
@media (max-width: 768px) {
    .about-nav-list,
    .prodeta-nav-list,
    .velaxiz-tax-tabs,
    .support-download-nav {
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .velaxiz-tax-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .velaxiz-tax-tabs::-webkit-scrollbar {
        display: none;
    }

    .velaxiz-tax-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .support-term-content,
    .velaxiz-content,
    .prodeta-edit,
    .solution-details-content,
    .blogdeta-edit,
    .case-edits,
    .support-how-edit {
        max-width: 100%;
    }
}

/* Product detail navigation may be sticky below the header on phones. */
@media (max-width: 768px) {
    .prodeta-nav {
        top: 68px;
        z-index: 100;
    }

    body.admin-bar .prodeta-nav {
        top: 68px;
    }
}

/* Footer: CF7 can inject extra wrappers/messages; keep them from stretching
 * the row beyond the viewport. */
@media (max-width: 767px) {
    .footer .footer__top,
    .footer .footer__mid {
        width: 100%;
    }

    .footer .contact,
    .footer .contact__label,
    .footer .socials,
    .footer .newsletter,
    .footer .newsletter__form-host,
    .footer form.newsletter__form {
        max-width: 100%;
    }

    .footer .contact__label a,
    .footer .brand__desc,
    .footer .footer__bottom {
        overflow-wrap: anywhere;
    }

    .footer .certs {
        flex-wrap: wrap;
    }
}

/* Hover-only effects should not remain visually stuck after taps. */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover .product-image img,
    .page-shell .product-card:hover .product-image img,
    .series__item:hover .series__thumb,
    .product-series-content:hover .img_box img,
    .home-product .card:hover .card__image img,
    .home-solution .card:hover .card__img img,
    .home-case .card:hover .card__img img {
        transform: none;
    }
}

/* Keyboard visibility for controls introduced by dynamic WordPress markup. */
.btn-menu:focus-visible,
.close-btn:focus-visible,
.show-search:focus-visible,
#mainnav-mobi a:focus-visible,
#mainnav-mobi .btn-submenu:focus-visible,
.support-faq-list .hds:focus-visible,
.prodeta-faq-item .hds:focus-visible,
[data-download-filter]:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Respect reduced-motion preferences across theme-created interactions. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 991px) {
    #header .btn-menu.hidden {
        visibility: hidden;
        pointer-events: none;
    }
}

/* The static responsive sheet targets .footer__brand, while the canonical
 * WordPress footer markup keeps the original .brand class. Make the brand
 * span the full first row at tablet widths before the footer collapses to a
 * single column on phones. */
@media (min-width: 769px) and (max-width: 991px) {
    .footer .footer__mid > .brand {
        grid-column: 1 / -1;
    }
}

/* v1.34 Product detail: keep the complete module navigation in one stable row.
 * More modules are now represented, so overflow scrolls horizontally instead
 * of changing the frontend order by wrapping into multiple rows. */
.prodeta-nav-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.prodeta-nav-list::-webkit-scrollbar { display: none; }
.prodeta-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
}