﻿/* ==========================================================
   BIRCH SUPPORT SERVICES
   PRINT STYLESHEET
   File: print.css
========================================================== */

@media print {

    /* ======================================================
       PAGE SETTINGS
    ====================================================== */

    @page {
        size: A4 portrait;
        margin: 10mm 10mm 10mm;
    }

    html,
    body {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    body {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 10.5pt !important;
        line-height: 1.5 !important;
        color: #111111 !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ======================================================
       GLOBAL RESET
    ====================================================== */

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    * {
        color: #111111 !important;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main {
        display: block !important;
        width: 100% !important;
    }

    /* ======================================================
       HIDE NON-PRINT ELEMENTS
    ====================================================== */

    header,
    .navbar,
    .nav-menu,
    .nav-toggle,
    .skip-link,
    .scroll-progress,
    .scroll-top-btn,
    .hero-buttons,
    .cta-buttons,
    .project-highlight .btn,
    .contact-modal,
    .contact-modal__backdrop,
    .contact-modal__dialog,
    .contact-form,
    .form-actions,
    .cf-turnstile,
    iframe,
    script,
    noscript {
        display: none !important;
    }

    /* ======================================================
       SECTION STRUCTURE
    ====================================================== */

    section {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 10mm 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
    }

        section:first-of-type {
            padding-top: 0 !important;
        }

        section + section {
            border-top: 1px solid #d8d8d8 !important;
        }

    #hero {
        border-top: 0 !important;
    }

    #projects,
    #consultant,
    #contact {
        break-before: page;
        page-break-before: always;
    }

    #trusted,
    #why-birch,
    #cta {
        break-before: auto;
        page-break-before: auto;
    }

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    h1,
    h2,
    h3,
    h4,
    p {
        max-width: none !important;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        color: #111111 !important;
        line-height: 1.2 !important;
        break-after: avoid;
        page-break-after: avoid;
    }

    h1 {
        margin: 0 0 5mm !important;
        font-size: 25pt !important;
        font-weight: 700 !important;
        letter-spacing: -0.4pt !important;
    }

    h2 {
        margin: 0 0 4mm !important;
        font-size: 19pt !important;
        font-weight: 700 !important;
    }

    h3 {
        margin: 0 0 2.5mm !important;
        font-size: 13pt !important;
        font-weight: 700 !important;
    }

    h4 {
        margin: 0 0 3mm !important;
        font-size: 11pt !important;
        font-weight: 600 !important;
    }

    p {
        margin: 0 0 4mm !important;
        font-size: 10.5pt !important;
        line-height: 1.5 !important;
        orphans: 3;
        widows: 3;
    }

    ul,
    ol {
        margin: 3mm 0 4mm 6mm !important;
        padding-left: 5mm !important;
    }

    li {
        margin-bottom: 1.5mm !important;
        font-size: 10pt !important;
        line-height: 1.4 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ======================================================
       SECTION HEADERS
    ====================================================== */

    .section-header {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 7mm !important;
        text-align: left !important;
    }

        .section-header p {
            max-width: 175mm !important;
        }

    .section-tag,
    .hero-tag,
    .cta-ribbon,
    .project-badge {
        display: inline-block !important;
        margin: 0 0 3mm !important;
        padding: 1.5mm 3mm !important;
        border: 1px solid #555555 !important;
        border-radius: 2mm !important;
        background: #ffffff !important;
        color: #222222 !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        letter-spacing: 0.5pt !important;
        text-transform: uppercase !important;
    }

    /* ======================================================
       HERO / PRINT COVER
    ====================================================== */

    #hero {
        min-height: auto !important;
        padding: 0 0 12mm !important;
    }

    .hero-container {
        display: block !important;
        width: 100% !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 0 8mm !important;
    }

        .hero-content::before {
            content: "BIRCH SUPPORT SERVICES";
            display: block;
            margin-bottom: 8mm;
            padding-bottom: 4mm;
            border-bottom: 2px solid #111111;
            color: #111111;
            font-size: 11pt;
            font-weight: 700;
            letter-spacing: 1.2pt;
        }

        .hero-content p {
            max-width: 175mm !important;
            font-size: 11pt !important;
        }

    .hero-visual {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5mm !important;
        width: 100% !important;
    }

    /* ======================================================
       GRID LAYOUTS
    ====================================================== */

    .trusted-grid,
    .why-grid,
    .contact-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5mm !important;
        align-items: stretch !important;
    }

    .projects-grid {
        display: block !important;
    }

    .consultant-grid {
        display: grid !important;
        grid-template-columns: 55mm 1fr !important;
        gap: 8mm !important;
        align-items: start !important;
    }

    .project-bottom {
        display: grid !important;
        grid-template-columns: 1fr 64mm !important;
        gap: 7mm !important;
        align-items: start !important;
    }

    /* ======================================================
       CARDS
    ====================================================== */

    .hero-card,
    .trusted-card,
    .project-card,
    .why-card,
    .contact-card,
    .cta-box,
    .project-highlight {
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 5mm !important;
        border: 1px solid #b9b9b9 !important;
        border-radius: 2mm !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: visible !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .hero-card {
        padding: 4mm !important;
    }

    .project-card {
        margin-bottom: 8mm !important;
        padding: 6mm !important;
    }

    .project-card-featured {
        border-width: 1.5px !important;
        border-color: #555555 !important;
    }

    .project-highlight {
        margin-top: 7mm !important;
    }

    .project-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 5mm !important;
        margin-bottom: 4mm !important;
    }

    .project-badge {
        white-space: nowrap !important;
    }

    /* ======================================================
       ICONS
    ====================================================== */

    .icon-box,
    .card-icon,
    .trusted-icon,
    .project-icon,
    .why-icon,
    .contact-icon {
        display: none !important;
    }

    .bi {
        color: #111111 !important;
    }

    .project-features .bi,
    .consultant-chip .bi {
        display: inline-block !important;
        margin-right: 2mm !important;
        font-size: 8pt !important;
    }

    /* ======================================================
       PROJECTS
    ====================================================== */

    .project-features {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

        .project-features li {
            position: relative !important;
            padding-left: 4mm !important;
        }

            .project-features li::before {
                content: "•";
                position: absolute;
                left: 0;
                top: 0;
                font-weight: 700;
            }

            .project-features li .bi {
                display: none !important;
            }

    /* ======================================================
       IMAGES
    ====================================================== */

    img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .project-image {
        width: 64mm !important;
        margin: 0 !important;
    }

        .project-image img {
            width: 100% !important;
            max-height: 48mm !important;
            object-fit: cover !important;
            border: 1px solid #cccccc !important;
        }

    .consultant-image,
    .consultant-photo {
        width: 55mm !important;
        margin: 0 !important;
    }

        .consultant-photo img {
            width: 55mm !important;
            max-height: 72mm !important;
            object-fit: cover !important;
            border: 1px solid #b9b9b9 !important;
        }

    /* ======================================================
       CONSULTANT SECTION
    ====================================================== */

    #consultant {
        background: #ffffff !important;
    }

    .consultant-content {
        width: 100% !important;
    }

    .designation-text {
        display: inline !important;
    }

    .designation-divider {
        display: none !important;
    }

    .consultant-highlights {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2.5mm !important;
        margin-top: 5mm !important;
    }

    .consultant-chip {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 2mm 3mm !important;
        border: 1px solid #aaaaaa !important;
        border-radius: 2mm !important;
        background: #ffffff !important;
        font-size: 8.5pt !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ======================================================
       WHY BIRCH
    ====================================================== */

    .why-number {
        margin-bottom: 2mm !important;
        color: #111111 !important;
        font-size: 23pt !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* ======================================================
       CALL TO ACTION
    ====================================================== */

    #cta {
        padding: 9mm 0 !important;
    }

    .cta-box {
        text-align: left !important;
    }

        .cta-box p {
            max-width: 175mm !important;
        }

    /* ======================================================
       CONTACT DETAILS
    ====================================================== */

    #contact {
        background: #ffffff !important;
    }

    .contact-card {
        min-height: auto !important;
    }

        .contact-card a {
            word-break: break-word !important;
        }

    .contact-map {
        display: none !important;
    }

    /* ======================================================
       LINKS
    ====================================================== */

    a,
    a:visited {
        color: #111111 !important;
        text-decoration: none !important;
    }

        a[href^="mailto:"]::after,
        a[href^="tel:"]::after,
        a[href^="#"]::after,
        a[data-open-contact]::after {
            content: "" !important;
        }

        a[href^="http"]:not([href*="birchsupportservices.co.uk"])::after {
            content: " (" attr(href) ")";
            font-size: 8pt;
            font-weight: 400;
            word-break: break-all;
        }

    /* ======================================================
       FOOTER
    ====================================================== */

    footer {
        display: block !important;
        margin: 10mm 0 0 !important;
        padding: 5mm 0 0 !important;
        border-top: 1px solid #777777 !important;
        background: #ffffff !important;
        color: #111111 !important;
    }

    .footer-content {
        display: block !important;
    }

    .footer-brand {
        max-width: none !important;
    }

        .footer-brand h3 {
            margin-bottom: 2mm !important;
            font-size: 11pt !important;
        }

        .footer-brand p {
            margin-bottom: 3mm !important;
            font-size: 8.5pt !important;
        }

    .footer-links {
        display: none !important;
    }

    .footer-bottom {
        margin-top: 3mm !important;
        padding-top: 3mm !important;
        border-top: 1px solid #d0d0d0 !important;
    }

        .footer-bottom p {
            margin: 0 !important;
            font-size: 8pt !important;
            text-align: center !important;
        }

    /* ======================================================
       PAGE BREAK CONTROL
    ====================================================== */

    h1,
    h2,
    h3,
    h4,
    .section-tag,
    .hero-tag,
    .project-header {
        break-after: avoid;
        page-break-after: avoid;
    }

    p,
    ul,
    ol {
        break-inside: auto;
        page-break-inside: auto;
    }

    .hero-card,
    .trusted-card,
    .why-card,
    .contact-card,
    .project-card,
    .consultant-chip,
    .project-highlight,
    .cta-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    tr,
    img,
    figure {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ======================================================
       REMOVE COLOUR THEME EFFECTS
    ====================================================== */

    .theme-sky,
    .theme-emerald,
    .theme-violet,
    .theme-rose,
    .theme-teal {
        background: #ffffff !important;
        color: #111111 !important;
        border-color: #b9b9b9 !important;
    }

    /* ======================================================
       PRINT ACCESSIBILITY
    ====================================================== */

    [aria-hidden="true"] {
        speak: none;
    }

    [hidden] {
        display: none !important;
    }
}


