/* =========================================================
   WILDLIFE PRO — BLOCK PATTERNS & LAYOUT RECOVERY
   This file consolidates:
   1) The "Gutenberg Layout Recovery" CSS that used to be
      copy-pasted inline in content-page-wildlife.php,
      content-page-service.php and content-page-location.php
   2) Styling for the new reusable block patterns registered
      in functions.php (all prefixed `wlp-` = Wildlife Pro,
      so nothing here can collide with existing site CSS)
   3) The sticky Call / WhatsApp bar
   ========================================================= */

:root {
	--wlp-green: #1B5E20;
	--wlp-green-light: #E8F5E9;
	--wlp-orange: #E07A18;
	--wlp-orange-light: #FFF3E0;
	--wlp-dark: #1A1A1A;
	--wlp-bg: #F9F9F7;
	--wlp-border: #E0E0E0;
	--wlp-text-muted: #717171;
}

/* ---------------------------------------------------------
   1) CORE BLOCK LAYOUT RECOVERY (previously duplicated 3x)
--------------------------------------------------------- */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.wp-block-columns > .wp-block-column {
	min-width: 0;
}
@media (max-width: 781px) {
	.wp-block-columns {
		display: flex;
		flex-wrap: wrap;
	}
	.wp-block-columns > .wp-block-column {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.wp-block-columns.wildlife_top {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}
.wp-block-columns.wildlife_top > .wp-block-column {
	flex: 0 0 50%;
	max-width: 50%;
	min-width: 0;
	box-sizing: border-box;
}
.wp-block-columns.wildlife_top > .wp-block-column.top_bg_wildlife {
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.wp-block-columns.wildlife_top > .wp-block-column:not(.top_bg_wildlife) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem;
	box-sizing: border-box;
}
.wp-block-columns.wildlife_top h1,
.wp-block-columns.wildlife_top p,
.wp-block-columns.wildlife_top .wp-block-buttons {
	margin-bottom: 1.25rem;
}
.wp-block-columns.wildlife_top .wp-block-buttons {
	margin-top: 1rem;
}
@media (max-width: 781px) {
	.wp-block-columns.wildlife_top > .wp-block-column {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.wp-block-columns.wildlife_top > .wp-block-column.top_bg_wildlife {
		min-height: 260px;
	}
	.wp-block-columns.wildlife_top > .wp-block-column:not(.top_bg_wildlife) {
		padding: 2rem 1.5rem;
	}
}

.wp-block-media-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.wp-block-media-text .wp-block-media-text__media {
	margin: 0;
}
.wp-block-media-text .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-block-media-text .wp-block-media-text__content {
	padding: 2.5rem;
	box-sizing: border-box;
}
@media (max-width: 781px) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 1fr;
	}
	.wp-block-media-text .wp-block-media-text__media img {
		height: auto;
	}
	.wp-block-media-text .wp-block-media-text__content {
		padding: 1.5rem;
	}
}

.wp-block-image img,
.wp-block-media-text__media img {
	max-width: 100%;
	height: auto;
}
.wp-block-image figure,
.wp-block-media-text__media,
.wp-block-media-text__content {
	box-sizing: border-box;
}

/* ---------------------------------------------------------
   2) TRUST BAR (4-icon grid)
--------------------------------------------------------- */
.wlp-trust-bar {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	background: #fff;
	border: 1px solid var(--wlp-border);
	border-radius: 10px;
	padding: 16px;
}
.wlp-trust-item {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #444;
}
.wlp-trust-item img,
.wlp-trust-item svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}
@media (max-width: 781px) {
	.wlp-trust-bar {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------
   3) CARD GRID (reused for "Why choose us", "Our approach",
      and any title+description grid)
--------------------------------------------------------- */
.wlp-card-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 16px 0;
}
.wlp-card-grid.wlp-cols-1 { grid-template-columns: 1fr; }
.wlp-card {
	background: var(--wlp-bg);
	border-radius: 10px;
	padding: 16px 18px;
	border-left: 3px solid var(--wlp-green);
}
.wlp-card h3 {
	color: var(--wlp-green);
	font-size: 15px;
	margin: 0 0 6px;
}
.wlp-card p {
	font-size: 14px;
	color: #444;
	margin: 0;
}
@media (max-width: 781px) {
	.wlp-card-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   4) NUMBERED STEP LIST
--------------------------------------------------------- */
.wlp-step-list { margin: 16px 0; }
.wlp-step {
	display: flex !important;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	background: var(--wlp-bg);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 12px;
}
.wlp-step-number {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wlp-green);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wlp-step h3 { margin: 0 0 4px; font-size: 15px; }
.wlp-step p { margin: 0; font-size: 14px; color: var(--wlp-text-muted); }

