/*
|--------------------------------------------------------------------------
| HomeToThere
|--------------------------------------------------------------------------
|
| File        : assets/css/print.css
| Version     : 0.1
| Status      : Development
|
| Purpose
|
| Produce a clear, professional, single-page A4 preparation plan using the
| browser's Print or Save as PDF facility.
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   1. Page Setup
   ========================================================================== */

@page {
    size: A4 portrait;
    margin: 10mm 12mm;
}


/* ==========================================================================
   2. Print Defaults
   ========================================================================== */

html,
body {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    color: #111827 !important;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    font-size: 9.5pt;
    line-height: 1.35;
}

body {
    display: block;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
}

img,
svg {
    max-width: 100% !important;
}

a,
a:visited {
    color: inherit !important;
    text-decoration: none !important;
}


/* ==========================================================================
   3. Hide Screen-Only Elements
   ========================================================================== */

.skip-link,
.site-navigation,
.hero,
.hero__actions,
.planner,
.step-progress,
.feedback-form,
.feedback-submit,
.result-actions,
.button,
button,
.site-footer,
.footer-navigation,
.footer-meta,
noscript {
    display: none !important;
}


/* ==========================================================================
   4. Printed Header
   ========================================================================== */

.site-header {
    display: block !important;
    position: static;
    margin: 0 0 5mm;
    padding: 0 0 4mm;
    border-bottom: 1.5pt solid #062743;
    background: #ffffff !important;
    color: #062743 !important;
}

.site-header__inner {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 0;
    display: block;
}

.site-brand {
    display: block;
    color: #062743 !important;
    text-decoration: none;
}

.site-brand__name {
    display: block;
    color: #062743 !important;
    font-size: 18pt;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.site-brand__tagline {
    display: block;
    margin-top: 1mm;
    color: #475569 !important;
    font-size: 8.5pt;
    line-height: 1.25;
}


/* ==========================================================================
   5. Main Page Structure
   ========================================================================== */

.site-main,
.container,
.reading-width,
.form-width {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.content-section,
.content-section--white,
.content-section--blue,
.page-intro {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}


/* ==========================================================================
   6. Result Introduction
   ========================================================================== */

.page-intro {
    margin-bottom: 4mm !important;
    text-align: left;
}

.page-intro .reading-width {
    width: 100% !important;
}

.hero__eyebrow {
    display: block !important;
    margin: 0 0 1.5mm !important;
    color: #0a5c91 !important;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-intro h1 {
    margin: 0 0 2mm !important;
    color: #062743 !important;
    font-size: 20pt;
    font-weight: 700;
    line-height: 1.05;
}

.page-intro__lead {
    max-width: none !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: 10pt;
    line-height: 1.35;
}


/* ==========================================================================
   7. Timeline
   ========================================================================== */

.timeline {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.timeline__item {
    position: relative;
    display: grid !important;
    grid-template-columns: 10mm 1fr;
    gap: 4mm;
    margin: 0 !important;
    padding: 0 0 3.5mm !important;
    page-break-inside: avoid;
    break-inside: avoid;
}

.timeline__item:last-child {
    padding-bottom: 0 !important;
}

.timeline__item::before {
    top: 9mm !important;
    bottom: 0 !important;
    left: 4.7mm !important;
    width: 0.6pt !important;
    background: #cbd5e1 !important;
}

.timeline__item:last-child::before {
    display: none !important;
}

.timeline__marker {
    width: 9mm !important;
    height: 9mm !important;
    border: 1.2pt solid #0a5c91 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #0a5c91 !important;
    font-size: 8pt !important;
    font-weight: 700;
    box-shadow: none !important;
}

.timeline__item:last-child .timeline__marker {
    border-color: #f59e0b !important;
    background: #ffffff !important;
    color: #9a3412 !important;
    box-shadow: none !important;
}

.timeline__content {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3mm 4mm !important;
    border: 0.7pt solid #cbd5e1 !important;
    border-left: 3pt solid #0a5c91 !important;
    border-radius: 2mm !important;
    background: #ffffff !important;
    page-break-inside: avoid;
    break-inside: avoid;
}

.timeline__item:last-child .timeline__content {
    border-left-color: #f59e0b !important;
}

.timeline__label {
    margin: 0 0 0.5mm !important;
    color: #475569 !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.timeline__time {
    margin: 0 !important;
    color: #062743 !important;
    font-size: 17pt !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
}

.timeline__date {
    margin: 0.75mm 0 0 !important;
    color: #475569 !important;
    font-size: 8.5pt !important;
}

.timeline__content .text-small {
    margin: 1.5mm 0 0 !important;
    color: #475569 !important;
    font-size: 8pt !important;
    line-height: 1.25 !important;
}


/* ==========================================================================
   8. Summary Card
   ========================================================================== */

.result-page .content-section--blue {
    margin-top: 4mm !important;
}

.result-page .card {
    margin: 0 !important;
    padding: 3mm 4mm !important;
    border: 0.7pt solid #cbd5e1 !important;
    border-radius: 2mm !important;
    background: #ffffff !important;
    text-align: left !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
}

.result-page .card__title {
    margin: 0 0 1mm !important;
    color: #062743 !important;
    font-size: 11pt !important;
}

.result-page .card__text {
    margin: 0 0 1.5mm !important;
    color: #1f2937 !important;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
}

.result-page .card .text-small {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 7.5pt !important;
    line-height: 1.25 !important;
}

.notice {
    margin: 2mm 0 !important;
    padding: 2.5mm 3mm !important;
    border: 0.7pt solid #d97706 !important;
    border-left: 3pt solid #f59e0b !important;
    border-radius: 1.5mm !important;
    background: #ffffff !important;
    color: #7c2d12 !important;
    font-size: 8pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
}


/* ==========================================================================
   9. Print Footer
   ========================================================================== */

.result-page::after {
    display: block;
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 0.7pt solid #cbd5e1;
    color: #64748b;
    font-size: 7.5pt;
    line-height: 1.3;
    content:
        "Generated by HomeToThere · hometothere.com · "
        "Journey times are estimates. Allow additional time where circumstances may affect your travel.";
}


/* ==========================================================================
   10. Page-Break Protection
   ========================================================================== */

h1,
h2,
h3,
p,
.timeline,
.timeline__item,
.timeline__content,
.card,
.notice {
    orphans: 3;
    widows: 3;
}

h1,
h2,
h3 {
    page-break-after: avoid;
    break-after: avoid;
}

.timeline__item,
.timeline__content,
.card,
.notice {
    page-break-inside: avoid;
    break-inside: avoid;
}


/* ==========================================================================
   11. Result-Page Compression for A4
   ========================================================================== */

@media print {

    .result-page .site-header {
        margin-bottom: 4mm;
    }

    .result-page .page-intro {
        margin-bottom: 3mm !important;
    }

    .result-page .timeline__item {
        padding-bottom: 3mm !important;
    }

    .result-page .content-section--blue {
        margin-top: 3mm !important;
    }
}


/* ==========================================================================
   End of File
   ========================================================================== */