/*
 * v3.css: the only home for CSS that v3 needs and v2 didn't.
 *
 * Loaded last, after style.css, Bootstrap, Remixicon and Font Awesome. style.css stays unchanged
 * (the v2 look), so keep this file minimal: every rule here says why it exists, and the
 * parity rule (task.md §5) still applies.
 */

/*
 * The one-page site wraps each former page in <section id="home|about|projects|services|contact">.
 * v2 had no <section> elements, so style.css's `section` rules (margin-bottom: 48px; and
 * padding: 3rem 2rem below 1200px) never applied in v2. Reset them for these sections only,
 * so each one lays out exactly as its v2 page did.
 */
main > section {
    margin: 0;
    padding: 0;
}

/*
 * Without JavaScript the page must still show (task.md Phase 7). style.css starts .main-content
 * at opacity 0 and the preloader script reveals it, so in v2 a visitor without JS saw a blank
 * page under a stuck preloader. `scripting: none` only matches when scripts can't run, so the
 * preloader's look and timing with JS on are untouched.
 */
@media (scripting: none) {
    .main-content {
        opacity: 1;
        transform: none;
    }

    .preloader,
    .slide-reveal-panel {
        display: none;
    }
}

/*
 * Print = the resume (task.md T1, 3b). v2 printed resume.html; on the one-page site the About
 * section is the resume, so it's the only section that prints. style.css's print rules (v2's,
 * unchanged) still do the black-on-white, full-width, compact styling. These only pick and order
 * the blocks: About's two columns are flattened so its cards come out in v2's resume order (name,
 * bio, info, experience, education, skills), and blocks marked data-resume="skip" (the heading,
 * why-hire, certifications) stay off paper. The id selectors outrank style.css's print rules.
 */
@media print {
    main > section:not(#about) {
        display: none !important;
    }

    #about > .container > .row > .col-lg-8,
    #about > .container > .row > .col-lg-4,
    #about > .container > .row > .col-lg-8 > .row,
    #about > .container > .row > .col-lg-4 > .row {
        display: contents !important;
    }

    #about [data-resume="skip"],
    #about .star-icon,
    #about .about-btn {
        display: none !important;
    }

    #about [data-resume="name"] { order: 1; }
    #about [data-resume="bio"] { order: 2; }
    #about [data-resume="info"] { order: 3; }
    #about [data-resume="experience"] { order: 4; }
    #about [data-resume="education"] { order: 5; }
    #about [data-resume="skills"] { order: 6; }

    /* Compact, like resume.html's plain lists: About's timeline (dots, line, padded panels) and
       its skill cards cost a whole extra sheet on paper. */
    #about .timeline-container,
    #about .timeline-item,
    #about .timeline-content {
        padding: 0 !important;
        margin: 0 0 6px !important;
    }

    #about .timeline-item {
        margin-bottom: 14px !important;
    }

    #about .timeline-item::before,
    #about .timeline-item::after,
    #about .timeline-content::before,
    #about .timeline-content::after {
        display: none !important;
    }

    #about .skill-card {
        border: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #about .skill-name {
        border-top: 0 !important;
        padding-top: 0 !important;
    }

    #about .skills-section [class*="col-"] {
        margin-bottom: 4px !important;
    }
}