/*
CSS PAD FOR SI25 PRINT

Hello: I've made some changes
To update the stylesheet for the print:
    
    - log into cerealbox
    - cd /var/www/html/Special-Issue-25/
    - bash update_print_css.sh
    
    Stop the script with CTRL+C.
    remember to stop it when you're done
    The script is a loop that "updates" the print.css, which shows in the print.html page
    
to keep in mind: there might be too many requests to the Etherpad
in that case slow everything down (change the sleep's parameter) 
    
The website html is here: https://hub.xpub.nl/cerealbox/Special-Issue-25/view.html
The website html is here: https://hub.xpub.nl/cerealbox/Special-Issue-25/print.html
The pad for the website css is here: https://pad.xpub.nl/p/start.css



*/

/* Adding fonts */
@font-face {
    font-family: 'Bradford';
    src: url('./fonts/bradfordll-regular-webfont.woff2');
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'Bradford';
    src: url('./fonts/bradfordll-italic-webfont.woff2');
    font-style: italic;
    font-weight: 500;
}
@font-face {
    font-family: 'Bradford';
    src: url('./fonts/bradfordll-bold-webfont.woff2');
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: 'Bradford';
    src: url('./fonts/bradfordll-medium-webfont.woff2');
    font-style: normal;
    font-weight: 600;
}

/* CSS Variables */
:root {
	--font-size: 10pt;
	--text-font: 'Bradford';
	--page-width: calc(210mm - 55mm);
}

/* Specific pages styles */
@page {
	size: A4;
	margin: 20mm 20mm 20mm 35mm;
	background-color: white;
	@bottom-center {
		content: counter(page);
	}
}

section#cover {
    page: cover;
}

@page cover {
    break-after: always;
	@bottom-center {
		content: none;
	}
}

/* --------------------- */

body {
	margin: 0;
	padding: 0;
	color: black;
	font-family: var(--text-font);
	font-size: var(--font-size);
	line-height: 1.2;
}

/* --- Cover styling ---*/
#cover h1 {
    font-size: calc(var(--font-size) * 7.8);
    line-height: .85;
    margin-top: calc((297mm - 40mm) / 3);
}

#cover #cover-title2 {
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 0.75px black;
}

#cover p {
    position: absolute;
    bottom: 0;
    width: var(--page-width);
    text-align: center;
    font-style: italic;
}


/* --- General styling --- */
#content {
    break-before: always;
}

.radio {
    break-after: always;
}

h1 {
	font-size: calc(var(--font-size) * 2.5);
	margin-top: 0;
	margin-bottom: 10mm;
}

h2 {
    /*color: orange;*/
    border: solid 1px black;
border-radius: 50%;
  width: fit-content;
  padding: 1mm 3mm;
  transform: rotate(-5deg);
}

h3 {
    text-indent: 5mm;
    font-size: calc(var(--font-size) * 1.2)
}

li::marker {
    content: "→ ";
}

a#wiki-link {
    display: none;
}

.audio p+p:has(audio) {
    margin-top: 0;
}

/* targetting specific WIKI elements */
span.mw-editsection {
    display: none;
}

div.thumb {
    margin-bottom: 8mm;
}

div.thumb.tright img.thumbimage {
    width: var(--page-width);
  height: auto;
}

div.thumbcaption {
    text-align: right;
    width: var(--page-width);
}

ul.gallery {
    display: flex;
    justify-content: left;
    column-gap: 15.98mm;
    flex-wrap: wrap;
    padding: 0;
}

ul.gallery li, ul.gallery li>* {
    list-type: none;
    width: fit-content;
}

ul.gallery li::marker {
    content: none;
}

ul.gallery li img {
    width: calc(var(--page-width) / 4);
    height: auto;
}