/* ---------------------------------------------------------
   5) REVIEW CARDS
--------------------------------------------------------- */
.wlp-review-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 16px 0;
}
.wlp-review-card {
	background: #fff;
	border: 1px solid var(--wlp-border);
	border-radius: 10px;
	padding: 16px;
}
.wlp-review-card h3 {
	font-size: 14px;
	margin: 0 0 4px;
}
.wlp-review-card .wlp-stars { color: #F9A825; display: block; margin-bottom: 8px; }
.wlp-review-card p { font-size: 14px; color: #444; margin: 0; }
@media (max-width: 781px) {
	.wlp-review-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   6) VIDEO / THUMBNAIL GRID (2 or 3 columns)
--------------------------------------------------------- */
.wlp-video-grid {
	display: grid !important;
	gap: 12px;
	margin: 16px 0;
}
.wlp-video-grid.wlp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wlp-video-grid.wlp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wlp-video-item { margin: 0 !important; }
.wlp-video-item figure {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 8px;
	margin: 0;
}
.wlp-video-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wlp-video-item figcaption {
	font-size: 12px;
	color: #444;
	margin-top: 6px;
	text-align: left;
}
@media (max-width: 600px) {
	.wlp-video-grid.wlp-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   7) CTA BOX (orange highlight box)
--------------------------------------------------------- */
.wlp-cta-box {
	background: var(--wlp-orange-light);
	border: 1.5px solid var(--wlp-orange);
	border-radius: 12px;
	padding: 22px;
	margin: 24px 0;
	text-align: center;
}
.wlp-cta-box h3 { color: #BF6010; margin: 0 0 6px; }
.wlp-cta-box p { color: #BF6010; opacity: .85; margin: 0 0 14px; }
.wlp-cta-box .wp-block-button .wp-block-button__link {
	background: var(--wlp-orange) !important;
	border-radius: 8px;
}

/* ---------------------------------------------------------
   8) WARRANTY / GUARANTEE BOX (green checklist)
--------------------------------------------------------- */
.wlp-warranty-box {
	background: var(--wlp-green-light);
	border: 1.5px solid var(--wlp-green);
	border-radius: 12px;
	padding: 20px;
	margin: 16px 0;
}
.wlp-warranty-box h3 { color: var(--wlp-green); margin: 0 0 10px; }
.wlp-warranty-box ul { margin: 0; padding-left: 0; list-style: none; }
.wlp-warranty-box li {
	color: #2E7D32;
	font-size: 14px;
	line-height: 1.9;
	padding-left: 22px;
	position: relative;
}
.wlp-warranty-box li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
}

/* ---------------------------------------------------------
   9) PILL LIST (species tags / city tags) — built from
      core/buttons + core/button so each pill stays editable
--------------------------------------------------------- */
.wlp-pill-list { gap: 8px !important; flex-wrap: wrap !important; }
.wlp-pill-list .wp-block-button__link {
	background: #fff !important;
	color: var(--wlp-dark) !important;
	border: 1px solid var(--wlp-border) !important;
	border-radius: 99px !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}
.wlp-pill-list.wlp-pill-species .wp-block-button__link {
	color: var(--wlp-green) !important;
	background: var(--wlp-bg) !important;
}

/* ---------------------------------------------------------
   10) FAQ ACCORDION — native <details>/<summary>, no JS needed
--------------------------------------------------------- */
.wlp-faq-item {
	border: 1px solid var(--wlp-border);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}
.wlp-faq-item summary {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
	position: relative;
}
.wlp-faq-item summary::-webkit-details-marker { display: none; }
.wlp-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 14px;
	font-size: 18px;
	color: var(--wlp-text-muted);
	transition: transform .2s;
}
.wlp-faq-item[open] summary::after { transform: rotate(45deg); }
.wlp-faq-item .wlp-faq-answer {
	padding: 0 16px 16px;
	font-size: 14px;
	color: #444;
	line-height: 1.6;
}

/* ---------------------------------------------------------
   11) STICKY CALL / WHATSAPP BAR (site-wide footer chrome,
       rendered by functions.php::wlp_sticky_action_bar())
--------------------------------------------------------- */
/* Mobile-only sticky bar, matching the site's existing convention
   (the previous single-button WhatsApp bar was also mobile-only).
   Hidden by default; shown only below the tablet breakpoint. */
.wlp-sbar {
	display: none;
}
@media (max-width: 781px) {
	.wlp-sbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		background: var(--wlp-dark);
		padding: 10px 12px;
		box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	}
	body { padding-bottom: 64px; } /* keep sticky bar from covering footer content on mobile */
}
.wlp-sbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 8px;
	padding: 12px 10px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
}
.wlp-sbar .wlp-s-call { background: var(--wlp-orange); }
.wlp-sbar .wlp-s-wa { background: #25D366; }
.wlp-sbar svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }