/* ==========================================================================
   ViceGamers sub-pages -- /gta/, /fortnite/, /battlefield/

   Sits on top of universal.css and reuses the main site's nav shell, footer,
   section dividers, spacing rhythm and button base. Everything here is scoped
   to .subpage so the main site is untouched. Each page's palette comes from
   the theme-* class on <body>.

   Type is in px, not rem, on purpose: Bootstrap 3 sets html{font-size:10px},
   so rem values here would render at roughly half their apparent size.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Palettes
   -------------------------------------------------------------------------- */

.subpage {
	--accent: #e991ac;
	--accent-2: #febe80;
	--accent-dark: #a3486a;
	--ink: #0a0a12;
	--panel: rgba(255, 255, 255, .05);
	--panel-border: rgba(255, 255, 255, .14);
	--display-font: Poppins, sans-serif;
	--hero-layers: linear-gradient(rgba(7, 9, 21, .4), rgba(7, 9, 21, .85));
	--theme-mid: rgba(233, 145, 172, .6);
	--theme-wash: rgba(233, 145, 172, .8);
	--theme-texture: none;
}

/* Classic pastel Vice City. These are approximate, community-documented
   values for the aesthetic -- Rockstar has never published a public style
   guide for GTA VI, so nudge to taste rather than treating them as official. */
.theme-gta {
	--accent: #ff6ec7;
	--accent-2: #00ced1;
	--accent-3: #b06cf5;
	--accent-dark: #a8137a;
	--display-font: Anton, Impact, sans-serif;
	--theme-mid: rgba(255, 110, 199, .62);
	--theme-wash: rgba(255, 110, 199, .82);
	/* Bright daytime Vice Beach shot. The radial pools darkness behind the hero
	   copy so the type stays legible without flattening the whole photo. */
	--hero-layers:
		radial-gradient(68% 52% at 50% 54%, rgba(8, 4, 20, .62) 0%, rgba(8, 4, 20, 0) 100%),
		linear-gradient(rgba(20, 6, 40, .42), rgba(8, 4, 20, .62)),
		url(../img/subpage/gta-hero.jpg);
}

/* Why Join Us runs pastel blue rather than pink -- the boat shot behind it is
   all turquoise, and blue + the pink accents is the Vice City pairing. */
.subpage.theme-gta .bg-theme {
	--theme-mid: rgba(126, 205, 235, .62);
	--theme-wash: rgba(0, 174, 199, .86);
	--theme-texture: url(../img/subpage/gta-img.jpg);
}

/* Green gradient, deliberately distinct from the main site's orange/pink. */
.theme-fortnite {
	--accent: #3ddc72;
	--accent-2: #b6f36a;
	--accent-3: #00c9a7;
	--accent-dark: #0b5f34;
	--display-font: "Russo One", Poppins, sans-serif;
	--theme-mid: rgba(61, 220, 114, .6);
	--theme-wash: rgba(15, 155, 108, .9);
	/* Same treatment as GTA: a soft pool behind the copy over a light overall
	   wash, so the neon artwork still reads. */
	--hero-layers:
		radial-gradient(62% 48% at 50% 54%, rgba(2, 20, 14, .6) 0%, rgba(2, 20, 14, 0) 100%),
		linear-gradient(rgba(3, 28, 19, .3) 0%, rgba(3, 28, 19, .4) 45%, rgba(2, 20, 14, .7) 100%),
		url(../img/subpage/fortnite-hero-halfres.jpg);
}

/* Each light section gets its own art under the shared white-to-green wash. */
.subpage.theme-fortnite #howWePlay {
	--theme-texture: url(../img/misc/fortnite-bg.jpg);
}

.subpage.theme-fortnite #faq {
	--theme-texture: url(../img/misc/fortnite-bg2.jpg);
}

/* Heavy orange, tying to the series' box art. */
.theme-battlefield {
	--accent: #ff7a18;
	--accent-2: #ffb347;
	--accent-3: #c8552a;
	--accent-dark: #8a3b06;
	--display-font: "Saira Condensed", Oswald, sans-serif;
	--theme-mid: rgba(255, 122, 24, .6);
	--theme-wash: rgba(255, 122, 24, .88);
	/* Bright sunlit shot, so it keeps the orange wash plus a pool of darkness
	   behind the hero copy, same as the other two pages. */
	--hero-layers:
		radial-gradient(66% 50% at 50% 54%, rgba(14, 9, 5, .58) 0%, rgba(14, 9, 5, 0) 100%),
		radial-gradient(110% 80% at 14% 8%, rgba(255, 146, 40, .28) 0%, rgba(255, 146, 40, 0) 62%),
		linear-gradient(rgba(30, 17, 8, .42) 0%, rgba(14, 9, 5, .66) 100%),
		url(../img/misc/bf-hero.jpg);
}

