/*
 * CaryTamura Estimated Closing Costs page (/estimated-closing-costs/, Page 5483).
 *
 * SCOPE. Loaded on that page only (functions.php, is_page()), after
 * page-hero.css and sections.css. It tunes the page's CT Page Hero band to
 * the live closing-costs hero and lays out the three property-type sections
 * (`.ct-ecc`: title, intro, two captioned tables each) and the Download PDF
 * band. Work With Cary is the global template in the shared section frame.
 *
 * THE TABLES are live's own markup, copied verbatim into HTML widgets
 * (`.ct-ecc__table`): the `.dcf-overflow-x-auto` wrapper, the table, its
 * inline header colours and widths, and the empty paragraphs above and below
 * each cell's text, which are what give live its tall rows. So the rules
 * below restate the few generic table rules live applies to that markup,
 * and neutralise the parent theme's table reset (borders on every side,
 * 15px padding, top alignment, zebra striping, a grey row hover), none of
 * which live has. HTML widgets, not Text Editors, because the Text Editor
 * runs wptexturize, which would turn live's "$2,500 - $5,000" into an en
 * dash and change the published figures.
 *
 * VALUES. Measured from carytamura.com/estimated-closing-costs at 1440,
 * 1024, 768 and 375 wide (FACT) unless marked. Live breakpoints: 768 (less
 * space above the page and below each table), 767 (the sections leave the
 * 12px frame, 25px sides, tighter heading margins), 600 (full-width button),
 * 560 (smaller headings). Live tables keep their three columns at every
 * width and scroll sideways inside their own box when they no longer fit.
 *
 * MOTION. None on live beyond the button's hover, which is the shared .ct-btn.
 */

/* ------------------------------------------------------------------ hero --
 * The same intro band as the other inner pages (600px, framed 12px, 45%
 * scrim, title lifted by 24px), except that live gives this title the whole
 * 1400px intro box with 50px sides (25px from 767), so ESTIMATED CLOSING
 * COSTS runs on one line at 1440 and wraps at 1024, as live does. */
.ct-page-hero.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin: var(--ct-body-padding) var(--ct-body-padding) 0;
	min-height: 0;
	height: 600px;
	padding: 0 var(--ct-body-padding);
}

.ct-page-hero::before {
	background-color: var(--ct-overlay-strong);
}

.ct-page-hero::after {
	content: none;
}

/* Written to outrank Elementor's `.elementor.elementor .e-con > .elementor-widget`
 * max-width. */
.elementor .ct-page-hero.e-con > .elementor-widget.ct-page-hero__title {
	width: calc(100% - 2 * (50px - var(--ct-body-padding)));
	max-width: 1300px;
}

.ct-page-hero .ct-page-hero__title .elementor-heading-title {
	margin: 0 0 24px;
	font-size: var(--ct-size-h1);
	line-height: 1.25;
}

/* The page body's own padding is dropped: every section carries its own. */
.ct-page-body:has(.ct-ecc) {
	padding-block: 0;
}

/* -------------------------------------------------------------- sections --
 * Warm white (#F6F3EB, live), framed 12px, 50px sides. The first section
 * opens 96px under the hero; the next two follow straight on from the table
 * above them. */
.ct-ecc.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 50px;
	--padding-right: 50px;
	margin-inline: var(--ct-body-padding);
	background-color: #f6f3eb; /* FACT: live section colour, used nowhere else yet */
	color: var(--ct-ink);
}

.ct-ecc--condo.e-con {
	--padding-top: var(--ct-section-padding);
}

/* Widget sizes and margins are written to outrank Elementor's own
 * `.e-con .elementor-widget.elementor-widget` margin and
 * `.elementor.elementor .e-con > .elementor-widget` max-width. */
.elementor .ct-ecc.e-con > .elementor-widget {
	--kit-widget-spacing: 0px;
	margin: 0;
}

/* Title, intro and captions sit in a 1300px box; the tables use the full
 * width inside the 50px sides. */
.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__title,
.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__intro,
.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__caption {
	width: 100%;
	max-width: 1300px;
	margin-inline: auto;
}

.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__title {
	margin-bottom: 24px;
}

.ct-ecc .ct-ecc__title .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: 43px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
}

.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__intro {
	margin-bottom: 32px;
}

.ct-ecc .ct-ecc__intro .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: none;
	text-align: center;
	color: var(--ct-ink);
}

