/* =========================================================
   Hill Pest Control and Cleaning — Custom Theme Styles
   Built on Bootstrap 5
   ========================================================= */

:root {
	--brand-blue: #14508f;
	--brand-blue-dark: #0b3766;
	--brand-blue-light: #2e86de;
	--brand-green: #1c8a3e;
	--brand-green-dark: #146a2f;
	--brand-green-light: #3fb15c;
	--brand-red: #e31e24;
	--brand-dark: #0e2233;
	--brand-ink: #16324a;
	--brand-light: #f5f9f7;
	--brand-muted: #5c7182;
	--radius-lg: 18px;
	--radius-md: 12px;
	--shadow-soft: 0 10px 30px rgba(14, 34, 51, 0.08);
	--shadow-strong: 0 20px 45px rgba(14, 34, 51, 0.16);
	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

body {
	font-family: var(--font-body);
	color: var(--brand-ink);
	background: #fff;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--brand-dark);
	font-weight: 700;
}

a {
	color: var(--brand-blue);
	transition: color .2s ease;
}
a:hover {
	color: var(--brand-green);
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 0;
	background: var(--brand-green);
	color: #fff;
	padding: 10px 18px;
	z-index: 2000;
}
.skip-link:focus {
	top: 0;
}

img { max-width: 100%; height: auto; }

.text-brand-green { color: var(--brand-green) !important; }
.text-brand-blue { color: var(--brand-blue) !important; }

section { position: relative; }
.py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; }

.eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	font-size: .8rem;
	color: var(--brand-green);
	margin-bottom: .5rem;
}

.section-title {
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	margin-bottom: 1rem;
}

.section-heading { margin-bottom: 2.5rem; }

.link-more {
	color: var(--brand-blue);
	font-weight: 600;
}
.link-more i { transition: transform .2s ease; display: inline-block; }
.link-more:hover i { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
	border-radius: 50px;
	font-weight: 600;
	padding: .7rem 1.6rem;
	transition: all .25s ease;
}
.btn-brand-green {
	background: linear-gradient(135deg, var(--brand-green-light), var(--brand-green-dark));
	color: #fff;
	border: none;
	box-shadow: 0 10px 25px rgba(28, 138, 62, .35);
}
.btn-brand-green:hover {
	background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(28, 138, 62, .45);
}
.btn-outline-light {
	border: 2px solid rgba(255,255,255,.7);
	color: #fff;
}
.btn-outline-light:hover {
	background: #fff;
	color: var(--brand-blue-dark);
}
.btn-outline-brand-blue {
	border: 2px solid var(--brand-blue);
	color: var(--brand-blue);
	background: transparent;
}
.btn-outline-brand-blue:hover {
	background: var(--brand-blue);
	color: #fff;
}

/* ---------- Topbar ---------- */
.topbar {
	background: var(--brand-dark);
	color: #cfe3ef;
	font-size: .85rem;
}
.topbar a {
	color: #cfe3ef;
	margin-right: 1.25rem;
	text-decoration: none;
}
.topbar a:last-child { margin-right: 0; }
.topbar a:hover { color: var(--brand-green-light); }
.topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	margin-left: .4rem;
}
.topbar-social a:hover { background: var(--brand-green); color: #fff; }

/* ---------- Header / Navbar ---------- */
.site-header {
	background: #fff;
	box-shadow: 0 2px 18px rgba(14, 34, 51, .08);
	z-index: 1030;
}
.navbar { padding-top: .6rem; padding-bottom: .6rem; }
.navbar-brand {
	display: inline-flex;
	align-items: center;
	margin-right: 1rem;
}
.navbar-brand .custom-logo-link { display: inline-flex; align-items: center; }
.navbar-brand img,
.navbar-brand .custom-logo {
	max-height: 56px;
	width: auto;
	height: auto;
}

.btn-quote {
	flex-shrink: 0;
	white-space: nowrap;
}

.navbar-nav .nav-link {
	font-weight: 600;
	color: var(--brand-ink);
	padding: .6rem 1rem !important;
	position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
	color: var(--brand-green);
}
.navbar-nav .dropdown-menu {
	border: none;
	box-shadow: var(--shadow-soft);
	border-radius: var(--radius-md);
	padding: .5rem;
}
.navbar-nav .dropdown-item {
	border-radius: 8px;
	padding: .5rem .75rem;
	font-weight: 500;
}
.navbar-nav .dropdown-item:hover { background: var(--brand-light); color: var(--brand-green); }

/* ---------- Hero ---------- */
.hero {
	background-image: linear-gradient(120deg, rgba(11,55,102,.90) 0%, rgba(20,80,143,.82) 55%, rgba(20,106,53,.88) 130%), url('../img/hero-banner.jpg');
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 6.5rem 0 6rem;
	position: relative;
	overflow: hidden;
}
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.hero::before { width: 480px; height: 480px; top: -180px; right: -120px; }
.hero::after { width: 320px; height: 320px; bottom: -140px; right: 18%; background: rgba(28,138,62,.18); }

.badge-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	padding: .5rem 1.1rem;
	border-radius: 50px;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: 1.4rem;
	backdrop-filter: blur(4px);
}