/* bf-bg.jpg is far busier than the other section art -- bright sky against
   dark hulls and smoke. At the shared wash strength the body copy dropped to
   ~3.3:1 over the dark areas, so this section carries a heavier orange (which
   lifts those darks) and a deeper kicker colour for the bright areas. */
.subpage.theme-battlefield #whyJoin {
	--theme-texture: url(../img/misc/bf-bg.jpg);
	--theme-mid: rgba(255, 138, 45, .9);
	--theme-wash: rgba(255, 122, 24, .96);
	--kicker-on-light: #2b1201;
}


/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

/* No min-height here on purpose. universal.css already sets .intro to
   height:100%, which resolves to auto against a body of height:auto -- so the
   hero is content-height, exactly like the main page. Forcing 100vh instead
   stretched the box well past the artwork's aspect ratio, and background-size:
   cover then had to upscale and hard-crop it to fill. */

.subpage .intro .intro-body {
	background-image: var(--hero-layers);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 140px 0 70px;
}

/* universal.css lays a fixed rgba(7,9,21,.5) scrim over .intro-body. Drop it
   here so --hero-layers is the single source of truth for hero contrast. */
.subpage .intro .intro-body:before {
	background: transparent;
}

/* Game-specific square marks in place of the VICE wordmark. */
.subpage .navbar-brand.brand-square .logo {
	max-height: 120px;
}

/* The Vice Fortnite mark carries a lot of internal padding, so it reads small
   at the shared size. Double it on desktop only -- below 1200px universal.css
   hides .logo and swaps in .logodark, and the collapsed-bar rule below still
   wins on specificity when the nav shrinks on scroll. */
@media (min-width: 1200px) {
	.subpage.theme-fortnite .navbar-brand.brand-square .logo {
		max-height: 240px;
	}

	/* Battlefield's crest is detailed enough that it needs the extra size to
	   stay legible: 120px + 70%. */
	.subpage.theme-battlefield .navbar-brand.brand-square .logo {
		max-height: 204px;
	}

	.subpage.theme-gta .navbar-brand.brand-square .logo {
		max-height: 240px;
	}

	/* Those two marks hang low enough to run into the centred H1 now that the
	   hero is content-height. Start the copy below them, and take the extra
	   height back off the bottom so the hero box stays about the same -- a
	   taller box is what forces cover to upscale the art in the first place. */
	.subpage.theme-fortnite .intro .intro-body {
		padding: 300px 0 40px;
	}

	.subpage.theme-battlefield .intro .intro-body {
		padding: 275px 0 55px;
	}
}

.subpage .navbar-brand.brand-square .logodark {
	max-width: none;
	max-height: 44px;
}

/* The collapsed bar is only ~55px tall, so trim the brand padding to keep a
   square mark inside it rather than hanging below the white strip. */
.subpage .navbar-custom.top-nav-collapse .navbar-brand.brand-square {
	padding-top: 7px;
	padding-bottom: 6px;
}

.subpage .navbar-custom.top-nav-collapse .navbar-brand.brand-square .logo,
.subpage .navbar-custom.top-nav-collapse .navbar-brand.brand-square .logodark {
	max-width: none;
	max-height: 42px;
}

.subpage .intro .intro-body .container {
	padding-top: 40px;
	padding-bottom: 40px;
}

.subpage .intro .intro-body .row {
	padding-top: 0;
	padding-bottom: 0;
}

.subpage .intro h1 {
	font-family: var(--display-font);
	font-size: 88px;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: .015em;
	text-transform: uppercase;
	margin: 0 0 18px;
	text-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}

.subpage .intro .hero-sub {
	font-family: var(--display-font);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 34px;
	text-shadow: 0 3px 16px rgba(0, 0, 0, .6);
}

