/* ==========================================================================
   Small Home Source — minimal brand layer over dRealEstate.

   IMPORTANT (project guidance): brand styling is done through the THEME'S OWN
   built-in settings wherever possible — Appearance → Theme Options for colors,
   fonts, logo, header CTA, footer; Appearance → Menus for navigation. The
   client is non-technical and manages those via the admin UI, not code.

   This file holds ONLY the rule(s) the theme has no built-in option for.
   Everything else (palette, footer, CTA text, typography, logo) lives in the
   `drealestate` theme option and is editable in the Theme Options panel.
   ========================================================================== */

:root {
	/* Palette A — Clean Neutral (rust accent). Replaces the cream + sage
	   "vintage" pairing with white + cool-gray neutrals and deeper ink; keeps
	   the rust as the single accent. */
	--shs-bg:       #FFFFFF; /* page background (was cream #F7F5F2)   */
	--shs-surface:  #F4F5F7; /* cool-gray bands / photo placeholders  */
	--shs-ink:      #14161A; /* near-black text (was #2B2B2B)         */
	--shs-muted:    #6B7280; /* secondary / meta text                 */
	--shs-red:      #B4443F; /* rust accent (unchanged)               */
	--shs-rust-tint:#FBECEA; /* rust wash for pills/badges            */
	--shs-border:   #E6E8EC; /* hairline borders                      */
	--shs-cert:     #2E7D51; /* certified-check green (fresh, not sage) */
	--shs-sage:     #7A8B74; /* legacy — retained for any older refs  */
}

/* Warm-white site background — dRealEstate exposes no body/background option,
   so this single rule is the one unavoidable custom style. */
body {
	background-color: var(--shs-bg);
}

/* Full-bleed blocks — the theme doesn't register `align-wide`/`align-full`
   support, so the homepage hero (a full-width Cover block) would otherwise be
   stuck at the content container width. This enables edge-to-edge blocks.
   No theme option exists for this. */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
html,
body {
	/* Guards against the 100vw scrollbar gutter. Must be `clip`, not `hidden`:
	   overflow-x hidden on html/body creates a scroll container that silently
	   breaks the theme's position:sticky header. */
	overflow-x: clip;
}

/* Kill the top canvas gap and let the homepage hero sit flush under the header
   and above the footer. The theme's .content-area carries 80px/100px padding
   meant for inner pages; the full-bleed hero shouldn't inherit it. No theme
   option exists for per-page content padding, hence this scoped override. */
html,
body {
	margin: 0;
}
body.home #primary.content-area {
	padding-top: 0;
	padding-bottom: 0;
}
/* The parent theme gives every .wp-block-cover a 1rem top/bottom margin
   (style.css ~line 1184) — correct inside article content, but on the
   full-bleed homepage hero it exposed the body background as a 16px strip
   under the header and above the footer. */
body.home .wp-block-cover.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Hero: constrain the content (headline, subhead, search bar) to a centered
   column so the search inputs get side space instead of stretching edge-to-edge.
   No theme/block option reliably does this without theme.json layout support. */
