/**
Theme Name: Inspiro Child
Theme URI: https://www.wpzoom.com/themes/inspiro/
Template: inspiro
Author: WPZOOM
Author URI: https://www.wpzoom.com/
Description: Child theme for Inspiro with SEO and customization improvements.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inspiro-child

Inspiro is based on Twenty Seventeen https://wordpress.org/themes/twentyseventeen/, (C) 2012-2020 Automattic, Inc.
Twenty Seventeen is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

/* Note: The CSS files are loaded from assets/css/ folder. */

/* ==========================================================================
   HEADER — Phone number in nav bar
   ========================================================================== */

.header-phone-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.3px;
	padding: 6px 14px;
	border-radius: 4px;
	background: rgba(11, 180, 170, 0.15);
	border: 1px solid rgba(11, 180, 170, 0.3);
	transition: background 0.2s, border-color 0.2s;
	margin-right: 10px;
	white-space: nowrap;
}

.header-phone-link:hover,
.header-phone-link:focus {
	background: #0bb4aa;
	border-color: #0bb4aa;
	color: #fff;
	text-decoration: none;
}

.header-phone-link svg {
	flex-shrink: 0;
}

/* Hide phone text on small screens, keep icon */
@media (max-width: 768px) {
	.header-phone-link span {
		display: none;
	}
	.header-phone-link {
		padding: 8px;
		margin-right: 6px;
	}
}

/* ==========================================================================
   HIDE "Home" PAGE TITLE ON FRONT PAGE
   ========================================================================== */

.home .entry-header,
.home.page .entry-header,
body.home article .entry-header {
	display: none !important;
}

/* ==========================================================================
   TRUST BAR — Stats strip below hero
   ========================================================================== */

