/**
 * Page Title Component Styles
 *
 * Extends style.css base rules. The following are defined in style.css
 * and must NOT be duplicated here:
 *   .page-title          — position, padding (via --cnvs-page-title-padding), bg, border
 *   .page-title-row      — display:flex, responsive column→row layout
 *   .page-title-content  — text-align (responsive center→left)
 *   .page-title-content h1 — font-size/weight/color via --cnvs-page-title-* custom props
 *   .page-title-content span — display, margin-top, color, font-size via custom props
 *   .page-title-mini     — padding/font via --cnvs-page-title-mini-* custom props
 *   .page-title-center   — flex-direction, align-items, text-align
 *   .page-title-right    — text-align, flex-direction (responsive)
 *   .page-title-parallax — custom props for padding/font
 *   .page-title-pattern  — background-image, background-repeat
 *   .page-title-video    — position, overflow, .video-wrap, video
 *   .breadcrumb           — Bootstrap + Canvas base rules
 *
 * This file only adds styles that do NOT exist in style.css.
 *
 * @package Canvas
 * @since 1.0.0
 */

/* ==========================================================================
   Layout — additions to style.css .page-title-row / .page-title-content
   ========================================================================== */

/* Row gap (style.css does not set gap) */
.page-title-row {
	gap: 0.75rem;
}

/* Content flex sizing for side-by-side layout with breadcrumbs/CTAs */
.page-title-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* ==========================================================================
   Dark Mode (page-title-dark)
   style.css has no dark variant — everything here is new.
   ========================================================================== */

.page-title-dark {
	color: #fff;
}

/* Semi-transparent overlay rendered via ::before so content stays on top */
.page-title-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 0;
	pointer-events: none;
}

.page-title-dark .container {
	position: relative;
	z-index: 1;
}

.page-title-dark .page-title-content h1,
.page-title-dark .page-title-content span {
	color: #fff;
}

.page-title-dark .breadcrumb-item,
.page-title-dark .breadcrumb-item a,
.page-title-dark .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.85);
}

.page-title-dark .breadcrumb-item a:hover {
	color: #fff;
}

.page-title-dark .breadcrumb-item.active {
	color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Parallax Background Image
   style.css handles .page-title-parallax custom properties + .container z-index.
   Only the <img class="parallax-bg"> element is new.
   ========================================================================== */

.page-title-parallax .parallax-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
	pointer-events: none;
}

/* ==========================================================================
   Breadcrumbs — extends style.css base (Bootstrap + Canvas breadcrumb rules)
   Only additive styles here; base .breadcrumb rules live in style.css.
   ========================================================================== */

.page-title nav[aria-label="Breadcrumb"],
.page-title nav[aria-label="breadcrumb"] {
	flex: 0 0 auto;
}

/* Home icon */
.breadcrumb-item .uil-home {
	font-size: 1rem;
	vertical-align: middle;
	line-height: 1;
}

/* Mini: style.css hides all spans (.page-title-mini span { display:none })
   to suppress the subtitle — restore spans inside breadcrumb items. */
.page-title-mini .breadcrumb-item span {
	display: inline;
}

/* Centered layout — override desktop flex-start from style.css */
.page-title-center .breadcrumb {
	justify-content: center;
}

/* Right-aligned layout */
.page-title-right .breadcrumb {
	justify-content: flex-end;
}

/* ==========================================================================
   Bold Style (not in style.css)
   ========================================================================== */

.page-title-bold .page-title-content h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
}

/* ==========================================================================
   Pattern Background — addition only
   style.css handles background-image and background-repeat.
   ========================================================================== */

.page-title-pattern {
	background-size: auto;
}

/* ==========================================================================
   Include Header — extends page title behind the header
   style.css handles generic .include-header in header context;
   this provides the page-title-specific offset.
   ========================================================================== */

.page-title.include-header {
	margin-top: -80px;
	padding-top: 130px;
}

/* ==========================================================================
   Video Background — additions to style.css .page-title-video
   style.css handles: position, overflow, .video-wrap positioning, video width.
   ========================================================================== */

/* Minimum visual height (not in style.css) */
.page-title-video {
	min-height: 300px;
}

/* Video fill: height + object-fit (style.css only sets width) */
.page-title .video-wrap video {
	height: 100%;
	object-fit: cover;
}

/* Dark overlay — overrides style.css grid-pattern overlay with solid bg.
   z-index: 1 keeps overlay below .container (z-index: 3 in style.css). */
.page-title .video-overlay {
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
}

/* ==========================================================================
   Google Maps Background (not in style.css)
   ========================================================================== */

.page-title-gmap {
	position: relative;
}

.page-title-gmap .gmap-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* ==========================================================================
   Featured Layout (not in style.css)
   ========================================================================== */

.page-title-featured .page-title-content h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
}

.page-title-featured .page-title-content .fw-light {
	display: block;
	opacity: 0.75;
}

/* ==========================================================================
   Blog Layout — Entry Meta (not in style.css)
   ========================================================================== */

.page-title-blog .entry-meta {
	font-size: 0.875rem;
}

.page-title-blog .entry-meta ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-title-blog .entry-meta li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.page-title-blog .entry-meta a {
	color: inherit;
	text-decoration: none;
}

.page-title-blog .entry-meta a:hover {
	text-decoration: underline;
}

.page-title-blog .entry-meta i {
	opacity: 0.6;
}

/* ==========================================================================
   Shop Layout — Product Info (not in style.css)
   ========================================================================== */

.page-title-shop .product-rating {
	display: flex;
	gap: 0.125rem;
	font-size: 0.875rem;
}

.page-title-shop .product-rating .bi-star-fill,
.page-title-shop .product-rating .bi-star-half {
	color: #f59e0b;
}

.page-title-shop .product-rating .bi-star {
	color: #d1d5db;
}

/* ==========================================================================
   Boxes Layout — Feature Cards (not in style.css)
   ========================================================================== */

.page-title-boxes .feature-box {
	display: flex;
	gap: 1rem;
}

.page-title-boxes .fbox-icon {
	flex: 0 0 auto;
}

.page-title-boxes .fbox-icon i {
	font-size: 1.5rem;
}

.page-title-boxes .fbox-content h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.page-title-boxes .fbox-content p {
	font-size: 0.875rem;
	opacity: 0.75;
}

.page-title-boxes .bg-icon {
	position: absolute;
	opacity: 0.03;
	line-height: 1;
}

.page-title-boxes .card {
	position: relative;
	overflow: hidden;
}

/* ==========================================================================
   Responsive — additions only (style.css handles base responsive)
   ========================================================================== */

@media ( max-width: 767.98px ) {
	/* Row gap — tighter on mobile */
	.page-title-row {
		gap: 0.5rem;
	}

	/* Include header — smaller offset on mobile */
	.page-title.include-header {
		margin-top: -60px;
		padding-top: 90px;
	}

	/* Video — smaller min-height on mobile */
	.page-title-video {
		min-height: 200px;
	}

	/* Blog entry meta stacks on mobile */
	.page-title-blog .entry-meta ul {
		flex-direction: column;
		gap: 0.25rem;
	}
}