/*
 * Maksut Tools shared UI finish.
 * Loaded last on the hub, free tools and paid tool landings.
 * Keep specialist layouts in their own stylesheets.
 */

.aeo-page,
.maksut-ai-tools-lp {
	--tool-ui-border: rgba(24, 20, 16, 0.13);
	--tool-ui-border-strong: rgba(24, 20, 16, 0.22);
	--tool-ui-shadow: 0 18px 55px rgba(24, 20, 16, 0.09), 0 2px 8px rgba(24, 20, 16, 0.05);
	--tool-ui-focus: 0 0 0 4px rgba(232, 78, 10, 0.2);
}

/* A visible first action on every free-tool hero. */
.aeo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 24px;
}

.aeo-hero__actions .aeo-btn {
	min-height: 48px;
	justify-content: center;
	border-radius: 8px;
}

.aeo-hero__actions .aeo-btn--primary {
	box-shadow: 0 10px 26px rgba(232, 78, 10, 0.24);
}

.aeo-hero__actions .aeo-btn--primary:hover {
	box-shadow: 0 14px 32px rgba(232, 78, 10, 0.34);
}

.aeo-hero__secondary-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 2px;
	color: rgba(245, 240, 232, 0.82);
	font-family: var(--mono, var(--ff-m, ui-monospace, monospace));
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.055em;
	text-decoration: underline;
	text-decoration-color: rgba(232, 78, 10, 0.7);
	text-underline-offset: 5px;
}

.aeo-hero__secondary-link:hover {
	color: #fff;
	text-decoration-color: var(--fire, var(--orange, #e84e0a));
}

/* One consistent interaction language across all specialist tools. */
.aeo-page :where(a, button, input, textarea, select, summary):focus-visible,
.maksut-ai-tools-lp :where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--fire, var(--orange, #e84e0a));
	outline-offset: 3px;
	box-shadow: var(--tool-ui-focus);
}

.aeo-page .aeo-input-panel {
	border-color: var(--tool-ui-border);
	border-radius: 18px;
	box-shadow: var(--tool-ui-shadow);
}

.aeo-page :where(.aeo-input, .aeo-textarea, .cwc-textarea, select) {
	min-height: 48px;
	border-radius: 9px;
}

.aeo-page :where(.aeo-btn, .cwc-button) {
	min-height: 44px;
}

.aeo-page :where(.aeo-card, .aeo-guide-toc, .aeo-definition-box, .aeo-faq__accordion) {
	border-color: var(--tool-ui-border);
}

.aeo-page :where(.aeo-guide-section, .aeo-process, .aeo-faq, .aeo-input-panel),
.maksut-ai-tools-lp section[id] {
	scroll-margin-top: calc(var(--nav-h, 64px) + 24px);
}

.aeo-page .aeo-compare-table-wrap {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.maksut-ai-tools-lp .maksut-ai-tools-tool-card {
	border-color: var(--tool-ui-border);
}

.maksut-ai-tools-lp :where(.maksut-ai-tools-btn-primary, .maksut-ai-tools-btn-ghost) {
	min-height: 48px;
	justify-content: center;
}

@media (max-width: 700px) {
	.aeo-hero__actions {
		align-items: stretch;
		gap: 10px;
		margin-top: 20px;
	}

	.aeo-hero__actions .aeo-btn--primary {
		width: 100%;
	}

	.aeo-hero__secondary-link {
		justify-content: center;
		width: 100%;
	}

	.aeo-page .aeo-container {
		padding-top: 36px;
	}

	.aeo-page .aeo-input-panel {
		padding: 22px 18px;
		border-radius: 15px;
	}

	.aeo-page .aeo-actions > .aeo-btn--primary,
	.aeo-page .cwc-actions .cwc-button--primary {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aeo-page *,
	.maksut-ai-tools-lp * {
		scroll-behavior: auto !important;
	}
}