/* ==========================================================================
 * WinCC OA Documentation - Print Stylesheet
 * Siemens IX Light Theme - Ink-Optimised
 *
 * Design principles
 *   - White / transparent backgrounds (ink-saving, dark-mode-safe)
 *   - #000028 (IX deep-blue-900) body text
 *   - Petrol #009999 accent lines on H1 and code blocks
 *   - Coloured left-border accents for notes (no background fills)
 *   - Border-only tables with #9999A9 (deep-blue-400)
 *   - Roboto font family (matches webhelp theme)
 *   - A4 portrait, 2 cm margins
 *
 * Print header: Logo fixed at top of every page (Chrome / Edge)
 * Print footer: Copyright with dynamic year via data-copyright-year on body
 *
 * Browser notes
 *   - position: fixed repeats on every printed page in Chrome / Edge.
 *   - Firefox shows fixed elements on the first page only (graceful fallback).
 * ========================================================================== */

@page {
    size: A4 portrait;
    margin: 1.2cm 2cm 1.0cm 2cm; /* top 1.2cm, bottom 1.0cm */
}

@media print {

    /* ------------------------------------------------------------------
     * 1. GLOBAL RESET
     * ------------------------------------------------------------------ */
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html {
        overflow: visible !important;
        width: 100% !important;
    }

    body {
        font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
        font-size: 11pt;
        line-height: 1.55;
        color: #000028 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* ------------------------------------------------------------------
     * 2. HIDE WEBHELP UI CHROME
     * Note: .wh_header is NOT hidden here - handled in section 3
     * ------------------------------------------------------------------ */
    .wh_footer,
    .wh_publication_toc,
    .wh_search_input,
    .wh_breadcrumb,
    .wh_navigation_links,
    .wh_print_link,
    .wh_tools,
    .wh_toggle_button,
    .wh_top_menu,
    .wh_top_menu_and_indexterms_link,
    .wh_indexterms_link,
    .wh_related_links,
    #assistant_button,
    #menu_toggler,
    #theme_toggler,
    #wh_topic_toc,
    #go2top,
    #chatbot-container,
    #chatbot-toggle,
    .chatbot-widget,
    .chatbot-icon,
    .wh_hide_pagination,
    .wh_topic_page_feedback,
    .no-print {
        display: none !important;
    }

    /* Hide embedded videos in print (incl. topics under /content/core/en/videos/) */
    object[data*="youtube.com"],
    object[data*="youtu.be"],
    iframe[src*="youtube.com"],
    iframe[src*="youtu.be"],
    object.iframe,
    iframe.iframe,
    object[id="video"],
    object[id^="video_"],
    video {
        display: none !important;
    }

    /* ------------------------------------------------------------------
     * 3. PRINT HEADER - logo + product name, in document flow (page 1)
     * ------------------------------------------------------------------ */
    .wh_header {
        display: block !important;
        padding: 0 0 8pt 0 !important;
        margin-bottom: 16pt !important;
        border-bottom: 0.5pt solid #CCCCD4 !important;
    }

    .wh_header .container-fluid,
    .wh_header .wh_header_flex_container {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wh_logo_and_publication_title_container,
    .wh_logo_and_publication_title {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wh_logo {
        display: inline-block !important;
    }

    .wh_logo a {
        display: inline-block !important;
    }

    .wh_logo img {
        display: inline-block !important;
        height: 16pt !important;
        width: auto !important;
        padding: 0 !important;
        vertical-align: middle !important;
    }

    /* Product name next to the logo */
    .wh_publication_title {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 10pt !important;
        font-size: 11pt !important;
        font-weight: 700 !important;
        color: #000028 !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .wh_publication_title a {
        color: #000028 !important;
        text-decoration: none !important;
        font-weight: 700 !important;
    }

    /* Suppress URL display for the publication title link */
    .wh_publication_title a::after {
        content: none !important;
    }

    /* ------------------------------------------------------------------
     * 3b. CHILD LINKS (auto-generated topic TOC at end of parent nodes)
     * Bootstrap d-print-none on the element is explicitly overridden.
     * ------------------------------------------------------------------ */
    .wh_child_links,
    .wh_child_links.d-print-none {
        display: block !important;
        margin-top: 16pt !important;
        padding-top: 8pt !important;
        border-top: 0.5pt solid #9999A9 !important;
    }

    .wh_child_links .childlinks {
        list-style: disc !important;
        margin: 6pt 0 0 18pt !important;
        padding: 0 !important;
    }

    .wh_child_links .childlinks li {
        margin-bottom: 3pt !important;
    }

    /* ------------------------------------------------------------------
     * 4. FULL-WIDTH CONTENT LAYOUT
     *
     * The topic body sits inside Bootstrap col-lg-7 / col-md-9 which
     * constrains it to 58% / 75% of the page. Override all grid columns
     * to full width. Also fix overflow:hidden on the flex container.
     * ------------------------------------------------------------------ */
    .wh_content_flex_container,
    .wh_content_area,
    #wh_topic_container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .container-fluid,
    .row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Override all Bootstrap grid column constraints */
    [class*="col-"],
    #wh_topic_body {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        position: static !important;
    }

    /* ------------------------------------------------------------------
     * 5. HEADINGS
     * ------------------------------------------------------------------ */
    h1, h2, h3, h4, h5, h6 {
        color: #000028 !important;
        font-weight: 700;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 16pt;
        margin-bottom: 6pt;
    }

    h1 {
        font-size: 18pt;
        padding-bottom: 4pt;
        border-bottom: 1.5pt solid #009999 !important;
        margin-bottom: 10pt;
    }

    h2 { font-size: 14pt; }
    h3 { font-size: 12pt; }
    h4, h5, h6 { font-size: 11pt; }

    /* ------------------------------------------------------------------
     * 6. TEXT & PARAGRAPHS
     * ------------------------------------------------------------------ */
    p {
        color: #000028 !important;
        margin-bottom: 6pt;
        orphans: 3;
        widows: 3;
    }

    ul, ol {
        margin-left: 18pt;
        margin-bottom: 6pt;
    }

    li { margin-bottom: 3pt; }

    /* ------------------------------------------------------------------
     * 7. LINKS - external links show their URL
     * ------------------------------------------------------------------ */
    a, a:visited {
        color: #000028 !important;
        text-decoration: underline !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #66667E !important;
        font-style: normal;
        text-decoration: none !important;
        word-break: break-all;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after,
    a[href^="mailto"]::after {
        content: none !important;
    }

    /* ------------------------------------------------------------------
     * 8. CODE BLOCKS & INLINE CODE
     * ------------------------------------------------------------------ */
    pre, code, .codeblock, .cmdname, .codeph, samp {
        font-family: "Roboto Mono", "Consolas", "Courier New", monospace !important;
        font-size: 9pt;
        color: #000028 !important;
    }

    pre, .codeblock {
        border: none !important;
        border-left: 2pt solid #009999 !important;
        padding: 6pt 10pt !important;
        margin: 8pt 0 !important;
        page-break-inside: avoid;
        white-space: pre-wrap !important;
        word-wrap: break-word;
        overflow: visible !important;
    }

    .codeph, code:not(pre code) {
        padding: 0.5pt 2pt;
        border: 0.5pt solid #CCCCD4 !important;
    }

    /* ------------------------------------------------------------------
     * 9. NOTES - coloured left-border accents (no fills)
     * ------------------------------------------------------------------ */
    .note {
        border: none !important;
        border-left: 3pt solid #009999 !important;
        padding: 6pt 10pt !important;
        margin: 8pt 0 !important;
        page-break-inside: avoid;
    }

    .note--caution,  .note[type="caution"]                  { border-left-color: #FF9000 !important; }
    .note--warning,  .note[type="warning"],
    .note--attention,.note[type="attention"]                 { border-left-color: #FFE270 !important; }
    .note--important,.note[type="important"]                 { border-left-color: #00C1B6 !important; }
    .note--danger,   .note[type="danger"]                    { border-left-color: #EF0137 !important; }
    .note--tip,      .note[type="tip"]                       { border-left-color: #009999 !important; }
    .note--remember, .note[type="remember"],
    .note--restriction,.note[type="restriction"]             { border-left-color: #9999A9 !important; }

    .note__title {
        font-weight: 700;
        font-size: 10pt;
    }

    /* ------------------------------------------------------------------
     * 10. TABLES - border-only (no fills)
     * ------------------------------------------------------------------ */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 10pt;
        page-break-inside: avoid;
    }

    th, td {
        border: 0.5pt solid #9999A9 !important;
        padding: 4pt 6pt;
        text-align: left;
        vertical-align: top;
        font-size: 10pt;
        color: #000028 !important;
    }

    th, thead td {
        font-weight: 700;
        border-bottom-width: 1pt !important;
    }

    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }

    /* ------------------------------------------------------------------
     * 11. IMAGES & FIGURES
     * ------------------------------------------------------------------ */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    figure, .fig {
        page-break-inside: avoid;
        margin: 8pt 0;
    }

    figcaption, .figcap {
        font-size: 9pt;
        font-style: italic;
        color: #66667E !important;
        margin-top: 3pt;
    }

    /* ------------------------------------------------------------------
     * 12. DEFINITION LISTS
     * ------------------------------------------------------------------ */
    dl  { margin-bottom: 8pt; }
    dt  { font-weight: 700; color: #000028 !important; }
    dd  { margin-left: 18pt; margin-bottom: 4pt; }

    /* ------------------------------------------------------------------
     * 13. PAGE BREAK CONTROL
     * ------------------------------------------------------------------ */
    table, figure, .fig, pre, .codeblock, .note, img {
        page-break-inside: avoid;
    }

    /* ------------------------------------------------------------------
     * 14. COPYRIGHT FOOTER - fixed at bottom, repeats on every page
     * The 'data-copyright-year' attribute is set dynamically by footer.xml.
     * ------------------------------------------------------------------ */
    body::after {
        content: "\00A9\00A0 ETM professional control GmbH " attr(data-copyright-year) " \00B7 SIMATIC WinCC Open Architecture";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 8pt;
        color: #66667E !important;
        border-top: 0.5pt solid #CCCCD4 !important;
        padding-top: 4pt;
        padding-bottom: 4pt;
    }

    /* Reserve space at the bottom so content does not run under the footer */
    body {
        padding-bottom: 28pt !important;
    }
}