/*
 * ElderCare — single listing page ("Idea 3 — Service Grid + Quick Form" layout).
 * Structure/spacing/typography ported from the approved mockup as-is.
 * Brand color swapped for the theme's own Customizer color via the
 * --listeo-primary-color / --listeo-primary-color-light CSS variables
 * Listeo already generates (inc/customizer/customizer.php) — this page
 * re-colors itself automatically whenever that Customizer setting changes.
 * WhatsApp green and Google-Maps blue are left as-is: real-world brand
 * colors people recognize regardless of a site's own palette.
 *
 * All type sizes below are fixed px, not rem, on purpose: Listeo loads
 * Bootstrap's grid stylesheet, which sets `html { font-size: 10px; }`
 * (a Bootstrap convention, unrelated to this page). Any rem value here would
 * be relative to that 10px root instead of the usual 16px, rendering at
 * ~62% of its intended size — which is exactly why everything looked too
 * small before. Fixed px sizes below are the original mockup's sizes
 * (assuming a normal 16px root) converted 1:1, so this is a bug fix, not a
 * redesign — and it's immune to that root font-size regardless of what else
 * on the site changes it later.
 *
 * No font-family is set anywhere in this file, on purpose. Listeo's own
 * Customizer (Appearance -> Customize -> Typography -> "Body font", "h1..h6
 * font") writes real font-family rules onto `body` and heading tags —
 * font-family is inherited by every element by default, so this page just
 * follows whatever that setting is instead of pinning its own font. Change
 * the site's font there and this page follows automatically.
 */

.i3-wrap {
	font-size: 16px;
	color: #1A1A1A;
	background: #FAFAFA;
}

