/* Wizard Layout styles extracted from l2-wizard.css */

/**
 * Single-column layout preset.
 * - 1 column: full width
 * - 3 rows: 55px header, flexible content, 44px footer
 */
.setup-wizard-grid {
    container-name: wizard-container;
    container-type: inline-size;
    min-height: calc(100vh - 32px);
    --grid-cols: 1fr;
    --grid-rows: 55px auto 44px;
    --wp-sidebar-width: 160px;
}
.wp-admin.folded .setup-wizard-grid {
    --wp-sidebar-width: 36px;
}

.wizard-main-container {
    max-width: 1200px;
    margin: 30px auto 0;
}

/**
 * Region helpers for the single-column grid above.
 * grid-area: row-start / col-start / row-end / col-end
 *
 * Layout map (rows x cols):
 *   [1,1]
 *   [2,1]
 *   [3,1]
 */
.setup-wizard-grid {
    .top-grid { /* Header: top row */
        grid-area: 1 / 1 / 2 / 2;
    }

    .main-grid { /* Main content: middle row */
        grid-area: 2 / 1 / 3 / 2;
        width: 100%;
    }

    .bottom-grid { /* Footer: bottom row */
        grid-area: 3 / 1 / 4 / 2;
    }
}

/*.wizard-top {*/
/*    position: sticky;*/
/*    !* noinspection CssUnresolvedCustomProperty *!*/
/*    top: var(--wp-admin--admin-bar--height);*/
/*    width: 100%;*/
/*    background-color: #fff;*/
/*}*/

@container wizard-container (max-width: 1200px) {
    .wizard-main-container {
        padding: 0 var(--spacing-lg);
    }
}

.wizard-content {
    display: none;
    grid-template-rows: 1fr auto;
    /*height: 100vh;*/
}
input[type="radio"].wizard-step {
    display: none;
}

#step-1:checked ~ .wizard-content:nth-of-type(1),
#step-2:checked ~ .wizard-content:nth-of-type(2),
#step-2-1:checked ~ .wizard-content:nth-of-type(3),
#step-3:checked ~ .wizard-content:nth-of-type(4),
#step-3-1:checked ~ .wizard-content:nth-of-type(5),
#step-4:checked ~ .wizard-content:nth-of-type(6),
#step-4-1:checked ~ .wizard-content:nth-of-type(7),
#step-5:checked ~ .wizard-content:nth-of-type(8),
#step-5:checked ~ .wizard-content:nth-of-type(6) {
    display: grid;
}

.wizard-step-label {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--heading-font);
    line-height: 20px;
}

.wizard-content-wrapper {
    min-height: 514px; /** This is to fill the space between the top header and the main content */
    padding-block: var(--spacing-2xl);
    /*padding-bottom: 244px; */
    /** top header + margin-bottom + nav + footer = 56px + 30px + 33px + 114px */
}

.three-column-asymmetric-grid {
    display: grid;
    grid-template-columns: 135px 2fr 1fr;
    gap: 32px;
    margin: 0 auto;
    width: 100%;
}

.three-column-asymmetric-grid .left-column {
    grid-column: 1 / 2;
}

.three-column-asymmetric-grid .middle-column {
    grid-column: 2 / 3;
}

.three-column-asymmetric-grid .right-column {
    grid-column: 3 / 4;
}

@media (max-width: 768px) {
    .three-column-asymmetric-grid {
        grid-template-columns: 1fr;
    }

    .three-column-asymmetric-grid .left-column,
    .three-column-asymmetric-grid .middle-column,
    .three-column-asymmetric-grid .right-column {
        grid-column: 1;
    }
}