/*
Theme Name: Blocksy KJ
Theme URI: https://www.ksellsjbuys.com
Description: Child theme for Kimberly James Real Estate. Carries the site's own design system — Playfair Display over Montserrat, on gold and ivory — so Blocksy can be updated without losing customisations.
Author: Kimberly James Real Estate
Template: blocksy
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-kj
*/

/* ---------------------------------------------------------------------------
   Design tokens, recovered from the legacy site's rendered CSS.

   On the old site these colours and fonts existed ONLY as inline styles inside
   individual page content — the theme chrome rendered in Times New Roman with
   default-blue nav links, so header, footer and sidebar never matched the pages
   they framed. Defining them here as real tokens is what finally makes the
   chrome and the content one design system.
--------------------------------------------------------------------------- */

:root {
	/* Brand golds */
	--kj-gold:            #b8860b; /* primary accent, most-used colour on the site */
	--kj-gold-warm:       #c9963a;
	--kj-gold-light:      #dfb265;
	--kj-gold-pale:       #e8c97a;

	/* Ink */
	--kj-ink:             #1a1a1a;
	--kj-ink-soft:        #2a2a2a;
	--kj-body:            #333333;
	--kj-muted:           #777777;

	/* Ivory / cream grounds */
	--kj-cream:           #faf7f0;
	--kj-cream-deep:      #ede5d0;
	--kj-cream-warm:      #fbf4e8;
	--kj-sand:            #f5f0e8;
	--kj-stone:           #e0ddd8;
	--kj-tan:             #d4c4a0;
	--kj-white:           #ffffff;

	/* Type */
	--kj-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--kj-font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--kj-radius: 2px;
	--kj-measure: 68ch;
}

/* ---------------------------------------------------------------------------
   Base typography. The legacy theme served 13px #999 Times for all chrome;
   this replaces that with the real brand pairing at a readable size.
--------------------------------------------------------------------------- */

body {
	font-family: var(--kj-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--kj-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--kj-font-display);
	color: var(--kj-ink);
	text-wrap: balance;
	letter-spacing: -0.01em;
}

/* Nav links rendered in default browser blue on every legacy page. */
.header-menu a,
.menu a,
nav a {
	font-family: var(--kj-font-body);
	color: var(--kj-ink);
	text-decoration: none;
}

.header-menu a:hover,
.menu a:hover,
nav a:hover,
a:hover {
	color: var(--kj-gold);
}

a {
	color: var(--kj-gold);
}

/* Header contact bar, logo, dropdowns, and mobile fly-out. */
.kj-utility-bar {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--kj-stone);
	background: var(--kj-white);
}

.kj-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 38px;
	gap: 1.25rem;
}

.kj-utility-socials {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.kj-social-link {
	display: inline-grid;
	width: 24px;
	height: 24px;
	place-items: center;
	color: var(--kj-ink-soft);
}

.kj-social-link svg,
.kj-header-phone svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
}

.kj-social-link .kj-social-icon__fill {
	fill: currentColor;
	stroke: none;
}

.kj-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.38rem;
	color: var(--kj-ink);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
}

.kj-header-phone strong {
	color: var(--kj-gold);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
}

#header [data-row='middle'] {
	background: var(--kj-white);
}

#header [data-id='logo'] .site-logo-container img {
	width: auto;
	height: 72px;
	max-width: 143px;
	max-height: none;
	object-fit: contain;
}

#header [data-id='logo'] .site-title-container {
	display: none;
}

#header .menu-container .sub-menu {
	margin-top: 0;
	padding: 0.45rem 0;
	border-top: 2px solid var(--kj-gold-warm);
	background: var(--kj-white) !important;
	box-shadow: 0 14px 30px rgba(26, 26, 26, 0.14);
}

#header .menu-container .sub-menu .ct-menu-link {
	min-height: 42px;
	padding: 0.65rem 1.15rem;
	color: var(--kj-ink) !important;
	line-height: 1.35;
}

#header .menu-container .sub-menu .ct-menu-link:hover,
#header .menu-container .sub-menu .current-menu-item > .ct-menu-link {
	background: var(--kj-cream) !important;
	color: var(--kj-gold) !important;
}