.i3-back {
	background: var(--listeo-primary-color, #B04C2F);
	padding: 10px 28px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #fff;
	opacity: .85;
}
.i3-back a { color: #fff; cursor: pointer; text-decoration: none; }
.i3-back a:hover { text-decoration: underline; }

.i3-header { background: #fff; border-bottom: 1px solid #E8E8E8; padding: 20px 28px; }
.i3-hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.i3-left { display: flex; align-items: center; gap: 16px; }
.i3-logo-box {
	width: 64px; height: 64px;
	background: #F5F5F5;
	border: 1px solid #E8E8E8;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.i3-logo-box img { width: 100%; height: 100%; object-fit: cover; }
.i3-title-col {}
.i3-name { font-size: 24px; font-weight: 700; color: #1A1A1A; margin-bottom: 4px; }
.i3-loc { font-size: 14px; color: #666; display: flex; align-items: center; gap: 5px; }
.i3-loc a { color: inherit; text-decoration: none; }
.i3-loc a:hover { color: var(--listeo-primary-color, #B04C2F); text-decoration: underline; }
.i3-rtg-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.i3-rtg-big { font-size: 24px; font-weight: 700; color: #1A1A1A; }
.i3-rtg-stars { color: #D49B1A; font-size: 18px; }
.i3-rtg-cnt { font-size: 13px; color: #888; }
.g-badge-v {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--listeo-primary-color-light, #FDF1EE);
	color: var(--listeo-primary-color, #B04C2F);
	border: 1px solid var(--listeo-primary-color-light, #F2D9CE);
	border-radius: 5px;
	font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding: 3px 8px;
}
.i3-cta-row { display: flex; gap: 9px; flex-wrap: wrap; }
.i3-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: 8px;
	font-weight: 600; font-size: 14px;
	cursor: pointer; border: none;
	text-decoration: none;
}
.i3-btn.call { background: var(--listeo-primary-color, #B04C2F); color: #fff; }
.i3-btn.wa { background: #25D366; color: #fff; }
.i3-btn.web { background: #F5F5F5; color: #333; border: 1px solid #E0E0E0; }
.i3-btn.map { background: #4285F4; color: #fff; }

.i3-body { max-width: 1120px; margin: 0 auto; padding: 28px 24px 60px; display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
/*
 * Sticky sidebar: sticks to the viewport while scrolling, then stops on its
 * own once its bottom edge reaches the bottom of .i3-body (native `position:
 * sticky` behavior — a sticky element is bounded by its parent's height, so
 * it un-sticks and scrolls away with the page right as it "runs out of room"
 * rather than overlapping the footer). No JS needed.
 * `top: 90px` leaves room for the site's own sticky header — if that header
 * is a different height on your build, adjust this value so the sidebar
 * doesn't end up overlapping or hiding under it.
 */
.i3-side-b { position: sticky; top: 90px; align-self: start; }

@media (max-width: 860px) {
	.i3-side-b { position: static; }
}
.i3-sec3 { background: #fff; border-radius: 12px; border: 1px solid #E8E8E8; margin-bottom: 16px; overflow: hidden; }
.i3-sec-hd3 { padding: 16px 22px 12px; border-bottom: 1px solid #F0F0F0; font-size: 17px; color: var(--listeo-primary-color, #B04C2F); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.i3-sec-bd3 { padding: 18px 22px; }
.i3-about3 { font-size: 15px; line-height: 1.78; color: #444; }

/* Reusable table style for any HTML pasted into a content field (e.g. the
   About box) — matches the page's own look, colors follow the theme. */
.i3-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.i3-table th { text-align: left; padding: 10px 12px; background: var(--listeo-primary-color-light, #FDF1EE); color: var(--listeo-primary-color, #B04C2F); font-weight: 600; border-bottom: 2px solid var(--listeo-primary-color-light, #F2D9CE); }
.i3-table td { padding: 10px 12px; border-bottom: 1px solid #F0F0F0; color: #444; }
.i3-table tr:last-child td { border-bottom: none; }

.i3-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.i3-svc-item { border: 1px solid #E8E8E8; border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; cursor: default; transition: border-color .15s; }
.i3-svc-item:hover { border-color: var(--listeo-primary-color, #B04C2F); }
.i3-svc-ico { font-size: 19px; color: var(--listeo-primary-color, #B04C2F); flex-shrink: 0; }
.i3-svc-name { font-size: 13px; font-weight: 600; color: #1A1A1A; }

.i3-usp-list { display: flex; flex-direction: column; gap: 9px; }
.i3-usp-i { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 9px; background: var(--listeo-primary-color-light, #FDF1EE); border: 1px solid var(--listeo-primary-color-light, #F2D9CE); }
.i3-usp-check { color: var(--listeo-primary-color, #B04C2F); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.i3-usp-text3 h4 { font-size: 14px; font-weight: 600; color: #1A1A1A; margin-bottom: 2px; }
.i3-usp-text3 p { font-size: 12px; color: #666; line-height: 1.5; }

.i3-equip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.i3-equip-pill { background: var(--listeo-primary-color-light, #FDF1EE); border: 1px solid var(--listeo-primary-color-light, #F2D9CE); color: var(--listeo-primary-color, #B04C2F); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 500; }

.i3-form-card { background: var(--listeo-primary-color, #B04C2F); border-radius: 12px; padding: 16px; }
.i3-form-card h3 { font-size: 16px; color: #fff; margin-bottom: 12px; }
.i3-form-card form { padding: 0 10px; }
/*
 * !important below is deliberate: Listeo wraps this form in its own
 * `.row.with-forms` class (see contact-form.php) to inherit the theme's
 * generic form look, and that theme CSS was winning the specificity fight
 * on spacing (margin-bottom in particular) against these plain single-class
 * selectors, even though our padding/background/color were getting through
 * fine. This pins the compact spacing regardless of what the parent theme
 * declares for `.row.with-forms input/select/textarea`.
 */
.i3-form-input, .i3-form-select,
.i3-form-card input.listeo-cf-input,
.i3-form-card textarea.listeo-cf-textarea,
.i3-form-card select.listeo-cf-select {
	width: 100%;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 8px;
	padding: 3px 10px !important;
	color: #fff;
	font-size: 14px;
	margin-bottom: 6px !important;
}
.i3-form-card textarea.listeo-cf-textarea { min-height: 60px; resize: vertical; }
.i3-form-card .listeo-cf-field { margin-bottom: 0 !important; }
.i3-form-input::placeholder,
.i3-form-card input::placeholder,
.i3-form-card textarea::placeholder { color: rgba(255,255,255,.6); }
.i3-form-select option,
.i3-form-card select option { color: #333; background: #fff; }
.i3-form-submit,
.i3-form-card button[type="submit"],
.i3-form-card .listeo-cf-submit {
	width: 100%;
	background: #fff;
	color: var(--listeo-primary-color, #B04C2F);
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.i3-form-card .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.i3-contact3 { background: #fff; border: 1px solid #E8E8E8; border-radius: 12px; padding: 18px; margin-top: 14px; }
.i3-contact3 h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #888; margin-bottom: 12px; }
.i3-c3-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; padding: 6px 0; border-bottom: 1px solid #F5F5F5; }
.i3-c3-row:last-child { border-bottom: none; }
.i3-c3-ico { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.i3-c3-row a { color: inherit; text-decoration: none; }
.i3-c3-row a:hover { text-decoration: underline; }

/* "View on Google Maps" — sits at the very bottom of the sidebar, below the
   Contact Details card. Outline style (theme primary color, not a filled
   background) so it reads as a secondary action next to the filled
   "Enquire Now" card above it — pin icon, label, external-link icon. */
.i3-maps-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 80%; margin: 14px auto 0; padding: 11px; border-radius: 999px;
	background: #fff; border: 1.5px solid var(--listeo-primary-color, #B04C2F);
	color: var(--listeo-primary-color, #B04C2F); font-size: 13px; font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.i3-maps-btn:hover { background: var(--listeo-primary-color, #B04C2F); color: #fff; }
.i3-maps-btn i:last-child { font-size: 11px; opacity: .8; }

.i3-oncall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.i3-oc-item { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; border: 1px solid #E8E8E8; font-size: 13px; font-weight: 500; color: #444; }
.i3-oc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--listeo-primary-color, #B04C2F); flex-shrink: 0; }

@media (max-width: 860px) {
	.i3-body { grid-template-columns: 1fr; }
	.i3-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.i3-svc-grid, .i3-oncall-grid { grid-template-columns: 1fr; }
}