/* Hallmark · v2.0.0 · system: locked to the live site (Sell page tokens, Fraunces + Instrument Sans) · shape: tool-first page + long document · signature: the asking-price range set large in Fraunces · genre: editorial */
/* Hallmark · critique: the range is the one idea on the worth page; the report is a plain document with two tables and its method in prose, no cards, no chips, no icon rows */
/* overflow-x: clip sits on the .ct-market wrapper: the WordPress theme owns html and body. */

/* ==========================================================================
   Home value page ([ct_home_worth]) and market report ([ct_market_report]),
   costa-tropical-market.php. Scoped under .ct-market. Colours, radii and the
   content width come from the Costa Estates tokens (--cse-*), as on the Sell
   page; the fallbacks are the live values. Logical properties throughout, so
   the Arabic pages mirror without extra rules.
   ========================================================================== */

:root {
	/* The live values of the Costa Estates tokens, used when a page lacks them. */
	--ctm-ink: #12201f;
	--ctm-text: #44504e;
	--ctm-muted: #5e6967;
	--ctm-line: #ddd6ca;
	--ctm-paper: #ffffff;
	--ctm-cream: #f4f0e8;
	--ctm-tint: #e6eeea;
	--ctm-on-accent: #ffffff;
	--ctm-teal: #0f5563;
	--ctm-teal-hover: #0a4350;
	--ctm-teal-ring: rgba(15, 85, 99, .18);
	--ctm-gold: #dca54a;
	--ctm-field: #7e8581;
	--ctm-err: #a8321f;
}

.ct-market {
	--ink: var(--cse-ink, var(--ctm-ink));
	--text: var(--cse-text, var(--ctm-text));
	--muted: var(--cse-muted, var(--ctm-muted));
	--line: var(--cse-line, var(--ctm-line));
	--paper: var(--cse-surface, var(--ctm-paper));
	--cream: var(--cse-surface-alt, var(--ctm-cream));
	--tint: var(--cse-panel-tint, var(--ctm-tint));
	--on-accent: var(--cse-accent-ink, var(--ctm-on-accent));
	--teal: var(--cse-primary, var(--ctm-teal));
	--teal-hover: var(--cse-primary-hover, var(--ctm-teal-hover));
	--teal-ring: var(--ctm-teal-ring);
	--gold: var(--ctm-gold);
	--field: var(--cse-field-border, var(--ctm-field));
	--err: var(--ctm-err);
	--f-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--r: var(--cse-radius, 6px);
	--r-lg: var(--cse-radius-lg, 10px);
	--rem: 16px;
	--wrap: var(--cse-detail-max, calc(71.25 * var(--rem)));
	--narrow: calc(46 * var(--rem));

	background: var(--paper);
	color: var(--text);
	font-family: var(--f-body);
	font-size: calc(1.0625 * var(--rem));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.ct-market *, .ct-market *::before, .ct-market *::after { box-sizing: border-box; }
.ct-market [hidden] { display: none !important; }

.ct-market .wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.ct-market .wrap.narrow { max-width: calc(var(--narrow) + 64px); }
@media (min-width: 720px) {
	.ct-market .wrap { padding-inline: 32px; }
}
.ct-market :is(h1, h2, h3) {
	font-family: var(--f-display); color: var(--ink); font-weight: 500; letter-spacing: -0.01em;
	line-height: 1.12; text-wrap: balance; margin: 0; overflow-wrap: break-word; min-width: 0;
}
.ct-market p { margin: 0; }
.ct-market label { font: inherit; color: inherit; letter-spacing: normal; margin: 0; }
.ct-market a { color: var(--teal); text-underline-offset: 3px; }
.ct-market a:hover { color: var(--teal-hover); }
.ct-market :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.ct-market .small { font-size: calc(.9 * var(--rem)); color: var(--muted); }
.ct-market .note { font-size: calc(.95 * var(--rem)); color: var(--ink); background: var(--cream); border-radius: var(--r); padding: 12px 16px; }

/* buttons: one primary style, one quiet one */
.ct-market .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 48px; padding: .75em 1.4em; border-radius: var(--r);
	font: 600 var(--rem)/1.2 var(--f-body); text-decoration: none; cursor: pointer;
	border: 1.5px solid var(--teal); transition: background-color .15s, color .15s, border-color .15s;
}
.ct-market .btn-primary { background: var(--teal); color: var(--on-accent); }
.ct-market .btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--on-accent); }
.ct-market .btn-primary:active { background: var(--teal-hover); }
.ct-market .btn-ghost { background: transparent; color: var(--teal); }
.ct-market .btn-ghost:hover { background: var(--tint); }
.ct-market .btn[disabled] { cursor: progress; background: var(--cream); border-color: var(--line); color: var(--muted); }

