/* ==========================================================================
   Print Stylesheet for Trip Planning Packing List
   ========================================================================== */

button.btn-green.print-btn {
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.92rem;
}

button.btn-green.print-btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

@page {
    /* Removes browser print header (date, title) and footer (URL, page numbers) */
    margin: 0.5in;
}

@media print {
    /* Hide everything by default except the what-to-bring section */
    header,
    #nav-placeholder,
    .heading-hero,
    .gallery-strip,
    #transportation,
    #provided,
    .glow,
    #gift,
    #footer-placeholder,
    footer {
        display: none !important;
    }

    /* Hide the parchment roll/torn pseudo caps on the card */
    .card-tile::before,
    .card-tile::after {
        display: none !important;
        content: none !important;
    }

    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    main, #main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #what-to-bring {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        filter: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
    }

    #what-to-bring > .card-inner {
        background: none !important;
        background-image: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
    }

    .planning-card-body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .card-header-bar {
        border-bottom: 2px solid #5a3825 !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.4rem !important;
        justify-content: center !important;
    }

    .card-header-bar h2 {
        color: #1c3822 !important;
        font-size: 2rem !important;
        filter: none !important;
        text-align: center !important;
    }

    .card-icon-badge {
        display: none !important;
    }

    .planning-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-top: 0.5rem !important;
    }

    .category-card {
        background-color: #fcfbf8 !important;
        border: 1px solid #d3c7b2 !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        padding: 0.85rem !important;
        border-radius: 6px !important;
    }

    .category-card h4 {
        color: #1c3822 !important;
        border-bottom: 1px dashed #b59b73 !important;
        font-size: 1.1rem !important;
        margin-top: 0 !important;
        padding-bottom: 0.3rem !important;
    }

    .category-card ul {
        margin: 0 !important;
        padding-left: 0 !important;
    }

    .category-card li {
        color: #2d261e !important;
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.35rem !important;
        padding-left: 1.6rem !important;
        position: relative !important;
    }

    /* Change ✦ stars into printable checkboxes */
    .category-card li::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
        width: 13px !important;
        height: 13px !important;
        border: 1.5px solid #5a3825 !important;
        border-radius: 2px !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
    }

    #cellphone {
        background: #f7f5ed !important;
        border: 1px solid #d3c7b2 !important;
        outline: none !important;
        color: #2d261e !important;
        margin: 1rem auto 0 !important;
        padding: 0.5rem 1rem !important;
        width: 100% !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
    }

    #cellphone p, #cellphone strong {
        color: #2d261e !important;
    }
}