.wp-block-cover__inner-container {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.wp-block-cover .directorist-search-form-wrapper,
.wp-block-cover .directorist-search-contents {
	margin-top: 12px;
}

/* Top-nav rich icons (Menu Icons plugin, "Image" type). Sizing + a springy
   Airbnb-style pop on hover. Keyed to the plugin's generic `._mi._image`
   class, NOT a specific image — so any icon Renee swaps in via the picker in
   Appearance → Menus keeps the same size and animation. The plugin has no
   option for icon dimensions-by-CSS or hover effects, hence these rules. */
.menu-area ._mi._image {
	width: 26px;
	height: 26px;
	object-fit: contain;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */
}
/* Gentle pop only — the icon ARTWORK animates on hover (door opens, coin
   flips…) via the demo swap in assets/js/nav-icon-anim.js, so the transform
   stays subtle and rotation-free to not fight the content animation. */
.menu-area li:hover > a ._mi._image,
.menu-area a:focus-visible ._mi._image {
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	.menu-area ._mi._image {
		transition: none;
	}
	.menu-area li:hover > a ._mi._image,
	.menu-area a:focus-visible ._mi._image {
		transform: none;
		animation: none;
	}
}

/* Footer legal disclaimer (bottom copyright bar). The full disclaimer is its
   own /disclaimer/ page; this is the SHORT version rendered as quiet fine print
   under the copyright line so it stays findable without taking center stage.
   The markup is set in the theme's `copyright_text` option (Theme Options →
   Footer) — see docs/scripts/disclaimer-page-and-footer.php. No theme option
   styles a second copyright line, hence these rules. */
.theme-copyright-text .shs-copyright-line {
	display: block;
}
.theme-copyright-text .shs-footer-disclaimer {
	display: block;
	max-width: 900px;
	margin: 8px auto 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.72; /* recede vs. the copyright line, still legible */
}
.theme-copyright-text .shs-footer-disclaimer a {
	text-decoration: underline;
}

/* ==========================================================================
   Lenders page — curated lender cards + financing guide section.
   Native core blocks carry these classes (see docs/scripts/build-lenders-page.php);
   the theme/Directorist expose no card component for a curated marketing row, so
   this is the one place the layout is styled. Client still edits text/images in
   the block editor.
   ========================================================================== */
.shs-lenders-title {
	text-align: center;
	margin-bottom: 14px;
}
.shs-lenders-intro {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	text-align: center;
	font-size: 1.05rem;
}

/* 3-up card row — equal-height cards, button pinned to the bottom.
   The Consultants page reuses the same card shape, so every rule below is
   aliased to .shs-consultant-* rather than duplicated. */
.shs-lender-cards,
.shs-consultant-cards {
	gap: 24px;
	align-items: stretch;
	margin-top: 8px;
}
.shs-lender-cards > .wp-block-column,
.shs-consultant-cards > .wp-block-column {
	display: flex;
}
/* Fewer than three cards would otherwise stretch across the full grid width.
   Renee adds consultants over time; drop this class once the row is 3-up. */
.shs-cards-2up {
	/* 800px keeps each card wide enough for a "Visit <domain>" button to sit on
	   one line — at 720px thetinyhomelady.com wrapped. */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.shs-lender-card,
.shs-consultant-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(43, 43, 43, 0.08);
	border-radius: 16px;
	padding: 28px 22px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(43, 43, 43, 0.06);
}
/* Round logo — Renee supplies 1200×1200 squares that fit a circle crop. */
.shs-lender-logo,
.shs-consultant-logo {
	margin: 0 auto 14px;
}
.shs-lender-logo img,
.shs-consultant-logo img {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	background: var(--shs-bg);
	border: 1px solid rgba(43, 43, 43, 0.08);
}
.shs-lender-name,
.shs-consultant-name {
	margin: 0 0 2px;
	font-size: 1.25rem;
}
/* Palette A has no sage — the company line uses the neutral secondary ink. */
.shs-lender-company,
.shs-consultant-company {
	margin: 0 0 12px;
	color: var(--shs-muted);
}
.shs-lender-contact,
.shs-consultant-contact {
	font-size: 0.9rem;
	line-height: 1.7;
	margin: 0 0 12px;
	word-break: break-word;
}
.shs-lender-contact a,
.shs-consultant-contact a {
	color: var(--shs-red);
}
.shs-lender-blurb,
.shs-consultant-blurb {
	font-size: 0.95rem;
	margin: 0 0 18px;
}
/* push the button to the bottom regardless of blurb length */
.shs-lender-card .wp-block-buttons,
.shs-consultant-card .wp-block-buttons {
	margin-top: auto;
}
.shs-lender-card .wp-block-button__link,
.shs-consultant-card .wp-block-button__link {
	background-color: var(--shs-red);
	color: #fff;
	border-radius: 999px;
	padding: 10px 22px;
}

/* Section divider after the cards — breathing room before the guide section
   (the default separator margin was too tight against the heading). */
.shs-section-divider {
	margin-top: 52px;
	margin-bottom: 44px;
}

/* Financing guide section — heading sits inside the left text column. */
.shs-guide-heading {
	text-align: left;
	margin-top: 0;
	margin-bottom: 18px;
}

/* Desktop: text + chart side by side, TOP-aligned. Media & Text lays out the
   grid; these tune the gap, typography, button alignment, and the chart's look.
   Stacks to a single column on mobile automatically (is-stacked-on-mobile). */
.shs-guide-mediatext {
	gap: 40px;
	margin-left: auto;
	margin-right: auto;
}
.shs-guide-mediatext .wp-block-media-text__content {
	padding: 0;
	/* slightly larger type + looser leading to use the column height better */
	font-size: 1.1rem;
	line-height: 1.8;
}
.shs-guide-mediatext .shs-guide-btn {
	justify-content: flex-start; /* left-aligned beside the text on desktop */
	margin: 4px 0 16px;
}
.shs-guide-mediatext .wp-block-media-text__media img {
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(43, 43, 43, 0.12);
}
.shs-guide-btn .wp-block-button__link {
	background-color: var(--shs-ink);
	color: var(--shs-bg);
	border-radius: 999px;
	padding: 12px 26px;
}

/* On mobile the stacked chart shouldn't dominate — cap its height a touch and
   center the button again. */
@media (max-width: 781px) {
	.shs-guide-mediatext .shs-guide-btn {
		justify-content: center;
	}
}

/* ==========================================================================
   Legal / policy copy — Disclaimer, Terms & Conditions.
   These pages are plain prose in the full-width page container, which gives a
   ~1400px measure at desktop. Cap it so the text stays readable.
   ========================================================================== */
.shs-legal-copy {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.shs-legal-copy h2 {
	margin-top: 34px;
}
.shs-legal-copy h2:first-child {
	margin-top: 0;
}
.shs-legal-copy h3 {
	margin-top: 26px;
}

/* "Help Us Keep the Directory Accurate" note under the listings archive —
   an invitation to report stale builders, so it reads as a quiet aside after
   the results rather than another content section. */
.shs-accuracy-note {
	max-width: 820px;
	margin: 48px auto 8px;
	padding: 24px 26px;
	background: var(--shs-surface);
	border: 1px solid var(--shs-border);
	border-radius: 14px;
}
.shs-accuracy-note h2 {
	margin: 0 0 8px;
	font-size: 1.25rem;
}
.shs-accuracy-note p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--shs-muted);
}
.shs-accuracy-note a {
	color: var(--shs-red);
}

