/*
 * Page styles: support. Owned by the docs page agent.
 * "Formsieve Support.dc.html" (8) and "Formsieve Mobile Pages.dc.html" 13f.
 * The docs header, footer and search box come from docs.css (page-support.php
 * loads it before this file). Scoped to body.fs-page-support.
 */

/* Title. */
body.fs-page-support .row .col .fs-support__title,
body.fs-page-support .fs-support__title {
	font-family: var(--fs-font-display);
	font-size: 52px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.03em;
}

/* "E-mail us at": violet card. */
body.fs-page-support .wpb_text_column.fs-support-mail {
	box-sizing: border-box;
	padding: 36px;
	border-radius: var(--fs-radius-card);
	background: var(--fs-violet);
	color: var(--fs-white);
}

body.fs-page-support .wpb_text_column.fs-support-mail > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.fs-page-support .fs-support-mail p {
	margin: 0;
	padding: 0;
}

body.fs-page-support .row .col p.fs-support-mail__label {
	font-size: 16px;
	line-height: normal;
}

body.fs-page-support .row .col p.fs-support-mail__address {
	font-family: var(--fs-font-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -.02em;
}

body.fs-page-support .fs-support-mail__address a,
body.fs-page-support .fs-support-mail__address a:hover {
	color: var(--fs-white);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 3px;
	overflow-wrap: break-word;
}

body.fs-page-support .fs-support-mail__address a:focus-visible {
	outline-color: var(--fs-white);
}

body.fs-page-support .row .col p.fs-support-mail__note {
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
}

/* Two lavender cards (desktop and tablet). */
body.fs-page-support .wpb_text_column.fs-support-buyers > .wpb_wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

body.fs-page-support .wpb_text_column.fs-support-buyers > .wpb_wrapper > .fs-support-buyer {
	margin: 0;
	padding: 24px;
}

body.fs-page-support .fs-support-buyer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: var(--fs-radius-swatch);
	background: var(--fs-lavender);
	color: var(--fs-navy);
}

body.fs-page-support .row .col p.fs-support-buyer__title {
	font-family: var(--fs-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
}

body.fs-page-support .row .col p.fs-support-buyer__text {
	font-size: 16px;
	line-height: 1.55;
}

/* One lavender note (phones). */
body.fs-page-support .wpb_text_column.fs-support-buyers-note {
	padding: 16px 18px;
	border-radius: var(--fs-radius-box);
	background: var(--fs-lavender);
	color: var(--fs-navy);
}

body.fs-page-support .row .col .fs-support-buyers-note p {
	font-size: 15px;
	line-height: 1.5;
}

/* "Many answers are already in Troubleshooting" + three outline pills. */
body.fs-page-support .wpb_text_column.fs-support-answers {
	padding-top: 12px;
}

body.fs-page-support .wpb_text_column.fs-support-answers > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.fs-page-support .row .col .fs-support-answers__title {
	font-family: var(--fs-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

body.fs-page-support .row .col p.fs-support-answers__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* "Before you write": white card, 2 px border, 6 px shadow, 92 px lower. */
body.fs-page-support .wpb_row.fs-support.fs-grid > .row_col_wrap_12 > .wpb_column.fs-support-before {
	margin-top: 92px !important;
}

body.fs-page-support .wpb_column.fs-support-before {
	padding: 32px;
}

body.fs-page-support .row .col .fs-support-before__title {
	font-family: var(--fs-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

body.fs-page-support .row .col p.fs-support-before__intro {
	font-size: 15px;
	line-height: 1.5;
}

/* The design's boxes are 20 px inside a 2 px border (24 px outside; 22 on phones). */
body.fs-page-support .fs-checklist .fs-checklist__box {
	box-sizing: content-box;
}

body.fs-page-support .fs-support-example .fs-mono {
	font-size: 14px;
}

/* Narrow desktop: keep the address on one line in the 7-column card. */
@media (min-width: 1000px) and (max-width: 1299px) {
	body.fs-page-support .row .col p.fs-support-mail__address {
		font-size: 30px;
	}
}

@media (min-width: 1000px) and (max-width: 1199px) {
	body.fs-page-support .row .col p.fs-support-mail__address {
		font-size: 24px;
	}
}

/* Tablet: the columns stack. */
@media (max-width: 999px) {
	body.fs-page-support .wpb_row.fs-support.fs-grid > .row_col_wrap_12 > .wpb_column.fs-support-before {
		margin-top: 12px !important;
	}
}

/* Phones (13f). */
@media (max-width: 690px) {
	body.fs-page-support .row .col .fs-support__title,
	body.fs-page-support .fs-support__title {
		font-size: 34px;
	}

	body.fs-page-support .wpb_text_column.fs-support-mail {
		padding: 24px 20px;
		border-radius: 22px;
	}

	body.fs-page-support .wpb_text_column.fs-support-mail > .wpb_wrapper {
		gap: 8px;
	}

	body.fs-page-support .row .col p.fs-support-mail__label {
		font-size: 15px;
	}

	body.fs-page-support .row .col p.fs-support-mail__address {
		font-size: 19px;
		letter-spacing: 0;
	}

	/* 13f: the link itself is the 44 px target, as wide as the card. */
	body.fs-page-support .fs-support-mail__address a,
	body.fs-page-support .fs-support-mail__address a:hover {
		display: flex;
		align-items: center;
		min-height: var(--fs-target);
		text-underline-offset: 5px;
		text-decoration-thickness: from-font;
	}

	body.fs-page-support .row .col p.fs-support-mail__note {
		font-size: 16px;
	}

	body.fs-page-support .wpb_row.fs-support.fs-grid > .row_col_wrap_12 > .wpb_column.fs-support-before {
		margin-top: 0 !important;
	}

	body.fs-page-support .wpb_column.fs-support-before {
		padding: 22px 20px;
		border-radius: 22px;
		box-shadow: var(--fs-shadow-small);
	}

	body.fs-page-support .row .col .fs-support-before__title {
		font-size: 18px;
	}

	body.fs-page-support .fs-support-example {
		display: none;
	}

	body.fs-page-support .wpb_column.fs-support-more .fs-btn {
		width: auto;
	}
}