/* =========================================================
   Giel OceanWP Mobile Page Title v1.1
   Server-rendered: no JS, no title flash.
   ========================================================= */

/* Never show our injected title on desktop. */
.giel-mobile-page-title {
	display: none;
}

@media (max-width: 767px) {

	/*
	 * OceanWP middle content contains logo/navigation. Keep it positioned so
	 * our server-rendered title can sit between the logo and mobile menu.
	 */
	#site-header #site-header-inner,
	#site-header .container,
	#site-header .container.clr {
		position: relative !important;
	}

	.giel-mobile-page-title {
		display: block !important;
		position: absolute;
		left: 74px;
		right: 74px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;

		margin: 0 !important;
		padding: 0 6px !important;

		text-align: center;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.2;
		color: inherit;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		pointer-events: none;
	}

	/* Keep the actual logo and mobile menu tappable above the title layer. */
	#site-logo,
	#site-navigation-wrap,
	.oceanwp-mobile-menu-icon,
	.mobile-menu,
	.mobile-menu-icon {
		position: relative;
		z-index: 10;
	}

	/*
	 * OceanWP native page title: hide the duplicate immediately, before paint.
	 * The server-rendered header title already contains the same page title.
	 */
	body.giel-mobile-header-title-active .page-header-title {
		display: none !important;
	}

	/*
	 * If an OceanWP page header contains only its title, collapse the now-empty
	 * title shell. If breadcrumbs/subheading exist, the shell remains.
	 */
	@supports selector(.page-header:has(.page-header-title)) {
		body.giel-mobile-header-title-active .page-header:has(.page-header-title):not(:has(.site-breadcrumbs)):not(:has(.breadcrumb)):not(:has(.page-subheading)),
		body.giel-mobile-header-title-active #page-header:has(.page-header-title):not(:has(.site-breadcrumbs)):not(:has(.breadcrumb)):not(:has(.page-subheading)) {
			display: none !important;
		}
	}

	/*
	 * Internal Giel form pages already have the WordPress page title in the
	 * mobile header, so hide the duplicate form heading immediately.
	 */
	body.giel-mobile-header-title-active .giel-form > h1:first-child,
	body.giel-mobile-header-title-active .giel-form > h2:first-child {
		display: none !important;
	}

	/*
	 * Standard standalone WordPress pages may render an entry title instead of
	 * OceanWP's page-header title. Hide it on real pages only. Do NOT apply this
	 * to blog/archive loops, so article card titles remain visible.
	 */
	body.page.giel-mobile-header-title-active main .entry-title,
	body.page.giel-mobile-header-title-active #content .entry-title {
		display: none !important;
	}
}

@media (max-width: 380px) {
	.giel-mobile-page-title {
		left: 64px;
		right: 64px;
		font-size: 15px;
	}
}