/* -----------------------------------------------------------------------------
 * Su Casa — Tap-to-Call CTA (audit finding 13) · staging design preview
 *
 * Three variations of a clickable phone number, built from the site's own
 * palette, type stack and spacing. Nothing here touches an existing selector
 * except one deliberate rule that moves the fixed hamburger down while the
 * variant B ribbon occupies the top of the page.
 *
 * Palette read from wp-content/themes/sucasa-2020/style.css and from the
 * rendered pages on 2026-09-10:
 *   #6C6D6D  body ink            #908880  wordmark / headings warm grey
 *   #AEA296  footer taupe        #D7D5CD  hairline        #C3C1BB  hairline mid
 *   #F5F4F2  header band       #F2F1F1  cream        #544D47  the theme's hover ink
 *   #6B6055  the footer taupe darkened until white type clears WCAG AA (6.12:1)
 * -------------------------------------------------------------------------- */

:root {
	--sc-ink: #6c6d6d;
	--sc-warm: #908880;
	--sc-taupe: #aea296;
	--sc-deep: #6b6055;
	--sc-deep-hover: #5f564c;
	--sc-band: #f5f4f2;
	--sc-cream: #f2f1f1;
	--sc-rule: #d7d5cd;
	--sc-rule-mid: #c3c1bb;
	/* The theme's own hover ink. On the cream hero plate below it never drops
	   under 6.45:1, whatever photograph Su Casa puts behind it. */
	--sc-ink-strong: #544d47;
	/* Light warm tone for secondary type on the deep taupe: 5.12:1. */
	--sc-on-deep: #efeae4;

	/* The site's own stacks. Typekit serves "usual" and "playfair-display";
	   when the kit is unavailable these fall back exactly as the rest of the
	   site does, so the CTA never looks like a different typeface. */
	--sc-sans: usual, sans-serif;
	--sc-serif: playfair-display, serif;

	/* Raised by cta.js while the Complianz consent banner is on screen, and
	   capped there so nothing ever climbs out of the bottom third of the screen. */
	--sc-inset-b: 0px;
	/* Height of the variant B ribbon at the current breakpoint. */
	--sc-ribbon-h: 0px;
}

.sc-cta,
.sc-cta-switch {
	font-family: var(--sc-sans);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(107, 96, 85, 0.12);
}

.sc-cta__ico {
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
}

/* Visible keyboard focus — the theme zeroes the default ring in :focus. */
.sc-cta:focus-visible,
.sc-cta-switch__opt:focus-visible {
	outline: 2px solid var(--sc-ink);
	outline-offset: 4px;
	border-radius: 3px;
}

/* Keep the slide-out menu uncluttered — but never hide the control that
   currently holds keyboard focus. Tabbing through the menu links opens the menu,
   so without the :not(:focus) guard the focus ring lands on an invisible
   element the moment focus reaches the call link (WCAG 2.4.7). */
html.responsive-menu-pro-open .sc-cta-a:not(:focus),
html.responsive-menu-pro-open .sc-cta-c:not(:focus),
html.responsive-menu-pro-open .sc-cta-b:not(:focus),
html.responsive-menu-pro-open .sc-cta-switch {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* And bring it back instantly rather than over a 0.35s fade, so the ring is
   never drawn on something half-faded. */
html.responsive-menu-pro-open .sc-cta:focus {
	opacity: 1 !important;
	pointer-events: auto !important;
	transition-duration: 0.01s !important;
}

@media print {
	.sc-cta,
	.sc-cta-switch,
	.sc-cta-b-spacer {
		display: none !important;
	}
}

/* =============================================================================
 * A — CONCIERGE
 * A fine, letter-spaced link fixed at the top left, balancing the hamburger at
 * the top right so the wordmark keeps the middle. It rides on a cream plate in
 * the hero button's own language, because a fixed element passes over
 * photography at some point on every page.
 * ========================================================================== */

.sc-cta-a {
	position: fixed;
	top: 17px;
	left: 3.5%;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	height: 55px;
	text-decoration: none;
	transition: opacity 0.35s ease, background-color 0.35s ease;
}

.sc-cta-a__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	line-height: 1;
}