/* ==========================================================================
   Social links on the listing form — per-plan cap (see social-form-limit.js).
   Directorist's `social` plan feature is on/off with no count, so the 0/1/∞
   split is ours to enforce; this is the part that tells the builder why.
   ========================================================================== */
.shs-social-note {
	margin: 10px 0 0;
	font-size: 0.9rem;
	color: var(--shs-muted);
}
.shs-social-note a {
	color: var(--shs-red);
	text-decoration: underline;
}
.shs-social-note--locked,
.shs-social-note--over {
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--shs-rust-tint);
	color: var(--shs-ink);
	border: 1px solid rgba(180, 68, 63, 0.25);
}
.shs-social-note--full {
	color: var(--shs-ink);
}
/* Rows beyond the plan allowance (possible after a downgrade) — shown as
   struck-through rather than hidden, so nothing disappears without warning. */
.shs-social-row--over {
	opacity: 0.55;
}
.shs-social-row--over input,
.shs-social-row--over select {
	text-decoration: line-through;
}
/* Claim form privacy note — sits above the fields that ask a builder for their
   name, phone and verification details before they have any relationship with
   the site. See the template override in
   drealestate-child/directorist-claim-listing/claim-listing-template.php */
.shs-claim-privacy {
	display: flex;
	/* Centred, not top-aligned: the copy wraps to two lines at most widths, and
	   an icon pinned to the first line reads as misaligned rather than as a
	   deliberate hanging marker. */
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--shs-surface);
	border: 1px solid var(--shs-border);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--shs-muted);
}
.shs-claim-privacy .directorist-icon-mask {
	background-color: transparent;
	flex: 0 0 auto;
}
.shs-claim-privacy .directorist-icon-mask::after {
	background-color: var(--shs-cert);
}

/* Service areas beyond the plan allowance — same treatment as surplus social
   rows: shown, struck through, and explained, never silently dropped. */
.shs-location-note {
	margin: 10px 0 0;
	font-size: 0.9rem;
	color: var(--shs-muted);
}
.shs-location-note a {
	color: var(--shs-red);
	text-decoration: underline;
}
.select2-selection__choice.shs-location-chip--over {
	opacity: 0.55;
	text-decoration: line-through;
}
/* Raised to an error once it has actually blocked a submit, so the reason the
   button "did nothing" is visible. */
.shs-location-note--error {
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--shs-rust-tint);
	border: 1px solid rgba( 180, 68, 63, 0.35 );
	color: var(--shs-ink);
	font-weight: 600;
}
#addNewSocial.shs-is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Banner crop — the theme prints `.banner{background: … center center/cover}`
   inline, so a body-class selector (higher specificity) retunes the framing
   per page without touching the theme or re-cropping Renee's photo.
   All Listings: the tiny home sits above the middle of the frame; centring the
   crop cut the roofline off. */
body.page-id-9 .banner {
	background-position: center 32%;
}
/* Consultants: the two faces sit low in the frame; nudging the crop down lifts
   them clear of the bottom edge. */
body.page-id-16 .banner {
	background-position: center 62%;
}

/* Certification badges under the listing title (#5) — builder-provided on claim.
   Green-check pills, à la the competitor example Renee shared. */
.shs-cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 4px;
}
.shs-cert-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--shs-ink);
	background: var(--shs-surface); /* neutral pill (palette A) */
	border: 1px solid var(--shs-border);
	border-radius: 999px;
	padding: 3px 12px 3px 26px;
	position: relative;
}
.shs-cert-badge::before {
	content: "✓";
	position: absolute;
	left: 10px;
	color: var(--shs-cert); /* fresh green check = "certified" */
	font-weight: 700;
}
/* Single page: the theme drops the badges into the title's flex row, so they sit
   inline beside the H1 (misaligned). Force them onto their own line below it. */
.directorist-single-listing-header__listing-title-wrapper {
	flex-wrap: wrap;
}
.directorist-single-listing-header__listing-title-wrapper .shs-cert-badges {
	flex-basis: 100%;
	width: 100%;
	margin-top: 10px;
}

/* (Left filter sidebar is shown again per Renee — all filters live there.) */

