/*
Theme Name: Javier Desert
Theme URI: https://javrodrealtor.com
Description: Desert-modern Kadence child theme for Javier Rodriguez Real Estate. Establishes Poppins/Inter typography, sage/sand/terracotta tokens, semantic structure, and SEO-friendly defaults.
Author: Javier Rodriguez Real Estate
Author URI: https://javrodrealtor.com
Template: kadence
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: javier-desert
*/

:root {
	--jd-bg:           #F8F5F0;
	--jd-bg-soft:      #FFFFFF;
	--jd-bg-warm:      #F1ECE3;
	/* Century 21 "Obsessed Grey" replaces the previous slate ink (#1F2937 → #252526) */
	--jd-ink:          #252526;
	--jd-ink-soft:     #374151;
	--jd-muted:        #4B5563;
	--jd-line:         rgba(37, 37, 38, 0.12);
	--jd-line-strong:  rgba(37, 37, 38, 0.28);
	--jd-sage:         #7A8B78;
	--jd-sage-dark:    #5E6F5C;
	--jd-sand:         #D6C3A5;
	--jd-sand-soft:    #E8DCC5;
	--jd-terracotta:   #B86B4B;
	--jd-terracotta-d: #9A5639;
	--jd-terracotta-text: #A0563E;
	/* Century 21 brand tokens */
	--jd-c21-gold:     #BEAF88; /* Relentless Gold — muted, post-2018 rebrand */
	--jd-c21-gold-d:   #9C8F6E; /* slightly darker for hover / borders */
	--jd-c21-grey:     #252526; /* Obsessed Grey */
	/* Javier personal-brand gold (from JR monogram logo) — warmer copper-bronze */
	--jd-brand-gold:   #B8895C;
	--jd-brand-gold-d: #9A7349;
	--jd-brand-navy:   #1F2937; /* slate-navy from logo wordmark */
	--jd-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--jd-shadow-sm:    0 2px 8px rgba(31, 41, 55, 0.05);
	--jd-shadow-md:    0 12px 32px rgba(31, 41, 55, 0.08);
	--jd-radius-sm:    6px;
	--jd-radius-md:    10px;
	--jd-radius-lg:    16px;
	--jd-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jd-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jd-maxw:         1180px;
}

html { scroll-behavior: smooth; }

