/* ==========================================================================
   Aviagame — foundation: tokens, reset, layout and the components shared by
   every template (header, footer, breadcrumbs, table of contents, FAQ,
   rich text, author signature, 404).

   Class prefix `aviagame-`. The page sits on near-black; sections are laid
   directly on it and cards are a shade lighter with a hairline border.
   ========================================================================== */

:root {
	/* Surfaces ------------------------------------------------------------- */
	--aviagame-bg: #0A0C11;           /* page background */
	--aviagame-bg-2: #0D1016;         /* the darker band behind the header */
	--aviagame-panel: #111520;        /* the block a section is built from */
	--aviagame-card: #141822;         /* a card on the page */
	--aviagame-card-2: #171C27;       /* a card raised on a panel */
	--aviagame-line: #222838;         /* hairline border */
	--aviagame-line-2: #2C3345;       /* a rule that has to beat the card tint */

	/* Brand ----------------------------------------------------------------- */
	--aviagame-red: #FF2436;          /* the accent: kickers, figures, outlines */
	--aviagame-red-600: #DB1122;      /* pressed state */
	--aviagame-red-soft: rgba(255, 36, 54, .12);
	--aviagame-red-glow: rgba(255, 36, 54, .28);

	--aviagame-green: #2FD844;        /* every primary call to action */
	--aviagame-green-600: #23BE36;
	--aviagame-on-green: #06210B;

	--aviagame-gold: #FFB300;         /* rating stars */

	/* Type ------------------------------------------------------------------ */
	--aviagame-ink: #FFFFFF;
	--aviagame-ink-2: #C3C9D6;
	--aviagame-muted: #8A93A6;
	--aviagame-faint: #656E80;

	--aviagame-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Metrics --------------------------------------------------------------- */
	--aviagame-max: 1320px;
	--aviagame-gutter: 24px;
	--aviagame-gap: 72px;             /* vertical rhythm between sections */
	--aviagame-radius-sm: 8px;
	--aviagame-radius: 12px;
	--aviagame-radius-lg: 16px;
	--aviagame-header-h: 76px;

	--aviagame-shadow: 0 18px 40px rgba(0, 0, 0, .35);

	/* The red light every card carries: a rim painted inside it, and the bloom it
	   casts outside. Layer the rim over the card's own colour —
	   `background: var(--aviagame-glow-rim), var(--aviagame-card)`. */
	--aviagame-glow-rim: radial-gradient(125% 105% at 50% 50%, transparent 32%, var(--aviagame-red-soft) 72%, var(--aviagame-red-glow) 100%);
	--aviagame-glow: 0 0 32px -18px var(--aviagame-red-glow);
	--aviagame-glow-hover: 0 0 42px -12px var(--aviagame-red-glow);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--aviagame-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--aviagame-bg);
	color: var(--aviagame-ink-2);
	font-family: var(--aviagame-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: hidden makes the body a scroll container and sticky
	   children stop sticking. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5, h6 { color: var(--aviagame-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--aviagame-red);
	outline-offset: 3px;
	border-radius: 4px;
}

.aviagame-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */

.aviagame-container {
	width: 100%;
	max-width: calc(var(--aviagame-max) + var(--aviagame-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--aviagame-gutter);
}

/* The bordered block some sections are built from. */
.aviagame-panel {
	background: var(--aviagame-panel);
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-lg);
	padding: 28px;
}

/* Every section below the header keeps the same rhythm. */
.aviagame-shell > * + * { margin-top: var(--aviagame-gap); }

/* A section's SEO copy belongs to the block above it, so it sits closer. */
.aviagame-shell > .aviagame-seo { margin-top: 32px; }

/* The contents strip reads as part of the hero in the design — it sits just
   under the fold, not a full section gap away from it. */
.aviagame-shell > .aviagame-hero + .aviagame-toc-strip { margin-top: 0; }

.aviagame-shell > :last-child { margin-bottom: var(--aviagame-gap); }

/* --- Section head --------------------------------------------------------- */

.aviagame-kicker {
	margin: 0 0 8px;
	color: var(--aviagame-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.aviagame-section-title {
	margin: 0;
	font-size: clamp(26px, 3.1vw, 36px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* The accent an editor reaches for inside a heading. */
.aviagame-section-title em,
.aviagame-hero__title em,
.aviagame-cta__title em,
.aviagame-game__panel-title em {
	font-style: normal;
	color: var(--aviagame-red);
}

.aviagame-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.aviagame-section-head__main { min-width: 0; }

.aviagame-section-head__aside {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
	padding-bottom: 4px;
}

.aviagame-section-head__note {
	margin: 0;
	color: var(--aviagame-muted);
	font-size: 13px;
}

/* The heading's own supporting line sits under it, not beside it, when the
   block is one the design lays out that way — the note above handles the rest. */
.aviagame-section-head__main .aviagame-section-head__note { margin-top: 10px; }

/* --- Buttons --------------------------------------------------------------
   primary  green CTA, carries a trailing arrow
   ghost    red outline on a dark surface
   danger   solid red
   dark     quiet outline inside a card                                        */

.aviagame-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--aviagame-radius-sm);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.aviagame-btn--sm { min-height: 40px; padding: 9px 18px; font-size: 13px; }

.aviagame-btn__icon,
.aviagame-btn__arrow { display: inline-flex; flex: none; }

.aviagame-btn__icon svg { width: 18px; height: 18px; }

/* An icon that is artwork rather than a glyph: same slot, a touch larger, since
   a drawing reads smaller than a line icon at the same box. It carries no
   currentColor, so nothing here tints it. */
.aviagame-icon-art { width: 20px; height: 20px; object-fit: contain; }

/* The artwork is drawn with air around it, so it needs a bigger box than a glyph
   and, to make up for that air, less of the button's own gap. */
.aviagame-btn__icon .aviagame-icon-art {
	width: 26px;
	height: 26px;
	margin-inline-end: -4px;
}
.aviagame-btn__arrow svg { width: 17px; height: 17px; }

.aviagame-btn--primary {
	background: var(--aviagame-green);
	border-color: var(--aviagame-green);
	color: var(--aviagame-on-green);
}

.aviagame-btn--primary:hover {
	background: var(--aviagame-green-600);
	border-color: var(--aviagame-green-600);
}

.aviagame-btn--ghost {
	border-color: var(--aviagame-red);
	color: var(--aviagame-ink);
}

.aviagame-btn--ghost .aviagame-btn__icon { color: var(--aviagame-red); }
.aviagame-btn--ghost:hover { background: var(--aviagame-red-soft); }

.aviagame-btn--danger {
	background: var(--aviagame-red);
	border-color: var(--aviagame-red);
	color: var(--aviagame-ink);
}

.aviagame-btn--danger:hover {
	background: var(--aviagame-red-600);
	border-color: var(--aviagame-red-600);
}

.aviagame-btn--dark {
	background: var(--aviagame-bg);
	border-color: var(--aviagame-line-2);
	color: var(--aviagame-ink);
}

.aviagame-btn--dark:hover { border-color: var(--aviagame-red); }

/* --- Header ---------------------------------------------------------------
   JS contract: .aviagame-burger toggles .aviagame-is-open on .aviagame-nav and
   flips aria-expanded. Above 1024px the drawer state is cleared. */

.aviagame-header {
	position: relative;
	z-index: 40;
	background: var(--aviagame-bg-2);
	color: var(--aviagame-ink);
}

.aviagame-header__bar {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: var(--aviagame-header-h);
}

/* --- Wordmark ------------------------------------------------------------- */

/* flex: none and max-width: none — the bar may run out of room, but the logo is
   not what gives way. The nav shrinks and wraps instead (see the nav rules), and
   the global img reset would otherwise squeeze the mark to fit. */
.aviagame-logo { flex: none; display: block; }

/* Capped by height, not width: the mark here is nearly square (348×307), and a
   34px cap shrank it to an unreadable 39px. The bar is 76px tall, so 52px sits
   inside it with room to spare. */
.aviagame-logo__img {
	width: auto;
	max-width: none;
	height: auto;
	max-height: 52px;
}

/* The fallback wordmark prints the site name, and a site name can be a whole
   SEO title — 56 characters here. Unclamped it pushes the header buttons out
   until their labels are clipped, so it is capped and shrinks instead. Upload
   a logo in Customize > Site Identity and this never shows. */
.aviagame-logo__text {
	display: block;
	max-width: 280px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--aviagame-ink);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* flex: none — the buttons keep their labels whatever else is in the bar. */
.aviagame-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	margin-inline-start: auto;
}

/* Primary navigation ------------------------------------------------------- */

.aviagame-nav { min-width: 0; }

/* A menu with more items than the bar can hold must never push the page into a
   horizontal scroll. It wraps to a second row first — labels stay readable and
   the taller bar is the signal that the menu needs fewer items — and only a
   single label too long for a whole row gets clipped, via the min-width: 0
   chain below. */
.aviagame-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

/* The caret sits beside the link, so the item is the row that holds both. */
.aviagame-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.aviagame-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 10px 14px;
	color: var(--aviagame-ink-2);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .18s ease;
}

.aviagame-nav__link > span { overflow: hidden; text-overflow: ellipsis; }

.aviagame-nav__link:hover,
.aviagame-nav__item:hover > .aviagame-nav__link { color: var(--aviagame-ink); }

/* A button, so it is styled back down to the arrow it looks like. */
.aviagame-nav__caret {
	flex: none;
	display: inline-flex;
	align-items: center;
	margin-inline-start: -8px;
	padding: 10px 12px 10px 0;
	color: var(--aviagame-ink-2);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .18s ease;
}

/* max-width: none — the reset caps every svg at 100%, and inside a button whose
   own width comes from its content that percentage resolves to zero.
   The arrow is what turns, not the button: the button is a wide tap target in
   the drawer, and rotating that swings the arrow across it. */
.aviagame-nav__caret svg {
	width: 12px;
	height: 8px;
	max-width: none;
	transition: transform .18s ease;
}
.aviagame-nav__item:hover > .aviagame-nav__caret { color: var(--aviagame-ink); }

/* The current item keeps a short red rule under it, as in the design. */
.aviagame-nav__link--current { color: var(--aviagame-ink); }

.aviagame-nav__link--current::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 14px;
	height: 2px;
	background: var(--aviagame-red);
	content: '';
}

/* Second level: a dropdown on a wide screen, a plain nested list in the drawer. */
.aviagame-subnav {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	display: none;
	min-width: 210px;
	padding: 8px;
	background: var(--aviagame-card);
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	box-shadow: var(--aviagame-shadow);
}

/* Desktop only, and that breakpoint is the whole point: in the drawer the same
   rule outranked the [hidden] the accordion sets, and since a tap leaves the
   caret focused, :focus-within kept the list open under a collapsed chevron. */
@media (min-width: 1024px) {
	.aviagame-nav__item:hover > .aviagame-subnav,
	.aviagame-nav__item:focus-within > .aviagame-subnav { display: block; }
}

.aviagame-subnav__link {
	display: block;
	padding: 9px 12px;
	border-radius: var(--aviagame-radius-sm);
	font-size: 14px;
}

.aviagame-subnav__link:hover { background: var(--aviagame-card-2); color: var(--aviagame-ink); }

/* Burger ------------------------------------------------------------------- */

.aviagame-burger {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	flex: none;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-sm);
}