/* ==========================================================================
   Listing cards + tier styling — Palette A polish (#8 design pass).
   Archive card = article.directorist-listing-single.directorist-listing-card
   (thumb .directorist-thumnail-card, title .directorist-listing-title). The
   theme ships a plain card; these rules modernize spacing/type/hover, brand the
   empty-photo placeholder, and add tier treatment (Featured ring + rust badge).
   No theme option covers card styling.
   ========================================================================== */
.directorist-listing-single.directorist-listing-card {
	border: 1px solid var(--shs-border);
	border-radius: 14px !important; /* beats the theme's 6px */
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
	transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.directorist-listing-single.directorist-listing-card:hover {
	box-shadow: 0 10px 28px rgba(20, 22, 26, 0.10);
	transform: translateY(-2px);
}
/* Shorter, tighter cover image (theme sets an inline height: 260px). */
.directorist-listing-card .directorist-thumnail-card.directorist-card-cover {
	height: 200px !important;
}
/* Title + meta */
.directorist-listing-card .directorist-listing-title {
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	margin: 0 0 2px;
}
.directorist-listing-card .directorist-listing-title a {
	color: var(--shs-ink);
}
.directorist-listing-card .directorist-listing-title a:hover {
	color: var(--shs-red);
}
.directorist-listing-card .directorist-listing-single__info__list li {
	color: var(--shs-muted);
}

/* Branded placeholder — the plugin renders a generic gray grid.jpg <img> when a
   listing has no photo (all 600+ imports today). Hide it and fill the cover with
   an on-brand surface + house glyph. Pure CSS via [src*] + :has() — no JS/upload. */
.directorist-thumnail-card-front-img[src*="grid.jpg"] {
	opacity: 0;
}
.directorist-thumnail-card.directorist-card-cover:has(img[src*="grid.jpg"]) {
	position: relative;
	background: var(--shs-surface);
	background-image: none !important; /* drop the theme's cover gradient on empty placeholders */
}
.directorist-thumnail-card.directorist-card-cover:has(img[src*="grid.jpg"])::after {
	content: "⌂" !important; /* beats theme's cover ::after */
	position: absolute;
	inset: 0;
	/* We reuse the theme's own cover ::after, which is a 60px dark gradient strip
	   pinned to the bottom. Left alone it shrinks our placeholder to a 60px band
	   with a grey wash across it, and centres the ⌂ inside that strip instead of
	   the photo area — height beats `inset` for sizing on an absolute box. */
	height: auto;
	background-image: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: #98a2b3;
	pointer-events: none;
	z-index: 1;
}

/* Featured tier — native badge (feature_badge_text) restyled as a rust pill, and
   the whole card gets a rust ring + lift when it carries a featured badge.
   (Featured listings also auto-pin to the top via the pricing-plans query.) */
.directorist-badge.directorist-badge-featured {
	background: var(--shs-red);
	color: #fff;
	border: 0;
	font-weight: 700;
	letter-spacing: 0.3px;
}
/* The card carries BOTH `.directorist-listing-single` and
   `.directorist-listing-card`. The original rule here was fine; what failed was
   the condition — `.directorist-badge-featured` only exists when the per-listing
   `_featured` meta is set, and a listing featured through its PLAN has no such
   badge. Hence the `.shs-featured-marker` printed by functions.php. */
.directorist-listing-single:has(.directorist-badge-featured),
.directorist-listing-single:has(.shs-featured-marker) {
	border: 1.5px solid var(--shs-red);
	box-shadow: 0 6px 20px rgba(180, 68, 63, 0.14);
}

/* --------------------------------------------------------------------------
   Featured perks agreed with Renee (Q6): larger photo treatment + a prominent
   contact button. The pinning and badge were built; these two were not, so a
   Featured card looked exactly like a Free one — no visible reason to pay.
   -------------------------------------------------------------------------- */

/* Larger photo: Featured thumbnails run appreciably taller than the standard
   card (200px), which is what makes the tier legible while scanning a grid.
   The picture actually lives in `.directorist-thumnail-card`, which Directorist
   sizes with an INLINE height — so only !important can raise it. Growing the
   outer wrapper alone just left a blank band under the photo. Every layer of
   the swiper has to be told to fill, or the image floats in the taller box. */
.directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb,
.directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb {
	min-height: 260px;
}
.directorist-listing-single:has(.shs-featured-marker) .directorist-thumnail-card,
.directorist-listing-single:has(.directorist-badge-featured) .directorist-thumnail-card {
	height: 260px !important;
}
.directorist-listing-single:has(.shs-featured-marker) .directorist-thumnail-card-front-wrap,
.directorist-listing-single:has(.shs-featured-marker) .directorist-swiper,
.directorist-listing-single:has(.shs-featured-marker) .swiper-wrapper,
.directorist-listing-single:has(.shs-featured-marker) .swiper-slide,
.directorist-listing-single:has(.shs-featured-marker) .swiper-slide a,
.directorist-listing-single:has(.shs-featured-marker) .swiper-slide figure,
.directorist-listing-single:has(.directorist-badge-featured) .directorist-thumnail-card-front-wrap,
.directorist-listing-single:has(.directorist-badge-featured) .directorist-swiper,
.directorist-listing-single:has(.directorist-badge-featured) .swiper-wrapper,
.directorist-listing-single:has(.directorist-badge-featured) .swiper-slide,
.directorist-listing-single:has(.directorist-badge-featured) .swiper-slide a,
.directorist-listing-single:has(.directorist-badge-featured) .swiper-slide figure {
	height: 100%;
	margin: 0;
}
.directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb img,
.directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Our own Featured pill, for listings featured via the PLAN rather than the
   per-listing `_featured` flag (Directorist's native badge only reads the flag,
   so those cards carried no badge at all). */
.shs-featured-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* The card body is a flex column, so a bare inline-flex child stretches to
	   the full card width. Keep the pill hugging its text. */
	align-self: flex-start;
	width: fit-content;
	max-width: fit-content;
	margin: 0 0 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--shs-red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* Prominent contact button — rust fill, full width of the card footer. */
.shs-featured-cta {
	margin: 14px 0 2px;
}
.shs-featured-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--shs-red);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}
/* The theme colours card links via a rule that outranks anything reasonable
   here (measured: the label kept computing to rgb(64,64,64) even with the card
   class prepended), so this is one of the few places !important is warranted —
   white-on-rust is a contrast requirement, not a preference. */