.hero-title {
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	line-height: 1.15;
	color: #fff;
	margin-bottom: 1.3rem;
}
.hero-lead {
	color: rgba(255,255,255,.88);
	font-size: 1.1rem;
	max-width: 640px;
	margin-bottom: 2rem;
}
.hero-stats { max-width: 560px; }
.hero-stats .stat-num {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
}
.hero-stats .stat-label {
	display: block;
	font-size: .8rem;
	color: rgba(255,255,255,.75);
}

/* ---------- Why cards ---------- */
.why-card {
	background: #fff;
	border: 1px solid rgba(14,34,51,.06);
	border-radius: var(--radius-md);
	padding: 1.1rem 1rem;
	display: flex;
	align-items: center;
	gap: .8rem;
	height: 100%;
	box-shadow: var(--shadow-soft);
	transition: transform .2s ease;
}
.why-card:hover { transform: translateY(-4px); }
.why-card i {
	font-size: 1.4rem;
	color: var(--brand-green);
	flex-shrink: 0;
}
.why-card span { font-weight: 600; font-size: .95rem; }

.section-welcome { background: var(--brand-light); }

/* ---------- Services ---------- */
.service-tabs .nav-link {
	border-radius: 50px;
	font-weight: 700;
	padding: .7rem 1.6rem;
	color: var(--brand-ink);
	background: var(--brand-light);
	margin: 0 .3rem;
}
.service-tabs .nav-link.active {
	background: linear-gradient(135deg, var(--brand-green-light), var(--brand-green-dark));
	color: #fff;
}

.service-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 2rem 1.6rem;
	height: 100%;
	box-shadow: var(--shadow-soft);
	border: 1px solid rgba(14,34,51,.05);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	display: flex;
	flex-direction: column;
}
.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-strong);
}
.service-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--brand-green-light), var(--brand-green-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	color: #fff;
	margin-bottom: 1.2rem;
}
.service-icon-blue {
	background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue-dark));
}
.service-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.service-card p { color: var(--brand-muted); margin-bottom: 1.25rem; font-size: .95rem; flex-grow: 1; }
.service-card-btn { align-self: flex-start; margin-top: auto; }

/* ---------- Advantage ---------- */
.section-advantage {
	background: linear-gradient(120deg, var(--brand-dark), var(--brand-blue-dark));
	color: #fff;
}
.advantage-card {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius-md);
	padding: 1.2rem;
	height: 100%;
}
.advantage-card i { font-size: 1.6rem; color: var(--brand-green-light); margin-bottom: .6rem; display: block; }
.advantage-card p { margin: 0; color: rgba(255,255,255,.85); font-weight: 500; }

/* ---------- Process ---------- */
.process-card {
	padding: 1.8rem 1.2rem;
	height: 100%;
	position: relative;
}
.process-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2.2rem;
	color: rgba(28,138,62,.15);
	display: block;
	margin-bottom: -1.2rem;
}
.process-card i {
	font-size: 1.8rem;
	color: var(--brand-blue);
	margin-bottom: .8rem;
	display: block;
}
.process-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.process-card p { color: var(--brand-muted); font-size: .9rem; margin: 0; }

