/**
 * Custom CSS for Kadence Child Theme.
 *
 * Loaded via inc/enqueue.php AFTER Kadence's own CSS, so selectors here
 * can override parent styles using normal specificity — avoid !important
 * unless there's truly no other way.
 *
 * Organize with comment section headers as this file grows, e.g.:
 *
 * ============================
 * 1. Global / Base
 * ============================
 *
 * ============================
 * 2. Header
 * ============================
 *
 * ============================
 * 3. Footer
 * ============================
 *
 * ============================
 * 4. Page/Post specific
 * ============================
 */



/* ==========================================================================
   Mobile Header
   ========================================================================== */


@media (max-width: 719px) {

  .site-bottom-header-inner-wrap.site-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header-bottom-section-left,
  .site-header-bottom-section-right {
    width: auto;
    flex: 0 0 auto;
  }

  .site-branding img,
  .brand.has-logo-image img {
    max-width: 140px;
    height: auto;
    margin-left: 20px;
    margin-bottom: -20px;
  }

  .mobile-toggle-open-container {
    margin-right: 10px;
    margin-bottom: -20px;
    flex: 0 0 auto;
  }
	
   #mobile-drawer .drawer-content{
        width: 100%;
        max-width: 100%;
        padding: 24px;
   }
}


/* =========================
   STANDARD PAGE
========================= */

.standard-banner{
    position:relative;
    width:100%;
    height:clamp(220px, 22vw, 420px);

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.standard-banner-no-image{
    background:#111827;
}

.standard-banner-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding:30px 20px;

    background:rgba(0,0,0,.45);
}

.standard-banner-content{
    width:100%;
    max-width:1200px;
    margin:auto;
}

.standard-banner-title{
    color:#fff;
    margin:0 0 12px;
    font-size:clamp(32px, 4vw, 52px);
    font-weight:700;
    line-height:1.15;
}

.standard-breadcrumbs{
    color:#fff;
    font-size:15px;
}

.standard-breadcrumbs a{
    color:#fff;
    text-decoration:none;
    opacity:.9;
    transition:.25s;
}

.standard-breadcrumbs a:hover{
    opacity:1;
}

.breadcrumb-separator{
    margin:0 8px;
    opacity:.7;
}

/* =========================
   CONTENT
========================= */

.standard-content-wrap{
    padding:70px 20px;
}

.standard-content-inner{
    max-width:1200px;
    margin:0 auto;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

    .standard-banner{
        height:300px;
    }

    .standard-banner-title{
        font-size:42px;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .standard-banner{
        height:240px;
        min-height:240px;
        background-position:center center;
    }

    .standard-banner-overlay{
        padding:20px;
    }

    .standard-banner-title{
        font-size:30px;
        margin-bottom:10px;
    }

    .standard-breadcrumbs{
        font-size:13px;
        line-height:1.5;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:480px){

    .standard-banner{
        height:220px;
        min-height:220px;
    }

    .standard-banner-title{
        font-size:26px;
    }

    .standard-breadcrumbs{
        font-size:12px;
    }

}


/* ==========================================================================
   Service Page Template Styles
   ========================================================================== */

/* ---- Banner ---- */
.service-banner {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 2; /* thin horizontal banner, 2:8 ratio */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-banner-noimg {
	background-color: #111111;
}

.service-banner-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}

.service-banner-title {
	/* This is the main page heading — stays Urbanist. Everything else uses Open Sans. */
	font-family: 'Urbanist', sans-serif;
	color: #ffffff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.service-breadcrumbs {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 12px;
}

.service-breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.service-breadcrumbs a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.service-breadcrumb-sep {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.5);
}

.service-breadcrumb-current {
	color: #ffffff;
	font-weight: 600;
}

@media (max-width: 768px) {
	.service-banner {
		aspect-ratio: 4 / 3;
	}
	.service-banner-title {
		font-size: 30px;
	}
	.service-breadcrumbs {
		display: none;
	}
}

/* ---- Content Layout ---- */
.service-content-wrap {
	background-color: #F8FAFC;
	padding: 60px 20px;
}

.service-content-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	gap: 48px;
	align-items: flex-start;
	justify-content: space-between;
}

.service-content-left {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Open Sans', sans-serif;
	color: #555555;
	font-size: 18px;
	line-height: 1.7;
}

.service-content-left h1,
.service-content-left h2,
.service-content-left h3,
.service-content-left h4 {
	font-family: 'Open Sans', sans-serif;
	color: #111111;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0.6em;
	margin-bottom: 0.4em;
}