.aviagame-burger span,
.aviagame-burger span::before,
.aviagame-burger span::after {
	position: absolute;
	inset-inline: 11px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: '';
}

.aviagame-burger span { top: 50%; transform: translateY(-50%); }
.aviagame-burger span::before { top: -7px; inset-inline: 0; }
.aviagame-burger span::after { top: 7px; inset-inline: 0; }

/* --- Footer --------------------------------------------------------------- */

.aviagame-footer {
	margin-top: var(--aviagame-gap);
	padding-block: 56px 20px;
	background: var(--aviagame-bg-2);
	border-top: 1px solid var(--aviagame-line);
}

.aviagame-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

.aviagame-footer__logo { margin-bottom: 14px; }

.aviagame-footer__tagline {
	max-width: 280px;
	color: var(--aviagame-muted);
	font-size: 13px;
	line-height: 1.7;
}

.aviagame-footer__col-title {
	margin-bottom: 16px;
	color: var(--aviagame-ink);
	font-size: 15px;
	font-weight: 700;
}

.aviagame-footer__links { display: grid; gap: 9px; }

.aviagame-footer__link {
	color: var(--aviagame-muted);
	font-size: 13px;
	transition: color .18s ease;
}

.aviagame-footer__link:hover { color: var(--aviagame-red); }

