/**
 * KI visual skin — Kadence Header / Footer Builder scoped restyling.
 *
 * Colour, background, border, spacing and typography only on Kadence's own
 * real classes (header, off-canvas drawer, footer) plus the KI Core shortcode
 * output classes. Brand values are CSS variables, set once in the child theme
 * (or Customizer → Additional CSS):
 *
 *   :root {
 *     --ki-color-accent: #24bef5;            brand accent
 *     --ki-color-accent-deep: #40a2d9;       hover / deeper accent
 *     --ki-color-dark-surface: #222222;      dark panels
 *     --ki-footer-texture: url("…jpg");      footer background photo/texture (optional)
 *     --ki-dark-texture: url("…jpg");        "Connect With Us" dark texture (optional)
 *     --ki-mobile-nav-bg-image: url("…jpg"); photo behind the full-screen drawer skin (optional)
 *   }
 */
:root {
	/* Dark surface (off-canvas mobile drawer, footer): sampled dark charcoal
	   cluster (#202020–#282828 range across both reference images). */
	--ki-color-dark-surface: #222222;
	--ki-color-dark-surface-text: #f2f2f2;
	--ki-color-dark-surface-muted: #b8b8b8;
	--ki-color-dark-surface-border: rgba(255, 255, 255, 0.14);

	/* Brand accent: sampled bright cyan-blue cluster, consistent across
	   both reference images (#24bef5 primary cluster, #40a2d9 secondary/
	   deeper cluster). */
	--ki-color-accent: #24bef5;
	--ki-color-accent-deep: #40a2d9;

	/* Background photo for the mobile off-canvas drawer, matching the
	   reference design's photo-with-dark-overlay treatment. Previously left
	   empty because no reference image asset had been supplied — now set to
	   the bundled listings-01.jpg (assets/images/), referenced relative to
	   this stylesheet's own location so no PHP/enqueue change is needed.
	   The dark overlay itself is layered on in the ".mobile-navigation"
	   rule below via background-image, not baked into this variable, so an
	   admin can still override just the photo via Additional CSS without
	   losing the overlay. */
	--ki-mobile-nav-bg-image: none;

	/* Light-surface ink (footer lower/"main" section, which has a WHITE
	   textured background, not the dark surface used elsewhere). Verified
	   live via getComputedStyle(document.documentElement) on the reference site
	   — --primary-text-color: #000000 — not estimated. The existing
	   dark-surface tokens above don't cover this case, since none of them
	   represent ink-on-light; this is the one new token this file adds. */
	--ki-color-ink: #000000;
	--ki-color-ink-muted: rgba(0, 0, 0, 0.65);
}

/* ======================================================================
   HEADER — desktop
   Wrapper classes confirmed in:
   inc/template-functions/header-functions.php (row wrapper class builder,
   `'site-' . $row . '-header-wrap site-header-row-container ...'`)
   ====================================================================== */

/* Header row background/border. Kadence's own Customizer already offers
   per-row background color controls — this rule exists only as a
   fallback/accent (a subtle bottom border) that Kadence's color picker
   does not expose on its own, keeping the header visually anchored the
   way the reference design's thin header/hero division reads. Does not
   touch layout, height, or position. */
.site-main-header-wrap {
	border-bottom: 1px solid var(--ki-color-dark-surface-border);
}

/* Primary navigation link color/hover accent. Confirmed real classes:
   #site-navigation.main-navigation.header-navigation (desktop). Kadence's
   Customizer already controls base nav color; this adds the brand accent
   specifically on hover/focus, matching the reference's cyan link-hover
   treatment, without touching Kadence's dropdown-toggle JS/classes. */
.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--ki-color-accent-deep);
}

/* Header "Button" row (used for the global CTA per docs/MAINSAIL-CHILD-
   THEME.md §6). Confirmed real class: `.button.header-button` built in
   header-functions.php's header_button(). Kadence's own Button Style
   customizer control already sets a base color; this rule provides the
   specific brand-accent fill so the CTA reads as "the same blue" as the
   reference design's phone/CTA treatment, and is scoped ONLY to the
   header-button class — it does not restyle every button on the site. */
.header-button.button-style-standard,
.header-button.button-style-outline {
	background-color: var(--ki-color-accent-deep);
	border-color: var(--ki-color-accent-deep);
	color: #ffffff;
}

/* ----------------------------------------------------------------------
   Header icon row (search / email / phone), right of the main nav and
   left of the mobile-drawer burger icon. Reference: the reference site's
   `.site-header__info` — a plain <ul> of icon-only links added via
   Kadence's "HTML" header item, whose header_html() render function
   already calls do_shortcode() (confirmed in
   kadence/inc/template-functions/header-functions.php), so
   [ki_phone]/[ki_email] shortcodes work directly pasted into
   that Kadence header HTML block — unlike the plain WP "Custom HTML"
   *widget* used in the footer sidebar, which does not run do_shortcode()
   by default. Markup to paste there:

   <ul class="site-header__info">
     <li class="site-header__info-item site-header__info-item--search">
       <a href="REPLACE_WITH_SEARCH_URL" aria-label="Search Properties">
         <i class="site-header__info-icon site-header__info-icon--search" aria-hidden="true"></i>
       </a>
     </li>
     <li class="site-header__info-item site-header__info-item--email">
       [ki_email link="yes"]
     </li>
     <li class="site-header__info-item site-header__info-item--phone">
       [ki_phone type="primary" link="yes"]
     </li>
   </ul>

   Icon-only presentation is done in CSS (font-size:0 on the link, with the
   icon itself sized in px via its own width/height so it isn't affected)
   rather than by changing the shortcode's own output, since KI Core
   is a locked plugin — no shortcode/schema change was needed here.
   ---------------------------------------------------------------------- */
