/* Base styles carried over from the design's <helmet> block. */

html, body { margin: 0; padding: 0; background: #000000; }
body { font-family: Barlow, sans-serif; color: #FFFFFF; }

* { box-sizing: border-box; }

/* The design's home page is the one screen that was laid out without the
   border-box reset, so bordered boxes there are two pixels taller than the
   same markup elsewhere. Matching that keeps the port pixel-exact.

   It only applies from 1025px up. Narrower than that the home page runs on the
   responsive overrides rather than the 1440px canvas, and content-box turned
   every explicit width into width-plus-padding: the FAQ accordion buttons came
   out 346px wide inside a 296px column with overflow:hidden, so the question
   text and the chevron were cut off on every phone. */
@media (min-width: 1025px) {
	.home .gta6-main,
	.home .gta6-main *:not(.gta6-top):not(.gta6-top *) {
		box-sizing: content-box;
	}

	/* One exception: a full width control that carries its own padding. Under
	   content-box the FAQ accordion button came out 1130px inside a 1080px card,
	   so the round chevron was sliced in half against the card edge. The :not()
	   pairs are there to out-weigh the rule above, which carries them too and
	   would otherwise win on specificity. */
	.home .gta6-main [data-accordion-trigger]:not(.gta6-top):not(.gta6-top *),
	.home .gta6-main [data-accordion-trigger] *:not(.gta6-top):not(.gta6-top *) {
		box-sizing: border-box;
	}
}
a { color: #FFFFFF; text-decoration: none; }
a:hover { color: #FF6FA5; }
img { max-width: 100%; }

/* <picture> is inline by default; the design had a bare <img>, so it has to
   behave the same or the image loses a couple of pixels to the line box.
   The background wrapper must also pass its full height through, otherwise the
   photo stops at its own aspect ratio and the page shows black below it. */
picture {
	display: block;
}

.gta6-bg picture {
	width: 100%;
	height: 100%;
}

.gta6-page {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background: #000000;
	font-family: Barlow, sans-serif;
}

/* Screen-reader helper (WP accessibility requirement). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* The skip link is the one hidden element that has to appear when it is
   focused, otherwise a keyboard user tabs onto something they cannot see. */
.gta6-skip:focus,
.gta6-skip:focus-visible {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	padding: 12px 20px;
	border-radius: 8px;
	background: #FF3E8A;
	color: #180712;
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Keyboard focus must stay visible even though the design has no focus styles. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #FF3E8A;
	outline-offset: 2px;
}

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