.aviagame-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aviagame-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--aviagame-line);
	border-radius: 50%;
	background: var(--aviagame-card);
	color: var(--aviagame-ink-2);
	transition: color .18s ease, border-color .18s ease;
}

.aviagame-footer__social-link:hover { color: var(--aviagame-red); border-color: var(--aviagame-red); }
.aviagame-footer__social-link svg { width: 17px; height: 17px; }

/* The responsible-gaming note that closes the last column. */
.aviagame-footer__age {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}

.aviagame-footer__age-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--aviagame-line-2);
	border-radius: 50%;
	color: var(--aviagame-ink);
	font-size: 12px;
	font-weight: 700;
}

.aviagame-footer__age-body { display: flex; flex-direction: column; gap: 2px; }

.aviagame-footer__age-title {
	color: var(--aviagame-ink);
	font-size: 13px;
	font-weight: 600;
}

.aviagame-footer__age-note {
	max-width: 240px;
	color: var(--aviagame-faint);
	font-size: 11px;
	line-height: 1.5;
}

.aviagame-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--aviagame-line);
	color: var(--aviagame-faint);
	font-size: 12px;
}

.aviagame-footer__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aviagame-footer__flag { width: 18px; height: auto; border-radius: 2px; }

/* --- Breadcrumbs ---------------------------------------------------------- */

