/* Bundle 12 - Website + Engineering Portal mobile runtime readiness
   Scope: public Website, Engineering Portal and Gearbox Compiler only. Admin is desktop-only. */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

/* Public website mobile hardening */
@media (max-width: 991px) {
    .navbar .container,
    .top-bar .container,
    footer .container,
    .container {
        max-width: 100%;
    }

    .navbar-brand img {
        max-width: 170px !important;
        height: auto !important;
    }

    .navbar-collapse {
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .navbar-nav > li > a {
        white-space: normal;
        line-height: 1.35;
    }

    .row {
        min-width: 0;
    }

    [class*="col-"] {
        min-width: 0;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        max-width: 100%;
        white-space: normal;
    }

    .product-box,
    .service-box,
    .portfolio-item,
    .card-like,
    .team-member,
    .news-box {
        max-width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    .top-bar .contact-details,
    .top-bar .social-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding-left: 0;
    }

    .top-bar .contact-details li,
    .top-bar .social-list li {
        float: none !important;
        max-width: 100%;
        word-break: break-word;
    }

    .navbar-brand {
        max-width: calc(100vw - 86px);
        overflow: hidden;
    }

    .navbar-brand img {
        max-width: 155px !important;
    }

    .footer-details .pull-right {
        float: none !important;
        display: block;
        margin-top: 6px;
    }

    .contact-form .padding-left-zero,
    .contact-form .padding-right-zero {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    table:not(.portal-compare-table) {
        max-width: 100%;
    }
}

/* Engineering Portal mobile navigation and pages */
@media (max-width: 980px) {
    .engineering-portal-body .ep-shell {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
        min-height: 0;
    }

    .engineering-portal-body .ep-brand {
        min-width: 0;
        flex: 1 1 auto;
        max-width: calc(100% - 82px);
    }

    .engineering-portal-body .ep-brand-mark {
        width: 92px;
        height: 38px;
        flex: 0 0 auto;
    }

    .engineering-portal-body .ep-brand-mark img {
        max-width: 82px;
        max-height: 28px;
    }

    .engineering-portal-body .ep-brand-text strong {
        font-size: 14px;
    }

    .engineering-portal-body .ep-brand-text em {
        display: none;
    }

    .engineering-portal-body .ep-menu-toggle {
        display: inline-block;
    }

    .engineering-portal-body .ep-nav.collapse {
        display: none !important;
    }

    .engineering-portal-body .ep-nav.collapse.in,
    .engineering-portal-body .ep-nav.collapsing {
        display: flex !important;
    }

    .engineering-portal-body .ep-nav {
        flex: 1 0 100%;
        width: 100%;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        overflow: visible;
        padding: 6px 0 4px;
    }

    .engineering-portal-body .ep-nav a {
        display: block;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 10px;
        background: rgba(255,255,255,.04);
    }

    .engineering-portal-body .ep-account {
        order: 3;
        flex: 1 0 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
    }

    .engineering-portal-body .ep-user {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    .engineering-portal-body .ep-main {
        min-height: auto;
    }

    .engineering-portal-body .ep-dashboard,
    .engineering-portal-body .ep-page-shell {
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 16px;
        margin-bottom: 24px;
    }

    .engineering-portal-body .ep-dashboard-hero,
    .engineering-portal-body .ep-page-header,
    .engineering-portal-body .ep-panel,
    .engineering-portal-body .ep-profile-card,
    .engineering-portal-body .ep-activity-panel {
        border-radius: 14px;
        padding: 18px;
    }

    .engineering-portal-body .ep-dashboard-hero h1,
    .engineering-portal-body .ep-page-header h1,
    .engineering-portal-body .portal-header h1,
    .engineering-portal-body .ep-auth-intro h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .engineering-portal-body .ep-card-grid,
    .engineering-portal-body .ep-dashboard-grid,
    .engineering-portal-body .ep-snapshot-grid,
    .engineering-portal-body .ep-detail-grid,
    .engineering-portal-body .ep-form-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .engineering-portal-body .ep-action-row,
    .engineering-portal-body .ep-header-actions,
    .engineering-portal-body .ep-hero-actions,
    .engineering-portal-body .ep-project-link-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .engineering-portal-body .ep-action-row .btn,
    .engineering-portal-body .ep-header-actions a,
    .engineering-portal-body .ep-hero-actions a,
    .engineering-portal-body .ep-project-link-form .btn,
    .engineering-portal-body .ep-primary-btn,
    .engineering-portal-body .ep-secondary-btn {
        width: 100% !important;
        text-align: center;
    }

    .engineering-portal-body .ep-project-link-form .ep-project-select-wrap,
    .engineering-portal-body .ep-project-link-form .ep-project-select,
    .engineering-portal-body select,
    .engineering-portal-body input,
    .engineering-portal-body textarea {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .engineering-portal-body .table,
    .engineering-portal-body .portal-table,
    .engineering-portal-body .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .engineering-portal-body .table {
        display: block;
        white-space: nowrap;
    }

    .engineering-portal-body .portal-compare-table th,
    .engineering-portal-body .portal-compare-table td {
        min-width: 130px;
    }

    .engineering-portal-body .portal-compare-table th:first-child,
    .engineering-portal-body .portal-compare-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
    }

    .engineering-portal-body .portal-compare-table thead th:first-child {
        background: #07111d;
    }

    .engineering-portal-body .ep-auth-wrap {
        align-items: flex-start;
        padding: 18px 12px;
    }

    .engineering-portal-body .ep-auth-card {
        padding: 24px 18px;
        border-radius: 16px;
    }
}

/* Gearbox Compiler mobile hardening */
@media (max-width: 991px) {
    .gbx-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .gbx-wizard,
    .gbx-panel,
    .gbx-card,
    .card-like {
        max-width: 100%;
        overflow: hidden;
    }

    .gbx-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .gbx-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    .gbx-row,
    .gbx-grid,
    .gbx-step3-top,
    .gbx-two-col,
    .gbx-result-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }

    #gbxStep3 .gbx-step3-mount,
    #gbxStep3 .gbx-step3-shafts {
        min-width: 0 !important;
        width: 100%;
    }

    #gbxStep3 .gbx-mount-grid,
    .gbx-mount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gbx-choice-img,
    .gbx-preview {
        min-height: 180px;
        height: auto;
    }

    .gbx-choice-img img,
    .gbx-preview img {
        max-height: 190px;
        object-fit: contain;
    }

    .gbx-action-group-main,
    .gbx-download-quick-actions,
    .gbx-action-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .gbx-action-group-main .btn,
    .gbx-download-quick-actions .btn,
    .gbx-action-group .btn,
    .gbx-nav .btn,
    .gbx-btn,
    .gbx-btn-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .gbx-download-menu,
    .gbx-download-menu .dropdown-toggle {
        width: 100%;
    }

    .gbx-download-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100%;
        min-width: 0;
    }

    #gbxQuoteModal .modal-dialog,
    #gbxPortalSaveModal .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }

    #gbxQuoteModal .modal-content,
    #gbxPortalSaveModal .modal-content {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }
}

