/**
 * KSM Patio Cost — front-end styles.
 *
 * Deliberately restrained: inherits the theme's font and colours through
 * currentColor and em-based sizing so it sits inside any KSM theme without
 * fighting it. Override the custom properties to re-skin per site.
 */

.ksm-patio-cost {
	--ksm-pc-accent: #1f6f43;
	--ksm-pc-border: rgba( 0, 0, 0, 0.12 );
	--ksm-pc-muted: rgba( 0, 0, 0, 0.6 );
	--ksm-pc-surface: rgba( 0, 0, 0, 0.025 );
	--ksm-pc-radius: 6px;

	/*
	 * CTA colours are their own variables so a site can restyle the button
	 * without touching this file. The background follows the theme's --accent
	 * where one exists, falling back to the plugin green.
	 */
	--ksm-pc-cta-bg: var( --accent, #1f6f43 );
	--ksm-pc-cta-text: #fff;

	margin: 2em 0;
}

.ksm-patio-cost__heading {
	margin: 0 0 0.5em;
}

.ksm-patio-cost__intro p:last-child {
	margin-bottom: 0.75em;
}

.ksm-patio-cost__basis {
	margin: 0 0 1.25em;
	padding: 0.6em 0.85em;
	border-left: 3px solid var( --ksm-pc-accent );
	background: var( --ksm-pc-surface );
	font-size: 0.95em;
}

/* ---------- Calculator ---------- */

.ksm-patio-cost__calc {
	margin: 0 0 1.25em;
	padding: 1em 1.1em;
	border: 1px solid var( --ksm-pc-border );
	border-radius: var( --ksm-pc-radius );
	background: var( --ksm-pc-surface );
}

.ksm-patio-cost__calc[hidden] {
	display: none;
}

.ksm-patio-cost__calc-label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.ksm-patio-cost__calc-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.ksm-patio-cost__calc input[type="number"] {
	max-width: 9em;
	padding: 0.5em 0.6em;
	border: 1px solid var( --ksm-pc-border );
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
}

.ksm-patio-cost__unit,
.ksm-patio-cost__times {
	font-weight: 700;
	color: var( --ksm-pc-muted );
}

.ksm-patio-cost__hint {
	margin: 0.6em 0 0;
	font-size: 0.875em;
	color: var( --ksm-pc-muted );
}

.ksm-patio-cost__helper {
	margin-top: 0.9em;
	font-size: 0.9em;
}

.ksm-patio-cost__helper summary {
	cursor: pointer;
	color: var( --ksm-pc-accent );
}

.ksm-patio-cost__helper .ksm-patio-cost__calc-row {
	margin-top: 0.6em;
}

/* ---------- Table ---------- */

/* Wide tables scroll inside their own container, never the page body. */
.ksm-patio-cost__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ksm-patio-cost__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ksm-patio-cost__caption {
	caption-side: top;
	text-align: left;
	padding-bottom: 0.6em;
	font-size: 0.875em;
	color: var( --ksm-pc-muted );
}

.ksm-patio-cost__table th,
.ksm-patio-cost__table td {
	padding: 0.7em 0.8em;
	border-bottom: 1px solid var( --ksm-pc-border );
	text-align: left;
	vertical-align: top;
}

.ksm-patio-cost__table thead th {
	border-bottom-width: 2px;
	font-size: 0.9em;
	white-space: nowrap;
}

.ksm-patio-cost__table tbody th {
	font-weight: 700;
}

.ksm-patio-cost__name {
	display: block;
}

.ksm-patio-cost__note {
	display: block;
	margin-top: 0.15em;
	font-size: 0.8em;
	font-weight: 400;
	color: var( --ksm-pc-muted );
}

.ksm-patio-cost__rate,
.ksm-patio-cost__eg,
.ksm-patio-cost__your {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ksm-patio-cost__your {
	font-weight: 700;
	color: var( --ksm-pc-accent );
}

/*
 * Once a real square metreage is entered the worked examples become noise, so
 * they collapse and the visitor's own column takes their place. Without
 * JavaScript this class is never applied and every example column stays.
 */
.ksm-patio-cost__table.is-personalised .ksm-patio-cost__eg {
	display: none;
}

/* ---------- Factors, CTA, disclaimer ---------- */

.ksm-patio-cost__factors {
	margin-top: 1.5em;
}

.ksm-patio-cost__factors-title {
	margin: 0 0 0.4em;
	font-size: 1.05em;
}

.ksm-patio-cost__factors ul {
	margin: 0;
	padding-left: 1.2em;
}

.ksm-patio-cost__factors li {
	margin-bottom: 0.25em;
}

.ksm-patio-cost__cta {
	margin: 1.5em 0 0;
}

/*
 * Themes routinely style links with a descendant selector such as
 * `.text-box-links a` (0,1,1), which outranks a bare `.ksm-patio-cost__cta-link`
 * (0,1,0) and repaints the button text in the theme's link colour. Scoping to
 * the block takes these to (0,2,0), which wins on specificity alone — no
 * !important, so a site can still override deliberately.
 */
.ksm-patio-cost .ksm-patio-cost__cta-link {
	display: inline-block;
	padding: 0.7em 1.4em;
	border-radius: var( --ksm-pc-radius );
	background: var( --ksm-pc-cta-bg );
	color: var( --ksm-pc-cta-text );
	font-weight: 700;
	text-decoration: none;
}

.ksm-patio-cost .ksm-patio-cost__cta-link:hover,
.ksm-patio-cost .ksm-patio-cost__cta-link:focus {
	opacity: 0.9;
	background: var( --ksm-pc-cta-bg );
	color: var( --ksm-pc-cta-text );
}

.ksm-patio-cost__disclaimer {
	margin: 1.2em 0 0;
	font-size: 0.85em;
	color: var( --ksm-pc-muted );
}

@media ( max-width: 600px ) {
	.ksm-patio-cost__table th,
	.ksm-patio-cost__table td {
		padding: 0.55em 0.5em;
		font-size: 0.9em;
	}
}