.aviagame-trail { margin-bottom: 18px; }

.aviagame-trail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	color: var(--aviagame-muted);
	font-size: 13px;
}

.aviagame-trail__item + .aviagame-trail__item::before {
	content: '/';
	margin-inline-end: 8px;
	color: var(--aviagame-faint);
}

.aviagame-trail a:hover { color: var(--aviagame-red); }

/* The page you are on, marked the way the current nav item is. */
.aviagame-trail__item--current > span {
	color: var(--aviagame-ink-2);
	text-decoration: underline;
	text-decoration-color: var(--aviagame-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Yoast prints its own trail as plain text with separators, not a list. */
.aviagame-trail > span { font-size: 13px; color: var(--aviagame-muted); }

/* --- Table of contents ----------------------------------------------------
   A block at the top of an article, open on arrival and collapsible.

   JS contract: .aviagame-toc__card gets .is-ready once wired and .is-open while
   expanded; .aviagame-toc__panel is height-animated, so it must clip its
   overflow and must NOT have vertical padding of its own. The panel ships
   without `hidden`, so a reader with no JavaScript still gets the list. */

.aviagame-toc__card {
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-card);
}

.aviagame-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 20px;
	text-align: start;
}

.aviagame-toc__title { color: var(--aviagame-ink); font-weight: 700; }

.aviagame-toc__chevron {
	flex: none;
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid var(--aviagame-red);
	border-block-end: 2px solid var(--aviagame-red);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.aviagame-toc__card.is-open .aviagame-toc__chevron { transform: rotate(-135deg); }

.aviagame-toc__panel {
	overflow: hidden;
	transition: height .25s ease;
}

.aviagame-toc__panel[hidden] { display: block; height: 0; }

.aviagame-toc__list { padding: 0 20px 16px; }

.aviagame-toc__item + .aviagame-toc__item { margin-top: 8px; }
.aviagame-toc__item--l3 { padding-inline-start: 16px; }

.aviagame-toc__link { color: var(--aviagame-muted); font-size: 14px; }
.aviagame-toc__link:hover,
.aviagame-toc__link.is-current { color: var(--aviagame-red); }

.aviagame-toc--inline { display: block; }

/* --- FAQ accordion (shared by the landing block and the article layout) ----
   JS contract: .aviagame-faq__item carries .is-open, .aviagame-faq__panel is
   height-animated — same clipping rule as the contents panel above. */

.aviagame-faq__list { display: grid; gap: 10px; }

.aviagame-faq__item {
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-sm);
	background: var(--aviagame-glow-rim), var(--aviagame-card);
	box-shadow: var(--aviagame-glow);
	align-self: start;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* The accordion ships open, so an open row keeps the quiet border and only takes
   the brighter glow — a red outline on every row at once would shout. The red
   edge stays what the pointer does. */
.aviagame-faq__item.is-open {
	border-color: var(--aviagame-line-2);
	box-shadow: var(--aviagame-glow-hover);
}

.aviagame-faq__item:hover {
	border-color: var(--aviagame-red);
	box-shadow: var(--aviagame-glow-hover);
}

/* The accordion in a long-read sits inside .aviagame-rich, whose h3 rule carries a
   28px top margin meant for headings in running text. Here the question is a row of
   the accordion, and that margin pushed it off its own trigger. */
.aviagame-faq__q,
.aviagame-rich .aviagame-faq__q {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
}

.aviagame-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 20px;
	text-align: start;
}

