/*
 * Structure only.
 *
 * Every colour, size and space here reads a theme token, so changing the palette
 * or the type scale in Global Styles changes this page too, and the block supports
 * in the editor can override any of it per block. Nothing is hard coded.
 */

.tmc-ask {
	--tmc-ask-rule: var( --wp--preset--color--rule, #E0E0E0 );
	--tmc-ask-muted: var( --wp--preset--color--muted, #767676 );
	--tmc-ask-subtle: var( --wp--preset--color--subtle, #F5F5F5 );
	--tmc-ask-ink: var( --wp--preset--color--ink, #000000 );
	--tmc-ask-gap: var( --wp--preset--spacing--40, 1.25rem );
	--tmc-ask-gap-lg: var( --wp--preset--spacing--50, 2rem );
}

/* ---------- Forms ---------- */

.tmc-ask-form-wrap {
	border: 1px solid var( --tmc-ask-rule );
	padding: var( --tmc-ask-gap );
	margin-bottom: var( --tmc-ask-gap-lg );
}

.tmc-ask-form-title {
	margin: 0 0 var( --tmc-ask-gap );
}

.tmc-ask-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 var( --tmc-ask-gap );
}

.tmc-ask-field label {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: 600;
}

.tmc-ask-field input[type="text"],
.tmc-ask-field input[type="email"],
.tmc-ask-field input[type="search"],
.tmc-ask-field select,
.tmc-ask-field textarea {
	/*
	 * The theme is content-box by default and only styles input elements to
	 * border-box, so a full width select or textarea would otherwise be wider
	 * than its column by the padding and border, and push the page sideways on
	 * a phone.
	 */
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --tmc-ask-rule );
	background: var( --wp--preset--color--base, #FFFFFF );
	color: inherit;
	font: inherit;
	border-radius: 0;
}

.tmc-ask-field textarea {
	resize: vertical;
	min-height: 5rem;
}

.tmc-ask-field input[readonly] {
	background: var( --tmc-ask-subtle );
	color: var( --tmc-ask-muted );
}

.tmc-ask-hint,
.tmc-ask-error {
	font-size: var( --wp--preset--font-size--fine, 0.8rem );
}

.tmc-ask-hint {
	color: var( --tmc-ask-muted );
}

.tmc-ask-error {
	font-weight: 600;
}

.tmc-ask-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --tmc-ask-gap );
}

.tmc-ask-submit {
	margin: 0;
}

.tmc-ask-button {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border: 1px solid var( --tmc-ask-ink );
	background: var( --tmc-ask-ink );
	color: var( --wp--preset--color--base, #FFFFFF );
	font: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}

.tmc-ask-button:hover,
.tmc-ask-button:focus {
	background: var( --wp--preset--color--base, #FFFFFF );
	color: var( --tmc-ask-ink );
}

/* The honeypot. Hidden from people without being hidden from a bot. */
.tmc-ask-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Notices ---------- */

.tmc-ask-notice {
	padding: 0.75rem 1rem;
	margin: 0 0 var( --tmc-ask-gap );
	border-left: 3px solid var( --tmc-ask-ink );
	background: var( --tmc-ask-subtle );
	font-size: var( --wp--preset--font-size--small, 0.9rem );
}

/* ---------- Sort controls ---------- */

.tmc-ask-controls {
	margin: 0 0 var( --tmc-ask-gap-lg );
}

.tmc-ask-sorts {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tmc-ask-gap );
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var( --tmc-ask-rule );
}

.tmc-ask-sort {
	text-decoration: none;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	color: var( --tmc-ask-muted );
}

.tmc-ask-sort.is-current {
	color: inherit;
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 currentColor;
}

.tmc-ask-filter,
.tmc-ask-back {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	margin: var( --tmc-ask-gap ) 0 0;
}

/* ---------- Threads ---------- */

.tmc-ask-thread {
	padding: var( --tmc-ask-gap-lg ) 0;
	border-bottom: 1px solid var( --tmc-ask-rule );
}

.tmc-ask-thread.is-pinned {
	background: var( --tmc-ask-subtle );
	padding-left: var( --tmc-ask-gap );
	padding-right: var( --tmc-ask-gap );
}

.tmc-ask-thread-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.tmc-ask-tag {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid var( --tmc-ask-rule );
	font-size: var( --wp--preset--font-size--fine, 0.8rem );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --tmc-ask-muted );
}

.tmc-ask-tag-open,
.tmc-ask-tag-pinned {
	border-color: var( --tmc-ask-ink );
	color: var( --tmc-ask-ink );
}

.tmc-ask-tag-official {
	border-color: var( --tmc-ask-ink );
	color: var( --tmc-ask-ink );
	text-transform: none;
	letter-spacing: 0;
}

.tmc-ask-question-title {
	margin: 0 0 0.5rem;
}

.tmc-ask-question-title a {
	text-decoration: none;
	color: inherit;
}

.tmc-ask-question-title a:hover {
	text-decoration: underline;
}

.tmc-ask-question-body p:last-child,
.tmc-ask-reply-body p:last-child {
	margin-bottom: 0;
}

.tmc-ask-byline,
.tmc-ask-reply-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	color: var( --tmc-ask-muted );
}

.tmc-ask-who {
	font-weight: 600;
	color: var( --tmc-ask-ink );
}

.tmc-ask-figure {
	margin: var( --tmc-ask-gap ) 0;
}