#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner {
	background: var(--kj-white);
}

#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-actions {
	background: var(--kj-white) !important;
}

#offcanvas .ct-panel-actions {
	flex: 0 0 64px;
	min-height: 64px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--kj-stone);
	justify-content: flex-end;
}

#offcanvas .ct-toggle-close {
	display: inline-grid;
	width: 40px;
	height: 40px;
	margin-left: auto;
	place-items: center;
	color: var(--kj-ink) !important;
	--theme-icon-color: var(--kj-ink);
}

#offcanvas .ct-toggle-close .ct-icon {
	width: 16px;
	height: 16px;
	fill: var(--kj-ink) !important;
}

#offcanvas .ct-panel-content-inner {
	padding-top: 12px;
}

#offcanvas .mobile-menu {
	margin-top: 0;
}

#offcanvas .mobile-menu .ct-menu-link {
	color: var(--kj-ink);
}

/* Visible keyboard focus — absent from the legacy theme entirely. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--kj-gold);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Wide content must scroll in its own container. The legacy neighbourhood and
   market pages carry price tables that overflow on mobile.
--------------------------------------------------------------------------- */

.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Neighbourhood cards: the legacy overlay titles were sized so large that the
   first character was clipped on all nine cards ("incon Valley",
   "untaingrove"). Overlay text is constrained to its container here.
--------------------------------------------------------------------------- */

.kj-card-overlay {
	font-family: var(--kj-font-display);
	font-size: clamp(1.1rem, 2.4vw, 1.9rem);
	line-height: 1.15;
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
	padding: 0 0.6em;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Shared rebuild components. */
.kj-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.kj-eyebrow {
	margin: 0 0 0.8rem;
	color: var(--kj-gold-warm);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kj-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.6rem;
}

.kj-button,
.entry-content .kj-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--kj-gold-warm);
	background: var(--kj-gold-warm);
	color: var(--kj-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.kj-button:hover,
.entry-content .kj-button:hover {
	background: var(--kj-gold-light);
	color: var(--kj-ink);
}

.kj-button--outline,
.entry-content .kj-button--outline {
	background: transparent;
	color: inherit;
}

/* Homepage: a static, fast hero replaces the orphaned Smart Slider shortcode. */
.home .entry-header {
	display: none;
}

.home .site-main,
.home .site-main > .ct-container,
.home .site-main > .ct-container-full,
.home article,
.home .entry-content {
	padding-top: 0;
}

.home .site-main > .ct-container-full {
	gap: 0;
}

.home .site-main {
	gap: 0;
}

.home .site-main > article {
	padding-top: 0 !important;
}

.kj-home-hero {
	display: grid;
	min-height: clamp(520px, 68vh, 720px);
	place-items: center;
	padding: clamp(5rem, 11vw, 9rem) 1.5rem;
	background:
		linear-gradient(90deg, rgba(11, 20, 17, 0.78), rgba(11, 20, 17, 0.22)),
		url('/wp-content/uploads/2018/12/SonomaCounty2560.jpg') center / cover no-repeat;
	color: var(--kj-white);
	text-align: center;
}

.kj-home-hero__inner {
	max-width: 830px;
}

.kj-home-hero h1 {
	margin: 0;
	color: var(--kj-white);
	font-size: clamp(3rem, 7vw, 6.6rem);
	line-height: 0.98;
}

.kj-home-hero p:not(.kj-eyebrow) {
	max-width: 650px;
	margin: 1.35rem auto 0;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.kj-home-hero .kj-button-row {
	justify-content: center;
}

.kj-home-hero .kj-button--outline {
	border-color: rgba(255, 255, 255, 0.75);
	color: var(--kj-white);
}

.kj-trust-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--kj-ink);
	color: var(--kj-white);
	text-align: center;
}

