/*
 * Theme overrides — responsive/layout fixes found while testing the
 * built site against the vendor CSS (css/custom.css). Kept separate so
 * the vendor file never needs hand-editing.
 */

/*
 * Logo distortion fix: the vendor CSS sets `.navbar-brand img { width: … }`
 * but never sets a matching height, so the browser falls back to the
 * <img>'s HTML height attribute (from WordPress's own responsive image
 * sizing) as a literal pixel height — squashing/stretching any logo whose
 * aspect ratio doesn't happen to match. Explicit height:auto fixes it for
 * any logo file, at any aspect ratio.
 */
.navbar-brand img,
.footer-logo img,
.why-choose-item .icon-box img {
	height: auto;
}

/*
 * Pricing cards (.page-pricing/.pricing-item) and the "Why Choose Us"
 * pink cards (.choose-cards/.pink) both use the vendor's intentional
 * `position: sticky` + staggered `top` offset "deck of cards" scroll
 * effect (each later card slides over and mostly covers the one
 * before it as you scroll past — same technique on both). An earlier
 * pass here disabled that positioning, thinking the overlap was a bug;
 * it's the intended animation from the reference template, so both
 * are left exactly as the vendor CSS defines them — no override.
 * Only image sizing (further down this file) is adjusted.
 */

/*
 * Service icon-box images (Services page's 8-icon grid): the vendor CSS
 * sizes the icon-box at a fixed 100px tall with icons up to 120px wide,
 * but sets no height cap or object-fit on the <img> itself, so icons at
 * differing native sizes (some are square GIFs, others small PNGs)
 * render at wildly different sizes and can overflow the box —
 * inconsistent card heights and icons that look randomly sized next to
 * each other. Matching the vendor's own intended box (100px tall, up to
 * 120px wide) with object-fit:contain keeps every icon the same visual
 * size without shrinking them below what the design calls for.
 */
.service-item .icon-box img {
	width: auto;
	height: 100px;
	max-width: 120px;
	object-fit: contain;
}
.service-noida {
	align-items: stretch;
}

/*
 * About page certificate image: the vendor CSS has no rule for
 * `.certificate` at all, and the certificate scan itself is a large
 * portrait image (1400×1920) — with only the global `img{max-width:100%}`
 * constraining it, it renders very tall next to the (much shorter) text
 * column, unbalancing the layout. Capping its height and centering it
 * keeps the full certificate visible without it dominating the section.
 */
.certificate {
	display: flex;
	justify-content: center;
}
.certificate img {
	max-height: 480px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
@media (max-width: 767px) {
	.certificate {
		margin-top: 30px;
	}
}

/*
 * Single Blog/News article featured image: the vendor CSS never
 * constrains `.service-featured-image img` beyond the global
 * `max-width:100%`, so an image renders at whatever native aspect
 * ratio it happens to have — inconsistent (and sometimes very tall)
 * depending on the source photo, unlike the archive cards which are
 * cropped to a consistent ratio. Matching that same landscape-banner
 * treatment here keeps every article's header image the same shape.
 */
.service-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

/*
 * Blog search icon: the vendor markup/CSS use Font Awesome PRO's Light
 * style (`fal fa-search`), but only the Free package is bundled with
 * this theme (Pro requires a paid license/kit). `fal` has no matching
 * glyph in the Free font, so it rendered as an empty box. Swapped the
 * icon to the equivalent Solid style (`fas`, available in Free) and
 * mirrored the vendor's `.fal.fa-search` positioning rule for it.
 */
.blog-filter .search .blog-search-submit {
	background: none;
	border: 0;
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.blog-filter .search input {
	padding-right: 45px;
}

/* Empty (unfilled) star in a rating — see oxa_star_rating(). */
.oxa-star-empty {
	color: #d9d9d9;
}

/*
 * Home page: three unconstrained-image spots, same root cause as the
 * Services icons and About certificate above — the vendor CSS sizes the
 * surrounding box/decoration but never the <img> itself, so each
 * renders at its own native size/aspect ratio depending on the source
 * file, looking inconsistent (or, for the pricing cars, oddly cropped)
 * from card to card.
 */

/* "Who we are" feature icons (Fair & Instant Cash / Trusted Car Scrap / Eco-Friendly). */
.about-trusted-booking .icon-box img {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* "Why Choose Us" pink cards' illustration images. */
.card-img {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}
.card-img img {
	height: 140px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/*
 * "LIMITED OFFER" ribbon (Services page offer cards): the vendor CSS
 * constrains the `.offer-tag` container to 180px wide but never sets a
 * matching size on the <img> inside it — with no CSS height rule, the
 * browser falls back to WordPress's literal HTML height attribute
 * (the source file's native height) instead of scaling it down with
 * the width, stretching the ribbon tall enough to cover the card's
 * title/price text beneath it.
 */
.offer-tag img {
	width: 100%;
	height: auto;
}

/* Pricing-eligibility card images (Private/Commercial vehicle). object-fit:
   contain rather than cover — these are informational photos, not a crop
   target, so nothing should be cut off. */
.pricing-item-image img {
	height: 160px;
	width: auto;
	object-fit: contain;
}
@media (max-width: 991px) {
	.pricing-item-image img {
		height: 130px;
	}
}

/*
 * Blog/News comment form: the supplied HTML never included a styled
 * comment section (this demo template doesn't ship one), so WordPress's
 * default comment_form() output was rendering with zero theme styling —
 * a plain browser textarea/inputs. Styled to match the site's existing
 * input/button look (same border-radius, accent color, spacing as the
 * CF7 forms elsewhere) rather than leaving it unstyled.
 */
#commentform {
	margin-top: 20px;
}
#commentform p {
	margin-bottom: 18px;
}
#commentform label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--divider-color, #e5e5e5);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
}
#commentform textarea {
	border-radius: 20px;
	resize: vertical;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--accent-color, #47b16a);
}
#commentform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
#commentform .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: 400;
}
#commentform #submit {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	text-transform: capitalize;
	background: var(--accent-color, #47b16a);
	color: #fff;
	border-radius: 100px;
	padding: 16px 32px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
#commentform #submit:hover {
	opacity: 0.9;
}
.comment-reply-title {
	margin-bottom: 10px;
}

/*
 * Page-header h1 fix: at narrow mobile widths, longer titles ("Become
 * Our Partner") slightly overflow their container because the vendor
 * CSS never sets white-space/wrapping on it. Allowing it to wrap keeps
 * long titles fully on-screen instead of clipping at the viewport edge.
 */
@media (max-width: 575px) {
	.page-header-box h1 {
		white-space: normal;
		overflow-wrap: break-word;
	}
}

/*
 * Floating call/WhatsApp buttons: fixed at the same bottom-right corner
 * as body text on narrow screens, covering the last couple of lines of
 * whatever content sits there (e.g. the workshop address list on
 * Contact / Become Our Partner). Nudge them so they don't overlap.
 */
@media (max-width: 575px) {
	.call-icon .float,
	.whatsapp-icon .float {
		width: 48px;
		height: 48px;
		font-size: 22px;
	}
	.call-icon .float {
		bottom: 90px;
		right: 16px;
	}
	.whatsapp-icon .float {
		right: 16px;
	}
}

/*
 * News archive cards: added a "Source: X" meta line and an excerpt
 * paragraph (see post-card.php) that the vendor CSS never accounted
 * for — style them to match the existing post-meta/content look.
 */
.post-item-content p {
	color: var(--text-light-color, #6a6a6a);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 10px;
}