/*This file plays as a index for the rest of the scripts*/

/* style.css */
@import url('base.css');
@import url('layout.css');
@import url('cards.css');
@import url('elements.css');
@import url('tags.css');
@import url('nav.css');
@import url('projects.css');
@import url('project_window.css');
@import url('floating_preview.css');
@import url('citation_highlights.css');
@import url('gallery_photos.css');




/* Project detail pages — pre-loaded for print, invisible on screen */
#print-projects-section {
    display: none;
}

/* style.css */

@media print {
    @page {
        size: A4;
        margin: 1.5cm;
    }

    /* Force colour printing — without this, browsers strip background colours */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* === 1. HIDE CHROME & INTERACTIVE ELEMENTS === */
    .ui-layer,
    #lines-layer,
    #project-sidebar,
    #piv-mouse-tooltip,
    .node,
    .lit-button,
    .hub-nav-arrows,
    .archive-header,
    canvas:not(#canvas) {
        display: none !important;
    }

    /* === 2. PAGE BACKGROUND — subtle dot grid echoing the canvas === */
    html, body {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background-color: #f7f7f7 !important;
        background-image: radial-gradient(#cecece 1px, transparent 1px) !important;
        background-size: 22px 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* === 3. FLATTEN THE CANVAS SYSTEM === */
    #viewport {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        will-change: auto !important;
        cursor: default !important;
        background: transparent !important;
    }

    /* Remove the 20 000 px canvas and its JS-applied pan transform */
    #canvas {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        background: transparent !important;
        will-change: auto !important;
        overflow: visible !important;
    }

    /* Card cluster region (was at top:9000px left:9000px) */
    #piv-world-region {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* === 4. GROUPING CONTAINERS — restore the dashed cluster borders === */
    .section-box {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        border: 2px dashed #bbb !important;
        border-radius: 30px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        overflow: visible !important;
    }

    .card-group {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        align-items: stretch !important;
    }

    /* === 5. CARDS — restore the rounded, shadowed look === */
    .mindmap-card {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        padding: 40px !important;
        border: 1px solid #eeeeee !important;
        border-radius: 30px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
        background: white !important;
        overflow: visible !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Override the higher-specificity rule in layout.css */
    #identity-cluster-box .mindmap-card {
        position: static !important;
    }

    /* Reset fixed-width card variants */
    .hero-card, .vision-card, .ambition-card, .PI-card, .PIS-card,
    #project-archive-hub {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* === 6. TYPOGRAPHY
         Cards are designed at 0.5× canvas zoom, so the CSS variable body text
         (10 px) renders effectively at ~5 px on screen. Bump to print-legible sizes. === */
    .vision-card p, .ambition-card p,
    .PI-card p, .PIS-card p {
        font-size: 11px !important;
        line-height: 1.6 !important;
        color: #333 !important;
    }

    h2, .card-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        margin-bottom: 6px !important;
    }

    /* Decorative rule under card titles */
    .header-line {
        border-top: 2px solid #eeeeee !important;
        margin: 8px 0 16px !important;
    }

    /* === 7. TAG COLOURS — explicit so the print engine keeps them === */
    .tag[data-competence="TR"]  { background-color: #F5DD53 !important; }
    .tag[data-competence="MDC"] { background-color: #E7A5FB !important; }
    .tag[data-competence="US"]  { background-color: #5CD665 !important; }
    .tag[data-competence="CA"]  { background-color: #ff9041 !important; }
    .tag[data-competence="BE"]  { background-color: #76B6FF !important; }

    /* === 8. COMPONENT-SPECIFIC STYLING === */

    /* Hero card: keep the circular profile photo */
    .card-image-circle {
        border-radius: 300px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        width: 140px !important;
        height: 180px !important;
    }

    .hero-title {
        font-size: 24px !important;
    }

    /* Goals section: pill header */
    .card-goal-header {
        border-radius: 50px !important;
        border: 1px solid #eee !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
        background: white !important;
        padding: 14px 36px !important;
        margin-bottom: 16px !important;
        width: fit-content !important;
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    /* Goals sub-cards */
    .sub-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border: 1px solid #eee !important;
        border-radius: 20px !important;
        background: white !important;
        padding: 20px 24px !important;
    }

    /* Sub-body is hidden by JS by default — force visible for print */
    .sub-body {
        display: block !important;
    }

    .sub-body p {
        font-size: 11px !important;
        line-height: 1.5 !important;
        color: #444 !important;
        margin-top: 6px !important;
    }

    .sub-header {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    /* Archive hub card */
    #project-archive-hub {
        border-radius: 30px !important;
        border: 1px solid #eee !important;
        background: white !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
        padding: 30px !important;
    }

    /* Project preview cards in the archive grid */
    .project-preview-card {
        width: calc(33% - 12px) !important;
        flex-shrink: 1 !important;
        box-sizing: border-box !important;
        border: 1px solid #eee !important;
        border-radius: 16px !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    /* === 9. REFLECTION SECTION — lavender accent stripe === */
    .reflection-stack {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        margin-top: 0 !important;
        align-items: stretch !important;
    }

    .static-reflection-card,
    .past-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        flex: none !important;
        box-sizing: border-box !important;
        border-left: 4px solid #a5a5ff !important;
        border-radius: 0 20px 20px 0 !important;
        background: #fafaff !important;
        padding: 24px !important;
    }

    .static-reflection-card h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        margin-bottom: 10px !important;
    }

    .static-reflection-card p,
    .past-card p {
        font-size: 11px !important;
        line-height: 1.6 !important;
        color: #333 !important;
    }

    /* === 10. EXPAND CLIPPED / SCROLLABLE AREAS === */
    .scroll-area,
    .card-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .archive-slider {
        overflow: visible !important;
        height: auto !important;
    }

    .project-track {
        flex-wrap: wrap !important;
        width: 100% !important;
        transform: none !important;
        padding: 0 !important;
    }

    /* === 11. INTERNAL CARD LAYOUTS === */
    .card-horizontal-container {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* === 12. IMAGES === */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* === 13. PROJECT DETAIL PAGES === */
    #print-projects-section {
        display: block !important;
    }

    .print-project-entry {
        break-before: page !important;
        page-break-before: always !important;
    }

    /* Each project page wrapped in a styled card */
    .print-project-entry .project-page-container {
        width: 100% !important;
        max-width: 100% !important;
        background: white !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        border: 1px solid #eee !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
        padding-bottom: 20px !important;
    }

    .print-project-entry .hero-media {
        height: auto !important;
        aspect-ratio: auto !important;
        max-height: 260px !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .print-project-entry .hero-media img {
        width: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
    }

    .print-project-entry .project-mosaic-organized {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .print-project-entry .visual-tile,
    .print-project-entry .visual-tile.thin {
        grid-column: span 1 !important;
        height: auto !important;
        overflow: hidden !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border-radius: 12px !important;
    }

    .print-project-entry .visual-inner {
        height: auto !important;
        padding-top: 0 !important;
    }

    .print-project-entry .visual-inner img {
        width: 100% !important;
        max-height: 240px !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Restore the purple reflection box inside project pages */
    .print-project-entry .reflection-box {
        background: #e2e4ff !important;
        border: 1px solid #c8cdff !important;
        border-radius: 16px !important;
    }

    /* Restore the info box */
    .print-project-entry .piv-info-box {
        background: #fcfcfc !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
    }

    /* Video / PDF placeholder */
    .print-video-placeholder {
        border: 1px solid #bbb !important;
        border-radius: 8px !important;
        padding: 12px 18px !important;
        background: #f0f0f0 !important;
        margin: 12px 0 !important;
        font-size: 13px !important;
        color: #444 !important;
        break-inside: avoid !important;
    }

    .print-project-entry .visual-pill,
    .print-project-entry .pdf-download-btn {
        display: none !important;
    }
}