@charset "utf-8";

/*
 * Tamtec common mobile patch
 * Scope: theme-wide responsive behavior only.
 * Existing design CSS files are not modified.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

input, select, textarea, button {
    font-size: 16px;
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .tm-site,
    .tm-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .tm-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .tm-header__inner {
        width: 100%;
        max-width: 100%;
        height: 64px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .tm-logo img {
        max-width: 150px;
        height: auto;
    }

    .tm-gnb,
    .tm-mega {
        display: none !important;
    }

    .tm-header__actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tm-action,
    .tm-menu-toggle,
    .tm-search-open {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    .tm-menu-toggle {
        display: inline-flex !important;
    }

    .tm-menu-toggle span {
        display: block;
    }

    .tm-mobile-nav {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        pointer-events: none;
    }

    .tm-mobile-nav[aria-hidden="false"],
    body.is-mobile-menu-open .tm-mobile-nav,
    html.is-mobile-menu-open .tm-mobile-nav {
        pointer-events: auto;
    }

    .tm-mobile-nav__panel {
        width: min(92vw, 420px) !important;
        max-width: 420px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .tm-mobile-nav__head {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .tm-mobile-menu__main,
    .tm-mobile-menu__sub a,
    .tm-mobile-menu__third a {
        min-height: 44px;
        display: flex;
        align-items: center;
        word-break: keep-all;
        line-height: 1.4;
    }

    .tm-section,
    .tm-subvisual,
    .tm-page,
    .tm-page-section,
    .tm-container,
    .tm-inner,
    [class*="__inner"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    .tm-section,
    .tm-page-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tm-grid,
    .tm-grid--2,
    .tm-grid--3,
    .tm-grid--4,
    .tm-card-grid,
    .tm-product-grid,
    .tm-application-grid,
    .tm-company-grid {
        grid-template-columns: 1fr !important;
    }

    table {
        max-width: 100%;
    }

    .tbl_wrap,
    .table-wrap,
    .tm-table-wrap,
    .tm-scroll-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 760px) {
    .tm-header__inner {
        height: 60px;
        padding: 0 14px;
    }

    .tm-logo img {
        max-width: 136px;
    }

    .tm-action,
    .tm-menu-toggle,
    .tm-search-open {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .tm-mobile-nav__panel {
        width: min(94vw, 390px) !important;
    }
}