/* ==========================================================================
   PRINT STYLES — Property Particulars
   Append to style.css, or enqueue as a separate print.css (see note at
   bottom of the integration instructions for the preferred approach).
   ========================================================================== */

/* Print-only elements (letterhead, print gallery) stay hidden on screen. */
.no-screen {
    display: none;
}

@media print {

    @page {
        size: A4;
        margin: 15mm;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    .no-screen {
        display: block;
    }

    /* ---- Spacing variables — tune these ---- */
    :root {
        --print-preview-max-width: 800px;
        /* total width: main image + thumbnail column */
        --print-preview-height: 250px;
        /* fixed row height for main image + thumbnail column */
        --print-thumb-col-width: 400px;
        /* width of the thumbnail column */
        --print-header-gap: 8px;
        /* space below print-header */
        --print-preview-gap: 6px;
        /* space below preview box, before description */
        --print-thumb-gap: 4px;
        /* gap between thumbnails, and main image to thumbnails */
        --print-heading-gap: 4px;
        /* margin above/below the h1 title blocks */
    }

    /* ---- Hide screen chrome ------------------------------------------- */
    #wpadminbar,
    .header-top-wrapper,
    #header-wrapper,
    #navigation,
    .sidebar.span3,
    .property-filter,
    #comments,
    #footer-top,
    #footer,
    .no-print,
    .print-button,
    #property-map {
        display: none !important;
    }

    /* ---- Collapse the revslider banner's reserved space ---------------- */
    .top-wrapper,
    .top-wrapper .top,
    .top-wrapper .top-inner,
    #block-6.widget_block,
    .revslider {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ---- Carousel: main image left, 3 thumbnails stacked right, filling the row ---- */
    .carousel.property .content,
    .carousel.property .carousel-prev,
    .carousel.property .carousel-next {
        display: none !important;
    }

    .carousel.property {
        height: auto !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }

    .carousel.property .preview {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: var(--print-thumb-gap) !important;
        width: 100% !important;
        max-width: var(--print-preview-max-width) !important;
        height: var(--print-preview-height) !important;
        margin: 0 0 var(--print-preview-gap) 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    .carousel.property .preview a {
        display: none !important;
        position: static !important;
    }

    /* Main image: fills remaining width AND the full row height */
    .carousel.property .preview a:nth-of-type(1) {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .carousel.property .preview a:nth-of-type(1) img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    /* Thumbnail column: fixed width, full row height, up to 3 images share it evenly */
    .carousel.property .preview a:nth-of-type(n+2):nth-of-type(-n+4) {
        display: flex !important;
        flex: 0 0 var(--print-thumb-col-width) !important;
        flex-direction: column !important;
        width: var(--print-thumb-col-width) !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    .carousel.property .preview a:nth-of-type(n+2):nth-of-type(-n+4) img {
        display: block !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        object-fit: cover !important;
        margin-bottom: var(--print-thumb-gap) !important;
        page-break-inside: avoid;
    }

    .carousel.property .preview a:nth-of-type(n+2):nth-of-type(-n+4):last-of-type img {
        margin-bottom: 0 !important;
    }

    /* Explicitly hide any thumbnails beyond the 3rd (5th image onward overall) */
    .carousel.property .preview a:nth-of-type(n+5) {
        display: none !important;
    }

    /* ---- Reclaim the sidebar's grid space ------------------------------- */
    #main.span9 {
        width: 100% !important;
        float: none !important;
    }

    .row {
        display: block !important;
    }

    /* ---- Print-only letterhead ------------------------------------------ */
    .print-header {
        margin-bottom: var(--print-header-gap) !important;
        padding-bottom: var(--print-header-gap) !important;
        border-bottom: 1px solid #000;
    }

    .print-header .print-header__logo {
        max-height: 60px;
        width: auto;
    }

    .print-header__contact {
        font-size: 10pt;
        margin: 4px 0 0;
    }

    /* Kill default heading margin in case an h1 sits between header and image */
    .property-detail h1:first-child {
        margin-top: 0 !important;
    }

    /* ---- Description spacing ---- */
    .property-detail {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .pull-left.overview {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .property-detail h1 {
        margin-top: var(--print-heading-gap) !important;
        margin-bottom: var(--print-heading-gap) !important;
    }

    /* ---- Neutralize the theme's pre-existing fixed .print-footer -------- */
    .print-footer {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        width: auto !important;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #000;
    }

    /* ---- General print hygiene -------------------------------------------- */
    a[href]::after {
        content: none !important;
        /* stop Chrome/Firefox appending raw URLs */
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    h1,
    h2,
    h3,
    .overview,
    .property-detail table,
    .carousel.property .preview,
    .print-header {
        page-break-inside: avoid;
    }
}