.aviagame-faq__q-text { color: var(--aviagame-ink); }

/* A chevron that turns over when the answer opens. */
.aviagame-faq__chevron {
	flex: none;
	width: 9px;
	height: 9px;
	margin-bottom: 3px;
	border-inline-end: 2px solid var(--aviagame-muted);
	border-block-end: 2px solid var(--aviagame-muted);
	transform: rotate(45deg);
	transition: transform .2s ease, border-color .2s ease;
}

.aviagame-faq__item.is-open .aviagame-faq__chevron {
	margin-bottom: -3px;
	transform: rotate(-135deg);
	border-color: var(--aviagame-red);
}

.aviagame-faq__panel {
	overflow: hidden;
	transition: height .25s ease;
}

.aviagame-faq__panel[hidden] { display: block; height: 0; }

.aviagame-faq__panel-inner {
	padding: 0 20px 18px;
	color: var(--aviagame-muted);
	font-size: 14px;
}

.aviagame-faq__panel-inner > * + * { margin-top: 12px; }

.aviagame-faq__title { margin-bottom: 20px; }

/* --- Rich text ------------------------------------------------------------ */

/* Long-form copy reads at its own size: the 15px/1.6 the interface uses is
   tight for a few thousand words on a dark background. */
.aviagame-rich {
	color: var(--aviagame-ink-2);
	font-size: 16px;
	line-height: 1.75;
}

.aviagame-rich > * + * { margin-top: 18px; }

