/* PDF export of the profile (print of the browser). Loaded with media="print", after styles.css. */
@page {
    size: A4 portrait;
    margin: 0;    /* the margins are in the content (below): the browsers ignore @page margins when the print dialog has its own margins setting */
}

/* Margins of the pages: padding of the whole profile, repeated on every page (box-decoration-break: clone) */
#profileGeo {
    display: block !important;
    padding: 12mm !important;
    box-sizing: border-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* the sections follow each other (no page break, no empty space) */
#profileGeo > [id^="topic-"]:not(.hidden) ~ [id^="topic-"]:not(.hidden) {
    margin-top: 8mm;
}

/* Cover page: logos, map with the name card of the geography, comparison geographies, date. All aligned on the margins of the page. */
.print-cover {
    break-after: page;
    page-break-after: always;
}
.print-cover .p-5 {
    padding: 0 !important;
}
.print-cover-details {
    margin-top: 20px;
}
.print-cover-mapbox {
    position: relative;
}
.print-cover-map {
    width: 100%;
    height: auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}
.print-cover-card {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 65%;
    padding: 10px 14px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
.print-cover.with-map .print-cover-title {
    display: none;    /* the name is in the card of the map */
}
.print-cover-line {
    margin-top: 12px;
    font-size: 1rem;
    color: #4b5563;
}
/* no empty block (disclaimer of the profile) before the cover */
#profileGeo > div:empty {
    display: none;
}

/* A heading stays with what follows it */
.print-heading {
    break-after: avoid;
    page-break-after: avoid;
}

/* Cells and charts are never cut */
.print-box,
.chart-container,
.compare-chart-container,
[id^="profile-"] {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* The dialog and the buttons are not printed */
#printDialog {
    display: none !important;
}

/* Denser pages: smaller text. The charts keep their height of the screen (190px): a smaller one would make them stick out of their cell until they are drawn again. */
html {
    font-size: 62%;
}
.print-grid {
    gap: 10px !important;
}

/* The margins of the pages are the ones of @page only: no padding of the page container (it added space above the cover and beside the content) */
.max-w-7xl:has(#profileAll) {
    padding: 0 !important;
    max-width: none !important;
}

/* Icon of the topic next to the title of each main section (Demography, Housing...), as the buttons of the page */
.print-topic-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 1.3rem;
}

/* Title of the portal at the top of the cover page */
.print-cover-site-title {
    margin: 28px 0 22px;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.15;
}

/* A hidden block stays hidden: the grid of the highlights has display: grid !important in the print rules of styles.css, which showed the highlights again after the whole list */
.print-grid.hidden {
    display: none !important;
}