body,
.entry-content,
.kadence-content {
	font-family: var(--jd-font-body);
	color: var(--jd-ink);
	background: var(--jd-bg);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.kadence-entry-title {
	font-family: var(--jd-font-heading);
	color: var(--jd-ink);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.18;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

a { color: var(--jd-terracotta-text); text-decoration: none; }
a:hover, a:focus { color: var(--jd-terracotta-d); text-decoration: underline; }
/* Inline content links inside paragraphs and lists must be underlined (a11y: don't rely on color alone) */
.entry-content p a,
.entry-content li a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.entry-content p a:hover,
.entry-content li a:hover { text-decoration-thickness: 2px; }
/* Keep buttons, cards, and nav links un-underlined */
.entry-content .jd-related a,
.entry-content .jd-card-link,
.entry-content .jd-btn,
.entry-content .jhb-pill,
.entry-content .jhb-btn { text-decoration: none; }

.entry-content p { color: var(--jd-ink-soft); }

/* Buttons */
.jd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 14px 26px;
	font-family: var(--jd-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	border-radius: var(--jd-radius-sm);
	border: 1px solid transparent;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
	text-decoration: none;
	line-height: 1;
}
.jd-btn:hover, .jd-btn:focus { text-decoration: none; transform: translateY(-1px); }
.jd-btn-primary { background: var(--jd-terracotta-d); color: #fff; font-weight: 700; }
.jd-btn-primary:hover, .jd-btn-primary:focus { background: #834A2F; color: #fff; }
.jd-btn-secondary { background: transparent; color: var(--jd-ink); border-color: var(--jd-line-strong); }
.jd-btn-secondary:hover, .jd-btn-secondary:focus { background: var(--jd-ink); color: #fff; border-color: var(--jd-ink); }
.jd-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.jd-btn-ghost:hover, .jd-btn-ghost:focus { background: rgba(255,255,255,0.12); color: #fff; }

/* Breadcrumbs */
.jd-breadcrumbs {
	font-size: 0.85rem;
	color: var(--jd-muted);
	padding: 18px 0 0;
	max-width: var(--jd-maxw);
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 32px);
	padding-right: clamp(20px, 4vw, 32px);
}
.jd-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jd-breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--jd-line-strong); }
.jd-breadcrumbs a { color: var(--jd-sage-dark); }
.jd-breadcrumbs a:hover { color: var(--jd-terracotta); }

/* Page hero (used by single page template) */
.jd-page-hero {
	background: linear-gradient(180deg, var(--jd-bg) 0%, var(--jd-bg-warm) 100%);
	padding: 56px 0 64px;
	border-bottom: 1px solid var(--jd-line);
}
.jd-page-hero .jd-wrap { max-width: var(--jd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.jd-page-hero h1 { margin: 0 0 18px; max-width: 820px; }
.jd-page-hero .jd-lede { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--jd-ink-soft); max-width: 760px; margin: 0; }
.jd-eyebrow {
	font-family: var(--jd-font-heading);
	color: var(--jd-sage-dark);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

/* Card grid for SEO landing sections */
.jd-grid { display: grid; gap: 22px; }
.jd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-card {
	background: var(--jd-bg-soft);
	border: 1px solid var(--jd-line);
	border-radius: var(--jd-radius-md);
	padding: 28px;
	box-shadow: var(--jd-shadow-sm);
}
.jd-card h3 { margin: 0 0 10px; font-size: 1.18rem; }
.jd-card p { margin: 0; color: var(--jd-ink-soft); }
.jd-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--jd-ink-soft); }
.jd-card li + li { margin-top: 6px; }

/* FAQ */
.jd-faq { max-width: 820px; margin: 0 auto; }
.jd-faq details {
	background: var(--jd-bg-soft);
	border: 1px solid var(--jd-line);
	border-radius: var(--jd-radius-sm);
	padding: 18px 22px;
	margin-bottom: 12px;
}
.jd-faq summary {
	font-family: var(--jd-font-heading);
	font-weight: 600;
	cursor: pointer;
	color: var(--jd-ink);
	font-size: 1.02rem;
}
.jd-faq details[open] summary { color: var(--jd-terracotta); }
.jd-faq details p { margin: 12px 0 0; color: var(--jd-ink-soft); }

/* CTA strip */
.jd-cta-strip {
	background: var(--jd-ink);
	color: #fff;
	border-radius: var(--jd-radius-lg);
	padding: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 56px auto;
	max-width: calc(var(--jd-maxw) - 48px);
}
.jd-cta-strip h2 { color: #fff; margin: 0 0 6px; font-size: 1.5rem; }
.jd-cta-strip p { color: rgba(255,255,255,0.78); margin: 0; }

/* Sage band */
.jd-band-sage {
	background: var(--jd-sage);
	color: #fff;
	padding: 14px 0;
	font-family: var(--jd-font-heading);
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-align: center;
}
.jd-band-sage a { color: #fff; text-decoration: underline; }

/* Internal-link related list */
.jd-related {
	background: var(--jd-bg-warm);
	border-radius: var(--jd-radius-md);
	padding: 28px;
	margin-top: 36px;
}
.jd-related h2 { margin-top: 0; font-size: 1.25rem; }
.jd-related ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-related a { color: var(--jd-ink); border-bottom: 1px dotted var(--jd-line-strong); padding-bottom: 2px; }
.jd-related a:hover { color: var(--jd-terracotta); border-color: var(--jd-terracotta); }

/* Improve content readability inside posts/pages */
.entry-content > * { max-width: var(--jd-maxw); }
.entry-content > .alignwide { max-width: calc(var(--jd-maxw) + 120px); }
.entry-content h2 { margin-top: 2.2em; }

/* Responsive */
@media (max-width: 900px) {
	.jd-grid-3, .jd-grid-2 { grid-template-columns: 1fr; }
	.jd-related ul { grid-template-columns: 1fr; }
	.jd-cta-strip { padding: 28px; margin: 36px 16px; }
}

/* Reduce flashy effects per brand direction */
* { scroll-margin-top: 80px; }
.wp-block-image img { border-radius: var(--jd-radius-sm); }

/* ----- Kadence integration tweaks ----- */
/* Hide Kadence page title bar + entry header on the homepage; the [javier_homepage]
   shortcode renders its own full-bleed hero. */
.home.page .site-container > .entry-hero,
.home.page .site-container > .entry-hero-container,
.home.page .entry-header,
.home.page .content-bg .entry-header,
.home.page .content-container .entry-header,
.home.page > #wrapper > .entry-hero,
body.home .wp-site-blocks .entry-hero {
	display: none !important;
}
/* Full-bleed hero — escape the Kadence content container width restrictions */
.home .entry-content > .jhb-homepage,
.home .entry-content .jhb-homepage {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
/* Remove default content padding inside the homepage so sections breathe edge-to-edge
   AND so the hero sits flush against the header (no tan spacer). */
.home .entry-content { padding: 0 !important; margin: 0 !important; }
.home .site-main { padding: 0 !important; margin: 0 !important; }
.home article.entry { padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.home .entry-content-wrap { padding: 0 !important; margin: 0 !important; }
.home .content-container { padding: 0 !important; margin: 0 !important; }
.home .content-area { padding: 0 !important; margin: 0 !important; }
/* Kadence inserts a content-area top margin globally — neutralize on home */
body.home .content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
body.home .entry-content > * { margin-top: 0; }
/* The very first child (the hero section) sits flush against the header */
body.home .jhb-homepage > .jhb-hero { margin-top: 0; }

/* Page-hero (city/landing pages) — escape container too so the warm band spans full width */
.entry-content > .jd-page-hero,
.entry-content .jd-page-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
/* CTA strip + related — keep within content but expand mildly */
.entry-content > .jd-cta-strip,
.entry-content > .jd-related { max-width: 100%; }

/* Top utility bar idea: phone CTA near nav. Kept minimal. */
.jd-top-utility { font-family: var(--jd-font-heading); font-size: 0.82rem; letter-spacing: 0.06em; }

/* Header phone CTA styling (if menu item with class .jd-header-phone is used) */
.jd-header-phone {
	background: var(--jd-terracotta) !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 8px 14px !important;
	font-weight: 600;
}
.jd-header-phone:hover { background: var(--jd-terracotta-d) !important; color: #fff !important; }

/* Focus visibility */
a:focus-visible, button:focus-visible, .jd-btn:focus-visible {
	outline: 2px solid var(--jd-terracotta);
	outline-offset: 3px;
}

/* ============================================================
   STICKY MOBILE CTA BAR — only shows on small screens.
   Adds a tap-to-call + contact CTA fixed to the bottom of the
   viewport. Pure CSS + tiny markup injected by functions.php.
   ============================================================ */
.jd-mobile-cta {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9000;
	background: var(--jd-ink);
	border-top: 1px solid rgba(255,255,255,0.12);
	padding: 8px;
	gap: 8px;
	box-shadow: 0 -10px 24px rgba(0,0,0,0.18);
}
.jd-mobile-cta a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	font-family: var(--jd-font-heading);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 6px;
	min-height: 44px;
}
.jd-mobile-cta a.jd-mobile-call { background: var(--jd-terracotta-d); color: #fff; }
.jd-mobile-cta a.jd-mobile-call:hover { background: #834A2F; color: #fff; }
.jd-mobile-cta a.jd-mobile-text { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.jd-mobile-cta a.jd-mobile-text:hover { background: rgba(255,255,255,0.1); }
.jd-mobile-cta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 768px) {
	.jd-mobile-cta { display: flex; }
	body { padding-bottom: 76px; /* offset for sticky bar */ }
}

/* ============================================================
   FOOTER POLISH
   ============================================================ */
.site-footer,
.kadence-footer-row {
	background: var(--jd-ink) !important;
	color: #fff;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--jd-sand); }
.site-footer .footer-html,
.site-footer .widget-area {
	color: rgba(255,255,255,0.85);
}
.site-footer .footer-html-1 { font-family: var(--jd-font-heading); font-weight: 600; }
.site-footer .footer-html-1 strong { display: block; font-size: 1.2rem; color: #fff; margin-bottom: 4px; }

/* Improve Kadence section padding rhythm */
.entry-content > * + * { margin-top: 1.2em; }
.entry-content > h2 { margin-top: 2.4em; }
.entry-content > .wp-block-html + .wp-block-html { margin-top: 0; }
.entry-content .jd-related { margin-top: 3em; }
.entry-content .jd-cta-strip { margin-top: 3em; }

/* Card grid harmonization */
.jd-grid > .jd-card,
.jhb-grid > .jhb-card {
	display: flex;
	flex-direction: column;
}
.jd-card h3, .jhb-card h3 { min-height: 0; }
.jd-card p, .jhb-card p { flex: 1; }

/* Smooth scroll for anchor links to FAQ etc */
html { scroll-behavior: smooth; }

/* Tighten paragraph rhythm inside entry content */
.entry-content p { font-size: 1.02rem; line-height: 1.72; }
.entry-content li { line-height: 1.7; margin-bottom: 6px; }

/* Section dividers — subtle warm line between sections */
.entry-content > .wp-block-html + h2 { padding-top: 1.2em; border-top: 1px solid var(--jd-line); }

/* ============================================================
   NOTARY SECTION — sage-accented, calm-professional variant.
   Applied automatically to pages where body has .notary-page
   (added via the page generator's hero output).
   ============================================================ */

/* Notary hero — calm, sage-toned trust band immediately under title. */
.jd-notary-hero {
	background: linear-gradient(180deg, var(--jd-sage) 0%, var(--jd-sage-dark) 100%);
	color: #fff;
	padding: 48px 0 56px;
	border-bottom: 4px solid var(--jd-sage-dark);
}
.jd-notary-hero .jd-wrap { max-width: var(--jd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.jd-notary-hero .jd-eyebrow { color: rgba(255,255,255,0.95); }
.jd-notary-hero h1 { color: #fff; margin: 0 0 14px; }
.jd-notary-hero .jd-lede { color: rgba(255,255,255,0.95); font-size: clamp(1.05rem,1.4vw,1.18rem); max-width: 720px; }
.jd-notary-hero-actions {
	display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}
.jd-notary-hero-actions .jd-btn {
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 6px;
}
.jd-notary-hero-actions a.call {
	background: #FFFFFF;
	color: var(--jd-sage-dark);
	text-decoration: none;
}
.jd-notary-hero-actions a.call:hover { background: #FFF7E6; color: var(--jd-ink); }
.jd-notary-hero-actions a.contact {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.7);
	text-decoration: none;
}
.jd-notary-hero-actions a.contact:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* Notary trust badges row — directly under hero */
.jd-notary-trust {
	background: var(--jd-bg-soft);
	border-bottom: 1px solid var(--jd-line);
	padding: 18px 0;
}
.jd-notary-trust ul {
	max-width: var(--jd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px);
	list-style: none;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
	font-family: var(--jd-font-heading);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--jd-ink-soft);
}
.jd-notary-trust li { display: flex; align-items: center; gap: 6px; }
.jd-notary-trust li::before {
	content: "";
	width: 16px; height: 16px;
	background: var(--jd-sage-dark);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / contain no-repeat;
	flex-shrink: 0;
}

/* Notary CTA strip — sage variant of the dark CTA */
.jd-notary-cta {
	background: var(--jd-sage-dark);
	color: #fff;
	padding: 36px;
	border-radius: var(--jd-radius-lg);
	margin: 56px auto;
	max-width: calc(var(--jd-maxw) - 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}
.jd-notary-cta h2 { color: #fff; margin: 0 0 6px; font-size: 1.4rem; }
.jd-notary-cta p { color: rgba(255,255,255,0.95); margin: 0; }
.jd-notary-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jd-notary-cta .actions a {
	padding: 14px 24px;
	border-radius: 6px;
	font-family: var(--jd-font-heading);
	font-weight: 700;
	text-decoration: none;
}
.jd-notary-cta .actions a.call { background: #fff; color: var(--jd-sage-dark); }
.jd-notary-cta .actions a.call:hover { background: #F8F5F0; }
.jd-notary-cta .actions a.email { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
.jd-notary-cta .actions a.email:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* Notary service cards — calmer than real-estate cards */
.jd-notary-services { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 28px 0; }
.jd-notary-service {
	background: var(--jd-bg-soft);
	border: 1px solid var(--jd-line);
	border-left: 4px solid var(--jd-sage-dark);
	border-radius: var(--jd-radius-sm);
	padding: 22px;
}
.jd-notary-service h3 {
	font-size: 1.08rem; margin: 0 0 8px;
	font-family: var(--jd-font-heading);
}
.jd-notary-service p { margin: 0; color: var(--jd-ink-soft); font-size: 0.96rem; }
.jd-notary-service a {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 12px;
	font-family: var(--jd-font-heading);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--jd-sage-dark);
	text-decoration: none;
}
.jd-notary-service a:hover { color: var(--jd-ink); }
.jd-notary-service a::after { content: "→"; transition: transform 180ms ease; }
.jd-notary-service a:hover::after { transform: translateX(3px); }

/* ============================================================
   JAVIER LOGO — injects the JR monogram + wordmark into the
   Kadence site-branding slot.

   Kadence renders:
     .site-branding > a.brand > .site-title-wrap > .site-title

   Strategy: hide the text title (visually but accessible), then
   give the .brand anchor a background-image of the logo.
   ============================================================ */
.site-branding .site-title,
.site-branding .site-title-wrap {
	font-size: 0 !important;
	line-height: 0 !important;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.site-branding .site-title::before {
	/* SR-only fallback so screen readers still see the brand name */
	content: "Javier Rodriguez Real Estate";
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.site-branding a.brand,
.site-branding .brand {
	display: inline-block;
	width: clamp(170px, 20vw, 240px);
	height: clamp(54px, 6.5vw, 76px);
	background: url("https://javrodrealtor.com/wp-content/uploads/2026/05/javi-logo.png") left center / contain no-repeat;
	text-decoration: none;
}
.site-branding .site-description { display: none !important; }

/* Header breathing room + lighter menu weight */
.site-main-header-wrap,
#masthead .site-main-header-inner-wrap {
	min-height: 88px;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 500 !important;
	font-size: 0.92rem !important;
	letter-spacing: 0.04em;
	color: var(--jd-ink) !important;
	padding-left: 1em !important;
	padding-right: 1em !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
	color: var(--jd-brand-gold-d) !important;
}
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--jd-brand-gold-d) !important;
}
/* Phone link surfaces in header — terracotta isn't appropriate; use gold */
.header-navigation a[href^="tel:"] {
	background: var(--jd-brand-gold);
	color: #fff !important;
	padding: 8px 18px !important;
	border-radius: 6px;
	font-weight: 600 !important;
}
.header-navigation a[href^="tel:"]:hover {
	background: var(--jd-brand-gold-d);
}

/* On the very dark hero pages or transparent-header views, the logo PNG
   has an off-white background — we keep that since the PNG is on a warm
   background (matches site bg). If a transparent-PNG version is uploaded
   later, swap the URL above. */

/* Footer logo (in the dark NAP block) — shown above NAP text */
.jd-footer-logo {
	display: inline-block;
	width: 220px;
	max-width: 60vw;
	height: auto;
	margin-bottom: 16px;
	/* The PNG has a light background; on a dark footer we apply a subtle
	   light-warm background tile so it doesn't look pasted-in. */
	background: #F8F5F0;
	padding: 10px 14px;
	border-radius: 6px;
}

/* ============================================================
   PLAYFAIR DISPLAY — display serif used ONLY on the homepage
   hero h1, to echo the logo wordmark. Rest of the site stays in
   Poppins for clean modern feel.
   ============================================================ */
.jhb-hero h1,
.jd-display-serif,
body.home .entry-title {
	font-family: var(--jd-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Decorative gold underline under hero h1 — echoes the rule under
   "REAL ESTATE" in the logo wordmark. */
.jhb-hero h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--jd-brand-gold);
	margin-top: 20px;
}

/* ============================================================
   CENTURY 21 BRAND STRIP — sits above the Kadence header.
   Quiet, single-line affiliation bar with gold accent.
   ============================================================ */
.jd-c21-strip {
	background: var(--jd-c21-grey);
	color: #fff;
	font-family: var(--jd-font-heading);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	padding: 8px 0;
	text-align: center;
}
.jd-c21-strip .jd-c21-mark {
	font-weight: 700;
	color: var(--jd-c21-gold);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.jd-c21-strip .jd-c21-sep {
	margin: 0 12px;
	opacity: 0.4;
}
.jd-c21-strip a { color: #fff; text-decoration: none; }
.jd-c21-strip a:hover { color: var(--jd-c21-gold); }
@media (max-width: 600px) {
	.jd-c21-strip { font-size: 0.72rem; letter-spacing: 0.04em; padding: 6px 12px; }
	.jd-c21-strip .jd-c21-sep { margin: 0 6px; }
}

/* Century 21 footer compliance block */
.jd-c21-compliance {
	background: #0E0E0F;
	color: rgba(255,255,255,0.78);
	padding: 28px 0 32px;
	font-size: 0.82rem;
	line-height: 1.65;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.jd-c21-compliance .jd-wrap {
	max-width: var(--jd-maxw);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 32px);
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 780px) {
	.jd-c21-compliance .jd-wrap {
		grid-template-columns: auto 1fr auto;
		gap: 32px;
	}
}
.jd-c21-compliance .jd-c21-logo {
	font-family: var(--jd-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.32em;
	color: var(--jd-c21-gold);
	text-transform: uppercase;
	white-space: nowrap;
}
.jd-c21-compliance .jd-c21-logo .reg {
	font-size: 0.62rem;
	vertical-align: super;
	margin-left: 2px;
	color: var(--jd-c21-gold);
}
.jd-c21-compliance .jd-c21-legal { margin: 0; }
.jd-c21-compliance .jd-c21-legal strong { color: #fff; }
.jd-c21-compliance .jd-eho {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--jd-font-heading);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.86);
	white-space: nowrap;
}
.jd-c21-compliance .jd-eho-glyph {
	width: 28px; height: 28px;
	background: #fff;
	color: #000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-family: serif;
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0;
}

/* Notary fee/process table styling */
.jd-notary-fees {
	border-collapse: collapse;
	width: 100%;
	max-width: 760px;
	margin: 22px 0;
	font-size: 0.96rem;
}
.jd-notary-fees th,
.jd-notary-fees td {
	border: 1px solid var(--jd-line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.jd-notary-fees th {
	background: var(--jd-bg-warm);
	font-family: var(--jd-font-heading);
	font-weight: 600;
	color: var(--jd-ink);
}
.jd-notary-fees td.fee { font-family: var(--jd-font-heading); font-weight: 600; white-space: nowrap; }