@charset "UTF-8"; 
/*
Theme Name: Forever Applaud
Theme URI: https://www.tommb.com/
Author: Tom Blessley
Author URI: https://www.tommb.com/
Description: Let's make stuff happen!
*/
div:empty {
   display: none;
}
body, #button{
	font-family: proxima-nova, helvetica, arial, sans-serif;
	font-size: 18px;
	line-height: 21px;
	width: 942px;
	margin:	0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, ul, ol, li, dl, p, hr {
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    -webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0;
}
h1, h2, h3, h4, ul, ol, dl, p, hr{
	display: block;
}
blockquote{
	margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.logo{
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 24px;
	width: 52%;
	object-fit: contain;
}
#apart{
	opacity: 0;
}
#apart:hover{
	-webkit-animation-name: clap;
	-moz-animation-name: clap;
	-ms-animation-name: clap;
	-o-animation-name: clap;
	animation-name: clap;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@keyframes clap{
	0%		{ opacity: 0; }
	20%		{ opacity: 1; }
	40%		{ opacity: 0; }
}
h1{
	font-size: 36px;
	line-height: 42px;
	margin: 0;
	padding-bottom: 33px;
	text-align: center;
}
h2{
	font-size: 18px;
	line-height: 21px;
}
h3.subtitle{
	color: #23A1DA;
	padding-top: 36px;
}
p, h2, h3.subtitle{
	padding-bottom: 6px;
}
h3, nav{
	text-transform: uppercase;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 2px;
}
h1, h2, h3, label, nav, .about-me h3, .contribution h3{
	font-weight: 700;
}
h3{
	text-align: center;
}
.about-me h3,
.contribution h3{
	text-align: left;
}
.recent h3{
	padding: 30px; 
}
h1.author-name,
.author-location,
.interview dd,
.author-links li,
p.thank-you,
.introduction,
.about-project p,
.about-me li,
.about-me p,
.contribution li,
.contribution p{
	font-size: 24px;
}
.pull-quote,
blockquote{
	color: #FFFFFF;
	text-align: center;
	font-size: 36px;
	line-height: 42px;
	font-weight: 600;
	padding: 60px 30px;
}
footer li a:link,
footer li a:hover,
footer li a:active,
footer li a:visited,
.thank-you{
	color: #999999;
}
.thank-you{
	font-style: italic;
	font-weight: 100;
}
a:link,
a:active,
a:visited,
nav a{
	color: #000000;
}
a:hover{
	color: #002FA7;
	text-decoration: none;
}
header li{
	display: inline;
}
header ul a:link,
header ul a:active,
header ul a:hover,
header ul a:visited,
nav a{
	text-decoration: none !important;
}
nav{
	clear: both;
}
nav li{
	padding: 0 12px;
}
footer h3,
footer li a{
	color: #CCCCCC;
}
footer h3{
	padding-bottom: 9px;
}
footer li a,
label{
	font-size: 15px;
	line-height: 21px;
}
footer li a:link,
footer li a:hover,
footer li a:active,
footer li a:visited{
	text-decoration: none;
	padding: 0 12px;
}
footer li + li:before {
    content: "\2022" ;
    color: #EEEEEE;
}
.homepage-hero{
	width: 100%;
	text-align: center;
	margin: 4px 0;
	background-size: 100%;
	background-color: #002FA7;
	background-repeat: no-repeat;
	background-position: center;
}
.homepage-hero,
.homepage-hero a{
	color: #FFFFFF;
}
.hero-content{
	vertical-align: middle;
	padding: 150px 90px;
}
.contributions{
	clear: both;
}
.contribution-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
	grid-gap: 5px;
}
.contribution-box{
	display: grid;
}
.contributions ul{
	padding-top: 5px;
	margin-top: 12px;
}
.contributions.recent{
	border-top: 1px solid #999999;
}
.recent ul.contribution-container{
	border-top: none;
}
.contributions li{
	border: 1px solid #EEEEEE;
	list-style-type: none;
}
.contributions img{
	width: 100%;
}
nav,
.contributions ul{
	border-top: 1px solid #CCCCCC;
}
.author-handle{
	text-align: center;
	color: #CCCCCC;
	padding-bottom: 24px;
	font-weight: 600;
}
a li .author-handle:link{
	text-decoration: none;
}
header{
	padding-top: 24px;
	border-bottom: 1px solid #CCCCCC;
}
p.prevnext-handle{
	color: #002FA7;
	text-align: center;
	padding-bottom: 24px;
	font-weight: 600;
}
footer{
	padding: 42px 0 60px 0;
}
.get-involved{
	padding: 42px 0;
	margin-top: 5px;
}
header,
footer,
.get-involved{
	text-align: center;
	clear: both;
}
.get-involved a{
	text-decoration: none;
	color: #002FA7;
	font-weight: 700;
}
.get-involved a:hover{
	text-decoration: underline;
}
nav li,
footer li,
.contributions li{
	display: inline-block;
}
nav li,
footer li,
a.contribution-box:link,
a.contribution-box:active,
a.contribution-box:visited{
	text-decoration: none;
}
nav li:hover{
    color: #002FA7;
	background-color: #DEEBF5;
    border-radius: 3px;
}
footer li:hover,
a.contribution-box:hover{
	text-decoration: underline;
	text-decoration-color: #CCCCCC;
}
nav li{
	padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 3px;
    margin-bottom: 3px;
}
.get-involved,
footer{
	border-top: 1px solid #666666;
}
.header{
	display: inline;
}
.circle-link{
	width: 60px;
	height: 60px;
	margin-top: 24px;
	border-radius: 30px;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s; 
}
.circle-link.instagram{
	background-image: url("images/icon-instagram.svg");
	background-color: #002FA7;
	background-size: 24px 24px;
	float: left;
}
.circle-link.email{
	background-image: url("images/icon-email.svg");
	background-color: #BFCAEA;
	background-size: 33px 26px;
	float: right;
    display: inline-block;
}
a.header-link .instagram:hover{
	background-color: #FA551F;
}
a.header-link .email:hover{
	background-color: #00B7D4;
}
.applauding-emoji{
	padding-top: 12px;
}
.author-contribution{
	width: 82.9787234043%;
	display: block;
	margin: 0 auto;
	padding: 5px 0;
}
.author-contribution img{
	width: 57.8723404255%;
	height: inherit;
	display: block;
	text-align: center;
	margin:	0 auto;
}
.avatar{
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid #999999;
	margin: 0 auto;
}
.avatar img{
	width: 100%;
	object-fit: cover;
	background-color: #FFFFFF;
}
.attribution hr{
	border: none;
	border-top: 1px solid #CCCCCC;
	margin-top: -30px;
	margin-bottom: 30px; 
}
h1.author-name{
	line-height: 30px;
	padding: 24px 0 0;
}
.author-location{
	color: #999999;
	text-align: center;	
	line-height: 30px;
	font-style: italic;
	padding-bottom: 27px;
}
hr.interview-divider{
	border: none;
	border-top: 1px solid #CCCCCC;
	display: block;
	clear: both;
	padding-top: 21px;
}
.author-links{
	display: block;
	clear: both;
	margin-bottom: 5px;
}
.author-links li {
	border-bottom: 1px solid #CCCCCC;
    margin-bottom: 21px;
}
.interview dt,
.interview dd,
.author-links p,
.author-links li{
	display: inline-block;
	padding-bottom: 21px;
}
.interview dt,
.author-links p,
.author-links .question,
.about-me h2,
.contribution h2{
	width: 25%;
	float: left;
	font-weight: 700;
	padding-top: 8px;
}
.interview dd,
.author-links li,
p.thank-you,
.about-me h4,
.about-me h3,
.about-me li,
.about-me p,
.contribution h4,
.contribution h3,
.contribution li,
.contribution p{
	width: 70%;
	float: right;
	line-height: 33px;
	padding-bottom: 15px;
	font-weight: 100;
}
.about-me ul,
.contribution ul{
	display: block;
}
.intermission, 
blockquote{
	width: 100%;
	background-color: #002FA7;
	display: block;
	clear: both;
	background-repeat: no-repeat;
	background-position: center;
	margin: 6px 0;
}
.intermission{
	margin-top: -21px;
	margin-bottom: 24px;
}
.website-link:before,
.email-link:before,
.instagram-link:before{
	display: block;
	width: 24px;
	height: 25px;
	float: left;
	margin: 6px 18px 0 0;
	content: "";
}
.website-link:before {
	background: url(images/website-link.svg) no-repeat;
}
.email-link:before {
	background: url(images/email-link.svg) no-repeat;
}
.instagram-link:before {
    background: url(images/instagram-link.svg) no-repeat;
}
.introduction{
	color: #002FA7;
	letter-spacing: 0;
	text-align: center;
	line-height: 36px;
	padding-bottom: 30px;
}
.about-project{
	padding: 21px 21px 30px;
}
.about-project p{
	line-height: 33px;
	padding-bottom: 12px;
}
form{
	width: 450px;
	display: block;
	margin: 0 auto;
	padding: 60px 0 72px; 
}
input,
textarea,
#button{
	width: 100%;
	-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.35);
	-moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.35);
	-ms-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.35);
	-o-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.35);
	box-shadow: 0 1px 6px 0 rgba(0,0,0,0.35);
}
input,
textarea{
	background: #FFFFFF;
	border: 1px solid #999999;
	border-radius: 3px;
	font-size: 18px;
	line-height: 24px;
	padding: 12px 15px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#button{
	background: #002FA7;
	border-radius: 3px;
	color: #FFFFFF;
	font-weight: 700;
	padding: 15px;
}
div.wpcf7-validation-errors,
div.wpcf7-response-output{
	text-align: center;
	margin:	0;
	border-radius: 3px;
	border: none;
	margin-bottom: 21px;
	padding: 18px 18px 21px;
}
div.wpcf7-response-output{
	color: #002FA7 !important; 
	background-color: #BFCAEA !important;
}
div.wpcf7-validation-errors{
	color: #D0021B !important;
	background-color: #FFEAED !important;
}
span.wpcf7-not-valid-tip{
	margin-bottom: 12px;
	margin-top: -9px;
}
.contact-form{
	width: 100%;
	border-top: 1px solid #999999;
}
.mobile-nav,
input.mobile-nav[type=checkbox],
hr.mobile-only{
	display: none;
}
.recent ul.contribution-container{
	margin-top: 0;
	padding-top: 0;
}
.about-me,
.contribution  {
	padding-top: 21px;
	border-top: 1px solid #ccc;
}
.about-me h3,
.about-me h4,
.contribution h3,
.contribution h4{
	color: #002FA7;
	font-weight: 600;
}
.about-me li,
.contribution li{
	display: list-item;
	padding-bottom: 9px;
    margin-right: -30px;
    padding-left: 9px;
}
.wp-block-separator {
    border: none;
    border-bottom: 1px solid #CCCCCC;
    clear: both;
    display: block;
    padding-top: 30px;
    margin-bottom: 30px;
}
.wp-block-preformatted{
	width: 100%;
	display: block;
	clear: both;
}
blockquote{
	padding: 60px 0;
}
.wp-block-quote{
	width: 100%;
	display: block;
	clear: both;
	border-left: none;
	padding-left: 0;
}
.wp-block-quote cite{

}
.irrational-spacer{
	padding-bottom: 30px;
	display: block;
	clear: both;
}
input[type=text],
input[type=email], 
textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}
 
