/*
 * Ludically — catalogue-style design system
 * Tokens and colors sampled directly from Catalogue/ (2026 print catalogue).
 * Headline font is a free stand-in for the catalogue's Komika Text/Title
 * (commercial Comicraft font, license not confirmed for web use).
 */

:root {
	--lud-cream: #FFFDED;
	--lud-ink: #2B2B2B;
	--lud-ink-soft: #55524A;
	--lud-gray-shadow: #C7C4BE;
	--lud-white: #FFFFFF;
	--lud-blue: #41BAE3;
	--lud-yellow: #FFDD49;

	--font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Baloo 2', var(--font-body);

	--lud-radius-card: 42px;
	--lud-radius-box: 20px;
}

.lud-page {
	background: var(--lud-cream);
	color: var(--lud-ink);
	font-family: var(--font-body);
}

.lud-page .content {
	padding-top: 0;
	border-right: none;
	margin-right: 0;
}

.lud-page h1, .lud-page h2, .lud-page h3, .lud-page h4,
.lud-page .lud-display {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
}

/* ---------------------------------------------------------------- */
/* Shared "diagonal corner" card frame                               */
/* ---------------------------------------------------------------- */

.lud-card {
	--corner-color-1: var(--game-color, var(--lud-blue));
	/* 6vw is relative to the viewport, not to .lud-card, so past the point
	   where the card hits its own max-width (1200px) the side padding keeps
	   growing with the viewport while the card itself stops — shrinking the
	   usable content width the wider the window gets. clamp() stops it
	   growing once it reaches what 6vw works out to at that max-width
	   (1200 * 0.06 = 72px), same technique as .lud-lineup below. */
	--lud-card-pad-x: clamp(20px, 6vw, 72px);
	position: relative;
	overflow: hidden;
	background: var(--lud-cream);
	border-radius: var(--lud-radius-card);
	padding: 48px var(--lud-card-pad-x) 56px;
	/* margin: 32px auto; */
	max-width: 1200px;
	/* Enfold's dynamic theme CSS resets border-color on every element under
	   .main_color (".main_color div{border-color:#e1e1e1}" etc), and that
	   selector (class+tag) outranks our single-class .lud-card — !important
	   is the only way to reliably keep the outer border on the accent color. */
	border: 3px solid var(--corner-color-1) !important;
}

.lud-card__corner {
	position: absolute;
	width: 62%;
	height: 40%;
	z-index: 0;
	pointer-events: none;
}

.lud-card__corner--shadow {
	background: var(--lud-gray-shadow);
	opacity: 0.8;
}

.lud-card__corner--tl {
	top: -12%;
	left: -16%;
	width: 56%;
	height: 24%;
	transform: rotate(27deg);
	background: var(--corner-color-1);
}
.lud-card__corner--tl.lud-card__corner--shadow {
	top: -8%;
	left: -22%;
}

.lud-card__content {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------- */
/* Badges / pills                                                    */
/* ---------------------------------------------------------------- */

.lud-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	box-shadow: 0 4px 10px rgba(0,0,0,.15);
	transform: rotate(-8deg);
}
.lud-badge--new { background: #6ABF4B; }
.lud-badge--soon { background: var(--lud-blue); font-size: 13px; }

.lud-badge--card {
	width: 56px;
	height: 56px;
	font-size: 10px;
}
.lud-badge--soon.lud-badge--card { font-size: 9px; }

.lud-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--game-color, var(--lud-blue));
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
}
/* Enfold's dynamic CSS sets color on bare a/strong/b tags at a specificity
   that ties (or beats) a single-class selector — !important guarantees the
   pill's text stays black regardless of load order. */
.lud-pill,
.lud-pill strong { color: var(--lud-ink) !important; }
.lud-pill strong { font-family: var(--font-display); font-weight: 700; }

.lud-msrp {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	background: #fff;
	border: 3px solid var(--corner-color-1, var(--game-color)) !important;
	border-radius: 999px;
	padding: 10px 22px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--lud-ink) !important;
}
.lud-msrp small { font-size: 12px; font-weight: 600; text-transform: uppercase; }
.lud-msrp .lud-msrp__value { font-size: 30px; }

