/* Print styles for Bookaid theme */
/* This file will control how the site looks when printed */

/* Basic print setup */
@media print {

    /* Hide unnecessary elements */
    .header,
    .footer,
    .footer-widgets,
    .sidebar,
    .navigation,
    .social-links,
    .wp-block-navigation,
    .search-form,
    .wp-block-search,
    .wp-block-search__input,
    .wp-block-search__button,
    .wp-block-search__inside-wrapper,
    .wp-block-buttons,
    .wp-block-button,
    .wp-block-cover,
    .wp-block-media-text,
    .wp-block-columns,
    .wp-block-group,
    .wp-block-template-part,
    .search-toggle,
    .search,
    .searchform,
    .search-form,
    .search-results,
    .search-no-results,
    .wp-block-button__link.menu-button,
    .menu-button,
    .menu-toggle,
    .more-link,
    .wp-block-button__link {
        display: none !important;
    }


    /* Basic typography and layout */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
        margin: 0;
        padding: 20px;
    }

    /* Site title for print - positioned at the very top */
    .print-site-title {
        display: block !important;
        text-align: center !important;
        font-size: 24pt !important;
        font-weight: bold !important;
        color: #c73724 !important; /* Bookaid brand red */
        margin: 0 0 20px 0 !important;
        padding: 10px 0 !important;
        border-bottom: 2px solid #c73724 !important;
        page-break-after: avoid !important;
    }

    /* Create site title using CSS pseudo-element on the body */
    body::before {
        content: "Bookaid" !important;
        display: block !important;
        text-align: center !important;
        font-size: 24pt !important;
        font-weight: bold !important;
        color: #c73724 !important; /* Bookaid brand red */
        margin: 0 0 20px 0 !important;
        padding: 10px 0 !important;
        border-bottom: 2px solid #c73724 !important;
        page-break-after: avoid !important;
        font-family: Arial, sans-serif !important;
    }

    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .wp-block-heading {
        color: #000 !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    /* Links */
    a {
        color: #000;
        text-decoration: underline;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
    }

    /* Page breaks */
    .wp-block-postheader,
    .wp-block-hero,
    .wp-block-contentandimage {
        page-break-inside: avoid;
    }

    /* Remove shadows and backgrounds */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Ensure content is readable */
    .wp-block-postheader,
    .wp-block-hero,
    .wp-block-contentandimage,
    .wp-block-postcontent,
    .entry-content {
        /* background: #fff !important; */
        color: #000 !important;
    }

    /* Test: Target parent containers */
.entry-content,
.content,
.block-area,
.wp-block-postcontent {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 5px solid purple !important; /* Debug color */
}

    .has-position-bottom-left .wp-block-stripe-block-inner {
        border: 2px solid greenyellow !important;
        width: 100% !important;
        display: block !important;
        align-items: flex-start !important;
    }

    .wp-block-hero {
        background-size: auto auto !important;
        align-items: flex-start !important;
    }

    .wp-block-hero .wp-block-stripe-block-inner {
        display: block !important;
    }

    .wp-block-hero .wp-block-stripe-block-inner>div {
        min-height: none !important;
    }

    .entry-content>.max-height-60,
    .max-height-60 {
        /* overflow: hidden !important; */
        min-height: none !important;
        max-height: none !important;
        height: auto !important;
        border: 2px solid red !important;
        width: 100% !important;
        /* background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        overflow: visible !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        background-attachment: scroll !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important; */
    }
    
    /* More targeted approach: only affect elements that are causing layout issues */
    .wp-block-hero.max-height-60,
    .wp-block-featuredcards.max-height-60 {
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        /* Preserve content but remove height constraints */
        overflow: visible !important;
        display: block !important;
    }
    
    /* Ensure hero content is preserved and visible */
    .wp-block-hero {
        display: block !important;
        position: relative !important;
        clear: both !important;
        float: none !important;
        margin: 0 0 2em 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: none !important;
        background-image: none !important;
    }
    
    /* Force hero block to collapse to content height */
    .wp-block-hero,
    .wp-block-hero * {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        /* Remove any height constraints that might cause blank space */
        line-height: normal !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure hero content wrapper doesn't create extra space */
    .wp-block-hero .wp-block-stripe-block-inner {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Strip down the content wrapper to just the text */
    .wp-block-hero .mw-500-tablet {
        margin: 0 !important;
        padding: 10px !important; /* Reduced from 15px */
        background: #c73724 !important;
        color: #ffffff !important;
        border-radius: 5px !important;
        display: block !important;
        /* Remove any height constraints */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        /* Remove any extra spacing */
        line-height: 1.4 !important;
    }
    
    /* Remove any AOS (Animate On Scroll) spacing */
    .wp-block-hero .aos-init,
    .wp-block-hero .aos-animate {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Target the specific classes from the HTML */
    .wp-block-hero.has-mobile-caption-spacer,
    .wp-block-hero.max-height-60,
    .wp-block-hero.has-focal-point-right,
    .wp-block-hero.has-position-bottom-left,
    .wp-block-hero.alignfull {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        background-image: none !important;
    }

    /* Force the hero block to be flush with its parent container */
    .wp-block-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
        position: static !important;
    }

    /* Ensure the parent container doesn't add spacing above the hero */
    .entry-content > .wp-block-hero:first-child,
    .content > .wp-block-hero:first-child,
    .block-area > .wp-block-hero:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Nuclear option: Force the hero block to completely collapse */
    .wp-block-hero {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        background-image: none !important;
        background-size: auto auto !important;
        /* Remove any flexbox properties */
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Force the hero block to be completely invisible but keep content visible */
    .wp-block-hero {
        display: none !important;
    }

    /* Make the stripe block inner (green border) visible and positioned correctly */
    .wp-block-hero .wp-block-stripe-block-inner {
        display: block !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 5px solid green !important; /* Ensure green border is visible */
    }

    /* Nuclear option: Target EVERYTHING with the highest possible specificity */
    html body *,
    html body *::before,
    html body *::after {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* Override any inline styles that might be setting heights */
    html body [style*="height"],
    html body [style*="min-height"],
    html body [style*="max-height"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Force specific problematic elements to collapse */
    html body .wp-block-postheader,
    html body .wp-block-hero,
    html body .wp-block-featuredcards,
    html body .wp-block-contentandimage {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: static !important;
        border: 5px solid orange !important; /* New debug color */
    }

    /* Fix spacing for calculator and section header blocks */
    .wp-block-calculator,
    .wp-block-sectionheader {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        page-break-after: auto !important;
        page-break-before: auto !important;
    }

    /* Ensure proper spacing between calculator and section header */
    .wp-block-calculator + .wp-block-sectionheader {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Prevent calculator from collapsing too much */
    .wp-block-calculator .wp-block-stripe-block-inner {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Restore slick slider text content */
    .slick-slide .post-summary__content,
    .slick-slide .reader-story,
    .slick-slide h4,
    .slick-slide p,
    .slick-slide .wp-block-button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
        background: #fff !important;
        padding: 10px !important;
        margin: 5px 0 !important;
        border: 1px solid #ccc !important;
    }

    /* Ensure slider headings are visible */
    .slick-slide .wp-block-heading,
    .slick-slide h4 {
        font-size: 16pt !important;
        font-weight: bold !important;
        margin: 0 0 10px 0 !important;
        color: #000 !important;
    }

    /* Ensure slider paragraphs are visible */
    .slick-slide p {
        font-size: 12pt !important;
        line-height: 1.4 !important;
        margin: 0 0 15px 0 !important;
        color: #000 !important;
    }

    /* Ensure slider buttons are visible */
    .slick-slide .wp-block-button__link {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
        text-decoration: underline !important;
        padding: 5px 10px !important;
        border: 1px solid #000 !important;
        background: #fff !important;
    }

    /* Fix text being overwritten by image areas */
    .slick-slide .mobile-section-image,
    .slick-slide .thumbnail-wrapper,
    .slick-slide .thumbnail {
        display: none !important;
    }

    /* Ensure slider content has proper spacing and isn't overlapped */
    .slick-slide .post-summary__content {
        position: relative !important;
        z-index: 10 !important;
        background: #fff !important;
        padding: 15px !important;
        margin: 0 !important;
        border: 2px solid #ccc !important;
        min-height: 150px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Ensure text content is fully visible */
    .slick-slide .reader-story {
        flex: 1 !important;
        margin-bottom: 15px !important;
    }

    /* Ensure buttons are properly positioned */
    .slick-slide .wp-block-button {
        margin-top: auto !important;
        text-align: center !important;
    }
    
    /* Force the hero content to be visible despite collapsed parent */
    .wp-block-hero .mw-500-tablet {
        position: relative !important;
        z-index: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Ensure hero headings and text are visible */
    .wp-block-hero .wp-block-heading {
        margin: 0 0 10px 0 !important;
        color: #ffffff !important;
        display: block !important;
    }
    
    .wp-block-hero p {
        margin: 0 0 15px 0 !important;
        color: #ffffff !important;
        display: block !important;
    }
    
    /* Handle the button properly */
    .wp-block-hero .wp-block-button {
        margin: 0 0 15px 0 !important;
        display: block !important;
    }
    
    /* Handle carousels/sliders for print - simplified approach */
    .slick-slider,
    .slick-list,
    .slick-track {
        display: block !important;
        transform: none !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Show only the main 3 slides that are normally visible */
    .slick-slide.slick-current,
    .slick-slide.slick-active {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 2em 0 !important;
        float: none !important;
        clear: both !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        page-break-inside: avoid !important;
    }
    
    /* Hide all navigation and cloned slides */
    .slick-arrow,
    .slick-dots,
    .slick-cloned,
    .slick-slide:not(.slick-current):not(.slick-active) {
        display: none !important;
    }
    
    /* Simple thumbnail handling - no complex image forcing */
    .slick-slide .thumbnail {
        min-height: 200px !important;
        width: 100% !important;
        display: block !important;
        border: 1px solid #ccc !important;
        margin-bottom: 1em !important;
    }

    /* Debug: Add bright colors to identify height constraints */
    .wp-block-hero {
        border: 3px solid blue !important;
        /* Force the hero block to collapse completely */
        display: block !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: none !important;
        background-image: none !important;
        background-size: auto auto !important;
        /* Remove any flexbox properties that might be causing spacing */
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Force ALL parent containers to collapse */
    .entry-content,
    .content,
    .block-area,
    .wp-block-postcontent {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Target the specific height classes that are likely causing the issue */
    .wp-block-hero.max-height-60,
    .wp-block-hero.max-height-90,
    .wp-block-hero.max-height-120,
    .wp-block-hero[class*="max-height-"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background-size: auto auto !important;
        background-size: contain !important;
    }

    /* Override any inline styles that might be setting heights */
    .wp-block-hero[style*="height"],
    .wp-block-hero[style*="min-height"],
    .wp-block-hero[style*="max-height"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Nuclear option: Force everything to collapse */
    .wp-block-hero,
    .wp-block-hero *,
    .wp-block-hero .wp-block-stripe-block-inner,
    .wp-block-hero .mw-500-tablet,
    .entry-content > .wp-block-hero,
    .content > .wp-block-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.2 !important;
        padding: 5px !important;
        margin: 0 !important;
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
    }
    
    .wp-block-hero .wp-block-stripe-block-inner {
        border: 3px solid green !important;
    }
    
    .wp-block-hero .mw-500-tablet {
        border: 3px solid orange !important;
    }
    
    /* Force all height-related properties to be overridden */
    .wp-block-hero,
    .wp-block-hero *,
    .wp-block-hero .wp-block-stripe-block-inner,
    .wp-block-hero .mw-500-tablet {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.2 !important;
        padding: 5px !important;
        margin: 0 !important;
    }

    /* Force the content wrapper to be visible and styled */
    html body .wp-block-hero .mw-500-tablet {
        background: #c73724 !important;
        color: #ffffff !important;
        border: 5px solid red !important; /* New debug color */
        margin: 0 !important;
        padding: 10px !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        /* Force complete collapse */
        overflow: visible !important;
        line-height: 1.2 !important;
    }

    /* Target the specific HTML structure from the user's example */
    .wp-block-hero.lazyload,
    .wp-block-hero.has-mobile-caption-spacer,
    .wp-block-hero.max-height-60,
    .wp-block-hero.has-focal-point-right,
    .wp-block-hero.has-position-bottom-left,
    .wp-block-hero.alignfull {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: none !important;
        background-image: none !important;
        background-size: auto auto !important;
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 5px solid yellow !important; /* New debug color */
        /* Force complete collapse */
        overflow: visible !important;
        line-height: 1 !important;
    }

    /* Target the stripe block inner specifically */
    .wp-block-hero .wp-block-stripe-block-inner {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: none !important;
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 5px solid lime !important; /* New debug color */
        /* Force complete collapse */
        overflow: visible !important;
        line-height: 1 !important;
    }

    /* Hide the button that's still showing */
    .wp-block-hero .wp-block-button,
    .wp-block-hero .wp-block-button__link {
        display: none !important;
    }

    /* Nuclear option: Target everything with the highest specificity */
    html body .entry-content > div,
    html body .entry-content > header,
    html body .entry-content > section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Target flexbox containers that might be causing spacing */
    .entry-content,
    .content,
    .block-area,
    .wp-block-postcontent,
    .wp-block-postheader,
    .wp-block-featuredcards {
        display: block !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 5px solid purple !important; /* Debug color for parent containers */
    }

    /* Force all flexbox children to collapse */
    .entry-content > *,
    .content > *,
    .block-area > * {
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        align-self: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Target the highest-level containers that might be causing spacing */
    html,
    body,
    .page,
    .site,
    .site-content,
    .main-content,
    .page-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 5px solid cyan !important; /* Debug color for page-level containers */
    }

    /* Force the main content area to collapse */
    .main,
    .primary,
    .content-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 5px solid magenta !important; /* Debug color for main content */
    }



}