/**
 * LD Survey Options CTA
 *
 * Deliberately low-specificity so a theme's own button styles win when one is
 * passed in via the shortcode's class attribute. The plugin's own look is
 * scoped to .ldsc-btn--default, which is only added when no theme class was
 * supplied.
 */

/* -------------------------------------------------------------------------
 * The "Select Your Survey" heading above Level 1
 * ---------------------------------------------------------------------- */

.ldsc-heading {
	/* Native fallback for anchor jumps that bypass the script (e.g. a visitor
	   arriving on the hash with JS still parsing). The script measures the real
	   header height; this is just a sane floor. */
	scroll-margin-top: 120px;

	margin: 0 0 24px;
	text-align: center;
	line-height: 1.2;
}

.ldsc-heading:focus {
	/* It receives programmatic focus after the scroll purely so screen readers
	   announce it — that should not paint a focus ring. */
	outline: none;
}

@media (max-width: 767px) {
	.ldsc-heading {
		scroll-margin-top: 90px;
		margin-bottom: 18px;
	}
}

/* -------------------------------------------------------------------------
 * Button
 * ---------------------------------------------------------------------- */

.ldsc-btn {
	cursor: pointer;
}

.ldsc-btn--default {
	display: inline-block;
	padding: 16px 34px;
	border: 0;
	border-radius: 6px;
	background: #dd3333;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ldsc-btn--default:hover,
.ldsc-btn--default:focus {
	background: #b82727;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.ldsc-btn--default:active {
	transform: translateY(0);
}

/* Comfortable tap target on phones. */
@media (max-width: 767px) {
	.ldsc-btn--default {
		padding: 15px 26px;
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Large variant
 *
 * For heroes where this is the only call to action and the default size does
 * not carry the section on its own.
 *
 * Scales size only — padding and type — and deliberately leaves border-radius,
 * colour, font-weight and everything else to the theme, so the button still
 * reads as one of that site's own. An earlier version set its own radius and
 * weight, which made it look foreign next to the neighbouring buttons.
 *
 * Selectors are doubled up because the button also carries the theme's
 * .dmp-btn classes, which set padding and font-size and would otherwise win.
 * ---------------------------------------------------------------------- */

a.ldsc-btn.ldsc-btn--lg,
.ldsc-btn.ldsc-btn--lg {
	padding: 18px 44px;
	font-size: 20px;
}

@media (max-width: 1024px) {
	a.ldsc-btn.ldsc-btn--lg,
	.ldsc-btn.ldsc-btn--lg {
		padding: 16px 38px;
		font-size: 19px;
	}
}

@media (max-width: 767px) {
	a.ldsc-btn.ldsc-btn--lg,
	.ldsc-btn.ldsc-btn--lg {
		padding: 15px 32px;
		font-size: 17px;
	}
}

/* -------------------------------------------------------------------------
 * Sitting beside an existing hero CTA
 *
 * Used on the Divi site, where the hero's "Check Availability" button is a tall
 * image link inside the slide. Centring on the middle of that image keeps the
 * pair looking deliberate rather than bottom-aligned by accident.
 * ---------------------------------------------------------------------- */

.ldsc-btn--hero {
	vertical-align: middle;
	margin-left: 18px;
}

/* Below the image rather than squeezed beside it once space runs out. */
@media (max-width: 980px) {
	.ldsc-btn--hero {
		display: inline-block;
		margin-left: 0;
		margin-top: 14px;
	}
}

/* -------------------------------------------------------------------------
 * Optional wrapper — used for the standalone mid-page button
 * ---------------------------------------------------------------------- */

.ldsc-wrap {
	display: block;
}

.ldsc-wrap--left {
	text-align: left;
}

.ldsc-wrap--center {
	text-align: center;
}

.ldsc-wrap--right {
	text-align: right;
}

.ldsc-wrap--band {
	padding: 36px 20px;
}

@media (max-width: 767px) {
	.ldsc-wrap--band {
		padding: 26px 16px;
	}

	/* A full-width button reads better than a stranded pill on a phone. */
	.ldsc-wrap--band .ldsc-btn {
		display: block;
		width: 100%;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}