/**
 * SEO tool UI. Loaded only on tool pages that use an interactive engine.
 *
 * @package Astra_Child
 */

.stc-tool {
	margin-bottom: 2.5em;
	padding: 1.5em;
	background: var(--ast-global-color-5);
	border: 1px solid var(--ast-border-color);
	border-radius: 8px;
}

.stc-tool__stack {
	display: grid;
	gap: 1.25em;
}

.stc-tool__grid {
	display: grid;
	gap: 1.5em;
}

@media (min-width: 922px) {
	.stc-tool__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.stc-field {
	display: grid;
	gap: 0.35em;
	margin: 0;
	min-width: 0;
}

.stc-label {
	margin: 0;
	font-weight: 600;
	color: var(--ast-global-color-2);
}

.stc-label--sub {
	display: grid;
	gap: 0.35em;
	font-weight: 500;
}

.stc-input {
	width: 100%;
	max-width: 100%;
	background: var(--ast-global-color-4);
}

.stc-input--small {
	width: auto;
	min-width: 6em;
}

.stc-input--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
}

.stc-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	align-items: center;
}

.stc-check,
.stc-inline {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
}

.stc-copy-row {
	display: flex;
	gap: 0.5em;
}

.stc-copy-row .stc-input {
	flex: 1 1 auto;
	min-width: 0;
}

.stc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.5em;
}

.stc-button {
	cursor: pointer;
	white-space: nowrap;
}

.stc-button--secondary {
	background: transparent;
	color: var(--ast-global-color-0);
	border: 1px solid currentColor;
}

.stc-button--secondary:hover,
.stc-button--secondary:focus {
	background: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

.stc-hint,
.stc-counter {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ast-global-color-3);
}

.stc-counter .stc-status {
	font-weight: 600;
}

.stc-counter[data-state="good"] .stc-status {
	color: #127a3c;
}

.stc-counter[data-state="short"] .stc-status,
.stc-counter[data-state="long"] .stc-status {
	color: #a4480b;
}

/* Search result preview. */
.stc-serp {
	display: grid;
	gap: 0.25em;
	padding: 1.25em;
	background: #fff;
	border: 1px solid var(--ast-border-color);
	border-radius: 8px;
	font-family: Arial, sans-serif;
	overflow-wrap: anywhere;
}

.stc-serp__url {
	font-size: 14px;
	color: #202124;
}

.stc-serp__title {
	font-size: 20px;
	line-height: 1.3;
	color: #1a0dab;
}

.stc-serp__desc {
	font-size: 14px;
	line-height: 1.58;
	color: #4d5156;
}

/* Word counter stats. */
.stc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
	gap: 0.75em;
	margin: 0;
}

.stc-stat {
	padding: 0.75em 1em;
	background: var(--ast-global-color-4);
	border: 1px solid var(--ast-border-color);
	border-radius: 6px;
}

.stc-stat dt {
	font-size: 0.8rem;
	color: var(--ast-global-color-3);
}

.stc-stat dd {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ast-global-color-2);
}

.stc-table-wrap {
	overflow-x: auto;
}

.stc-table {
	width: 100%;
	margin: 0;
	background: var(--ast-global-color-4);
}

.stc-table caption {
	padding-bottom: 0.5em;
	text-align: left;
	font-weight: 600;
}

/* Keyword combiner columns. */
.stc-columns {
	display: grid;
	gap: 1em;
}

@media (min-width: 768px) {
	.stc-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* FAQ generator. */
.stc-faq {
	display: grid;
	gap: 1em;
}

.stc-faq__item {
	display: grid;
	gap: 0.75em;
	margin: 0;
	padding: 1em;
	background: var(--ast-global-color-4);
	border: 1px solid var(--ast-border-color);
	border-radius: 6px;
}

.stc-faq__item legend {
	padding: 0 0.25em;
}

.stc-faq__item .stc-button {
	justify-self: start;
}

@media (max-width: 544px) {
	.stc-tool {
		padding: 1em;
	}

	.stc-copy-row {
		flex-direction: column;
	}
}