/* ---------- Testimonials ---------- */
.section-testimonials { background: var(--brand-light); }
.testimonial-card {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 2.5rem;
	text-align: center;
	max-width: 700px;
}
.hillpest-stars { color: #f5a623; margin-bottom: 1rem; font-size: 1.1rem; }
.testimonial-quote { font-size: 1.15rem; font-style: italic; color: var(--brand-ink); margin-bottom: 1.3rem; }
.testimonial-name { margin-bottom: 0; font-size: 1rem; }
.testimonial-role { color: var(--brand-muted); font-size: .85rem; }
.carousel-dots button {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(14,34,51,.2);
	border: none;
	margin: 0 4px;
	padding: 0;
}
.carousel-dots button.active { background: var(--brand-green); }

/* ---------- Service area ---------- */
.area-list li {
	font-weight: 600;
	padding: .3rem 0;
}
.area-list i { color: var(--brand-green); margin-right: .4rem; }
.map-embed {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

/* ---------- FAQ ---------- */
.accordion-item {
	border: none;
	margin-bottom: .8rem;
	border-radius: var(--radius-md) !important;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}
.accordion-button {
	font-weight: 700;
	color: var(--brand-dark);
	background: #fff;
}
.accordion-button:not(.collapsed) {
	background: var(--brand-light);
	color: var(--brand-green-dark);
	box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button::after { flex-shrink: 0; }

/* ---------- CTA bands ---------- */
.cta-band, .section-final-cta {
	background: linear-gradient(120deg, var(--brand-green-dark), var(--brand-blue-dark));
	color: #fff;
}
.cta-band h2, .section-final-cta h2 { color: #fff; }
.cta-band p, .section-final-cta p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--brand-dark);
	color: rgba(255,255,255,.75);
}
.footer-brand {
	background: #fff;
	border-radius: var(--radius-md);
	padding: .7rem 1.1rem;
}
.footer-logo { height: 46px; width: auto; display: block; }
.footer-about { color: rgba(255,255,255,.65); font-size: .92rem; }
.footer-heading {
	color: #fff;
	font-size: 1.05rem;
	margin-bottom: 1.2rem;
	position: relative;
	padding-bottom: .6rem;
}
.footer-heading::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 42px; height: 3px;
	background: var(--brand-green-light);
	border-radius: 3px;
}
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
	color: rgba(255,255,255,.65);
	text-decoration: none;
	font-size: .92rem;
}
.footer-links a:hover { color: var(--brand-green-light); padding-left: 4px; }
.footer-contact li {
	display: flex;
	gap: .6rem;
	margin-bottom: .9rem;
	font-size: .9rem;
	color: rgba(255,255,255,.72);
}
.footer-contact i { color: var(--brand-green-light); margin-top: .2rem; }
.footer-contact a { color: rgba(255,255,255,.85); }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	margin-right: .5rem;
}
.footer-social a:hover { background: var(--brand-green); }
.footer-bottom {
	background: rgba(0,0,0,.25);
	font-size: .85rem;
	color: rgba(255,255,255,.6);
}

.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--brand-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-strong);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .3s ease;
	z-index: 1040;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brand-green-dark); color: #fff; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
	background: linear-gradient(120deg, var(--brand-blue-dark), var(--brand-dark));
	color: #fff;
	padding: 3.5rem 0 3rem;
	text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: .6rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-hero-subtitle { color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto; }
.page-hero-post { text-align: left; }
.post-meta-hero { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .8rem; color: rgba(255,255,255,.8); font-size: .9rem; }
.post-meta-hero i { margin-right: .3rem; }

.hillpest-breadcrumbs .breadcrumb {
	background: transparent;
	justify-content: center;
	margin: 0;
}
.page-hero-post .hillpest-breadcrumbs .breadcrumb { justify-content: flex-start; }
.breadcrumb-item, .breadcrumb-item a { color: rgba(255,255,255,.75) !important; font-size: .85rem; }
.breadcrumb-item.active { color: #fff !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ---------- Page content ---------- */
.page-content h2, .entry-content h2 { margin-top: 2rem; font-size: 1.5rem; color: var(--brand-blue-dark); }
.page-content h3, .entry-content h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.page-content p, .entry-content p { color: var(--brand-ink); line-height: 1.75; }
.page-content ul, .entry-content ul { line-height: 1.9; }

/* ---------- Contact page ---------- */
.contact-info-list li { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.contact-info-list i {
	width: 46px; height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--brand-light);
	color: var(--brand-green);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
}
.contact-info-list p { margin: 0; color: var(--brand-muted); }
.contact-social a { background: var(--brand-light); color: var(--brand-blue); }
.contact-social a:hover { background: var(--brand-green); color: #fff; }

.contact-form-card {
	background: var(--brand-light);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-soft);
}
.contact-form-card .form-control,
.contact-form-card .form-select {
	border-radius: 10px;
	border: 1px solid rgba(14,34,51,.12);
	padding: .7rem .9rem;
}
.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 .2rem rgba(28,138,62,.15);
}

