/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra Child Theme
Author: Brainstorm Force
Author URI: https://wpastra.com/
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* Custom styles go below this line
-------------------------------------------------- */

/* Blog Page Hero Banner (Matching About Me / Gallery Header Layout) */
.custom-blog-hero,
.custom-blog-intro {
	position: relative;
	width: 100%;
	min-height: 380px;
	background-color: #000f2b;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 130px 20px 145px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	margin-bottom: 0;
}

/* Dark navy sports background overlay (matching site's #000f2b at 0.85 opacity) */
.custom-blog-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000f2b;
	opacity: 0.85;
	z-index: 1;
	pointer-events: none;
}

/* Hero Content */
.custom-blog-hero-inner,
.custom-blog-intro-inner {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Hero Title (Matching 'About Me' / 'Gallery') */
.custom-blog-hero h1,
.custom-blog-hero .custom-blog-title,
.custom-blog-intro h1,
.custom-blog-intro .custom-blog-title {
	color: #ffffff !important;
	font-family: 'Sarala', sans-serif !important;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 10px 0;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Subtitle */
.custom-blog-hero h2,
.custom-blog-hero .custom-blog-subtitle,
.custom-blog-intro h2,
.custom-blog-intro .custom-blog-subtitle {
	color: #ffffff !important;
	font-family: 'Sarala', sans-serif !important;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px 0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Description */
.custom-blog-hero p,
.custom-blog-hero .custom-blog-desc,
.custom-blog-intro p,
.custom-blog-intro .custom-blog-desc {
	color: rgba(255, 255, 255, 0.88) !important;
	font-family: 'PT Sans', sans-serif !important;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Triangle Shape Divider (Matching Elementor Triangle Negative) */
.custom-blog-hero .custom-blog-shape-bottom,
.custom-blog-intro .custom-blog-shape-bottom {
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	line-height: 0;
	direction: ltr;
	pointer-events: none;
	z-index: 3;
}

.custom-blog-hero .custom-blog-shape-bottom svg,
.custom-blog-intro .custom-blog-shape-bottom svg {
	display: block;
	width: calc(100% + 1.3px);
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 38px;
}

.custom-blog-hero .custom-blog-shape-bottom .custom-blog-shape-fill,
.custom-blog-intro .custom-blog-shape-bottom .custom-blog-shape-fill {
	fill: #ffffff;
	transform-origin: center;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* Responsive adjustments for mobile & tablets */
@media (max-width: 921px) {
	.custom-blog-hero,
	.custom-blog-intro {
		min-height: 320px;
		padding: 100px 20px 120px;
	}
}

@media (max-width: 768px) {
	.custom-blog-hero,
	.custom-blog-intro {
		min-height: 270px;
		padding: 80px 15px 100px;
	}

	.custom-blog-hero .custom-blog-shape-bottom svg,
	.custom-blog-intro .custom-blog-shape-bottom svg {
		height: 26px;
	}

	.custom-blog-hero h1,
	.custom-blog-hero .custom-blog-title,
	.custom-blog-intro h1,
	.custom-blog-intro .custom-blog-title {
		font-size: 2.2rem;
		margin-bottom: 8px;
	}

	.custom-blog-hero h2,
	.custom-blog-hero .custom-blog-subtitle,
	.custom-blog-intro h2,
	.custom-blog-intro .custom-blog-subtitle {
		font-size: 1.2rem;
		margin-bottom: 8px;
	}

	.custom-blog-hero p,
	.custom-blog-hero .custom-blog-desc,
	.custom-blog-intro p,
	.custom-blog-intro .custom-blog-desc {
		font-size: 0.9rem;
	}
}