/* ---------------------------------------------------------------- */
/* Single game page                                                  */
/* ---------------------------------------------------------------- */

.lud-game {
	--game-color: #41BAE3;
}

/* Two columns: artwork/credits/description on the left, everything else
   on the right — mirrors the print catalogue layout. Both tracks use
   minmax(...,1fr) rather than a fixed px sidebar so long content (spec
   values, credit names) can never overflow and get clipped by the card's
   overflow:hidden. */
.lud-game__grid {
	display: grid;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	gap: 40px;
	/* stretch, not start: the right column needs to span the row's full
	   height so its bottom (the accent info panel) always lands on the
	   card's true bottom edge, whichever column is taller. */
	align-items: stretch;
}
.lud-game__col-left,
.lud-game__col-right { min-width: 0; }
.lud-game__col-right {
	display: flex;
	flex-direction: column;
}

.lud-game__box { margin-bottom: 22px; }
.lud-game__box img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,.2));
}

.lud-game__box-title {
	text-align: center;
	padding: 0.5em;
	color: var(--game-color) !important;
	margin: 0px;
}

.lud-game__logo img {
	/* text-align:center on .lud-game__headline only centers inline content —
	   this is a block box (for max-height/width to work predictably), so it
	   needs its own margin:auto to actually center within that width. */
	display: block;
	margin: 0 auto;
	max-height: 110px;
	max-width: 100%;
	width: auto;
	height: auto;
}

.lud-game__headline {
	text-align: center;
	margin-bottom: 10px;
}

.lud-game__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 18px 0 26px;
}

.lud-game__meta {
	display: flex;
	justify-content: center;
	gap: 28px;
	/* basis:auto (not the flex:1 shorthand's 0%) so this only grows into
	   leftover space beyond its own content width — flex:1's basis:0%
	   made the icons wrap internally once the availability pill claimed
	   space, even though everything fit fine before. */
	flex: 1 1 auto;
	flex-wrap: wrap;
}
.lud-game__meta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--game-color);
	font-weight: 700;
	font-size: 14px;
}
.lud-game__meta-item svg { width: 30px; height: 30px; }
.lud-game__meta-item span.lud-game__meta-label { color: var(--lud-ink); font-size: 11px; font-weight: 500; text-transform: uppercase; }

.lud-game__lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 0 26px;
}
.lud-box {
	border: 2px solid var(--game-color) !important;
	border-radius: var(--lud-radius-box);
	padding: 18px 22px;
}
.lud-box h3,
.lud-game__info-block h3 {
	font-size: 15px;
	letter-spacing: .04em;
	margin: 0 0 10px;
}
.lud-box ul,
.lud-game__info-block ul { margin: 0; padding: 0; list-style: none; }
.lud-box li,
.lud-game__info-block li { padding: 4px 0; font-size: 15px; }

/* Contents / Technical spec sit on a solid accent-color panel, the way
   they do on the print catalogue page. It's a plain rectangle (not the
   card's rotated corner flourish) bled out with negative margins so it
   touches the card's real right and bottom borders — the negative margins
   mirror the card's own padding (--lud-card-pad-x right, 56px bottom)
   exactly, via the same custom property so they can't drift out of sync,
   and margin-top:auto (with .lud-game__col-right as a stretched flex
   column) pushes it down to the column's bottom whichever side of the
   page is taller. overflow:hidden on .lud-card clips its bottom-right
   square corner back down to the card's own rounded corner automatically. */
.lud-game__info {
	margin: 24px calc(-1 * var(--lud-card-pad-x)) -56px 0;
	margin-top: auto;
	padding: 26px var(--lud-card-pad-x) 56px 28px;
	background: var(--game-color);
	border-top-left-radius: var(--lud-radius-box);
}
.lud-game__info,
.lud-game__info * {
	color: var(--lud-ink) !important;
}
.lud-game__info-block + .lud-game__info-block { margin-top: 22px; }

