/*
Theme Name: Collective Futures
Theme URI: https://wordpress.org/themes/collectivefutures/
Author: Greyory Blake
Author URI: https://greyory.com
Description: A fork of Twenty Twenty-Five for Collective Futures.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: collectivefutures
Tags: grid, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

::selection {
	background-color: #d2c0aa;
}

.wp-block-navigation.items-justified-right {
	display: none;
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
/* :where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
} */

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.home-posts-grid .wp-block-post-template {
	display: grid;
	align-content: stretch;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	list-style: none;
	padding: 0;
	margin: 2.5rem 5rem;
}

.home-posts-grid .wp-block-post-template li .card img {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.home-posts-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.home-posts-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* .wp-block-group {
	background-color: white;
	border: 1px solid black;
} */

.home-posts-grid .wp-block-post-template li .card {
	height: 100%;
	display: flex;
	align-content: last baseline;
	min-height: 300px;
	flex-direction: column;
	background: #fff;
	padding: 1rem;
	outline: 1px solid #000000;
	/* overflow: hidden; */
	transition: outline 200ms, transform 150ms;
}

.home-posts-grid .wp-block-post-template li .card:hover {
	transform: scale(1.5);
	position: relative;
	z-index: 100000;
	outline: 5px solid #cf3d3b;
}

.home-posts-grid .wp-block-post-template li .card:hover h2 {
	color: #cf3d3b !important;
}

.home-posts-grid .wp-block-post-template li .card img {
	filter: saturate(0);
}

.home-posts-grid .wp-block-post-template li .card:hover img {
	filter: saturate(1);
}

.home-posts-grid .wp-block-post-template li .card img {
	width: 100%;
	height: auto;
	margin-bottom: 0.5rem;
}

.home-posts-grid .wp-block-post-template li .card .wp-block-post-title {
	margin: 0.5rem 0;
}

.card .wp-block-post-meta {
	font-size: 0.9rem;
	color: #555;
	margin: 0.25rem 0;
}

.card .wp-block-post-meta:nth-of-type(2) {
	font-weight: bold;
	/* subheadline */
	font-size: 1rem;
}

.card .wp-block-post-meta:nth-of-type(3) {
	color: #333;
	/* date range */
}

.card .wp-block-post-meta:nth-of-type(4) {
	font-style: italic;
	/* location */
}

.card:hover .wp-block-post-title,
.card:hover .event-details p:nth-child(1) {
	text-decoration: underline;
}

#cflogolink {
	color: white !important;
	display: block;
	margin: 0 4.4rem;
	width: 260px;
	height: auto;
}

#cflogo svg {
	width: 100%;
	height: auto;
}

#cflogo .cflogoblack:not(.c-node, #C, .f-node, #F) {
	opacity: 0;
	transition: 0s;
	transition-delay: 200ms;
}

.cflogoblack {
	fill: #010101;
}

.c-nodewhite, .f-nodewhite {
	fill: #ffffff !important;
}

#cflogo .cflogowhite:not(.c-node, #C, .f-node, #F) {
	transition-delay: 200ms;
	fill: transparent;
}

.popup {
	position: absolute;
	top: 6rem;
	right: 4rem;
}

a:hover>h6 {
	color: #00b5ac;
}

#about {
	z-index: 10000000;
	display: none;
	outline: 1px solid #000;
}

#about:target {
	display: block;
	position: fixed;
	top: 10vh;
	left: 10vw;
	width: 80vw;
	height: 80vh;
	background-color: #d9e021;
}

h6 {
	margin: 0;
	display: inline-block;
}

#abouttext {
	padding: 40px;
	outline: 1px solid #000;
	background-color: white;
	z-index: 20002;
	position: absolute;
	bottom: -50px;
	right: 50px;
	height: calc(80vh - 80px);
	width: 50vw;
	min-width: 200px;
	overflow-y: scroll;
	scrollbar-width: auto;
	scrollbar-color: #000 #fff;
}

@media (min-width: 641px) {

#cflogo:hover .cflogowhite {
	fill: #ffffff;
}

	#cflogo:hover .cflogoblack {
		opacity: 1 !important;
	}

	#cflogo:hover line {
		stroke: black;
		stroke-width: 1px;
	}
}

@media (max-width: 640px) {
	#abouttext {
		width: 100%;
		right: -20px;
	}
}

/* Chrome, Edge, and Safari */
#abouttext::-webkit-scrollbar {
	width: 16px;
}

#abouttext::-webkit-scrollbar-track {
	background: #fff;
}

#abouttext::-webkit-scrollbar-thumb {
	background-color: #000;
	border-radius: 0px;
	border: 3px double #fff;
}


#aboutbanner {
	z-index: 20001;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#aboutbanner svg {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.close {
	z-index: 20003;
	background-color: #fff;
	outline: solid 1px #000;
	position: absolute;
	right: 40px;
	top: 40px;
	width: 23px;
	height: 23px;
}

.close:before,
.close:after {
	position: absolute;
	top: -5px;
	left: 11px;
	content: ' ';
	height: 33px;
	width: 1px;
	background-color: #000;
}

.close:hover, .close:focus {
	outline: solid 1px #cf3d3b;
}

.close:hover:before, .close:hover:after,
.close:focus:before, .close:focus:after {
	background-color: #cf3d3b;
}

.close:before {
	transform: rotate(45deg);
}

.close:after {
	transform: rotate(-45deg);
}

.wp-block-post {
	position: relative;
	overflow: visible;
}

.wp-block-post .hover-doodle {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 10;
	display: none;
}

.event-filters {
	margin-left: 3.4rem;
}

.event-details p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.1px;
	line-height: 1.125;
	margin: 0;
}

.event-filter-button {
	font-family: var(var(--wp--preset--font-family--ibm-plex-mono));
	font-size: var(--wp--preset--font-size--small);
	flex: 1 1 33.3333%;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	background: none;
	border: none;
	margin: 0;
	cursor: pointer;
	outline: 1px solid black;
}

.event-filter-button:hover, .event-filter-button:focus {
	color: #00b5ac;
	outline: 1px solid #00b5ac;
}

.event-filter-button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}

.hover-doodle {
	opacity: 0.2;
}

/* *:focus {
	outline: 20px black solid;
} */

.wp-block-post-featured-image {
	aspect-ratio: auto !important;
}