.service-content-left h2 {
	font-family: 'urbanist';
	font-size: 32px;
	margin-top: 46px;
	margin-bottom: 24px;
}

.service-content-left h3 {
	font-size: 22px;
}

/* ---- Contact Form Box ---- */
.service-content-right {
	flex: 0 0 360px;
	width: 360px;
	max-width: 100%;
}

.service-form-box {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 32px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.service-form-title {
	font-family: 'Open Sans', sans-serif;
	color: #111111;
	font-size: 22px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 20px;
}

/* Contact Form 7 field styling to match style guide */

/* Hide the visible label text (kept in HTML for accessibility/CF7 validation,
   but visually hidden since we're using placeholders instead) */
.service-form-box .wpcf7-form label > span:first-child,
.service-form-box .wpcf7-form .wpcf7-form-label-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.service-form-box .wpcf7-form p {
	margin: 0 0 16px 0;
}

.service-form-box .wpcf7-form input[type="text"],
.service-form-box .wpcf7-form input[type="email"],
.service-form-box .wpcf7-form input[type="tel"],
.service-form-box .wpcf7-form select,
.service-form-box .wpcf7-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #111111;
	box-sizing: border-box;
}

.service-form-box .wpcf7-form input::placeholder,
.service-form-box .wpcf7-form textarea::placeholder {
	font-family: 'Open Sans', sans-serif;
	color: #9ca3af;
}

.service-form-box .wpcf7-form textarea {
	min-height: 110px;
	resize: vertical;
}

.service-form-box .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23555555' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.service-form-box .wpcf7-form select:invalid,
.service-form-box .wpcf7-form select option[value=""] {
	color: #9ca3af;
}

.service-form-box .wpcf7-form input[type="file"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #555555;
	box-sizing: border-box;
	background-color: #fafafa;
}

.service-form-box .wpcf7-form input[type="submit"] {
	background-color: #19D06F;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 12px 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.service-form-box .wpcf7-form input[type="submit"]:hover {
	background-color: #1595DD;
}