.aviagame-rich h2 { margin-top: 36px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.2; }
.aviagame-rich h3 { margin-top: 28px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.aviagame-rich h4 { margin-top: 22px; font-size: 17px; font-weight: 700; }

/* Text links only. A button dropped into a wysiwyg field is still an <a>, and
   this rule used to repaint it red over its own variant colour. */
.aviagame-rich a:not(.aviagame-btn) { color: var(--aviagame-red); text-decoration: underline; }

.aviagame-rich ul,
.aviagame-rich ol { padding-inline-start: 22px; }

.aviagame-rich ul { list-style: disc; }
.aviagame-rich ol { list-style: decimal; }
.aviagame-rich li { margin-inline-start: 2px; }
.aviagame-rich li + li { margin-top: 8px; }
.aviagame-rich li::marker { color: var(--aviagame-red); }

.aviagame-rich li > ul,
.aviagame-rich li > ol { margin-top: 8px; }

.aviagame-rich blockquote {
	padding-inline-start: 18px;
	border-inline-start: 3px solid var(--aviagame-red);
	color: var(--aviagame-ink);
}

.aviagame-rich img { border-radius: var(--aviagame-radius); }

/* Content tables arrive from the old editor with an inline style on nearly every
   tag — blue gradients, Arial, hard-coded whites, 463 of them across the site.
   An inline style outranks any selector, so the theme's own look has to be
   forced here. This is the one place in the stylesheet where !important is the
   right tool rather than a patch. */
.aviagame-rich table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: none !important;
	color: var(--aviagame-ink-2) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.aviagame-rich thead,
.aviagame-rich tbody,
.aviagame-rich tfoot,
.aviagame-rich tr {
	background: none !important;
	color: inherit !important;
	border: 0 !important;
}

.aviagame-rich th,
.aviagame-rich td {
	padding: 12px 16px !important;
	border: 1px solid var(--aviagame-line) !important;
	background: none !important;
	color: var(--aviagame-ink-2) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	text-align: start !important;
	vertical-align: top !important;
}

.aviagame-rich th {
	background: var(--aviagame-card-2) !important;
	color: var(--aviagame-ink) !important;
	font-weight: 600 !important;
}

/* Buttons and figures that the shortcode migration wrote into post content.

   Both need more room than the 16px the rich-text flow gives a paragraph: in
   the old markup they sat between us_separator shortcodes, and those are gone.
   margin-block rather than margin-top, so the space is there even when the
   element opens or closes the article and `* + *` never fires. */
.aviagame-rich .aviagame-btn { text-decoration: none; }

.aviagame-btn-row { margin-block: 32px; }
.aviagame-btn-row--center { text-align: center; }

.aviagame-rich__figure { margin-block: 28px; }
.aviagame-rich__figure img { border-radius: var(--aviagame-radius); }
.aviagame-rich__figure--center { text-align: center; }
.aviagame-rich__figure--center img { margin-inline: auto; }

/* Wide tables scroll rather than break the layout (aviagame_wrap_tables). */
.aviagame-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.aviagame-table-scroll > table { min-width: 560px; }

/* --- SEO copy block (aviagame_seo) ----------------------------------------

   No max-width of its own: the element already carries .aviagame-container,
   so the copy lines up with every other block on the page. Adding one here
   would only narrow it again. */

/* --- Author signature -----------------------------------------------------

   Printed by aviagame_author_signature(), and switched on per page with the
   `signature_show` field. Publishing who wrote a page next to when it was
   written and how long it takes to read is the authorship signal search
   engines look for, which is why the dates sit in this block rather than
   under the title. */

.aviagame-author {
	display: grid;
	gap: 22px;
	padding-top: 26px;
	border-top: 1px solid var(--aviagame-line);
}

.aviagame-author__label {
	color: var(--aviagame-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.aviagame-author__card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.aviagame-author__avatar {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--aviagame-card-2);
	border: 2px solid var(--aviagame-line-2);
}

.aviagame-author__avatar img { width: 100%; height: 100%; object-fit: cover; }

.aviagame-author__initial { color: var(--aviagame-ink); font-size: 30px; font-weight: 800; }

.aviagame-author__body { min-width: 0; }
.aviagame-author__body > * + * { margin-top: 8px; }

.aviagame-author__name {
	color: var(--aviagame-ink);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.aviagame-author__name a:hover { color: var(--aviagame-red); }

.aviagame-author__role {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--aviagame-line-2);
	border-radius: 999px;
	color: var(--aviagame-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.aviagame-author__note {
	max-width: 70ch;
	color: var(--aviagame-muted);
	font-size: 14px;
	line-height: 1.7;
}

.aviagame-author__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--aviagame-red);
	font-size: 13px;
	font-weight: 700;
}

.aviagame-author__more:hover { text-decoration: underline; }

/* When it was written, how long it takes and how many have read it. */
.aviagame-author__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-line);
}

.aviagame-author__meta-item {
	padding: 14px 18px;
	background: var(--aviagame-card);
}

.aviagame-author__meta-item dt {
	margin-bottom: 4px;
	color: var(--aviagame-faint);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.aviagame-author__meta-item dd {
	margin: 0;
	color: var(--aviagame-ink);
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.aviagame-author__card { gap: 14px; }
	.aviagame-author__avatar { width: 64px; height: 64px; }
	.aviagame-author__initial { font-size: 24px; }
	.aviagame-author__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 404 ------------------------------------------------------------------ */

.aviagame-notfound { padding-block: 96px; }

.aviagame-notfound__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.aviagame-notfound__inner > * + * { margin-top: 18px; }

.aviagame-notfound__code {
	color: var(--aviagame-red);
	font-size: clamp(56px, 11vw, 104px);
	font-weight: 800;
	line-height: 1;
}

.aviagame-notfound__title { font-size: clamp(24px, 4vw, 36px); font-weight: 800; text-transform: uppercase; }
.aviagame-notfound__text { color: var(--aviagame-muted); }

.aviagame-notfound__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.aviagame-notfound .search-form {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.aviagame-notfound .search-field {
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-sm);
	background: var(--aviagame-card);
	color: var(--aviagame-ink);
}

/* --- Reveal on scroll ------------------------------------------------------
   JS contract: main.js adds .aviagame-reveal, sets --aviagame-delay and then
   adds .is-in when the element enters the viewport. Skipped entirely under
   prefers-reduced-motion, so no separate media query is needed here. */

/* The glow properties ride along here because this shorthand replaces whatever a
   card declared for itself: usp items, bonuses, reviews and FAQ rows are all
   reveal targets, and without them the hover would snap instead of fading. */
.aviagame-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity .45s ease var(--aviagame-delay, 0ms),
		transform .45s ease var(--aviagame-delay, 0ms),
		border-color .18s ease,
		box-shadow .18s ease;
}

.aviagame-reveal.is-in { opacity: 1; transform: none; }

/* --- Pagination (archives and the author page) ---------------------------- */

.aviagame-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 44px;
}