.directorist-listing-single .shs-featured-cta__btn,
.directorist-listing-single .shs-featured-cta__btn span,
.shs-featured-cta__btn,
.shs-featured-cta__btn span,
.shs-featured-cta__btn:hover,
.shs-featured-cta__btn:focus {
	color: #fff !important;
}
.shs-featured-cta__btn:hover,
.shs-featured-cta__btn:focus {
	filter: brightness( 0.94 );
	transform: translateY( -1px );
}

/* Directorist icons are CSS masks, but the mask is on the ::after PSEUDO-ELEMENT
   (`background-color: var(--directorist-color-dark); mask-image: var(--directorist-icon)`),
   not on the <i> itself. Colouring the <i> therefore painted a solid white box
   and left the glyph dark — the white square with a black star. The glyph
   colour has to be set on ::after; the <i> must stay transparent. */
.shs-featured-cta__btn .directorist-icon-mask,
.shs-featured-pill .directorist-icon-mask {
	background-color: transparent;
	margin-right: 0;
}
.shs-featured-cta__btn .directorist-icon-mask::after,
.shs-featured-pill .directorist-icon-mask::after {
	background-color: #fff;
}
.shs-featured-pill .directorist-icon-mask::after {
	width: 13px;
	height: 13px;
}

/* The archive grid is a wrapping FLEX row, so every card in a row stretches to
   the tallest one — a 609px Featured card was dragging 400px cards up with it
   and leaving dead space inside them. Aligning to the start lets each card keep
   its natural height. */
.directorist-archive-items.directorist-archive-grid-view {
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Featured cards claim the full row, photo left / details right.
   Cards are flex items at `flex: 1 1 0%`, so forcing a 100% basis gives the
   Featured listing its own row and leaves the ordinary cards at their normal
   share of the grid. It also sidesteps the masonry problem entirely: a
   full-width card ends its row, so it can no longer strand shorter cards
   beside it.
   -------------------------------------------------------------------------- */
/* The grid's flex item is the `.directorist-col-*` WRAPPER, not the card
   article inside it — so the width has to be claimed on the wrapper. (Setting
   it on the article only made the card lay out sideways inside its unchanged
   half-width column.) The attribute selector keeps this working if the column
   count is ever changed from 2-up.

   Gated on `body.shs-featured-fullwidth`, set from Settings → Small Home Source
   so Renee can turn it on or off herself. Everything else about the Featured
   card (badge, ring, larger photo, contact button) applies either way. */
.shs-featured-fullwidth .directorist-row > [class*="directorist-col-"]:has(.shs-featured-marker),
.shs-featured-fullwidth .directorist-row > [class*="directorist-col-"]:has(.directorist-badge-featured) {
	flex: 0 0 100%;
	max-width: 100%;
}
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker),
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb,
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb {
	flex: 0 0 42%;
	max-width: 42%;
	min-height: 300px;
}
/* Fill the taller panel rather than sitting at a fixed 260px inside it. */
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .directorist-thumnail-card,
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .directorist-thumnail-card {
	height: 100% !important;
	min-height: 300px;
}
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__content,
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__content {
	flex: 1 1 58%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Across a 58% column a full-width button reads as a banner, not a CTA. */
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .shs-featured-cta__btn,
.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .shs-featured-cta__btn {
	max-width: 340px;
}

/* Stack again on narrow screens — side-by-side at phone widths would leave the
   photo too small to be the perk it is being sold as. */
@media (max-width: 767px) {
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker),
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) {
		flex-direction: column;
	}
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb,
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb {
		flex: 0 0 auto;
		max-width: 100%;
		min-height: 210px;
	}
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .directorist-thumnail-card,
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .directorist-thumnail-card {
		min-height: 210px;
	}
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.shs-featured-marker) .shs-featured-cta__btn,
	.shs-featured-fullwidth .directorist-archive-grid-view .directorist-listing-single:has(.directorist-badge-featured) .shs-featured-cta__btn {
		max-width: none;
	}
}

