/*
Theme Name: PM2022
*/


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap');

body {
	font-family: 'Open Sans', sans-serif;
	letter-spacing: -0.02em;
	scroll-behavior: smooth;
}

h2.slogan {
	font-family: 'PT Serif', serif;
	font-style: italic;
	color: #C80815;
	margin-bottom: 2rem;
	font-size: 2.5rem;
	line-height: 2.75rem;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
	margin: 5px 20px 20px 0;
		display: block;		/* added */
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* == Theme begins */

body {
	background-color: #fff;
	color: black;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: #C80815;
}

a:hover {
	text-decoration: none;
	color: black;
}

h2 {
	font-weight: 700;
}

p {
	font-weight: 300;
	
}

/* == Navbar */

.navbar-toggler {
	border: none;
	padding-right: 0px;
}

.navbar-expand {
	gap: 20px;
	padding-right: 10px;
}

.dropdown-menu, .dropdown-item, .dropdown-item:hover {
	background-color: transparent;
	border: none;
	padding-right: 0px;
}

#navbarMain {
	font-size: 1.1rem;
}

@media (min-width: 768px) {

	/* fix flex items reflowing when dropdown is trigge#C80815 */
	#navbarMain .menu-item {
		min-width: 120px;	
		padding-right: 2rem;
	}
	#navbarMain ul.dropdown-menu {
		max-width: 120px;
		min-width: 0px;
		position: absolute;
	}



	#navbarMain .dropdown-item {
		padding-left: 1rem;
	}

}

#navbarMain ul.dropdown-menu {
	background-color: rgba(255,255,255,0.9);
	transition: max-height 0.5s, padding 0.5s;
	display: block;
	max-height: 1px;
	overflow-y: hidden;
	margin: 0px !important; padding: 0px !important;
}

#navbarMain ul.dropdown-menu.show {
	max-height: 500px;	/* because transition to height: auto does not work */
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.navbar-brand {
	font-weight: 200;
	flex-grow: 1;   /* ie. expand to move everything else to right */
	font-size: 2.5rem;
}

a.navbar-brand:hover {
	color: dark#C80815;
}

/* fontawesome icons */
.fab {
	color: black;
}


/* == Front page */

.container {
	width: 90%;
}

.book-title {
	font-family: 'monotype-grotesque-condensed', sans-serif;
	text-align: center;
	line-height: 2.7rem;
	letter-spacing: -0.2rem;
	padding-top: 12px;
	position: relative;
}


#border1,#border2,#border3,#border4{position:absolute;background:#C80815;}
#border1 {top:0;left:0;height:1px;max-width:100%;}
#border2 {top:0px;right:0;height:0px;max-height:100%;width:1px;}
#border3 {bottom:0;right:0;height:1px;max-width:100%;}
#border4 {bottom:0px;left:0;height:0px;max-height:100%;width:1px;}



.book-title p {
	font-weight: 400;
	margin-bottom: 0px;
}

.book-title .line1 {
	font-size: 3.6rem;
}

.book-title .line2 {
	font-size: 5.5rem;
}

.book-subtitle {
	font-family: monotype-grotesque-condensed, sans-serif;
	text-align: center;
	font-weight: 100;
	font-size: 1.25rem;
}


@media (min-width: 1200px) {

	.book-title .line1 {
		font-size: 5.5rem;
	}
	
	.book-title .line2 {
		font-size: 8.3rem;
	}

	.book-title {
		line-height: 4rem;
		letter-spacing: -0.3em;	
		padding-top: 20px;
	}

	.book-subtitle {
		font-size: 1.9rem;
	}
	
}