section.trust-bar {
	background: #101010 !important;
	border-bottom: 3px solid #0bb4aa !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

section.trust-bar .inner-wrap {
	max-width: 1200px !important;
	margin: 0 auto !important;
	display: flex !important;
	justify-content: center !important;
	padding: 0 !important;
}

section.trust-bar .trust-item {
	flex: 1 !important;
	text-align: center !important;
	padding: 24px 16px !important;
	border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

section.trust-bar .trust-item:last-child {
	border-right: none !important;
}

section.trust-bar .trust-number {
	display: block !important;
	font-size: 1.75rem !important;
	font-weight: 800 !important;
	color: #0bb4aa !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
}

section.trust-bar .trust-label {
	display: block !important;
	font-size: 0.8rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	margin-top: 4px !important;
	font-weight: 500 !important;
}

@media (max-width: 600px) {
	section.trust-bar .inner-wrap {
		flex-wrap: wrap !important;
	}
	section.trust-bar .trust-item {
		flex: 0 0 50% !important;
		padding: 18px 12px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	}
	section.trust-bar .trust-item:nth-child(2) {
		border-right: none !important;
	}
	section.trust-bar .trust-item:nth-child(3),
	section.trust-bar .trust-item:nth-child(4) {
		border-bottom: none !important;
	}
	section.trust-bar .trust-number {
		font-size: 1.4rem !important;
	}
	section.trust-bar .trust-label {
		font-size: 0.7rem !important;
	}
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumb-nav {
	padding: 12px 0;
	font-size: 0.85rem;
	color: #6C6C77;
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.breadcrumb-nav .inner-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.breadcrumb-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.breadcrumb-nav li {
	display: flex;
	align-items: center;
}

.breadcrumb-nav li + li::before {
	content: "\203A";
	margin: 0 8px;
	color: #999;
}

.breadcrumb-nav a {
	color: #0bb4aa;
	text-decoration: none;
}

.breadcrumb-nav a:hover {
	text-decoration: underline;
}

.breadcrumb-nav [aria-current="page"] {
	color: #101010;
	font-weight: 500;
}

/* ==========================================================================
   PAGE CONTENT — Improved typography & spacing
   ========================================================================== */

.entry-content h1 {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: #101010;
	margin-bottom: 20px;
}

.entry-content h2 {
	font-size: 1.65rem;
	font-weight: 700;
	color: #101010;
	margin-top: 48px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid #0bb4aa;
}

.entry-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #222;
	margin-top: 32px;
	margin-bottom: 12px;
}

.entry-content p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #333;
	margin-bottom: 18px;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 24px;
	padding-left: 24px;
}

.entry-content li {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #333;
	margin-bottom: 8px;
}

.entry-content li strong {
	color: #101010;
}

/* ==========================================================================
   TABLES — Clean modern tables
   ========================================================================== */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 0.95rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	overflow: hidden;
}

.entry-content thead tr {
	background: #101010;
	color: #fff;
}

.entry-content th {
	padding: 14px 16px;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
}

.entry-content td {
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}

.entry-content tbody tr:hover {
	background: #f8fffe;
}

.entry-content tbody tr:last-child td {
	border-bottom: none;
}

/* ==========================================================================
   CTA BLOCKS — The dark CTA sections in content
   ========================================================================== */

.entry-content div[style*="background: #101010"],
.entry-content div[style*="background:#101010"] {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	margin-top: 48px !important;
	margin-bottom: 32px !important;
}

.entry-content div[style*="background: #101010"] h2,
.entry-content div[style*="background:#101010"] h2 {
	border-bottom: none;
	margin-top: 0;
	padding-bottom: 0;
	color: #fff;
}

.entry-content div[style*="background: #101010"] a[style*="background: #0bb4aa"],
.entry-content div[style*="background:#101010"] a[style*="background: #0bb4aa"] {
	transition: transform 0.2s, box-shadow 0.2s;
}

.entry-content div[style*="background: #101010"] a[style*="background: #0bb4aa"]:hover,
.entry-content div[style*="background:#101010"] a[style*="background: #0bb4aa"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(11, 180, 170, 0.4);
}

/* ==========================================================================
   SERVICE CARDS — For service page content grids
   ========================================================================== */

.service-card {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 32px 24px;
	text-align: center;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
	position: relative;
	overflow: hidden;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #0bb4aa;
	transform: scaleX(0);
	transition: transform 0.25s;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	border-color: #0bb4aa;
}

.service-card:hover::before {
	transform: scaleX(1);
}

.service-card h3 {
	margin-top: 16px;
	margin-bottom: 12px;
	font-size: 1.2rem;
}

.service-card p {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
}

.service-card a {
	display: inline-block;
	margin-top: 12px;
	color: #0bb4aa;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}

.service-card a:hover {
	color: #099e95;
}

/* Service grid layout */
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0;
}

@media (max-width: 900px) {
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 550px) {
	.service-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   TESTIMONIALS — Customer review cards
   ========================================================================== */

.testimonial-section {
	background: #f8f9fa;
	padding: 60px 0;
	margin: 48px 0;
}

.testimonial-section h2 {
	text-align: center;
	margin-bottom: 40px;
	border-bottom: none;
	font-size: 1.75rem;
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.testimonial-card {
	background: #fff;
	border-radius: 8px;
	padding: 28px 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	border-left: 3px solid #0bb4aa;
	position: relative;
}

.testimonial-card::before {
	content: '\201C';
	font-size: 3.5rem;
	color: #0bb4aa;
	opacity: 0.3;
	position: absolute;
	top: 8px;
	left: 16px;
	line-height: 1;
	font-family: Georgia, serif;
}

.testimonial-card p {
	font-style: italic;
	color: #444;
	line-height: 1.7;
	margin-bottom: 16px;
	padding-top: 12px;
}

.testimonial-author {
	font-weight: 700;
	color: #101010;
	font-size: 0.9rem;
}

.testimonial-role {
	color: #888;
	font-size: 0.8rem;
}

.testimonial-stars {
	color: #f5a623;
	font-size: 1rem;
	letter-spacing: 2px;
	margin-bottom: 6px;
}

@media (max-width: 900px) {
	.testimonial-grid {
		grid-template-columns: 1fr;
		max-width: 600px;
	}
}

/* ==========================================================================
   FOOTER — Professional redesign
   ========================================================================== */

#colophon {
	background: #0d0d0d;
	color: rgba(255, 255, 255, 0.75);
	padding-top: 0;
}

.footer-widgets {
	padding: 50px 0 30px;
}

.footer-widgets .widget {
	color: rgba(255, 255, 255, 0.7);
}

.footer-widgets .widget-title,
.footer-widgets h3 {
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #0bb4aa;
}

.footer-widgets a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-widgets a:hover {
	color: #0bb4aa;
}

.footer-widgets ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-widgets li {
	padding: 5px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-widgets li:last-child {
	border-bottom: none;
}

/* Footer grid layout — using #colophon for specificity over parent theme */
#colophon .footer-main {
	padding: 50px 0 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: #0d0d0d;
}

#colophon .footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

#colophon .footer-col h3 {
	color: #fff !important;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid #0bb4aa;
}

#colophon .footer-col p {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 0.9rem;
	line-height: 1.7;
	margin-bottom: 14px;
}

#colophon .footer-col strong {
	color: rgba(255, 255, 255, 0.9);
}

#colophon .footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#colophon .footer-col li {
	padding: 5px 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#colophon .footer-col li:last-child {
	border-bottom: none;
}

#colophon .footer-col a {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none;
	transition: color 0.2s;
}

#colophon .footer-col a:hover {
	color: #0bb4aa !important;
}

#colophon .footer-contact-info {
	font-size: 0.88rem;
	line-height: 1.9;
}

#colophon .footer-contact-info a {
	color: #0bb4aa !important;
}

#colophon .footer-contact-info a:hover {
	color: #fff !important;
}

#colophon .footer-cta-col .btn-primary,
#colophon .footer-cta-col .btn-outline {
	display: block;
	text-align: center;
	padding: 12px 20px;
	font-size: 0.9rem;
}

#colophon .footer-cta-col .btn-primary {
	background: #0bb4aa;
	color: #fff !important;
}

#colophon .footer-cta-col .btn-outline {
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #fff !important;
	background: transparent;
}

#colophon .footer-cta-col .btn-outline:hover {
	background: #fff;
	color: #101010 !important;
	border-color: #fff;
}

