/* ==========================================================================
   WordPress additions for the C&R Drainage theme (Tootle Works)
   Keeps WordPress, Contact Form 7 and editor output looking like the design.
   ========================================================================== */

/* Admin bar */
.admin-bar .header { margin-top: 0; }

/* Search buttons that replace the design's static icons */
.crd-search-submit {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
.search-box.crd-search-submit { background: transparent; }
form.search-box-main { margin: 0; }

/* Footer credit */
.rights-reserved a.crd-credit {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Contact Form 7
   ----------------------------------------------------------------------- */
.wpcf7-form-control-wrap { display: block; width: 100%; }
.input-main .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }
.input-main select {
	background: rgba(168, 169, 173, 0.1) url('../images/svg/down-arrow.svg') no-repeat right 12px center;
	border: none;
	height: 48px;
	outline: none;
	padding: 12px 40px 12px 12px;
	color: #A8A9AD;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.input-main select option { color: #222; }
.wpcf7 input[type="submit"].button-main {
	border: none;
	cursor: pointer;
	font-family: inherit;
}
#contact-page-form input[type="submit"] { margin-bottom: 0; }
.wpcf7 .wpcf7-not-valid-tip {
	font-size: 14px;
	margin-top: 4px;
}
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 10px 15px;
	font-size: 16px;
}
.wpcf7-spinner { vertical-align: middle; }
.Submit .wpcf7-spinner { margin: 40px 0 0 12px; }
.Submit.mb-0 .wpcf7-spinner { margin-top: 0; }

/* --------------------------------------------------------------------------
   Post and page content written in the editor
   ----------------------------------------------------------------------- */
.crd-post-content > p,
.crd-post-content > ul,
.crd-post-content > ol {
	color: var(--4, #222);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	margin-top: 20px;
}
.crd-post-content > h2,
.crd-post-content > h3,
.crd-post-content > h4 {
	color: var(--3, #000);
	font-weight: 600;
	margin-top: 30px;
	margin-bottom: 10px;
}
.crd-post-content > h2 { font-size: 36px; line-height: 48px; }
.crd-post-content > h3 { font-size: 26px; line-height: 36px; }
.crd-post-content > h4 { font-size: 22px; line-height: 32px; }
.crd-post-content ul,
.crd-post-content ol { padding-left: 22px; }
.crd-post-content ul li { list-style: disc; margin-top: 8px; }
.crd-post-content ol li { list-style: decimal; margin-top: 8px; }
.crd-post-content a { color: #1E63E0; }
.crd-post-content img { max-width: 100%; height: auto; }
.crd-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	font-size: 17px;
	line-height: 26px;
}
.crd-post-content th,
.crd-post-content td {
	border: 1px solid #d9dee8;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.crd-post-content th { background: #EEF3FC; color: #0A1F4D; }
.crd-post-content .wp-block-table { overflow-x: auto; }

/* Pagination */
.crd-pagination { margin-top: 40px; }
.crd-pagination .nav-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.crd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	background: #EEF3FC;
	color: #0A1F4D;
	font-weight: 600;
}
.crd-pagination .page-numbers.current,
.crd-pagination a.page-numbers:hover {
	background: #1E63E0;
	color: #fff;
}

/* Screen reader text used by WordPress core */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* Preloader: C&R Drainage logo */
.page-loader .page-loader-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    animation: crd-loader-pulse 1s ease-in-out infinite alternate;
}
@keyframes crd-loader-pulse {
    from { transform: scale(0.92); opacity: 0.85; }
    to { transform: scale(1.04); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Keep images the size the design expects, whatever size is uploaded.
   (Images uploaded before the theme was active may not have the theme's
   cropped sizes yet, so WordPress hands back the full-size file.)
   ----------------------------------------------------------------------- */
.recent-post-main img {
	width: 120px;
	height: 90px;
	min-width: 120px;
	max-width: 120px;
	flex: 0 0 120px;
	object-fit: cover;
}
.recent-post-text-main { min-width: 0; }
.blog-image-container .blog-img { aspect-ratio: 410 / 500; object-fit: cover; }
.single-blog-img1 { aspect-ratio: 850 / 500; object-fit: cover; }
.plumbing-services-img2 { width: 100%; aspect-ratio: 850 / 500; object-fit: cover; }
.plumbing-grid img { aspect-ratio: 410 / 270; object-fit: cover; }
.service-box-img { width: 100%; aspect-ratio: 300 / 260; object-fit: cover; }
.team-img-mem { aspect-ratio: 410 / 470; object-fit: cover; }
.side-bar-img { aspect-ratio: 346 / 334; object-fit: cover; }
.project-imgs { width: 100%; object-fit: cover; }
.project-sec-row > div:nth-child(1) > a:nth-of-type(1) .project-imgs,
.project-sec-row > div:nth-child(3) > a:nth-of-type(2) .project-imgs { aspect-ratio: 410 / 370; }
.project-sec-row > div:nth-child(1) > a:nth-of-type(2) .project-imgs,
.project-sec-row > div:nth-child(3) > a:nth-of-type(1) .project-imgs { aspect-ratio: 410 / 270; }
.project-sec-row > div:nth-child(2) > a:nth-of-type(1) .project-imgs { aspect-ratio: 410 / 670; }

/* Rich text fields (text with links, bold etc.) */
.crd-rich > p { margin: 0; }
.crd-rich > p + p { margin-top: 20px; }
.crd-rich a { color: #1E63E0; }
.crd-rich a:hover { text-decoration: underline; }
.crd-rich ul, .crd-rich ol { padding-left: 22px; margin: 12px 0 0; }
.crd-rich ul li { list-style: disc; }
.crd-rich ol li { list-style: decimal; }