/* The caption over each table: Lato bold 16/1.6, left, 25px above the table. */
.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__caption {
	margin-bottom: 24.99px;
}

.ct-ecc .ct-ecc__caption .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
	text-align: left;
	color: var(--ct-ink);
}

/* ----------------------------------------------------------------- tables --
 * 50px under each table (30px from 768), plus the table's own 25px. */
.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__table {
	width: 100%;
	margin-bottom: 50px;
	text-align: center;
}

.ct-ecc .dcf-overflow-x-auto {
	overflow-x: auto;
}

.ct-ecc .dcf-table {
	width: 100%;
	margin: 0 0 24.99px;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #fff;
	font-family: var(--ct-font-body);
	font-size: 15px;
	line-height: 16px;
	letter-spacing: 1px;
	color: var(--ct-ink);
}

.ct-ecc .dcf-table td,
.ct-ecc .dcf-table th {
	padding: 12.495px 16.66px 11.495px;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	background-color: transparent;
	font-feature-settings: "tnum";
	line-height: 16px;
	text-align: left;
	vertical-align: middle;
}

.ct-ecc .dcf-table th {
	font-weight: 700;
}

.ct-ecc .dcf-table td:first-child,
.ct-ecc .dcf-table th:first-child {
	padding-left: 0;
}

.ct-ecc .dcf-table td:last-child,
.ct-ecc .dcf-table th:last-child {
	padding-right: 0;
}

.ct-ecc .dcf-table thead tr:first-child th {
	border-top: 0;
}

.ct-ecc .dcf-table tbody > tr:nth-child(odd) > td,
.ct-ecc .dcf-table tbody > tr:nth-child(odd) > th,
.ct-ecc .dcf-table tbody tr:hover > td,
.ct-ecc .dcf-table tbody tr:hover > th {
	background-color: transparent;
}

.ct-ecc .dcf-table p {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
}

.ct-ecc .dcf-table strong {
	font-weight: bolder;
}

/* -------------------------------------------------------------- download --
 * The shared primary button, centred, 48px of section below it. */
.ct-ecc--download.e-con {
	--padding-bottom: calc(var(--ct-section-padding) / 2);
}

.ct-ecc .ct-ecc__download .elementor-button {
	line-height: 14px;
}

/* ------------------------------------------------------ work with cary --
 * Elementor's tablet range starts at 1024, where the live section is still
 * its desktop 689px. */
@media (min-width: 901px) and (max-width: 1024px) {
	.ct-ecc-work-with .ct-work-with.e-con {
		min-height: 689px;
	}
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 768px) {
	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		font-size: 32px;
	}

	.ct-ecc--condo.e-con {
		--padding-top: var(--ct-section-padding-compact);
	}

	.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__table {
		margin-bottom: 30px;
	}

	.ct-ecc--download.e-con {
		--padding-bottom: calc(var(--ct-section-padding-compact) / 2);
	}
}

@media (max-width: 767px) {
	.ct-page-hero.e-con {
		--width: 100%;
		margin: 0;
		height: 600px;
		padding: 0 var(--ct-body-padding);
	}

	.elementor .ct-page-hero.e-con > .elementor-widget.ct-page-hero__title {
		width: calc(100% - 2 * (25px - var(--ct-body-padding)));
	}

	.ct-ecc.e-con {
		--width: 100%;
		--padding-left: 25px;
		--padding-right: 25px;
		margin-inline: 0;
	}

	.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__title,
	.elementor .ct-ecc.e-con > .elementor-widget.ct-ecc__intro {
		margin-bottom: 16px;
	}

	/* Live's button keeps its desktop 58px height on phones (FACT at 375),
	 * so the shared phone padding (buttons-links.css) is restored here, as
	 * on the home sections. */
	.ct-ecc .ct-ecc__download .elementor-button {
		padding: 20px 46px;
	}
}

@media (max-width: 600px) {
	.ct-ecc .ct-ecc__download .elementor-button {
		display: block;
		width: 100%;
	}
}

@media (max-width: 560px) {
	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		line-height: 1.6;
	}

	.ct-ecc .ct-ecc__title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: 0.75px;
	}

	.ct-ecc .ct-ecc__intro .elementor-heading-title {
		font-size: 18px;
		line-height: 1.6;
	}
}

@media (max-width: 360px) {
	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		font-size: 22px;
	}
}