/* CERC – printed pages and "Save as PDF" (loaded with media="print").
   An A4 document in the CERC brand: the logo and the page's address at the top, the text on white in Barlow with
   Draft Natural titles, link addresses written out, no menus, buttons or pop-ups, and at the foot of the document
   where it comes from and when it was printed; page numbers in the margin. site.js opens the closed sections,
   loads the pictures and fills in the address and the date just before printing. */

@page {
  size: A4;
  margin: 16mm 15mm 18mm;
  @bottom-left { content: "CERC – Centre de Recherche sur l’Anti-Corruption · www.cerc.cd"; font: 8pt "Barlow", sans-serif; color: #6b6b78; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "Barlow", sans-serif; color: #6b6b78; }
}

/* ---------------------------------------------------------------- the page */
html { font-size: 10pt !important; }
body { background: #fff !important; color: #1f1f2b !important; margin: 0 !important; padding: 0 !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
/* what sticks to the screen while scrolling follows the text on paper */
.fin-filters, .fin-table thead th, .mag-aside, .policy-toc, .sc-nav, .sl-bar, .story-aside, .page-nav, .gov-tabs-bar, .rep-filters-bar { position: static !important; top: auto !important; }
.container, .container--wide { max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

/* what does not belong on paper */
.header, .footer, .tabbar, .helper, .to-top, .skip-link, .apps-modal, .team-modal, .app-toast, .lang-offer, .page-nav, .read-progress,
.print-fab, .wb-tools, .cs-tools, .nav-handler, .hero__scroll, .hero__buttons, .home-links, .gov-tabs-bar, .cs-tabs, [role="tablist"],
.sl-toolbar, .sl-tools, .sl-more, .wb-more, .fs-more, .cs-close, .bp-call, .btn, button, form, input, select, iframe, video, audio,
.sc-player, .sc-players, .report__btns, .mag-card__btns, .story-back, .decorate::before, .decorate::after { display: none !important; }

/* every tab panel and every hidden part of a story is printed */
[role="tabpanel"][hidden], .gov-panel[hidden], .cs-panel[hidden] { display: block !important; }
.reveal { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------- top and foot of the document */
.print-head { display: flex !important; align-items: center; justify-content: space-between; gap: 8mm;
  padding: 0 0 4mm; margin: 0 0 6mm; border-bottom: 1.5pt solid #eca327; }
.print-head img { width: 52mm; height: auto; }
.print-head__url { font: 600 8pt "Barlow", sans-serif; color: #6b6b78; text-align: right; word-break: break-all; }
.print-foot { display: block !important; margin-top: 10mm; padding-top: 4mm; border-top: 1.5pt solid #eca327; break-inside: avoid; }
.print-foot p { font: 8.5pt/1.45 "Barlow", sans-serif !important; color: #44445a !important; margin: 0 0 1.5mm !important; }
.print-foot b { color: #27273e; }

/* ---------------------------------------------------------------- titles and heroes: on white, in navy */
[class*="hero"], .page-hero, .cs-hero, .bg-dark, .bg-navy, .cs-sec--navy, .home-support, .story-hero {
  background: #fff !important; color: #1f1f2b !important; padding: 0 !important; margin: 0 0 5mm !important; min-height: 0 !important; }
[class*="hero"] *, .bg-dark *, .bg-navy *, .cs-sec--navy * { color: inherit !important; }
.page-hero__grid, .cs-hero__grid, .hero__grid, .story-hero .page-hero__grid { display: block !important; }
.breadcrumb { display: none !important; }
h1 { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 22pt !important; line-height: 1.12 !important; color: #27273e !important;
  margin: 0 0 3mm !important; text-transform: none !important; letter-spacing: 0 !important; }
.hero__lead, .cs-hero__lead, [class*="hero"] p { font-size: 11.5pt !important; line-height: 1.4 !important; color: #33334a !important; max-width: none !important; }
/* the label of the post (category, date, author) */
.cs-kicker, .cs-kicker * { font-size: 8.5pt !important; }
.cs-kicker__cat, .hero-badge, .section__tag { background: #eca327 !important; color: #27273e !important; padding: 1mm 2.5mm !important; border-radius: 1mm;
  font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; display: inline-block; text-decoration: none; }
/* the picture of the hero: full width, not too tall, with its caption */
.cs-hero__photo, .story-hero__photo, .hero__image--side, .hero__art { margin: 4mm 0 2mm !important; transform: none !important; max-width: none !important; }
.cs-hero__photo img, .story-hero__photo img, .hero__image--side img, .hero__art img { width: 100% !important; max-height: 85mm !important;
  object-fit: cover; border-radius: 1.5mm; }
.hero__image--side img[src$=".svg"], .hero__art img[src$=".svg"] { max-height: 45mm !important; object-fit: contain; width: auto !important; }
figcaption, .cs-hero__caption, .cs-hero figcaption { font-size: 8pt !important; color: #6b6b78 !important; font-style: italic; margin-top: 1mm !important; }

/* ---------------------------------------------------------------- sections and text */
main .section, main section, .cs-sec, .bp-sec { background: none !important; padding: 0 !important; margin: 0 0 4mm !important; border: 0 !important; }
.cs-sec--cream, .bg-light, .bg-mid { background: none !important; }
h2 { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 15pt !important; line-height: 1.2 !important; color: #27273e !important;
  margin: 6mm 0 2.5mm !important; padding: 0 0 1.2mm !important; border-bottom: .8pt solid #e0dccf; break-after: avoid; page-break-after: avoid; }
h3, h4 { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 12pt !important; line-height: 1.25 !important; color: #27273e !important;
  margin: 4mm 0 1.5mm !important; break-after: avoid; page-break-after: avoid; }
p, li, dd, dt, td, th { font-family: "Barlow", sans-serif !important; font-size: 10.5pt !important; line-height: 1.5 !important; color: #1f1f2b !important;
  text-align: left !important; orphans: 3; widows: 3; }
p { margin: 0 0 2.6mm !important; }
ul, ol { margin: 0 0 3mm !important; padding-left: 6mm !important; }
li { margin-bottom: 1mm !important; break-inside: avoid; }
strong, b { color: #27273e !important; }
.cs-prose, .bp-entry, .entry, .content-col, .story-text { max-width: none !important; margin: 0 !important; columns: auto !important; }
.cs-prose--lead p { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 13pt !important; line-height: 1.4 !important; color: #27273e !important; }

/* quotes and boxes: a rule in the brand colour, no heavy fills */
blockquote, .impact-quote, .wp-block-quote { margin: 4mm 0 !important; padding: 2mm 0 2mm 5mm !important; border: 0 !important; border-left: 2.5pt solid #eca327 !important;
  background: none !important; break-inside: avoid; }
blockquote p, .impact-quote p { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 11.5pt !important; color: #27273e !important; }
blockquote cite, .impact-quote cite { font: 700 8.5pt "Barlow", sans-serif !important; color: #e85b15 !important; font-style: normal; }

/* pictures and figures stay whole */
img { max-width: 100% !important; height: auto !important; break-inside: avoid; }
figure { margin: 3mm 0 !important; break-inside: avoid; }
main figure img { max-height: 110mm; object-fit: contain; }

/* cards and grids: two columns, no shadows, a thin border */
.grid-3, .grid-4, .wb-cards, .sl-grid, .cs-cards, .home-projs, .home-stories, .home-acts, .mag-cards, .press-cards, .reports {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; }
.card, .wb-card, .sl-card, .cs-card, .mag-card, .press-card, .report, .project, .impact-card, .kpi, .stat {
  border: .6pt solid #e0dccf !important; border-radius: 1.5mm !important; padding: 3mm !important; background: #fff !important; break-inside: avoid; }
.sl-card img, .wb-card img, .card img { max-height: 40mm !important; object-fit: cover; width: 100% !important; }

/* tables */
table { width: 100% !important; border-collapse: collapse !important; break-inside: auto; }
thead { display: table-header-group; }
tr { break-inside: avoid; }
th, td { border-bottom: .6pt solid #e0dccf !important; padding: 1.5mm 2mm !important; font-size: 9.5pt !important; }
th { color: #27273e !important; font-weight: 700 !important; }

/* links: in navy, with their address written out after them in the text, so the paper keeps the sources */
a { color: #27273e !important; text-decoration: none !important; }
main :is(p, li, td) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; font-weight: 400; color: #6b6b78; word-break: break-all; }
main :is(p, li, td) a[href^="/"]::after { content: " (www.cerc.cd" attr(href) ")"; font-size: 8pt; font-weight: 400; color: #6b6b78; word-break: break-all; }
main :is(p, li, td) a[href^="mailto:"]::after, main :is(p, li, td) a[href^="tel:"]::after,
main :is(p, li, td) a[href*="#"]::after { content: none; }
main :is(p, li, td) a { text-decoration: underline !important; text-decoration-color: #eca327 !important; text-decoration-thickness: .8pt !important; text-underline-offset: .6mm; }

/* the summary of a closed section prints as a heading of its text */
details { break-inside: avoid; }
summary { list-style: none; font-weight: 700; color: #27273e; }
summary::-webkit-details-marker { display: none; }
summary .icon, .cs-acc__icon, .cs-acc i { display: none !important; }

/* decorations of the heroes (arcs, shapes) stay on screen */
[class*="hero"]::before, [class*="hero"]::after, .page-hero::before, .page-hero::after, .cs-hero::before, .cs-hero::after { display: none !important; content: none !important; }
.hero__content, .cs-intro .container, .cs-intro { padding: 0 !important; min-height: 0 !important; display: block !important; max-width: none !important; }
.cs-intro .cs-prose, .cs-prose--lead { max-width: none !important; }
.hero--hp .hero__lead { font-family: "Draft Natural", "Barlow", sans-serif !important; font-size: 16pt !important; line-height: 1.3 !important; color: #27273e !important; }
.hero--hp .hero__art img { max-height: 40mm !important; }

/* the case study: the apps one after the other, each in a light frame of its own colour */
.cs-apps, .cs-panels { display: block !important; }
.cs-panel { height: auto !important; min-height: 0 !important; padding: 3mm 4mm !important; margin: 0 0 3mm !important; border-radius: 1.5mm !important;
  border-width: .8pt !important; break-inside: avoid; }
.cs-panel::before, .cs-panel::after, .cs-sec::before, .cs-sec::after, .cs-art { display: none !important; }
.cs-panel__logo { height: 9mm !important; margin-bottom: 2mm !important; }
.cs-panel p { max-width: none !important; }

/* the stretched card link draws nothing on paper */
.wb-card__title::after, .card-link::after { content: none !important; }