.aviagame-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 10px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-sm);
	background: var(--aviagame-card);
	font-size: 14px;
}

.aviagame-pagination .page-numbers:hover { border-color: var(--aviagame-red); }

.aviagame-pagination .page-numbers.current {
	background: var(--aviagame-red);
	border-color: var(--aviagame-red);
	color: var(--aviagame-ink);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1119px) {
	.aviagame-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.aviagame-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
	:root { --aviagame-gap: 56px; }

	.aviagame-burger { display: block; }

	/* The drawer. Below this width .aviagame-nav is closed until the burger
	   adds .aviagame-is-open — that class is the whole JS contract. */
	.aviagame-nav {
		position: absolute;
		inset: 100% 0 auto;
		display: none;
		padding: 12px var(--aviagame-gutter) 20px;
		background: var(--aviagame-bg-2);
		border-block: 1px solid var(--aviagame-line);
		box-shadow: var(--aviagame-shadow);
	}

	.aviagame-nav.aviagame-is-open { display: block; }

	.aviagame-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Link and caret on one row, the nested list on the next. */
	.aviagame-nav__item { flex-wrap: wrap; }

	.aviagame-nav__link { flex: 1 1 auto; padding: 13px 0; }
	.aviagame-nav__link--current::after { inset-inline: 0 auto; width: 24px; }

	/* A thumb-sized target, and the arrow turns over when the list is open. */
	.aviagame-nav__caret {
		flex: none;
		justify-content: flex-end;
		width: 48px;
		margin-inline-start: 0;
		padding: 13px 0;
	}

	.aviagame-nav__item.is-open > .aviagame-nav__caret { color: var(--aviagame-ink); }
	.aviagame-nav__item.is-open > .aviagame-nav__caret svg { transform: rotate(180deg); }

	/* JS contract: height is animated, so no vertical padding of its own — the
	   links inside carry it. Served open, and collapsed by the script on load,
	   so the list is still reachable without JS. */
	.aviagame-subnav {
		position: static;
		display: block;
		flex: 0 0 100%;
		min-width: 0;
		padding: 0 0 0 16px;
		overflow: hidden;
		background: none;
		border: 0;
		box-shadow: none;
		transition: height .28s ease;
	}

	.aviagame-subnav[hidden] { display: none; }

	.aviagame-section-head { align-items: flex-start; flex-direction: column; gap: 14px; }
	.aviagame-section-head__aside { padding-bottom: 0; }
}

@media (max-width: 767px) {
	.aviagame-logo__img { max-height: 42px; }

	:root {
		--aviagame-gutter: 16px;
		--aviagame-gap: 44px;
	}

	.aviagame-panel { padding: 20px; }

	.aviagame-author__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.aviagame-footer { padding-block: 40px 20px; }
	/* The link columns stay side by side here — they are short lists, and one
	   column each would leave half the screen empty and push the legal row far
	   down. Only the brand keeps the full width. */
	.aviagame-footer__inner { gap: 28px 20px; }
	.aviagame-footer__bottom { margin-top: 32px; }
}

@media (max-width: 479px) {
	.aviagame-header__bar { gap: 12px; }
	.aviagame-header__actions { gap: 8px; }
	.aviagame-btn { padding-inline: 16px; }
}