/* ---------------------------------------------------------------- worth: hero */

.ct-worth .hero .wrap {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px);
	align-items: start; padding-block: clamp(32px, 5vw, 64px) clamp(40px, 5vw, 72px);
}
.ct-worth .hero-copy { display: grid; gap: 16px; min-width: 0; padding-block-start: clamp(0px, 2vw, 24px); }
.ct-worth .hero h1 { font-size: clamp(calc(2.2 * var(--rem)), 4.2vw, calc(3.4 * var(--rem))); }
.ct-market .lead { font-size: calc(1.2 * var(--rem)); line-height: 1.55; max-width: 32em; color: var(--text); }
@media (max-width: 860px) {
	.ct-worth .hero .wrap { grid-template-columns: minmax(0, 1fr); }
}

.ct-market .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3.5vw, 36px); min-width: 0; }
.ct-worth .tool { background: var(--cream); border-color: var(--cream); }

/* ---------------------------------------------------------------- forms */

.ct-market form { display: grid; gap: 24px; margin: 0; }
.ct-market fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ct-market .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
@media (max-width: 600px) { .ct-market .row { grid-template-columns: minmax(0, 1fr); } }
.ct-market .field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ct-market .label { font-size: calc(.95 * var(--rem)); font-weight: 600; color: var(--ink); }
.ct-market .label .opt { font-weight: 400; color: var(--muted); }
.ct-market :is(input[type=text], input[type=email], input[type=tel], input[type=number], select) {
	width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; border: 1px solid var(--field); border-radius: var(--r);
	background-color: var(--paper); color: var(--ink); font: 400 var(--rem)/1.4 var(--f-body); box-shadow: none;
}
.ct-market select {
	appearance: none; padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2344504e' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.ct-market [dir=rtl] select, [dir=rtl] .ct-market select { background-position: left 14px center; }
.ct-market select:disabled { background-color: var(--cream); color: var(--muted); cursor: not-allowed; }
.ct-market :is(input, select):hover:not(:disabled) { border-color: var(--teal); }
.ct-market :is(input, select):focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-ring); }
.ct-market .field.invalid :is(input, select) { border-color: var(--err); }
.ct-market .err { display: none; font-size: calc(.85 * var(--rem)); color: var(--err); }
.ct-market .field.invalid .err { display: block; }
.ct-market .suffix { position: relative; }
.ct-market .suffix input { padding-inline-end: 48px; }
.ct-market .suffix span { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.ct-market .ticks { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.ct-market .ticks legend { float: inline-start; width: 100%; margin-block-end: 6px; padding: 0; }
.ct-market .tick { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--ink); }
.ct-market .tick input, .ct-market .consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal); flex: none; }
.ct-market .consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: calc(.92 * var(--rem)); }
.ct-market .consent input { margin-block-start: 2px; }
.ct-market .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.ct-market .submit-row .btn { min-width: calc(14 * var(--rem)); }
@media (max-width: 600px) { .ct-market .submit-row .btn { flex: 1 1 100%; } }
.ct-market .form-err { flex: 1 1 calc(16 * var(--rem)); min-width: 0; font-size: calc(.92 * var(--rem)); color: var(--err); }
/* Spam trap: clipped in place, never offset (an offset becomes sideways scroll on Arabic pages). */
.ct-market .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the answer */