.kj-trust-strip div {
	padding: 1.5rem 1rem;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.kj-trust-strip strong {
	display: block;
	color: var(--kj-gold-light);
	font-family: var(--kj-font-display);
	font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.kj-trust-strip span {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kj-home-section {
	padding: clamp(4rem, 8vw, 7rem) 1.5rem;
}

.kj-home-section__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.kj-home-intro {
	max-width: 850px;
	margin: 0 auto 3rem;
	text-align: center;
}

.kj-home-intro h2 {
	margin: 0 0 1rem;
	font-size: clamp(2.2rem, 4vw, 3.8rem);
}

.kj-service-grid,
.kj-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.kj-service-card {
	padding: clamp(2rem, 5vw, 3.5rem);
	border-top: 3px solid var(--kj-gold-warm);
	background: var(--kj-cream);
}

.kj-service-card h3 {
	font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.kj-home-testimonials {
	background:
		linear-gradient(rgba(15, 20, 18, 0.9), rgba(15, 20, 18, 0.9)),
		url('/wp-content/uploads/2018/12/clouds-countryside-daylight-51947.jpg') center / cover no-repeat;
	color: var(--kj-white);
}

.kj-home-testimonials h2 {
	color: var(--kj-white);
	text-align: center;
}

.kj-testimonial-card {
	margin: 0;
	padding: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
}

.kj-testimonial-card p {
	font-family: var(--kj-font-display);
	font-size: 1.15rem;
	font-style: italic;
}

.kj-testimonial-card cite {
	color: var(--kj-gold-light);
	font-size: 0.78rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Contact page. */
.page-id-6238 .entry-header {
	display: none;
}

.kj-contact-page {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.kj-contact-lead {
	max-width: 780px;
	margin-bottom: 2.5rem;
}

.kj-contact-lead h1 {
	margin: 0 0 1rem;
	font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.kj-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
	gap: clamp(2rem, 5vw, 5rem);
}

.kj-contact-form {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-top: 3px solid var(--kj-gold-warm);
	background: var(--kj-cream);
}

.kj-contact-form input:not([type='submit']),
.kj-contact-form textarea {
	width: 100%;
	border-color: var(--kj-stone);
	background: var(--kj-white);
}

.kj-contact-form input[type='submit'] {
	border-color: var(--kj-gold-warm);
	background: var(--kj-gold-warm);
	color: var(--kj-ink);
	font-weight: 700;
	text-transform: uppercase;
}

.kj-contact-details img {
	width: 100%;
	max-width: 390px;
	margin-bottom: 1.5rem;
}

.kj-contact-details h2 {
	margin-bottom: 0.5rem;
}

.kj-contact-details a {
	font-weight: 600;
}

/* Site footer and 404. */
.kj-site-footer {
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
	background: var(--kj-ink);
	color: rgba(255, 255, 255, 0.76);
}

.kj-site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 0.7fr 1fr;
	gap: 2.5rem;
}

.kj-site-footer p {
	margin: 0;
}

.kj-site-footer a {
	color: var(--kj-white);
}

.kj-site-footer a:hover {
	color: var(--kj-gold-light);
}

.kj-site-footer__brand,
.kj-site-footer__heading {
	margin-bottom: 0.75rem !important;
	color: var(--kj-white);
	font-family: var(--kj-font-display);
	font-size: 1.15rem;
	font-weight: 700;
}

.kj-site-footer__brand {
	color: var(--kj-gold-light);
	font-size: 1.65rem;
}

.kj-404 {
	max-width: 850px;
	padding-block: clamp(6rem, 14vw, 11rem);
	text-align: center;
}

.kj-404 h1 {
	margin: 0;
	font-size: clamp(3rem, 7vw, 6rem);
}

.kj-404 .kj-button-row {
	justify-content: center;
}

.kj-404 .kj-button--outline {
	color: var(--kj-ink);
}

.kj-404-search {
	max-width: 520px;
	margin: 2.5rem auto 0;
}

@media (max-width: 800px) {
	.kj-utility-bar__inner {
		min-height: 40px;
		gap: 0.8rem;
	}

	.kj-utility-socials {
		gap: 0.35rem;
	}

	.kj-social-link {
		width: 22px;
	}

	.kj-header-phone span {
		display: none;
	}

	#header [data-id='logo'] .site-logo-container img {
		height: 64px;
		max-width: 116px;
	}

	.kj-trust-strip,
	.kj-service-grid,
	.kj-testimonial-grid,
	.kj-contact-grid,
	.kj-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.kj-trust-strip div {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.kj-home-hero {
		min-height: 590px;
		background-position: 58% center;
	}
}