/*
Theme Name:   Homirx Child
Theme URI:    http://127.0.0.1/v1/
Description:  Child theme of Homirx. Holds site-specific template overrides (e.g. Directorist custom profile fields) so the parent Homirx theme can be updated without losing customizations.
Author:       Admin
Template:     homirx
Version:      1.2.4
Text Domain:  homirx-child
*/

/* Add custom CSS below. */

/*
 * Directorist listing-card Parking icon (see child theme override
 * directorist/archive/custom-fields/number.php). The SVG-mask icon's
 * visible glyph is drawn by the ::after pseudo-element, which the plugin
 * styles at 18px with a black background — inline styles on the <i> only
 * size the container. Match Bed/Bath's 22px font icons and their orange
 * color (inherited via currentColor from the theme's .icon class).
 */
/*
 * Listing-card (grid/list view) price: smaller font so "min - max" price
 * ranges (e.g. "$920,000 - 1,000,000") fit on one line instead of
 * wrapping. Single listing pages are unaffected.
 */
.property-block .directorist-listing-price,
.directorist-listing-card .directorist-listing-price {
	/* !important: the theme sets 18px on the same selector in a stylesheet
	   that loads after this one, so equal specificity loses. */
	font-size: 16px !important;
	white-space: nowrap;
}

.property-card-number .directorist-icon-mask.icon::after {
	/* !important needed: the plugin ships
	   ".directorist-icon-mask:after { background-color: ... !important }" */
	width: 22px !important;
	height: 22px !important;
	background-color: currentColor !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
}

/*
 * Homepage property carousels (gva-all-listing widget): hide the
 * "1 / 25" swiper slide-counter shown under the cards.
 */
.elementor-widget-gva-all-listing .swiper-pagination-fraction {
	display: none !important;
}

/*
 * Team sections (gva-team widget, homepage + Our Team): agent photos are
 * uploaded at mixed aspect ratios (one portrait, rest square), making the
 * cards uneven. Force a uniform square crop, anchored to the top so faces
 * are never cropped out.
 */
.elementor-widget-gva-team .team-one__image img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}

/*
 * Icon-box carousels (gva_icon_box_group: "Our Services" Buy/Sell cards,
 * "Explore Property Types"): cards sized to their own text, so a card
 * with an extra line of copy rendered taller than its siblings. Stretch
 * every slide and card to the row height.
 * !important on align-items: the theme centers .swiper-slide content,
 * which blocks the stretch.
 */
.gsc-icon-box-group .swiper-wrapper {
	align-items: stretch;
}
.gsc-icon-box-group .swiper-slide {
	height: auto;
	display: flex;
	align-items: stretch !important;
}
.gsc-icon-box-group .swiper-slide .icon-box-item {
	display: flex;
	width: 100%;
}
.gsc-icon-box-group .iconbox-one__single {
	width: 100%;
	box-sizing: border-box;
}

/*
 * Icon-box cards: the visible 1px "border" is the card background peeking
 * around the dark ::after overlay (inset 1px) — it was rgba(255,255,255,.16),
 * a barely-visible grey. Solid white makes the border crisp; the theme's
 * hover/active effect (accent-color border + icon via ::before slide-in)
 * is layered on top and keeps working unchanged.
 */
.gsc-icon-box-group .iconbox-one__single {
	background: #ffffff;
}

/*
 * "Our Latest News Update" post cards (gva-posts widget): hide the author
 * meta — it renders the WP display name, which is an email address here.
 * The date stays.
 */
.gva-posts .post-one__meta .author.vcard {
	display: none;
}

/*
 * Mortgage Calculator (see child theme override
 * directorist/single/fields/description.php). Rebuilt from scratch to
 * match the old RealHomes production site's widget_mortgage-calculator —
 * Directorist has no bundled equivalent. Ring is a static decorative
 * circle (the RealHomes original doesn't fill proportionally either, it
 * shows a full ring even at $0/month), not a data-driven chart.
 */
.path-mc {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #ececec;
}

.path-mc__title {
	color: #2f56d9;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

.path-mc__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.path-mc__fields {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.path-mc__field label {
	display: block;
	font-weight: 600;
	color: #16243e;
	margin-bottom: 6px;
}

.path-mc__input,
.path-mc__select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	margin-bottom: 8px;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	color: #888;
	background: #fff;
}

.path-mc__field:has(#path-mc-down) .path-mc__input {
	display: inline-block;
	width: calc(50% - 5px);
}

.path-mc__field:has(#path-mc-down) .path-mc__input:first-of-type {
	margin-right: 10px;
}

.path-mc__range {
	width: 100%;
	accent-color: #ff6f3c;
}

.path-mc__result {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.path-mc__ring {
	width: 190px;
	height: 190px;
	border-radius: 50%;
	border: 12px solid #ff6f3c;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.path-mc__ring-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.path-mc__monthly {
	font-size: 26px;
	font-weight: 700;
	color: #16243e;
}

.path-mc__per-month {
	font-size: 13px;
	color: #888;
}

.path-mc__summary {
	margin: 16px 0 6px;
	color: #16243e;
}

.path-mc__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #16243e;
}

.path-mc__legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff6f3c;
	display: inline-block;
}

/*
 * "Sold" listing badge. NOT the parent theme's .directorist-badge-sold
 * (that class exists in _block.scss but is unused on this site) — the
 * actual badge is a ::after pseudo-element with its content/background set
 * by a raw <style> tag echoed in wp_head from live-only code (no local
 * file, not in Custom CSS & JS, not in Additional CSS — likely a snippet
 * added directly on production). Same selector/specificity as that rule,
 * so !important guarantees the override regardless of <style> tag order.
 */
.directorist-sold .property-block__thumb::after {
	background-color: #fa8b0c !important;
	border: 1px solid #ffffff !important;
}

/*
 * "Our Services" icon-box carousel (Buy with Us / Sell With Us): the
 * widget's "Active" per-item toggle is required by the carousel JS to pick
 * an initial slide (turning it off blanks the whole carousel — confirmed
 * by testing), but the theme also (ab)uses that same .active class to
 * permanently force the icon box's hover-reveal green fill (::before,
 * hidden by default via translateY(100%), shown via translateY(0) on
 * :hover/:focus/.active). That's what made the "active" item show a green
 * border baked in, unlike its sibling. Neutralize .active's effect on the
 * reveal so it matches the default (hidden/white-border) look, while a
 * real :hover or :focus still reveals it exactly as designed. 105% (not
 * 100%) — translateY(100%) left a 1-2px green sliver visible at the
 * bottom edge (sub-pixel rounding at the overflow:hidden clip boundary);
 * confirmed 105% clears it with no visible side effect.
 */
.iconbox-one__single.active::before {
	transform: translateY(105%) !important;
}
.iconbox-one__single.active:hover::before,
.iconbox-one__single.active:focus::before {
	transform: translateY(0) !important;
}