.sc-cta-a__word {
	margin-left: 11px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sc-cta-a__rule {
	width: 1px;
	height: 15px;
	margin: 0 13px;
	background: currentColor;
	opacity: 0.42;
}

.sc-cta-a__num {
	position: relative;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Hairline that draws itself in on hover — the site's understated motion. */
.sc-cta-a__num::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-cta-a:hover .sc-cta-a__num::after,
.sc-cta-a:focus-visible .sc-cta-a__num::after {
	transform: scaleX(1);
}

.sc-cta-a:hover .sc-cta-a__disc {
	transform: none;
}

/* The link is fixed, so at any scroll position on any page it can be over
   photography — measured 2.46:1 for white type on the home hero. It therefore
   always sits on the same cream plate, 8px radius and dark ink that the hero's
   own "Begin Your Home Journey" button already uses. Contrast becomes a fixed
   6.45:1 floor instead of a property of whichever photograph is loaded, with no
   JavaScript involved. Over the header band the plate is within two levels of
   the band's own colour, so it reads as barely there. */
.sc-cta-a {
	padding: 0 16px;
	border-radius: 8px;
	background: rgba(242, 241, 241, 0.94);
	color: var(--sc-ink-strong);
	box-shadow: 0 1px 9px rgba(6, 5, 5, 0.11);
}

.sc-cta-a:focus-visible {
	outline-color: var(--sc-ink-strong);
}

/* Below the tablet breakpoint the header has no room for type, so the link
   becomes a 44 x 44 hairline disc — an exact optical mirror of the hamburger. */
@media (max-width: 767px) {
	.sc-cta-a {
		top: 22px;
		left: calc(3.5% + 5px);
		width: 44px;
		height: 44px;
		justify-content: center;
		padding: 0;
		border: 1px solid rgba(84, 77, 71, 0.26);
		border-radius: 50%;
		background: rgba(242, 241, 241, 0.94);
	}

	.sc-cta-a__word,
	.sc-cta-a__rule,
	.sc-cta-a__num {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.sc-cta-a__disc {
		font-size: 18px;
	}


}

/* At 320px the wordmark starts 50px from the left edge; 4px keeps the disc
   clear of its box entirely rather than touching it by 2px2. */
@media (max-width: 359px) {
	.sc-cta-a {
		left: 4px;
	}
}

/* Tablet: drop the word, keep the number. */
@media (min-width: 768px) and (max-width: 1023px) {
	.sc-cta-a__word,
	.sc-cta-a__rule {
		display: none;
	}

	.sc-cta-a__num {
		margin-left: 11px;
		font-size: 14px;
	}
}

/* =============================================================================
 * B — THE RIBBON
 * A slim band in a deepened footer taupe that carries one line of the offer and
 * the number. On desktop it sticks to the top of the window; on a phone the
 * same ribbon moves to the bottom of the screen, where the thumb is.
 * ========================================================================== */

.sc-cta-b {
	position: sticky;
	top: 0;
	z-index: 9990;
	display: block;
	background: var(--sc-deep);
	color: #fff;
	text-decoration: none;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-cta-b__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	min-height: 44px;
	padding: 0 20px;
}

.sc-cta-b__msg {
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sc-on-deep);
	white-space: nowrap;
}

.sc-cta-b__sep {
	width: 1px;
	height: 14px;
	margin: 0 20px;
	background: #fff;
	opacity: 0.32;
	flex: none;
}

.sc-cta-b__word {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-cta-b__word .sc-cta__ico {
	font-size: 15px;
}

.sc-cta-b__num {
	margin-left: 14px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.07em;
	white-space: nowrap;
	transition: border-color 0.4s ease;
}

.sc-cta-b:hover .sc-cta-b__num {
	border-bottom-color: #fff;
}

.sc-cta-b:focus-visible {
	outline-color: #fff;
	outline-offset: -4px;
}

/* The hamburger is fixed at top:17px; step it below the ribbon while B runs. */
body.sc-cta-var-b button#responsive-menu-pro-button {
	top: calc(17px + var(--sc-ribbon-h));
}

body.sc-cta-var-b button#responsive-menu-pro-button.is-active {
	top: calc(15px + var(--sc-ribbon-h));
}

@media (min-width: 768px) {
	:root {
		--sc-ribbon-h: 44px;
	}
}

/* A 44px band is 11% of a landscape phone, and sticking it there hides two
   footer links. Below 500px tall it scrolls away with the page instead. */
@media (min-width: 768px) and (max-height: 499px) {
	.sc-cta-b {
		position: static;
	}
}

@media (min-width: 768px) and (max-width: 899px) {
	.sc-cta-b__msg {
		display: none;
	}

	.sc-cta-b__sep {
		display: none;
	}
}

/* Phone: the ribbon becomes the bar under your thumb. */
@media (max-width: 767px) {
	.sc-cta-b {
		position: fixed;
		top: auto;
		right: 0;
		bottom: var(--sc-inset-b);
		left: 0;
		box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.16), 0 -12px 34px rgba(84, 77, 71, 0.2);
	}

	.sc-cta-b__inner {
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		min-height: 64px;
		padding: 11px 20px calc(11px + env(safe-area-inset-bottom, 0px));
	}

	.sc-cta-b__msg,
	.sc-cta-b__sep {
		display: none;
	}

	.sc-cta-b__word {
		font-size: 10px;
		letter-spacing: 0.26em;
		color: var(--sc-on-deep);
	}

	.sc-cta-b__word .sc-cta__ico {
		font-size: 13px;
	}

	.sc-cta-b__num {
		margin-left: 0;
		padding-bottom: 0;
		border-bottom: 0;
		font-size: 20px;
		letter-spacing: 0.05em;
	}

	/* Slides away while the footer's own "Contact Us" call to action is on screen. */
	.sc-cta-b--tucked {
		transform: translateY(115%);
	}

	.sc-cta-b-spacer {
		height: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}

/* =============================================================================
 * C — WITHIN REACH
 * A floating pill that stays out of the way until the visitor starts reading,
 * then follows them down every page.
 * ========================================================================== */

.sc-cta-c {
	position: fixed;
	right: 40px;
	/* 56px, not 40: Complianz parks a "Manage consent" tab in this corner. */
	bottom: calc(56px + var(--sc-inset-b));
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	height: 54px;
	padding: 0 24px 0 20px;
	/* 8px and a quiet shadow: the site's only button is an 8px flat rectangle,
	   so a 999px pill under a 26px drop shadow reads as somebody else's widget. */
	border-radius: 8px;
	background: var(--sc-deep);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(84, 77, 71, 0.18), 0 1px 3px rgba(84, 77, 71, 0.14);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Default state is VISIBLE, so with JavaScript blocked the number is simply
   there and dials like any other link. The 240px entrance is applied only once
   the inline flag in <head> confirms scripting is running. */
html.sc-js .sc-cta-c {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
}

html.sc-js .sc-cta-c.is-in {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Stepped aside while the footer's own invitation is on screen — at every
   width, because the pill covers footer navigation in landscape. */
.sc-cta-c--tucked,
html.sc-js .sc-cta-c--tucked.is-in {
	opacity: 0;
	transform: translateY(150%);
	pointer-events: none;
}

/* Focus must never land on something that cannot be seen (WCAG 2.4.7), so
   keyboard focus reveals it immediately whatever state it is in. */
.sc-cta-c:focus,
.sc-cta-c:focus-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
	transition-duration: 0.01s;
}

.sc-cta-c:hover {
	background: var(--sc-deep-hover);
	box-shadow: 0 14px 32px rgba(84, 77, 71, 0.26), 0 2px 5px rgba(84, 77, 71, 0.16);
}

.sc-cta-c:active {
	transform: translateY(0) scale(0.965);
	transition-duration: 0.09s;
}

.sc-cta-c:focus-visible {
	outline-color: var(--sc-deep);
	outline-offset: 4px;
}

.sc-cta-c__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	line-height: 1;
}

.sc-cta-c__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.sc-cta-c__word {
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--sc-on-deep);
}

