/* Global responsive hardening for all customer themes. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

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

iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

pre,
code,
kbd,
samp,
.font-monospace,
.font-mono {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre {
    white-space: pre-wrap;
    overflow-x: auto;
}

table {
    width: 100%;
}

.table-responsive,
.overflow-x-auto,
[class*="overflow-x-auto"] {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

@supports selector(:has(table)) {
    main :where(.modern-card, .glass-card, .pixel-card, .brutal-card, .card, section, div):has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

body :where(.min-w-0, .flex-1, main, header, section, article, .grid, .card, .modern-card, .glass-card, .pixel-card, .brutal-card) {
    min-width: 0;
}

main :where(a, p, span, div, h1, h2, h3, h4, h5, h6, label, small) {
    overflow-wrap: anywhere;
}

main :where(input, select, textarea) {
    min-height: 44px;
}

main :where(button, a[class*="btn"], .modern-btn, .modern-btn-outline, .glass-button, .pixel-btn, .pixel-button, .brutal-button) {
    min-height: 44px;
}

aside#sidebar {
    max-width: min(20rem, 88vw);
}

#sidebarOverlay,
.sidebar-overlay {
    touch-action: none;
}

@media (hover: none) {
    .group:hover .group-hover\:block {
        display: none;
    }

    .group:focus-within .group-focus-within\:block,
    .group:focus-within .group-hover\:block {
        display: block;
    }
}

@media (max-width: 1024px) {
    body > .min-h-screen,
    body > .flex,
    body .min-h-screen.flex {
        width: 100%;
        max-width: 100%;
    }

    header {
        position: sticky;
        top: 0;
    }

    header > div,
    header .flex {
        min-width: 0;
    }

    header h1 {
        min-width: 0;
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    aside#sidebar {
        width: min(18rem, 88vw) !important;
        max-width: 88vw;
    }

    aside#sidebar:not(.open) {
        visibility: hidden;
        pointer-events: none;
    }

    .sidebar.open,
    aside#sidebar.open {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    nav .container,
    nav[class] > div {
        min-width: 0;
    }

    nav .container > a,
    nav[class] > div > a {
        min-width: 0;
        max-width: 56vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    nav .container > div:last-child,
    nav[class] > div > div:last-child {
        min-width: 0;
        flex-shrink: 0;
    }

    .container,
    .container-fluid,
    main {
        width: 100%;
        max-width: 100%;
    }

    main {
        padding-inline: 1rem !important;
    }

    .grid[class*="grid-cols-2"],
    .grid[class*="grid-cols-3"],
    .grid[class*="grid-cols-4"],
    .grid[class*="grid-cols-5"],
    .grid[class*="grid-cols-6"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .modern-card,
    .glass-card,
    .pixel-card,
    .brutal-card {
        padding: 1rem !important;
    }

    .brutal-border {
        border-width: 2px !important;
    }

    .brutal-shadow,
    .brutal-shadow-sm {
        box-shadow: 3px 3px 0 #000 !important;
    }

    .font-arcade {
        font-size: 0.58rem !important;
        line-height: 1.5 !important;
    }

    table {
        min-width: 640px;
    }

    main :where(.flex[class*="justify-between"], .flex[class*="items-center"]) {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    main :where(.flex[class*="justify-between"], .flex[class*="items-center"]) > * {
        min-width: 0;
        max-width: 100%;
    }

    main :where(.flex[class*="items-center"]) > :where(.relative, select, input) {
        flex: 1 1 100%;
    }

    main :where(select, input[type="text"], input[type="search"], input[type="url"], input[type="number"], input[type="email"]) {
        width: 100% !important;
        min-width: 0;
    }

    main :where(.w-48, .w-56, .w-64, .w-72, .w-80, .w-96) {
        width: 100% !important;
    }

    main :where(.absolute.-right-4, .absolute.-right-6, .absolute.-right-8) {
        right: 0 !important;
    }

    header :where(.flex[class*="justify-between"], .flex[class*="items-center"]) {
        min-width: 0;
    }

    header > :where(.flex, div[class*="flex"]) {
        flex-wrap: wrap;
    }

    header > :where(.flex, div[class*="flex"]) > :last-child {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    header {
        padding-inline: 1rem !important;
    }

    header > div {
        gap: 0.75rem !important;
    }

    header h1 {
        max-width: 46vw;
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    main {
        padding: 0.875rem !important;
    }

    .modern-btn,
    .modern-btn-outline,
    .glass-button,
    .pixel-btn,
    .pixel-button,
    .brutal-button {
        padding-inline: 1rem !important;
    }

    main :where(.space-x-4, .space-x-6, .space-x-8, .space-x-12) > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0.75rem !important;
    }

    main :where(.gap-6, .gap-8, .gap-10, .gap-12) {
        gap: 1rem !important;
    }
}

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

    header h1 {
        max-width: 42vw;
    }

    main {
        padding: 0.75rem !important;
    }

    main :where(.text-4xl, .text-5xl, .text-6xl, .text-7xl) {
        font-size: clamp(1.75rem, 11vw, 2.5rem) !important;
        line-height: 1.08 !important;
    }

    main :where(.text-2xl, .text-3xl) {
        font-size: clamp(1.35rem, 7vw, 1.875rem) !important;
        line-height: 1.15 !important;
    }

    main :where(.px-8, .px-10, .px-12) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main :where(.py-8, .py-10, .py-12) {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    main :where(form .flex, .button-row, .actions) {
        flex-wrap: wrap;
    }

    main :where(form button, form .modern-btn, form .glass-button, form .pixel-btn, form .brutal-button) {
        width: 100%;
        justify-content: center;
    }
}