/*
 * RemoteCRW public and secure-page responsive layer.
 * Imported by access-public-theme.css after each page's legacy styles.
 */

@media screen {
    html,
    body {
        min-width: 320px;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    body > :is(main, header, footer, nav),
    body :is(
        main,
        section,
        article,
        header,
        footer,
        nav,
        form,
        fieldset,
        .card,
        .panel,
        .shell,
        .page-shell,
        .wrap,
        .container
    ) {
        min-width: 0;
        max-width: 100%;
    }

    body :is(img, video, canvas) {
        max-width: 100%;
        height: auto;
    }

    body iframe {
        width: 100%;
        max-width: 100%;
    }

    body :is(input, select, textarea, button) {
        min-width: 0;
        max-width: 100%;
    }

    body :is(h1, h2, h3, h4, p, li, td, th, label, small, strong, a) {
        overflow-wrap: anywhere;
    }

    body :is(
        .table-wrap,
        .table-scroll,
        .invoice-items-section,
        .invoice-table-wrap,
        .so-public-lines-wrap,
        .listing-applicant-table-wrap,
        [class$="-table-wrap"],
        [class$="-table-scroll"]
    ) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    body :is(
        .invoice-toolbar-actions,
        .invoice-payment-actions,
        .public-actions,
        .so-public-pay-actions,
        .so-public-form-actions,
        .hrc-submit-row,
        .submit-row,
        .actions,
        [class$="-actions"]
    ) {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 980px) {
    body :is(
        .so-public-grid,
        .hrc-content-grid,
        .public-document-layout,
        .request-card,
        .hero-grid,
        .monitor-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body :is(
        .so-public-aside,
        .hrc-side-column
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body :is(
        .invoice-toolbar,
        .public-document-topbar,
        .request-topbar
    ) {
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 760px) {
    body :is(
        .invoice-public,
        .so-public-shell,
        .hrc-public-shell,
        .listing-public-shell,
        .custom-apply-shell,
        .page-shell,
        .request-page,
        .public-document-layout,
        .shell,
        .wrap,
        .container
    ) {
        width: min(100% - 20px, 1180px) !important;
        margin-inline: auto !important;
        padding-right: max(0px, env(safe-area-inset-right)) !important;
        padding-left: max(0px, env(safe-area-inset-left)) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }

    body :is(
        .so-public-hero,
        .hrc-public-hero-inner,
        .listing-public-hero,
        .hero,
        .invoice-header,
        .request-intro,
        .request-form-panel,
        .public-document-card
    ) {
        padding: 22px !important;
    }

    body :is(
        .invoice-header,
        .invoice-toolbar,
        .public-document-topbar,
        .request-topbar,
        .candidate-head,
        .card-head,
        .submitted-card,
        .cta-box
    ) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body :is(
        .so-public-form,
        .so-public-summary,
        .so-public-meta,
        .so-public-aside,
        .hrc-side-column,
        .hrc-summary-grid,
        .hrc-form-grid,
        .hrc-choice-grid,
        .listing-form-grid,
        .custom-role-grid,
        .custom-admin-check-grid,
        .custom-audio-link-grid,
        .public-form-grid,
        .profile-grid,
        .experience-grid,
        .confirmation-grid,
        .guidance-grid,
        .schedule-form,
        .form-grid,
        .filters,
        .stats
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body :is(
        .so-public-form .wide,
        .public-form-grid .wide,
        .schedule-note,
        .schedule-button
    ) {
        grid-column: auto !important;
    }

    body :is(
        .invoice-toolbar-actions,
        .invoice-payment-actions,
        .public-actions,
        .so-public-form-actions,
        .hrc-submit-row,
        .submit-row,
        .actions,
        .filter-actions
    ) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body :is(
        .invoice-toolbar-actions,
        .invoice-payment-actions,
        .public-actions,
        .so-public-form-actions,
        .hrc-submit-row,
        .submit-row,
        .actions,
        .filter-actions
    ) > :is(a, button, .btn, .button, form) {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    body :is(
        .invoice-button,
        .public-button,
        .so-public-button,
        .hrc-primary-button,
        .hrc-secondary-button,
        .primary-button,
        .secondary-button,
        .schedule-button,
        .history-button,
        .btn,
        button
    ) {
        min-height: 44px;
    }

    body .public-document-frame-card iframe {
        min-height: 65dvh;
    }
}

@media screen and (max-width: 560px) {
    body :is(
        .invoice-public,
        .so-public-shell,
        .hrc-public-shell,
        .listing-public-shell,
        .custom-apply-shell,
        .page-shell,
        .request-page,
        .public-document-layout,
        .shell,
        .wrap,
        .container
    ) {
        width: min(100% - 14px, 1180px) !important;
    }

    body :is(
        .so-public-hero,
        .hrc-public-hero-inner,
        .listing-public-hero,
        .hero,
        .invoice-header,
        .request-intro,
        .request-form-panel,
        .public-document-card,
        .page-shell > .section
    ) {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    body :is(
        .enterprise-assurance,
        .features,
        .rules,
        .check-grid,
        .tk-grid,
        .money,
        .payroll-money,
        .profile
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body :is(
        .invoice-public,
        .so-public-shell,
        .hrc-public-shell,
        .listing-public-shell,
        .custom-apply-shell,
        .page-shell,
        .request-page,
        .public-document-layout,
        .auth-shell
    ) :is([class$="-grid"], [class*="-grid "]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body :is(h1, .hero h1, .so-public-hero h1, .hrc-public-hero h1) {
        font-size: clamp(28px, 9vw, 36px) !important;
        line-height: 1.08 !important;
    }

    body :is(
        .invoice-toolbar-actions,
        .invoice-payment-actions,
        .public-actions,
        .so-public-pay-actions,
        .so-public-form-actions,
        .hrc-submit-row,
        .submit-row,
        .actions,
        .nav-actions,
        .nav-links
    ) > :is(a, button, .btn, .button, form) {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    body :is(.public-actions, .actions, .nav-actions, .nav-links) form :is(button, .btn) {
        width: 100% !important;
    }
}

@media screen and (max-height: 620px) and (orientation: landscape) {
    body :is(
        .so-public-hero,
        .hrc-public-hero-inner,
        .listing-public-hero,
        .hero,
        .request-intro,
        .request-form-panel
    ) {
        padding-block: 16px !important;
    }
}