/* ---- Responsive: stack on tablet/mobile ---- */
@media (max-width: 900px) {
	.service-content-inner {
		flex-direction: column;
		align-items: stretch; /* FIX: prevents children from shrink-fitting and hugging one side once the layout goes vertical */
	}
	.service-content-right {
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================================================
   Service Page — FAQ / More Services / CTA additions
   ========================================================================== */

.service-section-heading {
	font-family: 'urbanist', sans-serif;
	color: #111111;
	font-size: 28px;
	font-weight: 700;
	margin-top: 56px;
	margin-bottom: 20px;
}

/* ---- FAQ Section ---- */
.service-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-faq-item {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 4px 20px;
}

.service-faq-question {
	font-family: 'Open Sans', sans-serif;
	color: #111111;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	padding: 16px 28px 16px 0;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.service-faq-question::-webkit-details-marker {
	display: none;
}

.service-faq-question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 14px;
	font-size: 22px;
	font-weight: 700;
	color: #1159AF;
	transition: transform 0.2s ease;
}

.service-faq-item[open] .service-faq-question::after {
	transform: rotate(45deg);
}

.service-faq-answer {
	font-family: 'Open Sans', sans-serif;
	color: #555555;
	font-size: 16px;
	line-height: 1.7;
	padding-bottom: 18px;
}

.service-faq-answer p:first-child {
	margin-top: 0;
}

.service-faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---- More Services Section ---- */
.service-more-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service-more-card {
	display: block;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* FIX: query now fetches 4 posts (see PHP note below) so mobile can show
   a 2x2 grid, but desktop/tablet should keep showing only 3. Hide the 4th
   here, then reveal it inside the 700px breakpoint. */
.service-more-card:nth-child(4) {
	display: none;
}

.service-more-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.service-more-card-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: #e5e7eb;
}

.service-more-card-img-noimg {
	background-color: #111111;
}

.service-more-card-title {
	font-family: 'Open Sans', sans-serif;
	color: #111111;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	padding: 14px 16px;
}

/* ---- CTA Section (above footer) ---- */
.service-cta-section {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.service-cta-overlay {
	background-color: rgba(17, 89, 175, 0.8); /* #1159AF at 80% opacity */
	padding: 60px 20px;
}

.service-cta-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.service-cta-title {
	font-family: 'Urbanist', sans-serif;
	color: #ffffff;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px 0;
}

.service-cta-subtitle {
	font-family: 'Open Sans', sans-serif;
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	margin: 0;
}

.service-cta-buttons {
	display: flex;
	gap: 14px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.service-cta-btn {
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 26px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform .25s ease,
		background-color .25s ease,
		box-shadow .25s ease,
		opacity .25s ease;
}

.service-cta-btn-primary {
	background-color: #19D06F;
	color: #ffffff;
}

.service-cta-btn-secondary {
	background-color: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.8);
}

/* ---- CTA Button Grow Effect ---- */
.service-cta-btn:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	color: #ffffff;
}

/* Prevent button jump while clicking */
.service-cta-btn:active {
	transform: scale(1.02);
}

/* ==========================================================================
   Responsive breakpoints (merged & de-duplicated — the original file had
   two separate, and one unclosed, 700px blocks; consolidated into one)
   ========================================================================== */

@media (max-width: 900px) {
	.service-content-inner {
		flex-direction: column;
	}
	.service-content-right {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 700px) {

	.service-content-left h2 {
		font-family: 'urbanist';
		font-size: 24px;
	}
	
	.service-more-card-title {
	font-size: 13px;
	padding: 10px 12px;
}

	.service-section-heading {
		font-size: 22px;
		margin-top: 36px;
		margin-bottom: 18px;
	}

	/* FAQ */
	.service-faq-question {
		font-size: 15px;
		padding: 14px 24px 14px 0;
	}

	.service-faq-question::after {
		font-size: 20px;
		top: 12px;
	}

	.service-faq-answer {
		font-size: 14px;
		line-height: 1.65;
	}

	/* More Services: 2x2 grid, 4th card revealed */
	.service-more-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-more-card:nth-child(4) {
		display: block;
	}

	/* CTA buttons */
	.service-cta-inner {
		flex-direction: column;
		text-align: center;
	}

	.service-cta-title {
		font-size: 26px;
	}

	.service-cta-buttons {
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.service-cta-btn {
		min-width: 220px;
		text-align: center;
	}

}



/* ==========================================
   QUOTE POPUP (Simplified)
========================================== */

.quote-popup{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.quote-popup.active{
    opacity:1;
    visibility:visible;
}

.quote-popup-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
}

.quote-popup-container{
    position:relative;
    width:min(480px,92%);
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    animation:popupShow .35s ease;
    z-index:2;
}

.quote-popup-content{
    padding:40px 35px;
    text-align:center;
}

.quote-popup-logo{
    display:block;
    width:220px;
    max-width:100%;
    height:auto;

    margin-left:auto;
    margin-right:auto;
    margin-bottom:24px;
}

.quote-popup-content h2{
    margin:0 0 12px;
    font-size:26px;
    line-height:1.3;
    font-weight:800;
    color:#222;
}

.quote-popup-content h2 span{
    display:block;
    color:#008DDA;
}

.quote-popup-content p{
    margin-bottom:22px;
    color:#666;
    line-height:1.6;
    font-size:15px;
}

/* CLOSE BUTTON */
.quote-popup-close{

    position:absolute;

    top:18px;
    right:18px;

    border:none;
    background:transparent;

    padding:0;

    width:auto;
    height:auto;

    cursor:pointer;

    font-size:32px;
    font-weight:300;
    line-height:1;

    color:#777;

    transition:.2s;

}

.quote-popup-close:hover{

    color:#008DDA;
    transform:none;
    background:none;

}

/* FORM (CF7) */
.quote-popup-content .wpcf7{
    margin-top:5px;
    text-align:left;
}

.quote-popup-content input,
.quote-popup-content textarea,
.quote-popup-content select{
    width:100%;
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px 14px;
    font-size:15px;
    margin-bottom:12px;
    background:#fff;
    box-sizing:border-box;
}

.quote-popup-content textarea{
    min-height:90px;
    resize:vertical;
}

.quote-popup-content input:focus,
.quote-popup-content textarea:focus,
.quote-popup-content select:focus{
    border-color:#008DDA;
    outline:none;
}

.quote-popup-content input[type=submit]{
    width:100%;
    background:#008DDA;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:14px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.quote-popup-content input[type=submit]:hover{
    background:#0077bb;
}

@keyframes popupShow{
    from{ opacity:0; transform:translateY(20px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

@media(max-width:600px){
    .quote-popup-content{ padding:30px 22px; }
    .quote-popup-content h2{ font-size:22px; }
}