/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.10
 Text Domain:  woodmart
*/

/* Every Elanza page built as an Elementor "canvas" (header/footer) page
   still gets Woodmart's default 40px .wd-content-layout top padding —
   space normally reserved for the theme's own page-title banner, which
   these pages don't use (title is turned off, Elementor renders its own
   hero). That's the gap seen between the header and the page content on
   Contact, About, etc. Zero it out for every such page (not just Home,
   which already had its own page-specific fix in elanza-home.css). */
body.page-template-elementor_header_footer .wd-content-layout {
	padding: 0 !important;
}

/* ===== Elanza Home — interaction/hover states + responsive fixes =====
   The home page sections are Elementor HTML widgets using inline styles
   (no custom classes), so these rules target them structurally/by
   attribute rather than editing the generator script. */

/* Service cards (<article> tags) */
.elementor-widget-html article {
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.elementor-widget-html article:hover {
	border-color: #9DBEDA !important;
	box-shadow: 0 16px 40px rgba(3, 57, 108, 0.12);
	transform: translateY(-2px);
}

/* Outline "Speak to Us" pills inside cards */
.elementor-widget-html a[style*="border:1px solid #12121A"] {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.elementor-widget-html a[style*="border:1px solid #12121A"]:hover {
	background: #03396C !important;
	border-color: #03396C !important;
	color: #fff !important;
}

/* Solid navy / gradient pill buttons (hero CTAs, Read More, Send Request, Speak to Us) */
.elementor-widget-html a[style*="border-radius:40px"],
.elementor-widget-html a[style*="border-radius: 40px"],
.elementor-widget-html button[type="submit"] {
	transition: filter 0.2s ease, transform 0.2s ease;
}
.elementor-widget-html a[style*="border-radius:40px"]:hover,
.elementor-widget-html a[style*="border-radius: 40px"]:hover,
.elementor-widget-html button[type="submit"]:hover {
	filter: brightness(1.12);
}

/* Portfolio filter buttons — visual active/hover feedback */
.elementor-widget-html button[style*="border-radius:30px"] {
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.elementor-widget-html button[style*="border-radius:30px"]:hover {
	border-color: #03396C !important;
	color: #03396C !important;
}

/* Portfolio / blog card links — lift the placeholder image block on hover */
.elementor-widget-html a:hover > div[style*="aspect-ratio"] {
	filter: brightness(0.94);
}

/* Placeholder image blocks: keep a visible tile even on very small widths */
.elementor-widget-html div[style*="aspect-ratio"] {
	transition: filter 0.2s ease;
}

/* Responsive: portfolio + blog grids collapse on narrower screens
   (they use inline grid-template-columns:repeat(3,...) with no breakpoint) */
@media (max-width: 900px) {
	.elementor-widget-html div[style*="repeat(3,minmax(0,1fr))"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.elementor-widget-html div[style*="repeat(3,minmax(0,1fr))"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ===== Elanza Contact page — Contact Form 7 styling =====
   The form itself is rendered by CF7 (via Elementor's Shortcode widget,
   so its nonce/JS stay fresh per request). This restyles CF7's default
   markup to match the design: underline inputs, pill submit button,
   two-column rows. */

.elementor-widget-shortcode,
.elementor-widget-shortcode * {
	font-family: 'Nunito', sans-serif !important;
}

/* Elementor's legacy "extended" gap preset doesn't add real separation
   between columns — force an actual flex gap on the container so the
   intro-text column and the form card aren't crammed together. */
.elanza-contact-split > .elementor-container {
	gap: clamp(32px, 5vw, 64px);
}

/* NOTE: the card chrome (white bg, border, radius, shadow, padding)
   around the form is NOT done here — it's the Elementor column's own
   native settings (background/border/border_radius/box_shadow/padding),
   which DO render correctly on the column's .elementor-element-populated.
   An earlier version of this file duplicated that same chrome on
   .elementor-shortcode as a workaround, which produced two overlapping
   rounded boxes. Do not re-add a card wrapper here. */

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Contact Form 7 runs its templates through wpautop, which turns every
   line break in the form template into a literal <br> — that's what was
   blowing up the gap between each label and its field (a blank line and
   a line break in the template source, each becoming a <br>). None of
   that spacing is needed since every field already controls its own
   layout via CSS, so just neutralize the <br>s wpautop injects. */
.wpcf7-form br {
	display: none;
}

.elanza-cf7-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 600px) {
	.elanza-cf7-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.elanza-cf7-field {
	margin: 0;
}

.elanza-cf7-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: #12121A;
	margin-bottom: 6px;
}

.elanza-req {
	color: #C0392B;
}

.elanza-cf7-phone-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1.5px solid #DED9EA;
	transition: border-color 0.25s ease;
}

.elanza-cf7-phone-row:focus-within {
	border-bottom-color: #03396C;
}

.elanza-cf7-phone-row .wpcf7-form-control-wrap[data-name="phone"] {
	flex: 1 1 auto;
}

.elanza-cf7-phone-row .wpcf7-form-control-wrap:has(select) {
	flex: 0 0 auto;
	position: relative;
}

.elanza-cf7-phone-row .wpcf7-form-control-wrap:has(select)::after {
	content: '';
	position: absolute;
	right: 6px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid #55535F;
	border-bottom: 1.5px solid #55535F;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.elanza-cf7-phone-row select.wpcf7-form-control {
	border-bottom: 0 !important;
	padding: 10px 22px 10px 2px !important;
	width: auto;
	max-width: 148px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.elanza-cf7-phone-row .wpcf7-form-control-wrap:has(select)::before {
	content: '';
	position: absolute;
	right: 16px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: #DED9EA;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-select {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: #12121A;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid #DED9EA;
	padding: 10px 2px;
	outline: none;
	transition: border-color 0.25s ease;
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-select:focus {
	border-bottom-color: #03396C;
}

.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: #12121A;
	background: #FAF9FC;
	border: 1px solid #EAE6F3;
	border-radius: 14px;
	padding: 14px 16px;
	outline: none;
	resize: vertical;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wpcf7-form-control.wpcf7-textarea:focus {
	border-color: #03396C;
	box-shadow: 0 0 0 3px rgba(3, 57, 108, 0.08);
}

.elanza-cf7-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
}

.elanza-cf7-privacy {
	flex: 1 1 260px;
	font-size: 13px;
	line-height: 1.65;
	color: #7A7786;
	margin: 0;
}

.elanza-cf7-privacy a {
	color: #03396C;
	font-weight: 700;
	text-decoration: underline;
}

input.wpcf7-form-control.wpcf7-submit,
button.wpcf7-form-control.wpcf7-submit {
	flex: 0 0 auto;
	padding: 16px 40px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #245A8D 0%, #022A50 100%);
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 16px 34px rgba(3, 57, 108, 0.32);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	white-space: nowrap;
}

input.wpcf7-form-control.wpcf7-submit:hover,
button.wpcf7-form-control.wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 44px rgba(3, 57, 108, 0.42);
}

.wpcf7-spinner {
	margin-left: 12px;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 12.5px;
	color: #C0392B;
	margin-top: 4px;
}

.wpcf7-response-output {
	border-radius: 12px !important;
	font-size: 14px !important;
	padding: 12px 16px !important;
	margin: 0 0 8px !important;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #2ECC71 !important;
	color: #1E7E42 !important;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	border-color: #C0392B !important;
	color: #C0392B !important;
}

/* ===== Elanza Blog index (home.php) ===== */

/* Break out of Woodmart's .container wrapper (fixed max-width around
   the posts-page content) so the hero/grid go true full width, same
   fix as the footer's earlier container issue. */
.elanza-full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ===== Elanza Blog detail (single.php) ===== */

/* Same root cause as the earlier Elementor-page font bug: Woodmart's
   own h1-h6 CSS beats an inherited font-family without !important.
   single.php isn't inside .elementor-widget-html, so that earlier fix
   doesn't reach it — force Nunito across the whole template here. */
.elanza-full-bleed,
.elanza-full-bleed * {
	font-family: 'Nunito', sans-serif !important;
}

.elanza-toc-link {
	text-decoration: none;
	transition: color 0.2s ease;
}
.elanza-toc-link:hover {
	color: #03396C !important;
}

.elanza-post-body h2 {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 800;
	color: #12121A;
	margin: 44px 0 16px;
	scroll-margin-top: 120px;
}
.elanza-post-body h3 {
	font-size: clamp(19px, 1.8vw, 22px);
	font-weight: 800;
	color: #12121A;
	margin: 30px 0 12px;
	scroll-margin-top: 120px;
}
.elanza-post-body p {
	font-size: 16.5px;
	line-height: 1.85;
	color: #4B4A57;
	margin: 0 0 18px;
}
.elanza-post-body ul,
.elanza-post-body ol {
	font-size: 16.5px;
	line-height: 1.85;
	color: #4B4A57;
	margin: 0 0 18px;
	padding-left: 22px;
}
.elanza-post-body li {
	margin-bottom: 8px;
}
.elanza-post-body strong {
	color: #12121A;
}
.elanza-post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.elanza-post-body a {
	color: #03396C;
	font-weight: 700;
}

@media (max-width: 980px) {
	.elanza-post-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.elanza-post-sidebar {
		position: static !important;
	}
}

/* Native WP comment form/list, restyled to match the design */
.elanza-comments,
.elanza-comments * {
	font-family: 'Nunito', sans-serif !important;
}
.elanza-comments .comment-reply-title,
.elanza-comments h3 {
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 28px);
	color: #12121A;
	margin: 0 0 12px;
}
.elanza-comments .comment-notes,
.elanza-comments .comment-form p.comment-notes {
	font-size: 14.5px;
	color: #8A8794;
	margin: 0 0 24px;
}
.elanza-comments .comment-form textarea,
.elanza-comments .comment-form input[type="text"],
.elanza-comments .comment-form input[type="email"],
.elanza-comments .comment-form input[type="url"] {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid #E7E4EF;
	font-family: inherit;
	font-size: 15px;
	color: #4B4A57;
	outline: none;
	box-sizing: border-box;
	margin-bottom: 16px;
}
.elanza-comments .comment-form textarea {
	resize: vertical;
}
.elanza-comments .comment-form p {
	margin: 0;
}
.elanza-comments .form-submit input[type="submit"] {
	background: #03396C;
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	padding: 13px 28px;
	border-radius: 30px;
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(3, 57, 108, 0.25);
	transition: background 0.2s ease;
}
.elanza-comments .form-submit input[type="submit"]:hover {
	background: #245A8D;
}
.elanza-comments ol.comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.elanza-comments .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid #E7E4EF;
}
.elanza-comments .comment-author .fn {
	font-weight: 800;
	color: #12121A;
	font-style: normal;
}
.elanza-comments .comment-meta {
	font-size: 12.5px;
	color: #9AA0AE;
	margin-bottom: 6px;
}

.elanza-blog-grid a {
	transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.3s ease;
}

.elanza-blog-grid a:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px rgba(3, 57, 108, 0.20) !important;
}

@media (max-width: 980px) {
	.elanza-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.elanza-blog-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.elanza-blog-pagination {
	font-family: 'Nunito', sans-serif;
}

.elanza-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid #DAD6E4;
	background: #fff;
	color: #12121A;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.elanza-blog-pagination .page-numbers:hover {
	border-color: #03396C;
	color: #03396C;
}

.elanza-blog-pagination .page-numbers.current {
	border-color: #03396C;
	background: #03396C;
	color: #fff;
}