/* Shared public-site interaction primitives.
 * Values come from tokens.css; page typography, copy and section order remain
 * with their existing owners. Never enqueue on webinar or commerce routes.
 */

/* Icon controls and filters use the same minimum hit area. */
body.theme-inrise :is(.hdr__hamburger, .hdr__mobile-close),
#inrise-main :is(.review-video-carousel__nav, .chip, .column-filter__chip),
#inrise-main :is(.nav-links, .pagination) .page-numbers {
	min-inline-size: var(--touch-target-min);
	min-block-size: var(--touch-target-min);
}

#inrise-main :is(.chip, .column-filter__chip) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
	transition: color var(--motion-hover-duration) var(--ease-out),
		background-color var(--motion-hover-duration) var(--ease-out),
		border-color var(--motion-hover-duration) var(--ease-out);
}

#inrise-main :is(.nav-links, .pagination) {
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Functional two-color focus indicator remains visible on both surfaces.
 * The outer white ring is a focus affordance, not a decorative shadow.
 * Forced-colors retains the native outline; existing narrower focus rules win.
 */
body.theme-inrise :is(a, button, summary, input, select, textarea):focus-visible {
	outline: calc(var(--timeline-line-width) * 2) solid var(--navy);
	outline-offset: var(--space-1);
	box-shadow: 0 0 0 var(--space-1) var(--text-on-dark);
}

body.theme-inrise :is(a, button, summary, input, select, textarea) {
	scroll-margin-block: calc(var(--space-10) + var(--space-9));
}

#inrise-main :is(.chip, .btn, .column-filter__chip):disabled {
	color: var(--ink-4);
	background: var(--bg-alt);
	border-color: var(--line);
	cursor: not-allowed;
}

/* Long labels keep Korean word boundaries, with an emergency wrap for URLs. */
#inrise-main :is(.btn, .faq__text, .faq__answer) {
	min-inline-size: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* A portrait caption sits on dark media, not the surrounding white page. */
#inrise-main .noah-hero__cap-label {
	color: var(--text-on-dark);
}

/* Recovery screens use the same heading measure and button family. */
.inrise-main--404 .inrise-404 {
	padding-block: var(--space-10);
	text-align: center;
}

.inrise-main--404 .display span {
	display: block;
	margin-block-start: var(--space-6);
	font-size: var(--heading-title-size);
	line-height: normal;
	letter-spacing: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.inrise-main--404 .inrise-404__cta .btn {
	min-block-size: var(--touch-target-min);
}

/* A search field may shrink next to its submit control on narrow screens. */
#inrise-main .search-form,
#inrise-main .search-form input {
	min-inline-size: 0;
	max-inline-size: 100%;
}

#inrise-main .search-form button {
	flex-shrink: 0;
	min-block-size: var(--touch-target-min);
}

/* Keep the existing mobile breakpoint; align answer and question start lines.
 * The home FAQ has its own editorial layout and is deliberately excluded.
 */
@media (max-width: 768px) {
	#inrise-main:not(.inrise-main--home-front) .faq__row summary {
		gap: var(--space-3);
		align-items: flex-start;
	}

	#inrise-main:not(.inrise-main--home-front) .faq__num {
		width: var(--space-6);
		margin-inline-end: 0;
	}

	#inrise-main:not(.inrise-main--home-front) .faq__answer {
		padding-inline-start: calc(var(--space-6) + var(--space-3));
	}
}

@media (prefers-reduced-motion: reduce) {
	html,
	#inrise-main :is(.review-priority-video-grid, .tabs-nav) {
		scroll-behavior: auto;
	}

	body.theme-inrise :is(.hdr, .hdr__mobile, .hdr__backdrop, .top-bar__arrow, .top-bar__dot),
	#inrise-main :is(.btn, .chip, .column-filter__chip, .faq__mark, .review-video-carousel__nav) {
		animation: none;
		transition: none;
	}
}