/*
 Theme Name:   Children's Cancer Connection
 Theme URL:    https://childrenscancerconnection.org
 Description:  A child theme of the Astra WordPress theme for Children's Cancer Connection
 Author:       Matthew Barnhart
 Template:     astra
 Version:      1.0.0
 Text Domain:  childrens-cancer-connection
*/

/*
 * [fpc_post_block] replacement styling. Rebuilt 2026-09-23 -- see the long
 * comment in functions.php for why this deliberately reproduces the
 * ORIGINAL plugin's own class names (wpfp-*) instead of a new BEM scheme:
 * this site's Customizer "Additional CSS" (database-stored, not a file --
 * check `wp eval "echo wp_get_custom_css();"` before assuming a design
 * comes from theme/plugin CSS on this site) has an existing, deliberate,
 * sitewide skew/angled-border treatment that specifically targets
 * `#feature-banner .wpfp-*` selectors and turns this into the site's real
 * look (equal-width tiles, -10deg skew, thick colored border). That CSS is
 * already correct and out of scope here -- these rules are only the base
 * structural CSS the plugin itself used to provide (sizing, positioning,
 * the gradient caption overlay), ported in because the plugin is gone.
 * Deliberately NOT modernized to this project's usual BEM/logical-property/
 * zero-!important conventions -- these exact class names and cascade
 * position are load-bearing for the Additional CSS above to keep matching.
 */
.wpfpcolumn,
.wpfpcolumns {
	box-sizing: border-box;
	padding-left: 0.9375em;
	padding-right: 0.9375em;
	float: left;
	position: relative;
}

.wpfp-link-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.wpfp-overlay {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.wpfp-overlay a {
	color: #fff;
}

.wpfp-grid-content,
.wpfp-image-bg {
	height: 100%;
}

.wpfp-image-bg {
	background: #f1f1f1;
	transition: all 0.5s ease 0s;
}

.wpfp-image-bg img {
	height: 100%;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: top center;
}

.wpfp-link-overlay:hover + .wpfp-grid-content .wpfp-image-bg {
	transform: scale(1.2);
	transition: all 0.5s ease 0s;
}

.wpfp-bottom-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	text-align: left;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 40%) 50%, rgb(0 0 0 / 70%) 100%);
}

.wpfp-title {
	line-height: normal;
}

/* .wpfp-featured-post.design-1 prefix restores the original plugin's own
   specificity level -- needed to beat Astra's own (higher-specificity)
   content-link color/underline styling. A plain `.wpfp-title a` loses that
   fight silently (confirmed 2026-09-23: title rendered as a big default
   underlined link, everything else -- border, skew, image -- correct). */
.wpfp-featured-post.design-1 .wpfp-title a {
	font-size: 14px;
	line-height: normal;
	text-decoration: none;
	text-transform: capitalize;
	color: #fff;
	font-weight: bold;
}

.wpfp-categories {
	padding: 4px 0;
	display: inline-block;
	text-transform: capitalize;
	position: relative;
	z-index: 9;
}

.wpfp-categories a {
	text-decoration: none;
	font-size: 10px;
	text-transform: capitalize;
	padding: 2px 8px;
	color: #fff;
	display: inline-block;
	margin: 2px 0;
	background: rgb(0 0 0 / 50%);
}

.wpfp-date {
	line-height: normal;
	padding: 5px 5px 5px 0;
	display: inline-block;
	text-transform: capitalize;
	color: #fff;
	font-size: 12px;
	position: relative;
	z-index: 10;
}

.wpfp-clearfix::before,
.wpfp-clearfix::after {
	content: "";
	display: table;
}

.wpfp-clearfix::after {
	clear: both;
}

.wpfp-medium-3.wpfp-medium-right {
	padding: 0 0 5px 5px;
}

.wpfp-medium-6.wpfp-medium-left {
	padding: 0 0 5px 0;
}

@media only screen {
	.wpfpcolumn,
	.wpfpcolumns {
		width: 100%;
	}
}

@media only screen and (min-width: 40.0625em) {
	.wpfp-medium-3 {
		width: 25%;
	}

	.wpfp-medium-6 {
		width: 50%;
	}
}

@media screen and (max-width: 800px) {
	.wpfpcolumns {
		height: 250px !important;
		width: 100%;
	}

	.wpfp-medium-3.wpfp-medium-right,
	.wpfp-medium-6.wpfp-medium-left {
		padding: 0 0 5px 0;
	}
}