/* @media (max-width: 768px) { */
	.book-subtitle > div {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
/* } */

@media (min-width: 768px) {
	/* .book-subtitle {
		font-size: 2rem;
		line-height: 2rem;
	} */
}

.book-blurb p.blurb {
	font-weight: 500; 
	font-style: italic; 
	line-height: 1.2em;
	text-align: center;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

span.red {
	color: #C80815;
}

.circle, .circle-row {
	height: 10px;
	width: 10px;
	border-radius: 100%;
	margin-top: 1rem;
}

.circle {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.circle-row {
	display: inline-block;
	visibility: hidden;  /* not display none as that causes flexbox reflow */
}

@media (min-width: 768px) {
	.circle-row.visible-md {
		visibility: visible;
	}
	/* make all circles bigger too */
	.circle, .circle-row {
		height: 20px;
		width: 20px;
		margin-top: 1.5rem;
	}
}

button.button {
	font-family: 'Sintony', sans-serif;
	background-color: transparent;
	color: #C80815;
	border: 1px solid #C80815;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	padding: 0.5rem 1rem;
	font-weight: 800;
	border-radius: 5px;
	max-width: 240px;
	/* display: block; */
	margin: auto;
}

button.button-small {
	font-size: 0.8rem;
	padding: 0.1rem 1rem;
}

.date {
	font-family: 'Sintony', sans-serif;
	font-size: 0.9rem;
	padding-top: 0.1rem;
	line-height: 1.4em;
}

.section-divider {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 1.25rem;
	border-bottom: 2px solid #C80815;
	margin-top: 4rem;
	padding-bottom: 5px;
	letter-spacing: -0.02rem;
}

@media (max-width: 400px) {
	.section-divider {
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* align with headings */
.col {
	padding-left: 0px;
	padding-right: 0px;
}

.row-divider {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 0.5px solid #C80815;
}

.row-divider:last-child {
	border-bottom: none;
}

@media (min-width: 400px) {
	.row-divider {
		margin-left: 0px;
		margin-right: 0px;
	}
}

.col.place {
	flex-grow: 2;
	padding-left: 15px;
}

.col.quote {
	padding-left: 15px;
}

.col.quote p {
	font-weight: 500; 
	font-style: italic; 
	line-height: 1.2em;
}

.col.news-title {
	flex-grow: 2;
}

.col.news-title a {
	color: black;
}

.news-title p {
	line-height: 1.2em;
	padding-left: 15px;
	padding-top: 2px;
	margin-bottom: 5px;
}

.news-publication {
	color: #C80815;
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 600;
}

/* == Footer */
footer {
	background: #C80815;
	/* background: radial-gradient(circle, rgba(255,0,120,1) 50%, rgba(218,41,28,1) 100%);  */
	z-index: 99;
}

@media (min-width: 768px) {
	footer {
		margin-top: 10rem;
	}
}

footer a {
	color: white;
}

.navbar-center {
	justify-content: center;
}

.headline-over-image {
	margin-top: -3.5rem;
	text-align: center;
	text-transform: uppercase;
	color: white;
	font-weight: 600;
	font-size: 1.25rem;
}

/* HSTF page */


.link-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 3rem;
}

@media (max-width: 700px) {
	.link-boxes {
		grid-template-columns: 1fr;		/* ie collapse to single col */
	}
}

.link-boxes > div::after {
	content: "";
	padding-bottom: 85%;
	display: block;
}

.image-link-box {
	border: 1px solid white;
	padding: 1rem;
	cursor: pointer;
	background-size: cover;			
	box-shadow: 20px 20px 0px -3px #2d2f2f, 20px 20px 0px -2px white;

}

.image-link-box h2 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.25rem;
	display: inline;
}

.highlight-#C80815 {
	background-color: #C80815;
	padding: 0.1rem 0.2rem;
	box-decoration-break: clone;
}

@media (max-width: 450px) {
	.book-cover {
		width: 100%;
	}
}
@media (min-width: 992px) {
	.book-cover {
		margin-right: -5rem;
	}
}






/* == 2022 */

strong {
	font-weight: 800;
}

.top-nav-border-bottom {
	/* border-bottom: 5px solid #C80815; */
	border-bottom: 5px solid darkgreen;
}

.navbar-nav a {
	color: black;
}

nav #menu-social-media a {
	color: #C80815;
}

footer .menu-social-media-container a {
	color: white;
}

.cutout-fixed {
	position: fixed;
	bottom: 0;
}

.content {
	font-size: 1.2rem;
}

.issues-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}


@media (max-width: 1200px) {
	.issues-boxes {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 500px) {
	.issues-boxes {
		grid-template-columns: 1fr;
	}
}



.issue-box {
	border: 5px solid #C80815; 
	padding: 1rem; 
	text-align: center;
	font-size: 1rem;
	line-height: 1rem;
}

.issue-box h3 {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.5rem;
	min-height: 3rem;
}

.issue-box .learn-more {
	margin-top: 1rem;
	font-size: 0.9rem;
	margin-bottom: 0px;
}

.events .col.place {
	font-size: 1rem;
}

nav {
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 99;
}

.pm-cutout {
	max-height: 80vh;
	object-fit: contain;
}

@media (min-width: 900px) {
	.front-page-slogans {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		margin-top: 1rem;
	}
}

.front-page-slogans li::marker {
	color: #C80815;
	content: '❯  ';
	font-size: 1.5rem;
}

svg.fa-bars {
	color: green;
}