/**
 * IROTA structural CSS. Logical properties only. Colours from tokens.css.
 * No physical inline directions. No brand hex here.
 *
 * Layout for header/footer/hero lives in shell.css (loaded later) so this
 * file only keeps document defaults and skip-link behaviour.
 */

html {
	direction: rtl;
	/* Keep in-page anchors and focused elements from landing under the
	 * sticky header. See ui-ux-implementation P1-19. */
	scroll-padding-block-start: 5rem;
}

[id] {
	scroll-margin-block-start: 5rem;
}

html,
body.irota-body {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 100%;
	overflow-x: hidden;
	background: var(--irota-color-canvas);
	color: var(--irota-color-text);
}

.irota-skip-link {
	position: absolute;
	inset-inline-start: var(--irota-space-4);
	inset-block-start: var(--irota-space-2);
	transform: translateY(-200%);
	z-index: 50;
	padding: var(--irota-space-2) var(--irota-space-3);
	background: var(--irota-color-green);
	color: var(--irota-color-surface);
	min-block-size: var(--irota-touch);
	display: inline-flex;
	align-items: center;
}

.irota-skip-link:focus {
	transform: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--irota-focus-ring);
	outline-offset: 2px;
	box-shadow: var(--irota-focus-ring-shadow);
	border-radius: var(--irota-radius-sm);
}

/* Windows High Contrast replaces brand tokens. Keep the keyboard indicator
 * as a real two-pixel outline instead of relying on a translucent shadow. */
@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	summary:focus-visible,
	[tabindex]:focus-visible {
		outline: 2px solid Highlight !important;
		outline-offset: 2px !important;
		box-shadow: none !important;
	}
}

.irota-nav__toggle,
.irota-icon-btn,
.irota-header__account,
.irota-search button {
	min-inline-size: 44px;
	min-block-size: 44px;
}