/**
 * FILE: assets/css/print.css
 * PURPOSE: The printed page. Linked with media="print" in includes/head.php,
 *          so none of it touches the screen.
 *
 *          What people actually print from a contractor's site is an estimate
 *          page, a service page to hand to a spouse, or the contact details.
 *          So: black on white, the phone number and licence always visible,
 *          navigation and decoration gone, and link targets written out.
 */

@page {
    margin: 18mm 16mm;
}

/* ===========================================================================
 * 1. GROUND AND TYPE
 * ========================================================================= */

:root {
    --bg-page: #fff;
    --bg-raised: #fff;
    --bg-raised-hover: #fff;
    --bg-well: #fff;
    --text-base: #000;
    --text-muted: #1a1a1a;
    --text-faint: #4a4a4a;
    --accent: #000;
    --border: #bbb;
    --border-strong: #888;
    --img-filter: none;
}

html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
}

* {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* ===========================================================================
 * 2. WHAT DOES NOT PRINT
 * ========================================================================= */

.masthead__actions,
.menu-toggle,
.site-menu,
.skip-link,
.breadcrumbs,
.marquee,
.cta-band,
.inline-cta,
.jump,
.map-embed,
.hero__actions,
.page-hero__actions,
.intro-grid__cta,
.side-card__actions,
.estimate-form__submit,
.ba__control,
.ba__handle,
.accordion__icon,
.site-footer__socials,
.site-footer__bbb,
.next-links,
.related,
[data-reveal] {
    display: none !important;
}

/* Keep reveal-animated content — just not animated. */
[data-reveal] { display: revert !important; opacity: 1 !important; transform: none !important; }

/* ===========================================================================
 * 3. STRUCTURE
 * ========================================================================= */

.wrap, .wrap--narrow, .wrap--wide {
    max-width: none;
    padding-inline: 0;
    margin: 0;
}

.section {
    padding-block: 0 8mm;
    border: 0 !important;
}

.section + .section { border-top: 0.3mm solid #bbb !important; padding-top: 8mm; }

.masthead {
    position: static;
    border-bottom: 0.5mm solid #000;
    padding-bottom: 4mm;
    margin-bottom: 8mm;
}

.masthead__inner { min-height: 0; display: block; }
.masthead__logo { height: 18mm; }
.masthead__wordmark { display: block !important; }

/* Stacked grids print better than squeezed columns. */
.layout-sidebar,
.intro-grid,
.svc-grid,
.quote-grid,
.city-cards,
.values,
.showcase,
.credentials__list,
.form-grid,
.site-footer__cols,
.areas-list__towns,
.areas-list__hubs,
.city-links__list {
    display: block !important;
}

.layout-sidebar__side,
.layout-sidebar__aside { position: static !important; margin-top: 8mm; }

/* ===========================================================================
 * 4. TYPE ON PAPER
 * ========================================================================= */

h1, h2, h3, h4, .display-hed, .hero__hed, .page-hero__hed, .section-hed__title {
    page-break-after: avoid;
    break-after: avoid;
    letter-spacing: 0;
}

h1, .display-hed, .hero__hed, .page-hero__hed { font-size: 22pt; line-height: 1.1; }
h2, .section-hed__title { font-size: 15pt; }
h3 { font-size: 13pt; }

p, li, blockquote, .lede { orphans: 3; widows: 3; }

.lede { font-size: 12pt; }

.kicker,
.section-hed__kicker,
.section-hed__num,
.meta-line {
    font-size: 8pt;
    letter-spacing: 0.08em;
}

.prose, .prose--wide { max-width: none; }

/* ===========================================================================
 * 5. LINKS
 * A printed page cannot be clicked, so write the address out — but only for
 * links that leave the page, and never for an inline tracking-style URL.
 * ========================================================================= */

a { text-decoration: underline; }

.prose a[href^="http"]::after,
.prose a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #4a4a4a !important;
    word-break: break-all;
}

a[href^="tel:"]::after,
a[href^="mailto:"]::after { content: ""; }

/* ===========================================================================
 * 6. IMAGES
 * ========================================================================= */

img, figure, .showcase__item, .proj-card, .svc-card, .quote, .ba {
    page-break-inside: avoid;
    break-inside: avoid;
}

.hero, .page-hero {
    min-height: 0;
    padding-block: 0 6mm;
}

.hero__frames, .hero__scrim,
.page-hero__bg, .page-hero__scrim,
.full-bleed__img,
.svc-card__media,
.proj-card__media,
.accordion__media,
.showcase,
.ba__frame {
    display: none !important;
}

/* ===========================================================================
 * 7. CARDS AND PANELS
 * ========================================================================= */

.svc-card, .proj-card, .city-card, .values__item, .side-card, .credentials__item, .quote {
    border: 0.3mm solid #bbb !important;
    padding: 4mm !important;
    margin-bottom: 4mm;
}

/* Every accordion panel is open on paper; a collapsed answer is a lost one. */
.accordion__item .accordion__panel { display: block !important; padding-left: 0; }
.accordion__summary { padding-block: 3mm 1mm; }
.accordion__item { border-bottom: 0.3mm solid #bbb !important; }

/* ===========================================================================
 * 8. FORM
 * Printed, the form becomes something that can be filled in with a pen and
 * read over the phone.
 * ========================================================================= */

.field__input, .field__select, .field__textarea {
    border: 0 !important;
    border-bottom: 0.3mm solid #000 !important;
    border-radius: 0;
    min-height: 8mm;
    padding: 0;
}

.field__textarea { min-height: 24mm; }
.field__hint, .form-alert { display: none !important; }

/* ===========================================================================
 * 9. FOOTER — the part that matters most on paper
 * ========================================================================= */

.site-footer {
    border-top: 0.5mm solid #000;
    padding-top: 6mm;
    margin-top: 10mm;
    font-size: 9pt;
    page-break-inside: avoid;
    break-inside: avoid;
}

.site-footer__links, .site-footer__legal { display: none !important; }

.site-footer__phone { font-size: 16pt; font-weight: 600; }

.site-footer__logo { height: 14mm; }