.subpage .intro .hero-lede {
	max-width: 640px;
	margin: 0 auto 38px;
	font-size: 18px;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.subpage .scroll-hint {
	display: block;
	margin-top: 46px;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78) !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}


/* --------------------------------------------------------------------------
   3. Sections
   -------------------------------------------------------------------------- */

/* Light themed section. Mirrors the main site's bg-img4 / bg-img5 pattern so
   the torn-paper dividers blend the same way: white at the top edge, fading
   into the page's accent colour. */
.subpage .bg-theme {
	/* Opaque white at the divider edge, then enough alpha through the middle
	   that dark body copy stays readable over the texture layer. */
	background-image:
		linear-gradient(#fff 0%, rgba(255, 255, 255, .72) 28%, var(--theme-mid) 62%, var(--theme-wash) 100%),
		var(--theme-texture);
	/* Deliberately NOT background-attachment:fixed like the main site's
	   bg-img4/5. Those get their colour from a photo; these are gradient-led,
	   and a fixed attachment makes the gradient resolve against the viewport
	   instead of the section, which washes it out to near-white. */
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	color: var(--ink);
	text-shadow: none;
}

.subpage .bg-theme a {
	color: var(--ink);
}

.subpage .bg-theme a:hover {
	color: var(--accent-dark);
}

/* --- Light sections -------------------------------------------------------
   Used by the GTA page, which runs light rather than dark. body sets
   color:#fff globally, so these have to set the ink colour explicitly or the
   copy renders white-on-white. */
.subpage .bg-light {
	background-color: #fff;
	color: var(--ink);
	text-shadow: none;
}

.subpage .bg-light-alt {
	background-color: #f1f2f5;
	color: var(--ink);
	text-shadow: none;
}

.subpage .bg-light a,
.subpage .bg-light-alt a {
	color: var(--ink);
}

.subpage .bg-light a:hover,
.subpage .bg-light-alt a:hover {
	color: var(--accent-dark);
}

/* The accent is a pastel pink -- fine on dark, too weak on white, so the
   accented details switch to the deeper tone on light sections. */
.subpage .bg-light .subpage-header:after,
.subpage .bg-light-alt .subpage-header:after,
.subpage .bg-light .vice-checklist li:before,
.subpage .bg-light-alt .vice-checklist li:before,
.subpage .bg-light .section-kicker,
.subpage .bg-light-alt .section-kicker {
	color: var(--accent-dark);
}

.subpage .bg-light .subpage-header:after,
.subpage .bg-light-alt .subpage-header:after {
	background: var(--accent-dark);
}

.subpage .bg-light .media-caption,
.subpage .bg-light-alt .media-caption {
	color: rgba(0, 0, 0, .55);
}

/* divider-top/bottom.png are tinted #07070f to match .bg-dark. On a light page
   they have to carry the colour of the section they belong to instead, so the
   torn edge reads as that section tearing over its neighbour. brightness(0)
   flattens the art to black, then invert() lifts it to the target tone while
   the transparency is preserved either way. */
.subpage .section-divider--white {
	filter: brightness(0) invert(1);
}

.subpage .section-divider--light {
	filter: brightness(0) invert(.95);
}

.subpage .subpage-header {
	font-family: var(--display-font);
	font-size: 52px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin: 0 0 28px;
}

.subpage .subpage-header:after {
	content: "";
	display: block;
	width: 92px;
	height: 5px;
	margin-top: 18px;
	background: var(--accent);
}

.subpage .subpage-header--center:after {
	margin-left: auto;
	margin-right: auto;
}

.subpage .bg-theme .subpage-header:after {
	background: var(--accent-dark);
}

.subpage .section-lede {
	font-size: 21px;
	line-height: 1.6;
	max-width: 780px;
	margin: 0 auto 40px;
}

.subpage .section-kicker {
	font-family: var(--display-font);
	font-size: 18px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 22px;
}

.subpage .bg-theme .section-kicker {
	color: var(--kicker-on-light, var(--accent-dark));
}

/* Vertically centred two-column rows (Bootstrap 3 has no flex utilities). */
.subpage .row-align-center {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.subpage .row-align-center:before,
.subpage .row-align-center:after {
	display: none;
}

.subpage .row-align-center > [class*="col-"] {
	float: none;
}


/* --------------------------------------------------------------------------
   4. Media
   -------------------------------------------------------------------------- */

.subpage .media-frame {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--accent);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.subpage .media-caption {
	margin: 12px 0 0;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* Dashed variant of the frame. Must come after .media-frame so the dashed
   border-style wins the specificity tie. */
.subpage .media-frame--dashed {
	border-style: dashed;
}

/* The 56.25% padding has to resolve against a box that is already capped at
   the embed's own width, so the max-width lives on the wrapper. */
.subpage .video-wrap {
	max-width: 860px;
	margin: 0 auto;
}

.subpage .video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border: 3px solid var(--accent-dark);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

.subpage .video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* --------------------------------------------------------------------------
   5. Lists, feature tiles, buttons
   -------------------------------------------------------------------------- */

.subpage .vice-checklist {
	list-style: none;
	padding-left: 0;
	margin: 0 0 32px;
}

.subpage .vice-checklist li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 18px;
	line-height: 1.55;
}

.subpage .vice-checklist li:before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--accent);
}