.site-header__info {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5rem;
}

/* 44px circular hit-area per icon, matching the reference site's padded-on-
   hover treatment: a soft round background appears on hover/focus, color
   depending on the current header state (plain vs. transparent vs. the
   scrolled/sticky solid state — see the two state-scoped overrides
   below), rather than a static background at all times. */
/* Full-height rectangular hover block, matching the reference site's own
   .site-header__info ul>li>a CSS exactly (confirmed by the user from the
   live site): width max(6.25vw,60px), height:100% of the header row —
   not the small 44px circle this used to be. height:100% needed setting
   explicitly on every ancestor up to the row (Kadence's own
   .header-html/.header-html-inner included — they had no explicit height
   of their own, so this <a> was only ever as tall as its own content,
   44px, never the real ~100px+ row height). */
.header-html,
.header-html-inner {
	height: 100%;
}

.site-header__info,
.site-header__info-item {
	height: 100%;
}

.site-header__info-item a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	width: max(6.25vw, 60px);
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	color: var(--ki-color-accent);
	background-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Transparent header (Customizer → Header → Transparent Header): hover
   shows a solid black round background, icon stays light for contrast. */
.transparent-header .site-header__info-item a:hover,
.transparent-header .site-header__info-item a:focus {
	background-color: #000000;
	color: #ffffff;
}

/* Scrolled/sticky solid header (Customizer → Header → Sticky Header):
   hover shows the brand accent-blue round background with the icon
   inverted to black, per explicit request. */
.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header__info-item a:hover,
.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header__info-item a:focus {
	background-color: var(--ki-color-accent);
	color: #000000;
}

/* Plain/default header (Transparent Header customizer option off, and
   not in the scrolled-sticky state): same black background + white icon
   treatment as the transparent-header state, per explicit request — this
   used to only change the icon color with no background block, which is
   the "normal header not reflecting" gap. Declared before the
   .transparent-header/.kadence-sticky-header rules lose here on
   cascade order alone since specificity is equal across all three
   (single class + a:hover) — reordered below them so the more specific
   header-state rules win over this default. */
.site-header__info-item a:hover,
.site-header__info-item a:focus {
	background-color: #000000;
	color: #ffffff;
}

.site-header__info-icon,
.site-header__info-item .ki-phone-link::before,
.site-header__info-item .ki-email-link::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
}

/* House/search icon: house-with-magnifying-glass line art (same
   composition as KI Journeys' "Preparing to Buy" icon and the
   Zillow social icon). Sized up from the shared 24px box.
   stroke-width history: 1 (too thin/faint) -> 2.4 (too heavy, per direct
   follow-up feedback) -> 1.75 here, a middle weight that still reads as
   bold/solid next to the filled envelope/phone icons without the
   thick-stroke look. A true filled/solid redraw (house silhouette +
   punched-ring lens) was considered but needs the house shrunk and
   repositioned to avoid overlapping the lens — parked as a possible
   future revision rather than risked under time pressure here. */