#colophon .site-info {
	padding: 20px 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#colophon .site-info .copyright {
	color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
	#colophon .footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 550px) {
	#colophon .footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

.site-footer-separator {
	border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   FLOATING MOBILE CTA — Sticky call button
   ========================================================================== */

.floating-cta {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	background: #0bb4aa;
	color: #fff;
	text-decoration: none;
	padding: 14px 20px;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(11, 180, 170, 0.4);
	font-weight: 700;
	font-size: 0.9rem;
	align-items: center;
	gap: 8px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.floating-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(11, 180, 170, 0.5);
	color: #fff;
	text-decoration: none;
}

.floating-cta svg {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.floating-cta {
		display: inline-flex;
	}
}

/* ==========================================================================
   BUTTONS — Global button polish
   ========================================================================== */

.entry-content a[style*="background: #0bb4aa"] {
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
	font-size: 1rem;
}

.entry-content a[style*="background: #0bb4aa"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(11, 180, 170, 0.4);
}

/* ==========================================================================
   WORDPRESS BLOCK BUTTONS — Override default Gutenberg button styles
   ========================================================================== */

.entry-content .wp-block-button.btn-primary .wp-block-button__link,
.entry-content .wp-block-button .wp-block-button__link.has-vivid-cyan-blue-background-color {
	background: #0bb4aa !important;
	color: #fff !important;
	padding: 14px 32px !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
	border: none !important;
}

.entry-content .wp-block-button.btn-primary .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link.has-vivid-cyan-blue-background-color:hover {
	background: #099e95 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(11, 180, 170, 0.4);
	color: #fff !important;
	text-decoration: none !important;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid #0bb4aa !important;
	color: #0bb4aa !important;
	background: transparent !important;
	padding: 12px 30px !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s !important;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #0bb4aa !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Generic .btn styles for any custom buttons */
.btn-primary {
	display: inline-block;
	background: #0bb4aa;
	color: #fff;
	padding: 14px 32px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
	border: none;
	cursor: pointer;
}

.btn-primary:hover {
	background: #099e95;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(11, 180, 170, 0.4);
	color: #fff;
	text-decoration: none;
}

.btn-outline {
	display: inline-block;
	border: 2px solid #0bb4aa;
	color: #0bb4aa;
	padding: 12px 30px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	transition: background 0.2s, color 0.2s;
	background: transparent;
	cursor: pointer;
}

.btn-outline:hover {
	background: #0bb4aa;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   GENERAL POLISH — Smooth transitions & modern feel
   ========================================================================== */

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* Better image handling */
.entry-content img {
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Strong tags in content */
.entry-content strong {
	color: #101010;
}

/* Links in content */
.entry-content a {
	color: #0bb4aa;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s, color 0.2s;
}

.entry-content a:hover {
	color: #099e95;
	border-bottom-color: #099e95;
}

/* FAQ sections — visually distinct */
.entry-content h3:has(+ p) {
	background: #f8f9fa;
	padding: 14px 18px;
	border-radius: 6px;
	border-left: 3px solid #0bb4aa;
	margin-top: 24px;
}

/* Pro tips */
.entry-content p > strong:first-child {
	color: #0bb4aa;
}

/* Horizontal rules */
.entry-content hr {
	border: none;
	height: 2px;
	background: linear-gradient(to right, #0bb4aa, transparent);
	margin: 40px 0;
}

/* Selection color */
::selection {
	background: rgba(11, 180, 170, 0.2);
	color: #101010;
}

/* Blockquotes */
.entry-content blockquote {
	border-left: 4px solid #0bb4aa;
	background: #f8fffe;
	padding: 20px 24px;
	margin: 28px 0;
	border-radius: 0 6px 6px 0;
	font-style: italic;
	color: #333;
}

/* ==========================================================================
   HERO SECTION — Improved overlay and typography
   ========================================================================== */

.site-branding .site-title {
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.site-branding .site-description {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Header CTA button glow */
.site-branding .button,
.site-branding a.button {
	box-shadow: 0 4px 15px rgba(11, 180, 170, 0.3);
	transition: transform 0.2s, box-shadow 0.2s;
}

.site-branding .button:hover,
.site-branding a.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(11, 180, 170, 0.5);
}

/* ==========================================================================
   NAVIGATION — Subtle polish
   ========================================================================== */

.navbar .nav > li > a {
	transition: color 0.2s;
	position: relative;
}

.navbar .nav > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: #0bb4aa;
	transition: width 0.25s, left 0.25s;
}

.navbar .nav > li > a:hover::after,
.navbar .nav > li.current-menu-item > a::after {
	width: 100%;
	left: 0;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
	.entry-content h1 {
		font-size: 1.75rem;
	}
	.entry-content h2 {
		font-size: 1.35rem;
		margin-top: 36px;
	}
	.entry-content h3 {
		font-size: 1.1rem;
	}
	.entry-content p,
	.entry-content li {
		font-size: 1rem;
	}

	/* Make tables scrollable on mobile */
	.entry-content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Adjust body bottom padding for floating CTA on mobile */
@media (max-width: 768px) {
	body {
		padding-bottom: 70px;
	}
}