@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,700;1,300&display=swap');

@font-face {
	font-family: 'norwesterregular';
	src: url('/wp-content/themes/acr/fonts/norwester-webfont.woff2') format('woff2'),
		 url('/wp-content/themes/acr/fonts/norwester-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

h1, h2, h3, h5, h6, p, .editor-post-title, button, figure, blockquote, ul, ol, label, .wp-block-file {
	font-family: 'Poppins', sans-serif;
}

h4, h3.comment-reply-title {
	font-family: 'norwesterregular', sans-serif;
	font-size: 1.3rem;
	text-transform: lowercase;
	font-weight: 100;
}

h1.headline-front, h1.headline-front-smaller {
	font-family: 'norwesterregular', sans-serif;
	text-transform: lowercase;
	letter-spacing: -0.02em;
	font-weight: 100;
}

html {
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

.gridded {
	background-color: #000919;
	gap: 1px;
}
.gridded > div {
	background-color: white;
}

.gridded.tint > div {
	background-color: #eee;
}

.transparent {
	background-color: transparent !important;
}

p {
	font-weight: 300;
	font-size: 0.9em;
}

a {
	text-decoration: none;
	color: inherit;
}

h1.headline-front {
	color: white;
	font-size: 2em;
	max-width: 12em;
	line-height: 1.1em;
	/* margin-top: 1rem; */
	margin-right: 1rem;
}

h1.headline-front-smaller {
	color: white;
	font-size: 1.5em;
	max-width: 12em;
	line-height: 1.1em;
	margin-top: 1rem;
	margin-right: 1rem;
}


h1.headline--no-image {
	font-size: 2em;
	line-height: 1.1em;
	margin-top: 1rem;
	margin-right: 1rem;
	max-width: 80vw;
}

@media (min-width: 900px) {
	h1.headline-front {
		font-size: 3.5em;
	}
	h1.headline-front-smaller {
		font-size: 2em;
	}
	h1.headline--no-image {
		font-size: 3em;
		padding-left: 1rem;
	}
}

h1.headline-front span.highlight-black, h1.headline-front-smaller span.highlight-black  {
	padding-left: 2rem;
	margin-left: -1rem;
	padding-right: 0.5rem;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

h1.headline-front-smaller span.highlight-black {
	padding-left: 0.5rem;
	margin-left: 1.5rem;
}

span.highlight-black {
	background-color: #000919;
}

/* this extra nested span is to fix cut-off descenders */
span.highlight-black > span {
	position: relative;
}

p.standfirst-front {
	padding: 1.5rem;
	background-color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 900px) {
	p.standfirst-front {
		max-width: 20em;
	}
}

span.author {
	background-color: #006400;
	text-transform: uppercase;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

h4.category {
	color: white;
	background-color: #006400;
	display: inline-block;
	margin-top: 2rem;
	padding: 0.25rem 0.5rem 0.25rem 1.25rem;
}

.side-article, .grid-article {
	padding: 1.5rem;
	overflow-y: hidden;
}

.book-cover img {
	transform: rotate(2deg);
	transition: transform 1s;
	box-shadow: #000919 5px 5px; 
	width: 150px;
}

.book-cover img:hover {
	transform: scale(1.05) rotate(0deg);
}

.book-cover {
	/* fix gap line */
	margin-right: -1px;
}

.feature-main h1, .feature-main h4.category {
	transform: rotate(-2deg) skewX(-2deg);
}

.feature-main h1 span.highlight-black {
	transition: background-color 500ms;
}
.feature-main:hover h1 span.highlight-black {
	background-color: #c00e0e;
}

.home .feature-main, .archive .feature-main, .more-articles .feature-main {
	transition: transform 500ms;
}
.home .feature-main:hover, .archive .feature-main:hover, .more-articles .feature-main:hover{
	/* transform: translate(-5px, -5px); */
}

.grid-article--no-image, .side-article {
	transition: transform 500ms;
}
.grid-article--no-image:hover, .side-article:hover {
	transform: translate(-5px, -5px);
	border-top: 1px solid #000919;
	border-left: 1px solid #000919;
	z-index: 9;
}

.more-articles .feature-main, .headline-on-right {
	position: relative;
}
.more-articles .feature-main:nth-child(even) h1, .headline-on-right h1 {
	transform: rotate(-2deg) skewX(-2deg);
	position: absolute;
	right: 0;
	bottom: 1rem;
	text-align: right;
}

@media (max-width: 900px) {
	.headline-on-right h1 {
		bottom: initial;
		top: 1rem;
	}
	.about-us, .email-signup {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}



h3.headline-side {
	line-height: 1.2em;
	font-weight: 500;
	color: #c00e0e;
	margin-bottom: 0.25rem;
}

.oc-menu {
	position: fixed; 
	height: 100vh; 
	background-color: #000919; 
	color: white;
	width: 400px; 
	transform: translateX(500px);
	max-width: 100%;
	right: 0; 
	transition: transform 500ms;
	z-index: 99;
	border-left: 1px solid grey;
	padding: 1rem;
}

.oc-menu-visible {
	transform: translateX(0px);
}

.align-right {
	text-align: right;
}

button.ui-btn {
	border: 0px;
	background-color: transparent;
	color: white;
	font-size: 40px;
	margin-top: -15px;
	cursor: pointer;
	transition: font-size 1s;
	font-weight: 100;
}

@media (max-width: 900px) {
	button.ui-btn {
		margin-top: -12px;
	}
}

/* .top-bar.after-scroll .ui-btn {
	font-size: 36px;
	transition: font-size 1s;
} */

.footer svg {
	margin-right: 1rem;
}

ul.menu  {
	list-style-type: none;
	line-height: 2;
	padding-right: 2rem;
}

.footer ul.menu {
	padding-left: 0px;
	margin-left: 0px;
}

.top-bar {
	background-color: #000919; 
	position: fixed; 
	width: 100%; 
	z-index: 10;
	margin-top: -1px;
}

.top-bar.before-scroll, .top-bar.return-scroll {
	height: 3.5em; 
	padding: 1rem;
	transition: height 1s;
}

.top-bar.after-scroll {
	height: 3em; 
	padding: 1rem;
	padding-top: 0.5rem;
	transition: height 1s;
}

.top-bar.after-scroll img {
	animation: fadein ease 2s;
}

.top-bar.return-scroll img {
	animation: fadein ease 1s;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.top-bar.before-scroll > .show-before-scroll, .top-bar.return-scroll > .show-before-scroll {
	display: block;
}
.top-bar.before-scroll > .show-after-scroll, .top-bar.return-scroll > .show-after-scroll {
	display: none;
}

.top-bar.after-scroll > .show-before-scroll {
	display: none;
}
.top-bar.after-scroll > .show-after-scroll {
	display: block;
}

@media (max-width: 900px) {

	/* turn off scroll transition for mobile */

	.top-bar > .show-before-scroll {
		display: none !important;
	}
	.top-bar > .show-after-scroll {
		display: block !important;
	}

	.top-bar.before-scroll, .top-bar.return-scroll {
		padding-top: 0.5rem;
	}

	.top-bar.return-scroll img, .top-bar.after-scroll img {
		animation: none;
	}

	.top-bar.before-scroll, .top-bar.return-scroll {
		height: 3em;
	}
}

div.bg-red {
	background-color: #c00e0e;
}

div.bg-black {
	background-color: #000919;
}

div.bg-green {
	background-color: #006400;
}

div.category-divider {
	background-color: #006400;
	color: white;
	padding-left: 2rem;
}


.text-white {
	color: white;
}

input[type=text], input[type=email], textarea {
	padding: 0.5rem 1rem;
	font-size: 1em;
	font-weight: 300;
	border: 1px solid #c00e0e;
	width: 100%;
}

button.btn, input.btn {
	text-transform: uppercase;
	border: 0px;
	border-radius: 0px;
	background-color: white;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	box-shadow: 3px 3px #000919;
	cursor: pointer;
	width: 100%;
	transition: transform 500ms, box-shadow 500ms;
}

.bg-black button.btn, input.btn {
	background-color: #c00e0e;
	color: white;
}

.bg-black button.btn {
	box-shadow: 3px 3px white;
}

button.btn:hover, input.btn:hover {
	box-shadow: 3px 3px transparent;
	transform: translate(3px, 3px);
	transition: transform 500ms, box-shadow 500ms;
}

div[data-link] {
	cursor: pointer;
}

div.feature-main {
	background-color: #000919; 
	background-size: cover; 
	background-position: center;
}

blockquote, .wp-block-quote {
	font-size: 1em;
	margin-bottom: 1em;
	font-style: italic;
	padding-left: 1em;
	border-left: 2px solid #c00e0e;
}

blockquote p {
	margin-bottom: 0px !important;
}

blockquote cite, blockquote .wp-block-quote__citation {
	font-size: 0.7em;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
}


.article-title .headline-front, .article-title .headline--no-image {
	margin-top: 3rem;
	margin-left: 1.5rem;
	z-index: 2;
	position: relative;
}

.article-text p {
	margin-bottom: 1em;
}

.article-text a {
	color: #c00e0e;
}

.article-standfirst a, .article-standfirst--no-image a {
	display: inline-block;
	background-color: #006400;
	color: white; 
	font-family: 'norwesterregular', sans-serif;
	text-transform: lowercase;
	font-weight: 100;
	padding-left: 0.25em;
	padding-right: 0.25em;
	margin-top: 0.1em;	/* fix two authors above/below running together */
}

.article-text--content a {
	border-bottom: 0px solid #c00e0e;		
	transition: border 100ms;
	word-break: break-word;  /* fix inline links causing horizontal overflow */
}
.article-text--content a:hover {
	border-bottom: 2px solid #c00e0e;		
	transition: border 100ms;
}

.article-text {
	padding: 1.5rem;
	font-size: 1.2em; 
	line-height: 1.5em;
	padding-top: 3rem;
}

.article-standfirst, .article-standfirst--no-image {
	padding: 1.5rem;
	font-size: 1.2em;
	line-height: 1.2em;
}

.article-date, .article-date--no-image {
	background-color: #c00e0e;
	color: white;
	margin-left: 1.5rem;
	z-index: -10;
	padding: 0.25rem 0.5rem;
}

.article-date--no-image {
	border-bottom: 1px solid red;
	background-color: white;
	color: red;
	width: max-content;
}

.grid-article-authors {
	text-transform: uppercase;
	font-size: 0.8em;
}

.article-page {
	background-color: white;
}


@media (min-width: 900px) {
	.article-title {
		width: max-content; 	/* this is what causes the overlap onto the image */
	}
	.article-text {
		padding-left: 5rem;
		padding-right: 5rem;
		max-width: 50em;
	}
	.article-standfirst {
		max-width: 25vw;
		padding-left: 5rem;
	}
	.article-standfirst--no-image {
		padding-left: 2.5rem;
		max-width: 50rem;
	}
	.article-date {
		margin-left: 5rem;
	}
	.article-date--no-image {
		margin-left: 2.5rem;
	}
	.article-text .wp-block-image img {
		max-width: 120%;
	}
}

@media (max-width: 900px) {
	.article-image {
		position: absolute;
		top: 3rem;
		left: 0;
		height: 100vw;		/* ie. square */
		width: 100%;
		z-index: 0;
	}
	.article-title .headline-front {
		margin-top: 90vw;	/* slightly overlap the square */
	}
}

.highlight-black.side-gap {
	padding-left: 0.5rem !important;
	margin-left: 0px !important;
}

@media (min-width: 900px) {
	.single h1.headline-front, .page h1.headline-front {
		font-size: 4em;
		transform: rotate(-1deg) skewX(-1deg);
		max-width: 50rem;
	}
}

.wp-block-image figcaption {
	font-size: 0.8em;
	margin-top: 0px !important;
}

.article-text > p:first-of-type:first-line {
	font-weight: 500;
}

.footer {
	min-height: 40vh;
}

h2.book-title {
	margin-top: 1rem;
	line-height: 1;
	font-family: 'norwesterregular';
	font-size: 2rem;
	text-transform: lowercase;
	font-weight: 100;
	letter-spacing: -0.02em;
}

ol, ul {
	font-weight: 200;
	font-size: 1.1rem;
	margin-bottom: 2rem;
	margin-left: 2rem;
}

hr {
	border: none;
	border-top: 1px solid lightgray;
	margin-bottom: 1rem;
}

.menu hr {
	border: none;
	border-top: 1px solid white;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.comment-form input, .comment-reply-title {
	margin-bottom: 1rem; 
}


#cancel-comment-reply-link {
	font-size: 0.8em;
	font-weight: 200;
	margin-left: 1em;
}

.post-comments {
	margin-left: 0rem;
}

.post-comments .says {
	display: none;
}

.post-comments cite {
	font-style: normal;
	font-weight: 400;
}

.post-comments li {
	list-style-type: none;
	margin-top: 1rem;
}

.post-comments .children {
	border-left: 1px solid lightgray;
	padding-left: 1rem;
}

.post-comments .comment-meta, .post-comments .comment-reply-link {
	font-size: 0.8rem;
	text-transform: uppercase;
}

.author-bio {
	font-size: 1rem;
	line-height: 1.4rem;
	font-style: italic;
}

hr.author-bio-separator {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

.share-buttons {
	margin-top: 2rem;
}

.footer-menu hr {
	display: none;
}

.footer-menu ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.footer-menu ul {
		grid-template-columns: 1fr;
	}
}

.footer-menu li { 
	display: inline;
	margin-right: 0.5rem;
	padding-right: 0.5rem;
}

.archive-one-column {
	min-height: 50vh; 
	max-width: 50rem; 
	margin: auto; 
	margin-top: 2rem; 
	margin-bottom: 2rem; 
	gap: 2rem; 
	background-color: transparent;
}

.topbar-spacer {
	height: 3rem; 
	background-color: #000919;
}

@media (min-width: 900px) {
	.topbar-spacer {
		background-color: #000919;
		height: 4.5rem; 
	}
}

/* simple print stylesheet */
@media print {

	.gridded, .inner-grid, .align-top-bottom {
		display: block;	/* ie turn off grid */
	}

	.top-bar, .topbar-spacer, .article-image, .share-buttons, .comment-respond, .more-from-acr, .more-articles, .footer, .oc-menu {
		display: none;
	}

	.headline-front {
		/* .headline-front has weird desktop and mobile styles, need to override them all */
		margin-top: 100px !important;
		margin-left: 1rem !important;
		margin-right: 1rem !important;
		color: black !important;
		max-width: 100% !important;
	}

}

@media (min-width: 900px) {
	.before-scroll .ui-btn, .return-scroll .ui-btn {
		margin-top: -10px;
	}
}

.event-text {
	font-size: 0.9rem;
	line-height: 1.4rem;
}

.event-title {
	line-height: 1.4rem;
}

.event-full-text p {
	margin-bottom: 1rem;
}

button.join-button {
	padding: 0.25rem 1rem;	
	background-color: #c00e0e;
	color: white;

}

.after-scroll button.join-button {
	margin-top: -0.2rem;
}

.after-scroll button.menu-button {
	margin-top: -0.75rem;
}

/* desktop only utility class */
.desktop-only {
	display: none;
}
@media (min-width: 900px) {
	.desktop-only {
		display: block;
	}
}

/* pop up event box */

#event-box-conference {
	display: none; 
	position: fixed; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 1000; 
	padding-top: 10rem; 
	background-color: rgba(0,0,0,0.8);
}

.event-box-inner {
	width: 100%; 
	padding: 10px; 
	padding-top: 0rem;
}

.event-box-close-button {
	color: white; 
	font-size: 3rem; 
	display: block; 
	margin: auto; 
	text-align: right; 
	max-width: 1000px;
}

.event-box-inner img {
	display: block; 
	width: 1000px; 
	margin: auto; 
	max-width: 100%;
}

ul.sub-menu {
	list-style-type: none;
	margin-left: 1rem;
}

ul.sub-menu li {
	margin-bottom: 0px;
}