/**
 * 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
   ========================================================================== */

/*
 * The title column shares the row with the breadcrumb trail and any action
 * buttons. It sizes to its own content and shrinks when the row runs out of
 * room, which is what the row's `space-between` and `wrap` expect; growing it
 * to fill the row stretches centred content across the full width and lets a
 * price or a button column collapse to one character per line.
 */

/* ==========================================================================
   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: page title runs behind a transparent header

   style.css owns the underlap itself (`#header + .include-header` negative
   margin) and clears the header on parallax bands by padding their
   `.container`. Mirror that container offset for non-parallax bands, which
   style.css does not cover, so the heading never sits under the header.
   ========================================================================== */

.is-expanded-menu #header.transparent-header + .page-title.include-header .container {
	padding-top: var(--cnvs-header-height);
}

/* ==========================================================================
   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;
}

/* display:flex / flex-wrap / list-style are owned by style.css .entry-meta ul.
   Here we only swap its negative-margin separator mechanism for a flex gap
   (margin: 0) and reset the reboot's 2rem list padding. */
.page-title-blog .entry-meta ul {
	gap: 0.5rem 1.25rem;
	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)
   ========================================================================== */

/* display:flex is owned by style.css .feature-box, only the gap is added here. */
.page-title-boxes .feature-box {
	gap: 1rem;
}

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

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

/* Font size/weight come from style.css .fbox-content h3 tokens
   (--cnvs-featured-box-font-size: 1.125rem / -font-weight: 600 defaults);
   re-declaring them here would out-specify the token system. */
.page-title-boxes .fbox-content h3 {
	margin: 0 0 0.25rem;
}

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

/* Background watermark icon and its card container need no rules here:
   style.css .bg-icon already provides position:absolute, the emitted markup
   carries .op-03 / .lh-1 (both !important utilities, so local opacity /
   line-height declarations could never apply), Bootstrap .card provides
   position:relative, and the markup carries .overflow-hidden. */

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

@media ( max-width: 767.98px ) {
	/* 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;
	}
}