/*
Theme Name: Agencyup Child
Theme URI: https://themeansar.com/free-themes/agencyup/
Template: agencyup
Author: themeansar
Description: Child theme of Agencyup — adds a top header with location and contact information.
Version: 1.0.0
Text Domain: agencyup-child
*/

img.custom-logo {
	height: 70px;
	width: auto;
	max-width: 100%;
}

.container {
	max-width: 90% !important;
}

.desk-header .btn-theme {
	padding: 12px 17px;
	border-radius: 42px;
	font-weight: 500;
}

.bs-breadcrumb-title h1 {
	font-weight: 500 !important;
	line-height: 0;
}

/*
 * Top header redesign: the parent draws a black bar with a red skewed
 * wedge (.bs-head-detail::after). Skew + border-radius don't mix cleanly —
 * rounding a skewed shape warps into a lopsided blob. Dropping the skew and
 * using a plain, unskewed red block with a rounded edge gives a clean,
 * pill-shaped separation in the middle instead, sized to match the left/
 * right column split (col-6 / col-6) so the seam lines up with the content.
 */
.bs-head-detail {
	background: #000;
}
.bs-head-detail::after {
	display: none;
}
.bs-head-detail::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: #D50A11;
	border-radius: 0 40px 40px 0;
	z-index: -1;
}
.bs-head-detail,
.bs-head-detail .info-left li a,
.bs-head-detail .info-right li a,
.bs-head-detail .info-left,
.bs-head-detail .info-right {
	font-family: inherit;
}
.bs-head-detail .info-left li a,
.bs-head-detail .info-right li a,
.bs-head-detail .info-right li {
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.2px;
}
.bs-head-detail .info-left li a,
.bs-head-detail .info-right li a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: opacity 0.2s ease-in-out;
}
.bs-head-detail .info-left li a:hover,
.bs-head-detail .info-right li a:hover {
	text-decoration: none;
	opacity: 1;
	color: #fff;
}
.bs-head-detail .info-left i,
.bs-head-detail .info-right i {
	color: #fff;
	opacity: 0.85;
}
.bs-head-detail .info-right {
	justify-content: flex-end;
	gap: 15px;
}

/*
 * Safety net: the parent theme shows only ONE of the two nav layouts at a
 * time — .container.mobi-menu (logo + hamburger) on small screens, or
 * .container.desk-menu (logo + full nav + button) on large screens —
 * via a plain, unconditional ".container.mobi-menu { display: none; }"
 * rule in the parent's style.css, overridden at max-width: 991.98px. If
 * anything strips or outranks that rule (a caching/minifier plugin, another
 * plugin's CSS, etc.) both layouts render side by side, as seen in
 * production. Re-asserting it here with !important guarantees only one
 * shows, regardless of what else is loaded.
 */
@media (min-width: 992px) {
	.container.mobi-menu {
		display: none !important;
	}
}
@media (max-width: 991.98px) {
	.container.mobi-menu {
		display: block !important;
	}
	.desk-menu .navbar-header,
	.desk-menu .desk-header,
	.desk-menu .top-cart {
		display: none !important;
	}
}

/*
 * Top header on small screens: the red pill (.bs-head-detail::before, added
 * above) is sized to sit behind the LEFT half of a 50/50 desktop row
 * (.col-6 / .col-6 in inc/top-header.php). Below 767.98px — the parent
 * theme's own top-header breakpoint — that 50/50 split doesn't shrink or
 * stack on its own, so the phone/email column keeps fighting the address
 * column for half the (now much narrower) width, wrapping the phone number
 * onto one digit-group per line instead of leaving it on one row. Stacking
 * both columns to full width and dropping the now-mismatched pill fixes it.
 */