/* On narrow screens the taller Featured photo would dominate the viewport. */
@media (max-width: 575px) {
	.directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb,
	.directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb {
		min-height: 210px;
	}
	.directorist-listing-single:has(.shs-featured-marker) .directorist-listing-single__thumb img,
	.directorist-listing-single:has(.directorist-badge-featured) .directorist-listing-single__thumb img {
		height: 210px;
	}
}

/* --------------------------------------------------------------------------
   Pricing plans — Monthly⇄Yearly period toggle.
   Directorist renders one card per plan; each paid tier exists as a monthly and
   a yearly plan. The `directorist_pricing_plan_shortcode_output` filter wraps
   the plans in .shs-plan-period and prepends this toggle; pricing-period-toggle.js
   shows only the cards for the selected period (Free always shows) so exactly 3
   cards are visible. No theme option exists for this. See functions.php.
   -------------------------------------------------------------------------- */
.shs-period-toggle {
	display: flex;
	justify-content: center;
	gap: 4px;
	width: max-content;
	margin: 0 auto 28px;
	padding: 4px;
	background: #fff;
	border: 1px solid rgba(43, 43, 43, 0.12);
	border-radius: 999px;
}
.shs-period-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	padding: 8px 22px;
	border-radius: 999px;
	font: 600 14px/1.4 inherit;
	color: var(--shs-ink);
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.shs-period-btn:hover {
	color: var(--shs-red);
}
.shs-period-btn.is-active {
	background: var(--shs-red);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Add Listing page (#8 polish). The timber-framing photo banner was removed
   (page banner set to a solid color in the theme's per-page options — it added
   nothing on a plan-picker page). Shorten that dark band so it doesn't dominate,
   and add breathing room between the banner and the Monthly/Yearly toggle.
   Scoped to the add-listing body class so other pages' banners are untouched.
   -------------------------------------------------------------------------- */
.theme-dir-add-listing .theme-banner-content.theme-breadcrumb-banner {
	padding-top: 54px;
	padding-bottom: 52px;
}
.theme-dir-add-listing .shs-plan-period {
	margin-top: 36px;
}

/* Guest "Add Listing" gate — inline "log in or sign up" link inside the restrict
   sentence (see the atbdp_listing_form_login_link + gettext filters in
   functions.php). Was a standalone button; now plain rust text link per Vijay. */
.shs-login-link {
	color: var(--shs-red) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.shs-login-link:hover {
	color: #963a36 !important;
}

/* Checkout "What's included" panel — the selected plan's features shown above the
   order summary (see the atbdp_before_checkout_table hook in functions.php).
   Card language mirrors the Directorist Order Summary card below it: tinted header
   + padded body, with each feature check in a soft circle. */
.shs-checkout-features {
	background: #fff;
	border: 1px solid var(--shs-border);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 auto 22px;
	max-width: 560px;
	box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
}
.shs-cf-head {
	padding: 16px 22px 14px;
	background: var(--shs-surface);
	border-bottom: 1px solid var(--shs-border);
}
.shs-cf-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--shs-muted);
	margin-bottom: 2px;
}
.shs-cf-title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--shs-ink);
}
.shs-cf-body {
	padding: 6px 22px 12px;
}
.shs-cf-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.shs-cf-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	font-size: 0.95rem;
	color: var(--shs-ink);
	border-top: 1px solid var(--shs-border);
}
.shs-cf-list li:first-child {
	border-top: 0;
}
.shs-cf-list li.no {
	color: var(--shs-muted);
}
.shs-cf-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}
.shs-cf-list li.yes .shs-cf-ic {
	background: rgba(46, 125, 81, 0.12);
	color: var(--shs-cert);
}
.shs-cf-list li.no .shs-cf-ic {
	background: var(--shs-surface);
	color: #c4cad2;
}

/* Listing social links — rendered as a "Social" row inside Contact & Details
   (functions.php hook + assets/js/social-contact-row.js relocates it). Uses the
   native .directorist-single-info row layout; the values are Directorist brand
   icons as round buttons. Tier-gated (Free hidden). */
.directorist-single-info-socials .directorist-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.directorist-single-info-socials .directorist-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--shs-surface);
	border: 1px solid var(--shs-border);
	color: var(--shs-ink);
	font-size: 15px;
	line-height: 1;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.directorist-single-info-socials .directorist-social-links a:hover {
	color: #fff;
	background: var(--shs-red);
	border-color: var(--shs-red);
}