.lud-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 13.5px;
	border-bottom: 1px solid rgba(43,43,43,.25);
}
.lud-spec-row:last-child { border-bottom: none; }
.lud-spec-row span:first-child { color: var(--lud-ink-soft) !important; }

/* Enfold/Avia builder markup pulled through the_content()/WYSIWYG fields
   (e.g. a nested .av-default-color wrapper) can carry its own theme-color
   text color that wins over an ancestor rule via normal inheritance rules
   no matter how the ancestor is weighted — so force every descendant here
   black too, not just the wrapper. */
.lud-game__tagline,
.lud-game__tagline *,
.lud-game__description,
.lud-game__description * {
	color: var(--lud-ink) !important;
}

.lud-game__tagline {
	text-align: center;
	font-size: 16px;
	margin: 0 0 20px;
}

.lud-game__description {
	font-size: 15px;
	line-height: 1.65;
}
.lud-game__description p { margin: 0 0 1em; }

.lud-game__footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
}

.lud-game__cta {
	margin-top: 24px;
}
.lud-game__cta a.lud-btn {
	display: inline-block;
	background: var(--lud-ink);
	color: #fff !important;
	font-family: var(--font-display);
	font-weight: 700;
	border-radius: 999px;
	padding: 14px 34px;
	text-decoration: none;
}
.lud-game__cta a.lud-btn:hover { opacity: .85; }

