/*
 * Print styles for the FameFitness Ladies Only theme.
 * Loaded with media="print", so it never affects the screen rendering.
 *
 * The design is built for screen: a fixed navbar, full-bleed heroes, dark sections
 * with white text and a pink gradient footer. Printed as-is that wastes ink and
 * comes out unreadable, so print gets a plain black-on-white document.
 *
 * The realistic reason someone prints a page here: the opening hours or the
 * address. Those have to survive.
 */

@page {
    margin: 1.5cm;
}

*,
*::before,
*::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
    filter: none !important;
}

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

/* Chrome that means nothing on paper. */
#mainNav,
.skip-link,
.wc-root,
.navbar-toggler,
#cnct-btn,
.socials,
.SkinLink,
.skin-breadcrumb,
.dnnActions,
#map,
video,
.shadow,
.gr-img,
.hero-image .gr-img,
.subscribe,
#subscribe,
form,
button,
input[type="submit"],
.btn {
    display: none !important;
}

/* The hero collapses to just its heading. */
.hero-image {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.hero-image .wrap-text,
.hero-image .hero-text {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-image .hero-text::after,
.page-section strong::after,
.underline::after,
#bg::before,
#bg::after,
#intro .container::after {
    display: none !important;
}

/* Sections lose their screen rhythm; 105px of padding is pointless on paper. */
.page-section {
    padding: 0 0 1.2rem !important;
    page-break-inside: avoid;
}

.container {
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
}

/* The grid becomes a single column: two columns of 11pt text on A4 is unpleasant. */
.row {
    display: block !important;
    margin: 0 !important;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* Typography: keep the hierarchy, drop the display sizes. */
h1, .hero-text .title { font-size: 20pt !important; }
h2, .page-section h2   { font-size: 15pt !important; }
h3                     { font-size: 12pt !important; }

h1, h2, h3, h4 {
    page-break-after: avoid;
    text-align: left !important;
}

.section-title,
.page-title {
    display: block !important;
    text-align: left !important;
    margin: 0 0 .5rem !important;
}

p, li {
    orphans: 3;
    widows: 3;
}

img {
    max-width: 100% !important;
    page-break-inside: avoid;
}

/* Tables must print in full rather than in a scroll box. */
.ContainerPane table,
.dnnGrid {
    display: table !important;
    overflow: visible !important;
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
}

.ContainerPane table th,
.ContainerPane table td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
}

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

/* Show link targets, since a printed link is otherwise dead. */
a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
}

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

/*
 * The footer carries the address and phone number, which is exactly what someone
 * printing this page is likely to want, so it stays - just without the gradient.
 */
footer {
    border-top: 1pt solid #000 !important;
    padding-top: .5rem !important;
    page-break-before: avoid;
}

footer img { display: none !important; }