/*
Theme Name:   Xclean Child
Template:     xclean
Version:      1.0.0
Description:  Child theme for Xclean. Adds the Karim SRL secondary logo next to the main Service Life logo across header, sticky header, mobile header, footer and wp-login.
Text Domain:  xclean-child
*/

/* ---------- Dual-logo layout (header / sticky / mobile) ---------- */

/* The site-title anchor wraps both logos. Make it a flex row on desktop, column on mobile. */
.site-branding .site-title > a,
.site-branding h1.site-title > a {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
}

/* Vertical divider between the two logos on desktop */
.site-branding .site-title > a .pbmit-logo-sep {
	display: inline-block;
	width: 1px;
	align-self: stretch;
	background: rgba(0, 24, 55, 0.18);
	min-height: 28px;
}

/* Keep the partner (Karim) image visibility synced to its sibling.
   The theme already toggles .pbmit-main-logo vs .pbmit-sticky-logo on scroll,
   so we just need the partner images to share those classes (they do). */

/* Partner (Karim) image must match the same max-height as the main logo
   the theme controls via CSS variables. Without this it inherits its
   natural pixel height. */
.site-title img.pbmit-partner-logo.pbmit-main-logo {
	max-height: var(--pbmit-xclean-logo-height, 50px);
	width: auto;
}
.site-title img.pbmit-partner-logo.pbmit-sticky-logo,
.site-header.pbmit-fixed-header .site-title img.pbmit-partner-logo.pbmit-main-logo {
	max-height: var(--pbmit-xclean-sticky-logo-height, 50px);
	width: auto;
}
.site-title img.pbmit-partner-logo.pbmit-responsive-logo {
	max-height: var(--pbmit-xclean-responsive-logo-height, 50px);
	width: auto;
}

/* Mobile: stack vertically, hide the vertical divider */
@media (max-width: 767px) {
	.site-branding .site-title > a,
	.site-branding h1.site-title > a {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.site-branding .site-title > a .pbmit-logo-sep {
		display: none;
	}
}

/* ---------- Footer dual logo ---------- */

.pbmit-footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
}
.pbmit-footer-logo .pbmit-logo-sep {
	display: inline-block;
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.25);
	min-height: 28px;
}
.pbmit-footer-logo img {
	max-height: 50px;
	width: auto;
}
@media (max-width: 767px) {
	.pbmit-footer-logo {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.pbmit-footer-logo .pbmit-logo-sep {
		display: none;
	}
}

/* ---------- Testimonial author name: yellow instead of white for readability ---------- */
.pbmit-testimonial-style-1 .pbminfotech-box-author .pbminfotech-box-title,
.pbmit-element-testimonial .pbminfotech-box-author .pbminfotech-box-title {
	color: #fba311 !important;
}

/* ---------- Icon-box icons: force fill to inherit the wrapper color ----------
 * The theme paints custom SVG icons yellow via wrapper color, but Elementor's
 * Font Awesome icons (e-font-icon-svg) default their fill to black because
 * they don't use currentColor. This rule makes all icon-box SVGs honor the
 * wrapper's color, so mixed icon types stay visually consistent. */
.pbmit-ihbox-icon-wrapper svg,
.pbmit-ihbox-icon-wrapper svg * {
	fill: currentColor !important;
}

/* ---------- Centered footer layout ---------- */

/* Logo row: collapse the empty right column, span logo full-width, center it */
.pbmit-footer-big-area .row {
	justify-content: center;
	align-items: center;
}
.pbmit-footer-big-area .pbmit-footer-left {
	flex: 0 0 100%;
	max-width: 100%;
	text-align: center;
}
.pbmit-footer-big-area .pbmit-footer-right:empty,
.pbmit-footer-big-area .pbmit-footer-right > :only-child:empty {
	display: none;
}
.pbmit-footer-big-area .pbmit-footer-logo {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* Normalize ALL footer widget titles to the same H6 typography
   so the four columns look uniform regardless of which widget type they use. */
.pbmit-footer-widget-area .widget-title,
.pbmit-footer-widget-area h1.widget-title,
.pbmit-footer-widget-area h2.widget-title,
.pbmit-footer-widget-area h3.widget-title,
.pbmit-footer-widget-area h4.widget-title,
.pbmit-footer-widget-area h5.widget-title,
.pbmit-footer-widget-area h6.widget-title {
	font-family: Quicksand, sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: 0;
	margin-bottom: 18px;
	color: #ffffff;
}

/* Widget columns row: force 4 equal centered columns regardless of broken col-md-NN classes */
.pbmit-footer-widget-area .row {
	justify-content: center;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
}
.pbmit-footer-widget-area .pbmit-footer-widget {
	flex: 1 1 0;
	max-width: 25%;
	text-align: center;
}
@media (max-width: 991px) {
	.pbmit-footer-widget-area .pbmit-footer-widget {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 30px;
	}
}
@media (max-width: 575px) {
	.pbmit-footer-widget-area .pbmit-footer-widget {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
/* Center the widget heading underline / borders too */
.pbmit-footer-widget-area .widget-title,
.pbmit-footer-widget-area .widget_nav_menu ul,
.pbmit-footer-widget-area .menu,
.pbmit-footer-widget-area ul {
	text-align: center;
	list-style: none;
	padding-left: 0;
}
.pbmit-footer-widget-area .menu li,
.pbmit-footer-widget-area .widget_nav_menu li {
	display: block;
}

/* Copyright bottom strip */
.pbmit-footer-text-area .pbmit-footer-copyright-text,
.pbmit-footer-text-area .pbmit-footer-copyright-left,
.pbmit-footer-text-area .pbmit-footer-copyright-right,
.pbmit-footer-text-area p {
	text-align: center !important;
	float: none !important;
	width: 100% !important;
}

/* ---------- wp-login page dual logo ----------
 * The PBM theme-addons plugin renders a CSS background-image on the H1 anchor
 * via inline CSS hooked on login_footer. Our enqueue on login_enqueue_scripts
 * fires earlier in source order, so we need !important on every property to
 * win the cascade reliably. */

body.login h1 a,
#login h1 a,
.login h1 a {
	background-image: none !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	text-indent: 0 !important;
	padding: 0 !important;
	margin: 0 auto 25px !important;
	font-size: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
}
body.login h1 a .xcc-login-logos {
	display: inline-flex !important;
	align-items: center !important;
	gap: 16px !important;
}
body.login h1 a .xcc-login-logos img {
	max-height: 60px !important;
	width: auto !important;
	display: inline-block !important;
}
body.login h1 a .xcc-login-logos .pbmit-logo-sep {
	display: inline-block !important;
	width: 1px !important;
	height: 40px !important;
	background: rgba(0, 0, 0, 0.2) !important;
}
@media (max-width: 480px) {
	body.login h1 a .xcc-login-logos {
		flex-direction: column !important;
		gap: 8px !important;
	}
	body.login h1 a .xcc-login-logos .pbmit-logo-sep {
		display: none !important;
	}
}