.lud-credits { font-size: 13px; color: var(--lud-ink-soft); margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.lud-credits span { display: inline-flex; align-items: center; gap: 8px; }
.lud-credits svg { width: 16px; height: 16px; flex-shrink: 0; }

a.lud-rules-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	/* .main_color a{color:#265729} ties this selector on specificity —
	   !important guarantees black wins regardless of stylesheet order. */
	color: var(--lud-ink) !important;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: 10px 20px;
	box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
a.lud-rules-link:hover { opacity: .85; }

@media (max-width: 980px) {
	.lud-game__grid { grid-template-columns: 1fr; gap: 28px; }
	.lud-game__box { max-width: 280px; margin: 0 auto 22px; }
	/* Shrink the top-left accent shape in the single-column layout so it
	   reads as a corner flourish instead of overrunning stacked content. */
	.lud-card__corner--tl { width: 70%; height: 16%; }
	.lud-hero {
		visibility: visible !important;
	}
}

@media (max-width: 780px) {
	.lud-game__lists { grid-template-columns: 1fr; }
	.lud-card { padding: 40px 20px 44px; }
}

/* ---------------------------------------------------------------- */
/* Home / lineup                                                     */
/* ---------------------------------------------------------------- */

.lud-hero {
	--game-color: var(--lud-blue);
	text-align: center;
	padding: 0.5em;
	visibility: hidden;
}
.lud-hero img.lud-hero__logo { max-width: 320px; height: auto; margin: 0 auto 18px; }
.lud-hero h1 { font-size: 42px; color: var(--lud-blue); margin: 0 0 4px; }
.lud-hero .lud-hero__year { color: var(--lud-yellow); font-size: 30px; }

.lud-lineup {
	max-width: 1200px;
	margin: 0 auto;
	/* clamp caps at the padding 5vw already reaches right at max-width (1200*0.05=60px), so
	   growth is unchanged up to that point but the side padding — and therefore each card's
	   width — stops changing beyond it, instead of continuing to shift as vw keeps growing
	   against an already-capped container. */
	padding: 0 clamp(20px, 5vw, 60px) 80px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
}
@media (max-width: 980px) { .lud-lineup { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lud-lineup { grid-template-columns: 1fr; } }

.lud-game-card {
	--game-color: #41BAE3;
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--lud-cream);
	/* Enfold's dynamic CSS resets border-color on every <a> under
	   .main_color (".main_color a{border-color:#e1e1e1}"), at higher
	   specificity than a single class — same bug fixed for .lud-card /
	   .lud-box / .lud-msrp, just missed here originally. */
	border: 3px solid var(--game-color) !important;
	border-radius: 28px;
	text-decoration: none;
	color: var(--lud-ink);
	padding: 26px 22px 24px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.lud-game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.lud-game-card__corner {
	position: absolute;
	top: -20%;
	left: -24%;
	width: 55%;
	height: 42%;
	background: var(--game-color);
	transform: rotate(27deg);
	z-index: 0;
}
/* height:100% + margin-top:auto on __avail below: cards in a row are
   already equal height (CSS Grid's default align-items:stretch), but
   taglines run one or two lines depending on the game, so without this
   the date sits right under a short tagline instead of flush with every
   other card's date in the row. */
.lud-game-card__body { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.lud-game-card__body img.game-box { display: block; position: static; float: none; max-height: 150px; max-width: 220px; width: auto; height: auto; margin: 0 auto 14px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.lud-game-card__body img.game-logo { display: block; position: static; float: none; max-height: 60px; max-width: 220px; width: auto; height: auto; margin: 0 auto 10px; }
.lud-game-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 6px; }
.lud-game-card__tagline { color: var(--lud-ink-soft); }
.lud-game-card__avail { display: inline-block; margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--game-color); }

/* ---------------------------------------------------------------- */
/* Site nav — dropdown indicator                                     */
/* ---------------------------------------------------------------- */

.av-main-nav .menu-item-has-children > a .avia-menu-text::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	margin-bottom: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}

/* This site's header uses Enfold's "minimal header" style, which hides
   Enfold's built-in current-page underline entirely
   (".av_minimal_header .avia-menu-fx{display:none}") — so nothing was ever
   highlighted, not even a literal current-menu-item, let alone the "Games"
   dropdown parent while browsing a single game (which only ever gets
   .current-menu-parent/.current-menu-ancestor, never .current-menu-item
   itself). Add our own always-visible indicator instead of relying on
   that hidden element. */
.av-main-nav .current-menu-item > a .avia-menu-text,
.av-main-nav .current-menu-parent > a .avia-menu-text,
.av-main-nav .current-menu-ancestor > a .avia-menu-text {
	font-weight: 700;
	border-bottom: 2px solid currentColor;
}

/* ---------------------------------------------------------------- */
/* Site nav — mobile/tablet collapsed header                        */
/* ---------------------------------------------------------------- */

/*
 * Below Enfold's mobile-menu breakpoint (max-width:989px, since this header
 * is set to switch at "tablet"), Enfold's own CSS hides every regular menu
 * item and shows only ones marked .menu-item-avia-special (search icon,
 * burger button) — see enfold/css/layout.css ~2221-2420. That's a fairly
 * high-specificity, media-query-scoped rule (".responsive #top
 * .av-main-nav .menu-item{display:none}" etc), so !important is the only
 * reliable way to override it per item without replicating every one of
 * its selector variants.
 */
@media only screen and (max-width: 989px) {
	/* Search: drop the icon from the collapsed bar. It's already excluded
	   from the burger dropdown itself (Enfold's hamburger-menu.js strips
	   any ".noMobile" item when building that list — see
	   enfold/js/avia-snippet-hamburger-menu.js:445 — and the search item
	   carries that class), so hiding it here removes it everywhere on
	   mobile, not just the top bar. */
	#top .av-main-nav #menu-item-search {
		display: none !important;
	}

	/* Language switcher: it's a plain custom-link menu item (Polylang's
	   "lang-item" classes don't exempt it from Enfold's blanket
	   .menu-item{display:none}), so it was swept up in that same rule and
	   only reachable by opening the burger menu. Bring the flag back into
	   the visible bar — float:left already comes from the unconditional
	   base rule ".av-main-nav li{float:left}" (layout.css:762), so setting
	   display:block here (matching how Enfold shows menu-item-avia-special
	   items) is enough to sit it inline next to the burger button. */
	#top .av-main-nav .lang-item {
		display: block !important;
	}
}