.tmc-ask-image {
	max-width: min( 100%, 680px );
	height: auto;
	display: block;
}

/* ---------- Replies ---------- */

.tmc-ask-replies {
	margin: var( --tmc-ask-gap ) 0 0;
	padding-left: var( --tmc-ask-gap );
	border-left: 2px solid var( --tmc-ask-rule );
}

.tmc-ask-reply {
	padding: var( --tmc-ask-gap ) 0;
	border-top: 1px solid var( --tmc-ask-rule );
}

.tmc-ask-reply:first-child {
	border-top: 0;
	padding-top: 0;
}

.tmc-ask-reply.is-official {
	border-left: 2px solid var( --tmc-ask-ink );
	padding-left: var( --tmc-ask-gap );
	margin-left: calc( var( --tmc-ask-gap ) * -1 - 2px );
}

.tmc-ask-reply.is-hidden {
	display: none;
}

.tmc-ask-replies.is-shown .tmc-ask-reply.is-hidden {
	display: block;
}

.tmc-ask-reply-byline {
	margin: 0 0 0.4rem;
}

.tmc-ask-showall,
.tmc-ask-replylink {
	margin: var( --tmc-ask-gap ) 0 0;
}

.tmc-ask-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tmc-ask-reply-form,
.tmc-ask-editform {
	margin-top: var( --tmc-ask-gap );
	padding: var( --tmc-ask-gap );
	background: var( --tmc-ask-subtle );
}

.tmc-ask-closed-note {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	color: var( --tmc-ask-muted );
	margin: var( --tmc-ask-gap ) 0 0;
}

/* ---------- Moderation ---------- */

.tmc-ask-mod {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.tmc-ask-modform {
	display: inline;
	margin: 0;
}

.tmc-ask-modlink {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var( --wp--preset--font-size--fine, 0.8rem );
	color: var( --tmc-ask-muted );
	text-decoration: underline;
	cursor: pointer;
}

.tmc-ask-modlink:hover {
	color: var( --tmc-ask-ink );
}

/* ---------- Pagination ---------- */

.tmc-ask-pagination {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tmc-ask-gap );
	margin-top: var( --tmc-ask-gap-lg );
	font-size: var( --wp--preset--font-size--small, 0.9rem );
}

.tmc-ask-pagecount {
	color: var( --tmc-ask-muted );
}

/* ---------- Sidebar ---------- */

.tmc-ask-side-title {
	margin: 0 0 0.6rem;
}

.tmc-ask-block-search,
.tmc-ask-block-needs,
.tmc-ask-block-answered,
.tmc-ask-block-categories {
	margin-bottom: var( --tmc-ask-gap-lg );
}

.tmc-ask-searchform {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tmc-ask-searchform input[type="search"] {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --tmc-ask-rule );
	font: inherit;
	border-radius: 0;
}

.tmc-ask-side-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
}

.tmc-ask-side-list li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var( --tmc-ask-rule );
}

.tmc-ask-side-list li:last-child {
	border-bottom: 0;
}

.tmc-ask-side-list a {
	text-decoration: none;
	color: inherit;
}

.tmc-ask-side-list a:hover {
	text-decoration: underline;
}

.tmc-ask-catlist a {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

.tmc-ask-catlist a.is-current {
	font-weight: 600;
}

.tmc-ask-count {
	color: var( --tmc-ask-muted );
}

.tmc-ask-empty {
	padding: var( --tmc-ask-gap-lg ) 0;
	color: var( --tmc-ask-muted );
}

/* ---------- Phone ---------- */

@media ( max-width: 600px ) {
	.tmc-ask-row {
		grid-template-columns: 1fr;
	}

	.tmc-ask-replies {
		padding-left: 0.75rem;
	}

	.tmc-ask-reply.is-official {
		margin-left: -0.75rem;
		padding-left: 0.75rem;
	}
}

/* ---------- Home page band ---------- */

.tmc-ask-promo {
	background: var( --tmc-ask-ink );
	color: var( --wp--preset--color--base, #FFFFFF );
	padding: clamp( 3rem, 6vw, 4.5rem ) var( --tmc-ask-gap );
	text-align: center;
}

.tmc-ask-promo-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.tmc-ask-promo-kicker {
	font-size: var( --wp--preset--font-size--fine, 0.8rem );
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --tmc-ask-muted );
	margin: 0 0 1.4rem;
}

.tmc-ask-promo-heading {
	font-family: var( --wp--preset--font-family--display, "Archivo Black", "Arial Black", sans-serif );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 1.06;
	font-size: clamp( 1.9rem, 4.2vw, 2.9rem );
	/* Keeps the headline to balanced lines instead of orphaning a short word. */
	text-wrap: balance;
	max-width: 22ch;
	margin: 0 auto 1.5rem;
	color: inherit;
}

.tmc-ask-promo-text {
	font-size: var( --wp--preset--font-size--large, 1.1rem );
	max-width: 50ch;
	margin: 0 auto 2.1rem;
	color: #C9C9C9;
}

.tmc-ask-promo-button {
	display: inline-block;
	padding: 0.9rem 2.3rem;
	background: var( --wp--preset--color--base, #FFFFFF );
	color: var( --tmc-ask-ink );
	border: 1px solid var( --wp--preset--color--base, #FFFFFF );
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
}

.tmc-ask-promo-button:hover,
.tmc-ask-promo-button:focus {
	background: transparent;
	color: var( --wp--preset--color--base, #FFFFFF );
}