/*
 * Print stylesheet for WDI Mainpage 2024
 * - keeps the printed page content-focused
 * - expands accordions
 * - converts sliders/galleries into compact vertical lists
 * - hides navigation and interactive controls
 */

@page {
    size: auto;
    margin: 18mm 16mm;
}

@media print {
    :root {
        --clear: #fff !important;
        --lightgrey: #f4f4f4 !important;
        --midgrey: #ddd !important;
        --darkgrey: #555 !important;
        --dark: #000 !important;
        --deepdark: #000 !important;
        /* --brandcolor remains untouched so printed link text keeps the theme brand color. */
        --brandcolor-inv: var(--brandcolor) !important;
        --red: #000 !important;
        --colorgradient: none !important;
        --lightgradient: none !important;
    }

    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transition: none !important;
        color: #000 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    html,
    body {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        font-family: Mulish, Arial, Helvetica, sans-serif !important;
        font-size: 10pt !important;
        line-height: 1.2 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        counter-reset: footnotes;
    }

    /* Custom print header: generated by print.js */
    #wdi-print-meta {
        display: block !important;
        margin: 0 0 8mm !important;
        padding: 0 0 4mm !important;
        border-bottom: 0.25pt solid #999 !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    #wdi-print-meta h1 {
        margin: 0 0 2mm !important;
        font-size: 18pt !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
    }

    #wdi-print-meta p {
        margin: 0.5mm 0 0 !important;
        font-size: 8pt !important;
        line-height: 1.25 !important;
        color: #555 !important;
        word-break: break-word;
    }

    /* Hide site chrome and interactive-only UI */
    #main_navigation,
    #navtoggle,
    .envelope,
    .gallery-control,
    .gallery-nav,
    .slider-dots,
    .lightbox,
    .lightbox-overlay,
    .referenzen-filter,
    #projectnav,
    script,
    noscript,
    iframe,
    video,
    audio {
        display: none !important;
    }

    .main-width,
    .hero-width,
    .content-width,
    .sidebar-width,
    .block-area,
    .editor-content,
    .contentframe {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    section,
    section.previous-section,
    .categoryheader,
    .referenzheader,
    .referenzfooter,
    .editor,
    .faqs,
    .gallery,
    .slider,
    .tiles,
    .team,
    .projektauswahl,
    #footer {
        margin: 0 0 7mm !important;
        padding: 0 !important;
        border-radius: 0 !important;
        page-break-inside: auto;
        break-inside: auto;
    }

    section:first-child {
        margin-top: 0 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    blockquote,
    table,
    figure,
    pre {
        orphans: 3;
        widows: 3;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
        break-after: avoid;
        margin: 0 0 3mm !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
    }

    h1 { font-size: 17pt !important; }
    h2 { font-size: 14pt !important; }
    h3,
    .h3 { font-size: 11.5pt !important; }
    h4,
    h5,
    h6 { font-size: 10.5pt !important; }

    p,
    li,
    dd,
    dt,
    td,
    th,
    pre,
    blockquote,
    a,
    button {
        font-size: 10pt !important;
        line-height: 1.2 !important;
    }

    p,
    ul,
    ol,
    blockquote,
    table,
    pre {
        margin: 0 0 3mm !important;
    }

    ul,
    ol {
        padding-left: 5mm !important;
        list-style: revert !important;
    }

    li {
        margin: 0 0 1mm !important;
    }

    strong,
    b {
        font-weight: 700 !important;
    }

    a,
    a:visited,
    a *,
    a:visited * {
        color: var(--brandcolor) !important;
        text-decoration-color: var(--brandcolor) !important;
    }

    a,
    a:visited {
        text-decoration: underline !important;
    }

    a[href^="http"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #555 !important;
        overflow-wrap: anywhere;
    }

    a.homelink::after,
    #footer a::after,
    .projektlink_wrapper::after,
    .tile::after,
    .slide-text a::after,
    .gallery-item::after {
        content: none !important;
    }

    img,
    svg {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    svg path {
        fill: #000 !important;
    }

    /* Hero image / hero media: print as a complete block including background */
    .hero-image {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8mm !important;
        padding: 0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .hero-image .hero {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-image .hero-background {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 3 / 1 !important;
        min-height: 42mm !important;
        margin: 0 !important;
        padding: 8mm !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: var(--lightgrey) !important;
        background-size: cover !important;
        background-position: center !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .hero-image .hero-background-media,
    .hero-image .hero-signet,
    .hero-image .wdi-print-hero-background {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        opacity: 1 !important;
    }

    .hero-image .hero-background-media,
    .hero-image .wdi-print-hero-background {
        z-index: 1 !important;
    }

    .hero-image .hero-signet {
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .hero-image video.hero-background-media {
        display: none !important;
    }

    .hero-image .hero-product {
        position: absolute !important;
        z-index: 3 !important;
        display: block !important;
        right: 8mm !important;
        top: 0 !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 55% !important;
        max-height: 48mm !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: bottom right !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .hero-image .hero-background::after {
        content: "";
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background-color: var(--lightgrey) !important;
    }

    /* Accordions / FAQs: force open */
    .singlefaq {
        margin: 0 0 3mm !important;
        padding: 3mm !important;
        border: 0.25pt solid #bbb !important;
        border-radius: 0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .expansionpanel,
    .faqquestion {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 0 2mm !important;
        margin: 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-weight: 700 !important;
    }

    .faqquestion::after,
    .faqicon {
        display: none !important;
        content: none !important;
    }

    .faqanswer {
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .faqanswer .editor,
    .more .faqanswer .editor {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sliders, including full-width/hero sliders: all entries as a compact vertical list */
    .slider,
    .slider[data-slider],
    .slider:not(.content-width) {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .slider .slide,
    .slider[data-slider] .slide,
    .slider:not(.content-width) .slide,
    .slider.is-ready .slide,
    .slider.is-ready .slide.is-active,
    .slider.is-ready .slide.is-exiting {
        display: block !important;
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        margin: 0 0 4mm !important;
        padding: 0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .slider .slick-list,
    .slider .slick-track,
    .slider .slick-slide {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider .slick-cloned {
        display: none !important;
    }

    .slider .slide-background,
    .slider[data-slider] .slide-background,
    .slider:not(.content-width) .slide-background {
        display: grid !important;
        grid-template-columns: 32mm 1fr !important;
        gap: 4mm !important;
        align-items: start !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 3mm !important;
        border: 0.25pt solid #bbb !important;
        border-radius: 0 !important;
    }

    .slider .slide-background-image,
    .slider .slide-product {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 32mm !important;
        max-width: 32mm !important;
        height: auto !important;
        max-height: 26mm !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        opacity: 1 !important;
    }

    .slide-product + .slide-background-image,
    .slide-background-image + .slide-product {
        margin-top: 20mm !important;
    }

    .slider .slide-text {
        position: static !important;
        grid-column: 2 !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
    }

    .slide-text a {
        display: block !important;
        text-decoration: none !important;
    }

    .slider p.slide-title,
    .slider.content-width .slide-title {
        font-size: 12pt !important;
        line-height: 1.15 !important;
        margin: 0 0 1.5mm !important;
    }

    .slide-button {
        display: block !important;
        margin: 1.5mm 0 0 !important;
        font-weight: 700 !important;
    }

    .slide-button svg {
        display: none !important;
    }

    /* Galleries: print the first three entries next to each other, hide the rest */
    .gallery-wrapper,
    .gallery-scroll {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .gallery .gallery-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4mm !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .gallery .gallery-item {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-decoration: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .gallery .gallery-container > .gallery-item:nth-child(n+4),
    .gallery .gallery-container > a.gallery-item:nth-child(n+4),
    .gallery .gallery-container > div.gallery-item:nth-child(n+4) {
        display: none !important;
    }

    .gallery-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1.2 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    .gallery-caption {
        margin: 1.5mm 0 0 !important;
        font-size: 9pt !important;
        color: #333 !important;
    }

    /* Project grids, tiles and team: printable cards */
    .projektliste,
    .projektauswahl .contentframe,
    .tile-container,
    .team-container,
    .related-posts {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4mm !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .projektlink_wrapper,
    .tile,
    .mitarbeiter,
    .award {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 3mm !important;
        border: 0.25pt solid #bbb !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .tile,
    a.tile,
    .tile-container .tile {
        background-color: var(--lightgrey) !important;
    }

    .tile,
    a.tile,
    .tile-container .tile,
    .gallery .gallery-item,
    .gallery .gallery-image {
        border: 0 !important;
        outline: 0 !important;
    }

    /* Project selection: hide link/award SVGs in print */
    .projektauswahl svg,
    .projektauswahl .projektlink svg,
    .projektauswahl .award-icon,
    .projektauswahl .award-icon svg {
        display: none !important;
    }

    .image-container,
    .projektlink_wrapper img,
    .tileicon,
    .teamicon,
    .award-icon img {
        max-height: 28mm !important;
        width: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    .projektlink,
    .projektlink.flex,
    .tile,
    .mitarbeiter,
    .team-text {
        display: block !important;
    }

    .projektlinktitel {
        font-weight: 700 !important;
    }

    a.tile .tile-text,
    .slide-button,
    .projektlinktitel,
    .projektlink_wrapper a,
    .gallery-item[href] .gallery-caption {
        color: var(--brandcolor) !important;
    }

    .branchen-tag,
    .leistungen-tag {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 8pt !important;
    }

    /* Tags: plain text list instead of linked chips */
    .tags {
        display: block !important;
        margin: 0 0 3mm !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        list-style: none !important;
    }

    .tags > *:not(.wdi-print-tags-inline),
    .tags a,
    .tags li {
        display: none !important;
    }

    .wdi-print-tags-inline {
        display: block !important;
        margin: 0 0 3mm !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #000 !important;
        font-size: 9pt !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
    }

    .wdi-print-tags-inline strong {
        font-weight: 700 !important;
    }

    /* WYSIWYG videos: print a compact placeholder only */
    .editor-content video,
    .editor-content audio,
    .editor-content iframe[src*="youtube"],
    .editor-content iframe[src*="youtu.be"],
    .editor-content iframe[src*="vimeo"],
    .editor-content object,
    .editor-content embed,
    .editor-content .wp-block-video video,
    .editor-content .wp-video-shortcode,
    .editor-content .wp-video-shortcode video,
    .editor-content .mejs-container,
    .editor-content .mejs-inner,
    .editor-content .mejs-mediaelement,
    .editor-content .mejs-layers,
    .editor-content .mejs-controls,
    .editor-content .wp-block-embed__wrapper,
    .editor-content .wp-block-video figcaption {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        outline: 0 !important;
        visibility: hidden !important;
    }

    .editor-content .wdi-print-video-wrapper,
    .editor-content .wp-video.wdi-print-video-wrapper,
    .editor-content .wp-block-video.wdi-print-video-wrapper,
    .editor-content .wp-block-embed.wdi-print-video-wrapper,
    .editor-content figure.wdi-print-video-wrapper,
    .editor-content p.wdi-print-video-wrapper,
    .editor-content div.wdi-print-video-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 3mm !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
    }

    .editor-content .wdi-print-video-wrapper > *:not(.wdi-print-video-placeholder),
    .editor-content .wdi-print-video-wrapper .mejs-container,
    .editor-content .wdi-print-video-wrapper .wp-video-shortcode,
    .editor-content .wdi-print-video-wrapper video,
    .editor-content .wdi-print-video-wrapper iframe {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    .editor-content .wdi-print-video-placeholder {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 3mm !important;
        border: 0 !important;
        outline: 0 !important;
        background-color: var(--lightgrey) !important;
        color: #555 !important;
        font-size: 9pt !important;
        line-height: 1.2 !important;
        text-align: center !important;
        page-break-inside: avoid;
        break-inside: avoid;
        visibility: visible !important;
    }

    /* Related projects: contained cards without overlaying SVGs */
    .related-posts {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4mm !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        align-items: start !important;
    }

    .related-posts .projektlink_wrapper {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border: 0 !important;
        outline: 0 !important;
        padding: 0 !important;
    }

    .related-posts .image-container {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .related-posts img:not([src$=".svg"]) {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 2 / 1 !important;
        object-fit: cover !important;
        background-color: var(--lightgrey) !important;
    }

    .related-posts .projektlink,
    .related-posts .projektlink.flex {
        display: block !important;
        width: 100% !important;
        margin: 2mm 0 0 !important;
        padding: 0 !important;
    }

    .related-posts svg,
    .related-posts a svg,
    .related-posts img[src$=".svg"],
    .related-posts .award-icon {
        display: none !important;
    }

    /* Awards: keep inside page width and remove contours */
    .awards {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 5mm !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .award,
    .award.flex {
        display: grid !important;
        grid-template-columns: 14mm minmax(0, 1fr) !important;
        gap: 3mm !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 2mm !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        overflow: hidden !important;
    }

    .award .award-icon {
        position: static !important;
        display: block !important;
        width: 14mm !important;
        max-width: 14mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .award .award-icon img,
    .award .award-icon svg {
        display: block !important;
        width: auto !important;
        max-width: 14mm !important;
        height: auto !important;
        max-height: 12mm !important;
        object-fit: contain !important;
    }

    .award p {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* Footer: keep contact info, remove navigation */
    #footer {
        margin-top: 8mm !important;
        padding-top: 4mm !important;
        border-top: 0.25pt solid #999 !important;
        background: transparent !important;
    }

    #footer .Logo,
    #footer .right,
    #footer .footermenus,
    #footer_navigation,
    #footer .navtitle,
    #footer hr,
    #footer .funded,
    #footer .homelink:has(img),
    #footer .homelink[target="_blank"] {
        display: none !important;
    }

    #footer .flex,
    #footer .keepflex,
    #footer .space-between,
    #footer .left {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer p,
    #footer a {
        font-size: 9pt !important;
        line-height: 1.2 !important;
        margin: 0 0 1.5mm !important;
        text-decoration: none !important;
    }

    /* Avoid ugly breaks */
    table,
    tr,
    img,
    .singlefaq,
    .gallery-item,
    .slide,
    .projektlink_wrapper,
    .tile,
    .mitarbeiter,
    .quote-box,
    #footer {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .quote-box,
    blockquote {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4mm !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        overflow-wrap: break-word !important;
        font-style: italic !important;
    }

    .quote-box *,
    blockquote * {
        max-width: 100% !important;
        font-style: italic !important;
    }
}