/*
 * CaryTamura header and footer.
 *
 * Every value resolves to a token from tokens.css — no literal colour, family
 * or size appears here, so the design system stays the single authority.
 *
 * Layout only. Elementor owns composition; this file owns how the composition
 * looks and how it behaves below the 1024/767 breakpoints, which the desktop
 * reference captures do not evidence (IMPLEMENTATION DECISION).
 */

/* ---------------------------------------------------------------- header -- */
.ct-header {
	background-color: var(--ct-canvas);
	border-bottom: var(--ct-border-width) solid var(--ct-hairline);
}

.ct-header__inner {
	gap: var(--ct-gap);
	padding-block: 20px;
}

.ct-header__brand,
.ct-header__brand a {
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h4);
	letter-spacing: var(--ct-track-display);
	text-transform: uppercase;
	color: var(--ct-ink);
	text-decoration: none;
}

.ct-header__nav .elementor-nav-menu a {
	font-family: var(--ct-font-label);
	font-size: var(--ct-size-label);
	letter-spacing: var(--ct-track-label);
	text-transform: uppercase;
	color: var(--ct-ink);
}

/* The accent is ~4.0:1 on white, below AA for small text, so it is used as a
 * hover/underline signal here rather than as the resting label colour. */
.ct-header__nav .elementor-nav-menu a:hover,
.ct-header__nav .elementor-nav-menu a:focus-visible {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-underline-offset: 6px;
}

.ct-header__phone .elementor-button {
	background-color: transparent;
	color: var(--ct-ink);
	font-family: var(--ct-font-label);
	font-size: var(--ct-size-label);
	letter-spacing: var(--ct-track-label);
	padding: 0;
	border-radius: var(--ct-radius);
}

/* ---------------------------------------------------------------- footer --
 * Measured from carytamura.com's footer (1440 / 1024 / 768 / 375). Order:
 * name; GET IN TOUCH beside an email / phone / address grid; The Agency logo
 * beside the legal links, franchise notice and REALTOR / Equal Housing mark;
 * a rule, then copyright and the social icons. The live site's Luxury
 * Presence credit and RLS disclaimer are not part of this footer.
 */
.ct-footer.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin-inline: var(--ct-body-padding);
	background-color: var(--ct-canvas);
}

.ct-footer__inner.e-con {
	--padding-top: 60px;
	--padding-bottom: 30px;
	/* Content capped at 1340px (FACT: 290..1630 at 1920), 50px gutters below. */
	--padding-left: max(50px, calc((100% - 1340px) / 2));
	--padding-right: max(50px, calc((100% - 1340px) / 2));
	--row-gap: 0px;
	--column-gap: 0px;
}

.ct-footer__name .elementor-heading-title {
	margin: 0 0 38px;
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 37.7px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-footer__top.e-con,
.ct-footer__brokerage-row.e-con,
.ct-footer__legal.e-con,
.ct-footer__colophon.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

.ct-footer__top.e-con {
	flex-direction: row;
	align-items: flex-start;
}

.ct-footer__top > .ct-footer__eyebrow {
	flex: 0 0 230px;
	width: 230px;
}

.ct-footer__eyebrow .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 31.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-footer__top > .ct-footer__contact {
	flex: 1 1 0;
	min-width: 0;
	margin-top: 8px;
}

/* Email and address share the first column; phone sits in a 400px column on
 * the right (FACT: icons at x292 and x978 at 1440). */
.ct-footer__contact-grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	grid-template-areas: "email phone" "address .";
	row-gap: 32px;
}

.ct-footer__contact-item--email { grid-area: email; }
.ct-footer__contact-item--phone { grid-area: phone; }
.ct-footer__contact-item--address { grid-area: address; }

.ct-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	color: var(--ct-ink);
}

.ct-footer__icon {
	flex: 0 0 auto;
	width: 30px;
	height: auto;
	color: var(--ct-ink);
}

.ct-footer__contact-label,
.ct-footer__contact-value {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-footer__contact-value {
	display: block;
}

.ct-footer__contact-label {
	margin-bottom: 7px;
}

.ct-footer__contact-item--address .ct-footer__contact-label,
.ct-footer__contact-item--address .ct-footer__contact-value {
	line-height: 22.4px;
}

.ct-footer__contact-item--address .ct-footer__contact-label {
	margin-bottom: 0;
}

/* Footer text links: ink with a fine grey rule (FACT: 1px #999). */
.ct-footer__contact a,
.ct-footer__links a,
.ct-footer__copyright a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: #999;
	text-underline-offset: 3px;
}