.site-header__info-icon--search {
	width: 30px;
	height: 30px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4.5l8 6.5'/%3E%3Cpath d='M6 9.5v9a.5.5 0 0 0 .5.5h4.5V13.5h2v5.5h4.5a.5.5 0 0 0 .5-.5V9.5'/%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M17.15 17.15 19.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4.5l8 6.5'/%3E%3Cpath d='M6 9.5v9a.5.5 0 0 0 .5.5h4.5V13.5h2v5.5h4.5a.5.5 0 0 0 .5-.5V9.5'/%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M17.15 17.15 19.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Solid (filled) envelope, replacing the earlier outline/stroke version
   per request. */
.site-header__info-item .ki-email-link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a1 1 0 0 1 1.51-.86L12 9.15l8.49-5.01A1 1 0 0 1 22 5v1.19l-9.47 5.59a1 1 0 0 1-1.02 0L2 6.19V5Zm0 3.94V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8.94l-9.47 5.59a1 1 0 0 1-1.02 0L2 8.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a1 1 0 0 1 1.51-.86L12 9.15l8.49-5.01A1 1 0 0 1 22 5v1.19l-9.47 5.59a1 1 0 0 1-1.02 0L2 6.19V5Zm0 3.94V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8.94l-9.47 5.59a1 1 0 0 1-1.02 0L2 8.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-header__info-item .ki-phone-link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Search/email/phone hide below 769px (unchanged design intent); the
   menu trigger item is deliberately NOT included here — see below, it now
   shows at every width. */
@media (max-width: 768px) {
	.site-header__info-item--search,
	.site-header__info-item--email,
	.site-header__info-item--phone {
		display: none;
	}
}

/* ======================================================================
   Off-canvas full-width drawer — desktop AND mobile, one shared design.
   Kadence's "Mobile HTML" field was tried for mobile-specific content but
   turned out to render in the always-visible mobile header bar (real
   ancestor: .site-mobile-header-wrap, NOT .mobile-navigation) — never
   inside a drawer at all — so this custom panel runs at every width
   instead of splitting behavior across two different mechanisms.
   Kadence's own "Mobile Trigger" header item still can't be dragged onto
   a desktop row either way (confirmed in the Header Builder's available
   desktop items: search, button, social, secondary navigation — no
   trigger), so a custom panel was the only option regardless.
   ====================================================================== */

.site-header__info-item--menu {
	display: block;
}

.site-header__info-icon--menu {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='11' width='24' height='2'/%3E%3Crect y='18' width='24' height='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='11' width='24' height='2'/%3E%3Crect y='18' width='24' height='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-offcanvas {
	position: fixed;
	inset: 0;
	/* Below .ki-floating-call (1000000) so the floating call button
	   stays visible/clickable while this menu is open, per explicit
	   request — above .ki-floating-socials (999997) so THOSE stay
	   hidden behind it instead (this panel already has its own social
	   icons; showing both would duplicate them). */
	z-index: 999999;
	display: none;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
		linear-gradient(#808080, #808080),
		var(--ki-mobile-nav-bg-image);
	background-blend-mode: normal, saturation;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ki-offcanvas.is-open {
	display: block;
}

/* The bordered frame, inset from the viewport edges rather than bleeding
   to the screen edge — this IS the visible menu; .ki-offcanvas
   itself is just the full-screen backdrop/photo behind it. Outside inset
   and inside padding both per exact spec: a fluid value that keeps some
   breathing room at very small widths (max()) while scaling up with the
   viewport on larger screens. */
.ki-offcanvas__frame {
	position: absolute;
	inset: calc(2 * max(1.875vw, 19px));
	border: 1px solid rgba(255, 255, 255, 0.55);
	overflow-y: auto;
	padding: max(4vw, 30px) 0px 30px;
	color: var(--ki-color-dark-surface-text);
}

/* Rebuilt as a single mask-icon rather than two absolutely-positioned
   rotated <span> bars (which was rendering as a single line — one bar
   wasn't showing, likely a Kadence button-reset conflict with the
   absolute-positioning trick). The reference site's own close-button CSS
   uses a large padding + equal negative margin (top:0;right:0 with
   margin:min(-1.875vw,-30px)) to pull the button's hit-area flush to the
   frame's true corner while keeping the icon visually inset — verified
   live here via getBoundingClientRect() that this actually overflows
   OUTSIDE the frame in this markup (button top ended up above the
   frame's own top edge), so a plain, verified-correct inset is used
   instead: positioned near the corner directly, with ordinary padding
   for the hover square. */
.ki-offcanvas__close {
	position: absolute;
	top: max(1.25vw, 16px);
	right: max(1.25vw, 16px);
	/* Explicit equal width/height rather than relying on padding + the
	   icon's own box to produce a square implicitly — a plain <button>
	   picked up enough default sizing to end up rectangular instead. */
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	font-size: max(1.188vw, 17px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--ki-color-dark-surface-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ki-offcanvas__close:hover,
.ki-offcanvas__close:focus {
	background-color: #ffffff;
	color: #000000;
}

.ki-offcanvas__close-icon {
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.29l6.29 6.3 6.3-6.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.29l6.29 6.3 6.3-6.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-offcanvas__logo {
	text-align: center;
	margin-bottom: 2.5rem;
}

.ki-offcanvas__logo img {
	display: inline-block;
	/* filter: brightness() was tried for "brighter" but washed out the
	   logo's actual brand color — removed. Size now does the "bigger"
	   half of the request on its own; the darker overlay (0.6 -> 0.8)
	   above does more for legibility than a brightness filter would
	   anyway, without altering the logo's own color. */
	width: 260px;
	height: auto;
}

@media (max-width: 600px) {
	.ki-offcanvas__logo img {
		/* Proportional to the 260px desktop width at roughly the same
		   ratio as the frame's own inset/padding step down at this
		   breakpoint (20px -> 10px, half). */
		width: 160px;
	}
}

/* Widths below match measurements taken directly off the reference site
   at a 14" MacBook viewport: its nav-menu block is ~288px wide and its
   contact/social block ~320px wide. flex-grow:0 on both is what actually
   matters here — the earlier flex:2/flex:1 (both growable) let each
   block stretch to fill the 1100px container, which read as "scattered"
   with too much gap; fixed, non-growing widths keep them exactly as
   compact as the reference. */
.ki-offcanvas__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
}

.ki-offcanvas__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	flex: 0 1 288px;
}

.ki-offcanvas__menu-col {
	flex: 1 1 130px;
}

.ki-offcanvas__menu-column {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ki-offcanvas__menu-column > li {
	margin-bottom: 1.75rem;
}

/* text-decoration:none here overrides Kadence's own
   .inner-link-style-normal a:not(.button){text-decoration:underline} —
   this panel is pasted inside the same Kadence header "HTML" item as the
   search/email/phone icons, so it inherits that wrapper's link-style
   class along with everything else in it. */
.ki-offcanvas__menu-column > li > a {
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: 23px;
	font-weight: 400;
	color: #ffffff;
	text-decoration: none;
}

.ki-offcanvas__submenu {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.ki-offcanvas__submenu a {
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: 15px;
	font-weight: 300;
	color: #ffffff80;
	line-height: 2;
	text-decoration: none;
}

@media (max-width: 600px) {
	.ki-offcanvas__menu-column > li > a {
		font-size: 23px;
	}

	.ki-offcanvas__submenu a {
		font-size: 15px;
	}
}

.ki-offcanvas__menu-column a:hover,
.ki-offcanvas__menu-column a:focus {
	color: var(--ki-color-accent);
}

.ki-offcanvas__info {
	flex: 0 1 320px;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 17px;
	font-weight: 300;
}

@media (max-width: 600px) {
	.ki-offcanvas__info {
		font-size: 17px;
	}
}

/* Scoped to .ki-offcanvas__contact itself, NOT a wrapper class:
   this same markup was, at one point, pasted in two different places
   (this panel, and Kadence's Mobile HTML field) with different
   ancestors — keeping it self-contained means it renders correctly
   wherever it's used. */
.ki-offcanvas__contact {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.ki-offcanvas__contact li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.65rem;
}

/* Solid phone/envelope/GPS-pin icons, matched by the contact list's fixed
   item order (phone, email, address x2) rather than by content, since
   the shortcodes' own output has no class to hook an icon-type off of.
   Reuses the exact phone/envelope glyphs already defined for
   .site-header__info above (already solid, not outline) for visual
   consistency; the GPS pin is new. */
.ki-offcanvas__contact li::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	background-color: currentColor;
}

.ki-offcanvas__contact li:nth-child(1)::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-offcanvas__contact li:nth-child(2)::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a1 1 0 0 1 1.51-.86L12 9.15l8.49-5.01A1 1 0 0 1 22 5v1.19l-9.47 5.59a1 1 0 0 1-1.02 0L2 6.19V5Zm0 3.94V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8.94l-9.47 5.59a1 1 0 0 1-1.02 0L2 8.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a1 1 0 0 1 1.51-.86L12 9.15l8.49-5.01A1 1 0 0 1 22 5v1.19l-9.47 5.59a1 1 0 0 1-1.02 0L2 6.19V5Zm0 3.94V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8.94l-9.47 5.59a1 1 0 0 1-1.02 0L2 8.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-offcanvas__contact li:nth-child(3)::before,
.ki-offcanvas__contact li:nth-child(4)::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.34 7.02 11.6a1 1 0 0 0 1.96 0C13.28 21.34 20 15.25 20 10c0-4.42-3.58-8-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.34 7.02 11.6a1 1 0 0 0 1.96 0C13.28 21.34 20 15.25 20 10c0-4.42-3.58-8-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-offcanvas__contact a,
.ki-offcanvas__contact .ki-address {
	color: inherit;
	text-decoration: none;
}

.ki-offcanvas__contact a:hover,
.ki-offcanvas__contact a:focus {
	color: var(--ki-color-accent);
}

/* Social icons inside the off-canvas panel: white icon, blue circular
   border, inverting to blue background + black icon on hover — a
   distinct treatment from the footer/floating-socials icons elsewhere,
   scoped to .ki-offcanvas__info so it doesn't affect those. */
.ki-offcanvas__info .ki-socials {
	margin-top: 0.5rem;
}

.ki-offcanvas__info .ki-social-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ki-color-accent);
	color: #ffffff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ki-offcanvas__info .ki-social-item a svg {
	width: 16px;
	height: 16px;
}

.ki-offcanvas__info .ki-social-item a:hover,
.ki-offcanvas__info .ki-social-item a:focus {
	background-color: var(--ki-color-accent);
	color: #000000;
}

@media (max-width: 600px) {
	.ki-offcanvas__frame {
		inset: 10px;
		padding: 2.5rem 1.25rem 2rem;
	}
}

.header-button.button-style-standard:hover,
.header-button.button-style-outline:hover {
	background-color: var(--ki-color-accent);
	border-color: var(--ki-color-accent);
}

/* ======================================================================
   HEADER — mobile / off-canvas drawer
   Wrapper classes confirmed in:
   inc/template-functions/header-functions.php line ~601:
   `#mobile-site-navigation.mobile-navigation.drawer-navigation`
   and line ~603: `.mobile-menu-container.drawer-menu-container`
   Kadence's own Customizer already has a background COLOR control
   (mobile_navigation_background, confirmed in
   inc/customizer/options/header-mobile-nav-options.php) — that native
   control is the correct place to set a plain dark background color
   (Category A). The rules below add ONLY what Kadence's color picker
   cannot: an optional background PHOTO layer (matching the reference
   design's photo-plus-dark-overlay off-canvas panel) and the specific
   sampled dark tone as a CSS fallback if the admin hasn't set the native
   color control yet.
   ====================================================================== */

.mobile-navigation.drawer-navigation {
	background-color: var(--ki-color-dark-surface);
	color: var(--ki-color-dark-surface-text);
}

/*
 * Background photo + dark overlay, matching the reference site's off-canvas
 * panel (.site-offcanvas__bg): a full-bleed photo with a dark scrim so nav
 * text stays legible over it. The scrim is layered on here via a second
 * background-image (linear-gradient) rather than a ::before pseudo-element,
 * so this never needs `position`/`z-index` on Kadence's own drawer element
 * (only background-image is touched, per this file's own convention of
 * never setting layout/position properties on Kadence's JS-driven markup).
 * background-image alone is enough to override Kadence's native
 * mobile_navigation_background color control's photo-less default.
 */
/* Black-and-white photo per request: `filter: grayscale()` on this element
   itself was avoided because CSS filter also desaturates everything
   painted inside it, including the nav text/icons — not just the
   background photo. Instead, a flat 50%-gray layer is blended against the
   photo using `background-blend-mode: saturation` (a standard CSS-only
   grayscale technique: "saturation" blend takes the top layer's
   saturation — zero, since it's a flat gray — combined with the photo's
   own luminosity/hue underneath), then the dark scrim is composited
   normally on top of that already-grayscale result. */
.mobile-navigation.drawer-navigation {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
		linear-gradient(#808080, #808080),
		var(--ki-mobile-nav-bg-image);
	background-blend-mode: normal, saturation;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mobile-navigation.drawer-navigation .mobile-menu-container a {
	color: var(--ki-color-dark-surface-text);
}

.mobile-navigation.drawer-navigation .mobile-menu-container a:hover,
.mobile-navigation.drawer-navigation .mobile-menu-container a:focus {
	color: var(--ki-color-accent);
}

/* Mobile HTML row (holds [ki_phone]/[ki_email]/[ki_address]/
   [ki_socials] per docs/MAINSAIL-CHILD-THEME.md §1). Confirmed real
   class: `.mobile-html` from header-functions.php::mobile_html(). */
.mobile-navigation .mobile-html,
.mobile-navigation .mobile-html a {
	color: var(--ki-color-dark-surface-text);
}

.mobile-navigation .mobile-html a:hover,
.mobile-navigation .mobile-html a:focus {
	color: var(--ki-color-accent);
}

/* ======================================================================
   FOOTER
   Row wrapper classes confirmed in:
   template-parts/footer/footer-row.php:
   `.site-{row}-footer-wrap.site-footer-row-container` (row = top/middle/bottom)
   Outer wrapper confirmed in template-parts/footer/base.php:
   `#colophon.site-footer` > `.site-footer-wrap`
   Widget heading class confirmed in footer-functions.php: `.widget-title`
   ====================================================================== */

#colophon.site-footer {
	background-color: var(--ki-color-dark-surface);
	color: var(--ki-color-dark-surface-muted);
}

#colophon.site-footer a {
	color: var(--ki-color-dark-surface-text);
}

#colophon.site-footer a:hover,
#colophon.site-footer a:focus {
	color: var(--ki-color-accent);
}

#colophon.site-footer .widget-title {
	color: var(--ki-color-dark-surface-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9rem;
}

/* Footer HTML row (holds KI Core shortcodes). Confirmed real class:
   `.footer-html` from footer-functions.php::footer_html(). */
.site-footer .footer-html {
	color: var(--ki-color-dark-surface-muted);
}

/* ======================================================================
   KI Core shortcode output (theme-agnostic classes owned by the
   KI Core plugin itself — [ki_socials]/[ki_address] —
   carried over unchanged from the prior integration stylesheet). These
   are NOT Kadence classes; they exist regardless of which theme is
   active, so they are restyled here rather than left to chance default
   browser list styling wherever an admin pastes the shortcode.
   ====================================================================== */

.ki-socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ki-social-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ki-social-item a:hover,
.ki-social-item a:focus {
	color: var(--ki-color-accent);
}

.ki-address {
	display: inline-block;
}

/* ======================================================================
   MAM 3.12 — Footer texture & Connect With Us reconciliation.
   Textures referenced directly at their supplied URLs, not downloaded or
   recreated, per instruction. .site-footer is the same confirmed real
   Kadence class already used above for the footer HTML row — no new
   selector risk introduced there.
   ====================================================================== */

.site-footer {
	background-image: var(--ki-footer-texture, none);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

/*
 * "Connect With Us" — the admin-applied ".ki-connect-with-us" class
 * below is kept as a harmless fallback (documented in an earlier round),
 * but the REAL class actually present in the footer markup pasted from
 * the reference site is ".site-footer__git" (confirmed by reading the exact
 * HTML the user pasted from the live site, which matches
 * template-parts/footer output on the reference site verbatim) — so the dark
 * treatment is now applied to that real, guaranteed-present class
 * directly, the same precedent already used for .site-footer__git-form*
 * below.
 */
.ki-connect-with-us,
.site-footer__git {
	background-image: var(--ki-dark-texture, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--ki-color-dark-surface-text);
	padding: 3.5rem 1.5rem;
}

.ki-connect-with-us a,
.site-footer__git a {
	color: var(--ki-color-dark-surface-text);
}

.ki-connect-with-us a:hover,
.ki-connect-with-us a:focus,
.site-footer__git a:hover,
.site-footer__git a:focus {
	color: var(--ki-color-accent);
}

/* ======================================================================
   MAM 3.13 — ".site-heading" split heading (label + serif headline).
   NOT a Kadence class — the exact legacy class already present on the
   Connect With Us heading markup pasted from the reference site
   (`<div class="... site-heading site-heading--white"><h2><small>Connect
   </small><strong>With Us</strong></h2></div>`). Reused verbatim here;
   `--white` is the dark-section variant already present in that markup.
   Uses Kadence's own real heading-font custom property (the same one
   ki_customizer_css() already falls back to in functions.php) rather
   than introducing an unloaded font family.
   ====================================================================== */

.site-heading {
	text-align: center;
}

.site-heading h2 {
	margin: 0;
}

.site-heading small {
	display: block;
	/* For testing: audited against the sitewide eyebrow convention (About
	   page, Featured Properties/Communities sections) — every other
	   eyebrow on the site is the sans body font, not the serif heading
	   font. This one never set font-family explicitly, so it was
	   silently inheriting Cormorant from ambient context instead. */
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ki-color-ink);
}

/* Connect With Us heading — matched to original site size */
.site-heading strong {
	display: block;
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--ki-color-ink);
}

.site-heading--white small,
.site-heading--white strong {
	color: var(--ki-color-dark-surface-text);
}

.site-footer__git-heading {
	margin-bottom: 0.75rem;
}

/* For testing: explicit sizes on this specific heading only, scoped via
   its own existing wrapper class rather than editing the shared
   .site-heading small/strong rules (which this is the only user of, but
   kept separate on request). */
.site-footer__git-heading small {
	font-size: 18px;
}

.site-footer__git-heading strong {
	font-size: 54px;
}

@media (max-width: 600px) {
	.site-footer__git-heading small {
		font-size: 15px;
	}

	.site-footer__git-heading strong {
		font-size: 30px;
	}
}

.site-footer__git-text {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0.03em;
}

@media (max-width: 600px) {
	.site-heading strong {
		font-size: 1.5rem;
	}
}

/* ======================================================================
   MAM 3.12 — Connect With Us CF7 form.
   These class names (site-footer__git-form*, site-button*, opt-in) are
   NOT Kadence classes and NOT invented here — they are the exact classes
   already present in the Contact Form 7 shortcode pasted from
   the reference site into the Widget 6 footer row, verbatim. No CSS existed
   for them anywhere, which is why the form rendered as unstyled stacked
   inputs. This section styles that exact, already-pasted markup — it
   does not require any change to the CF7 form content itself.

   The background image previously duplicated here now lives on the real
   parent, .site-footer__git, above — removed here to avoid loading the
   same texture twice.
   ====================================================================== */

.site-footer__git-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1.5rem;
	max-width: 900px;
	margin: 2rem auto 0;
	padding: 0;
}

.site-footer__git-form-col--lg {
	grid-column: 1 / -1;
}

.site-footer__git-form .hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Form inputs: ONLY bottom border (matching original site, not full boxes).
   Verified on the reference site: inputs show the blue accent underline at rest,
   not just on focus. Override CF7's higher-specificity box styles with
   compound selector. */
.site-footer__git-form .site-footer__git-form-input,
.site-footer__git-form .wpcf7-form-control.site-footer__git-form-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0 0.65rem 10px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ki-color-accent);
	color: var(--ki-color-dark-surface-text);
	font-size: 0.9rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: none;
}