.subpage .bg-theme .vice-checklist li:before {
	color: var(--accent-dark);
}

.subpage .icon-feature {
	padding: 0 18px 30px;
}

.subpage .icon-feature .icon-big {
	font-size: 56px;
	line-height: 90px;
	color: var(--accent-dark);
}

.subpage .icon-feature h3 {
	font-family: var(--display-font);
	font-size: 22px;
	letter-spacing: .06em;
	margin: 0 0 12px;
}

.subpage .icon-feature p {
	margin: 0;
	font-size: 16px;
}

/* Rockstar Newswire feature tiles (GTA page). Each one links out to the
   article it screenshots. */
.subpage .bg-black a {
	color: #fff;
}

.subpage .press-tile {
	display: block;
	height: 100%;
	margin-bottom: 30px;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .18);
	text-align: left;
	transition: border-color .3s ease, transform .3s ease;
}

.subpage .press-tile:hover,
.subpage .press-tile:focus {
	border-color: var(--accent);
	transform: translateY(-4px);
}

.subpage .press-tile .press-shot {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	object-position: top center;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.subpage .press-tile .press-body {
	padding: 20px 22px 26px;
}

.subpage .press-tile .press-eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
}

.subpage .press-tile .press-label {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
}

.subpage .btn-vice {
	background-color: var(--accent);
	border: 2px solid var(--accent);
	color: var(--ink) !important;
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 15px 40px;
}

.subpage .btn-vice:focus,
.subpage .btn-vice:hover {
	background-color: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--ink) !important;
	opacity: 1;
}

/* On Battlefield's Why Join the wash is the same orange as --accent, so the
   default fill disappears into it. Drop to a deep burnt orange (light text
   instead of ink) to hold the button's edge against the background. */
.subpage.theme-battlefield .bg-theme .btn-vice {
	background-color: #6b2c05;
	border-color: #6b2c05;
	color: #fff !important;
}

/* Hover darkens rather than lightens -- lifting it toward the accent put the
   fill back within ~2.6:1 of the wash. The bright border carries the
   affordance instead, and reads clearly against the dark fill. */
.subpage.theme-battlefield .bg-theme .btn-vice:focus,
.subpage.theme-battlefield .bg-theme .btn-vice:hover {
	background-color: #4f2003;
	border-color: var(--accent-2);
	color: #fff !important;
}

.subpage .discord-embed {
	width: 100%;
	max-width: 350px;
	height: 500px;
	border: 0;
}


/* --------------------------------------------------------------------------
   6. FAQ accordion

   <details>/<summary> keeps every question AND answer in the initial HTML,
   so the copy is crawlable with no JavaScript involved at all. Only the
   open/closed state is interactive.
   -------------------------------------------------------------------------- */

.subpage .faq-list {
	max-width: 860px;
	margin: 0 auto;
	text-align: left;
}

.subpage .faq-item {
	margin-bottom: 14px;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-left: 3px solid var(--accent);
}

.subpage .faq-item > summary {
	position: relative;
	display: block;
	padding: 20px 60px 20px 22px;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.5;
	list-style: none;
}

.subpage .faq-item > summary::-webkit-details-marker {
	display: none;
}

.subpage .faq-item > summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.subpage .faq-item > summary:after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	font-family: var(--display-font);
	font-size: 30px;
	line-height: 1;
	color: var(--accent);
}

