/* Drupal Webform Wizard / Cards - Comprehensive Print Fix
This stylesheet forces all steps/cards of a multi-page form to
render sequentially when the print dialog is opened.
*/

@media print {
    /* 1. THE "BRUTE FORCE" RESET
       Neutralize common Drupal layout wrappers that clip content or use Flex/Grid.
    */
    html, body,
    #page-wrapper,
    #main-content,
    .layout-container,
    main,
    .region-content,
    .content,
    article,
    .node__content,
    .field--name-body {
        overflow: visible !important;
        height: auto !important;
        display: block !important;
        float: none !important;
        position: static !important;
        max-width: none !important;
    }

    /* 2. OVERRIDE DRUPAL WIZARD VISIBILITY
       We target the specific 'html.js' selectors Drupal uses to hide cards,
       and override any inline 'display: none' or 'hidden' attributes.
    */
    html.js .webform-card,
    html.js .webform-card[style*="display: none"],
    html.js .webform-card[style*="display:none"],
    .webform-card[hidden],
    .webform-card,
    .js-webform-states-hidden,
    [style*="display: none"],
    [style*="display:none"],
    [hidden] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. TARGET THE WIZARD CONTAINERS
       Unstack the 'Cards' which are usually positioned absolutely.
       Added horizontal padding here for overall container spacing.
    */
    .webform-submission-form,
    .webform-wizard-pages,
    .webform-cards,
    .webform-card-wrapper,
    .js-form-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 4. PAGE BREAKS
       Start every Card/Step on a new sheet of paper.
       Removed border-top and border-bottom to clean up the look.
    */
    .webform-card,
    .webform-wizard-page {
        page-break-before: always !important;
        break-before: page !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        border: none !important; /* Removed outside borders */
        margin-top: 2rem !important;
    }

    .webform-card:first-of-type,
    #edit-about-yourself-card {
        page-break-before: avoid !important;
        break-before: avoid !important;
        border-top: none !important;
        margin-top: 0 !important;
    }

    /* 5. CLEAN UP UI & NAVIGATION */
    .webform-progress,
    .webform-button--previous,
    .webform-button--next,
    .form-actions,
    .webform-card-navigation,
    .webform-navigation,
    .breadcrumb,
    header,
    footer,
    aside,
    nav,
    .toolbar,
    .webform-element-help,
    #header,
    #footer,
    .region-header,
    .region-footer,
    .region-sidebar-first,
    .region-sidebar-second {
        display: none !important;
    }

    /* 6. FORM ELEMENT FIXES */
    input[type="radio"], 
    input[type="checkbox"] {
        display: inline-block !important;
        visibility: visible !important;
        appearance: auto !important;
        -webkit-appearance: checkbox !important;
        width: 14px !important;
        height: 14px !important;
        border: 1px solid #000 !important;
    }

    .form-type-radio::before,
    .form-type-radio::after,
    .form-type-checkbox::before,
    .form-type-checkbox::after,
    .form-boolean-group::before {
        content: none !important;
        display: none !important;
    }

    /* 7. TYPOGRAPHY */
    .form-item__label,
    label,
    legend {
        font-weight: bold !important;
        color: #000 !important;
        display: block !important;
        margin-bottom: 5px !important;
    }
    
    .option {
        font-weight: normal !important;
        display: inline !important;
    }

    textarea {
        height: auto !important;
        overflow: visible !important;
    }
}