@media (max-width: 767.98px) {
	.bs-head-detail::before {
		display: none;
	}
	.bs-head-detail .row {
		flex-direction: column;
	}
	.bs-head-detail .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.bs-head-detail .info-left {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	.bs-head-detail .info-left li a,
	.bs-head-detail .info-right li {
		white-space: nowrap;
	}
	/* The address is the least essential line at this width — drop it to
	   keep the bar to a single, legible row (matches the mobile nav, which
	   already hides the address the same way). */
	.bs-head-detail .col-6:last-child {
		display: none;
	}
}

.info-right li {
    margin-right: 0 !important;
}

i.fas.fa-map-marker-alt {
    margin-right: 5px;
}

/*
 * One-page nav — active section = solid background block (see
 * js/onepage-scrollspy.js for how ".active" gets toggled on scroll). The
 * parent theme's own ".active" style is just a bottom border in the current
 * text color; padding + border-radius + background here turn that into a
 * filled pill instead, matching the requested look.
 */
.bs-default .navbar-wp .navbar-nav > li > a {
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 3px;
	transition: background-color .2s ease, color .2s ease;
}
.bs-default .navbar-wp .navbar-nav > li.active > a,
.bs-default .navbar-wp .navbar-nav > li.active > a:hover,
.bs-default .navbar-wp .navbar-nav > li.active > a:focus {
	background-color: var(--pri-color);
	color: #fff;
	/* the parent theme's own ".active" rule draws a 2px currentColor
	   border-bottom — with white text that would show as a faint white
	   line at the foot of the red block, so cancel it explicitly. */
	border-bottom: 0;
}

/*
 * Polylang language switcher (see inc/language-switcher.php). Rendered in
 * two places sharing this same styling via :is():
 *  - Desktop: plain <li class="lang-item ..."> items appended at the end
 *    of #menu-main-menu (.navbar-wp .navbar-nav).
 *  - Mobile: its own small <ul class="lang-switcher-mobile"> between the
 *    logo and the hamburger button in the persistent mobile top bar (see
 *    this child theme's header.php override).
 * No enclosing bar/background: each language is its own small outlined
 * pill, the current one picked out with the site's red instead of a fill.
 */
.lang-switcher-mobile {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item {
	display: flex;
	align-items: center;
}
.navbar-wp .navbar-nav li:not(.lang-item) + li.lang-item {
	margin-left: 18px;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item + li.lang-item {
	margin-left: 0; /* flush against the previous segment, not a separate chip */
}

/* One continuous outline across both <li>s: every segment gets the same
   top/bottom/left border, the right border is suppressed except on the
   very last segment — so the divider between languages is drawn once (by
   the second segment's left border) instead of doubling up, and the shape
   only rounds at its two true outer corners. */
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item > a {
	padding: 6px 16px;
	border: 1.5px solid rgba(8, 8, 8, .18);
	border-right: none;
	font-family: var(--display, inherit);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(8, 8, 8, .55);
	white-space: nowrap;
	transition: color .2s ease;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item:first-child > a,
.navbar-wp .navbar-nav li:not(.lang-item) + li.lang-item > a {
	border-top-left-radius: 999px;
	border-bottom-left-radius: 999px;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item:last-child > a {
	border-right: 1.5px solid rgba(8, 8, 8, .18);
	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item.lang-item-current > a,
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item.is-current-lang > a {
	color: var(--pri-color);
	font-weight: 800;
}
:is(.navbar-wp .navbar-nav, .lang-switcher-mobile) li.lang-item:not(.lang-item-current):not(.is-current-lang) > a:hover {
	color: #080808;
}
@media (max-width: 991.98px) {
	.navbar-wp .navbar-nav li:not(.lang-item) + li.lang-item {
		margin-left: 0;
		margin-top: 10px;
	}
	/* Already shown separately in the persistent mobile top bar
	   (.lang-switcher-mobile, next to the logo) — without this it also
	   renders a second time here, inside the hamburger dropdown, since that
	   dropdown reuses the same #menu-main-menu the lang-item is appended to
	   for desktop. */
	.navbar-wp .navbar-nav li.lang-item {
		display: none;
	}
	/* Room either side, now that it's sitting inline between the logo and
	   the hamburger instead of trailing the nav links. */
	.lang-switcher-mobile {
		margin: 0 12px;
	}
}

/*
 * Clicking a menu item focuses the link, and the browser's default focus
 * ring (a rectangle traced around the whole link box) then shows on top of
 * it — the underline above is the only "you're here" indicator this menu
 * needs, so the focus ring is redundant chrome, not an accessibility loss.
 */
.bs-default .navbar-wp .navbar-nav > li > a:focus,
.bs-default .navbar-wp .navbar-nav > li > a:active {
	outline: none;
	box-shadow: none;
}

/*
 * Footer: 3 column widget areas (see inc/footer-widgets.php) + the
 * copyright line, a plain Customizer field rendered by this child theme's
 * footer.php override — no extra CSS needed for that one, it sits inside
 * the parent theme's existing .site-info styling.
 */