/*
Theme Name: Jet City Tree Care
Template: kadence
Description: Kadence child theme for Jet City Tree Care (Efrain). Field Olive brand.
Version: 1.5.0
*/

/* Smooth anchor scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── Brand tokens (mirror of brand/final tokens + derived shades) ── */
:root {
	--jc-field-olive: #4A512F;
	--jc-olive-deep: #3F4529;
	--jc-olive-panel: #5A6238;
	--jc-warm-ivory: #F4E8D3;
	--jc-harvest-copper: #C17845;
	--jc-copper-dark: #9A5E33;
	--jc-slate-blue-gray: #9AA6AE;
	--jc-ink: #10263A;
	--jc-surface: #F5F0E6;
	--jc-footer: #333823;
}

/* Header buttons never wrap */
.wp-block-kadence-header .kb-button { white-space: nowrap; }

/* ── Equal-height cards in nested rows (Klondike-proven pattern) ── */
.jc-equal .wp-block-kadence-column { height: 100%; }
.jc-equal .kt-inside-inner-col { display: flex; flex-direction: column; height: 100%; }
.jc-equal .kt-inside-inner-col > .wp-block-kadence-advancedbtn:last-child { margin-top: auto; }

/* Card hover lift (pairs with borderHoverStyle) */
.jc-card { transition: transform .18s ease, box-shadow .18s ease; }
.jc-card:hover { transform: translateY(-4px); }

/* ── Subtle paper-grain dot texture on olive bands (decoration budget: 1/viewport) ── */
.jc-texture > .kt-row-layout-inner {
	background-image: radial-gradient(rgba(244, 232, 211, 0.9) 1px, transparent 1.2px);
	background-size: 26px 26px;
}
.jc-texture { position: relative; }

/* ── Reveal-on-scroll (CSS + tiny IO script; AOS-independent, reduced-motion safe) ── */
.jc-reveal .wp-block-kadence-column,
.jc-reveal-self {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.jc-in .wp-block-kadence-column,
.jc-in.jc-reveal-self { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.jc-reveal .wp-block-kadence-column, .jc-reveal-self { opacity: 1; transform: none; transition: none; }
}

/* Stagger children inside a revealed row */
.jc-reveal .wp-block-kadence-column:nth-child(2) { transition-delay: .12s; }
.jc-reveal .wp-block-kadence-column:nth-child(3) { transition-delay: .24s; }
.jc-reveal .wp-block-kadence-column:nth-child(4) { transition-delay: .36s; }

/* Review stars */
.jc-stars { color: var(--jc-harvest-copper); letter-spacing: 2px; }

/* ── Boom: sticky mobile call bar ── */
.jc-sticky-call {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: var(--jc-harvest-copper);
	color: #FFF6E8;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	text-decoration: none;
	box-shadow: 0 -4px 18px rgba(16, 38, 58, .25);
}
.jc-sticky-call:hover, .jc-sticky-call:focus { color: #FFF6E8; background: var(--jc-copper-dark); }
@media (max-width: 767px) {
	.jc-sticky-call { display: block; }
	body { padding-bottom: 56px; }
}

/* Trust bar: center + size the illustrated icons */
.jc-trust .kt-inside-inner-col > .wp-block-kadence-image {
	margin-left: auto !important;
	margin-right: auto !important;
	display: block;
}
.jc-trust .wp-block-kadence-image img { border-radius: 10px; display: block; margin-inline: auto; }

/* Difference cards: uniform image ratio so all three cards match height */
.jc-diff .wp-block-kadence-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	height: auto;
}
/* Story split: tame the portrait photo to a 4:3 frame */
.jc-story .wp-block-kadence-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Site-wide: images beside text in split rows hold a 4:3 frame */
.jc-split .wp-block-kadence-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}
/* Site-wide: gallery strips hold a 16:10 frame */
.jc-gallery .wp-block-kadence-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* ── Lightbox (Our Work gallery) ── */
.jc-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(16, 38, 58, 0.94);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 4vh 4vw; cursor: zoom-out;
}
.jc-lightbox img {
	max-width: 92vw; max-height: 82vh;
	width: auto; height: auto;
	border-radius: 12px;
	box-shadow: 0 24px 80px rgba(0,0,0,.5);
	cursor: default;
}
.jc-lightbox figcaption {
	color: #F4E8D3; font-size: 15px; margin-top: 14px; text-align: center;
	font-family: 'Epilogue', sans-serif;
}
.jc-lightbox button {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(244,232,211,.12); color: #F4E8D3;
	border: 0; border-radius: 50%; width: 46px; height: 46px;
	font-size: 22px; line-height: 1; cursor: pointer;
}
.jc-lightbox button:hover { background: #C17845; }
.jc-lightbox .jc-lb-prev { left: 3vw; }
.jc-lightbox .jc-lb-next { right: 3vw; }
.jc-lightbox .jc-lb-close {
	top: 3vh; right: 3vw; transform: none;
	font-size: 26px;
}