.sc-cta-c__num {
	font-family: var(--sc-serif);
	font-size: 17px;
	line-height: 1;
	letter-spacing: 0.035em;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.sc-cta-c {
		right: 16px;
		bottom: calc(16px + var(--sc-inset-b) + env(safe-area-inset-bottom, 0px));
		height: 56px;
		padding: 0 24px 0 21px;
	}

	.sc-cta-c__num {
		font-size: 18px;
	}
}

/* Under 500px tall there is not enough screen to lift anything clear of the
   consent notice, so the fixed controls step aside until it is answered. */
@media (max-height: 499px) {
	body.sc-consent-open .sc-cta-c {
		opacity: 0 !important;
		transform: translateY(150%) !important;
		pointer-events: none !important;
	}
}

@media (max-height: 499px) and (max-width: 767px) {
	body.sc-consent-open .sc-cta-b {
		opacity: 0 !important;
		transform: translateY(150%) !important;
		pointer-events: none !important;
	}
}

/* =============================================================================
 * The contact page's own phone link
 * It is the number's only home on the site today and it is a 12.8px-tall tap
 * target. Padding grows the hit box without moving a single pixel of type.
 * ========================================================================== */

body.sc-cta-on a[href^="tel:"]:not(.sc-cta) {
	padding: 16px 4px;
	margin: 0 -4px;
}

/* =============================================================================
 * Presentation switcher — shown only while a variant is active, or ?switcher=1.
 * ========================================================================== */

.sc-cta-switch {
	position: fixed;
	bottom: calc(16px + var(--sc-inset-b) + env(safe-area-inset-bottom, 0px));
	left: 16px;
	z-index: 9995;
	display: inline-flex;
	align-items: center;
	padding: 5px 6px 5px 4px;
	border: 1px solid var(--sc-rule);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 18px rgba(84, 77, 71, 0.15);
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

.sc-cta-switch:hover {
	opacity: 1;
}

.sc-cta-switch__lbl {
	padding: 0 8px 0 7px;
	font-size: 8px;
	letter-spacing: 0.24em;
	color: var(--sc-ink);
}

.sc-cta-switch__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	padding: 0 7px;
	border-radius: 999px;
	color: var(--sc-ink);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sc-cta-switch__opt:hover {
	background: var(--sc-cream);
}

.sc-cta-switch__opt.is-on {
	background: var(--sc-deep);
	color: #fff;
}

/* Lift the switcher above variant B's bottom bar on a phone. */
@media (max-width: 767px) {
	body.sc-cta-var-b .sc-cta-switch {
		bottom: calc(80px + var(--sc-inset-b) + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-cta,
	.sc-cta *,
	.sc-cta-switch__opt {
		transition-duration: 0.01ms !important;
	}

	html.sc-js .sc-cta-c.is-in,
	.sc-cta-c:not(.sc-cta-c--tucked) {
		transform: none;
	}
}