/* Contact Form 7 markup */
.contact-form-card .wpcf7-form-control-wrap {
	display: block;
	margin-top: .35rem;
}
.contact-form-card .wpcf7-not-valid-tip {
	display: block;
	color: var(--brand-red);
	font-size: .82rem;
	margin-top: .3rem;
}
.contact-form-card .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--brand-red);
}
.contact-form-card .wpcf7-response-output {
	border-radius: 10px;
	padding: .9rem 1.1rem;
	margin: 0 0 1.2rem;
	font-size: .92rem;
	border: 1px solid transparent;
}
.contact-form-card form.sent .wpcf7-response-output {
	background: rgba(28,138,62,.1);
	border-color: rgba(28,138,62,.3);
	color: var(--brand-green-dark);
}
.contact-form-card form.failed .wpcf7-response-output,
.contact-form-card form.aborted .wpcf7-response-output,
.contact-form-card form.spam .wpcf7-response-output {
	background: rgba(227,30,36,.08);
	border-color: rgba(227,30,36,.3);
	color: var(--brand-red);
}
.contact-form-card form.invalid .wpcf7-response-output {
	background: rgba(245,166,35,.12);
	border-color: rgba(245,166,35,.4);
	color: #8a5a00;
}
.contact-form-card .wpcf7-spinner {
	margin-left: .6rem;
}
.contact-form-card .wpcf7-quiz-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .92rem; }

/* ---------- Blog ---------- */
.blog-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
	border: 1px solid rgba(14,34,51,.05);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.blog-card-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16/10; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card-thumb img { transform: scale(1.06); }
.blog-card-cat {
	position: absolute;
	top: 12px; left: 12px;
	background: var(--brand-green);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 50px;
}
.blog-card-body { padding: 1.4rem; flex-grow: 1; display: flex; flex-direction: column; }
.blog-card-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--brand-muted); margin-bottom: .5rem; }
.blog-card-title { font-size: 1.1rem; margin-bottom: .6rem; }
.blog-card-title a { color: var(--brand-dark); text-decoration: none; }
.blog-card-title a:hover { color: var(--brand-green); }
.blog-card-excerpt { color: var(--brand-muted); font-size: .92rem; flex-grow: 1; margin-bottom: .8rem; }

.blog-sidebar .widget-title { border-bottom: 2px solid var(--brand-light); padding-bottom: .6rem; }
.widget-list li { margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px dashed rgba(14,34,51,.08); }
.widget-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.widget-list a { color: var(--brand-ink); text-decoration: none; font-size: .92rem; }
.widget-list a:hover { color: var(--brand-green); }
.cta-widget { background: var(--brand-light); border: none; }

.single-post-thumb img, .single-post-thumb { border-radius: var(--radius-lg); overflow: hidden; }
.comments-area .comment-list { list-style: none; padding: 0; }
.comment-form .form-control { border-radius: 10px; }

/* ---------- Error 404 ---------- */
.error-404-section { background: var(--brand-light); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px) {
	.navbar-collapse {
		background: #fff;
		padding: 1rem;
		border-radius: var(--radius-md);
		margin-top: .5rem;
		box-shadow: var(--shadow-soft);
	}
	.hero { padding: 5rem 0 4rem; text-align: center; }
	.hero-lead { margin-left: auto; margin-right: auto; }
	.hero-cta { justify-content: center; }
	.hero-stats { margin-left: auto; margin-right: auto; }
}

@media (max-width: 575.98px) {
	.hero-stats .stat-num { font-size: 1.25rem; }
	.contact-form-card { padding: 1.4rem; }
	.py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; }
}
