/*
Theme Name:        Silicon Child
Theme URI:         https://themeforest.net/user/madrasthemes/portfolio
Author:            MadrasThemes
Author URI:        https://themeforest.net/user/madrasthemes/
Description:       Child Theme of Silicon Multipurpose Business Theme. Silicon is a multipurpose WordPress Theme with focus in Technology Business niches.
Requires at least: WordPress 5.0
Template:          silicon
Version:           1.6.4.0
License:           GNU General Public License v3 or later
License URI:       LICENSE
Text Domain:       silicon-child
Tags:              two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, rtl-language-support, footer-widgets, sticky-post, theme-options
*/

/* Blog card excerpts: clamp to 2 lines, sitewide (main Insights page + all category/tag archives) */
.si-article .card-body p {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Category/tag/archive header: stack title above the category-dropdown + search row on mobile,
   matching how the same row already behaves on the main Insights page. */
@media (max-width: 767.98px) {
	.page-header > .d-flex {
		flex-direction: column;
		align-items: stretch !important;
	}
	.page-header > .d-flex > .page-title {
		margin-bottom: 1rem !important;
	}
	.page-header .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.page-header .row > [class*="col-"]:not(:last-child) {
		margin-bottom: 0.75rem;
	}
}

/* Single blog post: the breadcrumb's last item repeats the H1 title right below it - drop it,
   keep the path (Home > Category) since that's still useful. */
body.single .breadcrumb-item.active {
	display: none;
}

/* ============================================================
   SP-011C — Homepage Mobile Optimization
   Extended through tablet width (768px) per user request 2026-09-16
   ============================================================ */
@media (max-width: 768px) {

	/* Hero: reduce the oversized headline so it doesn't dominate the whole first screen */
	.elementor-element-191a99a .elementor-heading-title {
		font-size: 1.75rem !important;
		line-height: 1.3 !important;
	}

	/* Hero: hide the decorative image cluster - purely visual, competes with the message */
	.elementor-element-2aca7fdc {
		display: none !important;
	}

	/* Hero + "AI-Powered Care" section: give paired buttons breathing room instead of
	   sitting flush against each other */
	.elementor-element-11809ce,
	.elementor-element-5b16fa2 {
		gap: 0.75rem !important;
	}

	/* De-emphasize the secondary action in each CTA pair - both currently use identical
	   solid styling, giving no visual hierarchy between primary and secondary */
	.elementor-element-ae52fca .btn-primary,
	.elementor-element-c8eb3b3 .btn-primary {
		background-color: transparent !important;
		border: 2px solid #6366f1 !important;
		color: #6366f1 !important;
	}

	/* "Get in Touch" CTA: match the full-width, consistent sizing every other mobile CTA
	   button already has */
	.elementor-element-d54bdad .btn {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
}

/* ============================================================
   Global heading + footer typography cleanup
   ============================================================ */

/* Heading line breaks: avoid a single orphaned word wrapping onto its own last line.
   text-wrap: balance is supported in current Chrome/Edge/Safari; browsers that don't
   recognize it just ignore the line and keep normal wrapping (safe no-op fallback). */
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
	text-wrap: balance;
}

/* Footer legal links: wrap gracefully and stay centered on narrow screens instead of
   leaving the last link isolated with uneven spacing. */
.site-footer div[aria-label="Legal and governance"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0.75rem;
}
.site-footer div[aria-label="Legal and governance"] a {
	margin: 0;
}

/* ============================================================
   SP-011D — What We Do
   ============================================================ */
@media (max-width: 768px) {
	/* Hero: hide the decorative photo collage, same treatment as the homepage hero -
	   it's purely visual and was pushing real content down on mobile. */
	.elementor-element-14ce334a {
		display: none !important;
	}

	/* "Smart Solutions" section heading: the ElementsKit widget's "extra title" text
	   ("Bold steps forward.") renders at a fixed 74px with no mobile override, causing
	   it to overlap itself on narrow screens. */
	.elementor-element-4c1b00e8 .ekit-heading__extra-title,
	.elementor-element-4c1b00e8 p {
		font-size: 2rem !important;
		line-height: 1.25 !important;
	}

	/* "Smart Solutions" section: its container has a fixed 100px top/bottom padding
	   (a desktop value with no mobile override), leaving ~100-150px of dead white
	   space above the heading and below the last card. Match the 40px vertical
	   rhythm the rest of the page already uses on mobile. */
	.elementor-element-5f4e5ded > .e-con-inner {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Contact form: field labels render at 32px font but 19px line-height (a
	   theme/WPForms style conflict), so any label that wraps to 2 lines
	   (e.g. "Comment or Message") overlaps itself. */
	#wpforms-8423 .wpforms-field-label {
		line-height: 1.3 !important;
		margin-bottom: 10px !important;
	}

	/* Hero: give the logo/nav bar clear separation from the hero content instead of
	   the headline starting almost flush against it. */
	.elementor-element-34bb618d {
		padding-top: 48px !important;
	}

	/* Hero headline: was rendering at the same 30px size as the subheadline below it,
	   competing with the logo for visual weight. Scale it down to sit comfortably. */
	.elementor-element-5c4282ca .elementor-heading-title {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
	}

	/* Hero subheadline: was the SAME 30px size as the headline (just a lighter weight),
	   giving it equal visual prominence instead of reading as secondary copy. Shrink it
	   drastically and bump the weight so it stays legible against the mint background. */
	.elementor-element-475eeeae .elementor-heading-title {
		font-size: 1rem !important;
		line-height: 1.5 !important;
		font-weight: 500 !important;
	}

	/* Keep spacing between headline / subheadline / CTA consistent now that the
	   subheadline's own font-size (and therefore its natural line-height spacing)
	   has shrunk. */
	.elementor-element-475eeeae {
		margin-top: 16px !important;
	}
	.elementor-element-6d6e7a6 {
		margin-top: 16px !important;
	}

	/* CTA button: ensure semi-bold weight (matches the site's other primary CTAs). */
	.elementor-element-6d6e7a6 .silicon-button {
		font-weight: 600 !important;
	}
}