.ct-footer__contact a:hover,
.ct-footer__links a:hover,
.ct-footer__copyright a:hover {
	text-decoration-color: var(--ct-accent);
}

.ct-footer__brokerage-row.e-con {
	flex-direction: row;
	align-items: flex-start;
	margin-top: 39px;
}

/* The Agency logo: a 186x130 box in a 232px column, logo contained in it. */
.ct-footer__brokerage-row > .ct-footer__agency {
	flex: 0 0 232px;
	width: 232px;
}

.ct-footer__agency img {
	display: block;
	width: 186px;
	height: 130px;
	object-fit: contain;
}

.ct-footer__brokerage-row > .ct-footer__legal.e-con {
	flex: 1 1 0;
	min-width: 0;
}

.ct-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ct-footer__links li {
	margin: 0;
	line-height: 22.4px;
}

.ct-footer__links a {
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 1px;
}

.ct-footer__franchisee {
	margin: 0;
	padding: 19px 0 20px;
	font-family: var(--ct-font-body);
	font-size: 12px;
	line-height: 19.2px;
	letter-spacing: 1px;
	color: var(--ct-ink);
}

.ct-footer__realtor img {
	display: block;
	width: 100px;
	height: auto;
}

.ct-footer__colophon.e-con {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 39px;
	padding: 58px 0 43px;
	border-top: 1px solid #b9b9b9;
}

.ct-footer__copyright {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 18px;
	line-height: 28.8px;
	letter-spacing: 1px;
	color: var(--ct-ink);
}

.ct-footer__social {
	width: auto;
}

.ct-footer .ct-footer__social .elementor-social-icon {
	color: var(--ct-canvas);
}

@media (max-width: 1024px) {
	.ct-footer__name .elementor-heading-title {
		margin-bottom: 46px;
	}

	.ct-footer__top.e-con {
		flex-direction: column;
	}

	.ct-footer__top > .ct-footer__eyebrow {
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-footer__top > .ct-footer__contact {
		width: 100%;
		margin-top: 19px;
	}

	.ct-footer__contact-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 54px;
	}

	.ct-footer__brokerage-row.e-con {
		flex-direction: column;
		margin-top: 61px;
	}

	.ct-footer__brokerage-row > .ct-footer__agency,
	.ct-footer__brokerage-row > .ct-footer__legal.e-con {
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-footer__brokerage-row > .ct-footer__legal.e-con {
		margin-top: -15px;
	}

	/* Copyright on its own line, social icons left-aligned beneath (FACT). */
	.ct-footer__colophon.e-con {
		justify-content: flex-start;
		row-gap: 27px;
	}

	.ct-footer__colophon > .elementor-widget {
		width: 100%;
	}

	/* Elementor lays the icons out inline (grid-0), aligned by text-align. */
	.ct-footer .ct-footer__colophon .ct-footer__social .elementor-social-icons-wrapper {
		text-align: left;
	}
}

@media (max-width: 900px) {
	.ct-footer__contact-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "email" "phone" "address";
		row-gap: 30px;
	}

	.ct-footer__agency img {
		width: 186px;
		height: 70px;
		margin-inline: auto;
	}

	.ct-footer__brokerage-row > .ct-footer__legal.e-con {
		margin-top: 46px;
	}

	/* Social icons lead the colophon, centred, with the copyright below. */
	.ct-footer__colophon.e-con {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin-top: 51px;
		padding-top: 0;
		border-top: 0;
		row-gap: 30px;
		text-align: center;
	}

	.ct-footer__colophon > .ct-footer__social {
		order: -1;
	}

	.ct-footer .ct-footer__colophon .ct-footer__social .elementor-social-icons-wrapper {
		text-align: center;
	}

	.ct-footer .ct-footer__colophon .ct-footer__social.elementor-widget {
		--grid-column-gap: 12px;
	}
}