input[type=text]:focus, 
input[type=email]:focus, 
textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
}


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

@media only screen and (max-width: 960px) {
	body{
		width: 92%;
	}
}
@media only screen and (max-width: 870px){
	.interview dd, 
	.author-links li, 
	p.thank-you,
	.about-me h2,
	.contribution h2 {
    	width: 66%;
	}
}
@media only screen and (max-width: 760px) {
	.circle-link{
		margin-top: 18px;
	}
}
@media only screen and (max-width: 660px) {
	.circle-link{
		margin-top: 21px;
	}
	.logo{
		padding-bottom: 6px;
	}
}
@media only screen and (max-width: 560px) {
	h1{
		font-size: 30px;
		line-height: 36px;
		padding-bottom: 12px;
	}
	h1.author-name,
	.author-location,
	.about-project p,
	.interview dt,
	.question,
	.author-links p.thank-you {
		font-size: 15px;
		line-height: 21px;
	}
	h1.author-name{
		padding: 15px 0 0;
	}
	.author-location{
		padding-bottom: 12px;
	}
	.circle-link{
		width: 24px;
		height: 24px;
		margin-top: 33px;
		border-radius: 0;
		background-repeat: no-repeat;
		background-position: center;
	}
	.circle-link.instagram{
		background-image: url("images/instagram-link.svg");
		background-color: #FFFFFF;
		background-size: 24px 24px;
		float: left;
	}
	.circle-link.email{
		display: none;
	}
	.mobile-nav{
		width: 18px;
		height: 42px;
		display: block;
		float: right;
		border: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
		padding-top: 36px;
	}
	.close-menu{
		background-image: url("images/close-menu.svg");
		background-repeat: no-repeat;
  		background-position: right;
		margin-top: 9px;
		margin-right: 10px;
	}
	.main-menu {
		position: absolute;
		display: none;
		left: -200px;
		top: 0;
		height: 88%;
		width: 88%;
		margin: 6%;
		overflow-y: scroll;
		overflow-x: visible;
		-webkit-transition: left 0.5s ease,
			box-shadow 0.3s ease;
		-moz-transition: left 0.5s ease,
			box-shadow 0.3s ease;
		-ms-transition: left 0.5s ease,
			box-shadow 0.3s ease;
		-o-transition: left 0.5s ease,
			box-shadow 0.3s ease;
		transition: left 0.5s ease,
			box-shadow 0.3s ease;
		z-index: 999;
	}
	.main-menu ul {
		list-style: none;
		margin: 0;
		min-height: 100%;
		width: 100%;
	}
	.main-menu a {
		display: block;
		padding: .75em 15px;
		color: #FFFFFF;
		text-decoration: none;
	}
	nav li{
		display: block;
	}
	header{
		padding-top: 0;
		border-bottom: none;
	}
	.logo{
		width: 240px;
		height: 66px;
		padding: 12px 0 3px 0; 
	}
	.hero-content{
		padding: 48px 30px;
	}
	.introduction{
		font-size: 21px;
		line-height: 27px;
	}
	footer li {
		display: block;
		padding-bottom: 9px;
	}
	footer li + li:before {
	    content: none;
	}
	nav{
		border-top: none;
		text-transform: none;
		letter-spacing: 0;
		font-size: 18px;
		text-align: left;
	}
	.main-menu:target,
	.main-menu[aria-expanded="true"] {
		display: block;
		left: 0;
		outline: none;
		-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		-ms-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		-o-box-shadow: 3px 0 12px rgba(0,0,0,.25);
	}
	.main-menu:target .menu-close,
	.main-menu[aria-expanded="true"] .menu-close {
		z-index: 1001;
		display: inline;
		float: right;
	}
	.main-menu:target ul,
	.main-menu[aria-expanded="true"] ul {
		position: relative;
		z-index: 1000;
	}
	.main-menu:target + .backdrop,
	.main-menu[aria-expanded="true"] + .backdrop{
		position: absolute;
		display: block;  
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		background: #000;
		background: rgba(0,0,0,.85);
		cursor: default;
	}
	@supports (position: fixed) {
		.main-menu,
		.main-menu:target + .backdrop,
		.main-menu[aria-expanded="true"] + .backdrop{
			position: fixed;
		}
	}
	.recent h3{
		padding: 18px;
	}
	.contributions.recent ul{
		margin-top: 0;
		padding-top: 0;
	}
	.pull-quote{
		font-size: 24px;
    	line-height: 30px;
    	padding: 48px 30px;
	}
	.contributions li.current-post-ref{
		display: none;
	}
	h3.subtitle{
		border-top: 1px solid #CCCCCC;
		padding-top: 24px;
	}
	.introduction{
		padding-bottom: 24px;
	}
	.about-me h2,
	.about-me li,
	.about-me p,
	.contribution h2,
	.contribution li,
	.contribution p{
		width: 100%;
	}
	.contribution {
		border: none;
	}
	form{
		width: 100%;
		padding: 24px 0;
	}
	.about-project{
		padding: 0 0 21px 0;
	}
	.author-contribution .attribution{
		border-bottom: 1px solid #CCCCCC;
	}
	.interview dt,
	.interview dd,
	.author-links,
	.author-links p,
	.author-links .question,
	.author-links li,
	.question,
	.author-contribution,
	.author-contribution img{
		width: 100%;
	}
	.interview dt,
	.question,
	.author-links p{
		padding-bottom: 0;
		color: #002ea6;
	}
	.interview dd,
	.author-links,
	.author-links li, 
	p.thank-you{
		font-size: 21px;
    	line-height: 27px;
    	padding-bottom: 6px;
	}
	hr.interview-divider{
		display: none;
	}
	.author-links li{
		margin-bottom: 0;
		border-bottom: none;
		padding-top: 6px;
		line-height: 33px;
	}
	.question{
		padding-bottom: 6px;
	}
	dl{
		display: block;
	}
	.author-links p.thank-you{
		color: #999999;
		margin-bottom: 12px;
	}
	.intermission{
		display: inline-block;
		margin: 12px 0;
	}
	.get-involved{
		padding: 24px 0;
	}
	.get-involved p,
	.get-involved a,
	.get-involved h2{
		font-size: 15px;
		line-height: 21px;
	}
	.subnav .contribution-container {
    	grid-template-columns: repeat(auto-fit, minmax(49%, 2fr));
    }
    .author-contribution{
    	border-top: 1px solid #CCCCCC;
    }
    nav li:hover {
		color: #FFFFFF;
		background-color: #000000;
	}
}
/* ---- FIX: overlapping <li> in About/Contribution on phones ---- */
@media (max-width: 560px) {
  /* 1) Stop the two‑column float layout on mobile */
  .about-me h2,
  .about-me h3,
  .about-me h4,
  .about-me p,
  .about-me li,
  .contribution h2,
  .contribution h3,
  .contribution h4,
  .contribution p,
  .contribution li {
    float: none !important;
    width: 100% !important;
    clear: both;
    display: block;
  }

  /* 2) Normalise the list itself so bullets/spacing are predictable */
  .about-me ul,
  .about-me ol,
  .contribution ul,
  .contribution ol {
    list-style: disc outside;
    margin: 0 0 1em 1.25em;
    padding: 0;
  }

  /* 3) Each list item becomes a proper block with comfortable line boxes */
  .about-me li,
  .contribution li {
    display: list-item !important;
    margin: 0.4em 0 0.4em 0;
    padding: 0;                /* undo padding-left: 9px; if you prefer, keep it */
    margin-right: 0 !important;/* undo the negative right margin */
    line-height: 1.55;         /* room for iOS font metrics */
  }

  /* 4) Ensure anything inside the LI inherits that line-height */
  .about-me li *,
  .contribution li * {
    line-height: inherit;
  }
}

/* Optional: if bullets still look crowded, add a clearfix to the list */
.about-me ul::after,
.contribution ul::after { content: ""; display: table; clear: both; }