/* ==========================================================
   PRINT STABILITY FIXES
   Keep this at the END of print.css
========================================================== */

@media print {

    /* Remove decorative graphics and floating shapes */

    body::before,
    body::after,
    main::before,
    main::after,
    section::before,
    section::after,
    .container::before,
    .container::after,
    .hero-container::before,
    .hero-container::after,
    .hero-content::before,
    .hero-content::after,
    .hero-visual::before,
    .hero-visual::after,
    .section-header::before,
    .section-header::after,
    .trusted-grid::before,
    .trusted-grid::after,
    .projects-grid::before,
    .projects-grid::after,
    .why-grid::before,
    .why-grid::after,
    .consultant-grid::before,
    .consultant-grid::after,
    .contact-grid::before,
    .contact-grid::after,
    .cta-box::before,
    .cta-box::after,
    .theme-sky::before,
    .theme-sky::after,
    .theme-emerald::before,
    .theme-emerald::after,
    .theme-violet::before,
    .theme-violet::after,
    .theme-rose::before,
    .theme-rose::after,
    .theme-teal::before,
    .theme-teal::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }

    /* Disable all animation and reveal effects */

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        backdrop-filter: none !important;
    }

    /* Force all page content to be visible */

    main,
    section,
    section *,
    .container,
    .hero-content,
    .hero-visual,
    .hero-card,
    .trusted-grid,
    .trusted-card,
    .projects-grid,
    .project-card,
    .project-bottom,
    .project-highlight,
    .why-grid,
    .why-card,
    .consultant-grid,
    .consultant-image,
    .consultant-content,
    .consultant-highlights,
    .cta-box,
    .contact-grid,
    .contact-card,
    footer {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Override scroll-reveal classes */

    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .fade-in,
    .fade-up,
    .animate,
    .animated,
    [data-aos],
    [data-animate],
    [data-reveal] {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Remove clipping and browser rendering containment */

    html,
    body,
    main,
    section,
    .container,
    .hero-container,
    .hero-visual,
    .trusted-grid,
    .projects-grid,
    .why-grid,
    .consultant-grid,
    .contact-grid {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        contain: none !important;
        content-visibility: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* Prevent viewport-height sections from creating empty pages */

    section,
    #hero,
    #trusted,
    #projects,
    #why-birch,
    #consultant,
    #cta,
    #contact {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Remove fixed and sticky positioning */

    header,
    footer,
    section,
    .container,
    .section-header,
    .hero-container,
    .hero-content,
    .hero-visual,
    .hero-card,
    .trusted-card,
    .project-card,
    .why-card,
    .consultant-grid,
    .contact-card,
    .cta-box {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    /* Do not force full sections onto separate pages */

    section,
    #hero,
    #trusted,
    #projects,
    #why-birch,
    #consultant,
    #cta,
    #contact {
        break-before: auto !important;
        break-after: auto !important;
        break-inside: auto !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
        page-break-inside: auto !important;
    }

    /* Keep only smaller cards together */

    .hero-card,
    .trusted-card,
    .why-card,
    .contact-card,
    .consultant-chip {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Large sections/cards must be allowed to split */

    .project-card,
    .project-bottom,
    .project-highlight,
    .consultant-grid,
    .consultant-content,
    .cta-box,
    .contact-grid {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Load and display images consistently */

    img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        filter: none !important;
    }

    /* Remove web-only backgrounds */

    body,
    main,
    section,
    .container,
    .hero-card,
    .trusted-card,
    .project-card,
    .why-card,
    .contact-card,
    .cta-box,
    .project-highlight {
        background-image: none !important;
    }

    /* Hide elements that should never print */

    header,
    .navbar,
    .nav-toggle,
    .nav-menu,
    .skip-link,
    .scroll-progress,
    .scroll-top-btn,
    .hero-buttons,
    .cta-buttons,
    .contact-modal,
    iframe,
    .contact-map,
    .contact-form,
    .cf-turnstile,
    script {
        display: none !important;
    }
}