@media (max-width: 767px) {
	.ct-footer.e-con {
		--width: 100%;
		margin-inline: 0;
	}

	.ct-footer__inner.e-con {
		--padding-top: 10px;
		--padding-left: 20px;
		--padding-right: 20px;
	}

	.ct-footer__name .elementor-heading-title {
		font-size: 21px;
		line-height: 34px;
	}

	.ct-footer__eyebrow .elementor-heading-title {
		font-size: 18px;
		line-height: 29px;
	}

	.ct-footer__legal.e-con {
		text-align: center;
	}

	.ct-footer__realtor img {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------ hamburger --
 * The hamburger (CT Header's second Nav Menu widget, the Hamburger menu in
 * Elementor's Dropdown layout) and its black panel sliding in from the right,
 * on every page — hero or not, as live. Elementor's own toggle and dropdown,
 * restyled (FACT: three 26px bars in a 52x58 box; the panel is 270px /
 * Playfair 18px / 52px rows up to tablet, 400px / 21px / 56px from 1025).
 * Scoped to the widget with the toggle, never the desktop bar's own (hidden)
 * dropdown. The bars are ink on the solid header; header-overlay.css turns
 * them white over a hero. */
.ct-header__nav .elementor-menu-toggle {
	color: var(--ct-ink);
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-menu-toggle {
	position: relative;
	z-index: 2;
	width: 52px;
	height: 58px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

/* Three 26px x 2px bars, 9px apart, drawn rather than Elementor's
 * heavier icon. */
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) {
	background:
		linear-gradient(currentColor, currentColor) center calc(50% - 9px) / 26px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 26px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center calc(50% + 9px) / 26px 2px no-repeat;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-menu-toggle .elementor-menu-toggle__icon--open {
	display: none;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-menu-toggle .elementor-menu-toggle__icon--close {
	width: 22px;
	height: 22px;
	fill: var(--ct-on-dark);
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1;
	width: 270px;
	max-width: 100vw;
	margin: 0;
	padding: 46px 20px 20px;
	background-color: #000;
	transform-origin: right center;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	max-height: 100vh;
	height: 100vh;
	overflow-y: auto;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* white-space: the desktop bar's nowrap (above) would push a long label
 * (ESTIMATED CLOSING COSTS) past the 270px panel; live wraps it instead. */
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a,
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:hover,
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:focus-visible,
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a.elementor-item-active {
	justify-content: center;
	min-height: 52px;
	padding: 14px 0;
	font-family: var(--ct-font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	white-space: normal;
	color: var(--ct-on-dark);
	background-color: transparent;
	text-decoration: none;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:hover,
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* A submenu (About) is itself an Elementor `.elementor-nav-menu--dropdown`
 * list with Elementor's white ground, and its indicator svg has no fill of
 * its own: both take the panel's colours instead. */
.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown .sub-menu {
	background-color: transparent;
}

.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown .sub-arrow svg {
	fill: currentColor;
}

@media (min-width: 1025px) {
	/* On the solid header the hamburger sits last, after the phone (live). */
	.ct-header .e-con-inner > .ct-header__nav.elementor-nav-menu--toggle {
		order: 1;
		flex: 0 0 auto;
		width: auto;
	}

	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		display: block;
		width: 400px;
		/* 40px panel padding plus the live close-button row: items start at 78px. */
		padding: 78px 40px 100px;
	}

	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown li {
		border-bottom-color: #0d0d0d;
	}

	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a,
	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:hover,
	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a:focus-visible,
	.ct-header .ct-header__nav.elementor-nav-menu--toggle .elementor-nav-menu--dropdown a.elementor-item-active {
		min-height: 56px;
		font-size: 21px;
		letter-spacing: 0.5px;
	}
}

/* ------------------------------------------------------------ responsive -- *
 * IMPLEMENTATION DECISION: the four reference captures are desktop only, so
 * the stacking rules below are engineering judgement, not evidence.
 */
@media (max-width: 1024px) {
	/* The collapsed menu keeps its full text width in flow, which pushed the
	 * toggle off the brand's row. Lift it out as a panel under the toggle. */
	.ct-header .ct-header__nav { position: relative; }

	.ct-header .ct-header__nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 20;
		min-width: 220px;
		background-color: var(--ct-canvas);
	}
}

@media (max-width: 767px) {
	/* Brand and the menu toggle share the first row; the phone follows on its
	 * own line so the tap target keeps its full width instead of being
	 * squeezed against the toggle. */
	/* The selectors target .e-con-inner: a boxed Elementor container lays its
	 * children out there, not on .ct-header__inner itself, so rules on the
	 * outer element never reached the row. The .ct-header prefix outranks
	 * Elementor's own `.e-con > .e-con-inner > .elementor-widget` width. */
	.ct-header .ct-header__inner > .e-con-inner {
		/* Elementor switches containers to flex-direction:column at the mobile
		 * breakpoint by default; the header must stay a row so the brand and
		 * the menu toggle share the first line. */
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: 8px;
		align-items: center;
		justify-content: space-between;
	}

	/* 0 1 auto, not 1 1 auto: a growing brand consumes the whole row and
	 * pushes the toggle onto a line of its own. */
	.ct-header .e-con-inner > .ct-header__brand { flex: 0 1 auto; width: auto; }
	/* Elementor gives every widget width:100%; without overriding it the
	 * toggle claims the whole row regardless of flex settings. */
	.ct-header .e-con-inner > .ct-header__nav { order: 2; flex: 0 0 auto; width: auto; }
	.ct-header .e-con-inner > .ct-header__phone { order: 3; flex: 1 0 100%; text-align: left; }
}

/* --------------------------------------------------------- accessibility -- */
.ct-header a:focus-visible,
.ct-footer a:focus-visible,
.ct-header .elementor-button:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ct-header *,
	.ct-footer * {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------- link colour discipline --
 * Elementor's kit maps link colour to the ACCENT global. On white that is
 * ~4.0:1 — below WCAG AA 4.5:1 for normal-size text — and the reference site
 * renders these links in ink, not red. Header and footer links are therefore
 * pinned to ink and use the accent only as an underline/hover signal, so
 * colour is never the sole carrier of meaning either.
 */
.ct-header a:not(.elementor-button),
.ct-footer a {
	color: var(--ct-ink);
}

/* The phone is a link, not a call-to-action button: strip Elementor's button
 * chrome rather than leaving a red pill the reference does not have. */
.ct-header__phone .elementor-button,
.ct-header__phone .elementor-button:hover,
.ct-header__phone .elementor-button:focus {
	background-color: transparent;
	color: var(--ct-ink);
	border: 0;
	box-shadow: none;
	padding: 0;
	font-family: var(--ct-font-label);
	font-size: var(--ct-size-label);
	letter-spacing: var(--ct-track-label);
}

.ct-header__phone .elementor-button:hover .elementor-button-text {
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-underline-offset: 5px;
}

/* The white monogram (media 911) is what the header draws on a dark ground —
 * the home hero and every other hero page, see header-overlay.css. Hidden by
 * default so the solid-state rule below owns when it appears. */
.ct-header .ct-header__logo {
	display: none;
}

/*
 * ONE LOCKUP, BOTH SURFACES.
 *
 * Every page draws the same logo. On a hero page it is the white lockup over
 * the image; on a page with no hero behind it — a single property, an archive,
 * a 404 — that same asset is inverted to black rather than swapped for a
 * different mark, so the two states cannot drift apart as two files would.
 * `invert()` is exact here and nowhere near a hack: media 911 is a pure white
 * silhouette on transparency, so inverting maps white to black and leaves the
 * transparency untouched. The alternative black asset in the library (media
 * 5332) is the monogram WITHOUT the wordmark, so using it would have shown a
 * different lockup on those pages.
 *
 * Smaller than the hero state (56px against 100px) because this header is a
 * compact bar rather than a band floating over a picture, and the text wordmark
 * it replaces stood 22px tall.
 */
body:not(.ct-hero-page) .ct-header .ct-header__inner > .e-con-inner > .ct-header__logo {
	display: block;
	flex: 0 0 auto;
	width: auto;
	margin-inline-end: auto;
	line-height: 0;
}

body:not(.ct-hero-page) .ct-header__logo img {
	display: block;
	width: auto;
	height: 56px;
	filter: invert(1);
}

/* The text wordmark was the stand-in for the logo on this surface; with the
 * lockup itself present it would repeat the name beside it. */
body:not(.ct-hero-page) .ct-header .ct-header__brand {
	display: none;
}

@media (max-width: 767px) {
	body:not(.ct-hero-page) .ct-header__logo img {
		height: 44px;
	}
}

/* Brand lockup — the text wordmark on the white header. */
.ct-header__brand .elementor-heading-title,
.ct-header__brand .elementor-heading-title a {
	font-family: var(--ct-font-display);
	font-size: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-ink);
	text-decoration: none;
	white-space: nowrap;
}

/* Keep the nav on one line at desktop; it wraps only below the tablet
 * breakpoint (IMPLEMENTATION DECISION — the captures are desktop only). */
.ct-header__nav .elementor-nav-menu {
	flex-wrap: nowrap;
}

.ct-header__nav .elementor-nav-menu a.elementor-item {
	padding-inline: 12px;
	white-space: nowrap;
}

/* Current-page indicator: ink text with an accent underline, never accent
 * text. Same reason as above (contrast), plus the underline means the current
 * item is still identifiable without perceiving colour. */
.ct-header__nav .elementor-nav-menu a.elementor-item.elementor-item-active,
.ct-header__nav .elementor-nav-menu a.elementor-item-active {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}