/* Homepage "Featured Builders" band ([shs_featured_band] in functions.php).
   Self-hiding until a Featured listing exists; grid comes from Directorist. */
.shs-featured-band {
	max-width: 1120px;
	margin: 56px auto 40px;
	padding: 0 24px;
}
.shs-featured-band__title {
	text-align: center;
	margin: 0 0 28px;
	letter-spacing: -0.01em;
}

/* "Already listed? Claim it" nudges — receipt + plan picker (claim-first routing;
   see the shs_claim_page_url() block in functions.php). */
.shs-claim-note {
	max-width: 720px;
	margin: 0 auto 18px;
	padding: 10px 16px;
	background: var(--shs-rust-tint);
	border: 1px solid rgba(180, 68, 63, 0.25);
	border-radius: 10px;
	font-size: 0.92rem;
	text-align: center;
	color: var(--shs-ink);
}
.shs-claim-note a {
	color: var(--shs-red);
	font-weight: 600;
	text-decoration: underline;
}
.shs-claim-note--picker {
	margin-top: 26px;
}

/* ── Flodesk footer signup ───────────────────────────────────────────────────
   Renee's TinyFest form is built as a wide two-column banner: a picture on the
   left, the fields on the right. Dropped into a ~250px footer column it breaks
   badly — the heading wraps to one word per line ("TinyFe / st!") and the logo
   takes most of the height. Hide the picture, stack the form, and stop the
   heading breaking mid-word. Scoped to the footer so the same form still looks
   as designed if it is ever embedded on a page. */
.footer-widget-area #fd-form-6a7b3ad7ea518320346d1a87 [class$="__left"],
.footer #fd-form-6a7b3ad7ea518320346d1a87 [class$="__left"] {
	display: none !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 [class$="__wrapper"] {
	display: block !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 [class$="__right"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 18px !important;
}

/* Flodesk sets large display sizes for a full-width banner. */
#fd-form-6a7b3ad7ea518320346d1a87 h1,
#fd-form-6a7b3ad7ea518320346d1a87 h2,
#fd-form-6a7b3ad7ea518320346d1a87 h3,
#fd-form-6a7b3ad7ea518320346d1a87 h4 {
	font-size: 17px !important;
	line-height: 1.3 !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 * {
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 input,
#fd-form-6a7b3ad7ea518320346d1a87 button {
	width: 100% !important;
	max-width: 100% !important;
}

/* The footer-scoped selector above missed — this theme's footer wrapper uses a
   different class. The form only ever appears in the footer, so hide the
   picture column unscoped. */
#fd-form-6a7b3ad7ea518320346d1a87 [class$="__left"] {
	display: none !important;
}

/* The footer stays as the theme's four columns. An earlier revision gave the
   links a third each and put the signup on its own full-width row below;
   reverted 2026-08-11 on request. If it ever comes back, the picture column and
   the auto-width fields have to come back with it — see git history. */

/* ── Flodesk signup: match the site, not Flodesk's own palette ───────────────
   Flodesk applies everything from an injected stylesheet — no inline styles —
   so plain CSS overrides it. Restyled here rather than in Renee's Flodesk
   account on purpose: it is her TinyFest form and may be embedded on the
   TinyFest site too, where her green branding is correct.

   Site values it is matching: footer #2b2b2b, brand red #b4443f, headings
   Gelasio, body Nunito Sans. */
#fd-form-6a7b3ad7ea518320346d1a87 [class*="__background"],
#fd-form-6a7b3ad7ea518320346d1a87 [class*="__background"] > div {
	background: #353535 !important;
	background-color: #353535 !important;
	background-image: none !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 [class*="__container"] {
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* Headline in the site's display face. */
#fd-form-6a7b3ad7ea518320346d1a87 [class*="__title"],
#fd-form-6a7b3ad7ea518320346d1a87 h1,
#fd-form-6a7b3ad7ea518320346d1a87 h2,
#fd-form-6a7b3ad7ea518320346d1a87 h3 {
	font-family: Gelasio, Georgia, serif !important;
	color: #fff !important;
	letter-spacing: 0 !important;
}

/* Everything else in the body face. */
#fd-form-6a7b3ad7ea518320346d1a87,
#fd-form-6a7b3ad7ea518320346d1a87 p,
#fd-form-6a7b3ad7ea518320346d1a87 span,
#fd-form-6a7b3ad7ea518320346d1a87 div,
#fd-form-6a7b3ad7ea518320346d1a87 input,
#fd-form-6a7b3ad7ea518320346d1a87 button {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 input {
	background: rgba( 255, 255, 255, .06 ) !important;
	border: 1px solid rgba( 255, 255, 255, .28 ) !important;
	border-radius: 6px !important;
	color: #fff !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 input::placeholder {
	color: rgba( 255, 255, 255, .6 ) !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 input:focus {
	border-color: #b4443f !important;
	outline: none !important;
}