.site-footer__git-form-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__git-form .site-footer__git-form-input:focus,
.site-footer__git-form .wpcf7-form-control.site-footer__git-form-input:focus {
	outline: none;
	border-bottom-color: var(--ki-color-accent-deep);
	box-shadow: none;
}

/* Message textarea: fixed ~3-line height. The CF7 field tag renders with
   rows="10" (223px intrinsic height); min-height alone can't shrink a
   textarea below its rows-based intrinsic size, so an explicit height is
   required here to actually override it. */
.site-footer__git-form-input--textarea {
	height: 3.6rem;
	resize: vertical;
	border: none;
	border-bottom: 1px solid var(--ki-color-accent);
	line-height: 1.4;
}

.site-footer__git-form-col.opt-in {
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.site-footer__git-form-col.opt-in a {
	color: var(--ki-color-accent);
}

.site-footer__git-form-col--submit {
	display: flex;
	justify-content: center;
}

/* CF7 wraps its own markup in a <p> (confirmed live:
   <div class="...submit"><p><input ...></p></div>), and that <p> —
   despite being a plain block element with no floats/absolute
   positioning — did not respond to text-align:center at all in testing
   (confirmed by force-setting text-align:right inline via devtools:
   zero movement), so something in CF7's own rendering keeps the button
   packed at the <p>'s start regardless. display:block + margin:0 auto
   directly on the button itself sidesteps that entirely and reliably
   centers it — confirmed live (button/column/form centers now match
   exactly). */
.site-footer__git-form-col--submit p {
	margin: 0;
}

.wpcf7-form-control.wpcf7-submit.site-footer__git-submit {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Sizing matches the carousel CTA buttons — see the note on
   .ki-hero__button above. */
.site-button.site-button--white,
.site-footer__git-submit {
	vertical-align: middle;
	padding: 16px 32px;
	border: 1px solid var(--ki-color-accent);
	background: transparent;
	color: var(--ki-color-accent);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* CF7 submit button: override CF7's higher-specificity .wpcf7-form-control.wpcf7-submit */
.wpcf7-form-control.wpcf7-submit.site-footer__git-submit {
	border: 1px solid var(--ki-color-accent);
	color: var(--ki-color-accent);
	background: transparent;
	vertical-align: middle;
	padding: 16px 32px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wpcf7-form-control.wpcf7-submit.site-footer__git-submit:hover {
	background-color: var(--ki-color-accent);
	color: #ffffff;
	border-color: var(--ki-color-accent);
}

.site-button.site-button--white:hover,
.site-footer__git-submit:hover {
	background-color: var(--ki-color-accent);
	color: #ffffff;
	border-color: var(--ki-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.site-button.site-button--white,
	.site-footer__git-submit {
		transition: none;
	}
}

@media (max-width: 600px) {
	.site-footer__git-form {
		grid-template-columns: 1fr;
		padding: 2rem 1.25rem;
	}
}

/* ======================================================================
   MAM 3.12 — Header scroll states (native Kadence classes, no custom JS).
   Enable in: Customizer → Header → Transparent Header / Sticky Header.
   ====================================================================== */

.transparent-header #main-header {
	background-color: transparent;
	border-bottom-color: transparent;
}

.kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	background-color: var(--ki-color-dark-surface);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Logo turns white whenever the header is sitting over something dark —
   transparent-over-photo (no background of its own at all) or the
   scrolled/sticky state (which the rule above makes dark-surface, #222)
   — and stays its normal blue everywhere else, where the header has its
   regular light background. brightness(0) turns every opaque pixel of
   the logo black regardless of its original color, then invert(1) flips
   that to white; transparent areas of the PNG are unaffected either way
   — no separate white-logo file needed. Confirmed this is the same
   technique the reference site (the reference site) uses on its own header
   logo.

   Not scoped to #main-header: Kadence renders a SEPARATE mobile header
   instance (.mobile-site-branding, its own .custom-logo <img>) that
   isn't nested inside #main-header at all — scoping to it left the
   mobile logo blue while desktop correctly went white. .custom-logo
   alone, gated only by the body classes, catches both instances. */
body.transparent-header .custom-logo,
.kadence-sticky-header.item-is-fixed:not(.item-at-start) .custom-logo {
	filter: brightness(0) invert(1);
}

/* ======================================================================
   MAM 3.12 — Off-canvas drawer layout (photo + overlay now handled by the
   single .mobile-navigation.drawer-navigation background-image rule near
   the top of this file — a stale duplicate of that same selector used to
   live here, hardcoding git-texture.jpg (the FOOTER's dark-section
   texture, not this drawer's) via an absolute the site URL that
   silently won the cascade over every later, correct attempt at this
   rule. Removed rather than merged, to leave exactly one source of truth
   for this selector's background-image.
   ====================================================================== */

.mobile-navigation.drawer-navigation .mobile-menu-container {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	max-height: 100vh;
}

.mobile-navigation.drawer-navigation button[aria-label*="Close" i] {
	color: var(--ki-color-dark-surface-text);
}

/* ======================================================================
   MAM 3.12 — Floating call button.
   Wraps [ki_phone link="yes"] output. ki-phone-link is the
   real class that shortcode already emits — only the fixed-position
   wrapper class is new.
   ====================================================================== */

.ki-floating-call {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	/* Above .ki-offcanvas (999999) on purpose: the floating call
	   button stays visible/clickable while the off-canvas menu is open,
	   per explicit request — unlike .ki-floating-socials just
	   below, which stays hidden behind the panel since the panel already
	   has its own social icons. */
	z-index: 1000000;
}

.ki-floating-call .ki-phone-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--ki-color-accent);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	font-size: 0;
}

.ki-floating-call .ki-phone-link::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ki-floating-call .ki-phone-link:hover,
.ki-floating-call .ki-phone-link:focus-visible {
	background-color: var(--ki-color-accent-deep);
}

@media (max-width: 480px) {
	.ki-floating-call .ki-phone-link {
		width: 48px;
		height: 48px;
	}
}

/* ======================================================================
   MAM 3.13 — Floating social icons.
   Reuses the SAME real .ki-socials/.ki-social-item classes
   already used in the footer — no new KI Core output. Paste
   [ki_socials] wrapped in this div into the SAME sitewide/global
   HTML element that already holds the floating call button — visibility
   is controlled entirely by CSS below (home page only), so the same
   global HTML element is safe to keep sitewide.

   Restricted to the home page via WordPress core's own real `.home` body
   class (added by get_body_class() whenever is_front_page() is true —
   confirmed in wp-includes/post-template.php — so this tracks whatever
   page is actually set as the site's front page in Settings → Reading,
   not a specific template file).

   Repositioned to vertical-center per revised spec (was bottom-stacked
   above the floating call button). `position`/`top`/`transform` are used
   here because .ki-floating-socials is a KI-authored wrapper,
   not a Kadence element — the "no layout properties" rule in this file's
   header applies only to Kadence's own JS-driven classes.
   ====================================================================== */

.ki-floating-socials {
	display: none;
	position: fixed;
	top: 50%;
	right: 1.25rem;
	transform: translateY(-50%);
	z-index: 999997;
}

body.home .ki-floating-socials {
	display: block;
}

.ki-floating-socials .ki-socials {
	flex-direction: column;
	gap: 0.6rem;
}

/* Plain glyphs, no badge — 20% smaller than the 20px icons render at by
   default (the SVGs carry their own width="20" height="20" attributes,
   so the size override has to target the svg itself, not just its <a>
   wrapper). No background/border by design.

   Confirmed live (reported not visible on a dark frame): a single soft
   2px white drop-shadow wasn't a strong enough outline against a
   near-black background — too thin/too transparent to read as a halo
   around fine icon linework. Stacking several 0-offset drop-shadows at
   increasing blur radii approximates a solid white outline far more
   reliably than one soft shadow does (each layer is itself soft, but
   layered together they fill in solidly right at the glyph's edge),
   plus a dark shadow for edge definition on a light frame. */
.ki-floating-socials .ki-social-item a {
	width: 32px;
	height: 32px;
	color: #000000;
	filter:
		drop-shadow(0 0 1px #ffffff)
		drop-shadow(0 0 1px #ffffff)
		drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
		drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
	transition: color 0.2s ease;
}

.ki-floating-socials .ki-social-item a svg {
	width: 16px;
	height: 16px;
}

.ki-floating-socials .ki-social-item a:hover,
.ki-floating-socials .ki-social-item a:focus {
	color: var(--ki-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.ki-floating-socials .ki-social-item a {
		transition: none;
	}
}

/* Disabled on mobile per request — a full vertical stack of icons
   competes with the floating call button (the actual primary CTA) and
   eats too much of a narrow viewport. Same selector/specificity as the
   "body.home ... {display:block}" rule above, so source order (this is
   later) decides it without needing !important. */
@media (max-width: 600px) {
	body.home .ki-floating-socials {
		display: none;
	}
}

@media (max-width: 480px) {
	.ki-floating-socials {
		right: 1rem;
	}

	.ki-floating-socials .ki-social-item a {
		width: 34px;
		height: 34px;
	}
}


/* ----------------------------------------------------------------------
   Rounded buttons sitewide (named request): the same 10px corner the
   Single Property page's action buttons use (--ki-button-radius), applied
   to every public button, including the hover-revealed "View Details +"
   buttons, the footer form and the Contact Us form. Radius ONLY — size,
   padding and colors are untouched. Deliberately NOT included: the search
   buttons (they keep their own single rounded corner). `body` prefix =
   beats the component sheets' own rules without !important. */
body .header-button,
body .ki-hero__button,
body .ki-fc-luxe__view-all,
body .ki-fp-tiles__view-all,
body .ki-testimonials__viewall,
body .wpcf7-form-control.wpcf7-submit.site-footer__git-submit {
	border-radius: 10px;
}

/* ----------------------------------------------------------------------
   Blog page (/blog/): post images get rounded corners and a soft
   shadow (named request, shadow strengthened on follow-up). Scoped to Kadence's own `.post-thumbnail`
   on the posts page (`body.blog`) only. */
body.blog .post-thumbnail {
	/* The shadow must sit on this outer link: it is the element Kadence clips
	   (overflow:hidden), so a shadow on the inner box would be cut off.
	   Corner matches the property cards on the archive (26px, 18px on phones). */
	z-index: 1; /* above the card body below it, which would otherwise paint over the shadow */
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
	body.blog .post-thumbnail {
		border-radius: 18px;
	}
}

/* ----------------------------------------------------------------------
   Reusable section heading: add the "ki-heading" class (block
   settings → Advanced → Additional CSS class) to any heading in page
   content. Montserrat 700, uppercase — the same bold face as the page
   banners. For a thin lead word, wrap it in <span class="ki-heading__lead">
   (Poiret One 400). Used on the About page.
   ---------------------------------------------------------------------- */
.ki-heading {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #171717;
}

.ki-heading .ki-heading__lead {
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-weight: 400;
}