/* ==========================================================================
   Adult OT — Foundation / reset
   Deliberately conservative: normalises the box model and dark surface,
   without removing behaviour that accessibility depends on (focus rings are
   replaced, never deleted).
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--aot-border) var(--aot-bg);
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--aot-font-ui);
	font-size: var(--aot-body);
	line-height: var(--aot-line);
	color: var(--aot-text);
	background-color: var(--aot-bg);

	/* Approved environmental art. It sits at the top and dissolves into
	   Obsidian, so long pages continue cleanly with no tiling. */
	background-image: url("../backgrounds/site-background.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	background-attachment: scroll;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The artwork is wide; on narrow screens cover reads better than 100% width. */
@media (max-width: 860px) {
	body {
		background-size: 240% auto;
	}
}

/* Environmental veil.
   VIS-0.5 section 9: the background must never compete with reading, and on
   content pages Obsidian should dominate after the first viewport. A fixed
   overlay keeps the art present as atmosphere while guaranteeing contrast for
   whatever sits on top of it. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(14, 16, 18, .55) 0%,
		rgba(14, 16, 18, .78) 45%,
		var(--aot-bg) 100%);
}

/* The homepage hero carries its own veil and anchors the composition, so the
   page-level overlay is lighter there and the artwork can breathe. */
.aot-body--home::before {
	background: linear-gradient(180deg,
		rgba(14, 16, 18, .30) 0%,
		rgba(14, 16, 18, .62) 40%,
		var(--aot-bg) 88%);
}

/* ---------------------------------------------------------------- headings */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--aot-font-display);
	font-weight: 600;
	color: var(--aot-text);
	line-height: 1.2;
	margin: 0 0 var(--aot-space-4);
	letter-spacing: .01em;
}

h1 { font-size: var(--aot-h1); }
h2 { font-size: var(--aot-h2); }
h3 { font-size: var(--aot-h3); }
h4 { font-size: var(--aot-h4); }
h5, h6 { font-size: 15px; }

p { margin: 0 0 var(--aot-space-4); }

small { font-size: var(--aot-small); }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--aot-border) 18%,
		var(--aot-border-accent) 50%,
		var(--aot-border) 82%,
		transparent);
	margin: var(--aot-space-5) 0;
}

/* ------------------------------------------------------------------- links */

a {
	color: var(--aot-bronze);
	text-decoration: none;
	transition: color .15s ease;
}

a:hover {
	color: var(--aot-bronze-hi);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Focus is never removed — only restyled. */
:focus-visible {
	outline: 2px solid var(--aot-bronze);
	outline-offset: 2px;
	border-radius: var(--aot-radius-xs);
}

::selection {
	background: var(--aot-bronze-muted);
	color: var(--aot-text);
}

/* ------------------------------------------------------------------ media */

img, svg, video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ forms */

input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* --------------------------------------------------------------- utilities
   `white` and `red` are legacy MyAAC classes used across core templates.
   They are remapped rather than left as literal white/red. */

.white { color: var(--aot-text) !important; }
.red   { color: var(--aot-danger-text) !important; }
.green { color: var(--aot-success-text) !important; }

/* MyAAC writes literal `style="color: green|red"` inline on some pages
   (highscores online status, character status). Those literal CSS keywords are
   unreadable on Obsidian, so they are remapped to the text-safe variants. */
[style*="color: green"],
[style*="color:green"] { color: var(--aot-success-text) !important; }

[style*="color: red"],
[style*="color:red"] { color: var(--aot-danger-text) !important; }

.aot-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.aot-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: var(--aot-surface-raised);
	color: var(--aot-text);
	border: 1px solid var(--aot-bronze);
	border-radius: var(--aot-radius-sm);
}

.aot-skip-link:focus {
	left: var(--aot-gutter);
	top: var(--aot-gutter);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}