@media (max-width: 520px) {
    #gbxStep3 .gbx-mount-grid,
    .gbx-mount-grid,
    .gbx-card-grid,
    .gbx-choice-grid {
        grid-template-columns: 1fr !important;
    }

    .gbx-mini-choice img,
    #gbxStep3 .gbx-mini-choice img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 180px;
    }

    .gbx-panel-title,
    .gbx-step-title,
    .gbx-result-title {
        font-size: 20px !important;
        line-height: 1.2;
    }
}

/* =========================================================
   Bundle 12 Hotfix 1: Mobile/public click border regression
   ---------------------------------------------------------
   Bundle 12 re-linked mobile assets after the earlier public
   focus-border fix. Re-apply the cleanup at the end of the
   mobile stylesheet so mobile/touch focus does not leave dark
   permanent borders around product/service/gearbox cards.

   Accessibility is preserved: keyboard users still receive a
   neat gold focus-visible outline.
   ========================================================= */
body:not(.engineering-portal-body) a:focus,
body:not(.engineering-portal-body) button:focus,
body:not(.engineering-portal-body) .btn:focus,
body:not(.engineering-portal-body) [role="button"]:focus,
body:not(.engineering-portal-body) input[type="submit"]:focus,
body:not(.engineering-portal-body) input[type="button"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

body:not(.engineering-portal-body) a:focus-visible,
body:not(.engineering-portal-body) button:focus-visible,
body:not(.engineering-portal-body) .btn:focus-visible,
body:not(.engineering-portal-body) [role="button"]:focus-visible,
body:not(.engineering-portal-body) input[type="submit"]:focus-visible,
body:not(.engineering-portal-body) input[type="button"]:focus-visible {
    outline: 2px solid #d7a928 !important;
    outline-offset: 3px !important;
}

body:not(.engineering-portal-body) a:focus img,
body:not(.engineering-portal-body) a:active img,
body:not(.engineering-portal-body) a:focus .picture,
body:not(.engineering-portal-body) a:active .picture,
body:not(.engineering-portal-body) a:focus .description,
body:not(.engineering-portal-body) a:active .description,
body:not(.engineering-portal-body) a:focus .category,
body:not(.engineering-portal-body) a:active .category,
body:not(.engineering-portal-body) a:focus .text-overlay,
body:not(.engineering-portal-body) a:active .text-overlay,
body:not(.engineering-portal-body) a:focus .product-box,
body:not(.engineering-portal-body) a:active .product-box,
body:not(.engineering-portal-body) a:focus .service-box,
body:not(.engineering-portal-body) a:active .service-box,
body:not(.engineering-portal-body) a:focus .portfolio-item,
body:not(.engineering-portal-body) a:active .portfolio-item,
body:not(.engineering-portal-body) a:focus .gbx-card,
body:not(.engineering-portal-body) a:active .gbx-card,
body:not(.engineering-portal-body) a:focus .gbx-choice-img,
body:not(.engineering-portal-body) a:active .gbx-choice-img,
body:not(.engineering-portal-body) a:focus .gbx-preview,
body:not(.engineering-portal-body) a:active .gbx-preview {
    outline: none !important;
    box-shadow: none !important;
}

@media (hover: none), (max-width: 991px) {
    body:not(.engineering-portal-body) a:focus:not(:focus-visible),
    body:not(.engineering-portal-body) button:focus:not(:focus-visible),
    body:not(.engineering-portal-body) .btn:focus:not(:focus-visible),
    body:not(.engineering-portal-body) [role="button"]:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
}