/*
Theme Name: Oakland Police Foundation Child
Theme URI: http://ewebsiteservices.com/themes/oakland-police-foundation/
Template: oakland-police-foundation
Author: eWebsiteServices
Author URI: http://ewebsiteservices.com
Description: Basic WordPress theme
Tags: light,gray,white,one-column,two-columns,right-sidebar,flexible-width,custom-background,custom-header,custom-menu,editor-style,featured-images,flexible-header,full-width-template,microformats,post-formats,rtl-language-support,sticky-post,theme-options,translation-ready
Version: 1.0.1782271612
Updated: 2026-06-24 03:26:52

*/

.opf-home-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 220px;
	aspect-ratio: 16 / 6;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto 24px;
	outline: none;
}

.opf-home-banner__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 22px;
	background: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
	box-sizing: border-box;
}

.opf-home-banner__text {
	margin: 0;
	color: #ffffff;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.opf-home-banner:hover .opf-home-banner__overlay,
.opf-home-banner:focus .opf-home-banner__overlay,
.opf-home-banner:focus-visible .opf-home-banner__overlay {
	transform: translateY(0);
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.opf-home-banner {
		min-height: 180px;
		aspect-ratio: auto;
	}

	.opf-home-banner__overlay {
		padding: 16px;
	}

	.opf-home-banner__text {
		font-size: 20px;
	}
}

@media (hover: none) {
	.opf-home-banner__overlay {
		transform: translateY(100%);
		opacity: 0;
	}

	.opf-home-banner:active .opf-home-banner__overlay,
	.opf-home-banner:focus .opf-home-banner__overlay,
	.opf-home-banner:focus-visible .opf-home-banner__overlay {
		transform: translateY(0);
		opacity: 1;
	}
}