.subpage .faq-item[open] > summary:after {
	content: "\2212";
}

.subpage .faq-answer {
	margin: 0;
	padding: 0 22px 22px;
	color: rgba(255, 255, 255, .82);
}

/* Without this, links in an answer inherit .bg-dark a{color:#fff} and read as
   slightly brighter body copy rather than something clickable. */
.subpage .faq-answer a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.subpage .faq-answer a:focus,
.subpage .faq-answer a:hover {
	color: var(--accent-2);
}

.subpage .bg-theme .faq-answer a {
	color: var(--accent-dark);
}

.subpage .bg-theme .faq-item {
	background: rgba(255, 255, 255, .72);
	border-color: rgba(0, 0, 0, .18);
	border-left-color: var(--accent-dark);
}

.subpage .bg-theme .faq-item > summary {
	color: var(--ink);
}

.subpage .bg-theme .faq-item > summary:after {
	color: var(--accent-dark);
}

.subpage .bg-theme .faq-answer {
	color: rgba(0, 0, 0, .78);
}

/* FAQ on a plain light section: the panel needs its own fill to read as a
   panel at all against white. */
.subpage .bg-light .faq-item,
.subpage .bg-light-alt .faq-item {
	background: #f4f5f8;
	border-color: rgba(0, 0, 0, .12);
	border-left-color: var(--accent-dark);
}

.subpage .bg-light-alt .faq-item {
	background: #fff;
}

.subpage .bg-light .faq-item > summary,
.subpage .bg-light-alt .faq-item > summary {
	color: var(--ink);
}

.subpage .bg-light .faq-item > summary:after,
.subpage .bg-light-alt .faq-item > summary:after {
	color: var(--accent-dark);
}

.subpage .bg-light .faq-answer,
.subpage .bg-light-alt .faq-answer {
	color: rgba(0, 0, 0, .75);
}

.subpage .bg-light .faq-answer a,
.subpage .bg-light-alt .faq-answer a {
	color: var(--accent-dark);
}

/* Press tiles on a light strip: white cards rather than black ones. */
.subpage .bg-light .press-tile,
.subpage .bg-light-alt .press-tile {
	background: #fff;
	border-color: rgba(0, 0, 0, .14);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.subpage .bg-light .press-tile .press-shot,
.subpage .bg-light-alt .press-tile .press-shot {
	border-bottom-color: rgba(0, 0, 0, .1);
}

.subpage .bg-light .press-tile .press-label,
.subpage .bg-light-alt .press-tile .press-label {
	color: var(--ink);
}

.subpage .bg-light .press-tile .press-eyebrow,
.subpage .bg-light-alt .press-tile .press-eyebrow {
	color: var(--accent-dark);
}

/* Footer on a light page: universal.css only dims .fa icons inside .bg-dark,
   so give them an explicit tone here. */
.subpage .bg-light-alt .fa,
.subpage .bg-light-alt .icon {
	color: var(--ink);
}

.subpage .bg-light-alt .small a {
	color: rgba(0, 0, 0, .7);
}


/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.subpage .intro h1 {
		font-size: 64px;
	}

	.subpage .intro .hero-sub {
		font-size: 24px;
	}

	.subpage .subpage-header {
		font-size: 40px;
	}

	.subpage .row-align-center {
		display: block;
	}

	.subpage .media-frame {
		margin-bottom: 34px;
	}

	/* Below 992px the columns stack, so the CTA lands directly above the Discord
	   embed instead of beside it. Centre it over the stacked layout and give it
	   room before the embed. If fit-content is unsupported the button simply
	   goes full width, and Bootstrap's own text-align keeps the label centred. */
	.subpage .row-align-center .btn-vice {
		display: block;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}
}

@media (max-width: 768px) {
	.subpage .intro .intro-body {
		padding: 120px 0 60px;
	}

	.subpage .intro h1 {
		font-size: 46px;
		line-height: 1.08;
	}

	.subpage .intro .hero-sub {
		font-size: 19px;
	}

	.subpage .subpage-header {
		font-size: 32px;
	}

	.subpage .subpage-header:after {
		width: 68px;
		height: 4px;
	}

	.subpage .discord-embed {
		max-width: 100%;
	}

	.subpage .faq-item > summary {
		padding: 16px 50px 16px 18px;
	}
}