.ct-worth .answer { display: grid; gap: 12px; justify-items: start; }
.ct-worth .answer:focus { outline: none; }
.ct-worth .answer-title { font: 500 calc(1.25 * var(--rem))/1.3 var(--f-display); color: var(--ink); }
.ct-worth .range {
	font: 500 clamp(calc(2.1 * var(--rem)), 5vw, calc(3.4 * var(--rem)))/1.05 var(--f-display);
	color: var(--teal); letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums;
	overflow-wrap: anywhere; min-width: 0;
}
.ct-worth .mid { font-size: calc(1.1 * var(--rem)); color: var(--ink); font-weight: 600; }
.ct-worth .basis { font-size: calc(.95 * var(--rem)); max-width: 36em; }
.ct-worth .answer .btn { margin-block-start: 8px; }
.ct-worth .tool .small { margin-block-start: 4px; }

/* ---------------------------------------------------------------- sections */

.ct-market .section { padding-block: clamp(64px, 9vw, 128px); }
.ct-worth .review { background: var(--cream); }
.ct-worth .review .card { display: grid; gap: 20px; }
.ct-worth .review h2, .ct-market .prose h2 { font-size: clamp(calc(1.8 * var(--rem)), 3vw, calc(2.4 * var(--rem))); }
.ct-market .lead-sm { font-size: calc(1.08 * var(--rem)); max-width: 38em; }
.ct-market .done { display: grid; gap: 12px; }
.ct-market .done:focus { outline: none; }
.ct-market .done h3 { font-size: calc(1.6 * var(--rem)); }
.ct-market .prose { display: grid; gap: 16px; }
.ct-market .prose p { max-width: 40em; }

/* ---------------------------------------------------------------- report */

.ct-report article { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); display: grid; gap: 20px; }
.ct-report h1 { font-size: clamp(calc(2.2 * var(--rem)), 4.2vw, calc(3.2 * var(--rem))); }
.ct-report h2 { font-size: clamp(calc(1.5 * var(--rem)), 2.6vw, calc(2 * var(--rem))); margin-block-start: clamp(24px, 4vw, 40px); }
.ct-report .report-head { display: grid; gap: 16px; }
.ct-report .big-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-block: 12px; border-block: 1px solid var(--line); }
.ct-report .big-figure .value { font: 500 clamp(calc(2.6 * var(--rem)), 7vw, calc(4.2 * var(--rem)))/1 var(--f-display); color: var(--teal); font-variant-numeric: lining-nums tabular-nums; }
.ct-report .big-figure .unit { font-size: calc(1.05 * var(--rem)); color: var(--ink); max-width: 18em; }
.ct-report .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-block-start: 2px solid var(--ink); }
.ct-report table { width: 100%; border: 0; margin: 0; border-collapse: collapse; font-size: calc(.98 * var(--rem)); min-width: calc(34 * var(--rem)); }
.ct-report th, .ct-report td { padding: 12px 12px 12px 0; text-align: start; border: 0; border-block-end: 1px solid var(--line); vertical-align: baseline; background: transparent; }
.ct-report thead th { font-weight: 600; color: var(--muted); font-size: calc(.88 * var(--rem)); line-height: 1.3; }
.ct-report tbody th { font-weight: 600; color: var(--ink); }
.ct-report .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: 12px 0; }
.ct-report tbody tr:hover { background: var(--cream); }
/* On a phone the town column stays in view while the figures scroll. */
.ct-report :is(thead th:first-child, tbody th) { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--paper); }
.ct-report tbody tr:hover th { background: var(--cream); }
.ct-report .sources { font-size: calc(.88 * var(--rem)); color: var(--muted); border-block-start: 1px solid var(--line); padding-block-start: 14px; margin-block-start: 16px; }

@media (prefers-reduced-motion: reduce) {
	.ct-market *, .ct-market *::before, .ct-market *::after { transition: none !important; }
}

/* 2026-11-13 (owner): the arrow covered the end of a long choice ("Apartments and penthous"). The shared
   field rule above (0,2,1) overrode the select's own end padding (0,1,1); this one wins and keeps the text
   clear of the arrow. */
.ct-market .field select { padding-inline-end: 40px; text-overflow: ellipsis; }