/* Submit reads as a site button, not a white pill. */
#fd-form-6a7b3ad7ea518320346d1a87 button {
	background: #b4443f !important;
	background-color: #b4443f !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
}

#fd-form-6a7b3ad7ea518320346d1a87 button:hover {
	background: #9c3b31 !important;
	background-color: #9c3b31 !important;
}

/* The green is painted on __container itself, not the __background child, and
   the headline is an unclassed <div> — so neither was reachable above. */
#fd-form-6a7b3ad7ea518320346d1a87 [class*="__container"] {
	background: #353535 !important;
	background-color: #353535 !important;
}

/* Only the text-bearing unclassed divs are the headline/paragraph; wrappers
   have no text of their own, so a font rule on them is harmless. */
#fd-form-6a7b3ad7ea518320346d1a87 div:not([class]) {
	font-family: Gelasio, Georgia, serif !important;
	color: #fff !important;
}

/* Keep the logo and the fields together in the middle rather than stranded at
   the left of a very wide row. */
/* Back in a quarter-width column the card is a single stack again, so the
   centring and picture-sizing rules that the full-width row needed are gone. */
#fd-form-6a7b3ad7ea518320346d1a87 [class*="__container"] {
	padding: 20px 0 !important;
}

/* The card's own headline duplicates the "Stay in Touch" widget title and the
   line above it, and at footer width it ran to four oversized lines. Drop it and
   let the widget copy do the talking. */
#fd-form-6a7b3ad7ea518320346d1a87 [class$="__title"] {
	display: none !important;
}

/* Breathing room between that copy and the box. */
#fd-form-6a7b3ad7ea518320346d1a87 {
	margin-top: 18px !important;
}

/* Flodesk always renders the subtitle slot even when it holds no text — a
   placeholder div with min-height:1.4em plus a 25px bottom margin, so 45px of
   dead space above the fields once the headline is hidden. Note: if Renee ever
   adds subtitle text to this form, it will be hidden too — the copy above the
   box is doing that job. */
#fd-form-6a7b3ad7ea518320346d1a87 [class$="__subtitle"] {
	display: none !important;
}

/* ── Checkout: line the panels up ────────────────────────────────────────────
   Everything on the checkout sits in one column (directorist-col-md-8
   offset-md-2) with each panel a .directorist-card. The plan-features panel
   carries its own narrower max-width, so the cards stair-stepped; the coupon
   box (injected by the coupon add-on on atbdp_before_checkout_table) is also
   the only panel with no header strip, which made it read as a different
   component. Scoped to the checkout form so nothing else is affected. */
.directorist-checkout-form .directorist-col-md-8 > form > *,
.directorist-checkout-form .directorist-col-md-8 > form > * > .directorist-card {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.directorist-checkout-form .directorist-coupon-redeem {
	width: 100%;
	margin: 0 0 30px;
	box-sizing: border-box;
}

/* Match the other cards' internal rhythm. */
.directorist-checkout-form .directorist-coupon-redeem__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.directorist-checkout-form .directorist-coupon-redeem__form input[type="text"] {
	flex: 1 1 240px;
	min-width: 0;
}

.directorist-checkout-form .directorist-coupon-redeem__form button {
	flex: 0 0 auto;
}

/* Three separate things in the add-on's stylesheet fought a full-width field,
   all under `#directorist …` so class-only rules lose to them:

     1. `__form input` carries `max-width: 300px` (swbdpc-frontend.css) — the
        field could never fill the row no matter what the container did;
     2. `__form` needs an explicit width, or it only takes its content width;
     3. `__input-wrapper` is itself `display: flex` in ROW direction, so the form
        and the validation message sat side by side and split the width.

   To centre a narrower row instead, add a max-width plus `margin-inline: auto`
   on the wrapper. */
#directorist .directorist-coupon-redeem .directorist-coupon-redeem__input-wrapper {
	max-width: none;
	width: 100%;
	flex-direction: column;
}

#directorist .directorist-coupon-redeem .directorist-coupon-redeem__form {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	gap: 12px;
}

#directorist .directorist-coupon-redeem .directorist-coupon-redeem__form input,
#directorist .directorist-coupon-redeem .directorist-coupon-redeem__form #directorist-coupon-redeem__code {
	width: auto;
	max-width: none;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

#directorist .directorist-coupon-redeem .directorist-coupon-redeem__form button,
#directorist .directorist-coupon-redeem .directorist-coupon-redeem__form #directorist-coupon-redeem__btn {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	white-space: nowrap;
}

#directorist .directorist-coupon-redeem .directorist-coupon-redeem__title {
	margin: 0 0 14px;
}

#directorist .directorist-coupon-redeem #directorist-coupon-redeem__message:not(:empty) {
	display: block;
	margin-top: 10px;
}